From fe9f1516f897b61cda7c6309b8574f964b99d312 Mon Sep 17 00:00:00 2001
From: yuanjunzhe <1374457292@qq.com>
Date: Tue, 12 Mar 2024 15:01:06 +0800
Subject: [PATCH] Default Changelist

---
 src/api/product/attribute.js                  |   2 +-
 src/api/product/attributeGroup.js             |   2 +-
 src/api/product/brand.js                      |  12 +-
 src/api/product/category.js                   |  17 +-
 src/api/product/comment.js                    |  44 ++
 src/api/product/{product.js => info.js}       |  20 +-
 src/api/product/productComment.js             |  44 --
 src/api/product/rule.js                       |   2 +-
 src/components/CheckAttribute/index.vue       | 156 ++++
 src/components/CheckAttributeGroup/index.vue  | 152 ++++
 src/components/CheckBrand/index.vue           | 152 ++++
 src/components/ImageUpload/index.vue          |   1 +
 src/views/product/attribute/index.vue         |  47 +-
 src/views/product/attributeGroup/index.vue    | 219 +++++-
 src/views/product/brand/index.vue             |  77 +-
 src/views/product/category/index.vue          | 168 ++--
 .../{productComment => comment}/index.vue     |  75 +-
 src/views/product/info/index.vue              | 742 ++++++++++++++++++
 src/views/product/product/index.vue           | 338 --------
 src/views/product/rule/index.vue              | 163 +++-
 20 files changed, 1843 insertions(+), 590 deletions(-)
 create mode 100644 src/api/product/comment.js
 rename src/api/product/{product.js => info.js} (56%)
 delete mode 100644 src/api/product/productComment.js
 create mode 100644 src/components/CheckAttribute/index.vue
 create mode 100644 src/components/CheckAttributeGroup/index.vue
 create mode 100644 src/components/CheckBrand/index.vue
 rename src/views/product/{productComment => comment}/index.vue (78%)
 create mode 100644 src/views/product/info/index.vue
 delete mode 100644 src/views/product/product/index.vue

diff --git a/src/api/product/attribute.js b/src/api/product/attribute.js
index 948166e..bc66f29 100644
--- a/src/api/product/attribute.js
+++ b/src/api/product/attribute.js
@@ -29,7 +29,7 @@ export function addAttribute(data) {
 // 修改商品属性
 export function updateAttribute(data) {
   return request({
-    url: '/product/attribute',
+    url: '/product/attribute/'+data.id,
     method: 'put',
     data: data
   })
diff --git a/src/api/product/attributeGroup.js b/src/api/product/attributeGroup.js
index 97500df..22544a2 100644
--- a/src/api/product/attributeGroup.js
+++ b/src/api/product/attributeGroup.js
@@ -29,7 +29,7 @@ export function addAttributeGroup(data) {
 // 修改属性组
 export function updateAttributeGroup(data) {
   return request({
-    url: '/product/attributeGroup',
+    url: '/product/attributeGroup/'+data.id,
     method: 'put',
     data: data
   })
diff --git a/src/api/product/brand.js b/src/api/product/brand.js
index 7221cc3..a3023a6 100644
--- a/src/api/product/brand.js
+++ b/src/api/product/brand.js
@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-// 查询商品品牌列表
+// 查询品牌信息列表
 export function listBrand(query) {
   return request({
     url: '/product/brand/list',
@@ -9,7 +9,7 @@ export function listBrand(query) {
   })
 }
 
-// 查询商品品牌详细
+// 查询品牌信息详细
 export function getBrand(id) {
   return request({
     url: '/product/brand/' + id,
@@ -17,7 +17,7 @@ export function getBrand(id) {
   })
 }
 
-// 新增商品品牌
+// 新增品牌信息
 export function addBrand(data) {
   return request({
     url: '/product/brand',
@@ -26,16 +26,16 @@ export function addBrand(data) {
   })
 }
 
-// 修改商品品牌
+// 修改品牌信息
 export function updateBrand(data) {
   return request({
-    url: '/product/brand',
+    url: '/product/brand/'+data.id,
     method: 'put',
     data: data
   })
 }
 
-// 删除商品品牌
+// 删除品牌信息
 export function delBrand(id) {
   return request({
     url: '/product/brand/' + id,
diff --git a/src/api/product/category.js b/src/api/product/category.js
index d6ef8a4..fade048 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -16,6 +16,21 @@ export function getCategory(id) {
     method: 'get'
   })
 }
+// 查询品类共有元素
+export function getTemplateAttribute(id) {
+  return request({
+    url: '/product/category/getTemplateAttribute/' + id,
+    method: 'get'
+  })
+}
+
+// 查询品类信息详细
+export function parentCommonElement(id) {
+  return request({
+    url: '/product/category/parentCommonElement/' + id,
+    method: 'get'
+  })
+}
 
 // 新增品类信息
 export function addCategory(data) {
@@ -29,7 +44,7 @@ export function addCategory(data) {
 // 修改品类信息
 export function updateCategory(data) {
   return request({
-    url: '/product/category',
+    url: '/product/category/'+data.id,
     method: 'put',
     data: data
   })
diff --git a/src/api/product/comment.js b/src/api/product/comment.js
new file mode 100644
index 0000000..7460851
--- /dev/null
+++ b/src/api/product/comment.js
@@ -0,0 +1,44 @@
+import request from '../../../../cloud-ui123/src/utils/request'
+
+// 查询商品评论列表
+export function listComment(query) {
+  return request({
+    url: '/product/comment/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品评论详细
+export function getComment(id) {
+  return request({
+    url: '/product/comment/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品评论
+export function addComment(data) {
+  return request({
+    url: '/product/comment',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品评论
+export function updateComment(data) {
+  return request({
+    url: '/product/comment/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品评论
+export function delComment(id) {
+  return request({
+    url: '/product/comment/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/product/product.js b/src/api/product/info.js
similarity index 56%
rename from src/api/product/product.js
rename to src/api/product/info.js
index ab8a62d..80b02c2 100644
--- a/src/api/product/product.js
+++ b/src/api/product/info.js
@@ -1,44 +1,44 @@
 import request from '@/utils/request'
 
 // 查询商品信息列表
-export function listProduct(query) {
+export function listInfo(query) {
   return request({
-    url: '/product/product/list',
+    url: '/product/info/list',
     method: 'get',
     params: query
   })
 }
 
 // 查询商品信息详细
-export function getProduct(id) {
+export function getInfo(id) {
   return request({
-    url: '/product/product/' + id,
+    url: '/product/info/' + id,
     method: 'get'
   })
 }
 
 // 新增商品信息
-export function addProduct(data) {
+export function addInfo(data) {
   return request({
-    url: '/product/product',
+    url: '/product/info',
     method: 'post',
     data: data
   })
 }
 
 // 修改商品信息
-export function updateProduct(data) {
+export function updateInfo(data) {
   return request({
-    url: '/product/product',
+    url: '/product/info/'+data.id,
     method: 'put',
     data: data
   })
 }
 
 // 删除商品信息
-export function delProduct(id) {
+export function delInfo(id) {
   return request({
-    url: '/product/product/' + id,
+    url: '/product/info/' + id,
     method: 'delete'
   })
 }
diff --git a/src/api/product/productComment.js b/src/api/product/productComment.js
deleted file mode 100644
index f17b78b..0000000
--- a/src/api/product/productComment.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import request from '@/utils/request'
-
-// 查询商品评论列表
-export function listProductComment(query) {
-  return request({
-    url: '/product/productComment/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询商品评论详细
-export function getProductComment(id) {
-  return request({
-    url: '/product/productComment/' + id,
-    method: 'get'
-  })
-}
-
-// 新增商品评论
-export function addProductComment(data) {
-  return request({
-    url: '/product/productComment',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改商品评论
-export function updateProductComment(data) {
-  return request({
-    url: '/product/productComment',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除商品评论
-export function delProductComment(id) {
-  return request({
-    url: '/product/productComment/' + id,
-    method: 'delete'
-  })
-}
diff --git a/src/api/product/rule.js b/src/api/product/rule.js
index 18dacc1..f2de650 100644
--- a/src/api/product/rule.js
+++ b/src/api/product/rule.js
@@ -29,7 +29,7 @@ export function addRule(data) {
 // 修改商品规格
 export function updateRule(data) {
   return request({
-    url: '/product/rule',
+    url: '/product/rule/'+data.id,
     method: 'put',
     data: data
   })
diff --git a/src/components/CheckAttribute/index.vue b/src/components/CheckAttribute/index.vue
new file mode 100644
index 0000000..c798636
--- /dev/null
+++ b/src/components/CheckAttribute/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-row>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>选择属性关联关系</span>
+      </div>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>已选择属性</span>
+        </div>
+        <el-row>
+          <el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
+            <el-tag
+              style="margin: 5px 10px"
+              :key="attribute.name"
+              closable @close="removeChecked(index)">
+              {{ attribute.name }}
+            </el-tag>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-divider></el-divider>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>未选属性</span>
+        </div>
+        <el-row>
+          <el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
+            <el-form-item label="属性编码">
+              <el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
+            </el-form-item>
+            <el-form-item label="属性名称">
+              <el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="queryAttribute">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+        <el-row>
+          <el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
+            <el-checkbox
+              v-model="attributeIdList"
+              :key="attribute.id"
+              :value="attribute.id"
+              :label="attribute.id"
+              @change="checkedAttribute(attribute)"
+              border>{{ attribute.name }}
+            </el-checkbox>
+          </el-col>
+        </el-row>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="attributeQuery.pageNum"
+          :limit.sync="attributeQuery.pageSize"
+          @pagination="queryAttribute"
+        />
+      </el-card>
+    </el-card>
+  </el-row>
+</template>
+
+<script>
+import {listAttribute} from "@/api/product/attribute";
+
+export default {
+  name: "CheckAttribute",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    checkedList: {
+      type: Array,
+      default: null
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val.toString() !== this.attributeIdList.toString()){
+          this.attributeIdList = val
+          this.checkedAttributeList = []
+        }
+      },
+      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 {
+      attributeIdList: [],
+      checkedAttributeList: [],
+      attributeQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        code: null,
+        name: null
+      },
+      attributeTotal: 0,
+      attributeList: []
+    }
+  },
+  created() {
+    this.queryAttribute();
+  },
+  methods: {
+    /**
+     * 选中值触发方法
+     */
+    checkedAttribute(attribute) {
+      let isCheck = this.attributeIdList.indexOf(attribute.id) > -1;
+      if (isCheck) {
+        this.checkedAttributeList.push(attribute);
+      } else {
+        // 删除
+        this.checkedAttributeList.splice(
+          this.checkedAttributeList.indexOf(attribute), 1
+        )
+      }
+      this.$emit("input", this.attributeIdList);
+    },
+    /**
+     * 删除选中值
+     * @param index
+     */
+    removeChecked(index) {
+      this.checkedAttributeList.splice(index, 1);
+      this.attributeIdList.splice(index, 1);
+    },
+
+    /**
+     * 查询属性
+     */
+    queryAttribute() {
+      listAttribute(this.attributeQuery).then(response => {
+        this.attributeList = response.data.rows;
+        this.total = response.data.total;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/CheckAttributeGroup/index.vue b/src/components/CheckAttributeGroup/index.vue
new file mode 100644
index 0000000..628d622
--- /dev/null
+++ b/src/components/CheckAttributeGroup/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <el-row>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>选择属性组关联关系</span>
+      </div>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>已选择属性组</span>
+        </div>
+        <el-row>
+          <el-col :span="2" v-for="(attributeGroup, index) in checkedAttributeGroupList">
+            <el-tag
+              style="margin: 5px 10px"
+              :key="attributeGroup.name"
+              closable @close="removeChecked(index)">
+              {{ attributeGroup.name }}
+            </el-tag>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-divider></el-divider>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>未选属性组</span>
+        </div>
+        <el-row>
+          <el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
+            <el-form-item label="属性组名称">
+              <el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="queryAttributeGroup">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+        <el-row>
+          <el-col style="padding: 5px 10px" :span="3" v-for="attributeGroup in attributeGroupList">
+            <el-checkbox
+              v-model="attributeGroupIdList"
+              :key="attributeGroup.id"
+              :value="attributeGroup.id"
+              :label="attributeGroup.id"
+              @change="checkedAttributeGroup(attributeGroup)"
+              border>{{ attributeGroup.name }}
+            </el-checkbox>
+          </el-col>
+        </el-row>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="attributeGroupQuery.pageNum"
+          :limit.sync="attributeGroupQuery.pageSize"
+          @pagination="queryAttributeGroup"
+        />
+      </el-card>
+    </el-card>
+  </el-row>
+</template>
+
+<script>
+import {listAttributeGroup} from "@/api/product/attributeGroup";
+
+export default {
+  name: "CheckAttributeGroup",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    checkedList: {
+      type: Array,
+      default: null
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val.toString() !== this.attributeGroupIdList.toString()){
+          this.attributeGroupIdList = val
+          this.checkedAttributeGroupList = []
+        }
+      },
+      immediate: true
+    },
+    checkedList: {
+      handler(val) {
+        if (val !== null && val.length >0){
+          this.checkedAttributeGroupList = val
+          this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      attributeGroupIdList: [],
+      checkedAttributeGroupList: [],
+      attributeGroupQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null
+      },
+      attributeGroupTotal: 0,
+      attributeGroupList: []
+    }
+  },
+  created() {
+    this.queryAttributeGroup();
+  },
+  methods: {
+    /**
+     * 选中值触发方法
+     */
+    checkedAttributeGroup(attributeGroup) {
+      let isCheck = this.attributeGroupIdList.indexOf(attributeGroup.id) > -1;
+      if (isCheck) {
+        this.checkedAttributeGroupList.push(attributeGroup);
+      } else {
+        // 删除
+        this.checkedAttributeGroupList.splice(
+          this.checkedAttributeGroupList.indexOf(attributeGroup), 1
+        )
+      }
+      this.$emit("input", this.attributeGroupIdList);
+    },
+    /**
+     * 删除选中值
+     * @param index
+     */
+    removeChecked(index) {
+      this.checkedAttributeGroupList.splice(index, 1);
+      this.attributeGroupIdList.splice(index, 1);
+    },
+
+    /**
+     * 查询属性
+     */
+    queryAttributeGroup() {
+      listAttributeGroup(this.attributeGroupQuery).then(response => {
+        this.attributeGroupList = response.data.rows;
+        this.total = response.data.total;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/CheckBrand/index.vue b/src/components/CheckBrand/index.vue
new file mode 100644
index 0000000..3826612
--- /dev/null
+++ b/src/components/CheckBrand/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <el-row>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>选择品牌关联关系</span>
+      </div>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>已选择品牌</span>
+        </div>
+        <el-row>
+          <el-col :span="2" v-for="(brand, index) in checkedBrandList">
+            <el-tag
+              style="margin: 5px 10px"
+              :key="brand.nam"
+              closable @close="removeChecked(index)">
+              {{ brand.nam }}
+            </el-tag>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-divider></el-divider>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>未选品牌</span>
+        </div>
+        <el-row>
+          <el-form :inline="true" :model="brandQuery" class="demo-form-inline">
+            <el-form-item label="品牌名称">
+              <el-input v-model="brandQuery.nam" placeholder="品牌名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="queryBrand">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+        <el-row>
+          <el-col style="padding: 5px 10px" :span="3" v-for="brand in brandList">
+            <el-checkbox
+              v-model="brandIdList"
+              :key="brand.id"
+              :value="brand.id"
+              :label="brand.id"
+              @change="checkedBrand(brand)"
+              border>{{ brand.nam }}
+            </el-checkbox>
+          </el-col>
+        </el-row>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="brandQuery.pageNum"
+          :limit.sync="brandQuery.pageSize"
+          @pagination="queryBrand"
+        />
+      </el-card>
+    </el-card>
+  </el-row>
+</template>
+
+<script>
+import {listBrand} from "@/api/product/brand";
+
+export default {
+  name: "CheckBrand",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    checkedList: {
+      type: Array,
+      default: null
+    }
+  },
+  watch: {
+    vlue: {
+      handler(val) {
+        if (val.toString() !== this.brandIdList.toString()){
+          this.brandIdList = val
+          this.checkedBrandList = []
+        }
+      },
+      immediate: true
+    },
+    checkedList: {
+      handler(val){
+        if (val !== null && val.length > 0){
+          this.checkedBrandList = val
+          this.brandIdList = this.checkedBrandList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      brandIdList: [],
+      checkedBrandList: [],
+      brandQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null
+      },
+      brandTotal: 0,
+      brandList: []
+    }
+  },
+  created() {
+    this.queryBrand();
+  },
+  methods: {
+    /**
+     * 选中值触发方法
+     */
+    checkedBrand(brand) {
+      let isCheck = this.brandIdList.indexOf(brand.id) > -1;
+      if (isCheck) {
+        this.checkedBrandList.push(brand);
+      } else {
+        // 删除
+        this.checkedBrandList.splice(
+          this.checkedBrandList.indexOf(brand), 1
+        )
+      }
+      this.$emit("input", this.brandIdList);
+    },
+    /**
+     * 删除选中值
+     * @param index
+     */
+    removeChecked(index) {
+      this.checkedBrandList.splice(index, 1);
+      this.brandIdList.splice(index, 1);
+    },
+
+    /**
+     * 查询品牌
+     */
+    queryBrand() {
+      listBrand(this.brandQuery).then(response => {
+        this.brandList = response.data.rows;
+        this.total = response.data.total;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 3e32010..5198da2 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -151,6 +151,7 @@ export default {
     handleUploadSuccess(res, file) {
       if (res.code === 200) {
         this.uploadList.push({name: res.data.url, url: res.data.url});
+        console.log(res.data.url)
         this.uploadedSuccessfully();
       } else {
         this.number--;
diff --git a/src/views/product/attribute/index.vue b/src/views/product/attribute/index.vue
index 4c96735..f55d154 100644
--- a/src/views/product/attribute/index.vue
+++ b/src/views/product/attribute/index.vue
@@ -9,14 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="分组" prop="gruopId">
-        <el-input
-          v-model="queryParams.gruopId"
-          placeholder="请输入分组"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -71,9 +63,8 @@
 
     <el-table v-loading="loading" :data="attributeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="属性编码" align="center" prop="code" />
       <el-table-column label="属性名" align="center" prop="name" />
-      <el-table-column label="分组" align="center" prop="gruopId" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -94,7 +85,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -104,14 +95,14 @@
     />
 
     <!-- 添加或修改商品属性对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="属性编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入属性编码" />
+        </el-form-item>
         <el-form-item label="属性名" prop="name">
           <el-input v-model="form.name" placeholder="请输入属性名" />
         </el-form-item>
-        <el-form-item label="分组" prop="gruopId">
-          <el-input v-model="form.gruopId" placeholder="请输入分组" />
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -131,6 +122,12 @@ export default {
   name: "Attribute",
   data() {
     return {
+        queryParam: {
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          states: null
+        },
       // 遮罩层
       loading: true,
       // 选中数组
@@ -153,13 +150,19 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        name: null,
-        gruopId: null,
+        code: null,
+        name: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        code: [
+          { required: true, message: "属性编码不能为空", trigger: "blur" }
+        ],
+        name: [
+          { required: true, message: "属性名不能为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -171,8 +174,8 @@ export default {
     getList() {
       this.loading = true;
       listAttribute(this.queryParams).then(response => {
-        this.attributeList = response.rows;
-        this.total = response.total;
+        this.attributeList = response.data.rows;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
@@ -185,13 +188,11 @@ export default {
     reset() {
       this.form = {
         id: null,
+        code: null,
         name: null,
-        gruopId: null,
-        remark: null,
         createBy: null,
         createTime: null,
-        updateBy: null,
-        updateTime: null
+        remark: null
       };
       this.resetForm("form");
     },
diff --git a/src/views/product/attributeGroup/index.vue b/src/views/product/attributeGroup/index.vue
index 048e218..4e5c04c 100644
--- a/src/views/product/attributeGroup/index.vue
+++ b/src/views/product/attributeGroup/index.vue
@@ -9,6 +9,16 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="状态" prop="states">
+        <el-select v-model="queryParams.states" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_yes_no"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -63,9 +73,19 @@
 
     <el-table v-loading="loading" :data="attributeGroupList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="组名称" align="center" prop="name" />
-      <el-table-column label="转态" align="center" prop="status" />
+      <el-table-column label="组内属性" align="center" prop="attributeInfoList" >
+        <template slot-scope="scope">
+          <el-tag v-for="attributeInfo in scope.row.attributeInfoList">
+            {{attributeInfo.name}}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="states">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.states"/>
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -96,14 +116,97 @@
     />
 
     <!-- 添加或修改属性组对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="组名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入组名称" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="组名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入组名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="states">
+              <el-radio-group v-model="form.states">
+                <el-radio
+                  v-for="dict in dict.type.sys_yes_no"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-row>
+
+        <el-row>
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>选择属性关联关系</span>
+            </div>
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>已选择属性</span>
+              </div>
+              <el-row>
+                <el-col :span="2" v-for="(attribute,index) in checkedAttributeList">
+                  <el-tag
+                  style="margin: 5px 10px"
+                  :key="attribute.name"
+                  closable @close="removeChecked(index)">
+                    {{attribute.name}}
+                  </el-tag>
+                </el-col>
+              </el-row>
+            </el-card>
+
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>未选择属性</span>
+              </div>
+
+              <el-row>
+                <el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
+                  <el-form-item label="属性编码">
+                    <el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
+                  </el-form-item>
+                  <el-form-item label="属性名称">
+                    <el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" @click="queryAttribute">查询</el-button>
+                  </el-form-item>
+                </el-form>
+              </el-row>
+              <el-row>
+                <el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
+                  <el-checkbox
+                    v-model="form.attributeIdList"
+                    :key="attribute.id"
+                    :value="attribute.id"
+                    :label="attribute.id"
+                    @change="checkedAttribute(attribute)"
+                    border>{{attribute.name}}</el-checkbox>
+                </el-col>
+              </el-row>
+
+              <pagination
+                v-show="total>0"
+                :total="total"
+                :page.sync="attributeQuery.pageNum"
+                :limit.sync="attributeQuery.pageSize"
+                @pagination="queryAttribute"
+              />
+            </el-card>
+
+
+          </el-card>
+        </el-row>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -115,9 +218,18 @@
 
 <script>
 import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
+import { listAttribute } from '@/api/product/attribute'
 
 export default {
   name: "AttributeGroup",
+  dicts: ['sys_yes_no'],
+  watch:{
+    'form.attributeIdList':{
+      handler(val){
+        console.log(val)
+      }
+    }
+  },
   data() {
     return {
       // 遮罩层
@@ -143,31 +255,95 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: null,
-        status: null,
+        states: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
-      }
+        name: [
+          { required: true, message: "组名称不能为空", trigger: "blur" }
+        ],
+        states: [
+          { required: true, message: "状态不能为空", trigger: "change" }
+        ],
+      },
+      tags: [
+        { name: '标签一' },
+        { name: '标签二' }
+      ],
+      checkedAttributeList: [],
+      attributeQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        code: null,
+        name: null
+      },
+      attributeTotal: 0,
+      attributeList: []
     };
   },
+  activated() {
+    this.getList();
+  },
   created() {
     this.getList();
   },
   methods: {
+    /**
+     * 选中值触发方法
+     */
+    checkedAttribute(attribute){
+      let isCheck = this.form.attributeIdList.indexOf(attribute.id) > -1;
+      if (isCheck){
+        this.checkedAttributeList.push(attribute)
+      }else {
+        //删除
+        let att = undefined
+        this.checkedAttributeList.forEach(checked =>{
+          if (checked.id == attribute.id){
+            att =attribute
+          }
+        })
+        this.checkedAttributeList.splice(
+          this.checkedAttributeList.indexOf(att),1
+        )
+      }
+    },
+    /**
+     * 删除选中值
+     * @param index
+     */
+    removeChecked(index){
+      console.log(this.form.attributeIdList)
+      this.checkedAttributeList.splice(index,1)
+      this.form.attributeIdList.splice(index,1)
+      console.log(this.form.attributeIdList)
+    },
+    /**
+     * 查询属性
+     */
+    queryAttribute(){
+      listAttribute(this.attributeQuery).then(response => {
+        this.attributeList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+
     /** 查询属性组列表 */
     getList() {
       this.loading = true;
       listAttributeGroup(this.queryParams).then(response => {
-        this.attributeGroupList = response.rows;
-        this.total = response.total;
+        this.attributeGroupList = response.data.rows;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
     // 取消按钮
     cancel() {
       this.open = false;
+      this.getList()
       this.reset();
     },
     // 表单重置
@@ -175,13 +351,11 @@ export default {
       this.form = {
         id: null,
         name: null,
-        status: null,
+        states: null,
         remark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
+        attributeIdList: [],
       };
+      this.checkedAttributeList = []
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -205,16 +379,25 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加属性组";
+      this.queryAttribute();
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
+      this.checkedAttributeList = row.attributeInfoList
       const id = row.id || this.ids
       getAttributeGroup(id).then(response => {
+        const att = this.form.attributeIdList
         this.form = response.data;
         this.open = true;
         this.title = "修改属性组";
+        this.form.attributeIdList = att
+        row.attributeInfoList.forEach(att =>{
+          this.form.attributeIdList.push(att.id)
+        })
+        this.queryAttribute();
       });
+      this.queryAttribute();
     },
     /** 提交按钮 */
     submitForm() {
diff --git a/src/views/product/brand/index.vue b/src/views/product/brand/index.vue
index 8c4114b..3bc6ffe 100644
--- a/src/views/product/brand/index.vue
+++ b/src/views/product/brand/index.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="品牌名称" prop="name">
+      <el-form-item label="品牌名称" prop="nam">
         <el-input
-          v-model="queryParams.name"
+          v-model="queryParams.nam"
           placeholder="请输入品牌名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+      <el-form-item label="是否启用" prop="start">
+        <el-select v-model="queryParams.start" placeholder="请选择是否启用" clearable>
           <el-option
             v-for="dict in dict.type.sys_yes_no"
             :key="dict.value"
@@ -74,18 +74,18 @@
     <el-table v-loading="loading" :data="brandList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="品牌名称" align="center" prop="name" />
-      <el-table-column label="logo" align="center" prop="logo" width="100">
+      <el-table-column label="品牌名称" align="center" prop="nam" />
+      <el-table-column label="LOGO" align="center" prop="logo" width="100">
         <template slot-scope="scope">
           <image-preview :src="scope.row.logo" :width="50" :height="50"/>
         </template>
       </el-table-column>
-      <el-table-column label="介绍" align="center" prop="introduction" />
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column label="是否启用" align="center" prop="start">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.start"/>
         </template>
       </el-table-column>
+      <el-table-column label="介绍" align="center" prop="introduction" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -115,20 +115,17 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改商品品牌对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <!-- 添加或修改品牌信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="品牌名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入品牌名称" />
+        <el-form-item label="品牌名称" prop="nam">
+          <el-input v-model="form.nam" placeholder="请输入品牌名称" />
         </el-form-item>
-        <el-form-item label="logo" prop="logo">
-          <image-upload v-model="form.logo"/>
+        <el-form-item label="LOGO" prop="logo">
+          <image-upload v-model="form.logo" :limit="1" :is-show-tip="false"/>
         </el-form-item>
-        <el-form-item label="介绍">
-          <editor v-model="form.introduction" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
+        <el-form-item label="是否启用" prop="start">
+          <el-radio-group v-model="form.start">
             <el-radio
               v-for="dict in dict.type.sys_yes_no"
               :key="dict.value"
@@ -136,6 +133,9 @@
             >{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="介绍">
+          <editor v-model="form.introduction" :min-height="192"/>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -168,7 +168,7 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      // 商品品牌表格数据
+      // 品牌信息表格数据
       brandList: [],
       // 弹出层标题
       title: "",
@@ -178,15 +178,30 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        name: null,
+        nam: null,
         logo: null,
+        start: null,
         introduction: null,
-        status: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        nam: [
+          { required: true, message: "品牌名称不能为空", trigger: "blur" }
+        ],
+        logo: [
+          { required: true, message: "LOGO不能为空", trigger: "blur" }
+        ],
+        start: [
+          { required: true, message: "是否启用不能为空", trigger: "change" }
+        ],
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -194,12 +209,12 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询商品品牌列表 */
+    /** 查询品牌信息列表 */
     getList() {
       this.loading = true;
       listBrand(this.queryParams).then(response => {
-        this.brandList = response.rows;
-        this.total = response.total;
+        this.brandList = response.data.rows;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
@@ -212,10 +227,10 @@ export default {
     reset() {
       this.form = {
         id: null,
-        name: null,
+        nam: null,
         logo: null,
+        start: null,
         introduction: null,
-        status: null,
         remark: null,
         createBy: null,
         createTime: null,
@@ -244,7 +259,7 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加商品品牌";
+      this.title = "添加品牌信息";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -253,7 +268,7 @@ export default {
       getBrand(id).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改商品品牌";
+        this.title = "修改品牌信息";
       });
     },
     /** 提交按钮 */
@@ -279,7 +294,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除商品品牌编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除品牌信息编号为"' + ids + '"的数据项？').then(function() {
         return delBrand(ids);
       }).then(() => {
         this.getList();
diff --git a/src/views/product/category/index.vue b/src/views/product/category/index.vue
index 89a6104..977dd35 100644
--- a/src/views/product/category/index.vue
+++ b/src/views/product/category/index.vue
@@ -1,34 +1,32 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="品类信息" prop="name">
+      <el-form-item label="品类名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入品类信息"
+          placeholder="请输入品类名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="父级" prop="parentId">
+      <el-form-item label="父级品类" prop="parentId">
         <el-input
           v-model="queryParams.parentId"
-          placeholder="请输入父级"
+          placeholder="请输入父级品类"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="是否启用" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择是否启用" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_yes_no"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
+      <el-form-item label="是否启用" prop="start">
+        <el-input
+          v-model="queryParams.start"
+          placeholder="请输入是否启用"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -64,16 +62,16 @@
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
-      <el-table-column label="品类信息" prop="name" />
+      <el-table-column label="品类名称" prop="name" />
       <el-table-column label="图片" align="center" prop="image" width="100">
         <template slot-scope="scope">
           <image-preview :src="scope.row.image" :width="50" :height="50"/>
         </template>
       </el-table-column>
-      <el-table-column label="父级" align="center" prop="parentId" />
-      <el-table-column label="是否启用" align="center" prop="status">
+      <el-table-column label="父级品类" align="center" prop="parentId" />
+      <el-table-column label="是否启用" align="center" prop="start">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.start"/>
         </template>
       </el-table-column>
       <el-table-column label="介绍" align="center" prop="introduction" />
@@ -106,32 +104,62 @@
     </el-table>
 
     <!-- 添加或修改品类信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="品类信息" prop="name">
-          <el-input v-model="form.name" placeholder="请输入品类信息" />
-        </el-form-item>
-        <el-form-item label="图片" prop="image">
-          <image-upload v-model="form.image"/>
-        </el-form-item>
-        <el-form-item label="父级" prop="parentId">
-          <treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_yes_no"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="介绍">
-          <editor v-model="form.introduction" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="父级品类" prop="parentId">
+              <treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="品类名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入品类名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否启用" prop="start">
+              <el-radio-group v-model="form.start">
+                <el-radio
+                  v-for="dict in dict.type.sys_yes_no"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="图片" prop="image">
+              <image-upload v-model="form.image" :limit="1" :is-show-tip="false"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="介绍">
+              <editor v-model="form.introduction" :min-height="80"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-tabs value="attribute" type="card" >
+          <el-tab-pane label="商品属性" name="attribute">
+            <CheckAttribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
+          </el-tab-pane>
+          <el-tab-pane label="商品属性组" name="attributeGroup">
+            <CheckAttributeGroup v-model="form.attributeGroupIdList" :checked-list="attributeGroupList"/>
+          </el-tab-pane>
+          <el-tab-pane label="商品品牌" name="brand">
+            <CheckBrand v-model="form.brandIdList" :checked-list="brandInfoList"/>
+          </el-tab-pane>
+        </el-tabs>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -142,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";
 
@@ -175,22 +210,51 @@ export default {
         name: null,
         image: null,
         parentId: null,
-        status: null,
+        start: null,
         introduction: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        name: [
+          { required: true, message: "品类名称不能为空", trigger: "blur" }
+        ],
+        image: [
+          { required: true, message: "图片不能为空", trigger: "blur" }
+        ],
         parentId: [
-          { required: true, message: "父级不能为空", trigger: "blur" }
+          { required: true, message: "父级品类不能为空", trigger: "blur" }
         ],
-        status: [
-          { required: true, message: "是否启用不能为空", trigger: "change" }
+        start: [
+          { required: true, message: "是否启用不能为空", trigger: "blur" }
         ],
-      }
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        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();
   },
@@ -214,7 +278,7 @@ export default {
         children: node.children
       };
     },
-    /** 查询品类信息下拉树结构 */
+	/** 查询品类信息下拉树结构 */
     getTreeselect() {
       listCategory().then(response => {
         this.categoryOptions = [];
@@ -235,7 +299,7 @@ export default {
         name: null,
         image: null,
         parentId: null,
-        status: null,
+        start: null,
         introduction: null,
         remark: null,
         createBy: null,
@@ -279,7 +343,7 @@ export default {
       this.reset();
       this.getTreeselect();
       if (row != null) {
-        this.form.parentId = row.id;
+        this.form.parentId = row.parentId;
       }
       getCategory(row.id).then(response => {
         this.form = response.data;
diff --git a/src/views/product/productComment/index.vue b/src/views/product/comment/index.vue
similarity index 78%
rename from src/views/product/productComment/index.vue
rename to src/views/product/comment/index.vue
index a9c3993..c7b886a 100644
--- a/src/views/product/productComment/index.vue
+++ b/src/views/product/comment/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="商品id" prop="productId">
+      <el-form-item label="商品id" prop="projectId">
         <el-input
-          v-model="queryParams.productId"
+          v-model="queryParams.projectId"
           placeholder="请输入商品id"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="父级id" prop="parentId">
+      <el-form-item label="父类id" prop="parentId">
         <el-input
           v-model="queryParams.parentId"
-          placeholder="请输入父级id"
+          placeholder="请输入父类id"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -31,7 +31,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['product:productComment:add']"
+          v-hasPermi="['product:comment:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -42,7 +42,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['product:productComment:edit']"
+          v-hasPermi="['product:comment:edit']"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -53,7 +53,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['product:productComment:remove']"
+          v-hasPermi="['product:comment:remove']"
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -63,23 +63,23 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          v-hasPermi="['product:productComment:export']"
+          v-hasPermi="['product:comment:export']"
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="productCommentList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="commentList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="商品id" align="center" prop="productId" />
+      <el-table-column label="商品id" align="center" prop="projectId" />
       <el-table-column label="评论" align="center" prop="comment" />
       <el-table-column label="图片" align="center" prop="images" width="100">
         <template slot-scope="scope">
           <image-preview :src="scope.row.images" :width="50" :height="50"/>
         </template>
       </el-table-column>
-      <el-table-column label="父级id" align="center" prop="parentId" />
+      <el-table-column label="父类id" align="center" prop="parentId" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -88,19 +88,19 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['product:productComment:edit']"
+            v-hasPermi="['product:comment:edit']"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['product:productComment:remove']"
+            v-hasPermi="['product:comment:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -110,10 +110,10 @@
     />
 
     <!-- 添加或修改商品评论对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="商品id" prop="productId">
-          <el-input v-model="form.productId" placeholder="请输入商品id" />
+        <el-form-item label="商品id" prop="projectId">
+          <el-input v-model="form.projectId" placeholder="请输入商品id" />
         </el-form-item>
         <el-form-item label="评论">
           <editor v-model="form.comment" :min-height="192"/>
@@ -121,8 +121,8 @@
         <el-form-item label="图片" prop="images">
           <image-upload v-model="form.images"/>
         </el-form-item>
-        <el-form-item label="父级id" prop="parentId">
-          <el-input v-model="form.parentId" placeholder="请输入父级id" />
+        <el-form-item label="父类id" prop="parentId">
+          <el-input v-model="form.parentId" placeholder="请输入父类id" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@@ -137,10 +137,10 @@
 </template>
 
 <script>
-import { listProductComment, getProductComment, delProductComment, addProductComment, updateProductComment } from "@/api/product/productComment";
+import { listComment, getComment, delComment, addComment, updateComment } from "../../../../../cloud-ui/src/api/product/comment";
 
 export default {
-  name: "ProductComment",
+  name: "Comment",
   data() {
     return {
       // 遮罩层
@@ -156,7 +156,7 @@ export default {
       // 总条数
       total: 0,
       // 商品评论表格数据
-      productCommentList: [],
+      commentList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -165,7 +165,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        productId: null,
+        projectId: null,
         comment: null,
         images: null,
         parentId: null,
@@ -174,6 +174,15 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        projectId: [
+          { required: true, message: "商品id不能为空", trigger: "blur" }
+        ],
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -184,9 +193,9 @@ export default {
     /** 查询商品评论列表 */
     getList() {
       this.loading = true;
-      listProductComment(this.queryParams).then(response => {
-        this.productCommentList = response.rows;
-        this.total = response.total;
+      listComment(this.queryParams).then(response => {
+        this.commentList = response.data.rows;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
@@ -199,7 +208,7 @@ export default {
     reset() {
       this.form = {
         id: null,
-        productId: null,
+        projectId: null,
         comment: null,
         images: null,
         parentId: null,
@@ -237,7 +246,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
-      getProductComment(id).then(response => {
+      getComment(id).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改商品评论";
@@ -248,13 +257,13 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            updateProductComment(this.form).then(response => {
+            updateComment(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProductComment(this.form).then(response => {
+            addComment(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -267,7 +276,7 @@ export default {
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal.confirm('是否确认删除商品评论编号为"' + ids + '"的数据项？').then(function() {
-        return delProductComment(ids);
+        return delComment(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
@@ -275,9 +284,9 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('product/productComment/export', {
+      this.download('product/comment/export', {
         ...this.queryParams
-      }, `productComment_${new Date().getTime()}.xlsx`)
+      }, `comment_${new Date().getTime()}.xlsx`)
     }
   }
 };
diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
new file mode 100644
index 0000000..9f94ae5
--- /dev/null
+++ b/src/views/product/info/index.vue
@@ -0,0 +1,742 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="商品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入商品名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="商品状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_yes_no"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="规格" prop="ruleId">
+        <el-input
+          v-model="queryParams.ruleId"
+          placeholder="请输入规格"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="品牌" prop="brandId">
+        <el-input
+          v-model="queryParams.brandId"
+          placeholder="请输入品牌"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['product:info:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['product:info:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['product:info:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['product:info:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="商品名称" align="center" prop="name" />
+      <el-table-column label="商品描述" align="center" prop="introduction" />
+      <el-table-column label="主类型" align="center" prop="mianType" />
+      <el-table-column label="父类型" align="center" prop="parentType" />
+      <el-table-column label="商品类型" align="center" prop="type" />
+      <el-table-column label="商品图片" align="center" prop="image" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.image" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品轮播图" align="center" prop="carouselImages" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="规格" align="center" prop="ruleId" />
+      <el-table-column label="品牌" align="center" prop="brandId" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['product:info:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:info:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改商品信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+      <el-steps :active="stepNumber" finish-status="success">
+        <el-step title="基本信息"></el-step>
+        <el-step title="品类属性"></el-step>
+        <el-step title="商品规格"></el-step>
+        <el-step title="商品描述"></el-step>
+      </el-steps>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <div v-show="stepNumber === 0">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="商品名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入商品名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="商品状态" prop="status">
+                <el-radio-group v-model="form.status">
+                  <el-radio
+                    v-for="dict in dict.type.sys_yes_no"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{dict.label}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="品牌" prop="brandId">
+                <el-select
+                  v-model="form.brandId"
+                  filterable
+                  remote
+                  reserve-keyword
+                  placeholder="请输入关键词"
+                  :remote-method="remoteSearchBrandList"
+                  :loading="loading">
+                  <el-option
+                    v-for="brand in brandList"
+                    :key="brand.id"
+                    :label="brand.nam"
+                    :value="brand.id">
+                    <el-row>
+                      <image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
+                      <div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
+                    </el-row>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="备注" prop="remark">
+                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item label="商品图片" prop="image">
+              <image-upload v-model="form.image"/>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="商品轮播图" prop="carouselImages">
+              <image-upload v-model="form.carouselImages"/>
+            </el-form-item>
+          </el-row>
+        </div>
+        <div v-show="stepNumber === 1">
+          <el-form-item label="品类" prop="ruleId">
+            <el-cascader
+              style="width: 100%"
+              v-model="categoryOptionValue"
+              clearable
+              :props="{'value': 'id', 'label': 'name'}"
+              :options="categoryOptions"></el-cascader>
+          </el-form-item>
+          <el-empty v-show="categoryOptionValue.length === 0" description="请选择品类，在进行操作"></el-empty>
+          <el-tabs v-show="categoryOptionValue.length > 0" v-model="activeName" type="border-card">
+            <el-tab-pane label="商品属性组" name="attributeGroup">
+              <el-row style="overflow-x: auto; height: 300px;">
+                <el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
+                  <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                      <span>属性组【{{templateAttributeGroup.groupName}}】</span>
+                    </div>
+                    <div style="height: 200px; width: 100%;">
+                      <el-form ref="form" label-width="80px">
+                        <el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
+                          <el-input v-model="attribute.value"></el-input>
+                        </el-form-item>
+                      </el-form>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="商品属性" name="attribute">
+              <el-row style="overflow-x: auto; height: 300px;">
+                <el-form ref="form" :model="form" label-width="80px">
+                  <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
+                    <el-form-item :label="templateAttribute.name" >
+                      <el-input v-model="templateAttribute.value"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-form>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="自有属性" name="third">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>添加商品属性</span>
+                </div>
+                <el-row>
+                  <el-button v-show="!customAttributeFormStatus" @click="customAttributeFormStatus = true">添加自有属性</el-button>
+                  <el-form v-show="customAttributeFormStatus" :inline="true" :model="customAttributeForm" class="demo-form-inline">
+                    <el-form-item label="属性编码">
+                      <el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
+                    </el-form-item>
+                    <el-form-item label="属性名称">
+                      <el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="属性值">
+                      <el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" @click="saveCustomAttribute">确定</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-row>
+              </el-card>
+
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>选择属性</span>
+                </div>
+                <el-row style="height: 80px; overflow-y: auto">
+                  <el-checkbox-group v-model="attributeIdCheckedList" @change="attributeCheckedFun">
+                    <el-col :span="4" v-for="attribute in categoryCommonElement.attributeList" style="margin: 5px 0">
+                      <el-checkbox :label="attribute.id" :value="attribute.id" :key="attribute.id" border>{{attribute.name}}</el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+              </el-card>
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>属性值填写</span>
+                </div>
+                <el-row style="overflow-x: auto; height: 300px;">
+                  <el-form ref="form" :model="form" label-width="80px">
+                    <el-col :span="6" v-for="attribute in attributeCheckedList">
+                      <el-form-item :label="attribute.name">
+                        <el-input v-model="attribute.value"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-form>
+                </el-row>
+              </el-card>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-show="stepNumber === 2">
+          <el-form-item label="规格" prop="ruleId">
+            <el-select v-model="form.ruleId" placeholder="请选择" @change="changeRule" style="width: 100%;">
+              <el-option
+                v-for="rule in ruleList"
+                :key="rule.id"
+                :label="rule.name"
+                :value="rule.id">
+                <span>{{rule.name}} - {{rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString()}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
+            <el-form-item label="图片">
+              <image-upload
+                :limit="1"
+                :is-show-tip="false"
+                v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
+            </el-form-item>
+            <el-form-item label="价格">
+              <el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
+            </el-form-item>
+            <el-form-item label="库存">
+              <el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="oneSetting">一键设置</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            :data="skuList"
+            border
+            style="width: 100%">
+            <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
+              <template slot-scope="scope">
+                <span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
+                <el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
+                <image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
+                              :limit="1"
+                              :is-show-tip="false"
+                ></image-upload>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div v-show="stepNumber === 3">
+          <el-form-item label="商品描述">
+            <editor v-model="form.introduction" :min-height="192"/>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
+        <el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
+import {listBrand} from "@/api/product/brand";
+import {getTemplateAttribute, listCategory} from "@/api/product/category";
+import {listRule} from "@/api/product/rule";
+import {addAttribute} from "@/api/product/attribute";
+
+export default {
+  name: "Info",
+  dicts: ['sys_yes_no'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 商品信息表格数据
+      infoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        introduction: null,
+        mianType: null,
+        parentType: null,
+        type: null,
+        image: null,
+        carouselImages: null,
+        status: null,
+        ruleId: null,
+        brandId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name:[
+          { required: true, message: '请输入商品名称', trigger: 'blur' },
+          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
+        ],
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      },
+      stepNumber: 1,
+      brandList: [],
+      categoryOptions: [],
+      categoryOptionValue: [],
+      ruleList: [],
+      activeName: "attributeGroup",
+      customAttributeForm: {
+
+      },
+      customAttributeFormStatus: false,
+      attributeIdCheckedList: [],
+      attributeCheckedList: [],
+      categoryCommonElement: {
+        templateAttributeGroupList: [],
+        templateAttributeList: [],
+        attributeList: []
+      },
+      templateTitleList:[
+        {
+          "label":"规格图片",
+          "prop":"image"
+        },
+        {
+          "label":"商品库存",
+          "prop":"stock"
+        },
+        {
+          "label":"商品价格",
+          "prop":"price"
+        }
+      ],
+      titleList:[],
+      skuList:[],
+      oneSettingForm:{
+        "image":null,
+        "stock":null,
+        "price":null,
+      }
+    };
+  },
+  watch: {
+    categoryOptionValue: {
+      handler(value){
+        if (value !== null && value !== undefined && value.length > 0){
+          this.form.mianType = value[0];
+          this.form.parentType = value[1];
+          this.form.type = value[2];
+        }else {
+          this.form.mianType = null;
+          this.form.parentType = null;
+          this.form.type = null;
+        }
+      }
+    },
+    "form.type": {
+      handler(value) {
+        console.log(value)
+        if (value != null){
+          getTemplateAttribute(value).then(response => {
+            const {data} = response;
+            const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
+            this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
+            this.categoryCommonElement.templateAttributeList = templateAttributeList;
+            this.categoryCommonElement.attributeList = attributeList;
+          })
+        }
+
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    oneSetting(){
+      this.skuList.forEach(skuInfo =>{
+        skuInfo.image = this.oneSettingForm.image
+        skuInfo.stock = this.oneSettingForm.stock
+        skuInfo.price = this.oneSettingForm.price
+      })
+    },
+    changeRule(ruleId){
+      this.titleList = []
+      let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
+      const {ruleAttrList} = ruleInfo;
+      let skuTotal = 1;
+      for (let ruleAttrListKey in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
+        this.titleList.push({
+          "label":ruleAttrInfo.name,
+          "prop":"prop"+ruleAttrListKey
+        })
+        skuTotal = skuTotal * ruleAttrInfo.valueList.length;
+      }
+      this.titleList.push(...this.templateTitleList) ;
+      console.log(this.titleList);
+      this.skuList = [];
+      for (let i = 0; i < skuTotal; i++) {
+        this.skuList.push(
+          {
+            "image": null,
+            "price": 85.62,
+            "stock": 236
+          }
+        );
+      }
+      // currentIndex 当前下标
+      for (let currentIndex in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[currentIndex];
+        // 连续出现次数  循环出现次数
+        let continuousSize = 1, forSize = 1;
+        for (let continuousIndex = parseInt(currentIndex) + 1 ; continuousIndex < ruleAttrList.length ; continuousIndex++ ){
+          continuousSize = continuousSize * ruleAttrList[continuousIndex].valueList.length;
+        }
+        for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--){
+          forSize = forSize * ruleAttrList[forIndex].valueList.length
+        }
+        console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize}  循环出现次数：${forSize}`)
+        let counter = 0;
+        for (let forIndex = 0; forIndex < forSize; forIndex++) {
+          const {valueList} = ruleAttrInfo;
+          valueList.forEach(value => {
+            for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
+              this.skuList[counter++]["prop"+currentIndex] = value;
+            }
+          })
+        }
+      }
+    },
+    saveCustomAttribute(){
+      addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
+        if (response.code === 200){
+          // 添加逻辑
+          let attributeId = response.data,
+              code = this.customAttributeForm.code,
+              name = this.customAttributeForm.name,
+              value = this.customAttributeForm.value;
+
+          this.categoryCommonElement.attributeList.push({
+            "id":attributeId,
+            "name":name,
+            "code":code
+          });
+          this.attributeIdCheckedList.push(attributeId);
+          this.attributeCheckedList.push({
+            "id":attributeId,
+            "name":name,
+            "value":value
+          });
+          this.customAttributeForm = {}
+          this.customAttributeFormStatus =false;
+        }
+      })
+    },
+    attributeCheckedFun() {
+      // attributeIdCheckedList -> attributeCheckedList 不在
+      // 1 -> ID 1 : attributeCheckedList[] -> 1
+      // 2 -> ID 3 : attributeCheckedList[1] -> 3
+      let attributeId =this.attributeIdCheckedList
+        .find(attributeId =>
+          this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1
+        )
+      if (attributeId !== undefined){
+        let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
+        this.attributeCheckedList.push(attributeInfo);
+      }else {
+        // attributeIdCheckedList [3] : attributeCheckedList [] -> [3]
+        // attributeIdCheckedList [3,5] : attributeCheckedList [3] -> [3,5]
+        // attributeIdCheckedList [3,5,9] : attributeCheckedList [3,5] -> [3,5,9]
+        // attributeIdCheckedList [3,9] : attributeCheckedList [3,5,9] -> [3,9]
+        // attributeCheckedList 集合  不在 attributeIdCheckedList 集合的元素，然后删除
+        let attributeChecked = this.attributeCheckedList.find(attributeChecked => this.attributeIdCheckedList.indexOf(attributeChecked.id) === -1);
+        this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked), 1);
+      }
+
+    },
+    initRuleList(){
+      listRule({"params[isPage]": false}).then(response => {
+        this.ruleList = response.data;
+      });
+    },
+    initCategoryTree(){
+      listCategory().then(response => {
+        this.categoryOptions = [];
+        this.categoryOptions = this.handleTree(response.data, "id", "parentId");
+        console.log(this.categoryOptions)
+      });
+    },
+    remoteSearchBrandList(queryValue){
+      listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
+        this.brandList = response.data;
+      });
+    },
+    last() {
+      this.stepNumber--
+    },
+    next() {
+      this.stepNumber++
+    },
+    /** 查询商品信息列表 */
+    getList() {
+      this.loading = true;
+      listInfo(this.queryParams).then(response => {
+        this.infoList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        introduction: null,
+        mianType: null,
+        parentType: null,
+        type: null,
+        image: null,
+        carouselImages: null,
+        status: null,
+        ruleId: null,
+        brandId: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+      this.initCategoryTree();
+      this.initRuleList();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加商品信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getInfo(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改商品信息";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateInfo(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addInfo(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
+        return delInfo(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/info/export', {
+        ...this.queryParams
+      }, `info_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
+<style>
+.el-select-dropdown__item{
+  height: 45px;
+}
+.box-card {
+  margin: 10px;
+}
+</style>
diff --git a/src/views/product/product/index.vue b/src/views/product/product/index.vue
deleted file mode 100644
index 2480ad7..0000000
--- a/src/views/product/product/index.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="商品名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入商品名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_yes_no"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="规格" prop="ruleId">
-        <el-input
-          v-model="queryParams.ruleId"
-          placeholder="请输入规格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="品牌" prop="brandId">
-        <el-input
-          v-model="queryParams.brandId"
-          placeholder="请输入品牌"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['product:product:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['product:product:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['product:product:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['product:product:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="商品名称" align="center" prop="name" />
-      <el-table-column label="描述" align="center" prop="describe" />
-      <el-table-column label="类型" align="center" prop="type" />
-      <el-table-column label="图片" align="center" prop="image" width="100">
-        <template slot-scope="scope">
-          <image-preview :src="scope.row.image" :width="50" :height="50"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="轮播图片" align="center" prop="carouselImages" width="100">
-        <template slot-scope="scope">
-          <image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="规格" align="center" prop="ruleId" />
-      <el-table-column label="品牌" align="center" prop="brandId" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['product:product:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['product:product:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改商品信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="商品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入商品名称" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <editor v-model="form.describe" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="图片" prop="image">
-          <image-upload v-model="form.image"/>
-        </el-form-item>
-        <el-form-item label="轮播图片" prop="carouselImages">
-          <image-upload v-model="form.carouselImages"/>
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_yes_no"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="规格" prop="ruleId">
-          <el-input v-model="form.ruleId" placeholder="请输入规格" />
-        </el-form-item>
-        <el-form-item label="品牌" prop="brandId">
-          <el-input v-model="form.brandId" placeholder="请输入品牌" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/product/product";
-
-export default {
-  name: "Product",
-  dicts: ['sys_yes_no'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 商品信息表格数据
-      productList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        name: null,
-        describe: null,
-        type: null,
-        image: null,
-        carouselImages: null,
-        status: null,
-        ruleId: null,
-        brandId: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询商品信息列表 */
-    getList() {
-      this.loading = true;
-      listProduct(this.queryParams).then(response => {
-        this.productList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        name: null,
-        describe: null,
-        type: null,
-        image: null,
-        carouselImages: null,
-        status: null,
-        ruleId: null,
-        brandId: null,
-        remark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加商品信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getProduct(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改商品信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateProduct(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addProduct(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
-        return delProduct(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('product/product/export', {
-        ...this.queryParams
-      }, `product_${new Date().getTime()}.xlsx`)
-    }
-  }
-};
-</script>
diff --git a/src/views/product/rule/index.vue b/src/views/product/rule/index.vue
index 6340689..6d23546 100644
--- a/src/views/product/rule/index.vue
+++ b/src/views/product/rule/index.vue
@@ -9,16 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_yes_no"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -75,11 +65,19 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="规格名称" align="center" prop="name" />
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column label="规格属性名" align="center" prop="name" >
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
+          <el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.name}}</span></el-row>
         </template>
       </el-table-column>
+      <el-table-column label="规格属性值" align="center" prop="name" >
+
+        <template slot-scope="scope">
+          <el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.valueList.toString()}}</span></el-row>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="规格状态" align="center" prop="status" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -100,7 +98,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -110,23 +108,53 @@
     />
 
     <!-- 添加或修改商品规格对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="规格名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入规格名称" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_yes_no"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <el-row v-for="(ruleAttr, index) in form.ruleAttrList">
+          <el-row style="margin: 20px 0">
+            <el-tag
+              :key="ruleAttr.name"
+              @close="removeRule(index)"
+              closable>
+              {{ruleAttr.name}}
+            </el-tag>
+          </el-row>
+          <el-row style="margin: 10px 0">
+            <el-tag
+              style="float: left; margin-right: 20px"
+              v-for="(ruleProperty, index) in ruleAttr.valueList"
+              :key="ruleProperty"
+              @close="removeRuleProperty(ruleAttr.valueList, index)"
+              closable>
+              {{ruleProperty}}
+            </el-tag>
+            <el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus" size="mini">添加</el-button>
+            <el-input v-if="ruleAttr.ruleAttrAddStatus"
+                      v-model="addRulePropertyValue"
+                      @blur="addRuleProperty(ruleAttr, false)"
+                      @keyup.enter.native="addRuleProperty(ruleAttr, true)"
+                      size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>
+          </el-row>
+          <el-divider></el-divider>
+        </el-row>
+        <el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus">添加规格</el-button>
+        <el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
+          <el-form-item label="规格名称">
+            <el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
+          </el-form-item>
+          <el-form-item label="规格属性">
+            <el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ruleAddFormFun">添加</el-button>
+          </el-form-item>
+        </el-form>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -141,7 +169,6 @@ import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/r
 
 export default {
   name: "Rule",
-  dicts: ['sys_yes_no'],
   data() {
     return {
       // 遮罩层
@@ -173,19 +200,96 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      },
+      ruleAddForm: {
+        name: null,
+        valueList: null,
+      },
+      ruleAddFormStatus: false,
+      addRulePropertyValue: null
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    removeRule(index){
+      this.form.ruleAttrList.splice(index, 1);
+    },
+    removeRuleProperty(valueList,index){
+      valueList.splice(index, 1);
+    },
+    addRuleProperty(ruleAttr, continuousInput){
+      if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
+        if (!continuousInput){
+          ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
+        }
+        return;
+      }
+      if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){
+        this.$message({
+          message: `规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
+          type: 'warning'
+        });
+        return;
+      }
+      ruleAttr.valueList.push(this.addRulePropertyValue)
+      this.addRulePropertyValue = null;
+      if (!continuousInput){
+        ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
+      }
+    },
+    ruleAddFormFun(){
+      if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
+        this.$message({
+          message: '规格名称不可为空',
+          type: 'warning'
+        });
+        return;
+      }
+      if (this.ruleAddForm.valueList === null || this.ruleAddForm.valueList.length === 0){
+        this.$message({
+          message: '规格属性不可为空',
+          type: 'warning'
+        });
+        return;
+      }
+
+      let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name === this.ruleAddForm.name);
+      if (ruleAttr === undefined){
+        this.form.ruleAttrList.push({
+          "name": this.ruleAddForm.name,
+          "valueList": [this.ruleAddForm.valueList],
+          "ruleAttrAddStatus": false
+        })
+      }else {
+        if (ruleAttr.valueList.indexOf(this.ruleAddForm.valueList) > -1){
+          this.$message({
+            message: `规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.valueList}]已经存在`,
+            type: 'warning'
+          });
+          return;
+        }
+        ruleAttr.valueList.push(this.ruleAddForm.valueList)
+      }
+      this.ruleAddForm = {
+        name: null,
+        valueList: null,
+      }
+      this.ruleAddFormStatus = false;
+    },
     /** 查询商品规格列表 */
     getList() {
       this.loading = true;
       listRule(this.queryParams).then(response => {
-        this.ruleList = response.rows;
-        this.total = response.total;
+        this.ruleList = response.data.rows;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
@@ -201,10 +305,7 @@ export default {
         name: null,
         status: null,
         remark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
+        ruleAttrList:[]
       };
       this.resetForm("form");
     },