完善父子组件传值的问题,

并且在父组件调用子组件方法,来进行置空,更新父级品类选中列表的操作

src/api/product/category.js

@@ -16,3 +16,24 @@ export function insertCategory(insertCategoryReq) {
   })
 }
 
+export function getAllCategoryAttribute(categoryId) {
+  return request({
+    url: '/product/category/getAllCategoryAttribute?categoryId='+categoryId,
+    method: 'get'
+  })
+}
+
+export function getAllCategoryAttributeGroup(categoryId) {
+  return request({
+    url: '/product/category/getAllCategoryAttributeGroup?categoryId='+categoryId,
+    method: 'get'
+  })
+}
+
+export function getAllCategoryBrand(categoryId) {
+  return request({
+    url: '/product/category/getAllCategoryBrand?categoryId='+categoryId,
+    method: 'get'
+  })
+}
+

src/components/CheckAttribute/index.vue

@@ -3,11 +3,11 @@
     <el-row>
       <el-card class="box-card">
         <div>
-          <span>选择品牌关联关系</span>
+          <span>选择属性关联关系</span>
         </div>
         <el-card class="box-card" style="height: 150px;">
           <div>
-            <span>已选品牌</span>
+            <span>已选属性</span>
           </div>
           <el-col>
             <el-tag
@@ -22,7 +22,7 @@
         </el-card>
         <el-card class="box-card" style="height: 150px;">
           <div>
-            <span>可选品牌</span>
+            <span>可选属性</span>
           </div>
           <el-col>
             <el-checkbox
@@ -42,12 +42,14 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
 import {list} from "@/api/product/attribute";
+import {getAllCategoryAttribute} from "@/api/product/category";
 
 export default {
   name: 'CheckAttribute',
   //import引入的组件需要注入到对象中才能使用"
   components: {},
-  props: {},
+  props: {
+  },
   data() {
     //这里存放数据"
 
@@ -58,7 +60,8 @@ export default {
       selectAttributeList: [
       ],
       //父类选中的brand属性
-      parentSelectAttributeList: []
+      parentSelectAttributeList: [],
+      parentId: null
     };
   },
   //计算属性 类似于data概念",
@@ -73,6 +76,31 @@ export default {
   },
   //方法集合",
   methods: {
+    updateParentId(newParentId) {
+      if (newParentId == undefined){
+        newParentId = 0;
+      }
+      getAllCategoryAttribute(newParentId).then(
+        res => {
+          console.log("属性已选中:",res)
+          this.selectAttributeList = []
+          this.parentSelectAttributeList = res.data
+          this.attributeList.forEach(
+            attr => {
+              this.parentSelectAttributeList.forEach(
+                parentSelect => {
+                  if (attr.id == parentSelect.id){
+                    console.log("添加了吗?")
+                    this.selectAttributeList.push(attr)
+                  }
+                }
+              )
+            }
+          )
+          console.log("属性:",res)
+        }
+      )
+    },
     setAttributeListToParent(newVal) {
       this.$emit("setCheckAttributeList", newVal)
     },

src/components/CheckAttributeGroup/index.vue

@@ -23,6 +23,7 @@
         <el-card class="box-card" style="height: 150px;">
           <div>
             <span>可选属性组</span>
+            <el-input type="text" v-model="parentId"></el-input>
           </div>
           <el-col>
             <el-checkbox
@@ -43,12 +44,15 @@
 //例如：import 《组件名称》 from '《组件路径》,
 import {getBrandList} from "@/api/product/brand";
 import {getAttributeGroupList} from "@/api/product/attribute";
+import {getAllCategoryAttributeGroup} from "@/api/product/category";
 
 export default {
   name: 'CheckAttributeGroup',
   //import引入的组件需要注入到对象中才能使用"
   components: {},
-  props: {},
+  //子组件只需要一个props就可以得到父组件传来的值
+  props: {
+  },
   data() {
     //这里存放数据"
 
@@ -59,7 +63,8 @@ export default {
       selectAttributeGroupList: [
       ],
       //父类选中的brand属性
-      parentSelectAttributeGroupList: []
+      parentSelectAttributeGroupList: [],
+      parentId: null
     };
   },
   //计算属性 类似于data概念",
@@ -74,8 +79,31 @@ export default {
   },
   //方法集合",
   methods: {
+    updateParentId(newParentId) {
+      if (newParentId == undefined){
+        newParentId = 0;
+      }
+      getAllCategoryAttributeGroup(newParentId).then(
+        res => {
+          this.parentSelectAttributeGroupList = res.data
+          this.selectAttributeGroupList = []
+          this.attributeGroupList.forEach(
+            attrGroup => {
+              this.parentSelectAttributeGroupList.forEach(
+                parentSelect => {
+                  if (attrGroup.id == parentSelect.id){
+                    this.selectAttributeGroupList.push(attrGroup)
+                  }
+                }
+              )
+            }
+          )
+          console.log("属性组",res)
+        }
+      )
+    },
     setAttributeGroupListToParent(newVal) {
-      this.$emit("setCheckAttributeList", newVal)
+      this.$emit("setCheckAttributeGroupList", newVal)
     },
     handleClose(tag) {
       this.selectAttributeGroupList.splice(this.selectAttributeGroupList.indexOf(tag), 1);

src/components/CheckBrand/index.vue

@@ -23,6 +23,7 @@
         <el-card class="box-card" style="height: 150px;">
           <div>
             <span>可选品牌</span>
+            <el-input v-model="parentId"></el-input>
           </div>
           <el-col>
             <el-checkbox
@@ -42,12 +43,15 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
   import {getBrandList} from "@/api/product/brand";
+import {getAllCategoryBrand} from "@/api/product/category";
+import brand from "@/views/product/brand/index.vue";
 
 export default {
     name: 'CheckBrand',
     //import引入的组件需要注入到对象中才能使用"
     components: {},
-    props: {},
+    props: {
+    },
     data() {
       //这里存放数据"
 
@@ -55,10 +59,10 @@ export default {
         //所有brandList
         brandList: [],
         //已选中brand属性
-        selectBrandList: [
+        selectBrandList: [],
-        ],
         //父类选中的brand属性
-        parentSelectBrandList: []
+        parentSelectBrandList: [],
+        parentId: null
       };
     },
     //计算属性 类似于data概念",
@@ -73,6 +77,26 @@ export default {
     },
     //方法集合",
     methods: {
+      updateParentId(newParentId) {
+        if (newParentId == undefined){
+          newParentId = 0;
+        }
+        getAllCategoryBrand(newParentId).then(
+          res => {
+            this.parentSelectBrandList = res.data
+            this.selectBrandList = []
+            if (this.parentSelectBrandList.length > 0){
+              this.parentSelectBrandList.forEach(parentSelect => this.brandList.forEach(
+                brand => {
+                  if (brand.id == parentSelect.id){
+                    this.selectBrandList.push(brand)
+                  }
+                }
+              ))
+            }
+          }
+        )
+      },
       //像父组件中传递数据的方法
       setBrandListToParent(newVal) {
         this.$emit("setCheckBrandList",newVal)

src/views/product/attribute/attributeGroup.vue

@@ -120,7 +120,9 @@ export default {
     name: "attributeGroup",
     //import引入的组件需要注入到对象中才能使用"
     components: {},
-    props: {},
+    props: {
+
+    },
     data() {
 
       //这里存放数据"
@@ -138,7 +140,6 @@ export default {
         //未选中
         attributeList: [],
         attr:{}
-
       };
     },
     //计算属性 类似于data概念",
@@ -147,6 +148,7 @@ export default {
     watch: {},
     //方法集合",
     methods: {
+
       //修改
       handleDelete(index, row) {
         this.isOpenAddAttributeGroup = true
@@ -215,7 +217,7 @@ export default {
       },
       //得到属性组列表
       getAttributeGroupList(){
-        getAttributeGroupList(this.attributeName).then(
+        getAttributeGroupList(0).then(
           res => {
             console.log(res);
             this.attributeGroupList = res.data
@@ -233,7 +235,7 @@ export default {
       },
       queryAttributeList(){
         this.isOpenAddAttributeGroup = true
-        list(this.attributeQueryName).then(
+        list(0).then(
           res => {
             this.attributeList = res.data
           }

src/views/product/attribute/index.vue

@@ -76,6 +76,7 @@
           <el-input v-model="addAttribute.remark" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
+
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelInsert">取 消</el-button>
         <el-button type="primary" @click="insertAttribute">确 定</el-button>
@@ -94,7 +95,8 @@ export default {
     name: 'attribute',
     //import引入的组件需要注入到对象中才能使用"
     components: {},
-    props: {},
+    props: {
+    },
     data() {
       //这里存放数据"
 
@@ -110,7 +112,7 @@ export default {
           remark: ''
         },
         //是否显示新增谈话框
-        openAdd: false
+        openAdd: false,
       };
     },
     //计算属性 类似于data概念",
@@ -119,6 +121,7 @@ export default {
     watch: {},
     //方法集合",
     methods: {
+      //获取父组件传值
       //修改方法
       handleEdit(index, row) {
         console.log(index, row);
@@ -140,7 +143,7 @@ export default {
       },
       //获取列表方法
       getAttributeList(){
-        list(this.attributeName).then(
+        list(0).then(
           res => {
             this.attributeList = res.data
             console.log(res)

src/views/product/brand/index.vue

@@ -86,7 +86,8 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
     components: {
       UploadPic,
     },
-    props: {},
+    props: {
+    },
     data() {
       //这里存放数据"
 
@@ -95,7 +96,7 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
         insertBrandReg:{},
         isInsertBrandOpen: false,
         brandList: [],
-        brandName: ""
+        brandName: "",
       };
     },
     //计算属性 类似于data概念",
@@ -104,6 +105,8 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
     watch: {},
     //方法集合",
     methods: {
+      //获取父组件传递来的值
+
       handleEdit(index, row) {
         this.isInsertBrandOpen = true
         this.insertBrandReg = row
@@ -119,7 +122,7 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
         console.log(index, row);
       },
       getBrandList() {
-        getBrandList(this.brandName).then(
+        getBrandList(0).then(
           res =>{
             this.brandList = res.data
           }

src/views/product/category/index.vue

@@ -1,14 +1,44 @@
 <template>
   <div>
 
+    <el-table
+      :data="categoryOptions"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      default-expand-all
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column
+        prop="id"
+        label="编号"
+        sortable
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="品类名称"
+        sortable
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="introduction"
+        label="介绍">
+      </el-table-column>
+      <el-table-column label="图像">
+        <template slot-scope="scope">
+          <img :src="scope.row.image" alt="图片损坏">
+        </template>
+      </el-table-column>
+    </el-table>
+
+
     <el-button size="mini" type="primary" @click="isInsertCategory=true">新增</el-button>
     <el-dialog title="新增品类" :visible.sync="isInsertCategory" width="80%" append-to-body>
       <el-form :model="insertCategoryReq">
         <el-row>
           <el-col :span="12" >
-            {{insertCategoryReq.parentId}}
             <el-form-item label="父级品类" prop="parentId">
-              <treeselect v-model="insertCategoryReq.parentId" :options="categoryOptions" :normalizer="normalizer"/>
+              <treeselect v-model="insertCategoryReq.parentId"  :options="categoryOptions" :normalizer="normalizer"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -20,7 +50,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="图片上传" :label-width=formLabelWidth>
-              <upload-pic ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
+              <upload-pic  ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -33,13 +63,13 @@
           <el-col :span="24">
             <el-tabs v-model="activeName" @tab-click="handleClick">
               <el-tab-pane label="品牌管理" name="first">
-                <check-brand @setCheckBrandList="getCheckBrandList"></check-brand>
+                <check-brand @setCheckBrandList="getCheckBrandList" ref="checkBrand"></check-brand>
               </el-tab-pane>
               <el-tab-pane label="属性组管理" name="second">
-                <check-attribute-group @setCheckAttributeList="getCheckAttributeGroupList"></check-attribute-group>
+                <check-attribute-group @setCheckAttributeGroupList="getCheckAttributeGroupList" ref="checkAttributeGroup"></check-attribute-group>
               </el-tab-pane>
               <el-tab-pane label="属性管理" name="third">
-                <check-attribute @setCheckAttributeList="getCheckAttributeList"></check-attribute>
+                <check-attribute @setCheckAttributeList="getCheckAttributeList" ref="checkAttribute" ></check-attribute>
               </el-tab-pane>
             </el-tabs>
           </el-col>
@@ -55,6 +85,7 @@
 </template>
 
 <script>
+//
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
 import {getCategoryList, insertCategory} from "@/api/product/category";
@@ -62,7 +93,7 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import UploadPic from "@/views/product/upload/uploadPic.vue";
 import CheckBrand from "@/components/CheckBrand/index.vue";
-import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";
+import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";    //第一步引入子组件
 import CheckAttribute from "@/components/CheckAttribute/index.vue";
 
 
@@ -113,9 +144,27 @@ export default {
     //计算属性 类似于data概念",
     computed: {},
     //监控data中的数据变化",
-    watch: {},
+    watch: {
+      'insertCategoryReq.parentId': function (newVal,oldVal){
+        this.$refs.checkAttribute.updateParentId(newVal)
+        this.$refs.checkAttributeGroup.updateParentId(newVal)
+        this.$refs.checkBrand.updateParentId(newVal)
+      },
+      'insertCategoryReq.image': function (newVal) {
+        this.$refs.uploadPic.deleteImage(newVal)
+      }
+    },
     //方法集合",likeName不存在
     methods: {
+      deleteImage() {
+
+      },
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
       //新增品类
       insertCategory() {
         insertCategory(this.insertCategoryReq).then(
@@ -132,10 +181,9 @@ export default {
                 attributeList: [],
                 attributeGroupList: []
             }
-
+            this.getTreeSelect();
           }
         )
-        console.log(this.insertCategoryReq)
       },
       //获取属性组子组件的方法
       getCheckAttributeGroupList(checkAttributeGroupList) {
@@ -172,18 +220,11 @@ export default {
       /** 查询品类信息下拉树结构 */
       getTreeSelect() {
         getCategoryList(this.likeName).then(response => {
+          console.log("获得的返回值是:",response)
           this.categoryOptions = [];
-          const data = { id: 0, name: '顶级节点', children: [] };
+          this.categoryOptions = this.handleTree(response.data, "id", "parentId");
-          data.children = this.handleTree(response.data, "id", "parentId");
+
-          this.categoryOptions.push(data);
         });
-      },
-      getCategoryList() {
-        getCategoryList(this.likeName).then(
-          res => {
-            this.categoryList = res.data
-          }
-        )
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",

src/views/product/upload/uploadPic.vue

@@ -35,6 +35,9 @@
     watch: {},
     //方法集合",
     methods: {
+      deleteImage(newVal){
+        this.imageUrl = newVal
+      },
       handleAvatarSuccess(res, file) {
         console.log(res,file)