110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
||
<a-modal :visible="visible" title="命名空间配置" @ok="handleOk" @cancel="visible = false" width="650px">
|
||
<a-form @submit="handleOk" :form="form" :body-style="{padding: '24px 32px'}" v-bind="formItemLayout" >
|
||
<a-form-item>
|
||
<a-input
|
||
hidden
|
||
v-decorator="['id']" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
label="唯一标识(默认UUID)">
|
||
<a-input
|
||
placeholder="唯一标识"
|
||
:disabled="isEdit"
|
||
v-decorator="[
|
||
'uniqueId',
|
||
{rules: [{ required: false, message: '请输入空间名称', whitespace: true},{required: false, max: 64, message: '最多支持64个字符！'}, {validator: validate, trigger: ['change', 'blur']}]}
|
||
]" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
label="空间名称">
|
||
<a-input
|
||
placeholder="请输入空间名称"
|
||
v-decorator="[
|
||
'name',
|
||
{rules: [{ required: true, message: '请输入空间名称', whitespace: true}]}
|
||
]" />
|
||
</a-form-item>
|
||
</a-form></a-modal>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { addNamespace, updateNamespace } from '@/api/manage'
|
||
import pick from 'lodash.pick'
|
||
|
||
export default {
|
||
name: 'NamespaceForm',
|
||
props: {
|
||
isEdit: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
form: this.$form.createForm(this),
|
||
role: 0,
|
||
formType: 'create',
|
||
formItemLayout: {
|
||
labelCol: { lg: { span: 7 }, sm: { span: 7 } },
|
||
wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
|
||
},
|
||
visible: false
|
||
}
|
||
},
|
||
methods: {
|
||
isShow (record) {
|
||
this.formType = record ? 'edit' : 'create'
|
||
this.loadEditInfo(record)
|
||
this.visible = true
|
||
this.form.resetFields()
|
||
},
|
||
validate (rule, value, callback) {
|
||
const regex = /^[A-Za-z0-9_]+$/
|
||
if (!regex.test(value)) {
|
||
callback(new Error('仅支持数字字母下划线'))
|
||
}
|
||
callback()
|
||
},
|
||
handleOk (e) {
|
||
e.preventDefault()
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
if (!this.isEdit) {
|
||
addNamespace(values).then(res => {
|
||
this.$message.success('操作成功')
|
||
this.$emit('refreshTable', 1)
|
||
this.visible = false
|
||
})
|
||
} else {
|
||
updateNamespace(values).then(res => {
|
||
this.$message.success('操作成功')
|
||
this.$emit('refreshTable', 1)
|
||
this.visible = false
|
||
})
|
||
}
|
||
|
||
this.$store.dispatch('GetInfo')
|
||
}
|
||
})
|
||
},
|
||
loadEditInfo (data) {
|
||
this.formType = 'edit'
|
||
const { form } = this
|
||
// ajax
|
||
new Promise((resolve) => {
|
||
setTimeout(resolve, 100)
|
||
}).then(() => {
|
||
const formData = pick(data, ['id', 'name', 'uniqueId'])
|
||
form.setFieldsValue(formData)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|