更新多规格商品的添加/编辑

pages/product/addGood/addGood.vue

@@ -545,7 +545,7 @@
       // 创建商品
       submitCreatedGoods() {
         console.log('创建商品');
-        return console.log('商品规格', this.setFormData.attr);
+        // return console.log('商品规格', this.setFormData.attr);
         console.log('是否推荐', this.$refs.commodityRef.addGoodsSecoundData);
         console.log('商品详情', this.$refs.commodityRef.goodsDis, this.$refs.commodityRef.store_name);
         if(this.setFormData.spec_type==0){
@@ -610,6 +610,8 @@
       changeSpecType2(){
         this.showSpecType = false;
         this.setFormData.spec_type = this.spec_type + '';
+        this.setFormData.attrValue = [];
+        this.setFormData.attr = [];
       },
       // 跳转多规格页面
       navToSpecGood(){
@@ -621,8 +623,9 @@
               attrValue: JSON.parse(JSON.stringify(this.setFormData.attrValue)),
               attr: JSON.parse(JSON.stringify(this.setFormData.attr))
             });
-            uni.$once('updateSpecType', (attr)=>{
+            uni.$once('updateSpecType', (e)=>{
-              this.setFormData.attrValue = JSON.parse(JSON.stringify(attr));
+              this.setFormData.attrValue = JSON.parse(JSON.stringify(e.attrValue));
+              this.setFormData.attr = JSON.parse(JSON.stringify(e.attr));
             })
           }
         })

pages/product/addGood/specGood.vue

@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="page">
     <view class="mode">
       <view class="line">
         <view class="title">规格模板</view>
@@ -12,7 +12,7 @@
       <view class="line-warp">
 
       </view>
-      <view class="btn-box" @click="test()">
+      <view class="btn-box" @click="settingSpec()">
         <view class="btn">点击设置规格</view>
       </view>
       <uni-popup ref="modeRef" type="top">
@@ -32,6 +32,10 @@
               <view class="delete-spec" @click="deleteAttrOne(index)"><uni-icons type="close" color="#f84221"
                   style="margin-right: 10rpx;"></uni-icons>删除规格</view>
             </view>
+            <view v-if="attr.length==0" style="color: #ccc;height: 220rpx;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;">
+              <view>暂无规格</view>
+              <view>点击下方按钮添加新规格</view>
+            </view>
           </scroll-view>
           <view class="tab">
             <view class="add-btn" @click="addSpecOne()">添加新规格</view>
@@ -59,7 +63,7 @@
     </avatar>
     <block v-for="(item,index) in attrValue" :key="item.uuid">
       <view class="popup_group head_close">
-        <view class="popup_group_item " v-for="(value, key) in item.detail" :key="value">
+        <view class="popup_group_item " v-for="(value, key) in item.detail" :key="key">
           <view class="popup_group_item_label">{{key}}</view>
           <view class="popup_group_item_value">
             <input :value="value" type="text" disabled placeholder="请填写规格名称" />
@@ -90,7 +94,7 @@
         @updateCode="updateCode" :show_sku="true">
       </priceComponent>
     </block>
-    <button class="add_btn" @click="addAttrValue">点击添加规格</button>
+    <!-- <button class="add_btn" @click="addAttrValue">点击添加规格</button> -->
     <view class="submit">
       <button class="btn" @click="submitAttr">确认<text>({{attrValue.length}})</text></button>
     </view>
@@ -116,6 +120,18 @@
       return {
         attrValue: [],
         attr: [],
+        attr_mode: {
+          "detail": {},
+          "sku": "",
+          "stock": 0,
+          "image": "",
+          "bar_code": "",
+          "cost": "",
+          "ot_price": "",
+          "price": "",
+          "volume": "",
+          "weight": "",
+        },
         product_id: '',
         uuid: '', //选择图片的id
         deleteIndex: '', //删除图片下标
@@ -133,7 +149,7 @@
       this.attr = JSON.parse(uni.getStorageSync('attr') || '[]');
       this.getOpenerEventChannel().once('updateAttrValue', (e) => {
         e.attrValue.forEach((item, index) => {
-          item.uuid = index + '-' + Math.floor(Math.random() * 10000);
+          item.uuid = Date.now() + '-' + Math.floor(Math.random() * 10000);
         })
         this.attrValue = e.attrValue;
         uni.setStorageSync('attrValue', JSON.stringify(e.attrValue));
@@ -143,50 +159,85 @@
       this.userInfo = this.$store.state.app.userInfo;
       if (typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
     },
-    watch: {
-      attr: {
-        handler(n, o) {
-          let arr = this.computeAttr(n);
-          let t = [];
-          n.forEach(item=>{
-            t.push(item.value)
-          })
-          this.attrValue.forEach((item)=>{
-            t.forEach(key=>{
-              console.log(item.detail[key]);
-            })
-          })
-          console.log(arr);
-        },
-        deep: true
-      }
-    },
     methods: {
       updateCode(e) {
         console.log(e);
       },
       // 点击设置规格
-      test() {
+      settingSpec() {
         this.$refs.modeRef.open();
       },
       // 添加规格二级
       addSpecTow(index) {
+        this.attrDetail = '';
         this.addAttrType = 1;
         this.changeAttr = index;
         this.$refs.inputModeRef.open();
       },
       // 添加规格一级
       addSpecOne() {
+        this.attrName = '';
+        this.attrDetail = '';
         this.addAttrType = 2;
         this.$refs.inputModeRef.open();
       },
       // 删除规格二级
       deleteAttrTow(i, j) {
+        if(this.attr[i].detail.length<=1){
+          return this.deleteAttrOne(i); // 当规格的最后一个属性被删除时,直接删除该规格
+        }
+        this.attrValue = this.attrValue.filter(item=>{
+          return !(item.detail[this.attr[i].value] == this.attr[i].detail[j]);
+        })
         this.attr[i].detail.splice(j, 1);
       },
       // 删除规格一级
       deleteAttrOne(i) {
+        let attr = this.attr[i];
+        if(this.attr.length==1){ // 如果只有一个规格, 并且删除这个规格时, 直接清空规格
+          this.$set(this, 'attrValue', []);
           this.attr.splice(i, 1);
+          return ;
+        }
+        // 删除多余的规格值
+        this.attrValue.forEach(item => {
+          let a = item.sku.split(',');
+          a = a.filter(e=>e!=item.detail[attr.value]);
+          item.sku = a.join(',');
+          delete item.detail[attr.value];
+        })
+        // 过滤掉重复的值
+        this.attrValue = Array.from(new Set(this.attrValue.map(item => item.sku))).map(sku => {
+          return this.attrValue.find(item => item.sku === sku);
+        });
+        this.attr.splice(i, 1);
+      },
+      // 添加商品规格卡片
+      addAttrValueCard(){
+        let arr = this.computeAttr(this.attr); // 计算出sku的值
+        let t = [];
+        let keys = this.attr.map(e => { // 获取规格名称
+          return e.value;
+        })
+        let temp = [];
+        arr.forEach((sku) => { // 根据sku遍历当前规格数组
+          if (this.attrValue.find(e => e.sku == sku)) return;
+          else {
+            let detail = {};
+            let t = sku.split(',');
+            keys.forEach((e, i) => { // 设置detail的值
+              detail[e] = t[i];
+            })
+            temp.push(Object.assign({}, this.attr_mode, {
+              sku: sku,
+              detail: detail,
+              uuid: Date.now() + '-' + Math.floor(Math.random() * 10000) // 重设uuid
+            })) // 追加数据
+          }
+        })
+        setTimeout(() => {
+          this.attrValue = [...this.attrValue, ...temp] // 延后追加数据
+        })
       },
       // 关闭添加规格
       closeAddAttr() {
@@ -199,11 +250,11 @@
           s.push(item.detail);
         })
         let t = this.getCombination(s);
-        // t = t.map(item=>{
+        t = t.map(item => {
-        //   if(typeof item=='object'){
+          if (typeof item == 'object') {
-        //     return item.join(',')
+            return item.join(',')
-        //   }else return item;
+          } else return item;
-        // })
+        })
         return t;
       },
       // 递归计算
@@ -224,7 +275,9 @@
       },
       // 确认添加规格
       addAttr() {
-        if (this.addAttrType == 1) {
+        this.attrDetail = this.attrDetail.trim();
+        this.attrDetail = this.attrDetail.trim();
+        if (this.addAttrType == 1) { // 2级
           if (this.attr[this.changeAttr].detail.find(name => name == this.attrDetail)) {
             this.closeAddAttr();
             this.$nextTick(() => {
@@ -233,18 +286,37 @@
           } else {
             this.attr[this.changeAttr].detail.push(this.attrDetail);
             this.closeAddAttr();
+            setTimeout(()=>{
+              this.addAttrValueCard();
+            })
           }
-        } else {
+        } else { // 1级
           if (this.attr.find(item => item.value == this.attrName)) {
             this.closeAddAttr();
             this.$nextTick(() => {
               Toast('该规格已存在')
             })
           } else {
+            console.log('添加新规格');
             this.attr.push({
               value: this.attrName,
               detail: [this.attrDetail]
             });
+            if(this.attrValue.length){
+              this.attrValue.forEach((item) => {
+                item.detail[this.attrName] = this.attrDetail;
+                item.sku = item.sku + ',' + this.attrDetail;
+              })
+            }
+            else {
+              let detail = {};
+              detail[this.attrName] = this.attrDetail;
+              this.attrValue.push(Object.assign({}, this.attr_mode, {
+                sku: this.attrDetail,
+                detail: detail,
+                uuid: Date.now() + '-' + Math.floor(Math.random() * 10000)
+              }))
+            }
             this.closeAddAttr();
           }
         }
@@ -257,22 +329,40 @@
       submitAttr() {
         if (this.attrValue.length < 1) return Toast('请至少添加一种规格');
         let flag = true;
+        let str = '请填写完整信息';
         this.attrValue.forEach((item, index) => {
           Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key => {
             item[key] = this.$refs.priceRef[index].singleSpecification[key];
           })
-          console.log(item);
           if (flag) {
-            if (item.sku == undefined || item.sku == null || item.sku == '') flag = false;
+            if (item.sku == undefined || item.sku == null || item.sku == '') {
-            if (!item.price) flag = false;
+              flag = false;
-            if (!item.stock) flag = false;
+              str = '规格不能为空';
-            if (!item.cost) flag = false;
+            }
-            if (!item.procure_price && this.userInfo.mer_info.type_code == 'TypeSupplyChain') flag = false;
+            else if (!item.price) {
+              flag = false;
+              str = '零售价不能小于等于0';
+            }
+            else if (!item.stock) {
+              flag = false;
+              str = '库存不能小于等于0';
+            }
+            else if (!item.cost) {
+              flag = false;
+              str = '成本价不能小于等于0';
+            }
+            else if (!item.procure_price && this.userInfo.mer_info.type_code == 'TypeSupplyChain') {
+              flag = false;
+              str = '批发价不能小于等于0';
+            }
           }
         })
-        if (!flag) return Toast('请填写完整信息');
+        if (!flag) return Toast(str);
         else {
-          uni.$emit('updateSpecType', this.attrValue);
+          uni.$emit('updateSpecType', {
+            attr: this.attr,
+            attrValue: this.attrValue
+          });
           uni.navigateBack();
         }
       },
@@ -318,9 +408,9 @@
       },
       // 添加规格
       addAttrValue() {
-        this.attrValue.push({
+        this.attrValue.push(Object.assign({}, this.attr_mode, {
-          uuid: this.attrValue.length + '-' + Math.floor(Math.random() * 10000)
+          uuid: Date.now() + '-' + Math.floor(Math.random() * 10000) // 重设uuid
-        })
+        }))
       },
       // 预删除
       deleteByIndex(index) {
@@ -342,6 +432,10 @@
 <style lang="scss">
   @import './scss/index.scss';
 
+  .page{
+    padding-bottom: 150rpx;
+  }
+
   .popup_group {
     margin-bottom: 0;
   }