<template> <div> <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="600"> <a-form :form="form" ref="form" @submit="handleSubmit"> <a-row :gutter="24"> <a-col :span="20"> <!-- 考评指标名称 --> <a-form-item label="考评指标名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"> <a-input allowClear id="addEvaIndexModal-name" :maxLength="128" v-decorator="[ 'formData.name', { initialValue: formData.name, rules: [{ required: true, message: '请输入考评指标名称!' }] }, ]" placeholder="请输入考评指标名称" /> </a-form-item> </a-col> </a-row> <a-form-item :wrapper-col="{ span: 24, offset: 10 }"> <a-button :loading="loading" id="addEvaIndexModal-submit" type="primary" @click="handleSubmit()"> 确定 </a-button> <a-button id="addEvaIndexModal-cancel" :style="{ marginLeft: '8px' }" @click="handleCancel()"> 取消 </a-button> </a-form-item> </a-form> </a-modal> </div> </template> <script> import { itemIndexSave, itemIndexDetail } from '@/api/evaluationItem.js' export default { name: 'AddEvaIndexModal', props: { visible: { type: Boolean, default: false }, // 关联的考评项id itemId: { type: [String, Number], default: '' }, // 要编辑的考评指标id itemIndexId: { type: [String, Number], default: '' } }, watch: { visible (newValue, oldValue) { this.isshow = newValue }, isshow (newValue, oldValue) { if (newValue) { // 编辑 查数据 if (this.itemIndexId) { this.getData(this.itemIndexId) } } else { this.cancel() } } }, data () { return { isshow: this.visible, // 弹框显示隐藏 form: this.$form.createForm(this, { name: 'AddEvaIndexModal' }), formData: { name: '' // 指标名称 }, loading: false // 确定按钮loading } }, computed: { // 弹框标题 titleText () { return this.itemId ? '编辑' : '新增' } }, methods: { // 点击弹框x号触发事件 cancel (e) { this.clear() this.$emit('close') }, // 编辑时,获取数据详情 getData (id) { itemIndexDetail({ id: id }).then(res => { if (res.status == 200) { // console.log(res, 'rrrrrrrrrr') this.form.setFieldsValue({ 'formData.name': res.data.name }) } }) }, // 保存提交 handleSubmit () { const _this = this this.form.validateFields((err, values) => { if (!err) { this.loading = true const params = this.itemIndexId ? Object.assign({ assessItemId: this.itemId, id: this.itemIndexId }, values.formData) : Object.assign({ assessItemId: this.itemId }, values.formData) // console.log(params, 'ppppppppppppp') itemIndexSave(params).then(res => { console.log(res, 'res--save') if (res.status + '' === '200') { this.$message.success(res.message ? res.message : '保存成功') this.$emit('refresh') setTimeout(function () { _this.cancel() }, 300) } else { // this.$message.warning(res.message) } this.loading = false }) } }) }, // 取消 handleCancel () { const _this = this this.$confirm({ title: '提示', content: '确定取消吗?', okText: '确定', cancelText: '取消', onOk () { _this.clear() _this.cancel() } }) }, clear () { this.form.resetFields() } }, beforeCreate () { this.form = this.$form.createForm(this, { name: 'AddEvaIndexModal' }) } } </script> <style scoped> .modalBox {} .ant-modal-footer { display: none; } .time-text { color: #1890FF; padding: 0px 20px; cursor: pointer; } .labelT { position: absolute; left: -135px; top: 20px; color: rgba(0, 0, 0, 0.85); } </style>