通讯保障

src/views/globalMap/RightMenu/CommunicationSupport.vue

@@ -2,21 +2,21 @@
   <Dialog custom-show type="lg" title="通讯保障" hide-footer @close="handleClose">
     <div class="content">
       <div class="left-content">
-        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索">
+        <el-input v-model="queryParams1.keyword" class="custom-input" placeholder="组织架构搜索">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
         <div class="tree-container">
           <div class="tree-box">
-            <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
+            <el-tree :data="treeData" :props="{ value: 'deptId', label: 'deptName', children: 'children' }" accordion @node-click="handleNodeClick" />
           </div>
         </div>
       </div>
       <div class="middle-content">
         <div class="search-box">
           <el-select
-            v-model="queryParams.value1"
+            v-model="queryParams1.value1"
             class="custom-select select-box"
             placeholder="全部"
             popper-class="custom-select-popper"
@@ -24,7 +24,7 @@
           >
             <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
           </el-select>
-          <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索">
+          <el-input v-model="queryParams1.keyword" class="custom-input" placeholder="组织架构搜索">
             <template #prefix>
               <el-icon class="el-input__icon"><search /></el-icon>
             </template>
@@ -44,9 +44,9 @@
                 <div class="td2">
                   <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
                 </div>
-                <div class="td">{{ item.name }}</div>
+                <div class="td">{{ item.nickName }}</div>
                 <div class="td3">
-                  {{ item.duty }}
+                  {{ item.deptName }}
                   <div class="phone-icon"></div>
                 </div>
               </div>
@@ -66,11 +66,11 @@
         <div class="select-content">
           <div v-for="(item, index) in selectList" :key="index" class="box-item">
             <div class="line">
-              <div class="text1">{{ item.name }}</div>
+              <div class="text1">{{ item.nickName }}</div>
               <div class="text2">{{ item.duty }}</div>
             </div>
             <div class="line" style="margin-top: 20px">
-              <div class="text2">{{ item.dept }}</div>
+              <div class="text2">{{ item.deptName }}</div>
             </div>
             <div class="close-btn" @click="deleteItem(item)"></div>
           </div>
@@ -82,56 +82,26 @@
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
+import { listDept } from '@/api/system/dept';
+import { DeptVO } from '@/api/system/dept/types';
+import { listUser } from '@/api/system/user';
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['close']);
-let activeIndex = ref(0);
 const options = ref([{ name: '全部', value: '全部' }]);
-const queryParams = ref({
-  value1: '',
-  keyword: ''
+let queryParams1 = ref({
+  pageNum: 1,
+  pageSize: 10,
+  deptName: undefined,
+  deptCategory: undefined,
+  status: undefined
 });
-const menu = ref([{ name: '视频会商' }, { name: '无人机' }, { name: '单兵设备' }]);
-const treeData = ref([
-  {
-    label: '茂名市',
-    children: [
-      {
-        label: '茂名市委',
-        children: [
-          {
-            label: '茂名市纪委监委',
-            isLeaf: true
-          },
-          {
-            label: '茂名市委办公室',
-            isLeaf: true
-          },
-          {
-            label: '茂名市委组织部',
-            isLeaf: true
-          }
-        ]
-      },
-      {
-        label: '茂名市人大',
-        children: [
-          {
-            label: '茂名市人大常委会秘书长、副秘书长',
-            isLeaf: true
-          },
-          {
-            label: '茂名市人大常委会办公室',
-            isLeaf: true
-          },
-          {
-            label: '茂名市人大常委会研究室',
-            isLeaf: true
-          }
-        ]
-      }
-    ]
-  }
-]);
+let queryParams2 = ref({
+  pageNum: 1,
+  pageSize: 100,
+  deptId: ''
+});
+const treeData = ref([]);
 const userList = ref([]);
 const selectList = computed(() => {
   const data = [];
@@ -153,51 +123,23 @@ const getCheckedClass = () => {
   }
   return res;
 };
-const handleNodeClick = (item) => {
-  if (item.isLeaf) {
-    const data = [
-      {
-        id: 1,
-        name: '李莉莉',
-        duty: '副主任',
-        dept: '茂名市/茂名市政府/茂名应急管理局'
-      },
-      {
-        id: 2,
-        name: '何里',
-        duty: '副主任',
-        dept: '茂名市/茂名市政府/茂名应急管理局'
-      },
-      {
-        id: 3,
-        name: '张三',
-        duty: '副主任',
-        dept: '茂名市/茂名市政府/茂名应急管理局'
-      },
-      {
-        id: 4,
-        name: '张三',
-        duty: '副主任',
-        dept: '茂名市/茂名市政府/茂名应急管理局'
-      },
-      {
-        id: 5,
-        name: '张三',
-        duty: '副主任',
-        dept: '茂名市/茂名市政府/茂名应急管理局'
-      },
-      {
-        id: 6,
-        name: '张三',
-        duty: '副主任',
-        dept: '茂名市/茂名市政府/茂名应急管理局'
-      }
-    ];
+const handleNodeClick = (data) => {
+  queryParams2.value.deptId = data.deptId;
+  getPerson();
+};
+const getPerson = () => {
+  listUser(queryParams2.value).then((res) => {
+    const data = res.rows;
     data.forEach((item) => {
-      item.checked = false;
+      for (let i = 0; i < selectList.value.length; i++) {
+        if (selectList.value[i].nickName === item.nickName) {
+          item.checked = true;
+          break;
+        }
+      }
     });
     userList.value = data;
-  }
+  });
 };
 // 全选、全取消
 const handleChecked = () => {
@@ -225,7 +167,7 @@ const clearSelect = () => {
 // 清空指定项
 const deleteItem = (item) => {
   for (let i = 0; i < userList.value.length; i++) {
-    if (item.id === userList.value[i].id) {
+    if (item.deptId === userList.value[i].deptId) {
       userList.value[i].checked = false;
       break;
     }
@@ -236,6 +178,15 @@ const deleteItem = (item) => {
 const handleClose = () => {
   emits('close');
 };
+const initData = () => {
+  listDept(queryParams1.value).then((res: any) => {
+    const data = proxy?.handleTree<DeptVO>(res.data, 'deptId');
+    treeData.value = data;
+  });
+};
+onMounted(() => {
+  initData();
+});
 </script>
 
 <style lang="scss" scoped>