增加分类

src/views/equipmentLifecycle/common.ts

@@ -5,8 +5,8 @@ export function getTreeData(items, parentId, pidField = 'parentId', idField = 'i
     const children = getTreeData(items, node[idField], pidField, idField, nameField);
 
     if (children.length) {
-      return { ...node, children, label: node[nameField], value: node[idField] };
+      return { ...node, children, label: node[nameField], value: node[idField], title: node[nameField], key: node[idField] };
     }
-    return { ...node, label: node[nameField], value: node[idField] };
+    return { ...node, label: node[nameField], value: node[idField], title: node[nameField], key: node[idField] };
   });
 }

src/views/equipmentLifecycle/device/tree/components/department.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="department-wrap">
-    <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
+  <div class="department-wrap flex flex-col">
+    <a-input-search v-model:value="searchValue" placeholder="请输入部门名称" />
     <a-tree :expanded-keys="expandedKeys" block-node show-icon :auto-expand-parent="autoExpandParent" :tree-data="gData" @expand="onExpand" show-line>
       <template #title="{ title }">
         <span v-if="title.indexOf(searchValue) > -1">
@@ -14,52 +14,24 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import type { TreeProps } from 'ant-design-vue';
+  import { getAllDept } from '../../../setting/department/CompanyDepartment.api';
 
-  const x = 10;
-  const y = 2;
-  const z = 1;
-  const genData: TreeProps['treeData'] = [];
+  const dataList = ref<TreeProps['treeData']>([]);
+  const expandedKeys = ref<(string | number)[]>([]);
+  const searchValue = ref<string>('');
+  const autoExpandParent = ref<boolean>(true);
+  const gData = ref<TreeProps['treeData']>([]);
 
-  const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
-    const preKey = _preKey || '0';
-    const tns = _tns || genData;
+  const getDeptList = () => {
+    getAllDept({}, true).then((res: { org: TreeProps['treeData']; tree: TreeProps['treeData'] }) => {
+      const { org, tree } = res;
 
-    const children: any[] = [];
-    for (let i = 0; i < x; i++) {
-      const key = `${preKey}-${i}`;
-      tns.push({ title: key, key });
-      if (i < y) {
-        children.push(key);
-      }
-    }
-    if (_level < 0) {
-      return tns;
-    }
-    const level = _level - 1;
-    children.forEach((key, index) => {
-      tns[index].children = [];
-      return generateData(level, key, tns[index].children);
+      dataList.value = org || [];
+      gData.value = tree || [];
     });
   };
-  generateData(z);
-
-  const dataList: TreeProps['treeData'] = [];
-  const generateList = (data: TreeProps['treeData']) => {
-    if (!data) {
-      return null;
-    }
-    for (let i = 0; i < data.length; i++) {
-      const node = data[i];
-      const key = node.key;
-      dataList.push({ key, title: key });
-      if (node.children) {
-        generateList(node.children);
-      }
-    }
-  };
-  generateList(genData);
 
   const getParentKey = (key: string | number, tree: TreeProps['treeData']): string | number | undefined => {
     let parentKey;
@@ -78,10 +50,6 @@
     }
     return parentKey;
   };
-  const expandedKeys = ref<(string | number)[]>([]);
-  const searchValue = ref<string>('');
-  const autoExpandParent = ref<boolean>(true);
-  const gData = ref<TreeProps['treeData']>(genData);
 
   const onExpand = (keys: string[]) => {
     expandedKeys.value = keys;
@@ -89,23 +57,36 @@
   };
 
   watch(searchValue, (value) => {
-    const expanded = dataList
-      .map((item: TreeProps['treeData'][number]) => {
-        if (item.title.indexOf(value) > -1) {
-          return getParentKey(item.key, gData.value);
-        }
-        return null;
-      })
-      .filter((item, i, self) => item && self.indexOf(item) === i);
+    if (!dataList.value || !Array.isArray(dataList.value)) return;
+
+    const expanded = dataList.value
+      .filter((item) => item.title && item.title.indexOf(value) > -1)
+      .map((item) => getParentKey(item.key, gData.value))
+      .filter((item): item is string | number => typeof item !== 'undefined'); // 过滤掉 undefined
+
     expandedKeys.value = expanded;
     searchValue.value = value;
     autoExpandParent.value = true;
   });
+
+  onMounted(() => {
+    getDeptList();
+  });
 </script>
 <style lang="less" scoped>
   .department-wrap {
     height: 100%;
     padding: 20px;
     overflow: auto;
+
+    .ant-input-search {
+      margin-bottom: 10px;
+    }
+
+    :deep(.ant-tree) {
+      flex: 1;
+      height: 0;
+      overflow: auto;
+    }
   }
 </style>

src/views/equipmentLifecycle/setting/department/CompanyDepartment.api.ts

@@ -70,7 +70,7 @@ export const saveOrUpdate = (params, isUpdate) => {
 };
 
 // 获取所有的部门
-export const getAllDept = (params) =>
+export const getAllDept = (params, backOrg?: boolean) =>
   new Promise((resolve) => {
     defHttp
       .get({ url: Api.allDept, params })
@@ -79,10 +79,30 @@ export const getAllDept = (params) =>
           const treeData = getTreeData(res, null, 'parentDepartmentNumber', 'departmentNumber', 'departmentName');
           deptOrgData.value = res;
           deptTreeData.value = treeData;
-          resolve(treeData);
+          if (backOrg) {
+            resolve({
+              org: res.map((item) => ({
+                ...item,
+                title: item.departmentName,
+                key: item.departmentNumber,
+                value: item.departmentNumber,
+                lable: item.departmentName,
+              })),
+              tree: treeData,
+            });
+          } else {
+            resolve(treeData);
+          }
         }
 
-        resolve([]);
+        if (backOrg) {
+          resolve({
+            org: [],
+            tree: [],
+          });
+        } else {
+          resolve([]);
+        }
       })
       .catch(() => {
         resolve([]);