[Update] 调整ui

src/components/AutoDataForm/index.vue

@@ -75,23 +75,38 @@ export default {
           type = ''
           field.component = Select2
           break
+        case 'string':
+          type = 'input'
+          if (!fieldMeta.max_length) {
+            field.el.type = 'textarea'
+          }
+          break
         default:
           type = 'input'
           break
       }
+      if (type === 'radio-group') {
+        const options = fieldMeta.choices.map(v => {
+          return { label: v.display_name, value: v.value }
+        })
+        if (options.length > 4) {
+          type = 'select'
+          field.el.filterable = true
+        }
+      }
       field.type = type
       return field
     },
     generateFieldByName(name, field) {
       switch (name) {
         case 'email':
-          field.el = { type: 'email' }
+          field.el.type = 'email'
           break
         case 'password':
-          field.el = { type: 'password' }
+          field.el.type = 'password'
           break
         case 'comment':
-          field.el = { type: 'textarea' }
+          field.el.type = 'textarea'
           break
       }
       return field
@@ -109,15 +124,16 @@ export default {
       return field
     },
     generateField(name) {
-      let field = {}
+      let field = { id: name, prop: name, el: {}}
       const fieldMeta = this.meta[name] || {}
-      field.id = name
-      field.prop = name
       field.label = fieldMeta.label
       field = this.generateFieldByType(fieldMeta.type, field, fieldMeta)
       field = this.generateFieldByName(name, field)
       field = this.generateFieldByOther(field, fieldMeta)
       field = Object.assign(field, this.fieldsMeta[name] || {})
+      if (name === 'name') {
+        console.log(field)
+      }
       return field
     },
     generateFieldGroup(data) {

src/components/AutoDataTable/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 import DataTable from '../DataTable'
-import { DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+import { DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/ListTable/formatters'
 import { optionUrlMeta } from '@/api/common'
 export default {
   name: 'AutoDataTable',

src/components/ListTable/formatters/index.js

@@ -1,6 +1,32 @@
-export { default as DetailFormatter } from './DetailFormatter'
+import DetailFormatter from './DetailFormatter'
-export { default as DisplayFormatter } from './DisplayFormatter'
+import DisplayFormatter from './DisplayFormatter'
-export { default as BooleanFormatter } from './ChoicesFormatter'
+import BooleanFormatter from './ChoicesFormatter'
-export { default as ActionsFormatter } from './ActionsFormatter'
+import ActionsFormatter from './ActionsFormatter'
-export { default as ExpandPreFormatter } from './ExpandPreFormatter'
+import ExpandPreFormatter from './ExpandPreFormatter'
-export { default as LengthFormatter } from './LengthFormatter'
+import LengthFormatter from './LengthFormatter'
+
+// export { default as DetailFormatter } from './DetailFormatter'
+// export { default as DisplayFormatter } from './DisplayFormatter'
+// export { default as BooleanFormatter } from './ChoicesFormatter'
+// export { default as ActionsFormatter } from './ActionsFormatter'
+// export { default as ExpandPreFormatter } from './ExpandPreFormatter'
+// export { default as LengthFormatter } from './LengthFormatter'
+
+export const modules = {
+  DetailFormatter,
+  DisplayFormatter,
+  BooleanFormatter,
+  ActionsFormatter,
+  ExpandPreFormatter,
+  LengthFormatter
+}
+
+export default modules
+export {
+  DetailFormatter,
+  DisplayFormatter,
+  BooleanFormatter,
+  ActionsFormatter,
+  ExpandPreFormatter,
+  LengthFormatter
+}

src/i18n/langs/cn.js

@@ -59,7 +59,9 @@ const cn = {
     'Import': '导入',
     'Export': '导出',
     'Other': '其它',
-    'Create success': '创建成功'
+    'Create success': '创建成功',
+    'Deactive selected': '禁用所选',
+    'Active selected': '激活所选'
   },
   route: {
     'dashboard': '仪表盘',

src/layout/components/GenericCreateUpdatePage/index.vue

@@ -1,7 +1,17 @@
 <template>
-  <Page>
+  <Page v-loading="loadding">
     <IBox>
-      <AutoDataForm ref="form" :method="method" :form="form" :fields="fields" :url="totalUrl" v-bind="$attrs" v-on="$listeners" @submit="handleSubmit" />
+      <AutoDataForm
+        v-if="!loadding"
+        ref="form"
+        :method="method"
+        :form="form"
+        :fields="fields"
+        :url="totalUrl"
+        v-bind="$attrs"
+        v-on="$listeners"
+        @submit="handleSubmit"
+      />
     </IBox>
   </Page>
 </template>
@@ -24,9 +34,13 @@ export default {
         return []
       }
     },
-    form: {
+    object: {
       type: Object,
-      default: () => { return {} }
+      default: () => ({})
+    },
+    initial: {
+      type: Object,
+      default: () => ({})
     },
     onSubmit: {
       type: Function,
@@ -57,16 +71,27 @@ export default {
   },
   data() {
     return {
+      form: {},
+      loadding: true
     }
   },
   computed: {
     method() {
-      return this.getMethod()
+      const method = this.getMethod(this)
+      return method
     },
     totalUrl() {
       return this.getUrl()
     }
   },
+  mounted() {
+    if (this.method === 'put') {
+      this.getObjectDetail()
+    } else {
+      this.form = Object.assign(this.form, this.initial)
+      this.loadding = false
+    }
+  },
   methods: {
     handleSubmit(values, form) {
       let handler = this.onSubmit || this.defaultOnSubmit
@@ -93,6 +118,15 @@ export default {
           console.log(data)
         }
       })
+    },
+    getObjectDetail() {
+      this.$axios.get(this.totalUrl).then(data => {
+        this.form = data
+      }).catch(error => {
+        console.log(error)
+      }).finally(() => {
+        this.loadding = false
+      })
     }
   }
 }

src/router/index.js

@@ -70,14 +70,14 @@ export const constantRoutes = [
         component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserCreate',
         hidden: true,
-        meta: { title: 'UserCreate', activeMenu: '/users/users' }
+        meta: { title: 'UserCreate', activeMenu: '/users/users', action: 'create' }
       },
       {
         path: 'users/:id/update',
         component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserUpdate',
         hidden: true,
-        meta: { title: 'UserUpdate' }
+        meta: { title: 'UserUpdate', activeMenu: '/users/users', action: 'update' }
       },
       {
         path: 'users/detail/:id',

src/styles/element-ui.scss

@@ -235,3 +235,29 @@ td .el-button.el-button--mini {
 .el-radio__input.is-checked+.el-radio__label {
   color: inherit;
 }
+
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: #409EFF;
+  background-color: #409EFF;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  border-color: #409EFF;
+  background-color: #409EFF;
+}
+
+.el-radio__inner:hover {
+  border-color: #409EFF;
+}
+
+.el-textarea__inner {
+  border-radius: 0;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  border-color: #409EFF;
+  background-color: #409EFF;
+}
+.el-checkbox__inner:hover {
+  border-color: #409EFF;
+}

src/styles/index.scss

@@ -5,7 +5,6 @@
 @import './sidebar.scss';
 @import './element-index.css';
 @import './menu.scss';
-@import 'vue-select/src/scss/vue-select.scss';
 @import "./font-awesome/font-awesome.min.css";
 
 body {

src/views/users/UserCreateUpdate.vue

@@ -1,8 +1,5 @@
 <template>
-  <div>
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
-    <GenericCreateUpdatePage :fields="fields" :form="form" :fields-meta="fieldsMeta" :url="url" />
-    <el-button @click="debug">Debug</el-button>
-  </div>
 </template>
 
 <script>
@@ -12,9 +9,9 @@ export default {
     GenericCreateUpdatePage
   },
   data() {
-    const errors = { name: [] }
+    const errors = { name: '' }
     return {
-      form: {
+      initial: {
         password_strategy: 0,
         mfa_level: 0,
         source: 'local',
@@ -23,26 +20,35 @@ export default {
       },
       fields: [
         [this.$t('users.' + 'Account'), ['name', 'username', 'email', 'groups']],
-        [this.$t('users.' + 'Authentication'), ['password_strategy', 'password', 'mfa_level', 'source']],
+        [this.$t('users.' + 'Authentication'), ['password_strategy', 'password', 'public_key', 'mfa_level', 'source']],
         [this.$t('users.' + 'Secure'), ['role', 'date_expired']],
         [this.$tc('Other'), ['phone', 'wechat', 'comment']]
       ],
       errors: errors,
       url: '/api/v1/users/users/',
       fieldsMeta: {
+        name: {
+          el: {
+            error: '无措'
+          }
+        },
+        password_strategy: {
+          hidden: () => {
+            return this.$route.params.id
+          }
+        },
         password: {
           hidden: (formValue, item) => {
             console.log('hidden password', formValue.password_strategy)
-            if (this.$route.params.id === undefined) {
+            if (this.$route.meta.action === 'update') {
-              return formValue.password_strategy !== 1
+              return false
-            } else {
-              return true
             }
+            return formValue.password_strategy !== 1
           }
         },
-        name: {
+        public_key: {
-          el: {
+          hidden: (formValue, item) => {
-            error: errors.name
+            return this.$route.meta.action !== 'update'
           }
         },
         groups: {
@@ -54,20 +60,18 @@ export default {
       }
     }
   },
+  mounted() {
+    setTimeout(() => {
+      this.errors.name = 'dididi'
+    }, 3000)
+  },
   methods: {
     debug() {
       console.log(this)
-      this.errors.name.push('world')
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.el-form /deep/ .el-select{
-  width:100%;
-}
-.el-form /deep/ .el-form-item__content > .el-date-editor{
-  width:100%;
-}
 </style>

src/views/users/UserList.vue

@@ -16,6 +16,9 @@ export default {
         columns: [
           'name', 'username', 'role', 'groups_display', 'source', 'is_valid', 'actions'
         ],
+        columnsMeta: {
+
+        },
         detailRoute: 'UserDetail',
         actions: {
           updateRoute: 'UserUpdate'