[Update] 修改自动创建的表单

src/components/AutoDataForm/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <DataForm></DataForm>
+  <DataForm v-loading="loading" :fields="totalFields" v-bind="$attrs" v-on="$listeners">
+    <slot v-for="item in totalFields" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
+    <slot v-for="item in totalFields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
+  </DataForm>
 </template>
 
 <script>
 import DataForm from '../DataForm'
+import { optionUrlMeta } from '@/api/common'
+import rules from '@/components/DataForm/rules'
+import Select2 from '@/components/Select2'
 export default {
   name: 'AutoDataForm',
   components: {
@@ -12,7 +18,7 @@ export default {
   props: {
     url: {
       type: String,
-      required: true,
+      // required: true,
       default: '/api/v1/users/users/'
     },
     method: {
@@ -22,8 +28,84 @@ export default {
     fields: {
       type: Array,
       default: () => {
-        return ['username', 'name', 'email', 'groups', 'mfa_level', 'source', 'role', 'date_expired', 'phone', 'wechat', 'comment']
+        return []
       }
+    },
+    fieldsMeta: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      meta: {},
+      totalFields: [],
+      loading: true
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.optionUrlMeta()
+  },
+  methods: {
+    optionUrlMeta() {
+      optionUrlMeta(this.url).then(data => {
+        this.meta = data.actions[this.method.toUpperCase()] || {}
+        this.generateFields()
+        this.loading = false
+      })
+    },
+    generateField(name) {
+      let field = {}
+      const fieldMeta = this.meta[name] || {}
+      field.id = name
+      field.label = fieldMeta.label
+
+      let type = 'input'
+      switch (fieldMeta.type) {
+        case 'choice':
+          type = 'radio-group'
+          field.options = fieldMeta.choices.map(v => {
+            return { label: v.display_name, value: v.value }
+          })
+          break
+        case 'datetime':
+          type = 'date-picker'
+          field.el = {
+            type: 'datetime'
+          }
+          break
+        case 'field':
+          type = ''
+          field.component = Select2
+          break
+        default:
+          type = 'input'
+          break
+      }
+      field.type = type
+      if (fieldMeta.required) {
+        if (type === 'input') {
+          field.rules = [rules.Required]
+        } else {
+          field.rules = [rules.RequiredChange]
+        }
+      }
+      field = Object.assign(field, this.fieldsMeta[name] || {})
+      return field
+    },
+    generateFields() {
+      const fields = []
+      for (let field of this.fields) {
+        if (typeof field === 'object') {
+          fields.push(field)
+        } else if (typeof field === 'string') {
+          field = this.generateField(field)
+          fields.push(field)
+        }
+      }
+      this.totalFields = fields
     }
   }
 }

src/i18n/langs/cn.js

@@ -90,7 +90,8 @@ const cn = {
     'OperateLog': '操作日志',
     'PasswordChangeLog': '改密日志',
     'Settings': '系统设置',
-    'UserCreate': '创建用户'
+    'UserCreate': '创建用户',
+    'UserGroupCreate': '创建用户组'
   },
   // 用户模块翻译
   users: {

src/router/index.js

@@ -99,19 +99,19 @@ export const constantRoutes = [
         hidden: true,
         meta: { title: 'UserGroupUpdate' }
       },
-      {
-        path: 'groups/:id',
-        component: () => import('@/views/users/UserGroupDetail/index.vue'), // Parent router-view
-        name: 'UserGroupDetail',
-        hidden: true,
-        meta: { title: 'UserGroupDetail', activeMenu: '/users/groups' }
-      },
       {
         path: 'groups/create',
         component: () => import('@/views/users/UserCreateUpdate.vue'), // Parent router-view
         name: 'UserGroupCreate',
         hidden: true,
         meta: { title: 'UserGroupCreate' }
+      },
+      {
+        path: 'groups/:id',
+        component: () => import('@/views/users/UserGroupDetail/index.vue'), // Parent router-view
+        name: 'UserGroupDetail',
+        hidden: true,
+        meta: { title: 'UserGroupDetail', activeMenu: '/users/groups' }
       }
     ]
   },

src/views/users/UserCreateUpdate.vue

@@ -1,12 +1,12 @@
 <template>
   <Page>
     <IBox>
-      <DataForm :form="form" :fields="fields">
+      <AutoDataForm :form="form" :fields="fields" :fields-meta="fieldsMeta">
         <FormGroupHeader slot="id:name" title="账户" :line="false" />
-        <FormGroupHeader slot="id:passwordrule" title="认证" :line="true" />
+        <FormGroupHeader slot="id:password_strategy" title="认证" :line="true" />
         <FormGroupHeader slot="id:role" title="角色安全" :line="true" />
         <FormGroupHeader slot="id:phone" title="认证" :line="true" />
-      </DataForm>
+      </AutoDataForm>
     </IBox>
   </Page>
 </template>
@@ -16,227 +16,62 @@
 import FormGroupHeader from '@/components/formGroupHeader'
 import { Page, IBox } from '@/layout/components'
 import DataForm from '@/components/DataForm'
-import rules from '@/components/DataForm/rules'
+import AutoDataForm from '@/components/AutoDataForm'
 import Select2 from '@/components/Select2'
-import { optionUrlMeta } from '@/api/common'
 export default {
   components: {
     Page,
     IBox,
     DataForm,
     Select2,
-    FormGroupHeader
+    FormGroupHeader,
+    AutoDataForm
   },
   data() {
     return {
       form: {
-        passwordrule: '1',
+        password_strategy: 0,
         mfa_level: 0,
-        source: 'local',
+        source: 'ldap',
         role: 'Admin',
         date_expired: '2099-12-31 00:00:00 +0800'
       },
       fields: [
-        {
+        'name', 'username', 'email', 'groups', 'password_strategy', 'password', 'mfa_level',
-          type: 'input',
+        'source', 'role', 'date_expired', 'phone', 'wechat', 'comment'
-          id: 'name',
+      ],
-          label: this.$t('users.name'),
+      fieldsMeta: {
-          el: {
+        password: {
-          },
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          type: 'input',
-          id: 'username',
-          label: this.$t('users.username'),
-          el: {
-          },
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          id: 'email',
-          type: 'input',
-          label: this.$t('users.email'),
-          el: {
-          },
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          id: 'groups',
-          label: '用户组',
-          el: {
-            placeholder: '添加到用户组',
-            value: [],
-            url: '/api/v1/users/groups/'
-          },
-          // 自定义组件
-          // 可以取到自定义组件的值
-          // https://femessage.github.io/el-form-renderer/#/Guide?id=guide-custom-component
-          component: Select2
-        }, {
-          type: 'radio-group',
-          id: 'password_strategy',
-          label: this.$t('users.Password strategy'),
           el: {
+            type: 'password'
           },
           hidden: (formValue, item) => {
-            return this.$route.params.id
+            console.log('hidden password', formValue.password_strategy)
-          },
-          options: [{
-            label: '生成重置密码链接，通过邮件发送给用户',
-            value: '0'
-          }, {
-            label: '设置密码',
-            value: '1'
-          }],
-          rules: [
-            { required: true, message: 'miss resource', trigger: 'change' }
-          ]
-        }, {
-          type: 'input',
-          id: 'password',
-          label: '密码',
-          hidden: (formValue, item) => {
             if (this.$route.params.id === undefined) {
-              return (formValue.passwordrule !== '2')
+              return formValue.password_strategy !== 1
             } else {
               return true
             }
-          },
-          el: {
-            type: 'password'
           }
         },
-        {
+        email: {
-          type: 'input',
-          id: 'sshkey',
-          label: 'ssh公钥',
-          hidden: (formValue, item) => {
-            return !this.$route.params.id
-          },
           el: {
-            placeholder: 'ssh-rsa AAAA...',
+            type: 'email'
-            type: 'textarea',
-            rows: 3
           }
         },
-        {
+        groups: {
-          type: 'radio-group',
-          id: 'mfa_level',
-          label: '多因子认证',
-          el: {
-          },
-          size: 0,
-          options: [
-            {
-              label: '禁用',
-              value: 0
-            },
-            {
-              label: '启用',
-              value: 1
-            },
-            {
-              label: '强制启用',
-              value: 2
-            }
-          ],
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          type: 'select',
-          id: 'source',
-          label: '来源',
-          el: {
-          },
-          default: '数据库',
-          options: [
-            {
-              label: '数据库',
-              value: 'local'
-            }
-          ],
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          id: 'role',
-          type: 'select',
-          label: '角色',
-          el: {
-          },
-          default: 'User',
-          options: [
-            {
-              label: '管理员',
-              value: 'Admin'
-            },
-            {
-              label: '用户',
-              value: 'User'
-            },
-            {
-              label: '审计员',
-              value: 'Auditor'
-            }
-          ],
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          id: 'date_expired',
-          type: 'date-picker',
-          label: '过期时间',
-          el: {
-            type: 'datetime',
-            placeholder: 'select date'
-          },
-          rules: [
-            rules.Required
-          ]
-        },
-        {
-          id: 'phone',
-          type: 'input',
-          label: '手机',
           el: {
+            value: [],
+            url: '/api/v1/users/groups/'
           }
         },
-        {
+        comment: {
-          id: 'wechat',
-          type: 'input',
-          label: '微信',
           el: {
-          }
+            type: 'textarea'
-        },
-        {
-          id: 'comment',
-          type: 'input',
-          label: '备注',
-          el: {
-            type: 'textarea',
-            row: '4'
           }
         }
-      ]
-    }
-  },
-  mounted() {
-    optionUrlMeta('/api/v1/users/users/').then(
-      meta => {
-        console.log(meta)
       }
-    )
+    }
   },
   methods: {
     debug() {