完成通讯录功能的员工通讯录tab，接入对应的接口、交互组件等

src/components/common/customModal.vue

@@ -16,7 +16,7 @@
       </div>
     </template>
     <slot name="content"></slot>
-    <template #footer>
+    <template #footer v-if="actionBtns.cancelBtn || actionBtns.confirmBtn">
       <div class="custom-modal-btns">
         <customBtn
           color="#C7C7C9"

src/components/flnlayout/tree/treelabel.vue

@@ -2,14 +2,14 @@
   <div class="row items-center">
     <div v-if="state.treeData.edit">
       <n-input v-model:value="state.editTitle"
-               style="width:120px" />
+               style="max-width:200px" />
     </div>
 
     <n-popover trigger="hover"
                v-else>
       <template #trigger>
-        <div style="width:120px"
-             class="fl-px-sm sf-text-ellipsis">{{ state.treeData.title }}</div>
+        <div style="max-width:200px"
+             class="fl-px-sm sf-text-ellipsis">{{ state.treeData.title + '（' + state.treeData.staffNum + '）' }}</div>
       </template>
       <div>{{ state.treeData.title }}</div>
     </n-popover>

src/components/x-naive-ui/x-n-data-table/index.vue

@@ -12,6 +12,7 @@ import {
 } from "vue";
 import Sortable from "sortablejs";
 import { debounce } from "lodash-es";
+import { NDataTable } from "naive-ui";
 
 // Props 定义
 const props = defineProps({

src/views/message/inner/IndexSider.vue

@@ -1,8 +1,27 @@
 <script lang="ts" setup>
-import { computed, ref, onMounted, watch, reactive, onBeforeMount, getCurrentInstance } from 'vue'
+import {
+  computed,
+  ref,
+  onMounted,
+  watch,
+  reactive,
+  onBeforeMount,
+  getCurrentInstance,
+  h
+} from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
 import { useDialogueStore, useTalkStore } from '@/store'
-import { NDropdown, NIcon, NInput, NPopover, NTabs, NTab, NCard } from 'naive-ui'
+import {
+  NDropdown,
+  NIcon,
+  NInput,
+  NPopover,
+  NTabs,
+  NTab,
+  NCard,
+  NButton,
+  NPagination
+} from 'naive-ui'
 import { Search, Plus } from '@icon-park/vue-next'
 import TalkItem from './TalkItem.vue'
 import Skeleton from './Skeleton.vue'
@@ -13,11 +32,12 @@ import { ISession } from '@/types/chat'
 import { useSessionMenu } from '@/hooks'
 import customModal from '@/components/common/customModal.vue'
 import xSearchForm from '@/components/x-naive-ui/x-search-form/index.vue'
+import xNDataTable from '@/components/x-naive-ui/x-n-data-table/index.vue'
 import flTree from '@/components/flnlayout/tree/flnindex.vue'
 import { processError, processSuccess } from '@/utils/helper/message.js'
 
 const currentInstance = getCurrentInstance()
-const { $request } = currentInstance?.appContext.config.globalProperties
+const $request = currentInstance?.appContext.config.globalProperties?.$request
 
 const {
   dropdown,
@@ -52,9 +72,54 @@ const state = reactive({
 
   treeData: [],
   expandedKeys: [],
-  clickKey: '',
+  clickKey: 3,
   treeRefreshCount: 0,
-  treeSelectData: {}
+  treeSelectData: {},
+  addressBookColumns: [
+    {
+      title: '姓名',
+      field: 'name',
+      width: 200,
+      render(row, index) {
+        return row.nickName
+      }
+    },
+    {
+      title: '岗位名称',
+      field: 'positionName',
+      width: 400,
+      ellipsis: true,
+      render(row, index) {
+        let positionName = row.nowPositions.map((item) => item.name).join(' , ')
+        return positionName
+      }
+    },
+    {
+      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: [], // 通讯录表格数据
+  addressBookTableHeight: 524, // 通讯录表格高度
+  addressBookTableWidth: 800, // 通讯录表格宽度
+  addressBookPage: 1, // 通讯录表格页码
+  addressBookPageSize: 10, // 通讯录表格每页条数
+  addressBookTotal: 0 // 通讯录表格总条数
 })
 
 const items = computed((): ISession[] => {
@@ -68,13 +133,16 @@ const items = computed((): ISession[] => {
     return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
   })
 })
-setTimeout(()=>{
-  console.log('items.value',items.value)
-},1000)
-watch(() => talkStore, (newValue, oldValue) => {
-  console.log(newValue);
-  
-},{deep:true,immediate:true})
+setTimeout(() => {
+  console.log('items.value', items.value)
+}, 1000)
+watch(
+  () => talkStore,
+  (newValue, oldValue) => {
+    console.log(newValue)
+  },
+  { deep: true, immediate: true }
+)
 
 // 列表加载状态
 const loadStatus = computed(() => talkStore.loadStatus)
@@ -145,8 +213,10 @@ const showAddressBookModal = () => {
   state.isShowAddressBookModal = true
 }
 const handleTreeClick = ({ selectedKey, tree }) => {
+  console.log(tree)
   state.clickKey = tree.key
   state.treeSelectData = tree
+  getDepPoisUser()
 }
 const calcTreeData = (data) => {
   for (let item of data) {
@@ -194,6 +264,7 @@ const getTreeData = () => {
         //   }
         // }
         state.treeRefreshCount++
+        getDepPoisUser()
         // state.tableConfig.refreshCount++;
       } else {
         processError(res.msg || '获取失败！')
@@ -207,6 +278,38 @@ const getTreeData = () => {
     }
   )
 }
+// 获取部门下的人员
+const getDepPoisUser = () => {
+  let url = '/user/v2/list'
+  let params = {
+    departmentId: state.clickKey,
+    page: state.addressBookPage,
+    pageSize: state.addressBookPageSize,
+    status: 'notactive'
+  }
+  $request.HTTP.components.postDataByParams(url, params).then((res) => {
+    console.log(res)
+    if (res.status === 0 && Array.isArray(res.data.data)) {
+      state.addressBookData = res.data.data || []
+      state.addressBookTotal = res.data.count
+    }
+  })
+}
+//点击进入对应的聊天
+const handleEnterChat = (row) => {
+  console.log(row)
+}
+//处理页数变化
+const handleAddressBookPagination = (page) => {
+  state.addressBookPage = page
+  getDepPoisUser()
+}
+//处理每页条数变化
+const handleAddressBookPaginationSize = (pageSize) => {
+  state.addressBookPageSize = pageSize
+  state.addressBookPage = 1
+  getDepPoisUser()
+}
 </script>
 
 <template>
@@ -290,7 +393,6 @@ const getTreeData = () => {
     <main id="talk-session-list" class="el-main me-scrollbar me-scrollbar-thumb">
       <template v-if="loadStatus == 2"><Skeleton /></template>
       <template v-else>
-
         <TalkItem
           v-for="item in items"
           :key="item.index_name"
@@ -317,7 +419,7 @@ const getTreeData = () => {
   >
     <template #content>
       <div class="custom-modal-content">
-        <n-card>
+        <n-card style="padding: 0 12px;">
           <n-tabs type="line">
             <n-tab name="employeeAddressBook">员工通讯录</n-tab>
             <n-tab name="groupChatList">群聊列表</n-tab>
@@ -333,6 +435,31 @@ const getTreeData = () => {
                 @triggerTreeClick="handleTreeClick"
               ></fl-tree>
             </div>
+            <div class="addressBook-table">
+              <xNDataTable
+                :columns="state.addressBookColumns"
+                :data="state.addressBookData"
+                :style="{
+                  height: `${state.addressBookTableHeight}px`,
+                  width: `${state.addressBookTableWidth}px`
+                }"
+                flex-height
+              ></xNDataTable>
+              <div class="addressBook-pagination">
+                <n-pagination
+                  v-model:page="state.addressBookPage"
+                  v-model:page-size="state.addressBookPageSize"
+                  :item-count="state.addressBookTotal"
+                  show-quick-jumper
+                  show-size-picker
+                  :page-sizes="[10, 20, 50]"
+                  :on-update:page="handleAddressBookPagination"
+                  :on-update:page-size="handleAddressBookPaginationSize"
+                >
+                  <template #prefix="{ itemCount }"> 共 {{ itemCount }} 条记录 </template>
+                </n-pagination>
+              </div>
+            </div>
           </div>
         </n-card>
       </div>
@@ -447,6 +574,9 @@ html[theme-mode='dark'] {
   width: 100%;
   padding: 0 12px;
   .addressBook-content {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
     .addressBook-tree {
       width: 328px;
       height: 524px;
@@ -456,6 +586,19 @@ html[theme-mode='dark'] {
       padding: 12px 20px;
       box-sizing: border-box;
     }
+    .addressBook-table {
+      :deep(.n-data-table-th) {
+        background-color: #46299d;
+        color: #fff;
+      }
+      .addressBook-pagination {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 22px 0 0;
+        box-sizing: border-box;
+      }
+    }
   }
 }
 </style>