From 85a4cc562585dc4f402497ac0fa6f5e81e1c22db Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 1 Apr 2020 20:12:49 +0800
Subject: [PATCH 1/7] =?UTF-8?q?[Update]=20=E6=9A=82=E6=8F=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActionsGroup/index.vue         |   9 +-
 .../el-data-table/el-data-table.vue           |   2 -
 src/components/DataTable/index.vue            |   3 +-
 src/components/ListTable/HeaderActions.vue    |  60 ---------
 src/components/ListTable/TableAction.vue      | 124 ++++++++++++++++++
 src/components/ListTable/index.vue            |  54 ++------
 src/components/ListTable/search.vue           |  27 ----
 src/i18n/langs/cn.js                          |   3 +-
 src/styles/element-ui.scss                    |   8 ++
 src/views/users/UserGroupList.vue             |  22 +---
 src/views/users/UserList.vue                  |   9 +-
 11 files changed, 162 insertions(+), 159 deletions(-)
 delete mode 100644 src/components/ListTable/HeaderActions.vue
 create mode 100644 src/components/ListTable/TableAction.vue
 delete mode 100644 src/components/ListTable/search.vue

diff --git a/src/components/ActionsGroup/index.vue b/src/components/ActionsGroup/index.vue
index ef06e9272..996a2ef1b 100644
--- a/src/components/ActionsGroup/index.vue
+++ b/src/components/ActionsGroup/index.vue
@@ -1,12 +1,15 @@
 <template>
   <div :class="grouped ? 'el-button-group' : ''">
-    <el-button v-for="item in actions" :key="item.name" :type="item.type" :size="size" :disabled="item.disabled" :icon="item.icon" @click="handleClick(item.name)">{{ item.title }}</el-button>
+    <el-button v-for="item in actions" :key="item.name" :size="size" v-bind="item" @click="handleClick(item.name)">
+      <i v-if="item.fa" :class="'fa ' + item.fa"></i>
+      {{ item.title }}
+    </el-button>
     <el-dropdown v-if="moreActions.length > 0" trigger="click">
       <el-button :size="size" class="btn-more-actions">
-        {{ this.$tc('More actions') }}<i class="el-icon-arrow-down el-icon--right" />
+        {{ this.$tc('More actions') }}<i class="el-icon-arrow-down el-icon--right"></i>
       </el-button>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="item in moreActions" :key="item.name" :icon="item.icon" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
+        <el-dropdown-item v-for="item in moreActions" :key="item.name" v-bind="item" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </div>
diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
index b50f8d491..07445d388 100644
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
@@ -854,8 +854,6 @@ export default {
        * @property {array} rows - 已选中的行数据的数组
        */
       this.$emit('selection-change', val)
-      console.log('Selected', this.selected)
-      console.log('Val', val)
     }
   },
   mounted() {
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index f428cfe6b..d2726d19f 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ElDatableTable class="el-table" v-bind="tableConfig"></ElDatableTable>
+  <ElDatableTable class="el-table" v-bind="tableConfig" v-on="$listeners"></ElDatableTable>
 </template>
 
 <script>
@@ -25,6 +25,7 @@ export default {
             display: 1
           }
         },
+        defaultAlign: 'left',
         dataPath: 'results',
         totalPath: 'count',
         saveQuery: false, // 关闭路径保存查询参数
diff --git a/src/components/ListTable/HeaderActions.vue b/src/components/ListTable/HeaderActions.vue
deleted file mode 100644
index 1f92a5d1f..000000000
--- a/src/components/ListTable/HeaderActions.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <ActionsGroup :actions="tActions" :more-actions="tMoreActions" @clickAction="handleClickAction" class="header-action"></ActionsGroup>
-</template>
-
-<script>
-import ActionsGroup from '../ActionsGroup'
-export default {
-  name: 'HeaderActions',
-  components: {
-    ActionsGroup
-  },
-  props: {
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    moreActions: {
-      type: Array,
-      default: () => ([])
-    },
-    hasSelection: {
-      type: Boolean,
-      default: () => true
-    },
-    selectDisable: {
-      type: Boolean,
-      default: () => true
-    }
-  },
-  data() {
-    return {
-      value: ''
-    }
-  },
-  computed: {
-    tActions() {
-      console.log('actions', this.actions)
-      return this.actions
-    },
-    tMoreActions() {
-      console.log(this.moreActions)
-      return this.moreActions
-    }
-  },
-  methods: {
-    handleClickAction(item) {
-      console.log(this)
-      this.$emit('clickAction', item)
-    },
-    handleAction() {
-      this.$emit('actionClick', this.value)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
-
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
new file mode 100644
index 000000000..43fb98006
--- /dev/null
+++ b/src/components/ListTable/TableAction.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="table-header">
+    <slot name="header">
+      <!--TODO: 事件交互 -->
+      <div class="table-header-left-side">
+        <ActionsGroup :actions="actions" :more-actions="moreActions" class="header-action"></ActionsGroup>
+      </div>
+      <!-- TODO: 事件交互 -->
+      <div class="table-action-right-side">
+        <el-input v-model="keyword" suffix-icon="el-icon-search" :placeholder="$tc('Search')" class="right-side-item action-search" size="small" clearable @change="handleSearch" @input="handleSearch"></el-input>
+        <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item"></ActionsGroup>
+<!--        <el-button-group class="right-side-actions right-side-item">-->
+<!--          <el-button size="mini"><i class="fa fa-download"></i></el-button>-->
+<!--          <el-button size="mini"><i class="fa fa-upload"></i></el-button>-->
+<!--          <el-button size="mini"><i class="fa fa-refresh"></i></el-button>-->
+<!--        </el-button-group>-->
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import ActionsGroup from '@/components/ActionsGroup'
+export default {
+  name: 'TableAction',
+  components: {
+    ActionsGroup
+  },
+  data() {
+    return {
+      hasLeftActions: true,
+      hasSearch: true,
+      hasRightActions: true,
+      createAction: {
+        name: 'create',
+        title: this.$tc('Create'),
+        type: 'primary'
+      },
+      actions: [{
+        name: 'create',
+        title: this.$tc('Create'),
+        type: 'primary'
+      }],
+      rightSideActions: [
+        {
+          name: 'export',
+          fa: 'fa-download'
+        },
+        {
+          name: 'import',
+          fa: 'fa-upload'
+        },
+        {
+          name: 'refresh',
+          fa: 'fa-refresh'
+        }
+      ],
+      keyword: '',
+      moreActions: [
+        {
+          title: this.$tc('Delete selected'),
+          name: 'deleteSelected'
+        },
+        {
+          title: this.$tc('Update selected'),
+          name: 'updateSelected'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSearch(keyword) {
+      console.log('Search: ', keyword)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .table-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .right-side-item {
+  }
+
+  .right-side-actions >>> .el-button {
+    border: none;
+    padding: 5px;
+    font-size: 14px;
+    width: 26px;
+    height: 26px;
+    color: #888;
+    background-color: transparent;
+  }
+
+  .right-side-actions >>> .fa {
+    height: 16px;
+    width: 16px;
+  }
+
+  .right-side-actions >>> .el-button:hover {
+    background-color: rgb(0, 0, 0, 0.05);
+  }
+
+  .action-search >>> .el-input__suffix i {
+    font-weight: 500;
+    color: #888;
+  }
+
+  .right-side-actions {
+    display: flex;
+    padding-left: 10px;
+    justify-content:center;
+  }
+
+  .table-action-right-side {
+    display: flex;
+    justify-content:center;
+  }
+
+</style>
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index c30b30403..48525fb03 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,28 +1,21 @@
 <template>
   <div>
-    <div class="table-header">
-      <slot name="header">
-        <!--TODO: 事件交互 -->
-        <HeaderActions :actions="totalActions" :more-actions="moreActions"></HeaderActions>
-        <!-- TODO: 事件交互 -->
-        <search v-if="hasSearch" class="search" @serachAction="handleSearch" />
-      </slot>
-    </div>
-    <DataTable :config="tableConfig" class="table-content"></DataTable>
+    <TableAction></TableAction>
+    <el-card class="table-content">
+      <DataTable :config="tableConfig" @selection-change="handleSelectionChange" ></DataTable>
+    </el-card>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-unused-vars */
-import search from './search'
 import DataTable from '../DataTable'
-import HeaderActions from './HeaderActions'
+import TableAction from './TableAction'
 export default {
   name: 'ListTable',
   components: {
-    HeaderActions,
     DataTable,
-    search,
+    TableAction
   },
   props: {
     // 定义 table 的配置
@@ -31,18 +24,7 @@ export default {
       default: () => {}
     },
     // 是否显示table左侧的action
-    hasAction: {
-      type: Boolean,
-      default: true
-    },
-    hasSearch: {
-      type: Boolean,
-      default: true
-    },
-    hasCreate: {
-      type: Boolean,
-      default: true
-    },
+
     createTitle: {
       type: String,
       default() {
@@ -70,6 +52,7 @@ export default {
   },
   data() {
     return {
+      selectRows: []
     }
   },
   computed: {
@@ -85,16 +68,9 @@ export default {
     }
   },
   methods: {
-    handleSearch(val) {
-      this.loading = true
-      // this.getData({ search: val, draw: this.current_page, limit: this.page_size, offset: this.offset }, { row: 1 }).then(response => {
-      //   console.log(response)
-      //   this.tabledata = response.results
-      //   this.total = response.count
-      //   this.loading = false
-      // })
-    },
     handleSelectionChange(val) {
+      console.log('lIst table', val)
+      this.selectRows = val
       this.multipleSelection = val;
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
     },
@@ -106,7 +82,7 @@ export default {
       }
     },
     handleHeaderActionClick(item) {
-      this.$emit('headerActionClick', item)
+      this.$emit('headerActionClick', item, this.selectRows)
     },
     handleDelete: (index, row) => {
     },
@@ -125,13 +101,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .table-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
+
   .table-content {
-    margin-top: 15px;
+    margin-top: 10px;
   }
   //修改颜色
   // .el-button--text{
diff --git a/src/components/ListTable/search.vue b/src/components/ListTable/search.vue
deleted file mode 100644
index 80195a716..000000000
--- a/src/components/ListTable/search.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <el-input v-model="input" placeholder="搜索..." class="input-with-select" size="small" clearable @input="serachAction">
-      <el-button slot="append" icon="el-icon-search" />
-    </el-input>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      input: ''
-    }
-  },
-  methods: {
-    serachAction(val) {
-      this.$emit('serachAction', val)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
-
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 40cee880a..33d519e75 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -36,7 +36,8 @@ const cn = {
     'Create': '创建',
     'More actions': '更多操作',
     'Delete selected': '删除所选',
-    'Update selected': '更新所选'
+    'Update selected': '更新所选',
+    'Search': '搜索'
   },
   route: {
     'dashboard': '仪表盘',
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index f978ef50e..9e777b679 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -195,3 +195,11 @@ td .el-button.el-button--mini {
   font-weight: 600;
   background-color: inherit;
 }
+
+.el-table .ascending .sort-caret.ascending {
+  border-bottom-color: #676a6c;
+}
+
+.el-table .descending .sort-caret.descending {
+  border-top-color: #676a6c;
+}
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 8fc24faeb..5a3f8c0fc 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -1,11 +1,7 @@
 <template>
   <Page>
-    <template>
-      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
-        <ListTable :table-config="tableConfig" :more-actions="moreActions" />
-      </el-card>
-    </template>
+    <el-alert type="success"> 这里是一个成功的文案 </el-alert>
+    <ListTable :table-config="tableConfig" />
   </Page>
 </template>
 
@@ -40,7 +36,8 @@ export default {
           {
             prop: 'comment',
             label: this.$tc('Comment'),
-            key: 'comment'
+            key: 'comment',
+            showOverflowTooltip: true
           }
         ],
         // 写路由名字，table组件会自动传作为参数
@@ -49,16 +46,7 @@ export default {
           newClick: 'UserGroupEdit'
         }
       },
-      moreActions: [
-        {
-          title: this.$tc('Delete selected'),
-          name: 'deleteSelected'
-        },
-        {
-          title: this.$tc('Update selected'),
-          name: 'updateSelected'
-        }
-      ]
+
     }
   }
 }
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index f08b6f49a..8554930f9 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -27,11 +27,7 @@ export default {
           key: 'prop',
           align: 'center'
         },
-        extraPaginationAttrs: {
-          background: true,
-          pagerCount: 5,
-          pageSizes: [10, 100]
-        },
+
         extraButtons: [
           {
             type: 'primary',
@@ -58,8 +54,7 @@ export default {
           {
             prop: 'name',
             label: this.$t('users.name'),
-            sortable: true, // 可排序
-            type: 'link',
+            sortable: true // 可排序
             // url: 'UserDetail' // 第一个函数指定 路由Template
           },
           {

From 1ea349b4601de5b4382a01dc6946e32a17bcb164 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 1 Apr 2020 20:52:27 +0800
Subject: [PATCH 2/7] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActionsGroup/index.vue    |  4 +-
 src/components/ListTable/TableAction.vue | 94 ++++++++++++++----------
 2 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/components/ActionsGroup/index.vue b/src/components/ActionsGroup/index.vue
index 996a2ef1b..f96f5484d 100644
--- a/src/components/ActionsGroup/index.vue
+++ b/src/components/ActionsGroup/index.vue
@@ -4,12 +4,12 @@
       <i v-if="item.fa" :class="'fa ' + item.fa"></i>
       {{ item.title }}
     </el-button>
-    <el-dropdown v-if="moreActions.length > 0" trigger="click">
+    <el-dropdown v-if="moreActions.length > 0" trigger="click" @command="handleClick">
       <el-button :size="size" class="btn-more-actions">
         {{ this.$tc('More actions') }}<i class="el-icon-arrow-down el-icon--right"></i>
       </el-button>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="item in moreActions" :key="item.name" v-bind="item" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
+        <el-dropdown-item v-for="item in moreActions" :key="item.name" :command="item.name" v-bind="item" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </div>
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index 43fb98006..e3b9c6f31 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -3,17 +3,12 @@
     <slot name="header">
       <!--TODO: 事件交互 -->
       <div class="table-header-left-side">
-        <ActionsGroup :actions="actions" :more-actions="moreActions" class="header-action"></ActionsGroup>
+        <ActionsGroup :actions="actions" :more-actions="moreActions" class="header-action" @actionClick="handleActionClick"></ActionsGroup>
       </div>
       <!-- TODO: 事件交互 -->
       <div class="table-action-right-side">
         <el-input v-model="keyword" suffix-icon="el-icon-search" :placeholder="$tc('Search')" class="right-side-item action-search" size="small" clearable @change="handleSearch" @input="handleSearch"></el-input>
-        <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item"></ActionsGroup>
-<!--        <el-button-group class="right-side-actions right-side-item">-->
-<!--          <el-button size="mini"><i class="fa fa-download"></i></el-button>-->
-<!--          <el-button size="mini"><i class="fa fa-upload"></i></el-button>-->
-<!--          <el-button size="mini"><i class="fa fa-refresh"></i></el-button>-->
-<!--        </el-button-group>-->
+        <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item" @actionClick="handleActionClick"></ActionsGroup>
       </div>
     </slot>
   </div>
@@ -21,56 +16,81 @@
 
 <script>
 import ActionsGroup from '@/components/ActionsGroup'
+const defaultTrue = { type: Boolean, default: true }
 export default {
   name: 'TableAction',
   components: {
     ActionsGroup
   },
+  props: {
+    hasExport: defaultTrue,
+    hasImport: defaultTrue,
+    hasRefresh: defaultTrue,
+    hasCreate: defaultTrue,
+    hasDelete: defaultTrue,
+    hasUpdate: defaultTrue,
+    hasLeftActions: defaultTrue,
+    hasSearch: defaultTrue,
+    hasRightActions: defaultTrue,
+  },
   data() {
     return {
-      hasLeftActions: true,
-      hasSearch: true,
-      hasRightActions: true,
-      createAction: {
-        name: 'create',
+      defaultRightSideActions: {
+        Export: { name: 'actionExport', fa: 'fa-download' },
+        Import: { name: 'actionImport', fa: 'fa-upload' },
+        Refresh: { name: 'actionRefresh', fa: 'fa-refresh' }
+      },
+      defaultCreateAction: {
+        name: 'actionCreate',
         title: this.$tc('Create'),
         type: 'primary'
       },
-      actions: [{
-        name: 'create',
-        title: this.$tc('Create'),
-        type: 'primary'
-      }],
-      rightSideActions: [
-        {
-          name: 'export',
-          fa: 'fa-download'
-        },
-        {
-          name: 'import',
-          fa: 'fa-upload'
-        },
-        {
-          name: 'refresh',
-          fa: 'fa-refresh'
-        }
-      ],
       keyword: '',
-      moreActions: [
-        {
+      defaultMoreActions: {
+        Delete: {
           title: this.$tc('Delete selected'),
-          name: 'deleteSelected'
+          name: 'actionDeleteSelected'
         },
-        {
+        Update: {
           title: this.$tc('Update selected'),
-          name: 'updateSelected'
+          name: 'actionUpdateSelected'
         }
-      ]
+      }
+    }
+  },
+  computed: {
+    rightSideActions() {
+      const actions = []
+      for (const k in this.defaultRightSideActions) {
+        if (this['has' + k]) {
+          actions.push(this.defaultRightSideActions[k])
+        }
+      }
+      return actions
+    },
+    actions() {
+      const actions = []
+      if (this.hasCreate) {
+        actions.push(this.defaultCreateAction)
+      }
+      return actions
+    },
+    moreActions() {
+      const actions = []
+      for (const k in this.defaultMoreActions) {
+        if (this['has' + k]) {
+          actions.push(this.defaultMoreActions[k])
+        }
+      }
+      return actions
     }
   },
   methods: {
     handleSearch(keyword) {
       console.log('Search: ', keyword)
+    },
+    handleActionClick(item) {
+      console.log('Action: ', item)
     }
   }
 }

From 6efb4c48a5b2b67ee373d8472fd9594d0b686f51 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Thu, 2 Apr 2020 11:23:08 +0800
Subject: [PATCH 3/7] yarn add vue-select

---
 package.json | 1 +
 yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/package.json b/package.json
index c93a32034..95b93d9f2 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "vue": "2.6.10",
     "vue-i18n": "^8.15.5",
     "vue-router": "3.0.6",
+    "vue-select": "^3.9.5",
     "vuex": "3.1.0"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 25ba677bf..89f574b26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9090,6 +9090,11 @@ vue-router@3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
 
+vue-select@^3.9.5:
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.9.5.tgz#d70a3815c2cd9ad3eae75adf47dab6f787b30f98"
+  integrity sha512-r392oaLYepNxY+uY1EN7r05VPOqSWGEfZ3LtJ3NqhrRbWCpWQ5EPSMN3QL80HdN3H+o1ueQA9P58K1vgGZ5P3Q==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"

From be9cd45ba7b77f2b64f9ebcbcbba4ba87756e55a Mon Sep 17 00:00:00 2001
From: jym503558564 <503558564@qq.com>
Date: Thu, 2 Apr 2020 11:29:45 +0800
Subject: [PATCH 4/7] =?UTF-8?q?[Update]=20=E4=BF=AE=E5=A4=8D=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2=E5=A4=8D=E9=80=89=E6=A1=86=E7=82=B9?=
 =?UTF-8?q?=E7=82=B9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataTable/index.vue | 4 ++--
 src/views/users/UserList.vue       | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 025d2223a..63f877b2d 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -70,7 +70,7 @@ export default {
 
   .el-table /deep/ .el-table__row > td {
     line-height: 1.5;
-    padding: 8px;
+    padding: 8px 0;
   }
   .el-table /deep/ .el-table__row > td> div > span {
     text-overflow: ellipsis;
@@ -79,7 +79,7 @@ export default {
     white-space: nowrap;
   }
   .el-table /deep/ .el-table__header > thead > tr >th {
-    padding: 8px;
+    padding: 8px 0;
     background-color: #F5F5F6;
     font-size: 13px;
     line-height: 1.5;
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index f08b6f49a..64f2d46c1 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -52,7 +52,10 @@ export default {
           }
         ],
         columns: [
-          { type: 'selection' },
+          {
+            type: 'selection',
+            align: 'center'
+          },
           // Bug
           // 应该让我插入Slot,使这个用户名可点击
           {

From 1693e11dcccb02806029a5556ce041cfced5d3a1 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 2 Apr 2020 13:36:25 +0800
Subject: [PATCH 5/7] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9table=20?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93formatter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../el-data-table/el-data-table.vue           | 39 ++++++++++--
 .../DataTable/formatters/DetailFormatter.vue  | 34 ++++++++++
 src/components/DataTable/index.vue            | 10 +--
 src/components/ListTable/TableAction.vue      |  2 +-
 src/components/ListTable/index.vue            | 63 ++-----------------
 src/utils/request.js                          |  4 +-
 src/views/users/UserGroupList.vue             | 14 +++--
 7 files changed, 91 insertions(+), 75 deletions(-)
 create mode 100644 src/components/DataTable/formatters/DetailFormatter.vue

diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
index 07445d388..d40f6180c 100644
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
@@ -74,9 +74,7 @@
                   class="tree-ctrl"
                   @click="toggleExpanded(scope.$index)"
                 >
-                  <i
-                    :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"
-                  />
+                  <i :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"/>
                 </span>
                 {{ scope.row[columns[0].prop] }}
               </template>
@@ -92,11 +90,25 @@
 
         <!--非树-->
         <template v-else>
+          <el-data-table-column v-if="hasSelection" type="selection" :align="columnsAlign"></el-data-table-column>
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
+            :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             v-bind="{align: columnsAlign, ...col}"
           >
+            <template slot-scope="{row}">
+              <div
+                v-if="col.formatter && typeof col.formatter !== 'function'"
+                :is="col.formatter"
+                :row="row"
+                :col="col"
+              >
+              </div>
+              <template v-else>
+                {{ row[col.prop] }}
+              </template>
+            </template>
           </el-data-table-column>
         </template>
 
@@ -119,6 +131,7 @@
             <self-loading-button
               v-if="hasEdit"
               type="primary"
+              :disable="!canEdit(scope.row)"
               :size="operationButtonType === 'text' ? '' : buttonSize"
               :is-text="operationButtonType === 'text'"
               @click="onDefaultEdit(scope.row)"
@@ -153,8 +166,9 @@
               </self-loading-button>
             </template>
             <self-loading-button
-              v-if="!hasSelect && hasDelete && canDelete(scope.row)"
+              v-if="hasDelete"
               type="danger"
+              :disable="!canDelete(scope.row)"
               :size="operationButtonType === 'text' ? '' : buttonSize"
               :is-text="operationButtonType === 'text'"
               @click="onDefaultDelete(scope.row)"
@@ -450,6 +464,12 @@ export default {
         return true
       }
     },
+    canEdit: {
+      type: Function,
+      default() {
+        return true
+      }
+    },
     /**
      * 点击新增按钮时的方法, 当默认新增方法不满足需求时使用, 需要返回promise
      * 参数(data, row) data 是form表单的数据, row 是当前行的数据, 只有isTree为true时, 点击操作列的新增按钮才会有值
@@ -484,7 +504,7 @@ export default {
         const ids = Array.isArray(data)
           ? data.map(v => v[this.id]).join(',')
           : data[this.id]
-        return this.$axios.delete(this.url + '/' + ids, this.axiosConfig)
+        return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
       }
     },
     /**
@@ -750,6 +770,14 @@ export default {
     extraPaginationAttrs: {
       type: Object,
       default: () => {}
+    },
+    hasSelection: {
+      type: Boolean,
+      default: true
+    },
+    hasDetail: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -775,6 +803,7 @@ export default {
   },
   computed: {
     hasSelect() {
+      console.log(this.columns.length && this.columns[0].type === 'selection')
       return this.columns.length && this.columns[0].type === 'selection'
     },
     selectable() {
diff --git a/src/components/DataTable/formatters/DetailFormatter.vue b/src/components/DataTable/formatters/DetailFormatter.vue
new file mode 100644
index 000000000..a596307f0
--- /dev/null
+++ b/src/components/DataTable/formatters/DetailFormatter.vue
@@ -0,0 +1,34 @@
+<template>
+  <el-link :type="col.type || 'success'" @click="goDetail">{{ cellValue }}</el-link>
+</template>
+
+<script>
+export default {
+  name: 'DetailFormatter',
+  props: {
+    row: {
+      type: Object,
+      default: null
+    },
+    col: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    cellValue() {
+      return this.row[this.col.prop]
+    }
+  },
+  methods: {
+    goDetail() {
+      const routeName = this.col.route || ''
+      this.$router.push({ name: routeName, params: { id: this.row.id }})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index d2726d19f..f340ba139 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -30,12 +30,14 @@ export default {
         totalPath: 'count',
         saveQuery: false, // 关闭路径保存查询参数
         persistSelection: true, // 切换页面 已勾选项不会丢失
-        hasEdit: false, // 有编辑按钮
-        hasDelete: false,
-        hasAction: false, // 是否有更多操作
-        hasUpload: false,
+        hasEdit: true, // 有编辑按钮
+        hasDelete: true,
         hasNew: false,
         // editText: this.$t('action.update'), // 编辑按钮文案
+        operationAttrs: {
+          align: 'center',
+          width: '150px'
+        },
         tableAttrs: {
           stripe: true, // 斑马纹表格
           border: true, // 表格边框
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index e3b9c6f31..05249bcd4 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -90,7 +90,7 @@ export default {
       console.log('Search: ', keyword)
     },
     handleActionClick(item) {
-      console.log('Action: ', item)
+      this.$emit('clickAction', item)
     }
   }
 }
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 48525fb03..a14857a8e 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <TableAction></TableAction>
+    <TableAction v-bind="actionConfig" @clickAction="handleActionClick"></TableAction>
     <el-card class="table-content">
-      <DataTable :config="tableConfig" @selection-change="handleSelectionChange" ></DataTable>
+      <DataTable :config="tableConfig" @selection-change="handleSelectionChange"></DataTable>
     </el-card>
   </div>
 </template>
@@ -24,30 +24,9 @@ export default {
       default: () => {}
     },
     // 是否显示table左侧的action
-
-    createTitle: {
-      type: String,
-      default() {
-        return this.$tc('Create')
-      }
-    },
-    createAction: {
+    actionConfig: {
       type: Object,
-      default() {
-        return {
-          type: 'primary',
-          name: 'create',
-          title: this.createTitle
-        }
-      }
-    },
-    moreActions: {
-      type: Array,
-      default: () => []
-    },
-    actions: {
-      type: Array,
-      default: () => []
+      default: () => ({ })
     }
   },
   data() {
@@ -56,46 +35,16 @@ export default {
     }
   },
   computed: {
-    totalActions() {
-      let actions = this.actions
-      if (this.hasCreate) {
-        actions = [
-          this.createAction,
-          ... actions
-        ]
-      }
-      return actions
-    }
   },
   methods: {
     handleSelectionChange(val) {
-      console.log('lIst table', val)
       this.selectRows = val
       this.multipleSelection = val;
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
     },
-    handleEdit: function (index, row) {
-      try {
-        this.$router.push({name: this.action.hasEdit, params: {id: row.id}})
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    handleHeaderActionClick(item) {
-      this.$emit('headerActionClick', item, this.selectRows)
-    },
-    handleDelete: (index, row) => {
-    },
-    get(draw, limit, offset) {
-      this.loading = true
-      // this.getData({ draw, limit, offset }, { row: 1 }).then(response => {
-      //   console.log(response)
-      //   this.tabledata = response.results
-      //   this.total = response.count
-      //   this.loading = false
-      // })
+    handleActionClick(item) {
+      console.log('Handle ', item, this.selectRows)
     }
-
   }
 }
 </script>
diff --git a/src/utils/request.js b/src/utils/request.js
index 8a5a56cbc..e2261db4a 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -53,9 +53,9 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (response.status !== 200 && response.status !== 201) {
+    if (response.status < 200 || response.status > 300) {
       Message({
-        message: res.message || 'Error',
+        message: res.message || res.error || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 5a3f8c0fc..f24d733c9 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -1,13 +1,15 @@
 <template>
   <Page>
     <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-    <ListTable :table-config="tableConfig" />
+    <ListTable :table-config="tableConfig" :action-config="actionConfig" />
   </Page>
 </template>
 
 <script>
 import { Page } from '@/layout/components'
 import ListTable from '@/components/ListTable'
+import DetailFormatter from '@/components/DataTable/formatters/DetailFormatter'
+
 export default {
   components: {
     Page,
@@ -18,15 +20,13 @@ export default {
       tableConfig: {
         url: '/api/v1/users/groups/',
         columns: [
-          {
-            type: 'selection'
-          },
           {
             prop: 'name',
             label: this.$tc('Name'),
             key: 'name',
-            link: 'UserGroupDetail',
-            sortable: true
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'UserDetail'
           },
           {
             prop: 'users_amount',
@@ -46,6 +46,8 @@ export default {
           newClick: 'UserGroupEdit'
         }
       },
+      actionConfig: {
+      }
 
     }
   }

From 77716f3caf3669ac48470d35d0e40cfbd056a432 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 2 Apr 2020 15:05:21 +0800
Subject: [PATCH 6/7] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9generic=20list?=
 =?UTF-8?q?=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../el-data-table/el-data-table.vue           | 10 ++-----
 src/components/DataTable/index.vue            | 17 +++++++++--
 src/components/ListTable/TableAction.vue      |  2 +-
 src/components/ListTable/index.vue            | 28 ++++++++++++++++---
 .../components/GenericListPage/index.vue      | 13 +++++++++
 src/router/index.js                           | 17 +++++++----
 src/views/users/UserGroupList.vue             | 11 ++++----
 7 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/layout/components/GenericListPage/index.vue

diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
index d40f6180c..c375ead5f 100644
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
@@ -486,12 +486,8 @@ export default {
      */
     onEdit: {
       type: Function,
-      default(data) {
-        return this.$axios.put(
-          `${this.url}/${this.row[this.id]}`,
-          data,
-          this.axiosConfig
-        )
+      default(row) {
+        console.log('On delete row')
       }
     },
     /**
@@ -1094,7 +1090,7 @@ export default {
     },
     onDefaultEdit(row) {
       this.row = row
-      this.$refs.dialog.show(dialogModes.edit, row)
+      this.onEdit(row)
     },
     async onConfirm(isNew, formValue, done) {
       const data = {
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index f340ba139..ec0931dac 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -17,6 +17,7 @@ export default {
     }
   },
   data() {
+    const userTableActions = this.config.tableActions || {}
     return {
       defaultConfig: {
         axiosConfig: {
@@ -30,8 +31,8 @@ export default {
         totalPath: 'count',
         saveQuery: false, // 关闭路径保存查询参数
         persistSelection: true, // 切换页面 已勾选项不会丢失
-        hasEdit: true, // 有编辑按钮
-        hasDelete: true,
+        hasEdit: userTableActions.hasEdit !== false, // 有编辑按钮
+        hasDelete: userTableActions.hasDelete !== false,
         hasNew: false,
         // editText: this.$t('action.update'), // 编辑按钮文案
         operationAttrs: {
@@ -43,6 +44,18 @@ export default {
           border: true, // 表格边框
           fit: true // 宽度自适应
         },
+        extraButtons: userTableActions.extraButtons,
+        onEdit: (row) => {
+          const defaultOnEdit = (row) => {
+            const routeName = userTableActions.editRoute
+            this.$router.push({ name: routeName, params: { id: row.id }})
+          }
+          let onEdit = userTableActions.onEdit
+          if (!onEdit) {
+            onEdit = defaultOnEdit
+          }
+          return onEdit(row)
+        },
         pageCount: 5,
         paginationLayout: 'total, sizes, prev, pager, next',
         transformQuery: query => {
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index 05249bcd4..50bcf94a4 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -31,7 +31,7 @@ export default {
     hasUpdate: defaultTrue,
     hasLeftActions: defaultTrue,
     hasSearch: defaultTrue,
-    hasRightActions: defaultTrue,
+    hasRightActions: defaultTrue
   },
   data() {
     return {
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index a14857a8e..e2fe05a89 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TableAction v-bind="actionConfig" @clickAction="handleActionClick"></TableAction>
+    <TableAction v-bind="headerActions" @clickAction="handleActionClick"></TableAction>
     <el-card class="table-content">
       <DataTable :config="tableConfig" @selection-change="handleSelectionChange"></DataTable>
     </el-card>
@@ -24,14 +24,14 @@ export default {
       default: () => {}
     },
     // 是否显示table左侧的action
-    actionConfig: {
+    headerActions: {
       type: Object,
       default: () => ({ })
     }
   },
   data() {
     return {
-      selectRows: []
+      selectRows: [],
     }
   },
   computed: {
@@ -43,7 +43,27 @@ export default {
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
     },
     handleActionClick(item) {
-      console.log('Handle ', item, this.selectRows)
+      const handler = this.getActionHandler(item)
+      handler(this.selectRows)
+    },
+    handleActionCreate() {
+      const routeName = this.headerActions.createRoute || ''
+      this.$router.push({ name: routeName })
+      console.log('handle create')
+    },
+    getActionHandler(item) {
+      let handler = this.headerActions.item
+      const defaultHandlerName = 'handle' + item[0].toUpperCase() + item.slice(1, item.length)
+      if (!handler) {
+        handler = this[defaultHandlerName]
+      }
+      if (!handler) {
+        handler = () => {
+          console.log('No handler found for ', item)
+        }
+      }
+      console.log(handler)
+      return handler
     }
   }
 }
diff --git a/src/layout/components/GenericListPage/index.vue b/src/layout/components/GenericListPage/index.vue
new file mode 100644
index 000000000..b6c5e08d4
--- /dev/null
+++ b/src/layout/components/GenericListPage/index.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 418a4c5d1..4b9e8623a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -69,15 +69,15 @@ export const constantRoutes = [
         path: 'users/create',
         component: () => import('@/views/users/UserCreate.vue'), // Parent router-view
         name: 'UserCreate',
+        hidden: true,
         meta: { title: 'UserCreate' },
-        hidden: true
       },
       {
         path: 'users/:id',
         component: () => import('@/views/users/UserDetail.vue'), // Parent router-view
         name: 'UserDetail',
+        hidden: true,
         meta: { title: 'UserDetail', activeMenu: '/users/users' },
-        hidden: true
       },
       {
         path: 'groups',
@@ -89,16 +89,23 @@ export const constantRoutes = [
         path: 'groups/:id/update',
         component: () => import('@/views/users/UserGroupEdit.vue'), // Parent router-view
         name: 'UserGroupEdit',
+        hidden: true,
         meta: { title: 'UserGroupEdit' },
-        hidden: true
       },
       {
         path: 'groups/:id',
         component: () => import('@/views/users/UserGroupDetail/index.vue'), // Parent router-view
         name: 'UserGroupDetail',
+        hidden: true,
         meta: { title: 'UserGroupDetail', activeMenu: '/users/groups' },
-        hidden: true
-      }
+      },
+      {
+        path: 'groups/create',
+        component: () => import('@/views/users/UserCreate.vue'), // Parent router-view
+        name: 'UserGroupCreate',
+        hidden: true,
+        meta: { title: 'UserGroupCreate' }
+      },
     ]
   },
   {
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index f24d733c9..8274200db 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -1,7 +1,7 @@
 <template>
   <Page>
     <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-    <ListTable :table-config="tableConfig" :action-config="actionConfig" />
+    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
   </Page>
 </template>
 
@@ -41,12 +41,13 @@ export default {
           }
         ],
         // 写路由名字，table组件会自动传作为参数
-        action: {
-          hasEdit: 'UserGroupEdit',
-          newClick: 'UserGroupEdit'
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
         }
       },
-      actionConfig: {
+      headerActions: {
+        createRoute: 'UserGroupCreate'
       }
 
     }

From 3a7462e5626493fde0eed74095f4fe16f9c8e977 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 2 Apr 2020 15:05:29 +0800
Subject: [PATCH 7/7] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9generic=20list?=
 =?UTF-8?q?=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/GenericListPage/index.vue      | 20 +++++++++++++++++--
 src/layout/components/index.js                |  1 +
 src/views/users/UserGroupList.vue             | 11 +++-------
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/layout/components/GenericListPage/index.vue b/src/layout/components/GenericListPage/index.vue
index b6c5e08d4..398cfb536 100644
--- a/src/layout/components/GenericListPage/index.vue
+++ b/src/layout/components/GenericListPage/index.vue
@@ -1,10 +1,26 @@
 <template>
-
+  <Page>
+    <el-alert v-if="helpMessage" type="success"> {{ helpMessage }} </el-alert>
+    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+  </Page>
 </template>
 
 <script>
+import { Page } from '@/layout/components'
+import ListTable from '@/components/ListTable'
 export default {
-  name: 'index'
+  name: 'GenericListPage',
+  components: {
+    Page, ListTable
+  },
+  props: {
+    ...ListTable.props,
+    helpMessage: {
+      type: String,
+      default: null
+    }
+  }
+
 }
 </script>
 
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
index d69d91f80..e47ec4fdc 100644
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -7,3 +7,4 @@ export { default as BaseDetailPage } from './BaseDetailPage'
 export { default as SubMenuPage } from './SubMenuPage'
 export { default as Footer } from './Footer'
 export { default as IBox } from './IBox'
+export { default as GenericListPage } from './GenericListPage'
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 8274200db..f4d65d6d3 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -1,19 +1,14 @@
 <template>
-  <Page>
-    <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
-import { Page } from '@/layout/components'
-import ListTable from '@/components/ListTable'
+import { GenericListPage } from '@/layout/components'
 import DetailFormatter from '@/components/DataTable/formatters/DetailFormatter'
 
 export default {
   components: {
-    Page,
-    ListTable
+    GenericListPage
   },
   data() {
     return {