商品信息-ui

src/api/product/good.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询商品测试列表
+export function listGood(query) {
+  return request({
+    url: '/product/good/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品测试详细
+export function getGood(id) {
+  return request({
+    url: '/product/good/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品测试
+export function addGood(data) {
+  return request({
+    url: '/product/good',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品测试
+export function updateGood(data) {
+  return request({
+    url: '/product/good/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品测试
+export function delGood(id) {
+  return request({
+    url: '/product/good/' + id,
+    method: 'delete'
+  })
+}

src/api/product/info.js

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

src/components/AttributeGroup/index.vue

@@ -26,11 +26,11 @@
         </div>
         <el-row>
           <el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
-            <el-form-item label="属性编码">
+            <el-form-item label="属性组编码">
-              <el-input v-model="attributeGroupQuery.code" placeholder="属性编码"></el-input>
+              <el-input v-model="attributeGroupQuery.code" placeholder="属性组编码"></el-input>
             </el-form-item>
-            <el-form-item label="属性名称">
+            <el-form-item label="属性组名称">
-              <el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
+              <el-input v-model="attributeGroupQuery.name" placeholder="属性组名称"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="queryAttributeGroup">查询</el-button>

src/views/product/attributeGroup/index.vue

@@ -221,7 +221,7 @@
               :total="attributeTotal"
               :page.sync="attribute.pageNum"
               :limit.sync="attribute.pageSize"
-              @pagination="getList1"
+              @pagination="attributeQuery"
             />
             {{ attributeIdList }}
           </el-card>
@@ -295,7 +295,7 @@ export default {
       },
       // 表单参数
       form: {
-        attributeIds:"",
+        attributeIdList: [],
       },
       // 表单校验
       rules: {
@@ -310,12 +310,11 @@ export default {
   },
   created() {
     this.getList();
-    this.getList1();
   },
   methods: {
 
     attributeQuery() {
-      listAttribute(this.queryParams).then(response => {
+      listAttribute(this.attribute).then(response => {
         this.attributeList = response.data.rows;
         this.attributeTotal = response.data.total;
       });
@@ -323,13 +322,6 @@ export default {
     handleClose(index) {
       this.attributeIdList.splice(this.attributeIdList.indexOf(index), 1)
     },
-    /** 查询商品属性列表 */
-    getList1() {
-      listAttribute(this.attribute).then(response => {
-        this.attributeList = response.data.rows;
-        this.attributeTotal = response.data.total;
-      });
-    },
     /** 查询商品属性组列表 */
     getList() {
       this.loading = true;
@@ -387,6 +379,7 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getAttributeGroup(id).then(response => {
+        console.log(response)
         this.form = response.data;
         this.attributeIdList=response.data.attributeIdList
         this.open = true;
@@ -409,7 +402,6 @@ export default {
               this.attributeIdList=[]
             });
           } else {
-
             this.form.attributeIdList=this.attributeIdList
             addAttributeGroup(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");

src/views/product/category/index.vue

@@ -216,7 +216,11 @@ export default {
         introduction: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        attributeInfoList: [],
+        brandInfoList: [],
+        attributeGroupList: [],
+      },
       // 表单校验
       rules: {
         name: [
@@ -354,11 +358,18 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          this.form.brandInfoList=this.brandInfoList
+          this.form.attributeInfoList=this.attributeInfoList
+          this.form.attributeGroupList=this.attributeGroupList
+          console.log(this.form)
           if (this.form.id != null) {
             updateCategory(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
+              this.attributeInfoList=[]
+              this.attributeGroupList=[]
+              this.brandInfoList=[]
             });
           } else {
             addCategory(this.form).then(response => {
@@ -366,6 +377,9 @@ export default {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+              this.attributeInfoList=[]
+              this.attributeGroupList=[]
+              this.brandInfoList=[]
             });
           }
         }

src/views/product/good/index.vue

@@ -0,0 +1,540 @@
+<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="typeName">
+        <el-input
+          v-model="queryParams.typeName"
+          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:good: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:good: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:good: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:good:export']"
+        >导出
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    {{goodList}}
+    <el-table v-loading="loading" :data="goodList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="id" align="center" prop="id"/>
+      <el-table-column label="属性名" align="center" prop="name"/>
+      <el-table-column label="可检索" align="center" prop="searching"/>
+      <el-table-column label="值类型" align="center" prop="typeName"/>
+      <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="checkValue"/>
+      <el-table-column label="启用" align="center" prop="enable"/>
+      <el-table-column label="所属分类" align="center" prop="classify"/>
+      <el-table-column label="所属分组" align="center" prop="groupValue"/>
+      <el-table-column label="快速展示" align="center" prop="quickShow">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.quickShow"/>
+        </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:good:edit']"
+          >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:good: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="typeName">
+          <el-switch
+            style="display: block"
+            v-model="value"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-text="只能单个值"
+            inactive-text="允许多个值">
+          </el-switch>
+        </el-form-item>
+
+
+        <el-form-item label="可选值">
+          <Attribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
+        </el-form-item>
+
+        <el-form-item label="图标" prop="image">
+          <image-upload v-model="form.image"/>
+        </el-form-item>
+
+        <el-form-item label="所属分组">
+          <el-cascader :options="options" clearable></el-cascader>
+        </el-form-item>
+
+
+        <el-form-item label="可检索" prop="searching">
+          <el-switch
+            v-model="form.searching"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="快速展示" prop="quickShow">
+          <el-switch
+            v-model="form.quickShow"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="启用" prop="enable">
+          <el-switch
+            v-model="form.enable"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" 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 {listGood, getGood, delGood, addGood, updateGood} from "@/api/product/good";
+
+export default {
+  name: "Good",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      options: [{
+        value: 'zhinan',
+        label: '指南',
+        children: [{
+          value: 'shejiyuanze',
+          label: '设计原则',
+          children: [{
+            value: 'yizhi',
+            label: '一致'
+          }, {
+            value: 'fankui',
+            label: '反馈'
+          }, {
+            value: 'xiaolv',
+            label: '效率'
+          }, {
+            value: 'kekong',
+            label: '可控'
+          }]
+        }, {
+          value: 'daohang',
+          label: '导航',
+          children: [{
+            value: 'cexiangdaohang',
+            label: '侧向导航'
+          }, {
+            value: 'dingbudaohang',
+            label: '顶部导航'
+          }]
+        }]
+      }, {
+        value: 'zujian',
+        label: '组件',
+        children: [{
+          value: 'basic',
+          label: 'Basic',
+          children: [{
+            value: 'layout',
+            label: 'Layout 布局'
+          }, {
+            value: 'color',
+            label: 'Color 色彩'
+          }, {
+            value: 'typography',
+            label: 'Typography 字体'
+          }, {
+            value: 'icon',
+            label: 'Icon 图标'
+          }, {
+            value: 'button',
+            label: 'Button 按钮'
+          }]
+        }, {
+          value: 'form',
+          label: 'Form',
+          children: [{
+            value: 'radio',
+            label: 'Radio 单选框'
+          }, {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          }, {
+            value: 'input',
+            label: 'Input 输入框'
+          }, {
+            value: 'input-number',
+            label: 'InputNumber 计数器'
+          }, {
+            value: 'select',
+            label: 'Select 选择器'
+          }, {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          }, {
+            value: 'switch',
+            label: 'Switch 开关'
+          }, {
+            value: 'slider',
+            label: 'Slider 滑块'
+          }, {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          }, {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          }, {
+            value: 'datetime-picker',
+            label: 'DateTimePicker 日期时间选择器'
+          }, {
+            value: 'upload',
+            label: 'Upload 上传'
+          }, {
+            value: 'rate',
+            label: 'Rate 评分'
+          }, {
+            value: 'form',
+            label: 'Form 表单'
+          }]
+        }, {
+          value: 'data',
+          label: 'Data',
+          children: [{
+            value: 'table',
+            label: 'Table 表格'
+          }, {
+            value: 'tag',
+            label: 'Tag 标签'
+          }, {
+            value: 'progress',
+            label: 'Progress 进度条'
+          }, {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          }, {
+            value: 'pagination',
+            label: 'Pagination 分页'
+          }, {
+            value: 'badge',
+            label: 'Badge 标记'
+          }]
+        }, {
+          value: 'notice',
+          label: 'Notice',
+          children: [{
+            value: 'alert',
+            label: 'Alert 警告'
+          }, {
+            value: 'loading',
+            label: 'Loading 加载'
+          }, {
+            value: 'message',
+            label: 'Message 消息提示'
+          }, {
+            value: 'message-box',
+            label: 'MessageBox 弹框'
+          }, {
+            value: 'notification',
+            label: 'Notification 通知'
+          }]
+        }, {
+          value: 'navigation',
+          label: 'Navigation',
+          children: [{
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          }, {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          }, {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          }, {
+            value: 'dropdown',
+            label: 'Dropdown 下拉菜单'
+          }, {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }]
+        }, {
+          value: 'others',
+          label: 'Others',
+          children: [{
+            value: 'dialog',
+            label: 'Dialog 对话框'
+          }, {
+            value: 'tooltip',
+            label: 'Tooltip 文字提示'
+          }, {
+            value: 'popover',
+            label: 'Popover 弹出框'
+          }, {
+            value: 'card',
+            label: 'Card 卡片'
+          }, {
+            value: 'carousel',
+            label: 'Carousel 走马灯'
+          }, {
+            value: 'collapse',
+            label: 'Collapse 折叠面板'
+          }]
+        }]
+      }, {
+        value: 'ziyuan',
+        label: '资源',
+        children: [{
+          value: 'axure',
+          label: 'Axure Components'
+        }, {
+          value: 'sketch',
+          label: 'Sketch Templates'
+        }, {
+          value: 'jiaohu',
+          label: '组件交互文档'
+        }]
+      }],
+      attributeInfoList: [],
+      value: true,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 商品测试表格数据
+      goodList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        typeName: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {}
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询商品测试列表 */
+    getList() {
+      this.loading = true;
+      listGood(this.queryParams).then(response => {
+        console.log(response)
+        this.goodList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        searching: null,
+        typeName: null,
+        image: null,
+        checkValue: null,
+        enable: null,
+        classify: null,
+        groupValue: null,
+        quickShow: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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
+      getGood(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) {
+            updateGood(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addGood(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 delGood(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('product/good/export', {
+        ...this.queryParams
+      }, `good_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/product/productInfo/index.vue

@@ -9,22 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="主类型" prop="mainType">
-        <el-input
-          v-model="queryParams.mainType"
-          placeholder="请输入主类型"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="父类型" prop="parentType">
-        <el-input
-          v-model="queryParams.parentType"
-          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>
@@ -39,7 +23,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['product:productInfo:add']"
+          v-hasPermi="['product:info:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -50,7 +34,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['product:productInfo:edit']"
+          v-hasPermi="['product:info:edit']"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -61,7 +45,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['product:productInfo:remove']"
+          v-hasPermi="['product:info:remove']"
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -71,13 +55,13 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          v-hasPermi="['product:productInfo:export']"
+          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="productInfoList" @selection-change="handleSelectionChange">
+    <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" />
@@ -95,7 +79,11 @@
           <image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
         </template>
       </el-table-column>
-      <el-table-column label="商品状态" align="center" prop="status" />
+      <el-table-column label="商品状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="规格" align="center" prop="ruleId" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -105,14 +93,14 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['product:productInfo:edit']"
+            v-hasPermi="['product:info:edit']"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['product:productInfo:remove']"
+            v-hasPermi="['product:info:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -128,44 +116,149 @@
 
     <!-- 添加或修改商品信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+
+      <el-steps :active="active" 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">
-        <el-form-item label="商品名称" prop="name">
+
-          <el-input v-model="form.name" placeholder="请输入商品名称" />
+        <div v-if="active==1">
-        </el-form-item>
+          <el-row>
-        <el-form-item label="商品描述">
+            <el-col :span="12">
-          <editor v-model="form.introduction" :min-height="192"/>
+              <el-form-item label="商品名称" prop="name">
-        </el-form-item>
+                <el-input v-model="form.name" placeholder="请输入商品名称" />
-        <el-form-item label="主类型" prop="mainType">
+              </el-form-item>
-          <el-input v-model="form.mainType" placeholder="请输入主类型" />
+            </el-col>
-        </el-form-item>
+            <el-col :span="12">
-        <el-form-item label="父类型" prop="parentType">
+              <el-form-item label="商品状态" prop="status">
-          <el-input v-model="form.parentType" placeholder="请输入父类型" />
+                <el-radio-group v-model="form.status">
-        </el-form-item>
+                  <el-radio
-        <el-form-item label="商品图片" prop="image">
+                    v-for="dict in dict.type.sys_normal_disable"
-          <image-upload v-model="form.image"/>
+                    :key="dict.value"
-        </el-form-item>
+                    :label="dict.value"
-        <el-form-item label="商品轮播图" prop="carouselImages">
+                  >{{dict.label}}</el-radio>
-          <image-upload v-model="form.carouselImages"/>
+                </el-radio-group>
-        </el-form-item>
+              </el-form-item>
-        <el-form-item label="备注" prop="remark">
+            </el-col>
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-row>
-        </el-form-item>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="商品品牌" prop="name">
+                <el-select
+                  v-model="value"
+                  multiple
+                  filterable
+                  remote
+                  reserve-keyword
+                  placeholder="请输入关键词"
+                  :remote-method="remoteMethod"
+                  :loading="loading">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="商品描述">
+                <editor v-model="form.introduction" :min-height="192"/>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="商品图片" prop="image">
+                <image-upload v-model="form.image"/>
+              </el-form-item>
+              <el-form-item label="商品轮播图" prop="carouselImages">
+                <image-upload v-model="form.carouselImages"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+
+        <div v-if="active==2">
+          <el-form-item label="商品备注">
+            <editor v-model="form.remark" :min-height="192"/>
+
+
+
+          </el-form-item>
+        </div>
+
+        <div v-if="active==3">
+
+
+        </div>
+
+        <div v-if="active==4">
+          <el-form-item label="商品品类" prop="name">
+            <el-input v-model="form.name" placeholder="商品品类" />
+          </el-form-item>
+        </div>
+
+
       </el-form>
+
+
+      <el-button style="margin-top: 12px;" @click="back">上一步</el-button>
+      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
       <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 { listProductInfo, getProductInfo, delProductInfo, addProductInfo, updateProductInfo } from "@/api/product/productInfo";
+import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
+import {listBrand} from "@/api/product/brand";
 
 export default {
-  name: "ProductInfo",
+  name: "Info",
+  dicts: ['sys_normal_disable'],
   data() {
     return {
+      options: [],
+      value: [],
+      list: [],
+      states: ["Alabama", "Alaska", "Arizona",
+        "Arkansas", "California", "Colorado",
+        "Connecticut", "Delaware", "Florida",
+        "Georgia", "Hawaii", "Idaho", "Illinois",
+        "Indiana", "Iowa", "Kansas", "Kentucky",
+        "Louisiana", "Maine", "Maryland",
+        "Massachusetts", "Michigan", "Minnesota",
+        "Mississippi", "Missouri", "Montana",
+        "Nebraska", "Nevada", "New Hampshire",
+        "New Jersey", "New Mexico", "New York",
+        "North Carolina", "North Dakota", "Ohio",
+        "Oklahoma", "Oregon", "Pennsylvania",
+        "Rhode Island", "South Carolina",
+        "South Dakota", "Tennessee", "Texas",
+        "Utah", "Vermont", "Virginia",
+        "Washington", "West Virginia", "Wisconsin",
+        "Wyoming"],
+      brandList: [],
+      ruleList: [],
+      ruleAddForm: {
+        name: null,
+        ruleList: null,
+      },
+      ruleAddFormStatus: false,
+      addRulePropertyValue: null,
+      active:1,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -179,7 +272,7 @@ export default {
       // 总条数
       total: 0,
       // 商品信息表格数据
-      productInfoList: [],
+      infoList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -192,12 +285,10 @@ export default {
         introduction: null,
         mainType: null,
         parentType: null,
-        type: null,
-        status: null,
-        ruleId: null,
       },
       // 表单参数
-      form: {},
+      form: {
+      },
       // 表单校验
       rules: {
         name: [
@@ -207,13 +298,13 @@ export default {
           { required: true, message: "商品描述不能为空", trigger: "blur" }
         ],
         mainType: [
-          { required: true, message: "主类型不能为空", trigger: "blur" }
+          { required: true, message: "主类型不能为空", trigger: "change" }
         ],
         parentType: [
-          { required: true, message: "父类型不能为空", trigger: "blur" }
+          { required: true, message: "父类型不能为空", trigger: "change" }
         ],
         type: [
-          { required: true, message: "商品类型不能为空", trigger: "blur" }
+          { required: true, message: "商品类型不能为空", trigger: "change" }
         ],
         image: [
           { required: true, message: "商品图片不能为空", trigger: "blur" }
@@ -230,24 +321,50 @@ export default {
         remark: [
           { required: true, message: "备注不能为空", trigger: "blur" }
         ],
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
-        ],
       }
     };
   },
   created() {
     this.getList();
+    this.getBrandList();
+  },
+  mounted() {
+    this.list = this.states.map(item => {
+      return { value: `value:${item}`, label: `label:${item}` };
+    });
   },
   methods: {
+    getBrandList() {
+      listBrand(this.queryParams).then(response => {
+        this.brandList = response.data.rows;
+      });
+    },
+    remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.options = this.list.filter(item => {
+            return item.label.toLowerCase()
+              .indexOf(query.toLowerCase()) > -1;
+          });
+        }, 200);
+      } else {
+        this.options = [];
+      }
+    },
+
+    next() {
+      if (this.active++ >= 4) this.active = 1;
+    },
+    back() {
+      if (this.active-- <= 1) this.active = 4;
+    },
     /** 查询商品信息列表 */
     getList() {
       this.loading = true;
-      listProductInfo(this.queryParams).then(response => {
+      listInfo(this.queryParams).then(response => {
-        this.productInfoList = response.data.rows;
+        this.infoList = response.data.rows;
         this.total = response.data.total;
         this.loading = false;
       });
@@ -265,7 +382,7 @@ export default {
         introduction: null,
         mainType: null,
         parentType: null,
-        type: [],
+        type: null,
         image: null,
         carouselImages: null,
         status: null,
@@ -304,9 +421,8 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
-      getProductInfo(id).then(response => {
+      getInfo(id).then(response => {
         this.form = response.data;
-        this.form.type = this.form.type.split(",");
         this.open = true;
         this.title = "修改商品信息";
       });
@@ -315,15 +431,14 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          this.form.type = this.form.type.join(",");
           if (this.form.id != null) {
-            updateProductInfo(this.form).then(response => {
+            updateInfo(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProductInfo(this.form).then(response => {
+            addInfo(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -336,7 +451,7 @@ export default {
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
-        return delProductInfo(ids);
+        return delInfo(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
@@ -344,9 +459,9 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('product/productInfo/export', {
+      this.download('product/info/export', {
         ...this.queryParams
-      }, `productInfo_${new Date().getTime()}.xlsx`)
+      }, `info_${new Date().getTime()}.xlsx`)
     }
   }
 };

src/views/product/rule/index.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
@@ -61,11 +62,30 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    {{ruleList}}
     <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="status" />
+
+      <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="name" >
+        <template slot-scope="scope">
+          <el-row v-for="rule in scope.row.ruleAttrList"><span>{{rule.name}}</span></el-row>
+        </template>
+      </el-table-column>
+      <el-table-column label="规格属性值" align="center" prop="name" >
+
+        <template slot-scope="scope">
+          <el-row v-for="rule in scope.row.ruleAttrList"><span>{{rule.ruleList.toString()}}</span></el-row>
+
+        </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">
@@ -74,7 +94,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['product:rule:edit']"
+            v-hasPermi="['product:rule:query']"
           >修改</el-button>
           <el-button
             size="mini"
@@ -96,14 +116,92 @@
     />
 
     <!-- 添加或修改商品规格对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="规格名称" prop="name">
+
-          <el-input v-model="form.name" placeholder="请输入规格名称" />
+        <el-row>
-        </el-form-item>
+          <el-col :span="12">
-        <el-form-item label="备注">
+            <el-form-item label="规格名称" prop="name">
-          <editor v-model="form.remark" :min-height="192"/>
+              <el-input v-model="form.name" placeholder="请输入规格名称" />
-        </el-form-item>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="规格状态" prop="states">
+              <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-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-row>
+
+
+        <el-row v-for="(rule, index) in form.ruleList">
+          <el-row style="margin: 15px 10px">
+              规格名称：
+              <el-tag
+                :key="rule.name"
+                @close="removeRule(index)"
+                closable>
+                {{rule.name}}
+              </el-tag>
+          </el-row>
+          <el-row style="margin: 15px 10px">
+            规格属性：
+            <el-tag
+              v-for="(ruleProperty, index) in rule.ruleList"
+              :key="ruleProperty"
+              @close="removeRuleProperty(rule.ruleList, index)"
+              closable>
+              {{ruleProperty}}
+            </el-tag>
+            <el-button v-if="!rule.ruleAddStatus" @click="rule.ruleAddStatus = !rule.ruleAddStatus" size="mini">添加</el-button>
+            <el-input v-if="rule.ruleAddStatus"
+                      v-model="addRulePropertyValue"
+                      @blur="addRuleProperty(rule, false)"
+                      @keyup.enter.native="addRuleProperty(rule, true)"
+                      size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>
+          </el-row>
+          <el-divider></el-divider>
+        </el-row>
+        <el-button v-if="!ruleAddFormStatus" type="success" @click="ruleAddFormStatus = !ruleAddFormStatus">添加规格</el-button>
+
+        <el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
+
+          <el-row>
+            <el-form-item label="规格名称">
+              <el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
+            </el-form-item>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="规格属性">
+                <el-input v-model="ruleAddForm.ruleList" placeholder="请输入规格属性"></el-input>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item>
+                <el-button type="danger" @click="ruleAdd" plain>添加</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+        </el-form>
+
+
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -118,6 +216,7 @@ import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/r
 
 export default {
   name: "Rule",
+  dicts: ['sys_yes_no'],
   data() {
     return {
       // 遮罩层
@@ -146,7 +245,10 @@ export default {
         status: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        ruleList:[],
+        ruleAttrList:[]
+      },
       // 表单校验
       rules: {
         createBy: [
@@ -155,17 +257,92 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
-      }
+      },
+      ruleAddForm: {
+        name: null,
+        ruleList: null,
+      },
+      ruleAddFormStatus: false,
+      addRulePropertyValue: null
     };
   },
   created() {
     this.getList();
   },
   methods: {
+
+    removeRule(index){
+      this.form.ruleList.splice(index, 1);
+    },
+    removeRuleProperty(ruleList,index){
+      ruleList.splice(index, 1);
+    },
+    addRuleProperty(rule, continuousInput){
+      if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
+        if (!continuousInput){
+          rule.ruleAddStatus = !rule.ruleAddStatus
+        }
+        return;
+      }
+      if (rule.ruleList.indexOf(this.addRulePropertyValue) > -1){
+        this.$message({
+          message: `规格[${rule.name}]属性值[${this.addRulePropertyValue}]已经存在`,
+          type: 'warning'
+        });
+        return;
+      }
+      rule.ruleList.push(this.addRulePropertyValue)
+      this.addRulePropertyValue = null;
+      if (!continuousInput){
+        rule.ruleAddStatus = !rule.ruleAddStatus
+      }
+    },
+    ruleAdd(){
+      if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
+        this.$message({
+          message: '规格名称不可为空',
+          type: 'warning'
+        });
+        return;
+      }
+      if (this.ruleAddForm.ruleList === null || this.ruleAddForm.ruleList.length === 0){
+        this.$message({
+          message: '规格属性不可为空',
+          type: 'warning'
+        });
+        return;
+      }
+
+      let rule = this.form.ruleList.find(rule => rule.name === this.ruleAddForm.name);
+      if (rule === undefined){
+        this.form.ruleList.push({
+          "name": this.ruleAddForm.name,
+          "ruleList": [this.ruleAddForm.ruleList],
+          "ruleAddStatus": false
+        })
+      }else {
+        if (rule.ruleList.indexOf(this.ruleAddForm.ruleList) > -1){
+          this.$message({
+            message: `规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.ruleList}]已经存在`,
+            type: 'warning'
+          });
+          return;
+        }
+        rule.ruleList.push(this.ruleAddForm.ruleList)
+      }
+      this.ruleAddForm = {
+        name: null,
+        ruleList: null,
+      }
+      this.ruleAddFormStatus = false;
+    },
+
+
     /** 查询商品规格列表 */
     getList() {
       this.loading = true;
       listRule(this.queryParams).then(response => {
+        console.log(response)
         this.ruleList = response.data.rows;
         this.total = response.data.total;
         this.loading = false;
@@ -183,10 +360,7 @@ export default {
         name: null,
         status: null,
         remark: null,
-        createBy: null,
+        ruleList:[]
-        createTime: null,
-        updateBy: null,
-        updateTime: null
       };
       this.resetForm("form");
     },
@@ -217,7 +391,10 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getRule(id).then(response => {
+        console.log(response)
         this.form = response.data;
+        this.form.ruleList= response.data.ruleAttrList
+        this.form.ruleList.ruleAddForm=response.data.ruleList.ruleList
         this.open = true;
         this.title = "修改商品规格";
       });