重构列表页- 以授权客体管理->应用功能资源管理为例，搜索栏、操作栏、表格项直接走配置项，配置页面

src/components/operate-bar/index.vue

@@ -0,0 +1,46 @@
+<!--
+操作栏组件
+@Author: linqian
+@Date: 2021-07-28 14:23
+-->
+<template>
+  <dg-row zebra="20px" class="opt-bar">
+    <dg-button
+      v-for="(item, index) in pageOptList"
+      :key="index"
+      type="primary"
+      :icon="item | optIcon"
+      @click="handleSubmitPageOpt(item)"
+      >{{ item }}</dg-button
+    >
+  </dg-row>
+</template>
+
+<script>
+export default {
+  props: {
+    pageOptList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+      handleSubmitPageOpt(type) {
+          this.$emit("submitPageOpt", type);
+      }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss' scoped>
+.opt-bar {
+    border-top: 1px dashed rgba(0,0,0,.15);
+}
+</style>

src/components/search-bar/index.vue

@@ -0,0 +1,70 @@
+<!--
+搜索栏组件
+@Author: linqian
+@Date: 2021-07-28 15:50
+-->
+<template>
+  <div>
+    <el-form :inline="true">
+      <el-form-item v-for="(item, index) in form" :key="index" :label="item.label">
+        <component :is="item.component" v-model="item.value" v-bind="item.attr" clearable />
+      </el-form-item>
+      <el-form-item>
+        <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
+        <dg-button v-if="resetable" type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    conditionForm: {
+      type: Array
+    },
+    resetable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {},
+  data() {
+    return {
+      form: []
+    };
+  },
+  computed: {},
+  watch: {
+    conditionForm: {
+      immediate: true,
+      handler(val) {
+        this.form = val;
+      }
+    }
+  },
+  methods: {
+    handleSearch() {
+      let condition = {};
+      this.form.forEach((item) => {
+        const { name, value, op } = item;
+        condition[name] = {
+          value,
+          op
+        };
+      });
+      this.$emit('submitSearch', condition);
+    },
+    handleReset() {
+      this.form.forEach((item) => {
+        item.value = '';
+      });
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>

src/filters/index.js

@@ -49,6 +49,7 @@ export function dateFormatter(value, fmt) {
   }
 }
 
+// 操作按钮图标
 export function optIcon(type, defaultIcon) {
   if (defaultIcon) {
     return defaultIcon;
@@ -59,7 +60,19 @@ export function optIcon(type, defaultIcon) {
     .set('详情', 'el-icon-document')
     .set('删除', 'el-icon-delete')
     .set('移除', 'el-icon-remove-outline')
-    .set('功能配置', 'el-icon-menu');
+    .set('功能配置', 'el-icon-menu')
+    .set('导入', 'el-icon-upload2')
+    .set('导入', 'el-icon-upload2')
+    .set('新增', 'el-icon-circle-plus-outline')
+    .set('同步', 'el-icon-refresh')
+    .set('权限申请', 'el-icon-circle-plus-outline')
+    .set('批量添加', 'el-icon-circle-plus-outline')
+    .set('批量移除', 'el-icon-remove-outline')
+    .set('批量设置名单级别', 'el-icon-setting')
+    .set('查询', 'el-icon-search')
+    .set('重置', 'el-icon-refresh-right')
+    .set('撤销', 'el-icon-refresh-right')
+    .set('撤回', 'el-icon-back')
   const icon = iconMap.get(type);
   return icon ? icon : 'el-icon-edit';
 }

src/pages/common/basic-list-page/index.vue

@@ -0,0 +1,28 @@
+<!--
+基础列表页：包含搜索栏、操作栏、列表
+@Author: linqian
+@Date: 2021-07-28 14:15
+-->
+<template>
+  <div class="basic-page">
+      
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>

src/pages/common/new-table/index.vue

@@ -31,21 +31,21 @@
       </template>
       <slot></slot>
       <!--操作栏-->
-      <!-- <dg-table-column label="操作" align="center" v-if="optList.length">
-        <template slot-scope="scope">
+      <dg-table-column label="操作" align="center" v-if="tableOptList.length">
+        <template slot-scope="{ row }">
           <div class="u-table__operation">
             <el-tooltip
-              v-for="(item, index) in optList"
+              v-for="(item, index) in tableOptList"
               :key="index"
-              :content="item.tooltip"
+              :content="item"
               effect="dark"
               placement="top-end"
             >
-              <i :class="item.icon" @click="item.on(scope.row, $event)"></i>
+              <i :class="item | optIcon" @click="handleEvent(item,row)"></i>
             </el-tooltip>
           </div>
         </template>
-      </dg-table-column> -->
+      </dg-table-column>
     </dg-table>
   </div>
 </template>
@@ -80,7 +80,7 @@ export default {
       default: false
     },
     // 列表操作
-    optList: {
+    tableOptList: {
       type: Array,
       default: () => []
     }
@@ -170,10 +170,14 @@ export default {
         this.newChooseArr = copyAttr;
       });
       console.log(this.newChooseArr);
+    },
+    // 发送操作事件类型
+    handleEvent(type, row) {
+      this.$emit("submitTableOpt", type, row);
     }
   },
   created() {},
-  mounted() {}
+  mounted() {},
 };
 </script>
 

src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/app-list.vue

@@ -4,223 +4,230 @@
 @Date: 2021-05-17 15:59
 -->
 <template>
-    <!-- <dg-card header="应用列表"> -->
-    <div>
-        <!-- 搜索项 -->
-        <el-form :inline="true" class="search-form">
-            <el-form-item label="应用系统名称">
-                <el-input v-model="form.applyName.value" placeholder="请输入应用系统名称" clearable></el-input>
-            </el-form-item>
-            <el-form-item label="应用系统在用标识">
-                <dg-select code="DM_APPLY_STATUS" v-model="form.applyStatus.value"  placeholder="请选择应用系统在用标识"  clearable></dg-select>
-            </el-form-item>
-            <el-form-item>
-                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
-                <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
-            </el-form-item>
-        </el-form>
-
-        <!-- 操作 -->
-        <dg-row zebra="10px">
-            <dg-button type="primary" icon="el-icon-upload2" @click="handleImport">导入</dg-button>
-            <dg-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</dg-button>
-            <dg-button type="primary" icon="el-icon-refresh" @click="handleSync">同步</dg-button>
-        </dg-row>
-        <!-- 表格 -->
-        <dg-table
-            ref="table"
-            :url="tableUrl"
-            :condition="form"
-            border
-            row-key="id"
-        >
-            <dg-table-column type="index" width="75" label="序号" align="center"></dg-table-column>
-            <dg-table-column prop="applyCode" label="应用系统编号" align="center"></dg-table-column>
-            <dg-table-column prop="applyName" label="应用系统名称" align="center"></dg-table-column>
-            <dg-table-column prop="appEnglishName" label="应用英文名称" align="center"></dg-table-column>
-            <dg-table-column prop="applyStatus" label="应用系统在用标识" align="center" code="DM_APPLY_STATUS">
-                <!-- <template slot-scope="scope">
-                    {{ scope.row.applyStatus == "0" ? "禁用" : "启用" }}
-                </template> -->
-            </dg-table-column>
-            <dg-table-column label="操作" align="center">
-                <template slot-scope="scope">
-                    <div class="u-table__operation">
-                        <el-tooltip
-                            v-for="(item, index) in optList"
-                            :key="index"
-                            :content="item.label"
-                            effect="dark"
-                            placement="top-end"
-                        >
-                            <i :class="item.label | optIcon" @click="item.on(scope.row, $event)"></i>
-                        </el-tooltip>
-                    </div>
-                </template>
-            </dg-table-column>
-        </dg-table>
-    </div>
-    <!-- </dg-card> -->
+  <div>
+    <!-- 搜索栏 -->
+    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
+    <!-- 操作栏 -->
+    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
+    <!-- 表格 -->
+    <basic-table
+      ref="table"
+      :tableHeader="tableHeader"
+      :tableUrl="tableUrl"
+      :condition="condition"
+      :tableOptList="tableOptList"
+      @submitTableOpt="receviceOpt"
+    >
+    </basic-table>
+  </div>
 </template>
 
 <script>
-import importFile from "@/pages/common/import";
-import addAppForm from "./add-app-form";
-import { appRestApi } from "@/api/application";
-import { appSync } from "@/api/sync"
-import addFuncForm from "./add-func-form";
-import { appImportUrl } from "@/api/import";
+import importFile from '@/pages/common/import';
+import addAppForm from './add-app-form';
+import { appRestApi } from '@/api/application';
+import { appSync } from '@/api/sync';
+import addFuncForm from './add-func-form';
+import { appImportUrl } from '@/api/import';
+import operateBar from '@/components/operate-bar';
+import basicTable from '@/pages/common/new-table';
+import searchBar from '@/components/search-bar';
 
 export default {
-    components: {},
-    data() {
-        return {
-            form: {
-                applyName: {
-                    value: "",
-                    op: "like"
-                },
-                applyStatus: {
-                    value: "",
-                    op: "="
-                }
-            },
-            tableUrl: appRestApi.table,
-            optList: [
-                { label: "修改", on: this.handleEdit },
-                { label: "详情", on: this.handleViewDetail },
-                { label: "删除", on: this.handleDelete },
-                { label: "功能配置", on: this.handleSetFunc }
-            ]
-        };
-    },
-    computed: {},
-    methods: {
-        /**
-         * 编辑
-         */
-        handleEdit(row, e) {
-            this.handleOpenForm(row.id, "编辑");
+  components: { operateBar, basicTable, searchBar },
+  data() {
+    return {
+      condition: {},
+      // 搜索栏配置
+      conditionForm: [
+        {
+          label: '应用系统名称',
+          name: 'applyName',
+          op: 'like',
+          value: '',
+          component: 'ElInput',
+          attr: {
+            placeholder: '请输入应用系统名称'
+          }
         },
-        /**
-         * 查看详情
-         */
-        handleViewDetail(row, e) {
-            this.handleOpenForm(row.id, "详情", true);
+        {
+          label: '应用系统在用标识',
+          name: 'applyStatus',
+          op: '=',
+          value: '',
+          component: 'DgSelect',
+          attr: {
+            placeholder: '请选择应用系统在用标识',
+            code: 'DM_APPLY_STATUS'
+          }
+        }
+      ],
+      // 表格请求路径
+      tableUrl: appRestApi.table,
+      // 表头
+      tableHeader: [
+        {
+          label: '应用系统编号',
+          prop: 'applyCode'
         },
-        /**
-         * 删除
-         */
-        handleDelete(row, e) {
-            this.$dgConfirm(`是否确认删除该条应用！`, "提示", {}).then(() => {
-                appRestApi.del(row.id).then((res) => {
-                    this.$message.success(res);
-                    this.handleSearch();
-                });
-            });
+        {
+          label: '应用系统名称',
+          prop: 'applyName'
         },
-        /**
-         * 功能配置
-         */
-        handleSetFunc(app, e) {
-            const layer = this.$dgLayer({
-                title: "功能配置",
-                content: addFuncForm,
-                props: {
-                    app
-                },
-                noneBtnField: true,
-                area: ["1200px", "750px"]
-            });
+        {
+          label: '应用英文名称',
+          prop: 'appEnglishName'
         },
-        /**
-         * 查询
-         */
-        handleSearch() {
-            this.$refs.table.searchForm();
+        {
+          label: '应用系统在用标识',
+          prop: 'applyStatus',
+          code: 'DM_APPLY_STATUS'
+        }
+      ],
+      // 表头操作
+      tableOptList: ['修改', '详情', '删除', '功能配置'],
+      // 页面操作
+      pageOptList: ['导入', '新增', '同步']
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 接收操作事件
+     */
+    receviceOpt(type, row) {
+      if (type == '修改') {
+        this.handleEdit(row);
+      } else if (type == '详情') {
+        this.handleViewDetail(row);
+      } else if (type == '删除') {
+        this.handleDelete(row);
+      } else if (type == '功能配置') {
+        this.handleSetFunc(row);
+      } else if (type == '导入') {
+        this.handleImport();
+      } else if (type == '新增') {
+        this.handleAdd();
+      } else if (type == '同步') {
+        this.handleSync();
+      }
+    },
+    /**
+     * 查询
+     */
+    receiveSearch(value) {
+      this.condition = value;
+      this.handleSearch();
+    },
+    handleSearch() {
+      this.$nextTick(() => {
+        this.$refs.table.handleSearch();
+      });
+    },
+    /**
+     * 编辑
+     */
+    handleEdit(row) {
+      this.handleOpenForm(row.id, '编辑');
+    },
+    /**
+     * 查看详情
+     */
+    handleViewDetail(row) {
+      this.handleOpenForm(row.id, '详情', true);
+    },
+    /**
+     * 删除
+     */
+    handleDelete(row) {
+      this.$dgConfirm(`是否确认删除该条应用！`, '提示', {}).then(() => {
+        appRestApi.del(row.id).then((res) => {
+          this.$message.success(res);
+          this.handleSearch();
+        });
+      });
+    },
+    /**
+     * 功能配置
+     */
+    handleSetFunc(app) {
+      const layer = this.$dgLayer({
+        title: '功能配置',
+        content: addFuncForm,
+        props: {
+          app
         },
-        /**
-         * 重置
-         */
-        handleReset() {
-            for (const key in this.form) {
-                this.form[key].value = "";
-            }
+        noneBtnField: true,
+        area: ['1200px', '750px']
+      });
+    },
+    /**
+     * 导入
+     */
+    handleImport() {
+      const vm = this;
+      const layer = this.$dgLayer({
+        title: '导入',
+        content: importFile,
+        props: {
+          temp: 'apply',
+          action: appImportUrl
         },
-        /**
-         * 导入
-         */
-        handleImport() {
-            const vm = this;
-            const layer = this.$dgLayer({
-                title: "导入",
-                content: importFile,
-                props: {
-                    temp: "apply",
-                    action: appImportUrl
-                },
-                on: {
-                    success(params) {
-                        vm.handleSearch();
-                        layer.close(layer.dialogIndex);
-                    }
-                },
-                cancel: function (index, layero) {
-                    // 关闭对应弹窗的ID
-                    layer.close(index);
-                    return false;
-                },
-                area: ["550px", "500px"]
-            });
+        on: {
+          success(params) {
+            vm.handleSearch();
+            layer.close(layer.dialogIndex);
+          }
         },
-        /**
-         * 新增
-         */
-        handleAdd() {
-            this.handleOpenForm(void 0, "新增");
+        cancel: function (index, layero) {
+          // 关闭对应弹窗的ID
+          layer.close(index);
+          return false;
         },
-        handleOpenForm(id, title, isDetail = false) {
-            const vm = this;
-            const layer = this.$dgLayer({
-                title,
-                content: addAppForm,
-                props: {
-                    id,
-                    isDetail
-                },
-                btn: ["确定", "取消"],
-                btnAlign: "r",
-                noneBtnField: isDetail,
-                yes: (index) => {
-                    let _layer = layer.$children[0];
-                    _layer.saveForm().then((res) => {
-                        layer.close(index);
-                        vm.handleSearch();
-                    });
-                },
-
-                area: ["900px", "600px"]
-            });
+        area: ['550px', '500px']
+      });
+    },
+    /**
+     * 新增
+     */
+    handleAdd() {
+      this.handleOpenForm(void 0, '新增');
+    },
+    handleOpenForm(id, title, isDetail = false) {
+      const vm = this;
+      const layer = this.$dgLayer({
+        title,
+        content: addAppForm,
+        props: {
+          id,
+          isDetail
         },
-        /**
-         * 同步
-         */
-        handleSync() {
-              appSync().then(res => {
-                this.$message.success("同步中，若数据量大，可能会存在延迟，请稍后自行刷新！");
-                // this.handleSearch();
-            })
+        btn: ['确定', '取消'],
+        btnAlign: 'r',
+        noneBtnField: isDetail,
+        yes: (index) => {
+          let _layer = layer.$children[0];
+          _layer.saveForm().then((res) => {
+            layer.close(index);
+            vm.handleSearch();
+          });
         },
-        /**
-         * 点击表格某行
-         */
-        handleRowClick(row, column, event) {
-            this.$emit("rowClick", row);
-        }
-    },
-    created() {
+
+        area: ['900px', '600px']
+      });
     },
-    mounted() {}
+    /**
+     * 同步
+     */
+    handleSync() {
+      appSync().then((res) => {
+        this.$message.success('同步中，若数据量大，可能会存在延迟，请稍后自行刷新！');
+        // this.handleSearch();
+      });
+    }
+  },
+  created() {},
+  mounted() {}
 };
 </script>
 

src/pages/data-auth-module/auth-object-manage/object-prop-manage/index.vue

@@ -52,7 +52,7 @@ export default {
         // 组件内部参数
         return {
             // 参数名称及默认值
-            compoentType: {
+            componentType: {
                 FUN: "function-list",
                 SER: "service-list",
                 APP: "application-list",
@@ -76,7 +76,7 @@ export default {
             const { attrBelongType, operateType } = data;
             this.operateType = operateType;
             this.parentNode = data;
-            this.componentValue = this.compoentType[attrBelongType];
+            this.componentValue = this.componentType[attrBelongType];
             this.key++;
         },
         /**

src/router/modules/empower-manage.js

@@ -3,77 +3,75 @@
 	@author:laiyh
 	@Date:2020-07-28
 */
-import Layout from "@/pages/layout/layout";
-import common from "@/pages/common";
+import Layout from '@/pages/layout/layout';
+import common from '@/pages/common';
 
 // const Layout = () => import("@/pages/" + process.env.LAYOUT + "/layout");
 
 const componentRouter = {
-    path: "/empower-manage",
-    component: Layout,
-    redirect: "/empower-manage",
-    alwaysShow: true,
-    meta: { title: "授权管理", icon: "el-icon-s-operation", noCache: true, permission: ["YHGLPT_SQGL"] },
-    children: [
+  path: '/empower-manage',
+  component: Layout,
+  redirect: '/empower-manage',
+  alwaysShow: true,
+  meta: { title: '授权管理', icon: 'el-icon-s-operation', noCache: true, permission: ['YHGLPT_SQGL'] },
+  children: [
+    {
+      path: 'institutional-quotas-manage',
+      component: () => import('@/pages/empower-manage/institutional-quotas-manage'),
+      name: 'institutional-quotas-manage',
+      meta: { title: '机构配额管理', noCache: false, permission: ['YHGLPT_SQGL_JGPEGL'] }
+    },
+    {
+      path: 'persional-empower-manage',
+      component: () => import('@/pages/empower-manage/persional-empower-manage'),
+      name: 'persional-empower-manage',
+      meta: { title: '功能授权管理', noCache: false, permission: ['YHGLPT_SQGL_RYSQGL'] }
+    },
+    {
+      path: 'data-auth-manage',
+      component: common,
+      name: 'common',
+      meta: { title: '数据授权管理', noCache: false, permission: ['QXGL_SQGL_SJSQGL'] },
+      children: [
         {
-            path: "institutional-quotas-manage",
-            component: () => import("@/pages/empower-manage/institutional-quotas-manage"),
-            name: "institutional-quotas-manage",
-            meta: { title: "机构配额管理", noCache: false, permission: ["YHGLPT_SQGL_JGPEGL"] }
+          path: 'business-tag-auth',
+          component: () =>
+            import('@/pages/data-auth-module/data-permission-manage/data-auth-manage/business-tag-auth.vue'),
+          name: 'business-tag-auth',
+          meta: { title: '标签授权', noCache: false, permission: ['QXGL_SQGL_SJSQGL_BQSQ'], layout: 'page' }
         },
         {
-            path: "persional-empower-manage",
-            component: () => import("@/pages/empower-manage/persional-empower-manage"),
-            name: "persional-empower-manage",
-            meta: { title: "功能授权管理", noCache: false, permission: ["YHGLPT_SQGL_RYSQGL"] }
+          path: 'org-auth',
+          component: () => import('@/pages/data-auth-module/data-permission-manage/data-auth-manage/org-auth.vue'),
+          name: 'org-auth',
+          meta: { title: '机构授权', noCache: false, permission: ['QXGL_SQGL_SJSQGL_JGSQ'], layout: 'page' }
         },
         {
-            path: "data-auth-manage",
-            component: common,
-            name: "common",
-            meta: { title: "数据授权管理", noCache: false, permission: ["QXGL_SQGL_SJSQGL"] },
-            children: [
-                {
-                    path: "business-tag-auth",
-                    component: () =>
-                        import("@/pages/data-auth-module/data-permission-manage/data-auth-manage/business-tag-auth.vue"),
-                    name: "business-tag-auth",
-                    meta: { title: "标签授权", noCache: false, permission: ["QXGL_SQGL_SJSQGL_BQSQ"], layout: "page" }
-                },
-                {
-                    path: "org-auth",
-                    component: () =>
-                        import("@/pages/data-auth-module/data-permission-manage/data-auth-manage/org-auth.vue"),
-                    name: "org-auth",
-                    meta: { title: "机构授权", noCache: false, permission: ["QXGL_SQGL_SJSQGL_JGSQ"], layout: "page" }
-                },
-                {
-                    path: "person-auth",
-                    component: () =>
-                        import("@/pages/data-auth-module/data-permission-manage/data-auth-manage/person-auth.vue"),
-                    name: "person-auth",
-                    meta: { title: "人员授权", noCache: false, permission: ["QXGL_SQGL_SJSQGL_RYSQ"], layout: "page" }
-                }
-            ]
-        },
-        // 服务授权管理
+          path: 'person-auth',
+          component: () => import('@/pages/data-auth-module/data-permission-manage/data-auth-manage/person-auth.vue'),
+          name: 'person-auth',
+          meta: { title: '人员授权', noCache: false, permission: ['QXGL_SQGL_SJSQGL_RYSQ'], layout: 'page' }
+        }
+      ]
+    },
+    // 服务授权管理
+    {
+      path: '/service-delagate-manage',
+      component: common,
+      name: 'common',
+      redirect: '/service-delagate',
+      alwaysShow: true,
+      meta: { title: '服务授权管理', icon: 'el-icon-time', noCache: false, permission: ['QXGL_SQGL_SJSQGL_RYSQ'] },
+      children: [
         {
-            path: "/service-delagate-manage",
-            component: common,
-            name: "common",
-            redirect: "/service-delagate",
-            alwaysShow: true,
-            meta: { title: "服务授权管理", icon: "el-icon-time", noCache: false, permission: ["QXGL_SQGL_SJSQGL_RYSQ"]},
-            children: [
-                {
-                    path: "service-delagate",
-                    component: () => import("@/pages/service-delegate"),
-                    name: "service-delagate",
-                    meta: { title: "服务授权", noCache: false, permission: ["QXGL_SQGL_SJSQGL_RYSQ"]}
-                }
-            ]
+          path: 'service-delagate',
+          component: () => import('@/pages/service-delegate'),
+          name: 'service-delagate',
+          meta: { title: '服务授权', noCache: false, permission: ['QXGL_SQGL_SJSQGL_RYSQ'] }
         }
-    ]
+      ]
+    }
+  ]
 };
 
 export default componentRouter;