商品品类获取公共属性

src/api/product/category.js

@@ -17,6 +17,14 @@ 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

@@ -70,6 +70,10 @@ export default {
     value: {
       type: Array,
       default: []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   watch: {
@@ -82,6 +86,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() {
     return {

src/components/CheckAttributeGroup/index.vue

@@ -67,6 +67,10 @@ export default {
     value: {
       type: Array,
       default: []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   data() {
@@ -92,6 +96,15 @@ export default {
       },
       immediate: true,
     },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedAttributeGroupList = val;
+          this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
   },
   created() {
     this.queryAttributeGroup();

src/components/CheckBrand/index.vue

@@ -67,6 +67,10 @@ export default {
     value: {
       type: Array,
       default: []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   data() {
@@ -92,6 +96,15 @@ export default {
       },
       immediate: true,
     },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedBrandList = val;
+          this.brandIdList = this.checkedBrandList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
   },
   created() {
     this.queryBrand();

src/views/product/category/index.vue

@@ -150,13 +150,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>
 
@@ -170,7 +170,14 @@
 </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";
 
@@ -228,9 +235,26 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
-      }
+      },
+      attributeInfoList: [],
+      attributeGroupList: [],
+      brandInfoList: [],
     };
   },
+  watch: {
+    'form.parentId': {
+      handler(val){
+        if (val !== undefined && val !== 0){
+          parentCommonElement(val).then(response => {
+            this.attributeInfoList = response.data.attributeInfoList;
+            this.attributeGroupList = response.data.attributeGroupList;
+            this.brandInfoList = response.data.brandInfoList;
+          })
+        }
+      },
+      immediate: true
+    }
+  },
   created() {
     this.getList();
   },