feat: 新增树表格

frontend/src/components/business/tree-table/index.vue

+<template>
+  <div class="complex-table">
+    <div v-if="$slots.header || header" class="complex-table__header">
+      <slot name="header">{{ header }}</slot>
+    </div>
+
+    <div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
+      <slot name="toolbar">
+        <fu-search-bar v-bind="searchConfig" @exec="search">
+          <slot name="buttons" />
+          <fu-table-column-select :columns="columns" />
+        </fu-search-bar>
+      </slot>
+    </div>
+
+    <div class="complex-table__body">
+      <slot />
+      <!-- <fu-table ref="table" v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
+        <slot />
+      </fu-table> -->
+    </div>
+
+    <div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
+      <slot name="pagination">
+        <fu-table-pagination
+          :current-page.sync="paginationConfig.currentPage"
+          :page-size.sync="paginationConfig.pageSize"
+          v-bind="paginationConfig"
+          @change="search"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'TreeTable',
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
+    // eslint-disable-next-line vue/require-default-prop
+    header: String,
+    // eslint-disable-next-line vue/require-default-prop
+    searchConfig: Object,
+    // eslint-disable-next-line vue/require-default-prop
+    paginationConfig: Object
+  },
+  data() {
+    return {
+      condition: {}
+    }
+  },
+  methods: {
+    search(condition, e) {
+      if (condition) {
+        this.condition = condition
+      }
+      this.$emit('search', this.condition, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
+.complex-table {
+  .complex-table__header {
+    @include flex-row(flex-start, center);
+    height: 60px;
+    font-size: 20px;
+  }
+
+  .complex-table__toolbar {
+    @include flex-row(flex-end, center);
+  }
+
+  .complex-table__pagination {
+    margin-top: 20px;
+    @include flex-row(flex-end);
+  }
+}
+
+</style>

frontend/src/views/system/dept/index.vue

 <template>
   <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
-    <complex-table
+    <!-- <complex-table
       ref="table"
       :data="tableData"
       :lazy="isLazy"
@@ -15,15 +15,31 @@
       :default-expand-all="isTableExpand"
       row-key="deptId"
       @search="search"
+    > -->
+    <tree-table
+      :columns="columns"
+      :buttons="buttons"
+      :header="header"
+      :search-config="searchConfig"
+      @search="search"
     >
       <template #buttons>
         <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
       </template>
-
-      <!-- <el-table-column type="selection" fix /> -->
-      <el-table-column label="名称" prop="name" />
-      <el-table-column label="下属组织数" prop="subCount" />
-      <!-- <el-table-column label="状态" align="center" prop="enabled">
+      <el-table
+        ref="table"
+        :data="tableData"
+        lazy
+        :load="loadExpandDatas"
+        style="width: 100%"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        row-key="deptId"
+      >
+
+        <!-- <el-table-column type="selection" fix /> -->
+        <el-table-column label="名称" prop="name" />
+        <el-table-column label="下属组织数" prop="subCount" />
+        <!-- <el-table-column label="状态" align="center" prop="enabled">
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.enabled"
@@ -34,14 +50,16 @@
           />
         </template>
       </el-table-column> -->
-      <el-table-column prop="createTime" label="创建日期">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
+        <el-table-column prop="createTime" label="创建日期">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
 
-      <fu-table-operations :buttons="buttons" label="操作" fix />
-    </complex-table>
+        <fu-table-operations :buttons="buttons" label="操作" fix />
+      </el-table>
+    </tree-table>
+    <!-- </complex-table> -->
 
     <!-- add organization form -->
     <el-dialog
@@ -106,7 +124,7 @@
 
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
+import TreeTable from '@/components/business/tree-table'
 import Treeselect from '@riophae/vue-treeselect'
 import { formatCondition } from '@/utils/index'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -118,7 +136,7 @@ export default {
   name: 'MsOrganization',
   components: {
     LayoutContent,
-    ComplexTable,
+    TreeTable,
     Treeselect
   },
   data() {
@@ -168,11 +186,7 @@ export default {
 
         ]
       },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      },
+
       defaultCondition: {
         field: 'pid',
         operator: 'eq',
@@ -271,7 +285,7 @@ export default {
     },
     // 加载表格数据
     search(condition) {
-      this.setTableAttr()
+      // this.setTableAttr()
       this.tableData = []
       let param = {}
       if (condition && condition.quick) {
@@ -293,7 +307,7 @@ export default {
 
         if (condition && condition.quick) {
           data = this.buildTree(data)
-          this.setTableAttr(true)
+          // this.setTableAttr(true)
         }
         this.tableData = data
         this.depts = null

frontend/src/views/system/menu/index.vue

 <template>
   <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <complex-table
-      ref="table"
-      :data="tableData"
-      lazy
-      :load="initTableData"
+    <tree-table
       :columns="columns"
       :buttons="buttons"
       :header="header"
       :search-config="searchConfig"
-      :pagination-config="paginationConfig"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      row-key="menuId"
       @search="initTableData"
     >
       <template #buttons>
         <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
       </template>
 
-      <!-- <el-table-column type="selection" fix /> -->
-      <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
-      <el-table-column prop="icon" label="图标" align="center" width="60px">
-        <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
-        </template>
-      </el-table-column>
-
-      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
-      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
-      <!-- <el-table-column prop="iframe" label="外链" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.iframe">是</span>
-          <span v-else>否</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="cache" label="缓存" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.cache">是</span>
-          <span v-else>否</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="hidden" label="可见" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.hidden">否</span>
-          <span v-else>是</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column prop="createTime" label="创建日期" width="160px">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
-
-      <fu-table-operations :buttons="buttons" label="操作" fix />
-    </complex-table>
+      <el-table
+        ref="table"
+        :data="tableData"
+        lazy
+        :load="initTableData"
+        style="width: 100%"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        row-key="menuId"
+      >
+
+        <!-- <el-table-column type="selection" fix /> -->
+        <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
+        <el-table-column prop="icon" label="图标" align="center" width="60px">
+          <template slot-scope="scope">
+            <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
+          </template>
+        </el-table-column>
+
+        <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
+        <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
+
+        <el-table-column prop="createTime" label="创建日期" width="160px">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+
+        <fu-table-operations :buttons="buttons" label="操作" fix />
+      </el-table>
+    </tree-table>
 
     <el-dialog
       :close-on-click-modal="false"
@@ -66,13 +53,13 @@
       <el-form ref="menuForm" inline :model="form" :rules="rule" size="small" label-width="80px">
 
         <el-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="form.type" size="mini" style="width: 179px">
+          <el-radio-group v-model="form.type" size="mini" :disabled="formType!=='add'" style="width: 179px">
             <el-radio-button label="0">目录</el-radio-button>
             <el-radio-button label="1">菜单</el-radio-button>
             <el-radio-button label="2">按钮</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="form.type!== '2'" label="菜单图标" prop="icon">
+        <el-form-item v-show="form.type!== 2" label="菜单图标" prop="icon">
           <el-popover
             placement="bottom-start"
             width="425"
@@ -86,48 +73,32 @@
             </el-input>
           </el-popover>
         </el-form-item>
-        <!-- <el-form-item v-show="form.type !== '2'" label="外链菜单" prop="iframe">
-          <el-radio-group v-model="form.iframe" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type=== '1'" label="菜单缓存" prop="cache">
-          <el-radio-group v-model="form.cache" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type !== '2'" label="菜单可见" prop="hidden">
-          <el-radio-group v-model="form.hidden" size="mini">
-            <el-radio-button label="false">是</el-radio-button>
-            <el-radio-button label="true">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item> -->
-        <el-form-item v-if="form.type !== '2'" label="菜单标题" prop="title">
+
+        <el-form-item v-if="form.type !== 2" label="菜单标题" prop="title">
           <el-input v-model="form.title" :style=" form.type === '0' ? 'width: 450px' : 'width: 179px'" placeholder="菜单标题" />
         </el-form-item>
-        <el-form-item v-if="form.type === '2'" label="按钮名称" prop="title">
+        <el-form-item v-if="form.type === 2" label="按钮名称" prop="title">
           <el-input v-model="form.title" placeholder="按钮名称" style="width: 179px;" />
         </el-form-item>
-        <el-form-item v-show="form.type !== '0'" label="权限标识" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 179px;" />
+        <el-form-item v-show="form.type !== 0" label="权限标识" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iframe || formType!=='add'" placeholder="权限标识" style="width: 179px;" />
         </el-form-item>
-        <el-form-item v-if="form.type !== '2'" label="路由地址" prop="path">
-          <el-input v-model="form.path" placeholder="路由地址" style="width: 179px;" />
+        <el-form-item v-if="form.type !== 2" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" :disabled="formType!=='add'" style="width: 179px;" />
         </el-form-item>
         <el-form-item label="菜单排序" prop="menuSort">
           <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 179px;" />
         </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type === '1'" label="组件名称" prop="componentName">
-          <el-input v-model="form.componentName" style="width: 179px;" placeholder="匹配组件内Name字段" />
+        <el-form-item v-show="!form.iframe && form.type === 1" label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" :disabled="formType!=='add'" style="width: 179px;" placeholder="匹配组件内Name字段" />
         </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type === '1'" label="组件路径" prop="component">
-          <el-input v-model="form.component" style="width: 179px;" placeholder="组件路径" />
+        <el-form-item v-show="!form.iframe && form.type === 1" label="组件路径" prop="component">
+          <el-input v-model="form.component" :disabled="formType!=='add'" style="width: 179px;" placeholder="组件路径" />
         </el-form-item>
         <el-form-item label="上级类目" prop="pid">
           <treeselect
             v-model="form.pid"
+            :disabled="formType!=='add'"
             :options="menus"
             :load-options="loadMenus"
             style="width: 450px;"
@@ -139,12 +110,7 @@
         <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
         <el-button type="primary" @click="createMenu('menuForm')">确认</el-button>
       </div>
-      <!-- <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="dialogVisible = false"
-          @confirm="createMenu('menuForm')"
-        />
-      </template> -->
+
     </el-dialog>
 
   </layout-content>
@@ -152,7 +118,7 @@
 
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
+import TreeTable from '@/components/business/tree-table'
 // import { checkPermission } from '@/utils/permission'
 import IconSelect from '@/components/IconSelect'
 import Treeselect from '@riophae/vue-treeselect'
@@ -162,9 +128,8 @@ import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselec
 import { addMenu, editMenu, delMenu, getMenusTree } from '@/api/system/menu'
 
 export default {
-  name: 'MsMenu',
   components: {
-    ComplexTable,
+    TreeTable,
     LayoutContent,
     Treeselect,
     IconSelect
@@ -224,11 +189,6 @@ export default {
         //     multiple: false
         //   }
         ]
-      },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
       }
 
     }
@@ -374,7 +334,7 @@ export default {
           this.formType === 'modify' && this.form['menuId'] && (method = editMenu)
           method(this.form).then(res => {
             this.$success(this.$t('commons.save_success'))
-            this.initTableData()
+            // this.initTableData()
             this.oldPid && this.reloadByPid(this.oldPid)
             this.reloadByPid(this.form['pid'])
             this.dialogVisible = false
@@ -407,7 +367,8 @@ export default {
     reloadByPid(pid) {
       if (pid !== 0 && this.maps.get(pid)) {
         const { row, treeNode, resolve } = this.maps.get(pid)
-        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, [])
+        const sto = this.$refs.table['store']
+        this.$set(sto.states.lazyTreeNodeMap, pid, [])
         this.initTableData(row, treeNode, resolve)
       }
     },