diff --git a/frontend/src/api/system/dept.js b/frontend/src/api/system/dept.js
index 0e9ab11803..c4a536007a 100644
--- a/frontend/src/api/system/dept.js
+++ b/frontend/src/api/system/dept.js
@@ -3,7 +3,8 @@ import request from '@/utils/request'
 export function getDeptTree(pid) {
   return request({
     url: 'api/dept/childNodes/' + pid,
-    method: 'post'
+    method: 'post',
+    loading: true
   })
 }
 
diff --git a/frontend/src/api/system/menu.js b/frontend/src/api/system/menu.js
index b46aafcc27..a093687647 100644
--- a/frontend/src/api/system/menu.js
+++ b/frontend/src/api/system/menu.js
@@ -3,7 +3,8 @@ import request from '@/utils/request'
 export function getMenusTree(pid) {
   return request({
     url: 'api/menu/childNodes/' + pid,
-    method: 'post'
+    method: 'post',
+    loading: true
   })
 }
 
diff --git a/frontend/src/api/system/role.js b/frontend/src/api/system/role.js
index 7407008c33..07be60da4e 100644
--- a/frontend/src/api/system/role.js
+++ b/frontend/src/api/system/role.js
@@ -3,7 +3,8 @@ import request from '@/utils/request'
 export function allRoles() {
   return request({
     url: '/api/role/all',
-    method: 'post'
+    method: 'post',
+    loading: true
   })
 }
 
@@ -11,7 +12,8 @@ export function roleGrid(pageIndex, pageSize, data) {
   return request({
     url: '/api/role/roleGrid/' + pageIndex + '/' + pageSize,
     method: 'post',
-    data
+    data,
+    loading: true
   })
 }
 
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 08f6342a5a..2b0a8d8bda 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -448,7 +448,8 @@ export default {
   menu: {
     create: '创建菜单',
     modify: '修改菜单',
-    delete: '删除菜单'
+    delete: '删除菜单',
+    delete_confirm: '确定删除菜单吗'
   },
   organization: {
     create: '创建组织',
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index d4e29f733e..7e2ac36ace 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -115,8 +115,8 @@
                       <span
                         class="item-axis"
                       >
-                        {{ item.name }}<i class="el-icon-arrow-down el-icon--right"/>
-                        <span/>
+                        {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+                        <span />
                         <el-dropdown-menu slot="dropdown">
                           <el-dropdown-item icon="el-icon-edit-outline">
                             item1
@@ -147,13 +147,13 @@
                       <span
                         class="item-axis"
                       >
-                        {{ item.name }}<i class="el-icon-arrow-down el-icon--right"/>
-                        <span/>
+                        {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+                        <span />
                         <el-dropdown-menu slot="dropdown">
                           <el-dropdown-item icon="el-icon-edit-outline">
                             <el-dropdown placement="right-start" size="mini">
                               <span class="el-dropdown-link">
-                                item3<i class="el-icon-arrow-right el-icon--right"/>
+                                item3<i class="el-icon-arrow-right el-icon--right" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item>sub1</el-dropdown-item>
@@ -173,7 +173,7 @@
           </el-row>
 
           <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-            <div id="echart" style="width: 100%;height: 80vh;"/>
+            <div id="echart" style="width: 100%;height: 80vh;" />
           </div>
         </el-row>
       </el-col>
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index 7a7e9a0b19..6fce37780f 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -1,57 +1,46 @@
 <template>
-  <div v-loading="result.loading">
+  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
-    <el-card class="table-card">
-      <template v-slot:header>
-        <ms-table-header
-          :permission="permission"
-          :condition.sync="condition"
-          :create-tip="$t('organization.create')"
-          :title="$t('commons.organization')"
-          @search="initTableData"
-          @create="create"
-        />
+    <complex-table
+      ref="table"
+      :data="tableData"
+      lazy
+      :load="initTableData"
+      :columns="columns"
+      :buttons="buttons"
+      :header="header"
+      :search-config="searchConfig"
+      :pagination-config="paginationConfig"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      row-key="deptId"
+      @search="initTableData"
+    >
+      <template #buttons>
+        <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
       </template>
-      <!-- system menu organization table-->
-      <el-table
-        ref="table"
-        border
-        class="adjust-table"
-        :data="tableData"
-        lazy
-        :load="initTableData"
-        style="width: 100%"
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-        row-key="deptId"
-      >
-        <!-- <el-table-column :selectable="checkboxT" type="selection" width="55" /> -->
-        <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"
-              :disabled="scope.row.id === 1"
-              active-color="#409EFF"
-              inactive-color="#F56C6C"
-              @change="changeEnabled(scope.row, scope.row.enabled,)"
-            />
-          </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 :label="$t('commons.operating')">
-          <template v-slot:default="scope">
-            <ms-table-operator :permission="permission" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
-          </template>
-        </el-table-column> -->
-      </el-table>
+      <!-- <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"
+            :disabled="scope.row.id === 1"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            @change="changeEnabled(scope.row, scope.row.enabled,)"
+          />
+        </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-card>
+      <fu-table-operations :buttons="buttons" label="操作" fix />
+    </complex-table>
 
     <!-- add organization form -->
     <el-dialog
@@ -64,10 +53,10 @@
     >
       <el-form ref="createOrganization" inline :model="form" :rules="rule" size="small" label-width="80px">
 
-        <el-form-item label="部门名称" prop="name">
+        <el-form-item label="组织名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
         </el-form-item>
-        <el-form-item label="部门排序" prop="deptSort">
+        <el-form-item label="组织排序" prop="deptSort">
           <el-input-number
             v-model.number="form.deptSort"
             :min="0"
@@ -77,7 +66,7 @@
           />
         </el-form-item>
 
-        <el-form-item label="顶级部门" prop="top">
+        <el-form-item label="顶级组织" prop="top">
           <el-radio-group v-model="form.top" style="width: 140px">
             <el-radio :label="true">是</el-radio>
             <el-radio :label="false">否</el-radio>
@@ -92,7 +81,7 @@
 
           <!-- <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio> -->
         </el-form-item>
-        <el-form-item v-if="!form.top" style="margin-bottom: 0;" label="上级部门" prop="pid">
+        <el-form-item v-if="!form.top" style="margin-bottom: 0;" label="上级组织" prop="pid">
           <treeselect
             v-model="form.pid"
             :auto-load-root-options="false"
@@ -103,44 +92,31 @@
           />
         </el-form-item>
       </el-form>
-      <!-- <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
-      </div> -->
-      <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="dialogOrgAddVisible = false"
-          @confirm="createDept('createOrganization')"
-        />
-      </template>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="dialogOrgAddVisible = false">{{ $t('commons.cancel') }}</el-button>
+        <el-button type="primary" @click="createDept('createOrganization')">确认</el-button>
+      </div>
+
     </el-dialog>
 
-    <ms-delete-confirm ref="deleteConfirm" :title="$t('organization.delete')" @delete="_handleDelete" />
-
-  </div>
+  </layout-content>
 </template>
 
 <script>
+import LayoutContent from '@/components/business/LayoutContent'
+import ComplexTable from '@/components/business/complex-table'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
-import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
-import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
-import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
-import {
-  listenGoBack,
-  removeGoBackListener
-} from '@/metersphere/common/js/utils'
-import MsDeleteConfirm from '@/metersphere/common/components/MsDeleteConfirm'
+
 import { getDeptTree, addDept, editDept, delDept } from '@/api/system/dept'
 
 export default {
   name: 'MsOrganization',
   components: {
-    MsDeleteConfirm,
-    MsTableHeader,
-    MsTableOperator,
-    MsDialogFooter,
+    LayoutContent,
+    ComplexTable,
     Treeselect
   },
   data() {
@@ -173,6 +149,28 @@ export default {
         add: ['dept:add'],
         edit: ['dept:edit'],
         del: ['dept:del']
+      },
+      header: '',
+      columns: [],
+      buttons: [
+        {
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+        }, {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
+        }
+      ],
+      searchConfig: {
+        useQuickSearch: false,
+        useComplexSearch: false,
+        quickPlaceholder: '按姓名搜索',
+        components: [
+
+        ]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
       }
 
     }
@@ -184,7 +182,6 @@ export default {
     create() {
       this.dialogOrgAddVisible = true
       this.formType = 'add'
-      listenGoBack(this.closeFunc)
     },
     search(condition) {
       console.log(condition)
@@ -196,7 +193,6 @@ export default {
       this.oldPid = row.pid
       this.form = Object.assign({}, row)
       this.treeByRow(row)
-      listenGoBack(this.closeFunc)
     },
 
     treeByRow(row) {
@@ -242,7 +238,7 @@ export default {
 
     initTableData(row, treeNode, resolve) {
       const _self = this
-      const pid = row ? row.deptId : '0'
+      const pid = (row && row.deptId) ? row.deptId : '0'
       getDeptTree(pid).then(response => {
         let data = response.data
         data = data.map(obj => {
@@ -268,7 +264,6 @@ export default {
       this.form = {}
       this.oldPid = null
       this.depts = null
-      removeGoBackListener(this.closeFunc)
       this.dialogOrgAddVisible = false
     },
 
@@ -312,7 +307,7 @@ export default {
     },
     // 改变状态
     changeEnabled(data, val) {
-      this.$confirm('此操作将 "停用" ' + data.name + '部门, 是否继续？', '提示', {
+      this.$confirm('此操作将 "停用" ' + data.name + '组织, 是否继续？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -353,9 +348,7 @@ export default {
         }
       })
     },
-    handleDelete(organization) {
-      this.$refs.deleteConfirm.open(organization)
-    },
+
     _handleDelete(organization) {
       this.$confirm(this.$t('organization.delete_confirm'), '', {
         confirmButtonText: this.$t('commons.confirm'),
@@ -407,7 +400,6 @@ export default {
 </script>
 
 <style scoped>
-@import "~@/metersphere/common/css/index.css";
 .member-size {
   text-decoration: underline;
 }
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index 13d84c617f..9eee43df8a 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -1,70 +1,59 @@
 <template>
-  <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-
-    <el-card class="table-card">
-      <template v-slot:header>
-        <ms-table-header
-          :permission="permission"
-          :condition.sync="condition"
-          :create-tip="$t('menu.create')"
-          :title="$t('commons.menu')"
-          @search="initTableData"
-          @create="create"
-        />
+  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+    <complex-table
+      ref="table"
+      :data="tableData"
+      lazy
+      :load="initTableData"
+      :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
-        ref="table"
-        border
-        class="adjust-table"
-        :data="tableData"
-        lazy
-        :load="initTableData"
-        style="width: 100%"
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-        row-key="menuId"
-      >
 
-        <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 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>
+      <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>
 
-        <el-table-column :label="$t('commons.operating')">
-          <template v-slot:default="scope">
-            <ms-table-operator :permission="permission" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
-          </template>
-        </el-table-column>
-      </el-table>
-
-    </el-card>
+      <fu-table-operations :buttons="buttons" label="操作" fix />
+    </complex-table>
 
     <el-dialog
       :close-on-click-modal="false"
@@ -97,7 +86,7 @@
             </el-input>
           </el-popover>
         </el-form-item>
-        <el-form-item v-show="form.type !== '2'" label="外链菜单" prop="iframe">
+        <!-- <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>
@@ -114,7 +103,7 @@
             <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> -->
         <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>
@@ -146,43 +135,37 @@
           />
         </el-form-item>
       </el-form>
-
-      <template v-slot:footer>
+      <div slot="footer" class="dialog-footer">
+        <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>
+      </template> -->
     </el-dialog>
 
-    <ms-delete-confirm ref="deleteConfirm" :title="$t('menu.delete')" @delete="_handleDelete" />
-
-  </div>
+  </layout-content>
 </template>
 
 <script>
+import LayoutContent from '@/components/business/LayoutContent'
+import ComplexTable from '@/components/business/complex-table'
+// import { checkPermission } from '@/utils/permission'
 import IconSelect from '@/components/IconSelect'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
-import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
-import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
-import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
-import {
-  listenGoBack,
-  removeGoBackListener
-} from '@/metersphere/common/js/utils'
-import MsDeleteConfirm from '@/metersphere/common/components/MsDeleteConfirm'
 
 import { addMenu, editMenu, delMenu, getMenusTree } from '@/api/system/menu'
 
 export default {
   name: 'MsMenu',
   components: {
-    MsDeleteConfirm,
-    MsTableHeader,
-    MsTableOperator,
-    MsDialogFooter,
+    ComplexTable,
+    LayoutContent,
     Treeselect,
     IconSelect
   },
@@ -191,11 +174,6 @@ export default {
       menus: [],
       topMunu: { id: 0, label: '顶级类目', children: null },
       formType: 'add',
-      queryPath: '/api/menu/childNodes/',
-      deletePath: '/api/menu/delete',
-      createPath: '/api/menu/create',
-      updatePath: '/api/menu/update',
-      result: {},
       dialogVisible: false,
       condition: {},
       tableData: [],
@@ -216,6 +194,41 @@ export default {
         add: ['menu:add'],
         edit: ['menu:edit'],
         del: ['menu:del']
+      },
+
+      header: '',
+      columns: [],
+      buttons: [
+        {
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+        }, {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
+        }
+      ],
+      searchConfig: {
+        useQuickSearch: false,
+        useComplexSearch: false,
+        quickPlaceholder: '按姓名搜索',
+        components: [
+
+          //   { field: 'name', label: '姓名', component: 'FuComplexInput' },
+
+        //   {
+        //     field: 'enabled',
+        //     label: '状态',
+        //     component: 'FuComplexSelect',
+        //     options: [
+        //       { label: '启用', value: '1' },
+        //       { label: '禁用', value: '0' }
+        //     ],
+        //     multiple: false
+        //   }
+        ]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
       }
 
     }
@@ -229,7 +242,6 @@ export default {
       this.form = Object.assign({}, this.defaultForm)
       this.dialogVisible = true
       this.formType = 'add'
-      listenGoBack(this.closeFunc)
     },
     search(condition) {
       console.log(condition)
@@ -241,7 +253,6 @@ export default {
       this.oldPid = row.pid
       this.form = Object.assign({}, row)
       this.treeByRow(row)
-      listenGoBack(this.closeFunc)
     },
 
     treeByRow(row) {
@@ -288,7 +299,7 @@ export default {
 
     initTableData(row, treeNode, resolve) {
       const _self = this
-      const pid = row ? row.menuId : '0'
+      const pid = (row && row.menuId) ? row.menuId : '0'
 
       getMenusTree(pid).then(response => {
         let data = response.data
@@ -314,7 +325,6 @@ export default {
       this.form = this.defaultForm
       this.oldPid = null
       this.menus = null
-      removeGoBackListener(this.closeFunc)
       this.dialogVisible = false
     },
 
@@ -374,9 +384,7 @@ export default {
         }
       })
     },
-    handleDelete(menu) {
-      this.$refs.deleteConfirm.open(menu)
-    },
+
     _handleDelete(menu) {
       this.$confirm(this.$t('menu.delete_confirm'), '', {
         confirmButtonText: this.$t('commons.confirm'),
@@ -414,7 +422,6 @@ export default {
 </script>
 
 <style scoped>
-@import "~@/metersphere/common/css/index.css";
 .member-size {
   text-decoration: underline;
 }
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index 2d41fa805d..73ee0cae4d 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -1,31 +1,34 @@
 <template>
-  <div v-loading="result.loading" style="height: 100%">
-    <el-container style="width: 100%; height: 100%;border: 1px solid #eee">
-      <el-aside width="70%" style="border: 1px solid #eee">
-        <el-card class="table-card">
-          <template v-slot:header>
-            <ms-table-header :permission="permission" :condition.sync="condition" :create-tip="$t('role.add')" :title="$t('commons.role')" @search="search" @create="create" />
+  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+    <!-- <div v-loading="result.loading" style="height: 100%"> -->
+    <el-container style="width: 100%; height: 100%;">
+      <el-aside width="70%">
+        <complex-table
+          highlight-current-row
+          :data="tableData"
+          :columns="columns"
+          :buttons="buttons"
+          :header="header"
+          :search-config="searchConfig"
+          :pagination-config="paginationConfig"
+          @search="search"
+          @row-click="rowClick"
+        >
+          <template #buttons>
+            <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('role.add')" @click="create" />
           </template>
-          <el-table border highlight-current-row class="adjust-table" :data="tableData" style="width: 100%;" @row-click="rowClick">
 
-            <el-table-column prop="name" label="名称" />
-            <el-table-column prop="code" label="代码" />
-            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
-              <template v-slot:default="scope">
-                <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('commons.operating')">
-              <template v-slot:default="scope">
-                <ms-table-operator :permission="permission" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total" />
-
-        </el-card>
+          <el-table-column prop="name" label="名称" />
+          <el-table-column prop="code" label="代码" />
+          <el-table-column :show-overflow-tooltip="true" 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>
       </el-aside>
-      <el-main style="">
+      <el-main style="padding: 8px 20px;">
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="菜单授权" name="first">
             <el-tree
@@ -67,52 +70,31 @@
           <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
         </el-form-item>
       </el-form>
-
-      <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="dialogVisible = false"
-          @confirm="saveRole('roleForm')"
-        />
-      </template>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
+        <el-button type="primary" @click="saveRole('roleForm')">确认</el-button>
+      </div>
     </el-dialog>
 
-  </div>
+  </layout-content>
 
 </template>
 <script>
-import MsTablePagination from '@/metersphere/common/pagination/TablePagination'
-import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
-import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
-import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
-import {
-  listenGoBack,
-  removeGoBackListener
-} from '@/metersphere/common/js/utils'
+
+import LayoutContent from '@/components/business/LayoutContent'
+import ComplexTable from '@/components/business/complex-table'
 import { addRole, editRole, delRole, roleGrid, addRoleMenus, menuIds } from '@/api/system/role'
 
 import { getMenusTree, getChild } from '@/api/system/menu'
 export default {
   name: 'Role',
   components: {
-    MsTablePagination,
-    MsTableHeader,
-    MsTableOperator,
-    MsDialogFooter
+    LayoutContent,
+    ComplexTable
   },
   data() {
     return {
-      result: {},
-      queryPath: '/api/role/roleGrid',
-      deletePath: '/api/role/delete/',
-      createPath: '/api/role/create',
-      updatePath: '/api/role/update',
-      queryMenusPath: '/api/menu/childNodes/',
-      childMenusPath: '/api/menu/childMenus/',
-      saveRoleMenusPath: '/api/role/saveRolesMenus',
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      condition: {},
+
       tableData: [],
       menus: [],
       menuIds: [],
@@ -131,6 +113,39 @@ export default {
         add: ['role:add'],
         edit: ['role:edit'],
         del: ['role:del']
+      },
+      header: '',
+      columns: [],
+      buttons: [
+        {
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+        }, {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.handleDelete
+        }
+      ],
+      searchConfig: {
+        quickPlaceholder: '按名称搜索',
+        components: [
+        //   { field: 'name', label: '姓名', component: 'FuComplexInput', defaultOperator: 'eq' },
+          { field: 'name', label: '名称', component: 'FuComplexInput' },
+
+          {
+            field: 'enabled',
+            label: '状态',
+            component: 'FuComplexSelect',
+            options: [
+              { label: '启用', value: '1' },
+              { label: '禁用', value: '0' }
+            ],
+            multiple: false
+          }
+        //   { field: 'deptId', label: '组织', component: conditionTable }
+        ]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
       }
     }
   },
@@ -148,10 +163,9 @@ export default {
       this.form = {}
       this.formType = 'add'
       this.dialogVisible = true
-      listenGoBack(this.closeFunc)
     },
     search() {
-      roleGrid(this.currentPage, this.pageSize, this.condition).then(response => {
+      roleGrid(this.paginationConfig.currentPage, this.paginationConfig.pageSize, {}).then(response => {
         const data = response.data
         this.total = data.itemCount
         this.tableData = data.listObject
@@ -162,7 +176,6 @@ export default {
       this.formType = 'modify'
       this.dialogVisible = true
       this.form = Object.assign({}, row)
-      listenGoBack(this.closeFunc)
     },
 
     saveRole(roleForm) {
@@ -182,7 +195,6 @@ export default {
 
     closeFunc() {
       this.dialogVisible = false
-      removeGoBackListener(this.closeFunc)
     },
 
     getMenuDatas(node, resolve) {
@@ -272,5 +284,4 @@ export default {
 </script>
 
 <style scoped>
-@import "~@/metersphere/common/css/index.css";
 </style>