调整通讯录中员工通讯录的按姓名搜索对应人员功能，调整对应样式

src/components/x-naive-ui/x-search-form/index.vue

@@ -34,6 +34,10 @@ const props = defineProps({
   loading: {
     type: Boolean,
     default: false,
+  },
+  customInputPlaceholder: {
+    type: String,
+    default: '请输入',
   }
 })
 
@@ -205,7 +209,7 @@ initData()
           <template v-if="item.type === 'input'">
             <n-input
               :value="formData[item.key]"
-              placeholder="请输入"
+              :placeholder="customInputPlaceholder"
               @input="value => handleInputChange(value, item)"
               clearable
               v-bind="item.props"

src/utils/auth.js

@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b891bd3a81a1ac4e73e2aed60deeaec60792c525cc0c96e8f4a666eca6ee7a10716507b402cde5759bbcda1fa681fbe4dcdfe05abbc2b1644c68dc74ebaf8d9c9cc4eb61afaf3de52fa357dbfdfe17acf14'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8987a3f4c77465504ba46f90370546f2f3656c248bd63549a43410178becfd0d1888ecbb8e82d291e68cf9da8ec1096e2d8abd4bb9d7edc62d38469e56226683693764f82df03eaa47fe6fd21a9cb83e0e'
 }
 
 /**

src/views/message/inner/IndexSider.vue

@@ -61,15 +61,22 @@ const state = reactive({
     height: '846px',
     backgroundColor: '#F9F9FD'
   }, //自定义模态框样式
-  searchConfig: [
+  addressBookSearchConfig: [
     {
       label: '姓名',
-      key: 'name',
+      key: 'nickName',
       type: 'input',
       valueType: 'string'
     }
-  ], // 搜索配置
+  ], // 通讯录搜索配置
-
+  groupChatListSearchConfig: [
+    {
+      label: '群聊名称',
+      key: 'groupName',
+      type: 'input',
+      valueType: 'string'
+    }
+  ], // 群聊列表搜索配置
   treeData: [],
   expandedKeys: [],
   clickKey: 3,
@@ -77,11 +84,11 @@ const state = reactive({
   treeSelectData: {},
   addressBookColumns: [
     {
-      title: '姓名',
+      title: '姓名 【工号】',
-      field: 'name',
+      field: 'nickName',
       width: 200,
       render(row, index) {
-        return row.nickName
+        return row.nickName + '【' + row.jobNum + '】'
       }
     },
     {
@@ -90,8 +97,12 @@ const state = reactive({
       width: 400,
       ellipsis: true,
       render(row, index) {
-        let positionName = row.nowPositions.map((item) => item.name).join(' , ')
+        let positionNames = Array.isArray(row.depPositions)
-        return positionName
+          ? row.depPositions.flatMap((dep) =>
+              Array.isArray(dep.positions) ? dep.positions.map((pos) => pos.name) : []
+            )
+          : []
+        return positionNames.join(' , ')
       }
     },
     {
@@ -114,12 +125,57 @@ const state = reactive({
       }
     }
   ], // 通讯录表格列
+  groupChatListColumns: [
+    {
+      title: '群聊名称',
+      field: 'groupName',
+      width: 200,
+      render(row, index) {
+        return row.groupName
+      }
+    },
+    {
+      title: '群类型',
+      field: 'groupType',
+      width: 400,
+      ellipsis: true,
+      render(row, index) {
+        return row.groupType
+      }
+    },
+    {
+      title: '操作',
+      field: 'action',
+      width: 200,
+      align: 'center',
+      fixed: 'right',
+      render(row, index) {
+        return h(
+          NButton,
+          {
+            size: 'small',
+            text: true,
+            color: '#46299d',
+            onClick: () => handleEnterChat(row)
+          },
+          { default: () => '进入聊天' }
+        )
+      }
+    }
+  ], // 群聊列表表格列
   addressBookData: [], // 通讯录表格数据
+  groupChatListData: [], // 群聊列表表格数据
   addressBookTableHeight: 524, // 通讯录表格高度
   addressBookTableWidth: 800, // 通讯录表格宽度
   addressBookPage: 1, // 通讯录表格页码
   addressBookPageSize: 10, // 通讯录表格每页条数
-  addressBookTotal: 0 // 通讯录表格总条数
+  addressBookTotal: 0, // 通讯录表格总条数
+  addressBookSearchNickName: '', // 通讯录搜索条件-姓名
+  addressBookCurrentTab: 'employeeAddressBook', // 通讯录当前tab
+  groupChatListPage: 1, // 群聊列表表格页码
+  groupChatListPageSize: 10, // 群聊列表表格每页条数
+  groupChatListTotal: 0, // 群聊列表表格总条数
+  groupChatListSearchGroupName: '', // 群聊列表搜索条件-群聊名称
 })
 
 const items = computed((): ISession[] => {
@@ -143,6 +199,21 @@ watch(
   },
   { deep: true, immediate: true }
 )
+watch(
+  () => state.addressBookSearchNickName,
+  (newValue, oldValue) => {
+    // console.log(newValue, 'newValue')
+    if (newValue) {
+      state.addressBookTableWidth = 1142
+      state.addressBookPage = 1
+    } else {
+      state.addressBookTableWidth = 800
+      state.clickKey = 3
+      state.treeRefreshCount++
+    }
+    getDepPoisUser()
+  }
+)
 
 // 列表加载状态
 const loadStatus = computed(() => talkStore.loadStatus)
@@ -213,9 +284,10 @@ const showAddressBookModal = () => {
   state.isShowAddressBookModal = true
 }
 const handleTreeClick = ({ selectedKey, tree }) => {
-  console.log(tree)
+  // console.log(tree)
   state.clickKey = tree.key
   state.treeSelectData = tree
+  state.addressBookPage = 1
   getDepPoisUser()
 }
 const calcTreeData = (data) => {
@@ -242,30 +314,8 @@ const getTreeData = () => {
         let data = res.data.nodes
         calcTreeData(data)
         state.treeData = data
-        // // 获取最近点击的部门
-        // let localSelect = Local.get("posimanage_treeSelectData");
-        // if (localSelect && JSON.stringify(localSelect) !== "{}") {
-        //   state.treeSelectData = localSelect;
-        //   state.expandedKeys = localSelect.pathIds;
-        //   state.clickKey = localSelect.key;
-        // } else {
-        //   if (JSON.stringify(state.treeSelectData) === "{}") {
-        //     state.treeSelectData = data[0];
-        //     state.clickKey = data[0].key;
-        //   }
-        //   if (
-        //     state.clickKey === data[0].key &&
-        //     !state.expandedKeys.includes(data[0].key)
-        //   ) {
-        //     state.expandedKeys.push(data[0].key);
-        //   }
-        //   if (!state.expandedKeys.includes(state.clickKey)) {
-        //     state.expandedKeys.push(state.clickKey);
-        //   }
-        // }
         state.treeRefreshCount++
         getDepPoisUser()
-        // state.tableConfig.refreshCount++;
       } else {
         processError(res.msg || '获取失败！')
       }
@@ -282,13 +332,14 @@ const getTreeData = () => {
 const getDepPoisUser = () => {
   let url = '/user/v2/list'
   let params = {
-    departmentId: state.clickKey,
+    departmentId: state.addressBookSearchNickName ? undefined : state.clickKey,
     page: state.addressBookPage,
     pageSize: state.addressBookPageSize,
-    status: 'notactive'
+    status: 'notactive',
+    nickName: state.addressBookSearchNickName
   }
   $request.HTTP.components.postDataByParams(url, params).then((res) => {
-    console.log(res)
+    // console.log(res)
     if (res.status === 0 && Array.isArray(res.data.data)) {
       state.addressBookData = res.data.data || []
       state.addressBookTotal = res.data.count
@@ -310,6 +361,34 @@ const handleAddressBookPaginationSize = (pageSize) => {
   state.addressBookPage = 1
   getDepPoisUser()
 }
+//处理通讯录搜索
+const changeAddressBookSearch = (value) => {
+  if (!value.nickName?.trim()) {
+    state.addressBookSearchNickName = ''
+  } else {
+    state.addressBookSearchNickName = value.nickName
+  }
+}
+//处理通讯录tab切换
+const handleAddressBookTabChange = (value) => {
+  console.log(value, 'value')
+  state.addressBookCurrentTab = value
+}
+//处理群聊列表搜索
+const changeGroupChatListSearch = (value) => {
+  console.log(value, 'value')
+}
+//处理群聊列表页数变化
+const handleGroupChatListPagination = (value) => {
+  console.log(value, 'value')
+  state.groupChatListPage = value
+}
+//处理群聊列表每页条数变化
+const handleGroupChatListPaginationSize = (value) => {
+  console.log(value, 'value')
+  state.groupChatListPageSize = value
+}
+
 </script>
 
 <template>
@@ -345,7 +424,7 @@ const handleAddressBookPaginationSize = (pageSize) => {
         </template>
       </n-button>
       <img
-        style="width: 19px; height: 20px;"
+        style="width: 19px; height: 20px;cursor: pointer;"
         src="@/assets/image/chatList/addressBook.png"
         alt=""
         @click="showAddressBookModal"
@@ -420,13 +499,29 @@ const handleAddressBookPaginationSize = (pageSize) => {
     <template #content>
       <div class="custom-modal-content">
         <n-card style="padding: 0 12px;">
-          <n-tabs type="line">
+          <n-tabs type="line" @update:value="handleAddressBookTabChange" tab-style="font-size: 16px; font-weight: 600;color: #8B8B8B;">
             <n-tab name="employeeAddressBook">员工通讯录</n-tab>
             <n-tab name="groupChatList">群聊列表</n-tab>
           </n-tabs>
-          <xSearchForm :search-config="state.searchConfig"></xSearchForm>
+          <xSearchForm
-          <div class="addressBook-content">
+            v-if="state.addressBookCurrentTab == 'employeeAddressBook'"
-            <div class="addressBook-tree">
+            :search-config="state.addressBookSearchConfig"
+            customInputPlaceholder="请输入姓名"
+            @change="changeAddressBookSearch"
+            :cols="3"
+          ></xSearchForm>
+          <xSearchForm
+            v-if="state.addressBookCurrentTab == 'groupChatList'"
+            :search-config="state.groupChatListSearchConfig"
+            customInputPlaceholder="请输入群聊名称"
+            @change="changeGroupChatListSearch"
+            :cols="3"
+          ></xSearchForm>
+          <div
+            class="addressBook-content"
+            v-if="state.addressBookCurrentTab == 'employeeAddressBook'"
+          >
+            <div class="addressBook-tree" v-if="!state.addressBookSearchNickName">
               <fl-tree
                 :data="state.treeData"
                 :expandedKeys="state.expandedKeys"
@@ -461,6 +556,33 @@ const handleAddressBookPaginationSize = (pageSize) => {
               </div>
             </div>
           </div>
+          <div class="groupChatList-content" v-if="state.addressBookCurrentTab == 'groupChatList'">
+            <div class="groupChatList-table">
+              <xNDataTable
+                :columns="state.groupChatListColumns"
+                :data="state.groupChatListData"
+                :style="{
+                  height: '523px',
+                  width: '1148px'
+                }"
+                flex-height
+              ></xNDataTable>
+              <div class="groupChatList-pagination">
+                <n-pagination
+                  v-model:page="state.groupChatListPage"
+                  v-model:page-size="state.groupChatListPageSize"
+                  :item-count="state.groupChatListTotal"
+                  show-quick-jumper
+                  show-size-picker
+                  :page-sizes="[10, 20, 50]"
+                  :on-update:page="handleGroupChatListPagination"
+                  :on-update:page-size="handleGroupChatListPaginationSize"
+                >
+                  <template #prefix="{ itemCount }"> 共 {{ itemCount }} 条记录 </template>
+                </n-pagination>
+              </div>
+            </div>
+          </div>
         </n-card>
       </div>
     </template>
@@ -573,6 +695,9 @@ html[theme-mode='dark'] {
   box-sizing: border-box;
   width: 100%;
   padding: 0 12px;
+  :deep(.n-tabs-tab--active) {
+    color: #46299d!important;
+  }
   .addressBook-content {
     display: flex;
     flex-direction: row;
@@ -600,5 +725,23 @@ html[theme-mode='dark'] {
       }
     }
   }
+  .groupChatList-content {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    .groupChatList-table {
+      :deep(.n-data-table-th) {
+        background-color: #46299d;
+        color: #fff;
+      }
+      .groupChatList-pagination {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 22px 0 0;
+        box-sizing: border-box;
+      }
+    }
+  }
 }
 </style>