商品规格添加

src/api/product/category.js

@@ -17,6 +17,13 @@ export function getCategory(id) {
   })
 }
 
+export function parentCommonElement(id) {
+  return request({
+    url: '/product/category/parentCommonElement/' + id,
+    method: 'get'
+  })
+}
+
 // 新增品类信息
 export function addCategory(data) {
   return request({

src/components/CheckAttribute/index.vue

@@ -69,7 +69,11 @@ export default {
   props: {
     value: {
       type: Array,
-      default: []
+      default: () => []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   watch: {
@@ -81,6 +85,15 @@ export default {
         }
       },
       immediate: true
+    },
+    checkedList: {
+      handler(val) {
+        if (val !== undefined && val.length >0){
+          this.checkedAttributeList = val
+          this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
+        }
+      },
+      immediate: true
     }
   },
   data() {

src/components/CheckAttributeGroup/index.vue

@@ -66,7 +66,11 @@ export default {
   props: {
     value: {
       type: Array,
-      default: []
+      default: () => []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   watch: {
@@ -78,6 +82,15 @@ export default {
         }
       },
       immediate: true
+    },
+    checkedList: {
+      handler(val) {
+        if (val !== null && val.length >0){
+          this.checkedAttributeGroupList = val
+          this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
+        }
+      },
+      immediate: true
     }
   },
   data() {

src/components/CheckBrand/index.vue

@@ -66,7 +66,11 @@ export default {
   props: {
     value: {
       type: Array,
-      default: []
+      default: () => []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   watch: {
@@ -78,6 +82,15 @@ export default {
         }
       },
       immediate: true
+    },
+    checkedList: {
+      handler(val){
+        if (val !== null && val.length > 0){
+          this.checkedBrandList = val
+          this.brandIdList = this.checkedBrandList.map(checked => checked.id);
+        }
+      },
+      immediate: true
     }
   },
   data() {

src/views/product/attributeGroup/index.vue

@@ -294,11 +294,14 @@ export default {
         this.checkedAttributeList.push(attribute);
       }else {
         // 删除
-        console.log(this.checkedAttributeList)
-        console.log(attribute)
-        console.log(this.checkedAttributeList.indexOf(attribute))
+        let att =undefined
+        this.checkedAttributeList.forEach(checked => {
+          if (checked.id == attribute.id){
+            att = checked
+          }
+        })
         this.checkedAttributeList.splice(
-          this.checkedAttributeList.indexOf(attribute), 1
+          this.checkedAttributeList.indexOf(att), 1
         )
       }
     },

src/views/product/category/index.vue

@@ -151,13 +151,13 @@
         </el-row>
         <el-tabs value="attribute" type="card" >
           <el-tab-pane label="商品属性" name="attribute">
-            <CheckAttribute v-model="form.attributeIdList"/>
+            <CheckAttribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
           </el-tab-pane>
           <el-tab-pane label="商品属性组" name="attributeGroup">
-            <CheckAttributeGroup v-model="form.attributeGroupIdList"/>
+            <CheckAttributeGroup v-model="form.attributeGroupIdList" :checked-list="attributeGroupList"/>
           </el-tab-pane>
           <el-tab-pane label="商品品牌" name="brand">
-            <CheckBrand v-model="form.brandIdList"/>
+            <CheckBrand v-model="form.brandIdList" :checked-list="brandInfoList"/>
           </el-tab-pane>
         </el-tabs>
 
@@ -171,7 +171,7 @@
 </template>
 
 <script>
-import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/product/category";
+import { listCategory, getCategory, delCategory, addCategory, updateCategory, parentCommonElement } from "@/api/product/category";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
@@ -229,8 +229,26 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
-      }
-    };
+      },
+      attributeInfoList: [],
+      attributeGroupList: [],
+      brandInfoList: []
+    }
+  },
+  watch: {
+    'form.parentId': {
+      handler(val){
+        console.log(val)
+        if (val !== undefined && val != null){
+          parentCommonElement(val).then(res => {
+            this.attributeInfoList = res.data.attributeInfoList
+            this.attributeGroupList = res.data.attributeGroupList
+            this.brandInfoList = res.data.brandInfoList
+          })
+        }
+      },
+      immediate: true
+    }
   },
   created() {
     this.getList();

src/views/product/rule/index.vue

@@ -104,6 +104,47 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <el-row v-for="(ruleAttr,index) in form.ruleAttrList">
+          <el-row style="margin: 20px 0">
+            <el-tag
+              :key="ruleAttr.name"
+              @close="removeRule(index)"
+              closable>
+              {{ ruleAttr.name }}
+            </el-tag>
+          </el-row>
+          <el-row style="margin: 10px 0">
+            <el-tag
+              style="float: left;margin-right: 20px"
+              v-for="(ruleProperty,index) in ruleAttr.valueList"
+              :key="ruleProperty"
+              @close="removeProperty(ruleAttr.valueList,index)"
+              closable>
+              {{ ruleProperty }}
+            </el-tag>
+            <el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus"
+                     size="mini">添加</el-button>
+            <el-input v-if="ruleAttr.ruleAttrAddStatus"
+                    v-model="addRulePropertyValue"
+                    @blur="addRuleProperty(ruleAttr,false)"
+                    @keyup.enter.native="addRuleProperty(ruleAttr,true)"
+                    size="mini" placeholder="请输入规格属性值"
+                    style="float: left;width: 150px"></el-input>
+          </el-row>
+          <el-divider></el-divider>
+        </el-row>
+        <el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus">添加规格</el-button>
+        <el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-from-inline">
+          <el-form-item label="规格名称">
+            <el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
+          </el-form-item>
+          <el-form-item label="规格属性">
+            <el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ruleAddFormFun">添加</el-button>
+          </el-form-item>
+        </el-form>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -155,13 +196,83 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
-      }
+      },
+      ruleAddForm: {
+        name: null,
+        valueList: null
+      },
+      ruleAddFormStatus: false,
+      addRulePropertyValue: null
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    removeRule(index){
+      this.form.ruleAttrList.splice(index,1);
+    },
+    removeRuleProperty(valueList,index){
+      valueList.splice(index,1);
+    },
+    addRuleProperty(ruleAttr,continuousInput){
+      if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
+        if (!continuousInput){
+          ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
+        }
+        return;
+      }
+      if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){
+        this.$message({
+          message: `规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
+          type: 'warning'
+        });
+        return;
+      }
+      ruleAttr.valueList.push(this.addRulePropertyValue)
+      this.addRulePropertyValue = null;
+      if (!continuousInput){
+        ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
+      }
+    },
+    ruleAddFormFun(){
+      if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
+        this.$message({
+          message: '规格名称不能为空',
+          type: 'warning'
+        });
+        return;
+      }
+      if (this.ruleAddForm.valueList === null || this.ruleAddForm.valueList.length === 0){
+        this.$message({
+          message: '规格属性不能为空',
+          type: 'warning'
+        })
+        return;
+      }
+      let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name === this.ruleAddForm.name);
+      if (ruleAttr === undefined){
+        this.form.ruleAttrList.push({
+          "name": this.ruleAddForm.name,
+          "valueList": [this.ruleAddForm.valueList],
+          "ruleAttrAddStatus": false
+        })
+      }else {
+        if (ruleAttr.valueList.indexOf(this.ruleAddForm.valueList) > -1){
+          this.$message({
+            message: `规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.valueList}]已经存在`,
+            type: 'warning'
+          });
+          return;
+        }
+        ruleAttr.valueList.push(this.ruleAddForm.valueList)
+      }
+      this.ruleAddForm = {
+        name: null,
+        valueList: null,
+      }
+      this.ruleAddFormStatus = false;
+    },
     /** 查询商品规格列表 */
     getList() {
       this.loading = true;
@@ -183,10 +294,7 @@ export default {
         name: null,
         status: null,
         remark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
+        ruleAttrList: []
       };
       this.resetForm("form");
     },