feat: ✨新增群列表聊天记录和黑名单成员

src/api/group.ts

@@ -17,3 +17,21 @@ export function groupDisablelistGet(params: any) {
     params
   });
 }
+
+// 群成员
+export function groupGroupmembersGet(params: any, groupNo: string) {
+  return request({
+    url: `/manager/groups/${groupNo}/members`,
+    method: 'get',
+    params
+  });
+}
+
+// 黑名单列表
+export function groupBlacklistGet(params: any, groupNo: string) {
+  return request({
+    url: `/manager/groups/${groupNo}/members/blacklist`,
+    method: 'get',
+    params
+  });
+}

src/api/message.ts

@@ -18,7 +18,7 @@ export function messageProhibitWordsGet(params: any) {
   });
 }
 
-// 聊天消息
+// 单聊天消息
 export function messageRecordpersonalGet(params: any) {
   return request({
     url: '/manager/message/recordpersonal',
@@ -26,3 +26,12 @@ export function messageRecordpersonalGet(params: any) {
     params
   });
 }
+
+// 群聊天消息
+export function messageRecordGet(params: any) {
+  return request({
+    url: '/manager/message/record',
+    method: 'get',
+    params
+  });
+}

src/api/user.ts

@@ -26,3 +26,20 @@ export function userFriendsGet(params: any) {
     params
   });
 }
+
+// 黑名单列表
+export function userBlacklistGet(params: any) {
+  return request({
+    url: 'manager/user/blacklist',
+    method: 'get',
+    params
+  });
+}
+
+// 用户封禁/解禁
+export function userLiftbanPut(params: any) {
+  return request({
+    url: `manager/user/liftban/${params.uid}/${params.status}`,
+    method: 'put'
+  });
+}

src/pages/group/groupblacklist.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="wh-full flex-col">
+    <!-- 布局 -->
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left">
+          <p class="m-0 font-600">
+            <el-text type="primary">{{ $route.query.name }}</el-text>
+            的黑名单成员
+          </p>
+        </div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <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-0">
+              <el-button type="primary" @click="getTableList">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <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>
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  title: 黑名单成员
+  isAffix: false
+</route>
+
+<script lang="tsx" setup>
+import { useRoute } from 'vue-router';
+import { ElAvatar, ElText } from 'element-plus';
+import { BU_DOU_CONFIG } from '@/config';
+// API 接口
+import { groupBlacklistGet } from '@/api/group';
+
+const route = useRoute();
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'avatar',
+    label: '头像',
+    align: 'center',
+    width: 100,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['uid']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
+      }
+      return (
+        <ElAvatar src={img_url} size={54}>
+          {scope.row['name']}
+        </ElAvatar>
+      );
+    }
+  },
+  {
+    prop: 'name',
+    label: '用户昵称'
+  },
+  {
+    prop: 'uid',
+    label: '用户ID'
+  },
+  {
+    prop: 'role',
+    label: '操作者',
+    render: (scope: any) => {
+      let text = '成员';
+      let type: any = 'primary';
+      // 群主
+      if (scope?.row['role'] == 1) {
+        text = '群主';
+        type = 'success';
+      }
+      // 群主
+      if (scope?.row['role'] == 2) {
+        text = '管理员';
+        type = 'warning';
+      }
+      return <ElText type={type}>{text}</ElText>;
+    }
+  },
+  {
+    prop: 'remark',
+    label: '备注'
+  },
+  {
+    prop: 'create_at',
+    label: '拉入黑名单时间'
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  page_size: 15,
+  page_index: 1
+});
+
+const getTableList = () => {
+  loadTable.value = true;
+  groupBlacklistGet(queryFrom, route.query.groupNo as string).then((res: any) => {
+    loadTable.value = false;
+    tableData.value = res.list;
+    total.value = res.count;
+  });
+};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getTableList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getTableList();
+};
+
+// 初始化
+onMounted(() => {
+  getTableList();
+});
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>

src/pages/group/grouplist.vue

@@ -63,10 +63,13 @@ meta:
 </route>
 
 <script lang="tsx" setup>
+import { useRouter } from 'vue-router';
 import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
 import { groupListGet } from '@/api/group';
+
+const router = useRouter();
 /**
  * 表格
  */
@@ -140,13 +143,13 @@ const column = reactive<Column.ColumnOptions[]>([
           </ElButton>
           <ElDropdown
             v-slots={{
-              default: () => <ElButton>更多</ElButton>,
+              default: () => <ElButton class={'bu-button'}>更多</ElButton>,
               dropdown: () => {
                 return (
                   <ElDropdownMenu>
-                    <ElDropdownItem onClick={() => bb(scope.row)}>群成员</ElDropdownItem>
+                    <ElDropdownItem onClick={() => onGroupdisablelist(scope.row)}>群成员</ElDropdownItem>
-                    <ElDropdownItem>聊天记录</ElDropdownItem>
+                    <ElDropdownItem onClick={() => onRcord(scope.row)}>聊天记录</ElDropdownItem>
-                    <ElDropdownItem>黑名单成员</ElDropdownItem>
+                    <ElDropdownItem onClick={() => onBlackList(scope.row)}>黑名单成员</ElDropdownItem>
                     <ElDropdownItem>{scope.row.forbidden === 1 ? '禁言中' : '禁言'}</ElDropdownItem>
                     <ElDropdownItem>{scope.row.status === 1 ? '封禁' : '解禁'}</ElDropdownItem>
                   </ElDropdownMenu>
@@ -192,11 +195,40 @@ const onCurrentChange = (current: number) => {
   getUserList();
 };
 
-const aa = (a: any) => {
+// 群成员
-  console.log(a);
+const onGroupdisablelist = (item: any) => {
+  router.push({
+    path: '/group/groupmembers',
+    query: {
+      groupNo: item.group_no,
+      name: item.name
+    }
+  });
 };
 
-const bb = (a: any) => {
+// 聊天记录
+const onRcord = (item: any) => {
+  router.push({
+    path: '/message/record',
+    query: {
+      groupNo: item.group_no,
+      name: item.name
+    }
+  });
+};
+
+// 黑名单列表
+const onBlackList = (item: any) => {
+  router.push({
+    path: '/group/groupblacklist',
+    query: {
+      groupNo: item.group_no,
+      name: item.name
+    }
+  });
+};
+
+const aa = (a: any) => {
   console.log(a);
 };
 

src/pages/group/groupmembers.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="wh-full flex-col">
+    <!-- 布局 -->
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left">
+          <p class="m-0 font-600">
+            <el-text type="primary">{{ $route.query.name }}</el-text>
+            群成员
+          </p>
+        </div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <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-button type="primary" @click="getUserList">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <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>
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  title: 群成员
+  isAffix: false
+</route>
+
+<script lang="tsx" setup>
+import { useRoute } from 'vue-router';
+import { ElButton, ElSpace, ElText, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
+import { BU_DOU_CONFIG } from '@/config';
+// API 接口
+import { groupGroupmembersGet } from '@/api/group';
+
+const route = useRoute();
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'name',
+    label: '用户昵称',
+    fixed: 'left',
+    width: 200
+  },
+  {
+    prop: 'avatar',
+    label: '用户头像',
+    align: 'center',
+    width: 100,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['uid']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
+      }
+      return (
+        <ElAvatar src={img_url} size={54}>
+          {scope.row['name']}
+        </ElAvatar>
+      );
+    }
+  },
+  {
+    prop: 'uid',
+    label: '用户ID',
+    fixed: 'left',
+    width: 320
+  },
+  {
+    prop: 'status',
+    label: '成员角色',
+    width: 120,
+    render: (scope: any) => {
+      let text = '成员';
+      let type: any = 'primary';
+      // 群主
+      if (scope?.row['role'] == 1) {
+        text = '群主';
+        type = 'success';
+      }
+      // 群主
+      if (scope?.row['role'] == 2) {
+        text = '管理员';
+        type = 'warning';
+      }
+      return <ElText type={type}>{text}</ElText>;
+    }
+  },
+  {
+    prop: 'remark',
+    label: '群内备注'
+  },
+  {
+    prop: 'created_at',
+    label: '入群时间',
+    width: 180
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 180,
+    render: (scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="primary">发消息</ElButton>
+          <ElButton type="danger" onClick={() => onDel(scope.row)}>
+            删除
+          </ElButton>
+        </ElSpace>
+      );
+    }
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  page_size: 15,
+  page_index: 1
+});
+
+const getUserList = () => {
+  loadTable.value = true;
+  groupGroupmembersGet(queryFrom, route.query.groupNo as string).then((res: any) => {
+    loadTable.value = false;
+    tableData.value = res.list;
+    total.value = res.count;
+  });
+};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getUserList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getUserList();
+};
+
+// 删除
+const onDel = (_item: any) => {
+  ElMessageBox.confirm('确定，是否删除此成员?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '开发中..'
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消成功！'
+      });
+    });
+};
+
+// 初始化
+onMounted(() => {
+  getUserList();
+});
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>

src/pages/message/record.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="wh-full flex-col">
+    <!-- 布局 -->
+
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left">
+          <p class="m-0 font-600">
+            <el-text type="primary">{{ $route.query.name }}</el-text>
+            的聊天记录
+          </p>
+        </div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <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-button type="primary" @click="getUserList">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <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>
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  title: 聊天记录
+  isAffix: false
+</route>
+
+<script lang="tsx" setup>
+import { useRoute } from 'vue-router';
+import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
+import { BU_DOU_CONFIG } from '@/config';
+// API 接口
+import { messageRecordGet } from '@/api/message';
+
+const route = useRoute();
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'message_id',
+    label: '消息编号',
+    fixed: 'left',
+    width: 140
+  },
+  {
+    prop: 'sender_name',
+    label: '发送者名字',
+    width: 120
+  },
+  {
+    prop: 'sender',
+    label: '发送者ID',
+    width: 260
+  },
+  {
+    prop: 'avatar',
+    label: '发送者头像',
+    align: 'center',
+    width: 100,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['sender']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['sender']}/avatar`;
+      }
+      return (
+        <ElAvatar src={img_url} size={54}>
+          {scope.row['sender_name']}
+        </ElAvatar>
+      );
+    }
+  },
+  {
+    prop: 'payload',
+    label: '消息内容',
+    minWidth: 300,
+    render: (scope: any) => {
+      const showContent = scope.row['payload'];
+      // 是否加密
+      if (scope.row['is_encrypt'] == 1) {
+        return '加密消息，无法查看';
+      } else {
+        return showContent?.content;
+      }
+    }
+  },
+  {
+    prop: 'revoke',
+    label: '是否撤回',
+    width: 120,
+    formatter(row: any) {
+      return row.revoke === 1 ? '是' : '否';
+    }
+  },
+  {
+    prop: 'is_deleted',
+    label: '是否删除',
+    width: 120,
+    formatter(row: any) {
+      return row.is_deleted === 1 ? '是' : '否';
+    }
+  },
+  {
+    prop: 'created_at',
+    label: '发送时间',
+    width: 170
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 100,
+    render: (scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="danger" onClick={() => onDel(scope.row)}>
+            删除
+          </ElButton>
+        </ElSpace>
+      );
+    }
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  channel_id: route.query.groupNo,
+  page_size: 15,
+  page_index: 1
+});
+
+const getUserList = () => {
+  loadTable.value = true;
+  messageRecordGet(queryFrom).then((res: any) => {
+    loadTable.value = false;
+    tableData.value = res.list;
+    total.value = res.count;
+  });
+};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getUserList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getUserList();
+};
+
+// 删除
+const onDel = (_item: any) => {
+  ElMessageBox.confirm('确定，是否删除此消息?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '开发中..'
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消成功！'
+      });
+    });
+};
+
+// 初始化
+onMounted(() => {
+  getUserList();
+});
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>

src/pages/message/recordpersonal.vue

@@ -209,8 +209,7 @@ const onCurrentChange = (current: number) => {
 };
 
 // 删除
-const onDel = (item: any) => {
+const onDel = (_item: any) => {
-  console.log(item);
   ElMessageBox.confirm('确定，是否删除此消息?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',

src/pages/user/disablelist.vue

@@ -63,10 +63,10 @@ meta:
 </route>
 
 <script lang="tsx" setup>
-import { ElButton, ElSpace, ElAvatar } from 'element-plus';
+import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
-import { userDisablelistGet } from '@/api/user';
+import { userDisablelistGet, userLiftbanPut } from '@/api/user';
 /**
  * 表格
  */
@@ -136,7 +136,7 @@ const column = reactive([
     render: (scope: any) => {
       return (
         <ElSpace>
-          <ElButton type="primary" onClick={() => aa(scope.row)}>
+          <ElButton type="primary" onClick={() => onUseLiftban(scope.row)}>
             解禁
           </ElButton>
         </ElSpace>
@@ -177,8 +177,39 @@ const onCurrentChange = (current: number) => {
   getUserList();
 };
 
-const aa = (a: any) => {
+// 解禁
-  console.log(a);
+const onUseLiftban = (item: any) => {
+  ElMessageBox.confirm(`确定要解禁用户${item.name} 吗`, `解禁用户`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      const fromLiftban = {
+        uid: item.uid,
+        status: 1
+      };
+      userLiftbanPut(fromLiftban)
+        .then((_res: any) => {
+          getUserList();
+          ElMessage({
+            type: 'success',
+            message: `解禁用户成功！`
+          });
+        })
+        .catch(err => {
+          if (err.status == 400) {
+            ElMessage.error(err.msg);
+          }
+        });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消成功！'
+      });
+    });
 };
 
 // 初始化

src/pages/user/userblacklist.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="wh-full flex-col">
+    <!-- 布局 -->
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left">
+          <p class="m-0 font-600">
+            <el-text type="primary">{{ $route.query.name }}</el-text>
+            的黑名单
+          </p>
+        </div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <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-0">
+              <el-button type="primary" @click="getTableList">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <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>
+      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
+        <div></div>
+        <el-pagination
+          v-model:current-page="queryFrom.page_index"
+          v-model:page-size="queryFrom.page_size"
+          :page-sizes="[15, 20, 30, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  title: 黑名单列表
+  isAffix: false
+</route>
+
+<script lang="tsx" setup>
+import { useRoute } from 'vue-router';
+import { ElAvatar } from 'element-plus';
+import { BU_DOU_CONFIG } from '@/config';
+// API 接口
+import { userBlacklistGet } from '@/api/user';
+
+const route = useRoute();
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'name',
+    label: '好友昵称',
+    width: 140
+  },
+  {
+    prop: 'uid',
+    label: '好友ID',
+    width: 320
+  },
+  {
+    prop: 'avatar',
+    label: '好友头像',
+    align: 'center',
+    width: 100,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['uid']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
+      }
+      return (
+        <ElAvatar src={img_url} size={54}>
+          {scope.row['name']}
+        </ElAvatar>
+      );
+    }
+  },
+  {
+    prop: 'create_at',
+    label: '拉入黑名单时间',
+    width: 170
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    minWidth: 260
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  uid: route.query.uid,
+  page_size: 15,
+  page_index: 1
+});
+
+const getTableList = () => {
+  loadTable.value = true;
+  userBlacklistGet(queryFrom).then((res: any) => {
+    loadTable.value = false;
+    tableData.value = res;
+    total.value = res.length;
+  });
+};
+
+// 分页page-size
+const onSizeChange = (size: number) => {
+  queryFrom.page_size = size;
+  getTableList();
+};
+
+// 分页page-size
+const onCurrentChange = (current: number) => {
+  queryFrom.page_index = current;
+  getTableList();
+};
+
+// 初始化
+onMounted(() => {
+  getTableList();
+});
+</script>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>

src/pages/user/userlist.vue

@@ -65,16 +65,16 @@ meta:
 
 <script lang="tsx" setup>
 import { useRouter } from 'vue-router';
-import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessage, ElMessageBox } from 'element-plus';
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
-import { userListGet } from '@/api/user';
+import { userListGet, userLiftbanPut } from '@/api/user';
 
 const router = useRouter();
 /**
  * 表格
  */
-const column = reactive([
+const column = reactive<Column.ColumnOptions[]>([
   {
     prop: 'name',
     label: '用户名',
@@ -180,13 +180,13 @@ const column = reactive([
                       <i-bd-every-user class={'mr-4px'} />
                       好友列表
                     </ElDropdownItem>
-                    <ElDropdownItem>
+                    <ElDropdownItem onClick={() => onUseBlackList(scope.row)}>
                       <i-bd-personal-privacy class={'mr-4px'} />
                       黑名单列表
                     </ElDropdownItem>
-                    <ElDropdownItem>
+                    <ElDropdownItem onClick={() => onUseLiftban(scope.row)}>
                       <i-bd-info class={'mr-4px'} />
-                      禁封
+                      {scope.row.status === 1 ? '封禁' : '解禁'}
                     </ElDropdownItem>
                   </ElDropdownMenu>
                 );
@@ -246,6 +246,53 @@ const onFriends = (item: any) => {
   });
 };
 
+// 黑名单列表
+const onUseBlackList = (item: any) => {
+  router.push({
+    path: '/user/userblacklist',
+    query: {
+      uid: item.uid,
+      name: item.name
+    }
+  });
+};
+
+// 用户封禁/解封操作
+const onUseLiftban = (item: any) => {
+  const text = item.status == 1 ? '封禁' : '解禁';
+  ElMessageBox.confirm(`确定要${text}用户${item.name} 吗`, `${text}用户`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      const fromLiftban = {
+        uid: item.uid,
+        status: item.status == 1 ? 0 : 1
+      };
+      userLiftbanPut(fromLiftban)
+        .then((_res: any) => {
+          getUserList();
+          ElMessage({
+            type: 'success',
+            message: `${text}用户成功！`
+          });
+        })
+        .catch(err => {
+          if (err.status == 400) {
+            ElMessage.error(err.msg);
+          }
+        });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消成功！'
+      });
+    });
+};
+
 // 初始化
 onMounted(() => {
   getUserList();