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 1/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=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: {

From 5d9d87512a9bab6c03b0a1f438792ddfdba57bcc Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 3 Apr 2020 15:50:05 +0800
Subject: [PATCH 2/8] =?UTF-8?q?[Update]=20=E6=B7=BB=E5=8A=A0=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E6=9B=B4=E6=96=B0=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListTable/formatters/ActionsFormatter.vue      |  7 +++++--
 src/i18n/langs/cn.js                               |  1 +
 src/router/index.js                                |  6 +++---
 src/views/users/UserGroupList.vue                  | 14 +++++++++++---
 .../{UserGroupEdit.vue => UserGroupUpdate.vue}     |  0
 5 files changed, 20 insertions(+), 8 deletions(-)
 rename src/views/users/{UserGroupEdit.vue => UserGroupUpdate.vue} (100%)

diff --git a/src/components/ListTable/formatters/ActionsFormatter.vue b/src/components/ListTable/formatters/ActionsFormatter.vue
index 74c750d87..e34fe15c1 100644
--- a/src/components/ListTable/formatters/ActionsFormatter.vue
+++ b/src/components/ListTable/formatters/ActionsFormatter.vue
@@ -5,13 +5,16 @@
 <script>
 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 defaultUpdateCallback = function({row, col}) {
+  const id = row.id
+  const routeName = col.actions.updateRoute || '404'
+  this.$router.push({name: routeName, params: {id: id}})
 }
 
 const defaultDeleteCallback = function({row, col, cellValue, reload}) {
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 52a9624cb..87c82c57c 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -37,6 +37,7 @@ const cn = {
     'More actions': '更多操作',
     'Delete selected': '删除所选',
     'Update selected': '更新所选',
+    'Delete success': '删除成功',
     'Search': '搜索',
     'Source': '来源',
     'Status': '状态',
diff --git a/src/router/index.js b/src/router/index.js
index cc1ef189f..3193bff7d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,10 +87,10 @@ export const constantRoutes = [
       },
       {
         path: 'groups/:id/update',
-        component: () => import('@/views/users/UserGroupEdit.vue'), // Parent router-view
-        name: 'UserGroupEdit',
+        component: () => import('@/views/users/UserGroupUpdate.vue'), // Parent router-view
+        name: 'UserGroupUpdate',
         hidden: true,
-        meta: { title: 'UserGroupEdit' }
+        meta: { title: 'UserGroupUpdate' }
       },
       {
         path: 'groups/:id',
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index a1f7931ab..7e4bbf7f4 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -11,7 +11,6 @@ export default {
     GenericListPage
   },
   data() {
-    const data = []
     return {
       tableConfig: {
         url: '/api/v1/users/groups/',
@@ -21,7 +20,7 @@ export default {
             label: this.$tc('Name'),
             formatter: DetailFormatter,
             sortable: true,
-            route: 'UserDetail'
+            route: 'UserGroupDetail'
           },
           {
             prop: 'users_amount',
@@ -38,7 +37,16 @@ export default {
             label: this.$tc('Actions'),
             align: 'center',
             formatter: ActionsFormatter,
-            width: '200px'
+            width: '200px',
+            actions: {
+              updateRoute: 'UserGroupUpdate',
+              extraActions: [
+                {
+                  name: 'run',
+                  title: this.$tc('Run')
+                }
+              ]
+            }
           }
         ],
         // 写路由名字，table组件会自动传作为参数
diff --git a/src/views/users/UserGroupEdit.vue b/src/views/users/UserGroupUpdate.vue
similarity index 100%
rename from src/views/users/UserGroupEdit.vue
rename to src/views/users/UserGroupUpdate.vue

From fc70926e9af538df57f533fab793840124a0e932 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 3 Apr 2020 18:15:45 +0800
Subject: [PATCH 3/8] =?UTF-8?q?[Update]=20=E5=9F=BA=E6=9C=AC=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js                        |   9 ++
 src/components/DataTable/index.vue       |   9 +-
 src/components/ListTable/TableAction.vue | 177 ++++++++++++++++++-----
 src/components/ListTable/index.vue       |  43 ++----
 src/i18n/langs/cn.js                     |   3 +-
 src/views/users/UserGroupList.vue        |   3 +-
 src/views/users/UserList.vue             |  30 +++-
 7 files changed, 201 insertions(+), 73 deletions(-)
 create mode 100644 src/api/common.js

diff --git a/src/api/common.js b/src/api/common.js
new file mode 100644
index 000000000..0800c3525
--- /dev/null
+++ b/src/api/common.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function createSourceIdCache(ids) {
+  return request({
+    url: '/api/v1/common/resources/cache/',
+    method: 'post',
+    data: {resources: ids}
+  })
+}
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 531224ea7..7f82883c8 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" v-on="$listeners"></ElDatableTable>
+  <ElDatableTable ref="table" class="el-table" v-bind="tableConfig" v-on="$listeners"></ElDatableTable>
 </template>
 
 <script>
@@ -86,6 +86,12 @@ export default {
       const config = Object.assign(this.defaultConfig, this.config)
       return config
     }
+  },
+  methods: {
+    getList() {
+      this.$refs.table.clearSelection()
+      return this.$refs.table.getList()
+    }
   }
 }
 </script>
@@ -98,7 +104,6 @@ export default {
   }
   .el-table /deep/ .el-table__row > td> div > span {
     text-overflow: ellipsis;
-    -moz-text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index 50bcf94a4..0748e5562 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -1,14 +1,12 @@
 <template>
   <div class="table-header">
     <slot name="header">
-      <!--TODO: 事件交互 -->
       <div class="table-header-left-side">
         <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" @actionClick="handleActionClick"></ActionsGroup>
+        <ActionsGroup :is-fa="true" :actions="defaultRightSideActions" class="right-side-actions right-side-item" @actionClick="handleActionClick"></ActionsGroup>
       </div>
     </slot>
   </div>
@@ -16,7 +14,11 @@
 
 <script>
 import ActionsGroup from '@/components/ActionsGroup'
+import { createSourceIdCache } from '@/api/common'
+
 const defaultTrue = { type: Boolean, default: true }
+const defaultFalse = { type: Boolean, default: false }
+
 export default {
   name: 'TableAction',
   components: {
@@ -27,40 +29,76 @@ export default {
     hasImport: defaultTrue,
     hasRefresh: defaultTrue,
     hasCreate: defaultTrue,
-    hasDelete: defaultTrue,
-    hasUpdate: defaultTrue,
+    hasBulkDelete: defaultTrue,
+    hasBulkUpdate: defaultFalse,
     hasLeftActions: defaultTrue,
     hasSearch: defaultTrue,
-    hasRightActions: defaultTrue
+    hasRightActions: defaultTrue,
+    tableUrl: {
+      type: String,
+      default: ''
+    },
+    createRoute: {
+      type: String,
+      default: '404'
+    },
+    reloadTable: {
+      type: Function,
+      default: () => {}
+    },
+    selectedRows: {
+      type: Array,
+      default: () => ([])
+    },
+    extraActions: {
+      type: Array,
+      default: () => ([])
+    },
+    extraMoreActions: {
+      type: Array,
+      default: () => ([])
+    }
   },
   data() {
     return {
-      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'
-      },
       keyword: '',
-      defaultMoreActions: {
-        Delete: {
-          title: this.$tc('Delete selected'),
-          name: 'actionDeleteSelected'
-        },
-        Update: {
-          title: this.$tc('Update selected'),
-          name: 'actionUpdateSelected'
+      defaultRightSideActions: [
+        { name: 'actionExport', fa: 'fa-download', has: this.hasExport },
+        { name: 'actionImport', fa: 'fa-upload', has: this.hasImport },
+        { name: 'actionRefresh', fa: 'fa-refresh', has: this.hasRefresh }
+      ],
+      defaultActions: [
+        {
+          name: 'actionCreate',
+          title: this.$tc('Create'),
+          type: 'primary',
+          has: this.hasCreate,
+          can: true,
+          callback: this.handleCreate
         }
-      }
+      ],
+      defaultMoreActions: [
+        {
+          title: this.$tc('Delete selected'),
+          name: 'actionDeleteSelected',
+          can: (rows) => rows.length > 0,
+          has: this.hasBulkDelete,
+          callback: this.defaultBulkDeleteCallback
+        },
+        {
+          title: this.$tc('Update selected'),
+          name: 'actionUpdateSelected',
+          can: (rows) => rows.length > 0,
+          has: this.hasBulkUpdate,
+          callback: this.handleBulkUpdate
+        }
+      ]
     }
   },
   computed: {
     rightSideActions() {
       const actions = []
+      return actions
       for (const k in this.defaultRightSideActions) {
         if (this['has' + k]) {
           actions.push(this.defaultRightSideActions[k])
@@ -69,18 +107,31 @@ export default {
       return actions
     },
     actions() {
-      const actions = []
-      if (this.hasCreate) {
-        actions.push(this.defaultCreateAction)
+      const actions = [...this.defaultActions, ...this.extraActions]
+      const validActions = []
+      for (const action of actions) {
+        let ok = this.checkItem(action, 'has')
+        if (!ok) {
+          continue
+        }
+        ok = this.checkItem(action, 'can')
+        action.disabled = !ok
+        validActions.push(action)
       }
-      return actions
+      console.log(validActions)
+      return validActions
     },
     moreActions() {
-      const actions = []
-      for (const k in this.defaultMoreActions) {
-        if (this['has' + k]) {
-          actions.push(this.defaultMoreActions[k])
+      return this.defaultMoreActions
+    },
+    namedActions() {
+      const totalActions = [...this.actions, ...this.moreActions, ...this.rightSideActions]
+      const actions = {}
+      for (const action of totalActions) {
+        if (!action || !action.hasOwnProperty('name')) {
+          continue
         }
+        actions[action.name] = action
       }
       return actions
     }
@@ -90,7 +141,65 @@ export default {
       console.log('Search: ', keyword)
     },
     handleActionClick(item) {
-      this.$emit('clickAction', item)
+      let handler = this.namedActions[item] ? this.namedActions[item].callback : null
+      if (!handler) {
+        handler = () => {
+          console.log('No handler found for ', item)
+        }
+      }
+      handler(this.selectedRows)
+    },
+    handleCreate() {
+      const routeName = this.createRoute
+      this.$router.push({ name: routeName })
+      console.log('handle create')
+    },
+    defaultBulkDeleteCallback(rows) {
+      const msg = this.$tc('Are you sure to delete') + ' ' + rows.length + ' ' + this.$tc('rows')
+      const title = this.$tc('Info')
+      const performDelete = this.defaultPerformBulkDelete
+      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(rows)
+            done()
+            this.reloadTable()
+            this.$message.success(this.$tc('Delete success'))
+          } catch (error) {
+            this.$message.error(this.$tc('Delete failed'))
+            console.warn(error)
+          } finally {
+            instance.confirmButtonLoading = false
+          }
+        }
+      }).catch(() => {
+        /* 取消*/
+      })
+    },
+    async defaultPerformBulkDelete(rows) {
+      const ids = rows.map((v) => {
+        return v.id
+      })
+      console.log('Delete ids: ', ids)
+      const data = await createSourceIdCache(ids)
+      const url = `${this.tableUrl}?spm=` + data.spm
+      return this.$axios.delete(url)
+    },
+    handleBulkUpdate(rows) {
+    },
+    checkItem(item, attr) {
+      let ok = item[attr]
+      if (typeof ok === 'function') {
+        ok = ok(this.selectedRows)
+      } else if (ok == null) {
+        ok = true
+      }
+      return ok
     }
   }
 }
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 28bf24cdb..91f1eb35b 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,11 +1,8 @@
 <template>
   <div>
-    <TableAction v-bind="headerActions" @clickAction="handleActionClick"></TableAction>
+    <TableAction :table-url="tableConfig.url" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable"></TableAction>
     <el-card class="table-content" shadow="never">
-      <DataTable ref="table" :config="tableConfig" @selection-change="handleSelectionChange">
-        <template v-slot:actions="row">
-          {{ row.id }}
-        </template>
+      <DataTable ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange">
       </DataTable>
     </el-card>
   </div>
@@ -15,6 +12,7 @@
 /* eslint-disable no-unused-vars */
 import DataTable from '../DataTable'
 import TableAction from './TableAction'
+
 export default {
   name: 'ListTable',
   components: {
@@ -35,40 +33,21 @@ export default {
   },
   data() {
     return {
-      selectRows: [],
+      selectedRows: []
     }
   },
   computed: {
+    hasSelected() {
+      return this.selectedRows.length > 0
+    }
   },
   methods: {
     handleSelectionChange(val) {
-      this.selectRows = val
-      this.multipleSelection = val;
-      (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
-      console.log(this.$refs.table)
+      this.selectedRows = val
+      console.log(this.selectedRows)
     },
-    handleActionClick(item) {
-      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
+    reloadTable() {
+      this.$refs.dataTable.getList()
     }
   }
 }
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 87c82c57c..7220092bc 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -45,7 +45,8 @@ const cn = {
     'Monitor': '监控',
     'Run': '执行',
     'Are you sure to delete': '你确定要删除',
-    'Info': '提示'
+    'Info': '提示',
+    'More': '更多'
   },
   route: {
     'dashboard': '仪表盘',
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 7e4bbf7f4..a2070af98 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -48,8 +48,7 @@ export default {
               ]
             }
           }
-        ],
-        // 写路由名字，table组件会自动传作为参数
+        ]
       },
       headerActions: {
         createRoute: 'UserGroupCreate'
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index 4beb11adf..7e4b93afd 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/ListTable/formatters/index'
+import { DetailFormatter, DisplayFormatter, ChoicesFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
@@ -49,6 +49,22 @@ export default {
             formatter: ChoicesFormatter,
             align: 'center',
             width: '80px'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Actions'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              updateRoute: 'UserUpdate',
+              extraActions: [
+                {
+                  name: 'run',
+                  title: this.$tc('Run')
+                }
+              ]
+            }
           }
         ],
         // 写路由名字，table组件会自动传作为参数
@@ -57,7 +73,17 @@ export default {
         }
       },
       headerActions: {
-        createRoute: 'UserGroupCreate'
+        createRoute: 'UserCreate',
+        extraMoreActions: [
+          {
+            name: 'deactiveSelected',
+            title: this.$tc('Deactive selected')
+          },
+          {
+            name: 'activeSelected',
+            title: this.$tc('Active selected')
+          }
+        ]
       }
     }
   }

From e7c4f8ef0b1164dbdef84f7474f0209ce4dc5bc4 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 3 Apr 2020 19:41:21 +0800
Subject: [PATCH 4/8] =?UTF-8?q?[Update]=20=E5=AE=8C=E6=88=90=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E5=92=8C=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 .../el-data-table/el-data-table.vue           | 30 +++------
 src/components/DataTable/index.vue            |  3 +
 src/components/ListTable/TableAction.vue      | 66 +++++++++++--------
 src/components/ListTable/index.vue            |  5 +-
 src/main.js                                   |  3 +
 6 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 95b93d9f2..bc00a2611 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "js-cookie": "2.2.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "lodash": "^4.17.15",
     "lodash.clonedeep": "^4.5.0",
     "lodash.frompairs": "^4.0.1",
     "lodash.get": "^4.4.2",
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 2d7c7a49f..6188027a1 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
@@ -727,7 +727,8 @@ export default {
       // JSON.stringify是为了后面深拷贝作准备
       initExtraQuery: JSON.stringify(this.extraQuery || this.customQuery || {}),
       isSearchCollapse: false,
-      showNoData: false
+      showNoData: false,
+      innerQuery: {}
     }
   },
   computed: {
@@ -849,6 +850,7 @@ export default {
         formValue = this.$refs.searchForm.getFormValue()
         Object.assign(query, formValue)
       }
+      Object.assign(query, this.innerQuery)
       Object.assign(query, this._extraQuery)
 
       query[this.pageSizeKey] = this.hasPagination
@@ -939,18 +941,9 @@ export default {
           this.loading = false
         })
     },
-    async search() {
-      const form = this.$refs.searchForm
-      const valid = await new Promise(r => form.validate(r))
-      if (!valid) return
-
-      try {
-        await this.beforeSearch(form.getFormValue())
-        this.page = defaultFirstPage
-        this.getList()
-      } catch (err) {
-        this.$emit('error', err)
-      }
+    search(attrs) {
+      this.innerQuery = Object.assign(this.innerQuery, attrs)
+      return this.getList()
     },
     /**
      * 重置查询，相当于点击「重置」按钮
@@ -1165,15 +1158,12 @@ export default {
       return record[this.treeChildKey] && record[this.treeChildKey].length > 0
     },
     onSortChange({ column, prop, order }) {
-      if (!this.extraQuery) {
-        this.extraQuery = {}
-      }
       if (!order) {
-        delete this.extraQuery['sort']
-        delete this.extraQuery['direction']
+        delete this.innerQuery['sort']
+        delete this.innerQuery['direction']
       } else {
-        this.extraQuery['sort'] = prop
-        this.extraQuery['direction'] = order
+        this.innerQuery['sort'] = prop
+        this.innerQuery['direction'] = order
       }
       this.getList()
     }
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 7f82883c8..b52b3f76d 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -91,6 +91,9 @@ export default {
     getList() {
       this.$refs.table.clearSelection()
       return this.$refs.table.getList()
+    },
+    search(attrs) {
+      return this.$refs.table.search(attrs)
     }
   }
 }
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index 0748e5562..3eca507ca 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -14,6 +14,7 @@
 
 <script>
 import ActionsGroup from '@/components/ActionsGroup'
+import _ from 'lodash';
 import { createSourceIdCache } from '@/api/common'
 
 const defaultTrue = { type: Boolean, default: true }
@@ -46,6 +47,10 @@ export default {
       type: Function,
       default: () => {}
     },
+    searchTable: {
+      type: Function,
+      default: () => {}
+    },
     selectedRows: {
       type: Array,
       default: () => ([])
@@ -57,6 +62,10 @@ export default {
     extraMoreActions: {
       type: Array,
       default: () => ([])
+    },
+    extraRightSideActions: {
+      type: Array,
+      default: () => ([])
     }
   },
   data() {
@@ -65,7 +74,7 @@ export default {
       defaultRightSideActions: [
         { name: 'actionExport', fa: 'fa-download', has: this.hasExport },
         { name: 'actionImport', fa: 'fa-upload', has: this.hasImport },
-        { name: 'actionRefresh', fa: 'fa-refresh', has: this.hasRefresh }
+        { name: 'actionRefresh', fa: 'fa-refresh', has: this.hasRefresh, callback: this.handleRefresh }
       ],
       defaultActions: [
         {
@@ -97,33 +106,18 @@ export default {
   },
   computed: {
     rightSideActions() {
-      const actions = []
-      return actions
-      for (const k in this.defaultRightSideActions) {
-        if (this['has' + k]) {
-          actions.push(this.defaultRightSideActions[k])
-        }
-      }
-      return actions
+      const actions = [...this.defaultRightSideActions, ...this.extraRightSideActions]
+      return this.cleanActions(actions)
     },
     actions() {
       const actions = [...this.defaultActions, ...this.extraActions]
-      const validActions = []
-      for (const action of actions) {
-        let ok = this.checkItem(action, 'has')
-        if (!ok) {
-          continue
-        }
-        ok = this.checkItem(action, 'can')
-        action.disabled = !ok
-        validActions.push(action)
-      }
-      console.log(validActions)
-      return validActions
+      return this.cleanActions(actions)
     },
     moreActions() {
-      return this.defaultMoreActions
+      const actions = [...this.defaultMoreActions, ...this.extraMoreActions]
+      return this.cleanActions(actions)
     },
+
     namedActions() {
       const totalActions = [...this.actions, ...this.moreActions, ...this.rightSideActions]
       const actions = {}
@@ -137,10 +131,11 @@ export default {
     }
   },
   methods: {
-    handleSearch(keyword) {
-      console.log('Search: ', keyword)
-    },
+    handleSearch: _.debounce(function() {
+      this.searchTable({search: this.keyword})
+    }, 500),
     handleActionClick(item) {
+      console.log('name cations', this.namedActions)
       let handler = this.namedActions[item] ? this.namedActions[item].callback : null
       if (!handler) {
         handler = () => {
@@ -185,13 +180,32 @@ export default {
       const ids = rows.map((v) => {
         return v.id
       })
-      console.log('Delete ids: ', ids)
       const data = await createSourceIdCache(ids)
       const url = `${this.tableUrl}?spm=` + data.spm
       return this.$axios.delete(url)
     },
     handleBulkUpdate(rows) {
     },
+    handleExport() {
+    },
+    handleImport() {
+    },
+    handleRefresh() {
+      this.reloadTable()
+    },
+    cleanActions(actions) {
+      const validActions = []
+      for (const action of actions) {
+        let ok = this.checkItem(action, 'has')
+        if (!ok) {
+          continue
+        }
+        ok = this.checkItem(action, 'can')
+        action.disabled = !ok
+        validActions.push(action)
+      }
+      return validActions
+    },
     checkItem(item, attr) {
       let ok = item[attr]
       if (typeof ok === 'function') {
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 91f1eb35b..93ee5629a 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TableAction :table-url="tableConfig.url" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable"></TableAction>
+    <TableAction :table-url="tableConfig.url" :search-table="search" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable"></TableAction>
     <el-card class="table-content" shadow="never">
       <DataTable ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange">
       </DataTable>
@@ -48,6 +48,9 @@ export default {
     },
     reloadTable() {
       this.$refs.dataTable.getList()
+    },
+    search(attrs) {
+      return this.$refs.dataTable.search(attrs)
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index c4910939c..8b57de45c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,9 @@ import service from '@/utils/request'
 // if the table component cannot access `this.$axios`, it cannot send request
 Vue.prototype.$axios = service
 
+import _ from 'lodash'
+Vue.use(_)
+
 new Vue({
   el: '#app',
   i18n,

From 2dee57281266596e9ae0a14f5414c2af24ddb4d2 Mon Sep 17 00:00:00 2001
From: OrangeM21 <orangemtony@gmail.com>
Date: Fri, 3 Apr 2020 20:51:02 +0800
Subject: [PATCH 5/8] =?UTF-8?q?[update]=E4=BF=AE=E6=94=B9=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=8A=BD=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataForm/index.vue |  32 +++++--
 src/router/index.js               |   9 +-
 src/views/users/UserEdit.vue      | 139 ++++++++++++++++++++++++++----
 3 files changed, 151 insertions(+), 29 deletions(-)

diff --git a/src/components/DataForm/index.vue b/src/components/DataForm/index.vue
index dca4b33b3..7629b10f5 100644
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -1,5 +1,11 @@
 <template>
-  <elFormRender ref="dataForm" :content="content" v-bind="$attrs" v-on="$listeners">
+  <elFormRender
+    ref="dataForm"
+    :content="content"
+    v-bind="$attrs"
+    :form="basicForm"
+    v-on="$listeners"
+  >
     <!-- slot 透传 -->
     <slot v-for="item in content" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
     <slot v-for="item in content" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
@@ -26,26 +32,35 @@ export default {
     content: {
       type: Array,
       default: () => []
+    },
+    // 初始值
+    form: {
+      type: Object,
+      default: () => { return {} }
     }
   },
+  data() {
+    return {
+      basicForm: {}
+    }
+  },
+  mounted() {
+    this.basicForm = this.form
+  },
   methods: {
+    // 获取表单数据
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          this.$emit('submit')
+          this.$emit('submit', this.$refs[formName].getFormValue())
         } else {
-          console.log('error submit!!')
           return false
         }
       })
     },
+    // 重置表单
     resetForm(formName) {
       this.$refs[formName].resetFields()
-    },
-    getBasic() {
-      if (this.url) {
-        console.log('has Url')
-      }
     }
   }
 }
@@ -58,5 +73,4 @@ export default {
     margin-left:12%;
     width:73%;
 }
-
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index cc1ef189f..b1edf7585 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -73,7 +73,14 @@ export const constantRoutes = [
         meta: { title: 'UserCreate' }
       },
       {
-        path: 'users/:id',
+        path: 'users/update/:id',
+        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        name: 'UserEdit',
+        hidden: true,
+        meta: { title: 'UserEdit' }
+      },
+      {
+        path: 'users/detail/:id',
         component: () => import('@/views/users/UserDetail.vue'), // Parent router-view
         name: 'UserDetail',
         hidden: true,
diff --git a/src/views/users/UserEdit.vue b/src/views/users/UserEdit.vue
index 1882bb85e..cb5e3c1cf 100644
--- a/src/views/users/UserEdit.vue
+++ b/src/views/users/UserEdit.vue
@@ -2,12 +2,15 @@
   <Page>
     <template>
       <el-card>
-        <dataform :content="content" label-position="left" label-width="140px" :form="form">
+        <dataform :form="form" :content="content" label-position="left" label-width="140px">
           <formgroupheader slot="id:name" title="账户" :line="false" style="margin:0 50px;" />
           <formgroupheader slot="id:passwordrule" title="认证" :line="true" style="margin:0 50px;" />
+          <formgroupheader slot="id:role" title="角色安全" :line="true" style="margin:0 50px;" />
+          <formgroupheader slot="id:phone" title="认证" :line="true" style="margin:0 50px;" />
         </dataform>
       </el-card>
     </template>
+    <el-button @click="debug" />
   </page>
 </template>
 
@@ -26,13 +29,21 @@ export default {
   },
   data() {
     return {
+      form: {
+        name: '姓名',
+        passwordrule: '1',
+        mfa_level: 0,
+        source: 'local',
+        role: 'Admin',
+        date_expired: '2099-12-31 00:00:00 +0800'
+      },
       content: [
         {
           type: 'input',
           id: 'name',
           label: this.$t('users.name'),
           el: {
-            size: 'mini'
+            size: 'small'
           },
           rules: [
             { required: true, message: 'miss name', trigger: 'blur' }
@@ -43,7 +54,7 @@ export default {
           id: 'username',
           label: this.$t('users.username'),
           el: {
-            size: 'mini'
+            size: 'small'
           },
           rules: [
             { required: true, message: 'miss name', trigger: 'blur' }
@@ -54,7 +65,7 @@ export default {
           id: 'email',
           label: this.$t('users.email'),
           el: {
-            size: 'mini'
+            size: 'small'
           },
           rules: [
             { required: true, message: 'miss name', trigger: 'blur' }
@@ -64,7 +75,7 @@ export default {
           id: 'users',
           label: '用户组',
           el: {
-            size: 'mini',
+            size: 'small',
             placeholder: '添加到用户组',
             value: [
               {
@@ -94,6 +105,9 @@ export default {
           el: {
             size: 'small'
           },
+          hidden: (formValue, item) => {
+            return this.$route.params.id
+          },
           options: [{
             label: '生成重置密码链接，通过邮件发送给用户',
             value: '1'
@@ -109,30 +123,47 @@ export default {
           id: 'password',
           label: '密码',
           hidden: (formValue, item) => {
-            console.log(formValue, item)
-            formValue.passwordrule !== '2'
+            if (this.$route.params.id === undefined) {
+              return (formValue.passwordrule !== '2')
+            } else {
+              return true
+            }
           },
           el: {
-            size: 'mini',
+            size: 'small',
             type: 'password'
+          }
+        },
+        {
+          type: 'input',
+          id: 'sshkey',
+          label: 'ssh公钥',
+          hidden: (formValue, item) => {
+            return !this.$route.params.id
           },
-          rules: [
-            { required: true, message: 'miss name', trigger: 'blur' }
-          ]
+          el: {
+            placeholder: 'ssh-rsa AAAA...',
+            type: 'textarea',
+            rows: 3
+          }
         },
         {
           type: 'radio-group',
-          id: 'mfa',
-          label: '密码策略',
+          id: 'mfa_level',
+          label: '多因子认证',
           el: {
             size: 'small'
           },
+          size: 0,
           options: [{
-            label: '禁用'
+            label: '禁用',
+            value: 0
           }, {
-            label: '启用'
+            label: '启用',
+            value: 1
           }, {
-            label: '强制启用'
+            label: '强制启用',
+            value: 2
           }],
           rules: [
             { required: true, message: 'miss resource', trigger: 'change' }
@@ -144,13 +175,80 @@ export default {
           el: {
             size: 'small'
           },
+          default: '数据库',
           options: [{
-            label: 'area1',
-            value: 'shanghai'
-          }]
+            label: '数据库',
+            value: 'local'
+          }],
+          rules: [
+            { required: true, message: 'miss resource', trigger: 'change' }
+          ]
+        },
+        {
+          type: 'select',
+          id: 'role',
+          label: '角色',
+          el: {
+            size: 'small'
+          },
+          default: 'User',
+          options: [{
+            label: '管理员',
+            value: 'Admin'
+          }, {
+            label: '用户',
+            value: 'User'
+          }, {
+            label: '审计员',
+            value: 'Auditor'
+          }],
+          rules: [
+            { required: true, message: 'miss resource', trigger: 'change' }
+          ]
+        },
+        {
+          type: 'date-picker',
+          id: 'date_expired',
+          label: '过期时间',
+          el: {
+            type: 'datetime',
+            size: 'small',
+            placeholder: 'select date'
+          },
+          rules: [
+            { type: 'date', required: true, message: 'miss date', trigger: 'change' }
+          ]
+        },
+        {
+          type: 'input',
+          id: 'phone',
+          label: '手机',
+          el: {
+            size: 'small'
+          }
+        }, {
+          type: 'input',
+          id: 'wechat',
+          label: '微信',
+          el: {
+            size: 'small'
+          }
+        }, {
+          type: 'input',
+          id: 'comment',
+          label: '备注',
+          el: {
+            type: 'textarea',
+            row: '4'
+          }
         }
       ]
     }
+  },
+  methods: {
+    debug() {
+      console.log(this)
+    }
   }
 }
 </script>
@@ -159,4 +257,7 @@ export default {
 .el-form /deep/ .el-select{
   width:100%;
 }
+.el-form /deep/ .el-form-item__content > .el-date-editor{
+  width:100%;
+}
 </style>

From 15e4a38e7d1b37dc5fd43aec02bd70fbdb6d23e0 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 3 Apr 2020 21:02:05 +0800
Subject: [PATCH 6/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/index.vue          | 40 ++++++++++++++++++++++++
 src/components/ListTable/TableAction.vue | 35 +++++++++++++++++----
 src/views/users/UserGroupList.vue        |  5 ++-
 3 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Dialog/index.vue

diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
new file mode 100644
index 000000000..3c8269a16
--- /dev/null
+++ b/src/components/Dialog/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-dialog :title="title" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+    <div slot="footer" class="dialog-footer">
+      <slog name="footer">
+        <el-button size="small" @click="onCancel">{{ $t('Cancel') }}</el-button>
+        <el-button type="primary" size="small" @click="onConfirm">{{ $tc('Ok') }}</el-button>
+      </slog>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Dialog',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    onCancel() {
+
+    },
+    onConfirm() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index 3eca507ca..bd2eb636a 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -8,13 +8,23 @@
         <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="defaultRightSideActions" class="right-side-actions right-side-item" @actionClick="handleActionClick"></ActionsGroup>
       </div>
+      <Dialog :title="$t('Export')">
+        <el-form>
+          <el-form-item label="导出范围" :label-width="'100px'">
+            <el-radio v-model="exportValue" class="export-item" label="1">导出全部</el-radio>
+            <el-radio v-model="exportValue" class="export-item" label="2">仅导出选中项</el-radio>
+            <el-radio v-model="exportValue" class="export-item" label="3">仅导出搜索项</el-radio>
+          </el-form-item>
+        </el-form>
+      </Dialog>
     </slot>
   </div>
 </template>
 
 <script>
 import ActionsGroup from '@/components/ActionsGroup'
-import _ from 'lodash';
+import { Dialog } from '../Dialog'
+import _ from 'lodash'
 import { createSourceIdCache } from '@/api/common'
 
 const defaultTrue = { type: Boolean, default: true }
@@ -23,7 +33,8 @@ const defaultFalse = { type: Boolean, default: false }
 export default {
   name: 'TableAction',
   components: {
-    ActionsGroup
+    ActionsGroup,
+    Dialog
   },
   props: {
     hasExport: defaultTrue,
@@ -47,6 +58,10 @@ export default {
       type: Function,
       default: () => {}
     },
+    performBulkDelete: {
+      type: Function,
+      default: () => {}
+    },
     searchTable: {
       type: Function,
       default: () => {}
@@ -72,8 +87,8 @@ export default {
     return {
       keyword: '',
       defaultRightSideActions: [
-        { name: 'actionExport', fa: 'fa-download', has: this.hasExport },
-        { name: 'actionImport', fa: 'fa-upload', has: this.hasImport },
+        { name: 'actionExport', fa: 'fa-download', has: this.hasExport, callback: this.handleExport },
+        { name: 'actionImport', fa: 'fa-upload', has: this.hasImport, callback: this.handleImport },
         { name: 'actionRefresh', fa: 'fa-refresh', has: this.hasRefresh, callback: this.handleRefresh }
       ],
       defaultActions: [
@@ -101,7 +116,9 @@ export default {
           has: this.hasBulkUpdate,
           callback: this.handleBulkUpdate
         }
-      ]
+      ],
+      dialogExportVisible: false,
+      exportValue: 2
     }
   },
   computed: {
@@ -152,7 +169,7 @@ export default {
     defaultBulkDeleteCallback(rows) {
       const msg = this.$tc('Are you sure to delete') + ' ' + rows.length + ' ' + this.$tc('rows')
       const title = this.$tc('Info')
-      const performDelete = this.defaultPerformBulkDelete
+      const performDelete = this.performBulkDelete || this.defaultPerformBulkDelete
       this.$alert(msg, title, {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
@@ -187,6 +204,7 @@ export default {
     handleBulkUpdate(rows) {
     },
     handleExport() {
+      this.dialogExportVisible = true
     },
     handleImport() {
     },
@@ -264,4 +282,9 @@ export default {
     justify-content:center;
   }
 
+  .export-item {
+    display: block;
+    padding: 5px 20px;
+  }
+
 </style>
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index a2070af98..bc9fa325a 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -51,7 +51,10 @@ export default {
         ]
       },
       headerActions: {
-        createRoute: 'UserGroupCreate'
+        createRoute: 'UserGroupCreate',
+        performBulkDelete: function(rows) {
+          console.log('hello')
+        }
       }
     }
   }

From 901b4a33bf2ec9040c24c5a76cb77dbdc40591f7 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 7 Apr 2020 10:45:37 +0800
Subject: [PATCH 7/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataForm/index.vue             | 27 ++++++++------
 src/i18n/langs/cn.js                          |  5 ++-
 src/router/index.js                           |  8 ++---
 src/styles/element-ui.scss                    | 14 +++++++-
 .../{UserEdit.vue => UserCreateUpdate.vue}    | 36 +++++++++----------
 src/views/users/UserGroupUpdate.vue           |  4 +--
 6 files changed, 57 insertions(+), 37 deletions(-)
 rename src/views/users/{UserEdit.vue => UserCreateUpdate.vue} (87%)

diff --git a/src/components/DataForm/index.vue b/src/components/DataForm/index.vue
index 7629b10f5..77b10cdda 100644
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -1,18 +1,20 @@
 <template>
   <elFormRender
     ref="dataForm"
-    :content="content"
+    :content="fields"
     v-bind="$attrs"
     :form="basicForm"
+    label-position="right"
+    label-width="17%"
     v-on="$listeners"
   >
     <!-- slot 透传 -->
-    <slot v-for="item in content" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
-    <slot v-for="item in content" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
+    <slot v-for="item in fields" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
+    <slot v-for="item in fields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
 
     <el-form-item v-if="defaultButton">
-      <el-button size="small" type="primary" @click="submitForm('dataForm')">submit</el-button>
-      <el-button size="small" @click="resetForm('dataForm')">reset</el-button>
+      <el-button size="small" @click="resetForm('dataForm')">{{ $tc('Reset') }}</el-button>
+      <el-button size="small" type="primary" @click="submitForm('dataForm')">{{ $tc('Submit') }}</el-button>
     </el-form-item>
     <slot name="Actions" />
   </elFormRender>
@@ -29,7 +31,7 @@ export default {
       type: Boolean,
       default: true
     },
-    content: {
+    fields: {
       type: Array,
       default: () => []
     },
@@ -67,10 +69,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.el-form /deep/ .el-form-item {
+  .el-form /deep/ .el-form-item {
     margin-bottom: 12px;
+  }
 
-    margin-left:12%;
-    width:73%;
-}
+  .el-form /deep/ .el-form-item__content {
+    width: 75%;
+  }
+
+  .el-form /deep/ .el-form-item__label {
+    padding: 0 30px 0 0;
+  }
 </style>
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 7220092bc..c226fc3ff 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -46,7 +46,9 @@ const cn = {
     'Run': '执行',
     'Are you sure to delete': '你确定要删除',
     'Info': '提示',
-    'More': '更多'
+    'More': '更多',
+    'Submit': '提交',
+    'Reset': '重置'
   },
   route: {
     'dashboard': '仪表盘',
@@ -87,6 +89,7 @@ const cn = {
     'OperateLog': '操作日志',
     'PasswordChangeLog': '改密日志',
     'Settings': '系统设置',
+    'UserCreate': '创建用户'
   },
   // 用户模块翻译
   users: {
diff --git a/src/router/index.js b/src/router/index.js
index 679372413..d7c11fda9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,14 +67,14 @@ export const constantRoutes = [
       },
       {
         path: 'users/create',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserCreate',
         hidden: true,
-        meta: { title: 'UserCreate' }
+        meta: { title: 'UserCreate', activeMenu: '/users/users'}
       },
       {
         path: 'users/update/:id',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserEdit',
         hidden: true,
         meta: { title: 'UserEdit' }
@@ -108,7 +108,7 @@ export const constantRoutes = [
       },
       {
         path: 'groups/create',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserGroupCreate',
         hidden: true,
         meta: { title: 'UserGroupCreate' }
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 5bbe97fc1..f29b19d40 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -162,7 +162,15 @@ td .el-button.el-button--mini {
   width: 100%;
   font-size: 14px;
   line-height: 1.5;
-  height: 35px;
+  height: 34px;
+}
+
+.el-input--small .el-input__inner {
+  height: 34px;
+}
+
+.el-input--small .el-input__icon {
+  line-height: 34px;
 }
 
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
@@ -223,3 +231,7 @@ td .el-button.el-button--mini {
 .text-success {
   color: $--color-success;
 }
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: inherit;
+}
diff --git a/src/views/users/UserEdit.vue b/src/views/users/UserCreateUpdate.vue
similarity index 87%
rename from src/views/users/UserEdit.vue
rename to src/views/users/UserCreateUpdate.vue
index cb5e3c1cf..284831a56 100644
--- a/src/views/users/UserEdit.vue
+++ b/src/views/users/UserCreateUpdate.vue
@@ -1,49 +1,47 @@
 <template>
   <Page>
-    <template>
-      <el-card>
-        <dataform :form="form" :content="content" label-position="left" label-width="140px">
-          <formgroupheader slot="id:name" title="账户" :line="false" style="margin:0 50px;" />
-          <formgroupheader slot="id:passwordrule" title="认证" :line="true" style="margin:0 50px;" />
-          <formgroupheader slot="id:role" title="角色安全" :line="true" style="margin:0 50px;" />
-          <formgroupheader slot="id:phone" title="认证" :line="true" style="margin:0 50px;" />
-        </dataform>
-      </el-card>
-    </template>
-    <el-button @click="debug" />
+    <IBox>
+      <DataForm :form="form" :fields="fields" label-position="left" label-width="140px">
+        <FormGroupHeader slot="id:name" title="账户" :line="false" style="margin:0 50px;" />
+        <FormGroupHeader slot="id:passwordrule" title="认证" :line="true" style="margin:0 50px;" />
+        <FormGroupHeader slot="id:role" title="角色安全" :line="true" style="margin:0 50px;" />
+        <FormGroupHeader slot="id:phone" title="认证" :line="true" style="margin:0 50px;" />
+      </DataForm>
+    </IBox>
   </page>
 </template>
 
 <script>
 /* eslint-disable vue/no-unused-components */
-import formgroupheader from '@/components/formGroupHeader'
-import { Page } from '@/layout/components'
-import dataform from '@/components/DataForm'
+import FormGroupHeader from '@/components/formGroupHeader'
+import { Page, IBox } from '@/layout/components'
+import DataForm from '@/components/DataForm'
 import select2 from '@/components/Select2'
 export default {
   components: {
     Page,
-    dataform,
+    IBox,
+    DataForm,
     select2,
-    formgroupheader
+    FormGroupHeader
   },
   data() {
     return {
       form: {
-        name: '姓名',
         passwordrule: '1',
         mfa_level: 0,
         source: 'local',
         role: 'Admin',
         date_expired: '2099-12-31 00:00:00 +0800'
       },
-      content: [
+      fields: [
         {
           type: 'input',
           id: 'name',
           label: this.$t('users.name'),
           el: {
-            size: 'small'
+            size: 'small',
+            placeholder: 'hello',
           },
           rules: [
             { required: true, message: 'miss name', trigger: 'blur' }
diff --git a/src/views/users/UserGroupUpdate.vue b/src/views/users/UserGroupUpdate.vue
index d89658bf9..5ac0da0e2 100644
--- a/src/views/users/UserGroupUpdate.vue
+++ b/src/views/users/UserGroupUpdate.vue
@@ -2,7 +2,7 @@
   <Page>
     <template>
       <el-card>
-        <dataform :content="content" label-position="right" label-width="100px" :form="form" />
+        <dataform fields="content" label-position="right" label-width="100px" :form="form" />
       </el-card>
     </template>
   </page>
@@ -11,7 +11,7 @@
 <script>
 /* eslint-disable vue/no-unused-components */
 import { Page } from '@/layout/components'
-import dataform from '@/components/DataForm'
+import DataForm from '@/components/DataForm'
 import select2 from '@/components/Select2'
 export default {
   components: {

From 4f57fd3ba1ed5da943d2da95c032328f486f7699 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 7 Apr 2020 11:37:45 +0800
Subject: [PATCH 8/8] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataForm/index.vue        | 16 ++++++---
 src/components/DataForm/rules/index.js   | 14 ++++++++
 src/components/formGroupHeader/index.vue |  2 +-
 src/i18n/langs/cn.js                     |  3 +-
 src/main.js                              |  3 --
 src/views/users/UserCreateUpdate.vue     | 43 ++++++++++--------------
 6 files changed, 47 insertions(+), 34 deletions(-)
 create mode 100644 src/components/DataForm/rules/index.js

diff --git a/src/components/DataForm/index.vue b/src/components/DataForm/index.vue
index 77b10cdda..3d752e352 100644
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <elFormRender
+  <ElFormRender
     ref="dataForm"
     :content="fields"
     v-bind="$attrs"
@@ -17,14 +17,14 @@
       <el-button size="small" type="primary" @click="submitForm('dataForm')">{{ $tc('Submit') }}</el-button>
     </el-form-item>
     <slot name="Actions" />
-  </elFormRender>
+  </ElFormRender>
 </template>
 
 <script>
-import elFormRender from './components/el-form-renderer'
+import ElFormRender from './components/el-form-renderer'
 export default {
   components: {
-    elFormRender
+    ElFormRender
   },
   props: {
     defaultButton: {
@@ -80,4 +80,12 @@ export default {
   .el-form /deep/ .el-form-item__label {
     padding: 0 30px 0 0;
   }
+
+  .el-form /deep/ .el-form-item__error {
+     position: inherit;
+  }
+
+  .el-form /deep/ .form-group-header {
+    margin-left: 50px;
+  }
 </style>
diff --git a/src/components/DataForm/rules/index.js b/src/components/DataForm/rules/index.js
new file mode 100644
index 000000000..e5fefb57b
--- /dev/null
+++ b/src/components/DataForm/rules/index.js
@@ -0,0 +1,14 @@
+import i18n from '@/i18n/i18n'
+
+export const Required = {
+  required: true, message: i18n.t('common.' + 'This field is required'), trigger: 'blur'
+}
+
+export const RequiredChange = {
+  required: true, message: i18n.t('common.' + 'This field is required'), trigger: 'change'
+}
+
+export default {
+  Required,
+  RequiredChange
+}
diff --git a/src/components/formGroupHeader/index.vue b/src/components/formGroupHeader/index.vue
index a38adb38e..41efbef06 100644
--- a/src/components/formGroupHeader/index.vue
+++ b/src/components/formGroupHeader/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="form-group-header">
     <div v-if="line" class="hr-line-dashed" />
     <h3>{{ title }}</h3>
   </div>
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index c226fc3ff..7e50782a4 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -48,7 +48,8 @@ const cn = {
     'Info': '提示',
     'More': '更多',
     'Submit': '提交',
-    'Reset': '重置'
+    'Reset': '重置',
+    'This field is required': '这个字段是必填项'
   },
   route: {
     'dashboard': '仪表盘',
diff --git a/src/main.js b/src/main.js
index 8b57de45c..c4910939c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,9 +41,6 @@ import service from '@/utils/request'
 // if the table component cannot access `this.$axios`, it cannot send request
 Vue.prototype.$axios = service
 
-import _ from 'lodash'
-Vue.use(_)
-
 new Vue({
   el: '#app',
   i18n,
diff --git a/src/views/users/UserCreateUpdate.vue b/src/views/users/UserCreateUpdate.vue
index 284831a56..680a08130 100644
--- a/src/views/users/UserCreateUpdate.vue
+++ b/src/views/users/UserCreateUpdate.vue
@@ -1,11 +1,11 @@
 <template>
   <Page>
     <IBox>
-      <DataForm :form="form" :fields="fields" label-position="left" label-width="140px">
-        <FormGroupHeader slot="id:name" title="账户" :line="false" style="margin:0 50px;" />
-        <FormGroupHeader slot="id:passwordrule" title="认证" :line="true" style="margin:0 50px;" />
-        <FormGroupHeader slot="id:role" title="角色安全" :line="true" style="margin:0 50px;" />
-        <FormGroupHeader slot="id:phone" title="认证" :line="true" style="margin:0 50px;" />
+      <DataForm :form="form" :fields="fields">
+        <FormGroupHeader slot="id:name" title="账户" :line="false" />
+        <FormGroupHeader slot="id:passwordrule" title="认证" :line="true" />
+        <FormGroupHeader slot="id:role" title="角色安全" :line="true" />
+        <FormGroupHeader slot="id:phone" title="认证" :line="true" />
       </DataForm>
     </IBox>
   </page>
@@ -16,6 +16,7 @@
 import FormGroupHeader from '@/components/formGroupHeader'
 import { Page, IBox } from '@/layout/components'
 import DataForm from '@/components/DataForm'
+import rules from '@/components/DataForm/rules'
 import select2 from '@/components/Select2'
 export default {
   components: {
@@ -40,11 +41,9 @@ export default {
           id: 'name',
           label: this.$t('users.name'),
           el: {
-            size: 'small',
-            placeholder: 'hello',
           },
           rules: [
-            { required: true, message: 'miss name', trigger: 'blur' }
+            rules.Required
           ]
         },
         {
@@ -52,10 +51,9 @@ export default {
           id: 'username',
           label: this.$t('users.username'),
           el: {
-            size: 'small'
           },
           rules: [
-            { required: true, message: 'miss name', trigger: 'blur' }
+            rules.Required
           ]
         },
         {
@@ -63,17 +61,15 @@ export default {
           id: 'email',
           label: this.$t('users.email'),
           el: {
-            size: 'small'
           },
           rules: [
-            { required: true, message: 'miss name', trigger: 'blur' }
+            rules.Required
           ]
         },
         {
           id: 'users',
           label: '用户组',
           el: {
-            size: 'small',
             placeholder: '添加到用户组',
             value: [
               {
@@ -101,7 +97,6 @@ export default {
           id: 'passwordrule',
           label: '密码策略',
           el: {
-            size: 'small'
           },
           hidden: (formValue, item) => {
             return this.$route.params.id
@@ -128,7 +123,6 @@ export default {
             }
           },
           el: {
-            size: 'small',
             type: 'password'
           }
         },
@@ -150,7 +144,6 @@ export default {
           id: 'mfa_level',
           label: '多因子认证',
           el: {
-            size: 'small'
           },
           size: 0,
           options: [{
@@ -164,14 +157,13 @@ export default {
             value: 2
           }],
           rules: [
-            { required: true, message: 'miss resource', trigger: 'change' }
+            rules.Required
           ]
         }, {
           type: 'select',
           id: 'source',
           label: '来源',
           el: {
-            size: 'small'
           },
           default: '数据库',
           options: [{
@@ -179,7 +171,7 @@ export default {
             value: 'local'
           }],
           rules: [
-            { required: true, message: 'miss resource', trigger: 'change' }
+            rules.Required
           ]
         },
         {
@@ -187,7 +179,6 @@ export default {
           id: 'role',
           label: '角色',
           el: {
-            size: 'small'
           },
           default: 'User',
           options: [{
@@ -201,7 +192,7 @@ export default {
             value: 'Auditor'
           }],
           rules: [
-            { required: true, message: 'miss resource', trigger: 'change' }
+            rules.Required
           ]
         },
         {
@@ -210,11 +201,10 @@ export default {
           label: '过期时间',
           el: {
             type: 'datetime',
-            size: 'small',
             placeholder: 'select date'
           },
           rules: [
-            { type: 'date', required: true, message: 'miss date', trigger: 'change' }
+            rules.Required
           ]
         },
         {
@@ -222,14 +212,12 @@ export default {
           id: 'phone',
           label: '手机',
           el: {
-            size: 'small'
           }
         }, {
           type: 'input',
           id: 'wechat',
           label: '微信',
           el: {
-            size: 'small'
           }
         }, {
           type: 'input',
@@ -247,6 +235,11 @@ export default {
     debug() {
       console.log(this)
     }
+  },
+  mounted() {
+    console.log('>>>>>>>>>>')
+    console.log(rules)
+    console.log(rules.Required)
   }
 }
 </script>