品类新增,但是该了请求方法,需要改变id

src/api/product/attribute.js

@@ -1,8 +1,8 @@
 import request from '@/utils/request'
 // 查询属性列表
-export function list(name) {
+export function list(attributeId) {
   return request({
-    url: '/product/attributeInfo/list?name='+name,
+    url: '/product/attributeInfo/list?attributeId='+attributeId,
     method: 'get'
   })
 }
@@ -24,9 +24,9 @@ export function deleteById(attributeInfoId) {
   })
 }
 //获取属性组列表
-export function getAttributeGroupList(attributeName) {
+export function getAttributeGroupList(attributeGroupId) {
   return request({
-    url: '/product/attributeGroup/getAttributeGroupList?attributeName='+attributeName,
+    url: '/product/attributeGroup/getAttributeGroupList?attributeGroupId='+attributeGroupId,
     method: 'get'
   })
 }

src/api/product/brand.js

@@ -8,9 +8,9 @@ export function insertBrand(brandInfo) {
   })
 }
 
-export function getBrandList(likeName) {
+export function getBrandList(brandId) {
   return request({
-    url: '/product/brandInfo/getBrandList?likeName='+likeName,
+    url: '/product/brandInfo/getBrandList?brandId='+brandId,
     method: 'get'
   })
 }

src/api/product/category.js

@@ -7,3 +7,12 @@ export function getCategoryList(likeName) {
     data: likeName
   })
 }
+
+export function insertCategory(insertCategoryReq) {
+  return request({
+    url: '/product/category/insertCategory',
+    method: 'post',
+    data: insertCategoryReq
+  })
+}
+

src/components/CheckAttribute/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-row>
+      <el-card class="box-card">
+        <div>
+          <span>选择品牌关联关系</span>
+        </div>
+        <el-card class="box-card" style="height: 150px;">
+          <div>
+            <span>已选品牌</span>
+          </div>
+          <el-col>
+            <el-tag
+              v-for="attribute in selectAttributeList"
+              :key="attribute.name"
+              closable
+              type="success"
+              @close="handleClose(attribute)">
+              {{attribute.name}}
+            </el-tag>
+          </el-col>
+        </el-card>
+        <el-card class="box-card" style="height: 150px;">
+          <div>
+            <span>可选品牌</span>
+          </div>
+          <el-col>
+            <el-checkbox
+              v-for="attribute in attributeList"
+              v-model="selectAttributeList"
+              :label="attribute"
+              :key="attribute.id">
+              {{attribute.name}}</el-checkbox>
+          </el-col>
+        </el-card>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {list} from "@/api/product/attribute";
+
+export default {
+  name: 'CheckAttribute',
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      //所有brandList
+      attributeList: [],
+      //已选中brand属性
+      selectAttributeList: [
+      ],
+      //父类选中的brand属性
+      parentSelectAttributeList: []
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {
+    selectAttributeList: {
+      handler(newVal, oldVal){
+        this.setAttributeListToParent(newVal);
+      }
+    }
+  },
+  //方法集合",
+  methods: {
+    setAttributeListToParent(newVal) {
+      this.$emit("setCheckAttributeList", newVal)
+    },
+    handleClose(tag) {
+      this.selectAttributeList.splice(this.selectAttributeList.indexOf(tag), 1);
+    },
+    getAttributeList() {
+      list(0).then(
+        res => {
+          this.attributeList = res.data
+        }
+      )
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getAttributeList()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/components/CheckAttributeGroup/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-row>
+      <el-card class="box-card">
+        <div>
+          <span>选择属性组关联关系</span>
+        </div>
+        <el-card class="box-card" style="height: 150px;">
+          <div>
+            <span>已选属性组</span>
+          </div>
+          <el-col>
+            <el-tag
+              v-for="attributeGroup in selectAttributeGroupList"
+              :key="attributeGroup.name"
+              closable
+              type="success"
+              @close="handleClose(attributeGroup)">
+              {{attributeGroup.name}}
+            </el-tag>
+          </el-col>
+        </el-card>
+        <el-card class="box-card" style="height: 150px;">
+          <div>
+            <span>可选属性组</span>
+          </div>
+          <el-col>
+            <el-checkbox
+              v-for="attributeGroup in attributeGroupList"
+              v-model="selectAttributeGroupList"
+              :label="attributeGroup"
+              :key="attributeGroup.id">
+              {{attributeGroup.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";
+import {getAttributeGroupList} from "@/api/product/attribute";
+
+export default {
+  name: 'CheckAttributeGroup',
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      //所有brandList
+      attributeGroupList: [],
+      //已选中brand属性
+      selectAttributeGroupList: [
+      ],
+      //父类选中的brand属性
+      parentSelectAttributeGroupList: []
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {
+    selectAttributeGroupList: {
+      handler(newVal, oldVal){
+        this.setAttributeGroupListToParent(newVal)
+      }
+    }
+  },
+  //方法集合",
+  methods: {
+    setAttributeGroupListToParent(newVal) {
+      this.$emit("setCheckAttributeList", newVal)
+    },
+    handleClose(tag) {
+      this.selectAttributeGroupList.splice(this.selectAttributeGroupList.indexOf(tag), 1);
+    },
+    getAttributeGroupList() {
+      getAttributeGroupList(0).then(
+        res => {
+          this.attributeGroupList = res.data
+        }
+      )
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getAttributeGroupList()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/components/CheckBrand/index.vue

@@ -3,30 +3,31 @@
     <el-row>
       <el-card class="box-card">
         <div>
-          <span>选择属性关联关系</span>
+          <span>选择品牌关联关系</span>
         </div>
-        <el-card class="box-card">
+        <el-card class="box-card" style="height: 150px;">
           <div>
-            <span>已选属性</span>
+            <span>已选品牌</span>
           </div>
           <el-col>
             <el-tag
-              v-for="brand in selectBrandIdList"
+              v-for="brand in selectBrandList"
               :key="brand.name"
               closable
-              type="success">
+              type="success"
+              @close="handleClose(brand)">
               {{brand.name}}
             </el-tag>
           </el-col>
         </el-card>
-        <el-card class="box-card">
+        <el-card class="box-card" style="height: 150px;">
           <div>
-            <span>可选属性</span>
+            <span>可选品牌</span>
           </div>
           <el-col>
             <el-checkbox
               v-for="brand in brandList"
-              v-model="selectBrandIdList"
+              v-model="selectBrandList"
               :label="brand"
               :key="brand.id">
               {{brand.name}}</el-checkbox>
@@ -54,7 +55,7 @@ export default {
         //所有brandList
         brandList: [],
         //已选中brand属性
-        selectBrandIdList: [
+        selectBrandList: [
         ],
         //父类选中的brand属性
         parentSelectBrandList: []
@@ -63,11 +64,24 @@ export default {
     //计算属性 类似于data概念",
     computed: {},
     //监控data中的数据变化",
-    watch: {},
+    watch: {
+      selectBrandList: {
+        handler(newVal, oldVal) {
+          this.setBrandListToParent(newVal)
+        }
+      }
+    },
     //方法集合",
     methods: {
+      //像父组件中传递数据的方法
+      setBrandListToParent(newVal) {
+        this.$emit("setCheckBrandList",newVal)
+      },
+      handleClose(tag) {
+        this.selectBrandList.splice(this.selectBrandList.indexOf(tag), 1);
+      },
       getBrandList() {
-        getBrandList("").then(
+        getBrandList(0).then(
           res => {
             this.brandList = res.data
           }

src/utils/generator/config.js

@@ -3,7 +3,7 @@ export const formConf = {
   formModel: 'formData',
   size: 'medium',
   labelPosition: 'right',
-  labelWidth: 100,
+  labelWidth: "100",
   formRules: 'rules',
   gutter: 15,
   disabled: false,

src/views/product/category/index.vue

@@ -1,64 +1,85 @@
 <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" >
+            {{insertCategoryReq.parentId}}
             <el-form-item label="父级品类" prop="parentId">
-              <treeselect v-model="categoryList.parentId" :options="categoryOptions" :normalizer="normalizer"/>
+              <treeselect v-model="insertCategoryReq.parentId" :options="categoryOptions" :normalizer="normalizer"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="品类名称" :label-width="100">
+            <el-form-item label="品类名称" :label-width="formLabelWidth">
               <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">
+            <el-form-item label="图片上传" :label-width=formLabelWidth>
               <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-form-item label="品类简介" :label-width=formLabelWidth>
               <el-input v-model="insertCategoryReq.introduction"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="品牌管理" name="first">
+                <check-brand @setCheckBrandList="getCheckBrandList"></check-brand>
+              </el-tab-pane>
+              <el-tab-pane label="属性组管理" name="second">
+                <check-attribute-group @setCheckAttributeList="getCheckAttributeGroupList"></check-attribute-group>
+              </el-tab-pane>
+              <el-tab-pane label="属性管理" name="third">
+                <check-attribute @setCheckAttributeList="getCheckAttributeList"></check-attribute>
+              </el-tab-pane>
+            </el-tabs>
+          </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>
+        <el-button type="primary" @click="insertCategory">确 定</el-button>
       </div>
     </el-dialog>
-    <check-brand></check-brand>
   </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {getCategoryList} from "@/api/product/category";
+import {getCategoryList, insertCategory} 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";
+import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";
+import CheckAttribute from "@/components/CheckAttribute/index.vue";
 
-  export default {
+
+
+export default {
     //import引入的组件需要注入到对象中才能使用"
-    components: {Treeselect,UploadPic,CheckBrand},
+    components: {Treeselect,UploadPic,CheckBrand,CheckAttributeGroup, CheckAttribute},
     props: {},
     data() {
       //这里存放数据"
 
       return {
+        activeName: 'second',
         //查询品类所需参数
         likeName: "",
         isInsertCategory: false,
-        formLabelWidth: 120,
+        formLabelWidth: "120",
         categoryOptions: [],
         //查询到的所有品类
         categoryList: [],
@@ -69,8 +90,8 @@ import CheckBrand from "@/components/CheckBrand/index.vue";
           image: "",
           parentId: null,
           introduction: "",
-          brandIdList: [],
+          brandList: [],
-          attributeIdList: [],
+          attributeList: [],
           attributeGroupList: []
         },
         //查询出的品牌,属性,属性组,集合
@@ -93,8 +114,45 @@ import CheckBrand from "@/components/CheckBrand/index.vue";
     computed: {},
     //监控data中的数据变化",
     watch: {},
-    //方法集合",
+    //方法集合",likeName不存在
     methods: {
+      //新增品类
+      insertCategory() {
+        insertCategory(this.insertCategoryReq).then(
+          res => {
+            console.log(res)
+            this.isInsertCategory = false
+            this.insertCategoryReq = {
+              id: null,
+                name: "",
+                image: "",
+                parentId: null,
+                introduction: "",
+                brandList: [],
+                attributeList: [],
+                attributeGroupList: []
+            }
+
+          }
+        )
+        console.log(this.insertCategoryReq)
+      },
+      //获取属性组子组件的方法
+      getCheckAttributeGroupList(checkAttributeGroupList) {
+        this.insertCategoryReq.attributeGroupList = checkAttributeGroupList
+      },
+      //获取属性子组件的方法
+      getCheckAttributeList(checkAttributeList){
+        this.insertCategoryReq.attributeList = checkAttributeList
+      },
+      //获取品牌子组件值的方法:
+      getCheckBrandList(checkBrandList){
+        this.insertCategoryReq.brandList = checkBrandList
+        console.log("获取到的品牌:",this.selectBrandList)
+      },
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
       handleImageUrl() {
         const imageUrl = this.$refs.uploadPic.imageUrl;
         this.insertCategoryReq.image = imageUrl

src/views/tool/build/index.vue

@@ -173,7 +173,7 @@ export default {
       inputComponents,
       selectComponents,
       layoutComponents,
-      labelWidth: 100,
+      labelWidth: "100",
       drawingList: drawingDefault,
       drawingData: {},
       activeId: drawingDefault[0].formId,