From d928f8fe5526827f48d507a6c8584bfac80be98e Mon Sep 17 00:00:00 2001
From: 20300 <643145201@qq.com>
Date: Thu, 7 Mar 2024 21:24:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9E=84=E5=BB=BA=E4=BA=86=E5=8D=8A=E5=8D=8A?=
 =?UTF-8?q?=E6=88=90=E5=93=81=E7=9A=84=E7=BB=84=E4=BB=B6,=E6=98=8E?=
 =?UTF-8?q?=E5=A4=A9=E8=A6=81=E7=AD=9B=E9=80=89=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/product/category.js          |   9 ++
 src/components/CheckBrand/index.vue  | 102 ++++++++++++++++++
 src/views/product/category/index.vue | 156 +++++++++++++++++++++++++++
 3 files changed, 267 insertions(+)
 create mode 100644 src/api/product/category.js
 create mode 100644 src/components/CheckBrand/index.vue
 create mode 100644 src/views/product/category/index.vue

diff --git a/src/api/product/category.js b/src/api/product/category.js
new file mode 100644
index 0000000..3523757
--- /dev/null
+++ b/src/api/product/category.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getCategoryList(likeName) {
+  return request({
+    url: '/product/category/getCategoryList',
+    method: 'get',
+    data: likeName
+  })
+}
diff --git a/src/components/CheckBrand/index.vue b/src/components/CheckBrand/index.vue
new file mode 100644
index 0000000..cd5723d
--- /dev/null
+++ b/src/components/CheckBrand/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <el-row>
+      <el-card class="box-card">
+        <div>
+          <span>选择属性关联关系</span>
+        </div>
+        <el-card class="box-card">
+          <div>
+            <span>已选属性</span>
+          </div>
+          <el-col>
+            <el-tag
+              v-for="brand in selectBrandIdList"
+              :key="brand.name"
+              closable
+              type="success">
+              {{brand.name}}
+            </el-tag>
+          </el-col>
+        </el-card>
+        <el-card class="box-card">
+          <div>
+            <span>可选属性</span>
+          </div>
+          <el-col>
+            <el-checkbox
+              v-for="brand in brandList"
+              v-model="selectBrandIdList"
+              :label="brand"
+              :key="brand.id">
+              {{brand.name}}</el-checkbox>
+          </el-col>
+        </el-card>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+  import {getBrandList} from "@/api/product/brand";
+
+export default {
+    name: 'CheckBrand',
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        //所有brandList
+        brandList: [],
+        //已选中brand属性
+        selectBrandIdList: [
+        ],
+        //父类选中的brand属性
+        parentSelectBrandList: []
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      getBrandList() {
+        getBrandList("").then(
+          res => {
+            this.brandList = res.data
+          }
+        )
+      }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.getBrandList()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/product/category/index.vue b/src/views/product/category/index.vue
new file mode 100644
index 0000000..0eabadd
--- /dev/null
+++ b/src/views/product/category/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <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" >
+            <el-form-item label="父级品类" prop="parentId">
+              <treeselect v-model="categoryList.parentId" :options="categoryOptions" :normalizer="normalizer"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="品类名称" :label-width="100">
+              <el-input v-model="insertCategoryReq.name"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="图片上传" :label-width="120">
+              <upload-pic ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="品类简介" :label-width="100">
+              <el-input v-model="insertCategoryReq.introduction"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isInsertCategory = false">取 消</el-button>
+        <el-button type="primary" @click="isInsertCategory = false">确 定</el-button>
+      </div>
+    </el-dialog>
+    <check-brand></check-brand>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {getCategoryList} from "@/api/product/category";
+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";
+
+  export default {
+    //import引入的组件需要注入到对象中才能使用"
+    components: {Treeselect,UploadPic,CheckBrand},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        //查询品类所需参数
+        likeName: "",
+        isInsertCategory: false,
+        formLabelWidth: 120,
+        categoryOptions: [],
+        //查询到的所有品类
+        categoryList: [],
+        //新增请求对象
+        insertCategoryReq: {
+          id: null,
+          name: "",
+          image: "",
+          parentId: null,
+          introduction: "",
+          brandIdList: [],
+          attributeIdList: [],
+          attributeGroupList: []
+        },
+        //查询出的品牌,属性,属性组,集合
+        brandList: [],
+        attributeList: [],
+        attributeGroupList: [],
+        //已选中的品牌,属性 属性组集合
+        selectBrandList: [],
+        selectAttributeList: [],
+        selectAttributeGroupList: [],
+        //注: 上一级目录已选中的品牌,属性,属性组,不在可选列表展示
+        //上一级目录所选中的品牌,属性,属性组,可以到后端先根据id查出来,然后添加到新品类目录
+        //所有上级目录已选中品牌,属性,属性组
+        parentSelectBrandList: [],
+        parentSelectAttributeList: [],
+        parentSelectAttributeGroupList: []
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      handleImageUrl() {
+        const imageUrl = this.$refs.uploadPic.imageUrl;
+        this.insertCategoryReq.image = imageUrl
+        console.log("获取到的图片地址：", imageUrl);
+      },
+      /** 转换品类信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.id,
+          label: node.name,
+          children: node.children
+        };
+      },
+      /** 查询品类信息下拉树结构 */
+      getTreeSelect() {
+        getCategoryList(this.likeName).then(response => {
+          this.categoryOptions = [];
+          const data = { id: 0, name: '顶级节点', children: [] };
+          data.children = this.handleTree(response.data, "id", "parentId");
+          this.categoryOptions.push(data);
+        });
+      },
+      getCategoryList() {
+        getCategoryList(this.likeName).then(
+          res => {
+            this.categoryList = res.data
+          }
+        )
+      }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.getTreeSelect()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>