商品共有元素 - 新增

src/views/product/info/index.vue

@@ -241,9 +241,9 @@
             <el-tab-pane label="商品属性" name="attribute">
               <el-row style="overflow-x: auto; height: 300px;">
                 <el-form ref="form" :model="form" label-width="80px">
-                  <el-col :span="6" v-for="index in 10">
+                  <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
-                    <el-form-item :label="'属性'+index">
+                    <el-form-item :label="templateAttribute.name" >
-                      <el-input v-model="form.name"></el-input>
+                      <el-input v-model="templateAttribute.value"></el-input>
                     </el-form-item>
                   </el-col>
                 </el-form>
@@ -278,9 +278,9 @@
                   <span>选择属性</span>
                 </div>
                 <el-row style="height: 80px; overflow-y: auto">
-                  <el-checkbox-group v-model="attributeCheckedList">
+                  <el-checkbox-group v-model="attributeIdCheckedList" @change="attributeCheckedFun">
-                    <el-col :span="4" v-for="index in 40" style="margin: 5px 0">
+                    <el-col :span="4" v-for="attribute in categoryCommonElement.attributeList" style="margin: 5px 0">
-                      <el-checkbox :label="'复选框'+index" border></el-checkbox>
+                      <el-checkbox :label="attribute.id" :value="attribute.id" :key="attribute.id" border>{{attribute.name}}</el-checkbox>
                     </el-col>
                   </el-checkbox-group>
                 </el-row>
@@ -291,9 +291,9 @@
                 </div>
                 <el-row style="overflow-x: auto; height: 300px;">
                   <el-form ref="form" :model="form" label-width="80px">
-                    <el-col :span="6" v-for="index in 10">
+                    <el-col :span="6" v-for="attribute in attributeCheckedList">
-                      <el-form-item :label="'属性'+index">
+                      <el-form-item :label="attribute.name">
-                        <el-input v-model="form.name"></el-input>
+                        <el-input v-model="attribute.value"></el-input>
                       </el-form-item>
                     </el-col>
                   </el-form>
@@ -396,6 +396,7 @@ export default {
 
       },
       customPropertiesFormStatus: false,
+      attributeIdCheckedList: [],
       attributeCheckedList: [],
       categoryCommonElement: {
         templateAttributeGroupList: [],
@@ -438,6 +439,28 @@ export default {
     this.getList();
   },
   methods: {
+    attributeCheckedFun(checkedValue) {
+      console.log(checkedValue)
+      // attributeIdCheckedList -> attributeCheckedList 不在
+      // 1 -> ID 1 : attributeCheckedList[] -> 1
+      // 2 -> ID 3 : attributeCheckedList[1] -> 3
+      let attributeId =this.attributeIdCheckedList
+        .find(attributeId =>
+          this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1
+        )
+      if (attributeId !== undefined){
+        let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
+        this.attributeCheckedList.push(attributeInfo);
+      }else {
+        // attributeIdCheckedList [3] : attributeCheckedList [] -> [3]
+        // attributeIdCheckedList [3,5] : attributeCheckedList [3] -> [3,5]
+        // attributeIdCheckedList [3,5,9] : attributeCheckedList [3,5] -> [3,5,9]
+        // attributeIdCheckedList [3,9] : attributeCheckedList [3,5,9] -> [3,9]
+        // attributeCheckedList 集合  不在 attributeIdCheckedList 集合的元素，然后删除
+
+      }
+
+    },
     initRuleList(){
       listRule({"params[isPage]": false}).then(response => {
         this.ruleList = response.data;