From b1909f7bbf9164c9893bd262372da9dde56f3905 Mon Sep 17 00:00:00 2001
From: wanglihui <1769794040@qq.com>
Date: Tue, 24 Dec 2024 22:56:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A5=BD=E5=8F=8B?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E6=8C=89=E7=85=A7=E6=97=B6=E9=97=B4=E3=80=81?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/message.ts                       |  9 +++
 src/pages/message/components/Devices.vue | 97 ++++++++++++++++++++++++
 src/pages/message/record.vue             | 44 ++++++++++-
 src/pages/message/recordpersonal.vue     | 37 ++++++++-
 src/pages/user/friends.vue               |  7 ++
 5 files changed, 188 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/message/components/Devices.vue

diff --git a/src/api/message.ts b/src/api/message.ts
index 789c5e1..1200a09 100644
--- a/src/api/message.ts
+++ b/src/api/message.ts
@@ -78,3 +78,12 @@ export function messageRecordGet(params: any) {
     params
   });
 }
+
+// 查看设备
+export function messageUserDevices(params: any) {
+  return request({
+    url: '/manager/user/devices',
+    method: 'get',
+    params
+  });
+}
diff --git a/src/pages/message/components/Devices.vue b/src/pages/message/components/Devices.vue
new file mode 100644
index 0000000..6f27025
--- /dev/null
+++ b/src/pages/message/components/Devices.vue
@@ -0,0 +1,97 @@
+<script lang="ts" name="Devices" setup>
+import { messageUserDevices } from '@/api/message';
+
+interface IProps {
+  value: boolean;
+  title?: string;
+  uid?: string;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  value: false,
+  title: '查看设备',
+  uid: ''
+});
+
+const emits = defineEmits<{
+  (e: 'update:value', item: boolean): void;
+}>();
+
+watch(
+  () => props.value,
+  val => {
+    if (val) {
+      getDevices();
+    } else {
+      tableData.value = [];
+    }
+  }
+);
+
+const loadTable = ref(false);
+const tableData = ref([]);
+
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'device_id',
+    label: '设备ID',
+    width: 200
+  },
+  {
+    prop: 'device_model',
+    label: '设备名称',
+    width: 120
+  },
+  {
+    prop: 'device_model',
+    label: '设备型号',
+    width: 120
+  },
+  {
+    prop: 'last_login',
+    label: '最后登录时间'
+  }
+]);
+
+const getDevices = async () => {
+  loadTable.value = true;
+  const res = await messageUserDevices({ uid: props.uid });
+  loadTable.value = false;
+  tableData.value = res as any;
+};
+
+const onClose = () => {
+  emits('update:value', false);
+};
+</script>
+
+<template>
+  <el-dialog
+    :model-value="value"
+    :width="680"
+    :align-center="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :draggable="true"
+    :z-index="99"
+    :title="title"
+    @close="onClose"
+  >
+    <div class="h-500px overflow-hidden">
+      <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+        <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
+          <template #default="scope">
+            <template v-if="item.render">
+              <component :is="item.render" :row="scope.row"> </component>
+            </template>
+            <template v-else-if="item.formatter">
+              <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
+            </template>
+            <template v-else>
+              <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop!] }}</slot>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
diff --git a/src/pages/message/record.vue b/src/pages/message/record.vue
index 5a61aea..ff63e22 100644
--- a/src/pages/message/record.vue
+++ b/src/pages/message/record.vue
@@ -56,6 +56,8 @@
         />
       </div>
     </div>
+    <!-- 查看设备 -->
+    <Devices v-model:value="devicesValue" :uid="devicesUid" />
   </bd-page>
 </template>
 
@@ -69,6 +71,8 @@ meta:
 import { useRoute } from 'vue-router';
 import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
 import BdMsg from '@/components/BdMsg/index.vue';
+import Devices from './components/Devices.vue';
+
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
 import { messageRecordGet, messageDelete } from '@/api/message';
@@ -82,12 +86,12 @@ const column = reactive<Column.ColumnOptions[]>([
     prop: 'message_id',
     label: '消息编号',
     fixed: 'left',
-    width: 140
+    width: 200
   },
   {
     prop: 'sender_name',
     label: '发送者名字',
-    width: 120
+    width: 140
   },
   {
     prop: 'sender',
@@ -127,6 +131,21 @@ const column = reactive<Column.ColumnOptions[]>([
       }
     }
   },
+  {
+    prop: 'device_id',
+    label: '设备ID',
+    width: 160
+  },
+  {
+    prop: 'device_name',
+    label: '设备名称',
+    width: 200
+  },
+  {
+    prop: 'device_model',
+    label: '设备类型',
+    width: 120
+  },
   {
     prop: 'revoke',
     label: '是否撤回',
@@ -153,10 +172,13 @@ const column = reactive<Column.ColumnOptions[]>([
     label: '操作',
     align: 'center',
     fixed: 'right',
-    width: 100,
+    width: 190,
     render: (scope: any) => {
       return (
         <ElSpace>
+          <ElButton type="primary" onClick={() => onDevices(scope.row)}>
+            查看设备
+          </ElButton>
           {scope.row['is_deleted'] == 0 ? (
             <ElButton type="danger" onClick={() => onDel(scope.row)}>
               删除
@@ -245,6 +267,22 @@ const onDel = (item: any) => {
     });
 };
 
+// 查看设备
+const devicesValue = ref(false);
+const devicesUid = ref('');
+
+const onDevices = (item: any) => {
+  if (item.sender) {
+    devicesUid.value = item.sender;
+    devicesValue.value = true;
+  } else {
+    ElMessage({
+      type: 'warning',
+      message: '无用户，不能查看设备！'
+    });
+  }
+};
+
 // 初始化
 onMounted(() => {
   getUserList();
diff --git a/src/pages/message/recordpersonal.vue b/src/pages/message/recordpersonal.vue
index 35833f7..7ab1155 100644
--- a/src/pages/message/recordpersonal.vue
+++ b/src/pages/message/recordpersonal.vue
@@ -17,9 +17,12 @@
             <el-form-item class="mb-0 !mr-16px">
               <el-input v-model="queryFrom.keyword" placeholder="发送者名字/消息内容" clearable />
             </el-form-item>
-            <el-form-item class="mb-0 !mr-0">
+            <el-form-item class="mb-0 !mr-16px">
               <el-button type="primary" @click="getUserList">查询</el-button>
             </el-form-item>
+            <el-form-item class="mb-0 !mr-0">
+              <el-button type="primary" @click="onDevices">查看设备</el-button>
+            </el-form-item>
           </el-form>
         </div>
       </div>
@@ -59,6 +62,8 @@
         />
       </div>
     </div>
+    <!-- 查看设备 -->
+    <Devices v-model:value="devicesValue" :uid="devicesUid" />
   </bd-page>
 </template>
 
@@ -72,6 +77,8 @@ meta:
 import { useRoute } from 'vue-router';
 import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
 import BdMsg from '@/components/BdMsg/index.vue';
+import Devices from './components/Devices.vue';
+
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
 import { messageRecordpersonalGet, messageDelete } from '@/api/message';
@@ -85,12 +92,12 @@ const column = reactive<Column.ColumnOptions[]>([
     prop: 'message_id',
     label: '消息编号',
     fixed: 'left',
-    width: 140
+    width: 200
   },
   {
     prop: 'sender_name',
     label: '发送者名字',
-    width: 120
+    width: 140
   },
   {
     prop: 'sender',
@@ -130,6 +137,21 @@ const column = reactive<Column.ColumnOptions[]>([
       }
     }
   },
+  {
+    prop: 'device_id',
+    label: '设备ID',
+    width: 160
+  },
+  {
+    prop: 'device_name',
+    label: '设备名称',
+    width: 200
+  },
+  {
+    prop: 'device_model',
+    label: '设备类型',
+    width: 120
+  },
   {
     prop: 'revoke',
     label: '是否撤回',
@@ -250,6 +272,15 @@ const onDel = (item: any) => {
     });
 };
 
+// 查看设备
+const devicesValue = ref(false);
+const devicesUid = ref('');
+
+const onDevices = () => {
+  devicesUid.value = route.query.touid as string;
+  devicesValue.value = true;
+};
+
 // 初始化
 onMounted(() => {
   getUserList();
diff --git a/src/pages/user/friends.vue b/src/pages/user/friends.vue
index 4148a25..1a91d40 100644
--- a/src/pages/user/friends.vue
+++ b/src/pages/user/friends.vue
@@ -15,6 +15,12 @@
             <el-form-item class="mb-0 !mr-16px">
               <el-input v-model="queryFrom.keyword" placeholder="uid/手机号/用户名" clearable />
             </el-form-item>
+            <el-form-item class="mb-0 !mr-16px">
+              <el-select v-model="queryFrom.sort_type" placeholder="请选择">
+                <el-option label="添加时间排序" :value="0" />
+                <el-option label="按消息顺序" :value="1" />
+              </el-select>
+            </el-form-item>
             <el-form-item class="mb-0 !mr-0">
               <el-button type="primary" @click="getUserList">查询</el-button>
             </el-form-item>
@@ -138,6 +144,7 @@ const total = ref(0);
 // 查询
 const queryFrom = reactive({
   keyword: '',
+  sort_type: 0,
   uid: route.query.uid,
   page_size: 15,
   page_index: 1