update 子表单退回上一页

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

@@ -15,18 +15,18 @@
                     </div>
                 </div>
                 <div class="panel-body">
-                    <el-table :data="copDataModel" ref="elTable" :header-cell-style="{ color: '#000', 'font-size': '14px', padding: '4px 0' }" :row-class-name="tableRowClassName" :show-summary="showSummary" :sum-text="sumText" :summary-method="hasSummaryMethod ? summaryMethod : null" border @selection-change="handleSelectionChange">
+                    <el-table ref="elTable" :data="copDataModel" :header-cell-style="{ color: '#000', 'font-size': '14px', padding: '4px 0' }" :row-class-name="tableRowClassName" :show-summary="showSummary" :sum-text="sumText" :summary-method="hasSummaryMethod ? summaryMethod : null" border @selection-change="handleSelectionChange">
                         <el-table-column v-if="!tableReadonly" type="selection" width="50" />
                         <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">
+                            <el-table-column v-if="!columnHidden(column) && column.field_type != 'desc' && column.label != ''" :key="j" show-overflow-tooltip :prop="column.name" :width="column.field_options.custom_class || 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)" />
                                 </template>
                                 <template slot-scope="scope">
                                     <template v-if="copDataModelCont && copDataModelCont.length > 0 && dynamicShow">
-                                        <ibps-dynamic-form-table-item :ref="'formItem' + column.name" :key="scope.$index + j" :models.sync="copDataModelCont[scope.$index + (currentPage * 10 - 10)]" :rights.sync="columnsRights" :form-data="models" :field="column" :main-code="mainCode" :code="code" :row="scope.$index" :mode="mode" :params="params" :currPage="currentPage" @updateModel="updateModel" v-on="listeners" />
+                                        <ibps-dynamic-form-table-item :ref="'formItem' + column.name" :key="scope.$index + j" :models.sync="copDataModelCont[scope.$index + (currentPage * 10 - 10)]" :rights.sync="columnsRights" :form-data="models" :field="column" :main-code="mainCode" :code="code" :row="scope.$index" :mode="mode" :params="params" :curr-page="currentPage" @updateModel="updateModel" v-on="listeners" />
                                     </template>
                                 </template>
                             </el-table-column>
@@ -41,7 +41,7 @@
                                 </el-dropdown>
                                 <template v-else>
                                     <template v-for="(button, index) in manageButtons">
-                                        <el-link :icon="button.icon" :key="index" :type="button.type" :underline="false" @click="handleActionEvent(button, scope.$index)">{{ button.label }}</el-link>
+                                        <el-link :key="index" :icon="button.icon" :type="button.type" :underline="false" @click="handleActionEvent(button, scope.$index)">{{ button.label }}</el-link>
                                         <!-- <el-button plain size="mini" :key="index" :type="button.type" @click="handleActionEvent(button, scope.$index)">
                                             {{ button.label }}
                                         </el-button> -->
@@ -53,7 +53,7 @@
                         </el-table-column>
                     </el-table>
                     <!-- 分页 -->
-                    <el-pagination v-if="mode === 'dialog' || mode === 'inner'" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next" :total="pageSize"> </el-pagination>
+                    <el-pagination v-if="mode === 'dialog' || mode === 'inner'" :current-page="currentPage" :page-size="10" layout="total, prev, pager, next" :total="pageSize" @current-change="handleCurrentChange" />
                 </div>
             </div>
             <!--================表内和弹窗模式end=================================-->
@@ -94,7 +94,7 @@
 
         <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" />
+        <formrender-dialog ref="jyxtEdit" :visible="formDialogVisible" :title="field.label" :form-def="dialogFormDef" :data="dialogFormData" :mode="mode" :edit-from-type="editFromType" custom-class="ibps-dialog-80" @close="(visible) => (formDialogVisible = visible)" @action-event="handleFormDialogActionEvent" />
     </div>
 </template>
 <script>
@@ -149,9 +149,9 @@ export default {
         }
     },
     data() {
-        let val = [],
-            tableType = '',
-            copVal = []
+        let val = []
+        let tableType = ''
+        let copVal = []
         if (this.$utils.isNotEmpty(this.value)) {
             val = this.value || []
             copVal = tableType === 'dialog' || 'inner' ? JSON.parse(JSON.stringify(val)).slice(0, 10) : val
@@ -159,11 +159,11 @@ export default {
         tableType = this.field.field_options.mode || 'inner'
         /* 由于内容遍历卡顿问题，需再建个中间对象进行渲染.*/
         return {
-            editFromType: 'add', //列表编辑弹出框类型
+            editFromType: 'add', // 列表编辑弹出框类型
             npmDialogFormVisible: false, // 弹窗
             defId: '', // 编辑dialog需要使用
             currentPage: 1,
-            dataPage: 0, //当前条数
+            dataPage: 0, // 当前条数
             pageSize: val.length,
             dataModel: val,
             copDataModel: copVal,
@@ -191,7 +191,9 @@ export default {
 
             importTableDialogVisible: false,
             dialogTemplate: null,
-            dialogTemplateAtts: {}
+            dialogTemplateAtts: {},
+
+            oldList: []
         }
     },
     computed: {
@@ -305,11 +307,6 @@ export default {
             }
         }
     },
-    beforeDestroy() {
-        this.dynamicShow = false
-        // 注销当前表格保存在window[this.mainCode+'TableRefs']的this
-        this.destoryTable()
-    },
     watch: {
         value: {
             handler(val, oldVal) {
@@ -322,9 +319,11 @@ export default {
         },
         dataModel: {
             handler(val, oldVal) {
-                //进行分页操作
+                // 进行分页操作
+                console.log(val, oldVal)
                 this.pageOperation(val, oldVal)
-            }
+            },
+            deep: true
         },
         rights: {
             handler(val, oldVal) {
@@ -352,6 +351,11 @@ export default {
             immediate: true
         }
     },
+    beforeDestroy() {
+        this.dynamicShow = false
+        // 注销当前表格保存在window[this.mainCode+'TableRefs']的this
+        this.destoryTable()
+    },
     mounted() {
         this.$nextTick(() => {
             if (this.$refs.elTable) {
@@ -368,25 +372,26 @@ export default {
         /* 分页操作及数据操作内容*/
         pageOperation(val, oldVal) {
             let page = this.currentPage * 10 - 10
-            let size = val.length
-            if (size >= 10 && this.pageSize % 10 == 1) {
+            const size = val.length
+            if ((this.dataModel < this.oldList) && size >= 10 && this.pageSize % 10 == 0) {
                 //删除了一个参数 ，如果当前总条数小于页数，则退一页。
                 if (this.currentPage > 1) this.currentPage = this.currentPage - 1
                 page = this.currentPage * 10 - 10
                 if (page != 0) page - 10
             }
             this.pageSize = size
-            //具体操作
+            this.oldList = JSON.parse(JSON.stringify(this.dataModel))
+            // 具体操作
             if (this.mode === 'dialog' || this.mode === 'inner') {
                 this.copDataModel = JSON.parse(JSON.stringify(val)).slice(page, page + 10)
             }
             this.$emit('update:value', val)
         },
 
-        //简单的分页 usnin
+        // 简单的分页 usnin
         handleCurrentChange(val) {
             this.dataPage = val * 10 - 10
-            //深度克隆主要数据
+            // 深度克隆主要数据
             this.copDataModel = JSON.parse(JSON.stringify(this.dataModel)).slice(this.dataPage, this.dataPage + 10)
             this.currentPage = val
         },
@@ -477,7 +482,7 @@ export default {
         },
         handleActionEvent(button, buttonIndex) {
             // 起始下标
-            let index = this.currentPage * 10 - 10 + buttonIndex
+            const index = this.currentPage * 10 - 10 + buttonIndex
             this.actionCode = button.key === 'custom' ? button.code || button.key + index : button.key
             this.actionPosition = button.position || 'toolbar'
             // 前置事件
@@ -560,7 +565,7 @@ export default {
             const selection = []
             if (position === 'toolbar' && this.mode !== 'block') {
                 if (this.multipleSelection && this.multipleSelection.length > 0) {
-                    let startIndex = this.currentPage * 10 - 10
+                    const startIndex = this.currentPage * 10 - 10
                     this.multipleSelection.forEach((row) => {
                         selection.push(row.$index + startIndex)
                     })
@@ -580,6 +585,7 @@ export default {
                             this.dataModel.splice(i, 1)
                         }
                     }
+                    this.pageSize = this.dataModel.length
                     // 后置事件
                     this.afterScript(this.actionCode, position, {
                         selection: selection,
@@ -621,7 +627,7 @@ export default {
                 ActionUtils.success('导入成功')
             })
         },
-        //数据导出
+        // 数据导出
         getIbpsExport(columns, data, title, message, nameKey = 'name') {
             IbpsExport.excel({
                 columns: columns,
@@ -629,7 +635,7 @@ export default {
                 nameKey: nameKey,
                 title: title
             }).then(() => {
-                const msg = message ? message : '导出成功'
+                const msg = message || '导出成功'
                 ActionUtils.success(msg)
             })
         },
@@ -820,12 +826,12 @@ export default {
     */
         judgeData(index) {
             if (index >= 0 && this.handleCout) {
-                //第一次进入时，不做更新判断。
+                // 第一次进入时，不做更新判断。
                 this.$refs.jyxtEdit.loadFormData()
             } else if (index == undefined && this.handleCout == '编辑') {
                 this.$refs.jyxtEdit.loadFormData()
             }
-            this.handleCout = index >= 0 ? '编辑' : '新增' //记录
+            this.handleCout = index >= 0 ? '编辑' : '新增' // 记录
         },
 
         // =====================对话框模式数据处理=  原====================
@@ -1064,5 +1070,4 @@ export default {
 }
 </style>
 
-
   </style>