优化规格绑定耗材样式

src/views/product/components/bindCons.vue

@@ -16,7 +16,8 @@
         <div class="name_wrap">
             <div class="name">商品名：{{ goodsDetail.name }}</div>
         </div>
-        <el-table :data="tableData.cons">
+        <!-- 绑定到商品 -->
+        <el-table :data="tableData.cons" v-if="type == 1">
             <el-table-column label="序号" type="index" width="50"></el-table-column>
             <el-table-column label="规格名称" prop="specSnap" v-if="type == 2"></el-table-column>
             <el-table-column label="耗材名称">
@@ -54,6 +55,91 @@
                 </template>
             </el-table-column>
         </el-table>
+        <!-- 绑定到规格 -->
+        <el-table :data="tableData.cons" border v-if="type == 2">
+            <el-table-column label="序号" type="index" width="100"></el-table-column>
+            <el-table-column label="规格名称" prop="specSnap"></el-table-column>
+            <el-table-column label="耗材" width="600">
+                <el-table-column label="耗材信息">
+                    <template v-slot="scope">
+                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
+                            <el-select v-model="item.conInfoId" filterable remote reserve-keyword placeholder="请输入关键词"
+                                :remote-method="remoteMethod" :loading="loading"
+                                @change="skuSelectionChange($event, item)">
+                                <el-option v-for="item in options" :key="item.consId" :label="item.conName"
+                                    :value="item.consId">
+                                </el-option>
+                            </el-select>
+                            <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="耗材单位">
+                    <template v-slot="scope">
+                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
+                            <div class="t">
+                                <span v-if="item.conInfoId">{{ item.conUnit }}</span>
+                                <span v-else>请选择耗材</span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="消耗量">
+                    <template v-slot="scope">
+                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
+                            <el-input-number v-model="item.surplusStock" :min="0" />
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                    <template v-slot="scope">
+                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
+                            <div class="table_btn_wrap">
+                                <div class="btn sub" v-if="index > 0" @click="scope.row.consList.splice(index, 1)">
+                                    <i class="el-icon-remove-outline"></i>
+                                </div>
+                                <div class="btn add" @click="skuCreateItem(scope.$index)">
+                                    <i class="el-icon-circle-plus-outline"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <!-- <template v-slot="scope">
+                    <div class="cons_list_wrap">
+                        <div class="row" v-for="(item, index) in scope.row.consList" :key="index">
+                            <div class="item">
+                                <el-select v-model="item.conInfoId" filterable remote reserve-keyword
+                                    placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"
+                                    @change="skuSelectionChange($event, item)">
+                                    <el-option v-for="item in options" :key="item.consId" :label="item.conName"
+                                        :value="item.consId">
+                                    </el-option>
+                                </el-select>
+                                <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
+                            </div>
+                            <div class="item">
+                                <span v-if="item.conInfoId">{{ item.conUnit }}</span>
+                                <span v-else>请选择耗材</span>
+                            </div>
+                            <div class="item">
+                                <el-input-number v-model="item.surplusStock" :min="0" />
+                            </div>
+                            <div class="item">
+                                <div class="table_btn_wrap">
+                                    <div class="btn sub" v-if="index > 0" @click="scope.row.consList.splice(index, 1)">
+                                        <i class="el-icon-remove-outline"></i>
+                                    </div>
+                                    <div class="btn add" @click="skuCreateItem(scope.$index)">
+                                        <i class="el-icon-circle-plus-outline"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template> -->
+            </el-table-column>
+        </el-table>
         <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" :loading=formLoading @click="onSubmitHandle">确 定</el-button>
@@ -98,8 +184,33 @@ export default {
                 //     this.$message.error('请完善信息')
                 //     return
                 // }
+
+                let res = null
                 this.formLoading = true
-                const res = await tbProskuConV2(this.tableData)
+                if (this.type == 1) {
+                    res = await tbProskuConV2(this.tableData)
+                } else if (this.type == 2) {
+                    let data = { ...this.tableData }
+
+                    let arr = []
+
+                    data.cons.map(item => {
+                        item.consList.map(val => {
+                            if (val.name) {
+                                let obj = { ...item }
+                                obj.id = val.id
+                                obj.name = val.name
+                                obj.productSkuId = item.productSkuId
+                                obj.conInfoId = val.conInfoId
+                                obj.surplusStock = val.surplusStock
+                                arr.push(obj)
+                            }
+                        })
+                    })
+
+                    data.cons = arr
+                    res = await tbProskuConV2(data)
+                }
                 this.formLoading = false
                 this.$message.success('编辑成功')
                 this.dialogVisible = false
@@ -109,12 +220,18 @@ export default {
                 this.formLoading = false
             }
         },
-        // 选择耗材
+        // 商品选择耗材
         selectionChange(e, row) {
             let item = this.options.find(item => item.consId == e)
             row.name = item.conName
             row.conUnit = item.conUnit
         },
+        // 规格选择耗材
+        skuSelectionChange(e, row) {
+            let item = this.options.find(item => item.consId == e)
+            row.name = item.conName
+            row.conUnit = item.conUnit
+        },
         // 远程搜索耗材
         remoteMethod(query) {
             if (query !== '') {
@@ -202,9 +319,6 @@ export default {
                 }
             } else {
                 // 添加至规格
-                if (this.goodsDetail.conInfos.length) {
-                    this.tableData.cons = [...this.goodsDetail.conInfos]
-                }
                 this.goodsDetail.skuList.map(val => {
                     let item = {}
 
@@ -219,8 +333,35 @@ export default {
                     item.status = 1
                     item.specSnap = val.name
 
+                    item.consList = [
+                        {
+                            surplusStock: 0,
+                            conInfoId: '',
+                            name: '',
+                            conUnit: ''
+                        }
+                    ]
+
                     this.tableData.cons.push(item)
                 })
+
+
+
+                if (this.goodsDetail.conInfos.length) {
+                    this.tableData.cons.map(val => {
+                        this.goodsDetail.conInfos.map(item => {
+                            if (item.productSkuId == val.productSkuId) {
+                                val.consList.unshift({
+                                    id: item.id,
+                                    surplusStock: item.surplusStock,
+                                    conInfoId: item.conInfoId,
+                                    name: item.conName,
+                                    conUnit: item.conUnit
+                                })
+                            }
+                        })
+                    })
+                }
             }
         },
         // 生成新关系项
@@ -253,10 +394,27 @@ export default {
                 item.surplusStock = 0
                 item.status = 1
                 item.specSnap = val.specSnap
+                item.consList = [
+                    {
+                        conInfoId: '',
+                        name: '',
+                        conUnit: '',
+                        surplusStock: 0
+                    }
+                ]
 
                 this.tableData.cons.push(item)
             }
         },
+        // 规格生成新关系项
+        skuCreateItem($index) {
+            this.tableData.cons[$index].consList.push({
+                conInfoId: '',
+                name: '',
+                conUnit: '',
+                surplusStock: 0
+            })
+        },
         reset() {
             this.goodsDetail = ''
             this.tableData.productId = ''
@@ -321,4 +479,29 @@ export default {
         }
     }
 }
+
+.cons_list_wrap {
+    .row {
+        display: flex;
+        padding: 10px 0;
+        align-items: center;
+        gap: 10px;
+
+        .item {
+            flex: 1;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+
+.sku_table_item {
+    padding: 10px 0;
+
+    .t {
+        height: 32px;
+        display: flex;
+        align-items: center;
+    }
+}
 </style>