update 子表单弹出框

src/business/platform/form/formrender/dialog.vue

@@ -1,49 +1,10 @@
 <template>
-  <el-dialog
-    ref="dialog"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    class="form-renderer-dialog"
-    :width="width"
-    :top="top"
-    :title="title"
-    :custom-class="customClass"
-    append-to-body
-    @open="loadFormData"
-    @close="closeDialog"
-  >
-    <ibps-formrender
-      v-if="dialogVisible && formDef"
-      ref="formrender"
-      :form-def="formDefData"
-      :data="formData"
-      :isDialog="true"
-      :mode="mode"
-      @load="loadFormrender"
-      @cur-active-step="(val)=>curActiveStep=val"
-    />
-    <div slot="footer" class="el-dialog--center">
-      <template>
-        <el-button
-          v-for="button in stepButtons"
-          :key="button.key"
-          :size="button.size||$ELEMENT.size"
-          :icon="'ibps-icon-'+button.icon"
-          :autofocus="false"
-          :disabled="disabledStepButton(button.key)"
-          :loading="stepLoading"
-          @click="()=>{ handleStepButtonEvent(button)}"
-        >{{ button.label }}
-        </el-button>
-        <span class="ibps-pr-10">&nbsp;</span>
-      </template>
-
-      <ibps-toolbar
-        :actions="toolbars"
-        @action-event="handleActionEvent"
-      />
-    </div>
-  </el-dialog>
+    <el-dialog ref="dialog" :visible.sync="dialogVisible" :close-on-click-modal="false" class="form-renderer-dialog" :width="width" :top="top" :title="getTitle(title)" :custom-class="customClass"  append-to-body @open="loadFormData" @close="closeDialog">
+        <ibps-formrender v-if="dialogVisible && formDef" ref="formrender" :form-def="formDefData" :data="formData" :isDialog="true" :mode="mode" :readonly="editFromType == 'consult'" @load="loadFormrender" @cur-active-step="(val) => (curActiveStep = val)" />
+        <div slot="footer" class="el-dialog--center">
+            <ibps-toolbar :actions="editFromType != 'consult' ? toolbars : toolbarsConsult" @action-event="handleActionEvent" />
+        </div>
+    </el-dialog>
 </template>
 <script>
 import ActionUtils from '@/utils/action'
@@ -51,160 +12,183 @@ import Vue from 'vue'
 Vue.component('ibps-formrender', () => import('@/business/platform/form/formrender/index.vue'))
 
 export default {
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String
-    },
-    customClass: {
-      type: String
-    },
-    width: {
-      type: String,
-      default: '80%'
-    },
-    top: {
-      type: String,
-      default: '0'
-    },
-    formDef: { // 表单定义
-      type: Object
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String
+        },
+        customClass: {
+            type: String
+        },
+        width: {
+            type: String,
+            default: '80%'
+        },
+        top: {
+            type: String,
+            default: '0'
+        },
+        formDef: {
+            // 表单定义
+            type: Object
+        },
+        data: {
+            // 表单数据
+            type: Object
+        },
+        mode: {
+            // 表单模式
+            type: String
+        },
+        editFromType: {
+            type: String,
+            default: 'add'
+        }
     },
-    data: { // 表单数据
-      type: Object
+    data() {
+        return {
+            dialogVisible: this.visible,
+            formDefData: null,
+            formData: {},
+            formOpinionData: {},
+            toolbars: [
+                { key: 'confirm', label: '确定'},
+                { key: 'cancel'}
+            ],
+            // 查阅按钮
+            toolbarsConsult: [{ key: 'cancel' }],
+            stepButtons: [],
+            curActiveStep: 0,
+            stepNum: 3,
+            stepLoading: false
+        }
     },
-    mode: { // 表单模式
-      type: String
-    }
-  },
-  data() {
-    return {
-      dialogVisible: this.visible,
-      formDefData: null,
-      formData: {},
-      formOpinionData: {},
-      toolbars: [
-        { key: 'confirm', label: '确定' },
-        { key: 'cancel' }
-      ],
-      stepButtons: [],
-      curActiveStep: 0,
-      stepNum: 3,
-      stepLoading: false
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleActionEvent({ key }) {
-      switch (key) {
-        case 'confirm':
-        this.handleConfirm(key)
-          break
-        case 'cancel' :
-          this.closeDialog()
-          break
-        default:
-          break
-      }
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+            },
+            immediate: true
+        }
     },
-    handleConfirm(key) {
-      // 验证表单是否正确
-      this.validate(valid => {
-        if (valid) {
-          // 表单提交校验
-          this.formSubmitVerify((result, errorMsg) => {
-            if (!result) {
-              this.$message.closeAll()
-              return this.$message.warning(errorMsg)
+    methods: {
+        getTitle(title) {
+            let data = '添加'
+            if (this.editFromType == 'add') {
+                data = '添加'
+            } else if (this.editFromType == 'edit') {
+                data = '编辑'
+            } else if (this.editFromType == 'consult') {
+                data = '查阅'
             }
+            let titleData = title ? ' - ' : ''
+            return title + titleData + data
+        },
+        handleActionEvent({ key }) {
+            switch (key) {
+                case 'confirm':
+                    this.handleConfirm(key)
+                    break
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                default:
+                    break
+            }
+        },
+        handleConfirm(key) {
+            // 验证表单是否正确
+            this.validate((valid) => {
+                if (valid) {
+                    // 表单提交校验
+                    this.formSubmitVerify((result, errorMsg) => {
+                        if (!result) {
+                            this.$message.closeAll()
+                            return this.$message.warning(errorMsg)
+                        }
 
-            this.$emit('action-event', key, this.getFormData())
-          })
-        } else {
-          this.formErrorToast()
-        }
-      })
-    },
-    getForm() {
-      return this.$refs.formrender
-    },
-    /**
-     * 获取表单验证
-     */
-    validate(callback) {
-      this.getForm().validate((valid, invalidFields) => {
-        callback(valid, invalidFields)
-      })
-    },
-    formErrorToast() {
-      ActionUtils.saveErrorMessage()
-    },
-    // 处理表单提交验证
-    formSubmitVerify(callback) {
-      this.getForm().formSubmitVerify(callback)
-    },
-    /**
-     * 获取表单数据
-     */
-    getFormData() {
-      return this.getForm().getFormData()
-    },
+                        this.$emit('action-event', key, this.getFormData())
+                    })
+                } else {
+                    this.formErrorToast()
+                }
+            })
+        },
+        getForm() {
+            return this.$refs.formrender
+        },
+        /**
+         * 获取表单验证
+         */
+        validate(callback) {
+            this.getForm().validate((valid, invalidFields) => {
+                callback(valid, invalidFields)
+            })
+        },
+        formErrorToast() {
+            ActionUtils.saveErrorMessage()
+        },
+        // 处理表单提交验证
+        formSubmitVerify(callback) {
+            this.getForm().formSubmitVerify(callback)
+        },
+        /**
+         * 获取表单数据
+         */
+        getFormData() {
+            return this.getForm().getFormData()
+        },
 
-    // 关闭当前窗口
-    closeDialog() {
-      this.formDefData = null
-      this.formData = null
-      this.$emit('close', false)
-    },
-    loadFormData() {
-      this.formDefData = JSON.parse(JSON.stringify(this.formDef))
-      this.formData = JSON.parse(JSON.stringify(this.data))
-    },
-    loadFormrender(form) {
-      const stepButtons = form.stepButtons
-      if (this.$utils.isEmpty(stepButtons)) { return }
-      this.stepButtons = stepButtons
-      this.stepNum = form.stepNum
-    },
-    disabledStepButton(key) {
-      if (key === 'prev') {
-        return this.curActiveStep === 0
-      } else {
-        return this.stepNum - 1 === this.curActiveStep
-      }
-    },
-    handleStepButtonEvent(button) {
-      this.getForm().handleStepButtonEvent(button)
+        // 关闭当前窗口
+        closeDialog() {
+            this.formDefData = null
+            this.formData = null
+            this.$emit('close', false)
+        },
+        loadFormData() {
+            this.formDefData = JSON.parse(JSON.stringify(this.formDef))
+            this.formData = JSON.parse(JSON.stringify(this.data))
+        },
+        loadFormrender(form) {
+            const stepButtons = form.stepButtons
+            if (this.$utils.isEmpty(stepButtons)) {
+                return
+            }
+            this.stepButtons = stepButtons
+            this.stepNum = form.stepNum
+        },
+        disabledStepButton(key) {
+            if (key === 'prev') {
+                return this.curActiveStep === 0
+            } else {
+                return this.stepNum - 1 === this.curActiveStep
+            }
+        },
+        handleStepButtonEvent(button) {
+            this.getForm().handleStepButtonEvent(button)
+        }
     }
-  }
 }
 </script>
 <style lang="scss" >
-  .form-renderer-dialog{
+.form-renderer-dialog {
     .el-dialog__body {
-      padding: 10px 0 5px 0;
+        padding: 10px 0 5px 0;
     }
-    .el-dialog__headerbtn{
-      z-index: 99999;
+    .el-dialog__headerbtn {
+        z-index: 99999;
     }
     @media print {
-      .el-dialog__headerbtn {
-        display: none !important
-      }
-      .hidden-print{
-        padding: 0;
-        margin:  0;
-      }
+        .el-dialog__headerbtn {
+            display: none !important;
+        }
+        .hidden-print {
+            padding: 0;
+            margin: 0;
+        }
     }
-  }
+}
 </style>

src/business/platform/form/formrender/dynamic-form/dynamic-form-table.vue

@@ -6,10 +6,7 @@
                 <div class="panel-heading ibps-clearfix">
                     <div v-if="!formDialogVisible" class="ibps-fl dynamic-form-table__label table-tetle-style">{{ field.label }}</div>
                     <!--弹窗模式对话框-->
-                    <formrender-dialog ref="jyxtEdit" v-if="formDialogVisible" :title="field.label" :form-def="dialogFormDef" :data="dialogFormData" :mode="mode" :editFromType="editFromType" @close="deleteEdit()" @action-event="handleFormDialogActionEvent" />
                     <div v-if="toolbarButtons && toolbarButtons.length > 0" class="ibps-fr hidden-print">
-                        <!-- :visible="formDialogVisible"-->
-
                         <el-button-group>
                             <el-button v-for="(button, index) in toolbarButtons" :key="index" :type="button.type" :icon="button.icon" @click="handleActionEvent(button, index)">
                                 {{ button.label }}
@@ -23,7 +20,6 @@
                         <el-table-column v-if="field.field_options.index" type="index" :label="field.field_options.index_name ? field.field_options.index_name : '序号'" :width="field.field_options.index_width ? field.field_options.index_width : 50" />
                         <template v-for="(column, j) in displayColumns">
                             <el-table-column show-overflow-tooltip v-if="!columnHidden(column) && column.field_type != 'desc' && column.label != ''" :key="j" :prop="column.name" :width="column.field_options.custom_class || null">
-                                <!--  :width="column.field_options.is_label_width ?column.field_options.label_width + (column.field_options.label_width_unit || 'px') :null"-->
                                 <template slot="header">
                                     {{ $utils.isNotEmpty(column.field_options.units) ? column.label + '(' + column.field_options.units + ')' : column.label }}
                                     <ibps-help v-if="column && column.desc && descPosition === 'lableIcon'" type="tooltip" :content="$utils.formatText(column.desc)" />
@@ -98,6 +94,8 @@
 
         <import-table :visible="importTableDialogVisible" :title="field.label" @close="(visible) => (importTableDialogVisible = visible)" @action-event="handleImportTableActionEvent" />
         <component :is="dialogTemplate" v-if="dialogTemplate" ref="dialogTemplate" v-bind="dialogTemplateAtts" />
+
+        <formrender-dialog ref="jyxtEdit" :visible="formDialogVisible" :title="field.label" :form-def="dialogFormDef" :data="dialogFormData" :mode="mode" :editFromType="editFromType" custom-class="ibps-dialog-80" @close="(visible) => (formDialogVisible = visible)" @action-event="handleFormDialogActionEvent" />
     </div>
 </template>
 <script>
@@ -112,7 +110,7 @@ import FormFieldUtil from '../../utils/formFieldUtil'
 import { hasPermission } from '@/business/platform/form/constants/tableButtonTypes'
 
 import CustomDialog from '@/business/platform/data/templaterender/custom-dialog/dialog'
-import FormrenderDialog from '@/business/platform/form/formrender/editForm'
+import FormrenderDialog from '@/business/platform/form/formrender/dialog'
 import ImportTable from './components/import-table'
 import IbpsExport from '@/plugins/export'
 import IbpsImport from '@/plugins/import'
@@ -309,19 +307,6 @@ export default {
         }
     },
     beforeDestroy() {
-        /* this.dataModel = null
-    this.copDataModel =null
-    this.fieldRights = null
-    this.tableRights = null
-    this.columnsRights = null
-    this.buttonsRights = null
-    this.customDialogDynamicParams = null
-    this.customDialogCustom = null
-    this.dialogFormDef = null
-    this.dialogFormData = null
-    this.dialogTemplate = null
-    this.dialogTemplateAtts = null
-    this.handleCout = null */
         this.dynamicShow = false
         // 注销当前表格保存在window[this.mainCode+'TableRefs']的this
         this.destoryTable()
@@ -565,9 +550,9 @@ export default {
             this.initRunCalFormula(this.dataModel.length - 1)
             // 后置事件
             this.afterScript(this.actionCode, this.actionPosition)
-            /*  if (this.$refs.elTable) {
-          this.$refs.elTable.doLayout()
-        } */
+            if (this.$refs.elTable) {
+                this.$refs.elTable.doLayout()
+            }
         },
         /**
          * 获取选择的记录
@@ -897,6 +882,7 @@ export default {
             } else {
                 this.addData(data)
             }
+            this.formDialogVisible = false
         },
         // =====================自定义对话框=====================