bug-957 子表编辑异常翻页问题修复

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

@@ -38,6 +38,7 @@
                             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"
+                            :index="indexMethod"
                         />
                         <template v-for="(column, j) in displayColumns">
                             <el-table-column
@@ -49,18 +50,14 @@
                             >
                                 <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)"
-                                    />
+                                    <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)]"
+                                            :models.sync="copDataModelCont[scope.$index + (currentPage - 1) * pageSize]"
                                             :rights.sync="columnsRights"
                                             :form-data="models"
                                             :field="column"
@@ -120,11 +117,14 @@
                     </el-table>
                     <!-- 分页 -->
                     <el-pagination
-                        v-if="mode === 'dialog' || mode === 'inner'"
-                        :page-size="10"
-                        layout="total, prev, pager, next"
-                        :total="pageSize"
+                        v-if="needPage !== 'N' && (mode === 'dialog' || mode === 'inner')"
+                        :current-page="currentPage"
+                        :page-size="pageSize"
+                        :page-sizes="pageSizeOptions"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="totalCount"
                         @current-change="handleCurrentChange"
+                        @size-change="handleSizeChange"
                     />
                 </div>
             </div>
@@ -220,6 +220,7 @@ import FormUtils from '../../utils/formUtil'
 import FormFieldUtil from '../../utils/formFieldUtil'
 
 import { hasPermission } from '@/business/platform/form/constants/tableButtonTypes'
+import { defaultPageSize, pageSizeOptions } from '@/business/platform/form/constants/fieldOptions'
 
 import CustomDialog from '@/business/platform/data/templaterender/custom-dialog/dialog'
 import FormrenderDialog from '@/business/platform/form/formrender/dialog'
@@ -228,6 +229,11 @@ import IbpsExport from '@/plugins/export'
 import IbpsImport from '@/plugins/import'
 
 const JForm = window.JForm
+// 获取子表展示数据
+const getShowData = (data, current = 1, size = defaultPageSize) => {
+    return data && data.length ? JSON.parse(JSON.stringify(data)).slice((current - 1) * size, current * size) : []
+}
+
 export default {
     components: {
         FormrenderDialog,
@@ -262,24 +268,24 @@ export default {
         }
     },
     data () {
-        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
+        const { page, pageSize = defaultPageSize, mode = 'inner', colWidth } = this.field.field_options || {}
+        let initData = []
+        if (page === 'N' || mode === 'block' || !this.value) {
+            initData = this.value || []
+        } else {
+            initData = getShowData(this.value, 1, pageSize)
         }
-        tableType = this.field.field_options.mode || 'inner'
-        /* 由于内容遍历卡顿问题，需再建个中间对象进行渲染.*/
         return {
-            editFromType: 'add', // 列表编辑弹出框类型
+            pageSize,
+            colWidth,
+            pageSizeOptions,
+            editFromType: '', // 列表编辑弹出框类型
             npmDialogFormVisible: false, // 弹窗
             defId: '', // 编辑dialog需要使用
             currentPage: 1,
-            dataPage: 0, // 当前条数
-            pageSize: val.length,
-            dataModel: val,
-            copDataModel: copVal,
+            totalCount: 0,
+            dataModel: initData,
+            copDataModel: initData,
             multipleSelection: '',
             countNumber: 0,
             fieldRights: {}, // 子表配置权限
@@ -351,6 +357,21 @@ export default {
         columns () {
             return this.field.field_options.columns || []
         },
+        needPage () {
+            return this.field.field_options.page || 'Y'
+        },
+        // pageSize () {
+        //     return this.field.field_options.pageSize || 10
+        // },
+        // copDataModel () {
+        //     // 自动计算显示数据，缺陷：子表数据任何变化都将触发
+        //     // 非块模式且数据不为空
+        //     if (this.$utils.isNotEmpty(this.dataModel) && ['dialog', 'inner'].includes(this.mode)) {
+        //         return this.$utils.newData(this.dataModel).slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
+        //     } else {
+        //         return this.dataModel
+        //     }
+        // },
         nameColumns () {
             return FormFieldUtil.getSubDisplayColumns(this.columns)
         },
@@ -425,7 +446,10 @@ export default {
     watch: {
         value: {
             handler (val, oldVal) {
-                if (!val) return
+                if (!val) {
+                    this.dataModel = []
+                    return
+                }
                 this.dataModel = val
                 // if (!valueEquals(val, oldVal)) {
                 //     this.dispatch('ElFormItem', 'el.form.change', val)
@@ -435,7 +459,10 @@ export default {
         dataModel: {
             handler (val, oldVal) {
                 // 进行分页操作
-                this.pageOperation(val, oldVal)
+                if (this.mode === 'block') {
+                    return val
+                }
+                this.handlePagination(val)
             }
         },
         rights: {
@@ -477,35 +504,46 @@ export default {
         })
     },
     methods: {
-        /* 更新后的参数*/ // 定义删除、增加 不做操作。修改时才做更新 ，分页修改时，根据页表修改。
+        getShowData,
+        indexMethod (index) {
+            return (this.currentPage - 1) * this.pageSize + index + 1
+        },
+        /**
+         * 定义删除、增加 不做操作。修改时才做更新 ，分页修改时，根据页表修改。
+         */
         updateModel (key, val, index, page) {
-            this.dataModel[page * 10 - 10 + index][key] = val
+            this.dataModel[(page - 1) * this.pageSize + index][key] = val
             this.$emit('change-data', key, val)
         },
-        /* 分页操作及数据操作内容*/
-        pageOperation (val, oldVal) {
-            let page = this.currentPage * 10 - 10
-            const size = val.length
-            if (size >= 10 && this.pageSize % 10 == 1) {
-                // 删除了一个参数 ，如果当前总条数小于页数，则退一页。
-                if (this.currentPage > 1) this.currentPage = this.currentPage - 1
-                page = this.currentPage * 10 - 10
-                if (page != 0) page - 10
-            }
-            this.pageSize = size
-            // 具体操作
-            if (this.mode === 'dialog' || this.mode === 'inner') {
-                this.copDataModel = JSON.parse(JSON.stringify(val)).slice(page, page + 10)
+        handlePagination (val) {
+            this.totalCount = val.length
+            // 限制最小页数为1
+            const pageCount = Math.ceil(this.totalCount / this.pageSize) || 1
+            // 逻辑：删除后当前页大于总页数，替换为总页数，否则留在当前页
+            if (this.editFromType === 'add') {
+                // 新增按钮逻辑：前往最后一页
+                this.currentPage = pageCount
+            } else if (this.editFromType === 'import') {
+                // 导入定位到第一页
+                this.currentPage = 1
+            } else {
+                // 其余逻辑（编辑、删除、整表赋值）：操作后当前页大于总页数，替换为总页数，否则留在当前页
+                this.currentPage = this.currentPage > pageCount ? pageCount : this.currentPage
             }
+            this.copDataModel = this.getShowData(val, this.currentPage, this.pageSize)
+            this.editFromType = ''
             this.$emit('update:value', val)
         },
-
-        // 简单的分页 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
+            this.copDataModel = this.getShowData(this.dataModel, this.currentPage, this.pageSize)
+        },
+        // 处理切换分页大小
+        handleSizeChange (val) {
+            this.pageSize = val
+            this.currentPage = 1
+            this.copDataModel = this.getShowData(this.dataModel, this.currentPage, this.pageSize)
         },
         columnHidden (column) {
             // 是否隐藏
@@ -593,7 +631,7 @@ export default {
         },
         handleActionEvent (button, buttonIndex) {
             // 起始下标
-            const index = this.currentPage * 10 - 10 + buttonIndex
+            const index = (this.currentPage - 1) * this.pageSize + buttonIndex
             this.actionCode = button.key === 'custom' ? button.code || button.key + index : button.key
             this.actionPosition = button.position || 'toolbar'
             this.actionButton = button
@@ -677,7 +715,7 @@ export default {
             const selection = []
             if (position === 'toolbar' && this.mode !== 'block') {
                 if (this.multipleSelection && this.multipleSelection.length > 0) {
-                    const startIndex = this.currentPage * 10 - 10
+                    const startIndex = (this.currentPage - 1) * this.pageSize
                     this.multipleSelection.forEach((row) => {
                         selection.push(row.$index + startIndex)
                     })