From 561000160e359c6dddd4e0313316dd0037f4493a Mon Sep 17 00:00:00 2001
From: 20300 <643145201@qq.com>
Date: Mon, 11 Mar 2024 20:55:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=88=B6=E5=AD=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BC=A0=E5=80=BC=E7=9A=84=E9=97=AE=E9=A2=98,=20?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=94=E5=9C=A8=E7=88=B6=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E5=AD=90=E7=BB=84=E4=BB=B6=E6=96=B9=E6=B3=95,?=
 =?UTF-8?q?=E6=9D=A5=E8=BF=9B=E8=A1=8C=E7=BD=AE=E7=A9=BA,=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=88=B6=E7=BA=A7=E5=93=81=E7=B1=BB=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=9A=84=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/product/category.js                   | 21 +++++
 src/components/CheckAttribute/index.vue       | 38 +++++++--
 src/components/CheckAttributeGroup/index.vue  | 34 +++++++-
 src/components/CheckBrand/index.vue           | 32 +++++++-
 .../product/attribute/attributeGroup.vue      | 10 ++-
 src/views/product/attribute/index.vue         |  9 ++-
 src/views/product/brand/index.vue             |  9 ++-
 src/views/product/category/index.vue          | 81 ++++++++++++++-----
 src/views/product/upload/uploadPic.vue        |  3 +
 9 files changed, 195 insertions(+), 42 deletions(-)

diff --git a/src/api/product/category.js b/src/api/product/category.js
index ba0f4d7..63036de 100644
--- a/src/api/product/category.js
+++ b/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'
+  })
+}
+
diff --git a/src/components/CheckAttribute/index.vue b/src/components/CheckAttribute/index.vue
index cdfdb7e..a057ff8 100644
--- a/src/components/CheckAttribute/index.vue
+++ b/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)
     },
diff --git a/src/components/CheckAttributeGroup/index.vue b/src/components/CheckAttributeGroup/index.vue
index 5276525..44483e6 100644
--- a/src/components/CheckAttributeGroup/index.vue
+++ b/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);
diff --git a/src/components/CheckBrand/index.vue b/src/components/CheckBrand/index.vue
index 4664919..a9814fa 100644
--- a/src/components/CheckBrand/index.vue
+++ b/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)
diff --git a/src/views/product/attribute/attributeGroup.vue b/src/views/product/attribute/attributeGroup.vue
index 8f96426..65f997c 100644
--- a/src/views/product/attribute/attributeGroup.vue
+++ b/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
           }
diff --git a/src/views/product/attribute/index.vue b/src/views/product/attribute/index.vue
index 41d675e..856d7ba 100644
--- a/src/views/product/attribute/index.vue
+++ b/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)
diff --git a/src/views/product/brand/index.vue b/src/views/product/brand/index.vue
index 6fc527a..c82a8c5 100644
--- a/src/views/product/brand/index.vue
+++ b/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
           }
diff --git a/src/views/product/category/index.vue b/src/views/product/category/index.vue
index 02424b1..d1b3f40 100644
--- a/src/views/product/category/index.vue
+++ b/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: [] };
-          data.children = this.handleTree(response.data, "id", "parentId");
-          this.categoryOptions.push(data);
+          this.categoryOptions = this.handleTree(response.data, "id", "parentId");
+
         });
-      },
-      getCategoryList() {
-        getCategoryList(this.likeName).then(
-          res => {
-            this.categoryList = res.data
-          }
-        )
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
diff --git a/src/views/product/upload/uploadPic.vue b/src/views/product/upload/uploadPic.vue
index a451e51..e4abb13 100644
--- a/src/views/product/upload/uploadPic.vue
+++ b/src/views/product/upload/uploadPic.vue
@@ -35,6 +35,9 @@
     watch: {},
     //方法集合",
     methods: {
+      deleteImage(newVal){
+        this.imageUrl = newVal
+      },
       handleAvatarSuccess(res, file) {
         console.log(res,file)