优化Table组件,解决浏览器控制台报错问题

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

src/components/Table/AllTableArguments/BaseTableArguments.js

@@ -81,32 +81,10 @@ export function BaseTableArguments(selection, loading, processList, queryParams,
 }
 
 // TODO: 组件表单所需的所有参数
-export function BaseTableArgumentsTest(nIndex, selection, loading, List, queryParams, columnData) {
-  // TODO: 选择框是否需要存在    (selection判断表单选择框是否需要存在)
-  if (typeof selection !== 'boolean') {
-    console.warn('selection下拉框参数的type类型错误!请检查后重新赋值')
-  } else {
-    this.selection = selection
-
-    // TODO: 选择框  (根据条件是否可选)
-    this.selectable = (row, index) => {
-      if (row.isSwitch) {
-        return true
-      }
-    }
-  }
-
-  // TODO: 加载进度    (判断是否显示加载进度)
-  if (typeof loading !== 'boolean') {
-    console.warn('loading进度条参数的type类型错误!请检查后重新赋值')
-  } else {
-    this.loading = loading
-  }
-
-  // TODO: 查询参数    (判断查询条件是否符合类型)
-  if (queryParams instanceof queryParamsType) {
-    this.queryParams = queryParamsType
-  }
-  this.columnData = columnData
+export function BaseTableArgumentsTest(listName, loading, List, queryParams, columObj) {
+  this.listName = listName
+  this.loading = loading
   this.List = List
+  this.queryParams = queryParams
+  this.columObj = columObj
 }

src/components/Table/BaseTable/index.vue

@@ -9,7 +9,7 @@
         border
         :data="allTableArguments.List"
         style="width: 100%;"
-        @selection-change="handleSelectionChange"
+        @selection-change="handleSelectionChange(row)"
       >
 
         <el-table-column type="index" label="序号" width="50" />
@@ -46,17 +46,17 @@
             <!-- 图片展示 -->
             <el-popover trigger="hover" placement="top" popper-class="popper">
               <img v-if="column.image" :src="viewUrl + row[column.prop]" alt="">
-              <el-image v-if="column.image" slot="reference" :src="viewUrl + row[column.prop]" />
+              <el-image v-if="column.image" :src="viewUrl + row[column.prop]" />
             </el-popover>
 
             <!-- 图片数组 -->
             <el-popover v-if="column.imageArr" trigger="hover" placement="top" popper-class="popper">
               <img v-if="row[column.prop].length>0" :src="row[column.prop][0]" alt="">
-              <el-image v-if="row[column.prop].length >0" slot="reference" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" />
+              <el-image v-if="row[column.prop].length >0" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" />
             </el-popover>
 
             <!-- 可编辑input，仅在text默认展示类型才可编辑-->
-            <el-input v-if="column.editRow === $index" v-model="row[column.prop]" v-focus @blur="editInputBlur(row,$index,column.prop,columIndex)" />
+            <el-input v-if="column.editRow === $index" v-model="row[column.prop]" @blur="editInputBlur(row,$index,column.prop,columIndex)" />
             <!-- 操作按钮 -->
             <span v-if="column.isOperation" class="processListBtns">
               <span v-for="(operations, index) in column.operation" :key="index">
@@ -84,13 +84,7 @@ export default {
     allTableArguments: {
       type: BaseTableArgumentsTest,
       default: () => {
-        return {
-          selection: Boolean,
-          loading: Boolean,
-          queryParams: Object,
-          List: Array,
-          columnData: Array
-        }
+        return new BaseTableArgumentsTest()
       }
     },
     nIndex: {
@@ -107,6 +101,9 @@ export default {
     }
   },
   methods: {
+    handleSelectionChange(row) {
+      this.$emit('handle-selection-change', row)
+    },
     handleDetail(row) {
       this.$emit('handle-detail', row)
     },

src/views/processManagement/inventoryRecord/index.vue

@@ -113,7 +113,6 @@
       <component
         :is="BaseTable"
         :key="queryParams.rows"
-        :n-index="nIndex"
         :all-table-arguments="allTableArguments"
         @handle-detail="handleDetail"
       />
@@ -164,7 +163,6 @@
 
         <!-- TODO: 这里是 库状态为废弃时才会触发显示的模块 -->
         <transition name="fade-transform" mode="out-in">
-
           <el-row v-if=" activateAbandonedState " style="height: 160px">
             <el-col :span="12">
               <el-form-item label="fq_ys：" prop="fq_ys">
@@ -189,31 +187,32 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <transition />
+        </transition>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="操作员：" prop="userName">
-                <el-input v-model.trim="singleDetails.userName" :readonly="isReadOnly" />
-              </el-form-item>
-            </el-col>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="操作员：" prop="userName">
+              <el-input v-model.trim="singleDetails.userName" :readonly="isReadOnly" />
+            </el-form-item>
+          </el-col>
 
-            <el-col :span="12">
-              <el-form-item label="操作时间：" prop="createDate">
-                <el-input v-model.trim="singleDetails.createDate" :readonly="isReadOnly" />
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <el-col :span="12">
+            <el-form-item label="操作时间：" prop="createDate">
+              <el-input v-model.trim="singleDetails.createDate" :readonly="isReadOnly" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        </transition></el-form>
+      </el-form>
     </el-dialog>
 
   </div>
 </template>
 
 <script>
-import { listLog, findSingleLogDetail, exportInventoryRecord } from '@/api/processMangement/InventoryRecord'
+import { exportInventoryRecord, findSingleLogDetail, listLog } from '@/api/processMangement/InventoryRecord'
 import BaseTable from '@/components/Table/BaseTable/index.vue'
+import { BaseTableArgumentsTest } from '@/components/Table/AllTableArguments/BaseTableArguments'
 
 export default {
   name: 'InventoryRecord',
@@ -290,6 +289,8 @@ export default {
         // TODO: 库类型 1设备库 2工序库
         ptype: undefined
       },
+      // TODO: list记录表名
+      listName: '出入库记录列表',
       // TODO: 用来接收数据源
       inventoryRecordList: [],
       // TODO: 用来说明每一列的类型
@@ -394,13 +395,13 @@ export default {
     },
     // TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
     allTableArguments() {
-      return {
-        listName: '出入库记录列表',
-        loading: this.loading,
-        List: this.inventoryRecordList,
-        queryParams: this.queryParams,
-        columObj: this.columObj
-      }
+      const baseTableArgumentsTest = new BaseTableArgumentsTest()
+      baseTableArgumentsTest.listName = this.listName
+      baseTableArgumentsTest.loading = this.loading
+      baseTableArgumentsTest.List = this.inventoryRecordList
+      baseTableArgumentsTest.queryParams = this.queryParams
+      baseTableArgumentsTest.columObj = this.columObj
+      return baseTableArgumentsTest
     }
   },
   /** 路由离开前存储筛选条件*/