优化绑定商品多选

src/views/invoicing/consumable/specifications.vue

@@ -38,7 +38,6 @@
         <div class="head-container" id="table_drag">
             <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
                 <el-table-column prop="id" label="ID" width="50px" />
-                <!-- <el-table-column label="耗材信息ID" prop="conInfoId" /> -->
                 <el-table-column label="耗材信息" prop="conName" />
                 <el-table-column label="商品" prop="name" />
                 <el-table-column label="规格" prop="specSnap" />
@@ -84,53 +83,26 @@
         <el-dialog :title="dialogtitle" :visible.sync="dialogshow" width="1000px">
             <el-form ref="addSelect" :inline="true">
                 <el-form-item label="商品名称">
-                    {{ addSelect.length ? addSelect[0].name : '' }}
+                    <template v-for="(ele, index) in addSelect">
+                        {{ addSelect.length ? addSelect[index].name : '' }}
+                    </template>
                 </el-form-item><br />
-                <template v-if="addSelect.length">
-                    <!-- 
-                    isDistribute为1是共享库存，展示商品
-                    为0是展示规格
-                      -->
-                    <template v-if="addSelect[0].isDistribute == 1">
-                        <el-form-item label="商品规格">
-                            <el-input v-model="addSelect[0].specSnap" style="width: 130px;" placeholder="请选择商品规格"
-                                disabled></el-input>
-                        </el-form-item>
-                        <el-form-item label="耗材信息" prop="conName">
-                            <el-input v-model="addSelect[0].conName" style="width: 130px;" placeholder="请选择耗材信息"
-                                disabled></el-input>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" @click="informationdialogshow = true">去选择耗材信息</el-button>
-                        </el-form-item>
-                        <el-form-item label="单位耗材值">
-                            <el-input v-model="addSelect[0].surplusStock" type=number placeholder="请输入单位耗材值"></el-input>
-                        </el-form-item>
-                    </template>
-                    <template v-else>
-                        <template v-if="addSelect[0]">
-                            <template v-for="(item, i) in addSelect[0].skuList">
-                                <el-form-item label="商品规格">
-                                    <el-input v-if="addSelect[0].typeEnum == '单规格'" v-model="addSelect[0].specSnap"
-                                        style="width: 130px;" placeholder="请选择商品规格" disabled></el-input>
-                                    <el-input v-else v-model="item.specSnap" style="width: 130px;" placeholder="请选择商品规格"
-                                        disabled></el-input>
-                                </el-form-item>
-                                <el-form-item label="耗材信息" prop="conName">
-                                    <el-input v-model="item.conName" style="width: 130px;" placeholder="请选择耗材信息"
-                                        disabled></el-input>
-                                </el-form-item>
-                                <el-form-item>
-                                    <el-button type="primary" @click="selecthaocai(i)">去选择耗材信息</el-button>
-                                </el-form-item>
-                                <el-form-item label="单位耗材值">
-                                    <el-input v-model="item.surplusStock" type=number placeholder="请输入单位耗材值"></el-input>
-                                </el-form-item>
-                            </template>
-                        </template>
-                    </template>
-                </template>
 
+                <template v-for="(ele, index) in commodityArr">
+                    <el-form-item label="商品规格">
+                        <el-input v-model="ele.specSnap" style="width: 130px;" placeholder="请选择商品规格"
+                            disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="耗材信息" prop="conName">
+                        <el-input v-model="ele.conName" style="width: 130px;" placeholder="请选择耗材信息" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="selecthaocai(ele)">去选择耗材信息</el-button>
+                    </el-form-item>
+                    <el-form-item label="单位耗材值">
+                        <el-input v-model="ele.surplusStock" type=number placeholder="请输入单位耗材值"></el-input>
+                    </el-form-item>
+                </template>
 
                 <el-form-item style="display: flex;justify-content: flex-end;">
                     <el-button @click="dialogshow = false">取 消</el-button>
@@ -261,33 +233,15 @@ export default {
                 loading: false,
                 total: 0
             },
-            ruleForm: {
-                conInfoId: "",
-                conInfoIdname: "",
-                productSkuId: "",
-                productSkuIdname: "",
-                shopId: localStorage.getItem('shopId'),
-                surplusStock: '',
-                status: false
-            },
             rules: {
-                conNameS: [
+
-                    { required: true, message: '请输入耗材信息', trigger: 'blur' }
-                ],
-                name: [
-                    { required: true, message: '请选择商品规格', trigger: 'blur' }
-                ],
-                surplusStock: [
-                    { required: true, message: '请输入单位耗材值', trigger: 'blur' }
-                ],
-                status: [
-                    { required: true, message: '选择状态', trigger: 'blur' }
-                ]
             },
-            // 动态新增选择框
+            // 动态新增选择框-所有数据
             addSelect: [],
+            // 筛选集合
+            commodityArr: [],
             // 选择耗材的index
-            ALLisDistribute: null
+            ALLisDistribute: null,
         }
     },
     mounted() {
@@ -311,14 +265,31 @@ export default {
                 .match(/^\d*(\.?\d{0,2})/g)[0] || ''
         },
         selectShop(res) {
-            // console.log(res, '调试1')
+            this.commodityArr = []
             this.addSelect = res
-            res[0]['specSnap'] = res[0].name
+            console.log(res, 'tiaosjo')
+            res.forEach((ele, i) => {
+                // isDistribute1为共享库存-商品，0不共享是多规格
+                // 判断是否共享拆分数据到商品和规格集合里
+                if (ele.isDistribute == 1) {
+                    ele.specSnap = ele.name
+                    ele.conName = ele.conName
+                    this.commodityArr.push(ele)
+                } else {
+                    // 规格数据处理
+                    ele.skuList.forEach(element => {
+                        element.conInfoId = element.id
+                        element.conName = element.conName
+                        this.commodityArr.push(element)
+                    })
+                }
+            })
             this.clickdialogframe('add')
+
         },
         // 选择耗材
-        selecthaocai(i) {
+        selecthaocai(item) {
-            this.ALLisDistribute = i
+            this.ALLisDistribute = item
             this.informationdialogshow = true
         },
         //表格拖拽
@@ -420,27 +391,15 @@ export default {
         },
         // 耗材信息的信息
         tableDatainformationtable(item) {
-
+            this.commodityArr.forEach(ele => {
-            this.addSelect.forEach((ele, i) => {
+                if (ele.id == this.ALLisDistribute.id) {
-                ele.consInfoId = item.id
+                    ele.consInfoId = this.ALLisDistribute.id
-                ele.conName = item.conName
+                    ele.conName = item.conName
-                if (this.ALLisDistribute != null) {
+                    ele.skuId = ele.id
-                    // this.addSelect.forEach((ele, i) => {
-                    ele.skuList[this.ALLisDistribute].conInfoId = item.id
-                    ele.skuList[this.ALLisDistribute].conName = item.conName
-                    // })
-                    console.log(ele.skuList[this.ALLisDistribute], "打印");
                 }
             })
-            // this.ruleForm.skuInfos = item
-            // this.ruleForm.conInfoId = item.id
-            // this.ruleForm.conInfoIdname = item.conName
             this.informationdialogshow = false
         },
-        // tableDatatablesku(item) {///规格
-        //     this.ruleForm = item
-        //     this.tableDataskudialogshow = false
-        // },
         // 获取商品规格
         async getTableDatasku() {
             this.tableDatasku.loading = true
@@ -492,41 +451,23 @@ export default {
                 });
                 this.informationdialogshowedit = false
             } else {
-                let { id, consInfoId, surplusStock, isDistribute } = this.addSelect[0]
                 // isDistribute1为共享库存-商品，0不共享是多规格
-                // 如果isDistribute为0 是多规格的时候
-                if (isDistribute != 1) {
-                    surplusStock = this.addSelect[0].skuList[0].surplusStock
-                }
-                let obj = {
-                    productId: id,
-                    consInfoId: consInfoId,
-                    skuInfos: null,
-                    surplusStock: surplusStock
-                }
                 let isgongx = false
-                this.addSelect[0].skuList.forEach(ele => {
+                this.commodityArr.forEach(ele => {
-                    console.log(ele, "jiancha");
-                    ele.skuId = ele.id
-                    // ele.surplusStock = surplusStock
-                    if (isDistribute == 1) {
-                        ele.surplusStock = surplusStock
-                        ele.conInfoId = consInfoId
-                    }
                     if (!ele.skuId || !ele.surplusStock) {
                         isgongx = true
-                    } else {
-                        isgongx = false
                     }
                 })
                 if (isgongx) {
                     this.$message.error('请选择耗材信息与输入耗材值')
+                    isgongx = false
                     return
                 }
-
+                this.addSelect.forEach(ele => {
-                obj.skuInfos = this.addSelect[0].skuList
+                    ele.skuInfos = ele.skuList
-
+                    ele.productId = ele.id //商品id
-                await posttbProskuCons(obj)
+                })
+                await posttbProskuCons(this.addSelect)
                 this.$message({
                     message: '新增成功',
                     type: 'success'