指挥体系

src/views/emergencyCommandMap/RightSection/InitConsultation.vue

@@ -1,22 +1,43 @@
 <template>
-  <Dialog custom-show type="lg" title="指挥体系" hide-footer @close="handleClose">
+  <Dialog custom-show type="xl" title="指挥体系" @close="handleClose" @confirm="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
+              ref="tree"
+              :data="treeData"
+              :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+              show-checkbox
+              accordion
+              @check="handleCheck"
+            />
           </div>
         </div>
       </div>
       <div class="middle-content">
+        <div class="tree-container">
+          <div class="tree-title">指挥架构</div>
+          <div class="tree-box">
+            <el-tree
+              :data="filteredTreeData"
+              :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+              accordion
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="right-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 +45,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>
@@ -37,112 +58,59 @@
                 <div :class="getCheckedClass()" @click="handleChecked"></div>
               </div>
               <div class="td">姓名</div>
-              <div class="td3">职务</div>
+              <div class="td">所属部门</div>
+              <div class="td">职务</div>
             </div>
             <div class="table-content">
               <div v-for="(item, index) in userList" :key="index" class="tr2">
                 <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="td3">
-                  {{ item.duty }}
-                  <div class="phone-icon"></div>
-                </div>
+                <div class="td">{{ item.nickName }}</div>
+                <div class="td">{{ item.deptName }}</div>
+                <div class="td">{{ item.duty }}</div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="select-box2">
-        <div class="select-header">
-          <div class="left-item">
-            <div>已选择：</div>
-            <div class="text">{{ selectList.length }}</div>
-            <div>人</div>
-          </div>
-          <div class="clear-btn" @click="clearSelect">清空</div>
-        </div>
-        <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="text2">{{ item.duty }}</div>
-            </div>
-            <div class="line" style="margin-top: 20px">
-              <div class="text2">{{ item.dept }}</div>
-            </div>
-            <div class="close-btn" @click="deleteItem(item)"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="footer">
-      <div></div>
-      <div class="btn-box">
-        <div class="common-btn-primary2" style="margin-right: 20px" @click="handlePhoneCall">电话呼叫</div>
-        <div class="common-btn-primary2" @click="handleStartMeeting">发起会议</div>
-      </div>
     </div>
+    <!--    <div class="footer">-->
+    <!--      <div class="btn-box">-->
+    <!--        <div class="common-btn-primary2" style="margin-right: 20px" @click="handlePhoneCall">电话呼叫</div>-->
+    <!--        <div class="common-btn-primary2" @click="handleStartMeeting">发起会议</div>-->
+    <!--      </div>-->
+    <!--    </div>-->
   </Dialog>
 </template>
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
 import { ConvergedCommunication } from '@/utils/convergedCommunication';
+import { listUser } from '@/api/system/user';
+import { listDept } from '@/api/system/dept';
+import { DeptVO } from '@/api/system/dept/types';
+import { deepClone } from '@/utils';
 
 const props = defineProps({
   modelValue: Boolean
 });
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['update:modelValue', 'close']);
-let activeIndex = ref(0);
+let tree = ref();
 const options = ref([{ name: '全部', value: '全部' }]);
-const queryParams = ref({
+let queryParams1 = ref({
+  pageNum: 1,
+  pageSize: 10,
   value1: '',
-  keyword: ''
+  keyword: 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 = [];
@@ -164,51 +132,33 @@ 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: '茂名市/茂名市政府/茂名应急管理局'
-      }
-    ];
+
+let filteredTreeData = ref([]);
+
+const handleCheck = () => {
+  let checkedNodes = tree.value.getCheckedNodes();
+  let halfCheckedNodes = tree.value.getHalfCheckedNodes();
+  const allCheckedNodes = deepClone([...checkedNodes, ...halfCheckedNodes]);
+  filteredTreeData.value = proxy?.handleTree<DeptVO>(allCheckedNodes, 'deptId');
+};
+
+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 = () => {
@@ -251,27 +201,48 @@ const handleClose = () => {
 // 融合通信参数
 const handlePhoneCall = () => {
   emits('update:modelValue', false);
-}
+};
 // 发起会议
 const handleStartMeeting = () => {
   const convergedCommunication = new ConvergedCommunication();
   convergedCommunication.start();
   emits('update:modelValue', false);
 };
+
+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>
+:deep(.dialog-content) {
+  flex: unset !important;
+  overflow-y: hidden !important;
+}
 .content {
-  height: calc(100% - 136px);
   display: flex;
   margin-top: 12px;
   .left-content {
     width: 910px;
+    height: 870px;
     padding-right: 30px;
     border-right: 1px solid #2187ff;
   }
   .middle-content {
     width: 910px;
+    height: 870px;
+    padding: 0 30px;
+    border-right: 1px solid #2187ff;
+  }
+  .right-content {
+    flex: 1;
+    height: 870px;
     padding: 0 30px;
     border-right: 1px solid #2187ff;
     .search-box {
@@ -362,10 +333,14 @@ const handleStartMeeting = () => {
   }
   .tree-container {
     margin-top: 15px;
-    display: flex;
+    .tree-title {
+      font-size: 44px;
+      font-weight: bold;
+      width: 100%;
+    }
     .tree-box {
       width: 100%;
-      height: 920px;
+      height: 850px;
       overflow-y: auto;
       padding: 15px 8px;
       :deep(.el-tree) {
@@ -373,6 +348,19 @@ const handleStartMeeting = () => {
         background-color: transparent;
         color: #fbffff;
         font-size: 38px;
+        .el-checkbox__inner {
+          width: 39px !important;
+          height: 39px !important;
+          &:after {
+            width: 14px;
+            height: 28px;
+            left: 12px;
+          }
+          &:before {
+            height: 6px;
+            top: 16px;
+          }
+        }
         .el-tree-node__content {
           height: auto;
           padding-top: 10px;
@@ -382,7 +370,7 @@ const handleStartMeeting = () => {
         }
         .el-tree-node__expand-icon {
           color: #297cfc;
-          font-size: 23px;
+          font-size: 30px;
         }
         .el-tree-node:focus > .el-tree-node__content,
         .el-tree-node__content:hover {