页面查漏补缺

src/views/system/archivesClassify/index.vue

@@ -84,20 +84,21 @@
         <div class="container-right">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
+          <!-- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" -->
           <el-table
             ref="table"
             v-loading="crud.loading"
             lazy
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
             :data="crud.data"
             row-key="id"
+            :tree-props="{ children: 'childMenus', hasChildren: 'hasChildren' }"
             @select="crud.selectChange"
             @select-all="crud.selectAllChange"
             @selection-change="crud.selectionChangeHandler"
           >
             <el-table-column type="selection" align="center" width="55" />
-            <el-table-column label="分类名称" prop="name" />
-            <el-table-column label="分类编号" prop="number" />
+            <el-table-column label="分类名称" prop="dicName" />
+            <el-table-column label="分类编号" prop="dicCode" />
             <el-table-column label="排序" prop="sort" />
             <el-table-column label="所属门类" prop="category" />
             <el-table-column prop="createTime" label="创建日期">
@@ -115,6 +116,7 @@
 </template>
 
 <script>
+import crudDict from '@/api/archivesConfig/dict'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
@@ -136,11 +138,14 @@ export default {
   name: 'Classify',
   components: { crudOperation, pagination, Treeselect },
   cruds() {
-    return CRUD({ title: '分类', url: 'api/dept', crudMethod: {}})
+    return CRUD({ title: '分类', url: 'api/dictrionary/menu',
+      crudMethod: { ...crudDict },
+      sort: ['dicSequence,asc'] })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
+      tableData: [],
       categorys: [],
       rules: {
         category: [{ required: true, message: '请选择所属门类', trigger: 'change' }],
@@ -155,9 +160,64 @@ export default {
         add: ['admin', 'classify:add'],
         edit: ['admin', 'classify:edit'],
         del: ['admin', 'classify:del']
+      },
+      props: { children: 'childMenus', hasChildren: 'hasChildren' }
+    }
+  },
+  computed: {
+    key() {
+      return (node) => node.id
+    },
+    treeProps() {
+      return {
+        lazy: true,
+        load: this.loadData,
+        props: { children: 'childMenus', label: 'hasChildren' }
       }
     }
   },
+  created() {
+    // 模拟异步获取数据
+    // setTimeout(() => {
+    //   const treeData = [
+    //     { id: 1, name: '根节点1' },
+    //     { id: 2, name: '根节点2' },
+    //     { id: 3, parentId: 1, name: '子节点1' },
+    //     { id: 4, parentId: 1, name: '子节点2' },
+    //     { id: 5, parentId: 2, name: '子节点3' },
+    //     { id: 6, parentId: 2, name: '子节点4' },
+    //     { id: 7, parentId: 3, name: '子节点5' },
+    //     { id: 8, parentId: 3, name: '子节点6' },
+    //     { id: 9, parentId: 5, name: '子节点7' },
+    //     { id: 10, parentId: 5, name: '子节点8' },
+    //     { id: 11, parentId: 6, name: '子节点9' },
+    //     { id: 12, parentId: 6, name: '子节点10' },
+    //     { id: 13, parentId: 9, name: '子节点11' },
+    //     { id: 14, parentId: 9, name: '子节点12' },
+    //     { id: 15, parentId: 10, name: '子节点13' },
+    //     { id: 16, parentId: 11, name: '子节点14' },
+    //     { id: 17, parentId: 12, name: '子节点15' }
+    //   ]
+    //   console.log(treeData)
+    //   const flatData = this.flattenData(treeData)
+    //   console.log(this.flattenData)
+    //   console.log(flatData)
+    //   const tableData = []
+    //   flatData.forEach((item) => {
+    //     const parent = flatData.find((data) => data.id === item.parentId)
+    //     if (parent) {
+    //       if (!parent.children) {
+    //         parent.children = []
+    //       }
+    //       parent.children.push(item)
+    //     } else {
+    //       tableData.push(item)
+    //     }
+    //   })
+    //   this.tableData = tableData
+    //   console.log(this.tableData)
+    // }, 200)
+  },
   methods: {
     // 获取弹窗内门类数据
     loadCategorys({ action, parentNode, callback }) {
@@ -174,6 +234,32 @@ export default {
         //   }, 100)
         // })
       }
+    },
+    flattenData(data, parentId = null, level = 0) {
+      console.log('data', data)
+      return data.reduce((arr, item) => {
+        if (item.parentId === parentId) {
+          arr.push({ ...item, level })
+          arr.push(...this.flattenData(data, item.id, level + 1))
+        }
+        console.log('arr', arr)
+        return arr
+      }, [])
+    },
+    loadData(node, resolve) {
+      console.log(node)
+      const parentId = node.data.id
+      const children = []
+      // 模拟异步获取数据
+      setTimeout(() => {
+        if (parentId === 1 || parentId === 2) {
+          for (let i = 0; i < 50; i++) {
+            const id = `${parentId}-${i + 1}`
+            children.push({ id, label: `子节点${id}` })
+          }
+        }
+        resolve(children)
+      }, 500)
     }
   }
 }

src/views/system/menu/index.vue

@@ -105,17 +105,19 @@
     <div class="container-wrap">
       <span class="right-top-line" />
       <span class="left-bottom-line" />
+      <!-- @select="crud.selectChange"
+        @select-all="crud.selectAllChange" -->
       <el-table
         ref="table"
         v-loading="crud.loading"
         lazy
+        height="645"
         :load="getMenus"
         :data="crud.data"
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         row-key="id"
-        @select="crud.selectChange"
-        @select-all="crud.selectAllChange"
         @selection-change="crud.selectionChangeHandler"
+        @row-click="clickRowHandler"
       >
         <el-table-column type="selection" align="center" width="55" />
         <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="300px" prop="title" />
@@ -243,6 +245,10 @@ export default {
         this.menus.push({ id: 0, label: '顶级类目', children: null })
       }
     },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
     getMenus(tree, treeNode, resolve) {
       const params = { pid: tree.id }
       setTimeout(() => {
@@ -287,7 +293,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
 ::v-deep .el-dialog {
   .el-dialog__body {
     .el-form-item{