<template> <div> <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancel="cancel"> <a-form :form="form" id="codeItemModal-form" @submit="handleSubmit"> <a-row :gutter="24"> <a-col :span="24"> <!-- code --> <a-form-item label="字典码" id="codeItemModal-lookupCode" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"> <a-input disabled placeholder="" v-decorator="['formData.lookupCode', { initialValue: formData.lookupCode, rules: [] }]" /> </a-form-item> </a-col> </a-row> <a-row :gutter="24"> <a-col :span="12" style="padding-right: 0px;"> <!-- 名称 --> <a-form-item label="名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-dispName" placeholder="请输入名称(最多30个字符)" :maxLength="30" v-decorator="['formData.dispName', { initialValue: formData.dispName, rules: [{ required: true, message: '请输入名称!' }] }]" /> </a-form-item> </a-col> <a-col :span="12"> <!-- 项编码 --> <a-form-item label="项编码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-code" placeholder="请输入项编码" v-decorator="['formData.code', { initialValue: formData.code, rules: [{ required: true, message: '请输入项编码!' }] }]" /> </a-form-item> </a-col> </a-row> <a-row :gutter="24"> <a-col :span="12" style="padding-right: 0px;"> <a-form-item label="启用" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-radio-group id="codeItemModal-isEnable" name="radioGroup" v-decorator="[ 'formData.isEnable', { initialValue: formData.isEnable, rules: [] }, ]" > <a-radio :value="1" id="codeItemModal-isEnable1">是</a-radio> <a-radio :value="0" id="codeItemModal-isEnable0">否</a-radio> </a-radio-group> </a-form-item> </a-col> <!-- 排序值 --> <a-col :span="12"> <a-form-item label="排序值" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input-number id="codeItemModal-sort" style="width: 100%;" placeholder="请输入排序值(0~999999)" v-decorator="['formData.sort', { initialValue: formData.sort, rules: [{ required: true, message: '请输入排序值!' }] }]" :max="999999" :min="0" /> </a-form-item> </a-col> </a-row> <!-- 扩展参数 --> <a-row :gutter="24"> <a-col :span="12" style="padding-right: 0px;"> <!-- 扩展一 --> <a-form-item label="扩展一" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-attr1" placeholder="" v-decorator="['formData.attr1', { initialValue: formData.attr1, rules: [] }]" /> </a-form-item> </a-col> <a-col :span="12"> <!-- 扩展二 --> <a-form-item label="扩展二" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input placeholder="" id="codeItemModal-attr2" v-decorator="['formData.attr2', { initialValue: formData.attr2, rules: [] }]" /> </a-form-item> </a-col> <a-col :span="12" style="padding-right: 0px;"> <!-- 扩展三 --> <a-form-item label="扩展三" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-attr3" placeholder="" v-decorator="['formData.attr3', { initialValue: formData.attr3, rules: [] }]" /> </a-form-item> </a-col> <a-col :span="12"> <!-- 扩展四 --> <a-form-item label="扩展四" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-attr4" placeholder="" v-decorator="['formData.attr4', { initialValue: formData.attr4, rules: [] }]" /> </a-form-item> </a-col> <a-col :span="12" style="padding-right: 0px;"> <!-- 扩展五 --> <a-form-item label="扩展五" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-attr5" placeholder="" v-decorator="['formData.attr5', { initialValue: formData.attr5, rules: [] }]" /> </a-form-item> </a-col> <a-col :span="12"> <!-- 扩展六 --> <a-form-item label="扩展六" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-input id="codeItemModal-attr6" placeholder="" v-decorator="['formData.attr6', { initialValue: formData.attr6, rules: [] }]" /> </a-form-item> </a-col> </a-row> <a-row :gutter="24"> <a-col :span="24"> <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"> <a-textarea id="codeItemModal-remarks" v-decorator="[ 'formData.remarks', { initialValue: formData.remarks, rules: [] }, ]" :maxLength="500" style="min-height: 60px;" placeholder="最多500字符" autosize /> </a-form-item> </a-col> </a-row> <a-form-item :wrapper-col="{ span: 12, offset: 5 }"> <a-button id="codeItemModal-save-btn" type="primary" @click="handleSubmit()"> 保存 </a-button> <a-button id="codeItemModal-cancel-btn" :style="{ marginLeft: '8px' }" @click="handleCancel()"> 取消 </a-button> </a-form-item> </a-form> </a-modal> </div> </template> <script> // 组件 import { STable, VSelect } from '@/components' // 接口 import { saveLookUpItem } from '@/api/lookup.js' export default { name: 'CodeItemModal', components: { STable, VSelect }, props: { visible: { type: Boolean, default: false }, data: { type: Object, default: function () { return {} } } }, data () { return { titleText: '添加字典项', // 弹窗标题 isshow: this.visible, // 打开关闭弹窗 formLayout: 'horizontal', // form设置 form: this.$form.createForm(this, { name: 'miniForm' }), roleList: [], // 列表数据 // 提交参数 formData: { lookupCode: '', // 字典码 code: '', // code dispName: '', isEnable: 1, // 活动状态 sort: '', // 排序 attr1: '', // 扩展1 attr2: '', // 扩展2 attr3: '', // 扩展3 attr4: '', // 扩展4 attr5: '', // 扩展5 attr6: '', // 扩展6 remarks: ''// 备注 } } }, methods: { // 关闭 cancel (e) { this.clear() this.$emit('close') }, // 保存提交 handleSubmit () { const _this = this this.form.validateFields((err, values) => { console.log(values, 'values222') if (!err) { console.log(values.formData, ' formData.type222222222') saveLookUpItem(Object.assign(this.formData, values.formData)).then(res => { console.log(res, 'res--save') if (res.status + '' === '200') { this.$message.success(res.message) this.$emit('refresh') setTimeout(function () { _this.cancel() }, 300) } else { // this.$message.error(res.message) } }) } }) }, // 取消 handleCancel () { const _this = this this.$confirm({ title: '提示', content: '确定取消吗?', okText: '确定', cancelText: '取消', onOk () { _this.clear() _this.cancel() } }) }, // 重置 clear () { this.form.resetFields() delete this.formData.id this.formData.lookupCode = '' this.formData.code = '' this.formData.dispName = '' this.formData.isEnable = 1 this.formData.sort = '' this.formData.attr1 = '' this.formData.attr2 = '' this.formData.attr3 = '' this.formData.attr4 = '' this.formData.attr5 = '' this.formData.attr6 = '' this.formData.remarks = '' } }, beforeCreate () { this.form = this.$form.createForm(this, { name: 'miniForm' }) }, watch: { visible (newValue, oldValue) { this.isshow = newValue }, isshow (newValue, oldValue) { if (newValue) { if (this.data.id) { // 编辑 this.titleText = '编辑字典项' this.formData = Object.assign({}, this.data) delete this.formData.no this.formData.isEnable = Number(this.formData.isEnable) console.log(this.formData, 'this.formData') } else { this.formData.lookupCode = this.data.lookupCode this.titleText = '添加字典项' } } else { this.cancel() } } } } </script> <style > .modalBox{ width: 650px !important; } .ant-modal-footer { display: none; } </style>