购物车缓存+页面

logo

src/api/product/attribute.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询商品属性列表
+export function listAttribute(query) {
+  return request({
+    url: '/product/attribute/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品属性详细
+export function getAttribute(id) {
+  return request({
+    url: '/product/attribute/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品属性
+export function addAttribute(data) {
+  return request({
+    url: '/product/attribute',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品属性
+export function updateAttribute(data) {
+  return request({
+    url: '/product/attribute/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品属性
+export function delAttribute(id) {
+  return request({
+    url: '/product/attribute/' + id,
+    method: 'delete'
+  })
+}

src/api/product/attributeGroup.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询属性组列表
+export function listAttributeGroup(query) {
+  return request({
+    url: '/product/attributeGroup/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询属性组详细
+export function getAttributeGroup(id) {
+  return request({
+    url: '/product/attributeGroup/' + id,
+    method: 'get'
+  })
+}
+
+// 新增属性组
+export function addAttributeGroup(data) {
+  return request({
+    url: '/product/attributeGroup',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改属性组
+export function updateAttributeGroup(data) {
+  return request({
+    url: '/product/attributeGroup/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除属性组
+export function delAttributeGroup(id) {
+  return request({
+    url: '/product/attributeGroup/' + id,
+    method: 'delete'
+  })
+}

src/api/product/brand.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询品牌信息列表
+export function listBrand(query) {
+  return request({
+    url: '/product/brand/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询品牌信息详细
+export function getBrand(id) {
+  return request({
+    url: '/product/brand/' + id,
+    method: 'get'
+  })
+}
+
+// 新增品牌信息
+export function addBrand(data) {
+  return request({
+    url: '/product/brand',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改品牌信息
+export function updateBrand(data) {
+  return request({
+    url: '/product/brand/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除品牌信息
+export function delBrand(id) {
+  return request({
+    url: '/product/brand/' + id,
+    method: 'delete'
+  })
+}

src/api/product/category.js

@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+// 查询品类信息列表
+export function listCategory(query) {
+  return request({
+    url: '/product/category/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询品类信息详细
+export function getCategory(id) {
+  return request({
+    url: '/product/category/' + 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) {
+  return request({
+    url: '/product/category',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改品类信息
+export function updateCategory(data) {
+  return request({
+    url: '/product/category/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除品类信息
+export function delCategory(id) {
+  return request({
+    url: '/product/category/' + id,
+    method: 'delete'
+  })
+}

src/api/product/comment.js

@@ -0,0 +1,44 @@
+import request from '@/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'
+  })
+}

src/api/product/info.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+
+// 查询商品信息列表
+export function listInfo(query) {
+  return request({
+    url: '/product/info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品信息详细
+export function getInfo(id) {
+  return request({
+    url: '/product/info/' + id,
+    method: 'get'
+  })
+}
+// 查询商品信息详细
+export function getDetailInfo(id) {
+  return request({
+    url: '/product/info/detail/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品信息
+export function addInfo(data) {
+  return request({
+    url: '/product/info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品信息
+export function updateInfo(data) {
+  return request({
+    url: '/product/info/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品信息
+export function delInfo(id) {
+  return request({
+    url: '/product/info/' + id,
+    method: 'delete'
+  })
+}

src/api/product/rule.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询商品规格列表
+export function listRule(query) {
+  return request({
+    url: '/product/rule/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品规格详细
+export function getRule(id) {
+  return request({
+    url: '/product/rule/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品规格
+export function addRule(data) {
+  return request({
+    url: '/product/rule',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品规格
+export function updateRule(data) {
+  return request({
+    url: '/product/rule/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品规格
+export function delRule(id) {
+  return request({
+    url: '/product/rule/' + id,
+    method: 'delete'
+  })
+}

src/api/shopCart/Info.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询购物车列表
+export function listInfo(query) {
+  return request({
+    url: '/shopCart/Info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询购物车详细
+export function getInfo(id) {
+  return request({
+    url: '/shopCart/Info/' + id,
+    method: 'get'
+  })
+}
+
+// 新增购物车
+export function addInfo(data) {
+  return request({
+    url: '/shopCart/Info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改购物车
+export function updateInfo(data) {
+  return request({
+    url: '/shopCart/Info/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除购物车
+export function delInfo(id) {
+  return request({
+    url: '/shopCart/Info/' + id,
+    method: 'delete'
+  })
+}

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>

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
+    }
+  },
+  data() {
+    return {
+      attributeGroupIdList: [],
+      checkedAttributeGroupList: [],
+      attributeGroupQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null
+      },
+      attributeGroupTotal: 0,
+      attributeGroupList: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val.toString() !== this.attributeGroupIdList.toString()){
+          this.attributeGroupIdList = val;
+          this.checkedAttributeGroupList = []
+        }
+      },
+      immediate: true,
+    },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedAttributeGroupList = val;
+          this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
+  },
+  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>

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
+    }
+  },
+  data() {
+    return {
+      brandIdList: [],
+      checkedBrandList: [],
+      brandQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null
+      },
+      brandTotal: 0,
+      brandList: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val.toString() !== this.brandIdList.toString()){
+          this.brandIdList = val;
+          this.checkedBrandList = []
+        }
+      },
+      immediate: true,
+    },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedBrandList = val;
+          this.brandIdList = this.checkedBrandList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
+  },
+  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>

src/components/Editor/index.vue

@@ -124,6 +124,9 @@ export default {
   methods: {
     init() {
       const editor = this.$refs.editor;
+      if (this.readOnly){
+        this.options.modules.toolbar = {};
+      }
       this.Quill = new Quill(editor, this.options);
       // 如果设置了上传地址则自定义图片上传事件
       if (this.type == 'url') {

src/components/ImageUpload/index.vue

@@ -149,7 +149,7 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {
-      if (res.data.code === 200) {
+      if (res.code === 200) {
         this.uploadList.push({name: res.data.url, url: res.data.url});
         this.uploadedSuccessfully();
       } else {

src/layout-shop-cart/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-container>
+    <el-header>
+      <div>
+        <div class="box1" style="float: right;margin-right: 13%">
+          <el-button type="text" style="color: white">请先登录</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="text" style="color: white">免费注册</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="text" style="color: white">我的订单</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="text" style="color: white">会员中心</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="text" style="color: white">帮助中心</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="text" style="color: white">在线客服</el-button>
+        </div>
+      </div>
+
+    </el-header>
+    <el-main>
+      <div class="custom-tabs">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-main>
+    <el-main>
+      <el-row :gutter="20">
+        <el-col :span="18" :offset="3">
+          <router-view/>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "layoutShopCart",
+  data() {
+    return {
+      activeName: ''
+    };
+  },
+  //监控data中的数据变化",
+  watch: {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    attachMouseoverEvent() {
+      const tabTitles = document.querySelectorAll('.el-tabs__item');
+      tabTitles.forEach(tab => {
+        tab.addEventListener('mouseover', () => {
+          const tabName = tab.getAttribute('name');
+          this.activeName = tabName;
+        });
+      });
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.attachMouseoverEvent()
+  }
+}
+</script>
+<style scoped>
+
+.custom-tabs .el-tabs__item.is-active {
+  cursor: default;
+}
+
+.el-header, .el-footer {
+  background-color: black;
+  color: white;
+  text-align: center;
+  line-height: 50px;
+}
+
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+}
+
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+
+.box1 {
+  transform: translate(0%, 10%); /* 将内容向上、向左移动自身宽高的一半，实现垂直水平居中 */
+}
+
+</style>

src/layout-shop/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-menu
+        default-active="1"
+        class="el-menu-demo"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b">
+        <el-menu-item index="1">处理中心</el-menu-item>
+        <el-submenu index="2">
+          <template slot="title">我的工作台</template>
+          <el-menu-item index="2-1">选项1</el-menu-item>
+          <el-menu-item index="2-2">选项2</el-menu-item>
+          <el-menu-item index="2-3">选项3</el-menu-item>
+          <el-submenu index="2-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="2-4-1">选项1</el-menu-item>
+            <el-menu-item index="2-4-2">选项2</el-menu-item>
+            <el-menu-item index="2-4-3">选项3</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-menu-item index="3" disabled>消息中心</el-menu-item>
+        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+      </el-menu>
+    </el-header>
+    <el-main>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="6">
+          <router-view/>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "layoutShop",
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>

src/main.js

@@ -37,6 +37,12 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// 属性选择
+import CheckAttribute from "@/components/CheckAttribute/index.vue";
+// 属性组选择
+import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";
+// 品牌选择
+import CheckBrand from "@/components/CheckBrand/index.vue";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -57,6 +63,9 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('CheckAttribute', CheckAttribute)
+Vue.component('CheckAttributeGroup', CheckAttributeGroup)
+Vue.component('CheckBrand', CheckBrand)
 
 Vue.use(directive)
 Vue.use(plugins)

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
+import LayoutShop from "@/layout-shop";
 
 Vue.use(Router)
 
@@ -73,6 +74,32 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '',
+    component: LayoutShop,
+    redirect: 'product-detail',
+    children: [
+      {
+        path: 'product-detail/:id',
+        component: () => import('@/views/product/info/detail/index'),
+        name: 'ProductDetail',
+        meta: {title: '商品详情', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
+  {
+    path: '',
+    component: LayoutShop,
+    redirect: 'shopCart-detail',
+    children: [
+      {
+        path: 'shopCart-detail/',
+        component: () => import('@/views/shopCart/Info/detail/index'),
+        name: 'shopCartDetail',
+        meta: {title: '购物车详情', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
   {
     path: '/user',
     component: Layout,
@@ -86,7 +113,7 @@ export const constantRoutes = [
         meta: {title: '个人中心', icon: 'user'}
       }
     ]
-  }
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/utils/request.js

@@ -73,7 +73,6 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-  debugger
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息

src/views/product/attribute/index.vue

@@ -0,0 +1,263 @@
+<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>
+        <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:attribute: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:attribute: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:attribute: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:attribute:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <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="code" />
+      <el-table-column label="属性名" align="center" prop="name" />
+      <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:attribute:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:attribute: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-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="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 { listAttribute, getAttribute, delAttribute, addAttribute, updateAttribute } from "@/api/product/attribute";
+
+export default {
+  name: "Attribute",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 商品属性表格数据
+      attributeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        code: null,
+        name: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        code: [
+          { required: true, message: "属性编码不能为空", trigger: "blur" }
+        ],
+        name: [
+          { required: true, message: "属性名不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询商品属性列表 */
+    getList() {
+      this.loading = true;
+      listAttribute(this.queryParams).then(response => {
+        this.attributeList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        code: null,
+        name: null,
+        createBy: null,
+        createTime: null,
+        remark: 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
+      getAttribute(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) {
+            updateAttribute(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addAttribute(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 delAttribute(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/attribute/export', {
+        ...this.queryParams
+      }, `attribute_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/product/attributeGroup/index.vue

@@ -0,0 +1,301 @@
+<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="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>
+      </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:attributeGroup: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:attributeGroup: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:attributeGroup: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:attributeGroup:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <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="name" />
+      <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">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['product:attributeGroup:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:attributeGroup: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-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <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>
+        <CheckAttribute v-model="form.attributeIdList"/>
+      </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 { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
+
+export default {
+  name: "AttributeGroup",
+  dicts: ['sys_yes_no'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 属性组表格数据
+      attributeGroupList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        states: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "组名称不能为空", trigger: "blur" }
+        ],
+        states: [
+          { required: true, message: "状态不能为空", trigger: "change" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+
+    /** 查询属性组列表 */
+    getList() {
+      this.loading = true;
+      listAttributeGroup(this.queryParams).then(response => {
+        this.attributeGroupList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        states: null,
+        remark: null,
+        attributeIdList: [],
+      };
+      this.checkedAttributeList = []
+      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
+      getAttributeGroup(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) {
+            updateAttributeGroup(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addAttributeGroup(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 delAttributeGroup(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/attributeGroup/export', {
+        ...this.queryParams
+      }, `attributeGroup_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/product/brand/index.vue

@@ -0,0 +1,312 @@
+<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="nam">
+        <el-input
+          v-model="queryParams.nam"
+          placeholder="请输入品牌名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <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"
+            :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>
+      </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:brand: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:brand: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:brand: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:brand:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <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="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="start">
+        <template slot-scope="scope">
+          <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">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['product:brand:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:brand: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-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <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" :limit="1" :is-show-tip="false"/>
+        </el-form-item>
+        <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-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-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 { listBrand, getBrand, delBrand, addBrand, updateBrand } from "@/api/product/brand";
+
+export default {
+  name: "Brand",
+  dicts: ['sys_yes_no'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 品牌信息表格数据
+      brandList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        nam: null,
+        logo: null,
+        start: null,
+        introduction: 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" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询品牌信息列表 */
+    getList() {
+      this.loading = true;
+      listBrand(this.queryParams).then(response => {
+        this.brandList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        nam: null,
+        logo: null,
+        start: null,
+        introduction: 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
+      getBrand(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) {
+            updateBrand(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addBrand(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 delBrand(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/brand/export', {
+        ...this.queryParams
+      }, `brand_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/product/category/index.vue

@@ -0,0 +1,385 @@
+<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="parentId">
+        <el-input
+          v-model="queryParams.parentId"
+          placeholder="请输入父级品类"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <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 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:category:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="categoryList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <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="start">
+        <template slot-scope="scope">
+          <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">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['product:category:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['product:category:add']"
+          >新增</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:category:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改品类信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <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>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+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";
+
+export default {
+  name: "Category",
+  dicts: ['sys_yes_no'],
+  components: {
+    Treeselect
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 品类信息表格数据
+      categoryList: [],
+      // 品类信息树选项
+      categoryOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        name: null,
+        image: null,
+        parentId: 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" }
+        ],
+        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();
+  },
+  methods: {
+    /** 查询品类信息列表 */
+    getList() {
+      this.loading = true;
+      listCategory(this.queryParams).then(response => {
+        this.categoryList = this.handleTree(response.data, "id", "parentId");
+        this.loading = false;
+      });
+    },
+    /** 转换品类信息数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
+    },
+	/** 查询品类信息下拉树结构 */
+    getTreeselect() {
+      listCategory().then(response => {
+        this.categoryOptions = [];
+        const data = { id: 0, name: '顶级节点', children: [] };
+        data.children = this.handleTree(response.data, "id", "parentId");
+        this.categoryOptions.push(data);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        image: null,
+        parentId: null,
+        start: null,
+        introduction: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.id) {
+        this.form.parentId = row.id;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加品类信息";
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null) {
+        this.form.parentId = row.parentId;
+      }
+      getCategory(row.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) {
+            updateCategory(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addCategory(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除品类信息编号为"' + row.id + '"的数据项？').then(function() {
+        return delCategory(row.id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/product/comment/index.vue

@@ -0,0 +1,293 @@
+<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="projectId">
+        <el-input
+          v-model="queryParams.projectId"
+          placeholder="请输入商品id"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="父类id" prop="parentId">
+        <el-input
+          v-model="queryParams.parentId"
+          placeholder="请输入父类id"
+          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:comment: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:comment: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:comment: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:comment:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <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="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="备注" 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:comment:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:comment: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-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <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"/>
+        </el-form-item>
+        <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>
+        <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 { listComment, getComment, delComment, addComment, updateComment } from "@/api/product/comment";
+
+export default {
+  name: "Comment",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 商品评论表格数据
+      commentList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: null,
+        comment: null,
+        images: null,
+        parentId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        projectId: [
+          { required: true, message: "商品id不能为空", trigger: "blur" }
+        ],
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询商品评论列表 */
+    getList() {
+      this.loading = true;
+      listComment(this.queryParams).then(response => {
+        this.commentList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        projectId: null,
+        comment: null,
+        images: null,
+        parentId: 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
+      getComment(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) {
+            updateComment(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addComment(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 delComment(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/comment/export', {
+        ...this.queryParams
+      }, `comment_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/product/info/detail/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>
+      <el-button @click="comeShopCart">进入购物车</el-button>
+      <el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <el-carousel trigger="click" height="400px">
+          <el-carousel-item v-for="item in carouselImages" :key="item">
+<!--            <h3 class="small">{{ item }}</h3>-->
+            <el-image :src="item" style="height: 100% ;width: 100%"/>
+          </el-carousel-item>
+        </el-carousel>
+        <div style="margin-top: 20px;">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div>
+                <el-statistic
+                  group-separator=","
+                  :precision="2"
+                  :value="123"
+                  :title="title"
+                ></el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic title="商品评价">
+                  <template slot="formatter">
+                    456
+                  </template>
+                </el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic
+                  group-separator=","
+                  :precision="0"
+                  decimal-separator="."
+                  :value="123"
+                  title="收藏人气">
+                </el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic  title="品牌信息">
+                  <template slot="formatter">
+                    {{projectDetail.brandInfo.nam}}
+                  </template>
+                </el-statistic>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :span="12">
+          <h1>{{ projectDetail.projectInfo.name }}</h1>
+          <h3>商品规格({{ selectedValues }})</h3>
+          <h2 style="color: red">￥{{this.form.price}}</h2>
+        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
+
+          <el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :key="index" :label="ruleAttr.name">
+            <el-radio-group  v-model="form['rule'+index]" @change="updSpecification">
+              <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          <el-form-item label="数量">
+            <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
+             <h1 style="color: red">总价格: {{this.form.price*this.form.num}}</h1>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="addToCart(form)">加入购物车</el-button>
+            <el-button>立即购买</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 30px;">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>商品详情</span>
+        </div>
+        <el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
+          <el-descriptions-item v-for="attribute in attributeGroup.attributeList"
+                                :label="attribute.name">{{attributeMap[attribute.id]}}</el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions v-if="projectDetail.attributeInfoList.length !== 0" title="其他属性" :column="1">
+          <el-descriptions-item v-for="attributeInfo in projectDetail.attributeInfoList"
+                                :label="attributeInfo.name">{{attributeMap[attributeInfo.id]}}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >
+<!--        <el-descriptions title="商品参数"  v-for="(AttributeGroup,index) in projectDetail.attributeGroupList">-->
+<!--          <el-descriptions-item :label="AttributeGroup.groupName">-->
+<!--            <div v-for="(group,index) in AttributeGroup.attributeList">{{group.name+","}}</div>-->
+<!--          </el-descriptions-item>-->
+<!--        </el-descriptions>-->
+<!--        <el-descriptions v-for="(Attribute,index) in projectDetail.productAttributeInfoList" >-->
+<!--          <el-descriptions-item :label="Attribute.name">{{Attribute.value}}</el-descriptions-item>-->
+<!--        </el-descriptions>-->
+
+        </editor>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getDetailInfo} from "@/api/product/info";
+import { addInfo } from '@/api/shopCart/Info'
+
+export default {
+  name: "productDetail",
+  data() {
+    return {
+      id:0,
+      selectedValues:'',
+      breadcrumbList: [
+        "服装",
+        "外衣",
+        "女式超柔软拉毛运动开衫"
+      ],
+      like: true,
+      value1: 4154.564,
+      value2: 1314,
+      title: "销量人气",
+      form: {
+        projectSku:"",
+        num: 1,
+        projectId:null,
+      },
+      editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
+      projectDetail: {
+        projectInfo:
+          {
+            name:"",
+          },
+        brandInfo:{
+          nam:"",
+        },
+        checkSkuInfo: {
+          price: 0.00
+        },
+        projectSkuInfoList:[
+          {
+            sku:"",
+          },
+        ],
+
+        attributeInfoList:[]
+      },
+      carouselImages:[],
+      attributeMap:{},
+    }
+  },
+  // computed:{
+  // //   计算属性
+  //   calculatedPrice(){
+  //     const intNum=parseInt(this.form.num,10);
+  //     console.info(intNum)
+  //     if (isNaN(intNum)){
+  //       return  0.0;
+  //     }
+  //     console.info(this.form.price * intNum)
+  //     return this.form.price * intNum;
+  //   }
+  // },
+  created() {
+    // const detailId = this.$route.params && this.$route.params.detailId;
+    this.id = this.$route.params.id
+    this.initProjectDetailInfo(this.id);
+
+  },
+  methods: {
+
+    // 进入购物车
+    comeShopCart(){
+      this.$router.push({
+        path: '/shopCart-detail',
+      })
+    },
+    // 规格改变
+    updSpecification(){
+      let selectedValues = this.projectDetail.ruleAttrModelList.map((ruleAttr, index) => {
+        return this.form['rule' + index]; // 获取每个索引对应的值
+      }).filter(value => value !== '').join('-'); // 过滤空值，然后拼接成字符串
+
+      this.selectedValues = selectedValues; // 将拼接值赋给 selectedValues
+      console.log('当前选中的拼接值:', this.selectedValues);
+      this.projectDetail.projectSkuInfoList.forEach(SkuInfo => {
+        if (SkuInfo.sku === this.selectedValues) {
+          console.log(SkuInfo)
+          this.form.price = SkuInfo.price;
+          console.log(this.form.price)
+        }
+      });
+
+    },
+    /**
+     * 进入购物车
+     */
+    addToCart(form){
+      this.form.projectSku="";
+      console.log(form)
+      Object.keys(form).forEach((key,index)=>{
+        if (key.startsWith('rule')){
+          this.form.projectSku+='-'+form[key]; //使用 trim() 方法去除字符串末尾可能存在的空格
+        }
+      })
+      this.form.projectSku=this.form.projectSku.substring(1)
+
+      console.log(this.form)
+      addInfo(this.form).then(response => {
+        this.$message({
+          message: '添加购物车成功',
+          type: 'success'
+        });
+      })
+    },
+    initProjectDetailInfo(id){
+      getDetailInfo(id).then(response => {
+        this.projectDetail = response.data;
+       //  给购物车id赋值
+       this.form.projectId=response.data.projectInfo.id
+        // 单选框初始化
+        this.selectedValues=this.projectDetail.projectSkuInfoList[0].sku
+        this.form.price=this.projectDetail.projectSkuInfoList[0].price;
+        let data =this.projectDetail.projectSkuInfoList[0].sku.split('-');
+
+        this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
+          let key = productAttributeInfo.attributeId;
+          this.attributeMap[key] = productAttributeInfo["value"];
+        })
+
+        let i=0;
+        data.forEach(x=>{
+          this.form['rule'+(i++)]=x;
+        })
+
+        // 轮播图
+        this.carouselImages=this.projectDetail.projectInfo.carouselImages.split(",");
+
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
+.ql-toolbar{
+  display: none;
+}
+</style>

src/views/product/info/index.vue

@@ -0,0 +1,817 @@
+<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>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleDetail(scope.row.id)"
+          >查看详细信息</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="type">
+            <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="templateAttributeGroupForm" 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="attributeForm" :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
+            max-height="500"
+            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="商品描述" prop="introduction">
+            <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" }
+        ],
+        status: [
+          { required: true, message: "商品状态不能为空", trigger: "blur" }
+        ],
+        brandId: [
+          { required: true, message: "商品品牌不能为空", trigger: "blur" }
+        ],
+        image: [
+          { required: true, message: "商品图片不能为空", trigger: "blur" }
+        ],
+        carouselImages: [
+          { required: true, message: "商品轮播图不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "商品品类不能为空", trigger: "blur" }
+        ],
+        ruleId: [
+          { required: true, message: "商品规格不能为空", trigger: "blur" }
+        ],
+      },
+      rulesTemplateMap: {
+        0: ["name", "status", "brandId", "image", "carouselImages"],
+        1: ["type"],
+        2: ["ruleId"],
+      },
+      stepNumber: 0,
+      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;
+          // categoryCommonElement / attributeIdCheckedList / attributeCheckedList
+          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() {
+      let isValidate = true;
+      this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
+        console.log(valid)
+        if (valid) {
+          isValidate = false;
+        }
+      });
+      if (isValidate){
+        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) {
+          let attrValueList = [];
+          for (const templateAttributeGroup of this.categoryCommonElement.templateAttributeGroupList) {
+            templateAttributeGroup.attributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          }
+
+          this.categoryCommonElement.templateAttributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          this.attributeCheckedList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === this.form.ruleId);
+          const {ruleAttrList} = ruleInfo;
+          let ruleAttrSize = ruleAttrList.length;
+          let productSkuList = this.skuList.map(skuInfo => {
+            let sku = "";
+            for (let index = 0; ; index++) {
+              sku += skuInfo["prop"+index];
+              if (index+1 >= ruleAttrSize){
+                break;
+              }else {
+                sku += "-";
+              }
+            }
+            return {
+              sku: sku,
+              image: skuInfo.image,
+              stock: skuInfo.stock,
+              price: skuInfo.price
+            }
+          })
+          let productAddReq = {
+            projectAddModel: this.form,
+            attrValueList: attrValueList,
+            productSkuList: productSkuList
+          };
+          console.log(productAddReq)
+          if (this.form.id != null) {
+            updateInfo(productAddReq).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addInfo(productAddReq).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 查询详细信息 */
+    handleDetail(id){
+      // this.$router.push 是在 SPA 中使用的，不会刷新页面，只会动态地加载或卸载组件
+      this.$router.push("/product-detail/"+id)
+
+      // window.open 会打开一个新的浏览器窗口或标签页，并加载一个全新的页面，这会导致整个页面的刷新
+      // let url = `${window.location.origin}/product-detail/${detailId}`
+      // window.open(url);
+    },
+    /** 删除按钮操作 */
+    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>

src/views/product/rule/index.vue

@@ -0,0 +1,382 @@
+<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>
+        <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:rule: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:rule: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:rule: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:rule:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="ruleList" @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="name" >
+        <template slot-scope="scope">
+          <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">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['product:rule:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:rule: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-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 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>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/rule";
+
+export default {
+  name: "Rule",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 商品规格表格数据
+      ruleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        status: null,
+      },
+      // 表单参数
+      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.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        status: null,
+        remark: null,
+        ruleAttrList:[]
+      };
+      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
+      getRule(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) {
+            updateRule(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRule(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 delRule(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/rule/export', {
+        ...this.queryParams
+      }, `rule_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/shopCart/Info/detail/index.vue

@@ -0,0 +1,358 @@
+<template>
+  <div>
+
+    {{cartInfoAttr}}
+    <span style="color: #8492a6">我的购物车</span>
+    <br> <br> <br>
+    <el-card class="box-card">
+      <template>
+        <el-table
+          ref="multipleTable"
+          :data="cartInfoAttr"
+          style="width: 100%;"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column label="商品信息" align="center">
+            <template v-slot="cartInfo">
+              <div>
+                <img style="float: left" :src="cartInfo.row.productSkuInfo.image" alt="暂无图片" width="80px" height="80px">
+                <span style="font-size: 16px"><b>{{ cartInfo.row.productSkuInfo.name }}</b></span> <br>
+                {{cartInfo.row.projectName}}
+                <br>
+                {{ cartInfo.row.productSkuInfo.sku }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="单价" align="center">
+            <template v-slot="cartInfo">
+              <span style="font-size: 16px">¥{{ cartInfo.row.productSkuInfo.price }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="数量" align="center" width="150">
+            <template v-slot="cartInfo">
+              <el-input-number v-model="cartInfo.row.num" :min="1" :max="cartInfo.row.productSkuInfo.stock" label="描述文字" @change="changeNum(cartInfo.row)"></el-input-number>
+            </template>
+          </el-table-column>
+          <el-table-column label="小计" align="center">
+            <template v-slot="cartInfo">
+              <span style="color: red;font-size: 16px">¥{{ cartInfo.row.subtotal }}</span>
+            </template>
+            show-overflow-tooltip
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template v-slot="cartInfo">
+              <el-button type="text" style="color: black">移入收藏夹</el-button>
+              <br>
+              <el-button type="text" style="color: black">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <br>
+        <span style="color: #8492a6">已失效商品</span>
+        <br><br>
+        <el-table style="border-top: black" :data="loseCartInfoAttr" :border="borderBoolean" :show-header="showHeader" >
+          <el-table-column width="55">
+            <el-checkbox disabled></el-checkbox>
+          </el-table-column>
+          <el-table-column align="center">
+            <template v-slot="cartInfo">
+              <div>
+                <img style="float: left" :src="cartInfo.row.productSkuInfo.image" alt="暂无图片" width="80px" height="80px">
+                <span style="font-size: 16px"><b>{{ cartInfo.row.productSkuInfo.name }}</b></span> <br>
+                {{cartInfo.row.projectName}}
+                <br>
+                {{ cartInfo.row.productSkuInfo.sku }}
+                <span v-if="cartInfo.row.productSkuInfo.stock == 0" style="color: red">已售罄</span>
+                <span v-else style="color: red">已下架</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center">
+            <template v-slot="cartInfo">
+              <span style="color: #8492a6;font-size: 16px">¥{{ cartInfo.row.productSkuInfo.price }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center">
+            <template v-slot="cartInfo">
+              <el-input-number disabled v-model="cartInfo.row.num" :min="1" :max="cartInfo.row.productSkuInfo.stock" label="描述文字"></el-input-number>
+            </template>
+          </el-table-column>
+          <el-table-column align="center">
+            <template v-slot="cartInfo">
+              <span style="color: #8492a6;font-size: 16px">¥{{ cartInfo.row.subtotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center">
+            <template v-slot="cartInfo">
+              <el-button type="text" style="color: black">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-card>
+    <br><br>
+    <!--    计算模块-->
+    <el-card>
+      <div>
+        <el-checkbox style="margin-top: 15px;margin-right: 20px" v-model="checkAll" @change="checkedAll">全选</el-checkbox>
+        <el-button type="text" style="color: black">删除选中商品</el-button>
+        <el-button type="text" style="color: black">移入收藏夹</el-button>
+        <div style="float: right;margin-bottom: 15px" >
+          <el-button style="width: 120px;height: 50px;" type="danger">下单结算</el-button>
+        </div>
+        <div style="float: right;margin-top: 12px;margin-right: 20px;font-size: 14px;color: #8492a6">
+          共 <span style="font-size: 16px;color: red">{{ computeInfo.packagesSum }}</span> 件商品，已选择 <span style="font-size: 16px;color: red">{{ computeInfo.packagesNumber }}</span> 件
+          <el-divider direction="vertical"></el-divider>
+          商品合计 : ¥{{ computeInfo.priceTotal }} <span style="margin-left: 10px"> 活动优惠 </span>: -¥{{ 0.00 }}
+          <el-divider direction="vertical"></el-divider>
+          应付总额：<span style="color: red;font-size: 20px"><b>¥{{ computeInfo.copeWith }}</b></span>
+        </div>
+
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      checkAll: false,
+      multipleSelection:[],
+      borderBoolean: false,
+      showHeader: false,
+      selectedList:[],
+      cartInfoAttr: [
+        {
+          id:1,
+          num: 2,
+          subtotal: 478,
+          isSelected:"Y",
+          projectName: '外套',
+          productSkuInfo: {
+            sku: '黑色-M',
+            price: 239.0,
+            stock: 10,
+            image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322190304A007.png'
+          }
+        },
+        {
+          id:2,
+          num: 1,
+          subtotal: 129,
+          isSelected:"Y",
+          projectName: '外套',
+          productSkuInfo: {
+            sku: '红色-S',
+            price: 129.0,
+            stock: 12,
+            image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322190304A007.png'
+          }
+        },
+        {
+          id:3,
+          num: 3,
+          subtotal: 477,
+          isSelected:"N",
+          projectName: '裤子',
+          productSkuInfo: {
+            sku: '白色-XL',
+            price: 159,
+            stock: 10,
+            image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
+          }
+        }
+      ],
+      loseCartInfoAttr: [
+        {
+          id:4,
+          num: 2,
+          subtotal: 478,
+          projectName: 'T恤衫',
+          productSkuInfo: {
+            sku: '黑色-M',
+            price: 239.0,
+            stock: 10,
+            image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
+          }
+        },
+        {
+          id:5,
+          num: 3,
+          subtotal: 478,
+          projectName: 'T恤衫',
+          productSkuInfo: {
+            sku: '红色-XL',
+            price: 239.0,
+            stock: 10,
+            image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
+          }
+        }
+      ],
+      computeInfo: {
+        packagesNumber: 0,
+        packagesSum: 0,
+        priceTotal: 0,
+        copeWith: 0
+      }
+    }
+  },
+  methods: {
+    // // 按钮变色
+    // changeTextColor() {
+    //   this.buttonTextColor = 'blue'; // 设置鼠标悬停时的文字颜色
+    //   console.log(this.buttonTextColor)
+    // },
+    // resetTextColor() {
+    //   this.buttonTextColor = 'black'; // 恢复默认的文字颜色
+    // },
+
+    //全选   true
+    checkedAll(selectAll) {
+
+      this.selectedList = []
+      if (selectAll) {
+        this.toggleSelection(this.cartInfoAttr)
+        this.selectedList = this.cartInfoAttr
+      }else{
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    /**
+     * 重置购物车已选择商品计算信息
+     */
+    computeInfoReset() {
+      this.computeInfo.packagesNumber = 0
+      this.computeInfo.priceTotal = 0
+      this.computeInfo.copeWith = 0
+      this.selectedList = []
+    },
+
+    //购物车商品选中
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+
+    //购物车商品选择改变方法
+    handleSelectionChange(val) {
+      console.log(val)
+      this.computeInfoReset()
+      this.selectedList = val
+      this.cartInfoAttr.forEach(cartInfo => {
+        cartInfo.isSelected = 'N'
+      })
+      if (val.length == this.cartInfoAttr.length) {
+        this.checkAll = true
+      }else{
+        this.checkAll = false
+      }
+      val.forEach(cartInfo => {
+
+        this.cartInfoAttr[this.cartInfoAttr.indexOf(cartInfo)].isSelected = 'Y'
+
+        this.computeInfo.copeWith += parseFloat(cartInfo.subtotal)
+        this.computeInfo.priceTotal += parseFloat(cartInfo.subtotal)
+        this.computeInfo.packagesNumber += parseInt(cartInfo.num)
+      })
+    },
+
+    //计算购物车商品总件数
+    computePackagesSum() {
+      this.computeInfo.packagesSum = 0
+      this.cartInfoAttr.forEach(cartInfo => {
+        this.computeInfo.packagesSum += cartInfo.num
+      })
+      this.loseCartInfoAttr.forEach(loseCartInfo => {
+        this.computeInfo.packagesSum += loseCartInfo.num
+      })
+    },
+
+    //改变购物车商品数量
+    changeNum(row) {
+      if (row.num === row.productSkuInfo.stock) {
+        this.$message({
+          message: '商品: '+row.projectName+' 库存不足',
+          type: 'warning'
+        });
+      }
+      this.computeInfoReset()
+      this.computeInfo.packagesSum = 0
+      this.cartInfoAttr.forEach(cartInfo => {
+        if (cartInfo.id == row.id){
+          cartInfo.subtotal = parseFloat(cartInfo.productSkuInfo.price) * parseInt(row.num)
+        }
+        if (cartInfo.isSelected == 't'){
+          this.computeInfo.copeWith += parseFloat(cartInfo.subtotal)
+          this.computeInfo.priceTotal += parseFloat(cartInfo.subtotal)
+          this.computeInfo.packagesNumber += parseInt(cartInfo.num)
+        }
+      })
+      this.computePackagesSum()
+    },
+
+    //获取购物车详情信息
+    cartInfoList() {
+      this.cartInfoAttr.forEach(cartInfo => {
+        this.computeInfo.packagesSum += cartInfo.num
+      })
+      this.loseCartInfoAttr.forEach(loseCartInfo => {
+        this.computeInfo.packagesSum += loseCartInfo.num
+      })
+      this.cartInfoAttr.forEach(cartInfo => {
+        if (cartInfo.isSelected == 't'){
+          this.selectedList.push(cartInfo)
+        }
+      })
+
+    }
+  },
+  mounted() {
+    this.toggleSelection(this.selectedList)
+  },
+  created() {
+    this.cartInfoList()
+  },
+    // handleSelectionChange(val){
+    //   this.multipleSelection=[]
+    //   this.cartInfoAttr.forEach(cartInfoAttr=>{
+    //
+    //     // 检查val数组中是否有与当前cartInfoAttr的projectName和productSkuInfo.sku相匹配的对象
+    //    const selected=val.find(item=>item.productSkuInfo.sku===cartInfoAttr.productSkuInfo.sku && item.projectName===cartInfoAttr.projectName)
+    //
+    //     // 根据selectedItem是否存在来设置isSelected属性   有-->"Y"  没有-->"N"
+    //     cartInfoAttr.isSelected=selected ? "Y" : "N";
+    //
+    //     // 如果item被选中，则将其SKU添加到multipleSelection数组中
+    //     if (cartInfoAttr.isSelected==="Y"){
+    //       this.multipleSelection.push(cartInfoAttr.productSkuInfo.sku)
+    //     }
+    //   })
+    //   console.log(this.multipleSelection)
+    // }
+    // handleSelectionChange(val){
+    //   this.multipleSelection=[]
+    //   this.cartInfoAttr.forEach(cartInfoAttr=>{
+    //    const selected =val.find(item=>item.productSkuInfo.sku===cartInfoAttr.productSkuInfo.sku && item.projectName === cartInfoAttr.projectName)
+    //
+    //     cartInfoAttr.isSelected=selected? "Y" :"N";
+    //
+    //    if (cartInfoAttr.isSelected==="Y"){
+    //      this.multipleSelection.push(cartInfoAttr.productSkuInfo.sku)
+    //    }
+    //
+    //   })
+    //   console.log(this.multipleSelection)
+    // }
+}
+</script>
+
+<style scoped>
+</style>

src/views/shopCart/Info/index.vue

@@ -0,0 +1,331 @@
+<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="projectId">
+        <el-input
+          v-model="queryParams.projectId"
+          placeholder="请输入商品"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="SKU" prop="projectSku">
+        <el-input
+          v-model="queryParams.projectSku"
+          placeholder="请输入SKU"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="数量" prop="num">
+        <el-input
+          v-model="queryParams.num"
+          placeholder="请输入数量"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否选中" prop="isSelected">
+        <el-input
+          v-model="queryParams.isSelected"
+          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="['shopCart: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="['shopCart: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="['shopCart: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="['shopCart: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="projectId" />
+      <el-table-column label="SKU" align="center" prop="projectSku" />
+      <el-table-column label="用户" align="center" prop="userId" />
+      <el-table-column label="数量" align="center" prop="num" />
+      <el-table-column label="是否选中" align="center" prop="isSelected" />
+      <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="['shopCart:Info:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['shopCart: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="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="商品" prop="projectId">
+          <el-input v-model="form.projectId" placeholder="请输入商品" />
+        </el-form-item>
+        <el-form-item label="SKU" prop="projectSku">
+          <el-input v-model="form.projectSku" placeholder="请输入SKU" />
+        </el-form-item>
+        <el-form-item label="用户" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户" />
+        </el-form-item>
+        <el-form-item label="数量" prop="num">
+          <el-input v-model="form.num" placeholder="请输入数量" />
+        </el-form-item>
+        <el-form-item label="是否选中" prop="isSelected">
+          <el-input v-model="form.isSelected" 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 { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/shopCart/Info";
+
+export default {
+  name: "Info",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 购物车表格数据
+      InfoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: null,
+        projectSku: null,
+        userId: null,
+        num: null,
+        isSelected: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        projectId: [
+          { required: true, message: "商品不能为空", trigger: "blur" }
+        ],
+        projectSku: [
+          { required: true, message: "SKU不能为空", trigger: "blur" }
+        ],
+        userId: [
+          { required: true, message: "用户不能为空", trigger: "blur" }
+        ],
+        num: [
+          { required: true, message: "数量不能为空", trigger: "blur" }
+        ],
+        isSelected: [
+          { required: true, message: "是否选中不能为空", trigger: "blur" }
+        ],
+        createBy: [
+          { required: true, message: "创建人不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询购物车列表 */
+    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,
+        projectId: null,
+        projectSku: null,
+        userId: null,
+        num: null,
+        isSelected: 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
+      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('shopCart/Info/export', {
+        ...this.queryParams
+      }, `Info_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/system/config/index.vue

@@ -155,7 +155,7 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="参数名称" prop="configName">
           <el-input v-model="form.configName" placeholder="请输入参数名称"/>

src/views/system/dict/data.vue

@@ -153,7 +153,7 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true"/>

src/views/system/dict/index.vue

@@ -165,7 +165,7 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称"/>

src/views/system/post/index.vue

@@ -130,7 +130,7 @@
     />
 
     <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="岗位名称" prop="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称"/>

src/views/system/role/index.vue

@@ -165,7 +165,7 @@
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称"/>
@@ -220,7 +220,7 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openDataScope" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="openDataScope" append-to-body width="80%">
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true"/>

src/views/tool/build/CodeTypeDialog.vue

@@ -4,7 +4,7 @@
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       v-bind="$attrs"
-      width="500px"
+      width="80%"
       @close="onClose"
       @open="onOpen"
       v-on="$listeners"

src/views/tool/gen/editTable.vue

@@ -183,7 +183,7 @@ export default {
       const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
       const genForm = this.$refs.genInfo.$refs.genInfoForm;
       Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
-        const validateResult = res.data.every(item => !!item);
+        const validateResult = res.every(item => !!item);
         if (validateResult) {
           const genTable = Object.assign({}, basicForm.model, genForm.model);
           genTable.columns = this.columns;
@@ -194,7 +194,7 @@ export default {
             parentMenuId: genTable.parentMenuId
           };
           updateGenTable(genTable).then(res => {
-            this.$modal.msgSuccess(res.data.msg);
+            this.$modal.msgSuccess(res.msg);
             if (res.code === 200) {
               this.close();
             }

src/views/tool/gen/importTable.vue

@@ -108,7 +108,7 @@ export default {
         return;
       }
       importTable({tables: tableNames}).then(res => {
-        this.$modal.msgSuccess(res.data.msg);
+        this.$modal.msgSuccess("导入成功");
         this.visible = false;
         this.$emit("ok");
       });

src/views/tool/gen/index.vue

@@ -96,21 +96,18 @@
         align="center"
         label="表名称"
         prop="tableName"
-        width="120"
       />
       <el-table-column
         :show-overflow-tooltip="true"
         align="center"
         label="表描述"
         prop="tableComment"
-        width="120"
       />
       <el-table-column
         :show-overflow-tooltip="true"
         align="center"
         label="实体"
         prop="className"
-        width="120"
       />
       <el-table-column align="center" label="创建时间" prop="createTime" width="160"/>
       <el-table-column align="center" label="更新时间" prop="updateTime" width="160"/>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://127.0.0.1:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''