<template> <div> <Modal v-model="modal_visible" :title="context.moadlTitle" @on-cancel="handleCancel" :closable="true" :mask-closable="false" width="960" @on-visible-change="onVisibleChange"> <Form ref="subTableEntity" :model="subTableEntity" :rules="ruleValidate" :label-width="130"> <Row :gutter="24"> <Col span="12" v-for="(item,index) in context.tableColnum" :key="index"> <FormItem :label="item.title" prop="commonName" class="required-edit"> <component :is="item.control" :id="index" :define="item.define" :key="index" :context="context"></component> </FormItem> </Col> </Row> </Form> <div slot="footer"> <Button @click="handleCancel">取消</Button> <Button @click="handleAddAssetsSave" v-if="!isEdit">添加</Button> <Button @click="handleAddAssetsSave" v-if="isEdit">确定</Button> <Button @click="handleSaveAndNext" type="primary">继续添加</Button> </div> </Modal> </div> </template> <script> export default { props: { readOnly: { type: Boolean, default: false }, context: { type: Object } }, data() { return { isEdit: '', ruleValidate: { }, modal_visible: true, subTableEntity: {}, detailItem: null, currentRow: null, } }, watch: { }, methods: { handleCancel() { this.modal_visible = false; }, onVisibleChange() {}, handleSaveAndNext() { let detailItem=this.context.detailItem; this.context.tableColnum.forEach(a => { let b = a.field.split(".")[1]; this.subTableEntity[b] = this.context.dataObject.getValue(a.field); }) this.$refs['subTableEntity'].validate((valid) => { if (valid) { let obj = JSON.parse(JSON.stringify(this.subTableEntity)); if (this.isEdit) { this.context.refreshSubDataByIndex(detailItem, obj, this.context.getCurrentIndex()); this.isEdit = false; } else { this.context.addSubTableRow(detailItem); this.context.refreshSubDataByIndex(detailItem, obj, this.context.getSubTableLength(detailItem) - 1); } this.$refs["subTableEntity"].resetFields(); } }) }, handleAddAssetsSave() { let detailItem=this.context.detailItem; this.context.tableColnum.forEach(a => { let subTableEntity = a.field.split(".")[0]; let b = a.field.split(".")[1]; this.subTableEntity[b] = this.context.dataObject.getValue(a.field); }) this.$refs['subTableEntity'].validate(function(valid) { if (valid) { console.log('subTableEntity',this.context.actionParam,detailItem,this.context.actionParam.param.masterSubRelation[detailItem]); if (this.isEdit) { this.context.refreshSubDataByIndex(detailItem, this.subTableEntity, this.context.getCurrentIndex()); this.isEdit = false; } else { // 点击保存先去新建一行然后去将弹窗页面的数据跟新到新建的这一行中 if (Object.keys(this.currentRow).length == 0) { this.context.addSubTableRow(detailItem); } this.context.refreshSubDataByIndex(detailItem, this.subTableEntity, this.context.getSubTableLength( detailItem) ? this.context.getSubTableLength(detailItem) - 1 : 0); } this.modal_visible = false; } }.bind(this)); }, }, mounted() { this.context.initModal(); this.context.dataObject = this.context.bill.getMasterData(); this.currentRow = this.context.getCurrentRowData(this.context.detailItem); if (this.currentRow) { for (let s in this.currentRow) { this.context.dataObject.setValue(s, this.currentRow[s]); } } this.isEdit = this.context.getSubTableStatus(); if (this.isEdit) { this.subTableEntity = this.context.getRowDataByIndex(this.context.detailItem, this.context.getCurrentIndex()); } } } </script> <style scoped lang="less"> .inputSize { width: 100%; } /deep/.required-edit { /deep/.ivu-form-item-label:before { content: '*'; display: inline-block; margin-right: 4px; line-height: 1; font-family: SimSun; font-size: 12px; color: #ED664B; } } </style>