优化列表序号，分页时延续问题

sgzb-ui/src/components/TableModel/index.vue

@@ -3,6 +3,7 @@
         <!-- 查询表单 -->
         <FormModel
             :formLabel="config.formLabel"
+            :routerParams="config.routerParams"
             @queryList="queryList"
             v-if="config.isFormShow"
         >
@@ -19,6 +20,10 @@
             ref="tableRef"
             select-on-indeterminate
             @selection-change="handleSelectionChange"
+            v-loading="loading"
+            element-loading-text="数据正在加载，请稍后"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.6)"
         >
             <el-table-column
                 type="selection"
@@ -27,6 +32,14 @@
                 :selectable="selectable"
                 v-if="config.isSelShow"
             />
+            <el-table-column
+                align="center"
+                label="序号"
+                type="index"
+                :index="
+                    indexContinuation(pageParams.pageNum, pageParams.pageSize)
+                "
+            />
             <el-table-column
                 v-for="(item, v) in tableColumCheckProps"
                 :key="v"
@@ -42,12 +55,18 @@
                         <slot :data="scope.row" :name="item.t_slot"></slot>
                     </template>
                     <template v-else>
+                        {{ scope.row[item.t_props] || '-' }}
+                    </template>
+                    <!-- <template v-else>
                         {{
                             v === 0
-                                ? scope.$index + 1
+                                ? indexContinuation(
+                                      pageParams.pageNum,
+                                      pageParams.pageSize,
+                                  )
                                 : scope.row[item.t_props] || '-'
                         }}
-                    </template>
+                    </template> -->
                 </template>
             </el-table-column>
             <el-table-column
@@ -93,125 +112,125 @@
 </template>
 
 <script>
-    import FormModel from '../FormModel'
+import FormModel from '../FormModel'
-    export default {
+export default {
-        components: {
+    components: {
-            FormModel,
+        FormModel,
+    },
+    props: {
+        /* 列表请求接口 */
+        sendApi: {
+            type: Function,
+            default: () => {
+                return function () {}
+            },
         },
-        props: {
+        /* 查看详情需显示列表等操作 传入的参数 */
-            /* 列表请求接口 */
+        sendParams: {
-            sendApi: {
+            type: Object,
-                type: Function,
+            default: () => {
-                default: () => {
+                return {}
-                    return function () {}
-                },
             },
-            /* 查看详情需显示列表等操作 传入的参数 */
+        },
-            sendParams: {
+        /* 表格复选框禁用状态 */
-                type: Object,
+        selectable: {
-                default: () => {
+            type: Function,
-                    return {}
+            default: () => {
-                },
+                return true
-            },
-            /* 表格复选框禁用状态 */
-            selectable: {
-                type: Function,
-                default: () => {
-                    return true
-                },
             },
+        },
 
-            /* 列表 查询表单等配置项 */
+        /* 列表 查询表单等配置项 */
-            config: {
+        config: {
-                type: Object,
+            type: Object,
-                default: () => {
+            default: () => {
-                    return {}
+                return {}
-                },
             },
         },
-        data() {
+    },
-            return {
+    data() {
-                total: 0,
+        return {
-                tableList: [{ demo: 123 }],
+            total: 0,
-                /* 分页参数 */
+            tableList: [{ demo: 123 }],
-                pageParams: {
+            /* 分页参数 */
-                    pageNum: 1,
+            pageParams: {
-                    pageSize: 10,
+                pageNum: 1,
-                },
+                pageSize: 10,
-                /* 操作列显示隐藏数据源 */
+            },
-                columCheckList: [],
+            /* 操作列显示隐藏数据源 */
+            columCheckList: [],
+            loading: false,
+        }
+    },
+
+    created() {
+        this.getList()
+        this.columCheckList = this.config.columnsList
+        this.columCheckList = this.columCheckList.map((e) => {
+            this.$set(e, 'checked', true)
+            return e
+        })
+    },
+    computed: {
+        /* 根据操作栏控制表头是否显示 */
+        tableColumCheckProps() {
+            return this.columCheckList.filter((e) => {
+                return e.checked != false
+            })
+        },
+    },
+    methods: {
+        /* form 查询组件触发的自定义事件 */
+        async queryList(val, reset) {
+            if (reset) {
+                this.pageParams.pageNum = 1
+                this.pageParams.pageSize = 10
+            }
+            this.pageParams = Object.assign(
+                val,
+                this.pageParams,
+                this.sendParams,
+            )
+            this.pageParams.beginTime = val.time ? val.time[0] : ''
+            this.pageParams.endTime = val.time ? val.time[1] : ''
+            this.getList()
+        },
+        /* 获取列表信息 */
+        async getList() {
+            this.pageParams = Object.assign(this.pageParams, this.sendParams)
+            this.loading = true
+            const res = await this.sendApi(this.pageParams)
+            this.loading = false
+
+            if (res.code == 200) {
+                this.tableList = res.rows || res.data.rows
+                this.total = res.total || res.data.total
             }
         },
 
-        created() {
+        /* 表格复选框事件 */
-            this.getList()
+        handleSelectionChange(row) {
-            this.columCheckList = this.config.columnsList
+            this.$emit('getTableSelectionChange', row)
-            this.columCheckList = this.columCheckList.map((e) => {
-                this.$set(e, 'checked', true)
-                return e
-            })
         },
-        computed: {
+        /* 清除表格的选中状态 */
-            /* 根据操作栏控制表头是否显示 */
+        clearSelType() {
-            tableColumCheckProps() {
+            this.$refs.tableRef.clearSelection()
-                return this.columCheckList.filter((e) => {
-                    return e.checked != false
-                })
-            },
         },
-        methods: {
+    },
-            /* form 查询组件触发的自定义事件 */
+}
-            async queryList(val, reset) {
-                if (reset) {
-                    this.pageParams.pageNum = 1
-                    this.pageParams.pageSize = 10
-                }
-                this.pageParams = Object.assign(
-                    val,
-                    this.pageParams,
-                    this.sendParams,
-                )
-                this.pageParams.beginTime = val.time ? val.time[0] : ''
-                this.pageParams.endTime = val.time ? val.time[1] : ''
-                this.getList()
-            },
-            /* 获取列表信息 */
-            async getList() {
-                this.pageParams = Object.assign(
-                    this.pageParams,
-                    this.sendParams,
-                )
-                const res = await this.sendApi(this.pageParams)
-
-                if (res.code == 200) {
-                    this.tableList = res.rows
-                    this.total = res.total
-                }
-            },
-
-            /* 表格复选框事件 */
-            handleSelectionChange(row) {
-                this.$emit('getTableSelectionChange', row)
-            },
-            /* 清除表格的选中状态 */
-            clearSelType() {
-                this.$refs.tableRef.clearSelection()
-            },
-        },
-    }
 </script>
 
 <style>
-    .check-all {
+.check-all {
-        margin-bottom: 5px;
+    margin-bottom: 5px;
-        cursor: pointer;
+    cursor: pointer;
-    }
+}
 
-    .handel-text {
+.handel-text {
-        cursor: pointer;
+    cursor: pointer;
-    }
+}
-    .handel-text:hover {
+.handel-text:hover {
-        text-decoration: underline;
+    text-decoration: underline;
-        color: #409eff;
+    color: #409eff;
-    }
+}
 </style>

sgzb-ui/src/views/scrapManage/Inventory/config.js

@@ -15,7 +15,7 @@ export const config = {
         { f_label: '创建时间', f_model: 'time', f_type: 'date' },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_props: '', t_label: '预报废单号' },
         { t_props: '', t_label: '机具类型' },
         { t_props: '', t_label: '任务创建人' },

sgzb-ui/src/views/scrapManage/forecastWaste/auditing/config.js

@@ -37,7 +37,7 @@ export const config = {
         { f_label: '创建时间', f_model: 'time', f_type: 'date' },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'scrapNum', t_label: '预报废单号', },
         { t_width: '', t_props: '', t_label: '报废来源', t_slot: 'source', },
         { t_width: '', t_props: 'repairNum', t_label: '单号', t_slot: 'code', },

sgzb-ui/src/views/scrapManage/forecastWaste/auditingReturn/config.js

@@ -12,7 +12,7 @@ export const config = {
         { f_label: '规格型号', f_model: 'backPro', f_type: 'sel', f_selList: [] },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'demo', t_label: '类型名称' },
         { t_width: '', t_props: '', t_label: '规格型号' },
         { t_width: '', t_props: '', t_label: '数量' },
@@ -44,7 +44,7 @@ export const dialogConfig = {
     ],
 
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'demo', t_label: '设备类型' },
         { t_width: '', t_props: '', t_label: '规格型号' },
         { t_width: '', t_props: '', t_label: '设备编码' },

sgzb-ui/src/views/scrapManage/forecastWaste/listing/config.js

@@ -40,7 +40,7 @@ export const config = {
         },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'scrapNum', t_label: '报废单号' },
         { t_width: '', t_props: '', t_label: '报废来源', t_slot: 'source' },
         { t_width: '', t_props: 'repairNum', t_label: '预报废单号' },
@@ -74,7 +74,7 @@ export const dialogConfig = {
     ],
 
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
         { t_width: '', t_props: 'specificationType', t_label: '规格型号' },
         { t_width: '', t_props: 'maCode', t_label: '设备编码' },

sgzb-ui/src/views/scrapManage/scrap/disposition/config.js

@@ -43,7 +43,7 @@ export const dialogConfig = {
         { f_label: '类型名称', f_model: 'keywords', f_type: 'ipt' },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
         { t_width: '', t_props: 'specificationType', t_label: '规格型号' },
         { t_width: '', t_props: 'maCode', t_label: '设备编码' },

sgzb-ui/src/views/scrapManage/scrap/scrapAuditing/config.js

@@ -15,7 +15,7 @@ export const config = {
         { f_label: '创建时间', f_model: 'time', f_type: 'date' },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_props: 'scrapNum', t_label: '报废单号' },
         { t_props: 'scrapSource', t_label: '报废来源', t_slot: 'source' },
         { t_props: 'repairNum', t_label: '预报废单号' },
@@ -43,7 +43,7 @@ export const dialogConfig = {
         { f_label: '类型名称', f_model: 'keywords', f_type: 'ipt' },
     ],
     columnsList: [
-        { t_width: '55px', t_props: '', t_label: '序号' },
+        // { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
         { t_width: '', t_props: 'specificationType', t_label: '规格型号' },
         { t_width: '', t_props: 'maCode', t_label: '设备编码' },