<template>
|
<div>
|
<a-form :form="form" @submit="handleSubmit">
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="规则编号"
|
hasFeedback
|
validateStatus="success"
|
>
|
<a-input
|
placeholder="规则编号"
|
v-decorator="[
|
'no',
|
{rules: [{ required: true, message: '请输入规则编号' }]}
|
]"
|
:disabled="true"
|
></a-input>
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="服务调用次数"
|
hasFeedback
|
validateStatus="success"
|
>
|
<a-input-number :min="1" style="width: 100%" v-decorator="['callNo', {rules: [{ required: true }]}]" />
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="状态"
|
hasFeedback
|
validateStatus="warning"
|
>
|
<a-select v-decorator="['status', {rules: [{ required: true, message: '请选择状态' }], initialValue: '1'}]">
|
<a-select-option :value="1">Option 1</a-select-option>
|
<a-select-option :value="2">Option 2</a-select-option>
|
<a-select-option :value="3">Option 3</a-select-option>
|
</a-select>
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="描述"
|
hasFeedback
|
help="请填写一段描述"
|
>
|
<a-textarea :rows="5" placeholder="..." v-decorator="['description', {rules: [{ required: true }]}]" />
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="更新时间"
|
hasFeedback
|
validateStatus="error"
|
>
|
<a-date-picker
|
style="width: 100%"
|
showTime
|
format="YYYY-MM-DD HH:mm:ss"
|
placeholder="Select Time"
|
v-decorator="['updatedAt']"
|
/>
|
</a-form-item>
|
|
<a-form-item
|
v-bind="buttonCol"
|
>
|
<a-row>
|
<a-col span="6">
|
<a-button type="primary" html-type="submit">提交</a-button>
|
</a-col>
|
<a-col span="10">
|
<a-button @click="handleGoBack">返回</a-button>
|
</a-col>
|
<a-col span="8"></a-col>
|
</a-row>
|
</a-form-item>
|
</a-form>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import pick from 'lodash.pick'
|
|
export default {
|
name: 'TableEdit',
|
props: {
|
record: {
|
type: [Object, String],
|
default: ''
|
}
|
},
|
data () {
|
return {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 12 }
|
},
|
buttonCol: {
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 12, offset: 5 }
|
}
|
},
|
form: this.$form.createForm(this),
|
id: 0
|
}
|
},
|
// beforeCreate () {
|
// this.form = this.$form.createForm(this)
|
// },
|
mounted () {
|
this.$nextTick(() => {
|
this.loadEditInfo(this.record)
|
})
|
},
|
methods: {
|
handleGoBack () {
|
this.$emit('onGoBack')
|
},
|
handleSubmit () {
|
const { form: { validateFields } } = this
|
validateFields((err, values) => {
|
if (!err) {
|
// eslint-disable-next-line no-console
|
console.log('Received values of form: ', values)
|
}
|
})
|
},
|
handleGetInfo () {
|
|
},
|
loadEditInfo (data) {
|
const { form } = this
|
// ajax
|
console.log(`将加载 ${this.id} 信息到表单`)
|
new Promise((resolve) => {
|
setTimeout(resolve, 1500)
|
}).then(() => {
|
const formData = pick(data, ['no', 'callNo', 'status', 'description', 'updatedAt'])
|
formData.updatedAt = moment(data.updatedAt)
|
console.log('formData', formData)
|
form.setFieldsValue(formData)
|
})
|
}
|
}
|
}
|
</script>
|
