feat: 新增好友筛选按照时间、查看设备信息

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
+  });
+}

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>

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();

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();

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