Original link: https://chegva.com/5379.html
Today, I used the Modal dialog to call the FormModel form and couldn’t get the data of the form. I thought it was a problem with the dialog box. The log output can’t get form data, and no error is reported. It’s really vomiting blood! 
First look at the use of the Modal dialog box, and encapsulate it for convenience.
<template> <div> <a-modal :zIndex="config.zIndex || 1001" :width="config.width || 520" :title="config.title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="close" class="xm-modal" :footer="config.hideFooter ? null : undefined" > <a-skeleton active v-if="contentLoading" /> <slot v-else></slot> </a-modal> </div> </template> <script> export default { props: { config: { type: Object, required: true, }, }, data() { return { confirmLoading: false, contentLoading: false, visible: false, }; }, watch: { visible() { if (this.visible) { this.handleOpen(); } } }, methods: { show() { this.visible = true; }, close() { this.visible = false; if (this.config.onClose) this.config.onClose(); }, async handleOk() { try { this.confirmLoading = true; if (this.config.onConfirm) await this.config.onConfirm(); this.close(); this.confirmLoading = false; } catch (error) { console.error(error); this.confirmLoading = false; } }, async handleOpen() { this.contentLoading = true; if (this.config.onOpen) await this.config.onOpen(); this.contentLoading = false; }, }, }; </script> <style scoped> .xm-modal { .ant-modal-body { padding: 15px; } } </style>
Then directly call the custom FormModel form in Modal, [zkqw]
// Click the link <a style="margin-right: 6px" @click="addTaskProgress(record)"> <a-icon type="profile" />Progress</a> <!-- Model calls custom FormModel form --> <xm-modal ref="taskProgressRef" :config="taskProgressConfig"> <a-form-model ref="frm" :model="taskProgressModel" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"> <a-form-model-item class="mb12" ref="progress" label="progress" :style="{ display: 'inline-block', width: 'calc(30% - 5px)', marginLeft: '24px' }"> <a-input-number v-model="taskProgressModel.progress" style="width: 60%; margin-left: 4px;" :default-value="0" :step="5" :min="0" :max="100" :formatter="value => `${value}%`" :parser="value => value.replace('%', '' )" /> </a-form-model-item> <a-form-model-item class="mb12" ref="risk" label="risk index" :style="{ display: 'inline-block', width: 'calc(70% - 12px)', marginLeft: '-40px' }"> <a-radio-group style="width: 100%" v-model="taskProgressModel.risk"> <a-radio value="1"> No risk </a-radio> <a-radio value="2"> Medium risk </a-radio> <a-radio value="3"> High Risk </a-radio> </a-radio-group> </a-form-model-item> <a-form-model-item class="mb12" ref="expend" label="expend" :style="{ display: 'inline-block', width: 'calc(50% - 5px)' }"> <a-input-number :min="1" :max="100" v-model="taskProgressModel.expend" style="width: 85%" /> </a-form-model-item> <a-form-model-item class="mb12" ref="remain" label="remaining" prop="remain" :style="{ display: 'inline-block', width: 'calc(50% - 12px)', marginLeft: '-24px' }"> <a-input suffix='hour' disabled v-model="taskProgressModel.remain" style="width: 85%" /> </a-form-model-item> <a-form-model-item class="mb12" ref="desc" label="Progress description" labelAlign="left" :label-col="{ span: 3 }"> <a-textarea v-model="taskProgressModel.desc" style="{ width: 100%; minWidth: 160px;}" :autoSize="{ minRows: 6, maxRows: 24 }" /> </a-form-model-item> <xm-center class="mb28"> <xm-btn type="primary" @click.native="handleProgressSubmit">Save</xm-btn> <xm-btn style="margin-left: 16px" @click.native="resetProgressForm" ghost>Cancel</xm-btn> </xm-center> </a-form-model> </xm-modal> // mock data <script> import moment from 'moment'; import { XmTable } from '~comp'; export default { components: { XmTable, }, data() { return { // Add progress popup data taskProgressModel: { progress: '', risk: [], expand: '', remain: '', desc: '', }, taskProgressConfig: { title: "Add progress", // hideFooter: true, width: "600px", onOpen: () => { // Data can be initialized here console.log("modal is opened"); }, onClose: () => { // Clear the form this.taskProgressModel = this.$options.data.call(this).taskProgressModel; this.$refs.frm.resetFields(); console.log("modal is closed"); }, }, }; }, methods: { // Add task progress addTaskProgress(row) { console.log(row); this.taskProgressModel.expend = row.elapsedTime; this.taskProgressModel.remain = row.remainingTime; this.$refs.taskProgressRef.show(); console.log(this.taskProgressModel); }, handleProgressSubmit() { console.log(this.taskProgressModel); this.$ms("Add progress successfully") this.taskProgressModel = this.$options.data.call(this).taskProgressModel; this.$refs.frm.resetFields(); this.$refs.taskProgressRef.close(); }, resetProgressForm() { this.taskProgressModel = this.$options.data.call(this).taskProgressModel; this.$refs.frm.resetFields(); this.$refs.taskProgressRef.close(); } } }; </script>
Check the effect:
refer to:
[/zkqw]
This article is reprinted from: https://chegva.com/5379.html
This site is for inclusion only, and the copyright belongs to the original author.