From 8a40a5c0ff235b7c51a91a79eb491fe29bc91028 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 3 Apr 2020 15:36:52 +0800
Subject: [PATCH] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=8A=A8=E4=BD=9C=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../el-data-table/el-data-table.vue           |  3 +-
 src/components/DataTable/index.vue            |  8 +--
 .../formatters/ActionsFormatter.vue           | 64 ++++++++++++++++---
 .../formatters/ChoicesFormatter.vue           |  0
 .../formatters/DetailFormatter.vue            |  0
 .../formatters/DisplayFormatter.vue           |  0
 .../formatters/base.vue                       |  6 +-
 .../formatters/index.js                       |  0
 src/components/ListTable/index.vue            | 20 +-----
 src/components/Select2/index.vue              |  1 -
 src/i18n/langs/cn.js                          |  7 +-
 src/views/users/UserGroupList.vue             | 52 ++-------------
 src/views/users/UserList.vue                  |  2 +-
 13 files changed, 77 insertions(+), 86 deletions(-)
 rename src/components/{DataTable => ListTable}/formatters/ActionsFormatter.vue (50%)
 rename src/components/{DataTable => ListTable}/formatters/ChoicesFormatter.vue (100%)
 rename src/components/{DataTable => ListTable}/formatters/DetailFormatter.vue (100%)
 rename src/components/{DataTable => ListTable}/formatters/DisplayFormatter.vue (100%)
 rename src/components/{DataTable => ListTable}/formatters/base.vue (80%)
 rename src/components/{DataTable => ListTable}/formatters/index.js (100%)

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 4d60b6d45..2d7c7a49f 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
@@ -102,8 +102,9 @@
               <div
                 :is="col.formatter"
                 :key="row.id"
-                :setting="data"
+                :table-data="data"
                 :row="row"
+                :reload="getList"
                 :col="col"
                 :cell-value="row[col.prop]"
               >
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 01bdf9873..531224ea7 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -36,16 +36,12 @@ export default {
         hasDelete: userTableActions.hasDelete !== false,
         hasNew: false,
         // editText: this.$t('action.update'), // 编辑按钮文案
-        operationAttrs: {
-          align: 'center',
-          width: '150px'
-        },
-        operationButtonType: 'button',
         buttonSize: 'mini',
         tableAttrs: {
           stripe: true, // 斑马纹表格
           border: true, // 表格边框
-          fit: true // 宽度自适应
+          fit: true, // 宽度自适应,
+          tooltipEffect: 'dark'
         },
         extraButtons: userTableActions.extraButtons,
         onEdit: (row) => {
diff --git a/src/components/DataTable/formatters/ActionsFormatter.vue b/src/components/ListTable/formatters/ActionsFormatter.vue
similarity index 50%
rename from src/components/DataTable/formatters/ActionsFormatter.vue
rename to src/components/ListTable/formatters/ActionsFormatter.vue
index a7bd8df6b..74c750d87 100644
--- a/src/components/DataTable/formatters/ActionsFormatter.vue
+++ b/src/components/ListTable/formatters/ActionsFormatter.vue
@@ -3,32 +3,70 @@
 </template>
 
 <script>
-import ActionsGroup from '@/components/ActionsGroup'
+import ActionsGroup from '@/components/ActionsGroup/index'
 import BaseFormatter from './base'
+const defaultPerformDelete = function({row, col}) {
+  const id = row.id
+  const url = `/api/v1/users/groups/${id}/`
+  return this.$axios.delete(url)
+}
+const defaultUpdateCallback = ({row, col, cellValue, reload}) => {
+
+}
+
+const defaultDeleteCallback = function({row, col, cellValue, reload}) {
+  const msg = this.$tc('Are you sure to delete') + ' "' + row.name + '"'
+  const title = this.$tc('Info')
+  const performDelete = col.actions.performDelete || defaultPerformDelete.bind(this)
+  this.$alert(msg, title, {
+    type: 'warning',
+    confirmButtonClass: 'el-button--danger',
+    showCancelButton: true,
+    beforeClose: async(action, instance, done) => {
+      if (action !== 'confirm') return done()
+      instance.confirmButtonLoading = true
+      try {
+        await performDelete({row: row, col: col})
+        done()
+        reload()
+        this.$message.success(this.$tc('Delete success'))
+      } catch (error) {
+        this.$message.error(this.$tc('Delete failed'))
+        console.warn(error)
+      } finally {
+        instance.confirmButtonLoading = false
+      }
+    }
+  }).catch(() => {
+    /* 取消*/
+  })
+}
+
 export default {
   name: 'ActionsFormatter',
   components: { ActionsGroup },
   extends: BaseFormatter,
   data() {
+    const colActions = this.col.actions || {}
     const defaultActions = [
       {
         name: 'update',
         title: this.$tc('Update'),
         type: 'primary',
-        has: this.col.actions.hasUpdate || true,
-        can: this.col.actions.canUpdate || true,
-        callback: this.col.actions.onUpdate
+        has: colActions.hasUpdate || true,
+        can: colActions.canUpdate || true,
+        callback: colActions.onUpdate || defaultUpdateCallback.bind(this)
       },
       {
         name: 'delete',
         title: this.$tc('Delete'),
         type: 'danger',
-        has: this.col.actions.hasDelete || true,
-        can: this.col.actions.canDelete || true,
-        callback: this.col.actions.onDelete
+        has: colActions.hasDelete || true,
+        can: colActions.canDelete || true,
+        callback: colActions.onDelete || defaultDeleteCallback.bind(this)
       }
     ]
-    const extraActions = this.col.actions.extraActions || []
+    const extraActions = colActions.extraActions || []
     return {
       defaultActions: defaultActions,
       extraActions: extraActions
@@ -70,8 +108,14 @@ export default {
     handleActionClick(item) {
       const action = this.namedValidActions[item]
       if (action && action.callback) {
-        console.log(this.setting)
-        action.callback(this.row, this.col, this.cellValue)
+        const attrs = {
+          reload: this.reload,
+          row: this.row,
+          col: this.col,
+          cellValue: this.cellValue,
+          tableData: this.tableData
+        }
+        action.callback(attrs)
       }
     },
     checkItem(item, attr) {
diff --git a/src/components/DataTable/formatters/ChoicesFormatter.vue b/src/components/ListTable/formatters/ChoicesFormatter.vue
similarity index 100%
rename from src/components/DataTable/formatters/ChoicesFormatter.vue
rename to src/components/ListTable/formatters/ChoicesFormatter.vue
diff --git a/src/components/DataTable/formatters/DetailFormatter.vue b/src/components/ListTable/formatters/DetailFormatter.vue
similarity index 100%
rename from src/components/DataTable/formatters/DetailFormatter.vue
rename to src/components/ListTable/formatters/DetailFormatter.vue
diff --git a/src/components/DataTable/formatters/DisplayFormatter.vue b/src/components/ListTable/formatters/DisplayFormatter.vue
similarity index 100%
rename from src/components/DataTable/formatters/DisplayFormatter.vue
rename to src/components/ListTable/formatters/DisplayFormatter.vue
diff --git a/src/components/DataTable/formatters/base.vue b/src/components/ListTable/formatters/base.vue
similarity index 80%
rename from src/components/DataTable/formatters/base.vue
rename to src/components/ListTable/formatters/base.vue
index 53b0de12a..6174a8d14 100644
--- a/src/components/DataTable/formatters/base.vue
+++ b/src/components/ListTable/formatters/base.vue
@@ -5,6 +5,10 @@
 export default {
   name: 'BaseFormatter',
   props: {
+    reload: {
+      type: Function,
+      default: ({reloading}) => ({})
+    },
     row: {
       type: Object,
       default: () => ({})
@@ -17,7 +21,7 @@ export default {
       type: [String, Boolean, Number, Object],
       default: null
     },
-    setting: {
+    tableData: {
       type: Array,
       default: () => ({})
     }
diff --git a/src/components/DataTable/formatters/index.js b/src/components/ListTable/formatters/index.js
similarity index 100%
rename from src/components/DataTable/formatters/index.js
rename to src/components/ListTable/formatters/index.js
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 0ad41a331..28bf24cdb 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -2,7 +2,7 @@
   <div>
     <TableAction v-bind="headerActions" @clickAction="handleActionClick"></TableAction>
     <el-card class="table-content" shadow="never">
-      <DataTable :config="tableConfig" @selection-change="handleSelectionChange">
+      <DataTable ref="table" :config="tableConfig" @selection-change="handleSelectionChange">
         <template v-slot:actions="row">
           {{ row.id }}
         </template>
@@ -39,29 +39,13 @@ export default {
     }
   },
   computed: {
-    actionColumn() {
-      const actions = []
-      let tc = this.tableConfig
-      if (tc.hasEdit !== false) {
-        actions.push({
-          name: 'update',
-          title: this.$tc('Update')
-        })
-      }
-
-      if (tc.hasDelete !== false) {
-        actions.push({
-          name: 'delete',
-          title: this.$tc('Delete')
-        })
-      }
-    }
   },
   methods: {
     handleSelectionChange(val) {
       this.selectRows = val
       this.multipleSelection = val;
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
+      console.log(this.$refs.table)
     },
     handleActionClick(item) {
       const handler = this.getActionHandler(item)
diff --git a/src/components/Select2/index.vue b/src/components/Select2/index.vue
index e07644862..244d98e9b 100644
--- a/src/components/Select2/index.vue
+++ b/src/components/Select2/index.vue
@@ -144,7 +144,6 @@ export default {
         }
         data.results.forEach((v) => {
           this.options.push(v)
-          console.log(v)
         })
       }).catch(err => {
         console.log(err)
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index e1ddf08bd..52a9624cb 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -39,7 +39,12 @@ const cn = {
     'Update selected': '更新所选',
     'Search': '搜索',
     'Source': '来源',
-    'Status': '状态'
+    'Status': '状态',
+    'Actions': '动作',
+    'Monitor': '监控',
+    'Run': '执行',
+    'Are you sure to delete': '你确定要删除',
+    'Info': '提示'
   },
   route: {
     'dashboard': '仪表盘',
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 52397e6cf..a1f7931ab 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -4,21 +4,18 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, ActionsFormatter } from '@/components/DataTable/formatters/index'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
     GenericListPage
   },
   data() {
+    const data = []
     return {
       tableConfig: {
         url: '/api/v1/users/groups/',
         columns: [
-          {
-            label: 'ID',
-            type: 'index'
-          },
           {
             prop: 'name',
             label: this.$tc('Name'),
@@ -29,7 +26,7 @@ export default {
           {
             prop: 'users_amount',
             label: this.$t('users.User'),
-            key: 'users_amount',
+            key: 'users_amount'
           },
           {
             prop: 'comment',
@@ -38,52 +35,13 @@ export default {
           },
           {
             prop: 'id',
-            label: this.$tc('Action'),
+            label: this.$tc('Actions'),
             align: 'center',
             formatter: ActionsFormatter,
-            actions: {
-              hasUpdate: (row, cellValue) => {
-                return true
-              },
-              canUpdate: (row, cellValue) => {
-                console.log('On table update')
-                return true
-              },
-              hasDelete: true,
-              canDelete: (row, cellValue) => {
-                return true
-              },
-              onDelete: (row, cellValue) => {
-                this.$confirm('你好啊', '提示', {
-                  type: 'warning',
-                  confirmButtonClass: 'el-button--danger',
-                  beforeClose: async(action, instance, done) => {
-                  }
-                }).catch(() => {
-                  /* 取消*/
-                })
-              },
-              extraActions: [
-                {
-                  name: 'run',
-                  title: this.$tc('Run'),
-                  callback: (row, cellValue) => {
-                    console.log('On run')
-                  }
-                },
-                {
-                  name: 'monitor',
-                  title: this.$tc('Monitor')
-                }
-              ],
-              order: []
-            }
+            width: '200px'
           }
         ],
         // 写路由名字，table组件会自动传作为参数
-        tableActions: {
-          editRoute: '404'
-        }
       },
       headerActions: {
         createRoute: 'UserGroupCreate'
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index b17c23c1c..4beb11adf 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, DisplayFormatter, ChoicesFormatter } from '@/components/DataTable/formatters/index'
+import { DetailFormatter, DisplayFormatter, ChoicesFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {