优化Table组件，实现序列类型自定义

Signed-off-by: CenXinYi <2810162984@qq.com>

src/components/Table/BaseTable/index.vue

@@ -13,7 +13,7 @@
         @sort-change="changeTableSort"
       >
 
-        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column v-if="allTableArguments.columObj.nIndex" type="index" label="序号" width="50" :index="allTableArguments.columObj.nIndextable ? nIndex : ''" />
 
         <!-- TODO: 选择框是否开启，selectable控制是否单行禁用 -->
         <el-table-column v-if="allTableArguments.columObj.selection" type="selection" :selectable="allTableArguments.columObj.selectable" width="50px" />
@@ -87,12 +87,6 @@ export default {
       default: () => {
         return new BaseTableArgumentsTest()
       }
-    },
-    nIndex: {
-      type: Function,
-      default: () => {
-        return Function
-      }
     }
   },
   data() {
@@ -102,6 +96,13 @@ export default {
     }
   },
   methods: {
+    /* TODO:自定义分页索引，实现索引继承 */
+    nIndex(index) {
+      // TODO: 当前页数 - 1 * 每页数据条数 + 1
+      const page = this.allTableArguments.queryParams.page // TODO: 当前页码
+      const rows = this.allTableArguments.queryParams.rows // TODO: 每页条数
+      return index + 1 + (page - 1) * rows
+    },
     changeTableSort(val) {
       this.$emit('change-table-sort', val)
     },

src/views/equipment/checkProcess.vue

@@ -33,18 +33,17 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary"  style="padding: 8px 7px;" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button type="primary" style="padding: 8px 7px;" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
         <el-button style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
       </el-form-item>
       <div style="float: right">
 
-
         <el-form-item>
           <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="checkType">开始盘点  </el-button>
         </el-form-item>
 
         <el-form-item>
-          <el-button style="padding: 8px 7px;" type="danger" :size="smallSize" @click="deleteByType" icon="el-icon-minus">结束盘点 </el-button>
+          <el-button style="padding: 8px 7px;" type="danger" :size="smallSize" icon="el-icon-minus" @click="deleteByType">结束盘点 </el-button>
         </el-form-item>
 
         <el-form-item>
@@ -149,7 +148,7 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
-<!-- 弹出框。。。。。。。。。。。。。。。。。。。。。。。 -->
+    <!-- 弹出框。。。。。。。。。。。。。。。。。。。。。。。 -->
     <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
       <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
         <el-row>
@@ -165,8 +164,6 @@
           </el-col>
         </el-row>
 
-
-
         <el-row>
           <el-col :span="12">
             <el-form-item label="plocation：" prop="plocation">
@@ -194,12 +191,10 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="厚度：" prop="phd">
-          <el-input v-model.trim="singleDetails.phd" :readonly="true" />
-        </el-form-item>
-          </el-col>
-          <el-col :span="12">
-
+              <el-input v-model.trim="singleDetails.phd" :readonly="true" />
+            </el-form-item>
           </el-col>
+          <el-col :span="12" />
         </el-row>
         <el-row>
           <el-col :span="12">
@@ -221,27 +216,27 @@
       :visible.sync="table"
       direction="rtl"
       size="50%"
-       >
-      <el-table v-loading="loading" border :data="tableList" @selection-change="handleSelectionChange" style="padding: 0 10px;">
+    >
+      <el-table v-loading="loading" border :data="tableList" style="padding: 0 10px;" @selection-change="handleSelectionChange">
 
         <el-table-column type="index" label="序号" width="80" />
 
-        <el-table-column label="pn" prop="pn" >
+        <el-table-column label="pn" prop="pn">
           <template slot-scope="scope">
             {{ scope.row.pn || '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="lot" prop="lot" >
+        <el-table-column label="lot" prop="lot">
           <template slot-scope="scope">
             {{ scope.row.lot || '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="位置" prop="plocation" >
+        <el-table-column label="位置" prop="plocation">
           <template slot-scope="scope">
             {{ scope.row.plocation || '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="厚度" prop="phd" >
+        <el-table-column label="厚度" prop="phd">
           <template slot-scope="scope">
             {{ scope.row.phd || '-' }}
           </template>
@@ -261,9 +256,9 @@ import {
   getRole,
   updateRole
 } from '@/api/system/role'
-import { checkType, listCheck,addList,deleteByType,checkInventory} from '@/api/equipment/check'
-import {roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect} from '@/api/system/menu'
-import {roleDeptTreeselect, treeselect as deptTreeselect} from '@/api/system/dept'
+import { checkType, listCheck, addList, deleteByType, checkInventory } from '@/api/equipment/check'
+import { roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect } from '@/api/system/menu'
+import { roleDeptTreeselect, treeselect as deptTreeselect } from '@/api/system/dept'
 // import { getRolesByInsId } from '../../../api/businessManage/template'
 export default {
   name: 'Role',
@@ -271,13 +266,13 @@ export default {
     return {
       // 需要盘点的list
       checkFrom: {
-         Ptype: '',
-         checkList: [],
+        Ptype: '',
+        checkList: []
       },
-      table:false,
-      tableList:[],
+      table: false,
+      tableList: [],
       // 选中的列表
-      selectList:[],
+      selectList: [],
       // TODO: 表单里的单项详情参数
       singleDetails: {
         equipmentName: '',
@@ -372,10 +367,10 @@ export default {
           label: '仅本人数据权限'
         }
       ],
-      check:[],
+      check: [],
       // 菜单列表
       menuOptions: [],
-      equipmentList:[],
+      equipmentList: [],
       // 部门列表
       tOptions: [],
       // 查询参数
@@ -386,8 +381,8 @@ export default {
         roleKey: undefined,
         flag: undefined,
         ptype: 2,
-        pstatus:0,
-        delFlag:0
+        pstatus: 0,
+        delFlag: 0
 
       },
       // 表单参数
@@ -437,18 +432,18 @@ export default {
   },
   methods: {
     checkInventory() {
-    this.table = true;
-    checkInventory(2)
-      .then(response => {
+      this.table = true
+      checkInventory(2)
+        .then(response => {
         // 处理返回的数据
-        this.tableList = response.data;
-        console.log(response);
-      })
-      .catch(error => {
+          this.tableList = response.data
+          console.log(response)
+        })
+        .catch(error => {
         // 处理请求错误
-        console.error(error);
-      });
-  },
+          console.error(error)
+        })
+    },
     // TODO: 获取所选行详情信息操作
     handleDetail(row) {
       this.singleDetails = this.formReset
@@ -457,60 +452,59 @@ export default {
       this.openDetails = !this.openDetails
     },
     deleteByType() {
-  // 添加二次确认对话框
-  this.$confirm("确认要结束盘点吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      // 用户点击确定按钮时执行的回调函数
-      deleteByType(2).then(flag => {
-        if (flag.data > 0) {
-          this.$message.success("结束盘点成功");
-        } else {
-          this.$message.error("当前未开始盘点");
-        }
-      });
-    })
-    .catch(() => {
-      // 用户点击取消按钮时执行的回调函数，可以忽略这里的实现
-    });
-},
-    checkType() {
-  checkType(2).then(total => {
-    if (total.data !== 0) {
-      this.$message.error("请先结束盘点");
-    } else {
-      let data = [];
-      if (this.selectList.length === 0) {
-        data = this.equipmentList;
-      } else {
-        data = this.selectList;
-      }
       // 添加二次确认对话框
-      this.$confirm("确认要进行盘点吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm('确认要结束盘点吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
         .then(() => {
           // 用户点击确定按钮时执行的回调函数
-          addList(data).then(flag => {
-            if (flag.data.influence > 0) {
-              this.$message.success("盘点成功");
+          deleteByType(2).then(flag => {
+            if (flag.data > 0) {
+              this.$message.success('结束盘点成功')
             } else {
-              this.$message.error("盘点失败");
+              this.$message.error('当前未开始盘点')
             }
-          });
+          })
         })
         .catch(() => {
           // 用户点击取消按钮时执行的回调函数，可以忽略这里的实现
-        });
-    }
-  });
-},
-
+        })
+    },
+    checkType() {
+      checkType(2).then(total => {
+        if (total.data !== 0) {
+          this.$message.error('请先结束盘点')
+        } else {
+          let data = []
+          if (this.selectList.length === 0) {
+            data = this.equipmentList
+          } else {
+            data = this.selectList
+          }
+          // 添加二次确认对话框
+          this.$confirm('确认要进行盘点吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+            .then(() => {
+              // 用户点击确定按钮时执行的回调函数
+              addList(data).then(flag => {
+                if (flag.data.influence > 0) {
+                  this.$message.success('盘点成功')
+                } else {
+                  this.$message.error('盘点失败')
+                }
+              })
+            })
+            .catch(() => {
+              // 用户点击取消按钮时执行的回调函数，可以忽略这里的实现
+            })
+        }
+      })
+    },
 
     handelTab(i, e) {
       const that = this
@@ -670,7 +664,7 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.queryParams={
+      this.queryParams = {
         page: 1,
         rows: 10,
         ptype: 2,

src/views/processManagement/inventoryRecord/index.vue

@@ -116,6 +116,7 @@
         :is="BaseTable"
         :key="queryParams.rows"
         :all-table-arguments="allTableArguments"
+        @n-index="nIndex"
         @handle-detail="handleDetail"
         @change-table-sort="changeTableSort"
       />
@@ -309,6 +310,10 @@ export default {
       inventoryRecordList: [],
       // TODO: 用来说明每一列的类型
       columObj: {
+        // 序列
+        nIndex: true,
+        // 序列根据条件是否继承排序顺序
+        nIndextable: false,
         // 选择框
         selection: false,
         // 选择框根据条件是否可选
@@ -401,13 +406,7 @@ export default {
     BaseTable() {
       return BaseTable
     },
-    /* TODO:自定义分页索引，实现索引继承 */
-    nIndex(index) {
-      // TODO: 当前页数 - 1 * 每页数据条数 + 1
-      const page = this.queryParams.page // TODO: 当前页码
-      const rows = this.queryParams.rows // TODO: 每页条数
-      return index + 1 + (page - 1) * rows
-    },
+
     // TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
     allTableArguments() {
       const baseTableArgumentsTest = new BaseTableArgumentsTest()
@@ -448,8 +447,6 @@ export default {
       listLog(this.queryParams, this.addDateRange(this.queryEntity, this.dateRange)).then(response => {
         this.inventoryRecordList = response.rows
         this.total = response.total
-        // 暂时还没写后端 this.selectOptionsAboutPoperate = selectOptionsAboutPoperate
-        // this.selectOptionsAboutPtype = selectOptionsAboutPtype
         this.loading = false
       })
     },