耗材记录增加所属商品，样式居中

src/views/invoicing/consumable/cons_record.vue

@@ -25,10 +25,10 @@
             <span :class="[computedClass(scope.row.balance)]">  {{scope.row.balance  }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="耗材消耗" prop="conConsume" />
-        <el-table-column label="耗材入库" prop="conIn" />
-        <el-table-column label="耗材出库" prop="conOut" />
-        <el-table-column label="耗材反还" prop="conReturn" />
+        <el-table-column label="耗材消耗" prop="conConsume"  align="center" />
+        <el-table-column label="耗材入库" prop="conIn"  align="center" />
+        <el-table-column label="耗材出库" prop="conOut"  align="center" />
+        <el-table-column label="耗材反还" prop="conReturn"  align="center"/>
 
         <!-- <el-table-column label="业务编码" prop="bizCode" /> -->
         <!-- <el-table-column label="业务说明" prop="bizName" /> -->
@@ -36,7 +36,19 @@
         <!-- <el-table-column label="正负号标识" prop="bizType" /> -->
         <!-- <el-table-column label="耗材id" prop="consId" /> -->
         <!-- <el-table-column label="创建时间" prop="createTime"></el-table-column> -->
-        <el-table-column label="操作" >
+        <el-table-column label="所属商品" width="320"  align="center">
+          <template v-slot="scope">
+            <el-button
+            v-for="(item) in scope.row.product"
+            @click="toGoods(item)"
+            :key="item.productId"
+              type="text"
+              >{{item.productName}}</el-button
+            >
+            
+          </template>
+        </el-table-column>
+        <el-table-column label="操作"  align="center">
           <template v-slot="scope">
             <el-button
               type="text"
@@ -99,6 +111,14 @@ export default {
     this.getTableData();
   },
   methods: {
+    toGoods(data){
+      this.$router.push({
+        path:'/product/product',
+        query:{
+            productId: data.productId
+        }
+     })
+    },
     computedClass(num){
       if(num>0){
         return 'green'
@@ -107,8 +127,10 @@ export default {
       }
     },
     lookDetail(row){
-      console.log(row)
-      this.$refs.recodeDetail.open(row)
+      this.$refs.recodeDetail.open({
+    "consId": row.consId,
+    "conName": row.conName
+})
     },
     resetHandle() {
       this.clickseetableData.page = 0;
@@ -135,7 +157,20 @@ export default {
           shopId: localStorage.getItem("shopId")
         });
         this.clickseetableData.loading = false;
-        this.clickseetableData.data = res.content;
+        this.clickseetableData.data = res.content.map(v=>{
+          const productIds=v.productId.split(',')
+          const productNames=v.productName.split(',')
+          return{
+            ...v,
+            product:productIds.map((id,index)=>{
+              return {
+                productId:id,
+                productName:productNames[index]+`${(index==productIds.length-1)?'':','}`
+              }
+            })
+          }
+        });
+        console.log(this.clickseetableData.data)
         this.clickseetableData.total = res.totalElements;
       } catch (error) {
         console.log(error);
@@ -154,4 +189,5 @@ export default {
   font-weight: bold;
 
 }
+
 </style>