The Modal dialog in Vue2 calls the FormModel form

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! j_0012.gif

image.png

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:

image.png

image.png

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.

Leave a Comment

Your email address will not be published.