mirror of
https://github.com/jumpserver/lina.git
synced 2025-07-31 06:42:26 +00:00
[Update] 修改自动创建的表单
This commit is contained in:
ibuler
parent
74041fd72e
commit
b6526c6989
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,7 +90,8 @@ const cn = {
|
||||
'OperateLog': '操作日志',
|
||||
'PasswordChangeLog': '改密日志',
|
||||
'Settings': '系统设置',
|
||||
'UserCreate': '创建用户'
|
||||
'UserCreate': '创建用户',
|
||||
'UserGroupCreate': '创建用户组'
|
||||
},
|
||||
// 用户模块翻译
|
||||
users: {
|
||||
|
||||
@ -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' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -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: [
|
||||
{
|
||||
type: 'input',
|
||||
id: 'name',
|
||||
label: this.$t('users.name'),
|
||||
el: {
|
||||
},
|
||||
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'),
|
||||
'name', 'username', 'email', 'groups', 'password_strategy', 'password', 'mfa_level',
|
||||
'source', 'role', 'date_expired', 'phone', 'wechat', 'comment'
|
||||
],
|
||||
fieldsMeta: {
|
||||
password: {
|
||||
el: {
|
||||
type: 'password'
|
||||
},
|
||||
hidden: (formValue, item) => {
|
||||
return this.$route.params.id
|
||||
},
|
||||
options: [{
|
||||
label: '生成重置密码链接，通过邮件发送给用户',
|
||||
value: '0'
|
||||
}, {
|
||||
label: '设置密码',
|
||||
value: '1'
|
||||
}],
|
||||
rules: [
|
||||
{ required: true, message: 'miss resource', trigger: 'change' }
|
||||
]
|
||||
}, {
|
||||
type: 'input',
|
||||
id: 'password',
|
||||
label: '密码',
|
||||
hidden: (formValue, item) => {
|
||||
console.log('hidden password', formValue.password_strategy)
|
||||
if (this.$route.params.id === undefined) {
|
||||
return (formValue.passwordrule !== '2')
|
||||
return formValue.password_strategy !== 1
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
el: {
|
||||
type: 'password'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
id: 'sshkey',
|
||||
label: 'ssh公钥',
|
||||
hidden: (formValue, item) => {
|
||||
return !this.$route.params.id
|
||||
},
|
||||
email: {
|
||||
el: {
|
||||
placeholder: 'ssh-rsa AAAA...',
|
||||
type: 'textarea',
|
||||
rows: 3
|
||||
type: 'email'
|
||||
}
|
||||
},
|
||||
{
|
||||
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: '手机',
|
||||
groups: {
|
||||
el: {
|
||||
value: [],
|
||||
url: '/api/v1/users/groups/'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'wechat',
|
||||
type: 'input',
|
||||
label: '微信',
|
||||
comment: {
|
||||
el: {
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'comment',
|
||||
type: 'input',
|
||||
label: '备注',
|
||||
el: {
|
||||
type: 'textarea',
|
||||
row: '4'
|
||||
type: 'textarea'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
optionUrlMeta('/api/v1/users/users/').then(
|
||||
meta => {
|
||||
console.log(meta)
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
debug() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user