品类模块，填入属性组组件

src/components/CheckAttributes/index.vue

@@ -6,18 +6,18 @@
       </div>
       <el-card class="box-card" >
         <div slot="header" class="clearfix">
-          <span>已选属性</span>
+          <span>已选属性组</span>
-          <span>已选属性ids ：：{{this.checkedAttributeIds}}</span>
+          <span>已选属性组ids ：：{{this.checkedAttributeGroupIds}}</span>
-          <span>属性：：{{this.checkedAttributeList}} </span>
+          <span>属性组：：{{this.checkedAttributeGroupList}} </span>
         </div>
         <el-row :gutter="20"  style="height: 100px">
-          <el-col :span="3" v-for="(attribute,index) in checkedAttributeList">
+          <el-col :span="3" v-for="(attributeGroup,index) in checkedAttributeGroupList">
             <el-tag
               style="margin: 0 10px"
-              :key="attribute.name"
+              :key="attributeGroup.name"
               closable
               @close="removeCheck(index)">
-              {{attribute.name}}
+              {{attributeGroup.name}}
             </el-tag>
           </el-col>
         </el-row>
@@ -31,7 +31,7 @@
           <el-col :span="3"
                   v-for="attribute in attributeList">
             <el-checkbox
-              v-model="checkedAttributeIds"
+              v-model="checkedAttributeGroupIds"
               :value="attribute.id"
               :key="attribute.id"
               :label="attribute.id"
@@ -47,7 +47,7 @@
 </template>
 <script>
 
-import {listAttribute} from "@/api/product/attribute";
+import {listGroup} from "@/api/product/attribute_group";
 
 export default {
   name:"AttributeElement",
@@ -65,9 +65,9 @@ export default {
   data() {
     // 数据
     return{
-      checkedAttributeIds: [],
+      checkedAttributeGroupIds: [],
       //已选属性数组
-      checkedAttributeList: [],
+      checkedAttributeGroupList: [],
       //商品属性表
       attributeList: [],
       // 属性组数据
@@ -79,26 +79,25 @@ export default {
   },
   // 挂载方法
   created() {
-    this.getAttribute()
+    this.getList()
   },
   watch:{
     value: {
       handler(val) {
         console.log("进入初始化value::"+val.toString())
-        if (val.toString() !== this.checkedAttributeIds.toString()){
+        if (val.toString() !== this.checkedAttributeGroupIds.toString()){
-          this.checkedAttributeIds = val
+          this.checkedAttributeGroupIds = val
-          this.checkedAttributeList = []
+          this.checkedAttributeGroupList = []
         }
-        console.log("选中的ids：："+this.checkedAttributeIds)
+        console.log("选中的ids：："+this.checkedAttributeGroupIds)
       },
       immediate: true
     },
-    checkedAttribute:{
+    checkedAttributeGroup:{
       handler(val) {
-        console.log("进入初始化checkedAttribute::"+val.toString())
         if (val !==undefined && val.length>0){
-          this.checkedAttributeList = val
+          this.checkedAttributeGroupList = val
-          this.checkedAttributeIds = this.checkedAttributeList.map(checked => checked.id)
+          this.checkedAttributeGroupIds = this.checkedAttributeGroupList.map(checked => checked.id)
         }
       },
       immediate: true
@@ -108,24 +107,25 @@ export default {
   methods: {
     /** 属性复选框选择事件 */
     handleCheckedAttributeChange(attribute){
-      let isChecked = this.checkedAttributeIds.indexOf(attribute.id) > -1;
+      let isChecked = this.checkedAttributeGroupIds.indexOf(attribute.id) > -1;
       if (isChecked){
-        this.checkedAttributeList.push(attribute)
+        this.checkedAttributeGroupList.push(attribute)
       }else {
         //删除属性
-        this.checkedAttributeList.splice(
+        this.checkedAttributeGroupList.splice(
-          this.checkedAttributeList.indexOf(attribute),1
+          this.checkedAttributeGroupList.indexOf(attribute),1
         )
       }
-      this.$emit("input",this.checkedAttributeIds)
+      //将组件改变的值传给调用者
-      console.log(this.checkedAttributeList)
+      this.$emit("input",this.checkedAttributeGroupIds)
-      // this.checkedAttributeList.splice(this.checkedAttributeIds.indexOf(attribute.id),1)
+      console.log(this.checkedAttributeGroupList)
+      // this.checkedAttributeGroupList.splice(this.checkedAttributeGroupIds.indexOf(attribute.id),1)
     },
     //关闭标签
     removeCheck(index) {
       console.log(index)
-      this.checkedAttributeList.splice(index,1);
+      this.checkedAttributeGroupList.splice(index,1);
-      this.checkedAttributeIds.splice(index,1)
+      this.checkedAttributeGroupIds.splice(index,1)
     },
     // 取消按钮
     cancel() {
@@ -133,12 +133,12 @@ export default {
       this.reset();
     },
     /** 查询属性列表 */
-    getAttribute(){
+    getList(){
-      listAttribute(this.queryParams).then(response => {
+      this.loading = true
-        console.log('属性集合')
+      listGroup(this.queryParams).then(response => {
-        console.log(response)
+        this.groupList = response.data.rows;
-        this.attributeList = response.data.rows;
         this.total = response.data.total;
+        this.loading = false;
       });
     },
   }

src/views/product/categoryInfo/index.vue

@@ -128,17 +128,19 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="备注" prop="remark">
+            <el-form-item label="备注" prop="remark"  style="height: 150px">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-tabs v-model="activeName" @tab-click="handleClick">
-          <el-tab-pane label="用户管理" name="first">
+          <el-tab-pane label="属性" name="first">
-            <AttributeElement ></AttributeElement>
+            <AttributeGroupElement v-model="form.checkedAttributeIds"></AttributeGroupElement>
           </el-tab-pane>
-          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+          <el-tab-pane label="属性组" name="second">
-          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+            <AttributeElement v-model="form.checkedAttributeIds"></AttributeElement>
+          </el-tab-pane>
+          <el-tab-pane label="品牌" name="third">角色管理</el-tab-pane>
         </el-tabs>
 
       </el-form>
@@ -163,7 +165,7 @@ export default {
   },
   data() {
     return {
-      activeName: 'second',
+      activeName: 'first',
 
       // 遮罩层
       loading: true,
@@ -201,6 +203,16 @@ export default {
         status: [
           { required: true, message: "是否启用不能为空", trigger: "change" }
         ],
+        checkedAttributeIds: [
+          { required: true, message: "属性不能为空", trigger: "change" }
+        ],
+        checkedAttributeGroupList: [
+          { required: true, message: "属性组不能为空", trigger: "change" }
+        ],
+        checkedBrandList: [
+          { required: true, message: "品牌不能为空", trigger: "change" }
+        ],
+
       }
     };
   },
@@ -258,7 +270,10 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        checkedAttributeIds: [],
+        checkedAttributeGroupList: [],
+        checkedBrandList: []
       };
       this.resetForm("form");
     },
@@ -299,6 +314,7 @@ export default {
         this.form.parentId = row.id;
       }
       getCategory_info(row.id).then(response => {
+        console.log(response)
         this.form = response.data;
         this.open = true;
         this.title = "修改品类信息";