更新

src/views/product/brand/index.vue

@@ -83,17 +83,23 @@
           <img :src="scope.row.logo" alt="品牌logo" width="50px" height="50px" />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="品牌状态" align="center" prop="status" >
-        label="品牌状态"
+
-        width="180">
         <template slot-scope="scope">
-          是否上下架：<el-switch
+          <el-switch
-          v-model="scope.row.status"
+            v-model="scope.row.status"
-          :active-value="1"
+            active-color="#13ce66"
-          :inactive-value="0"
+            inactive-color="#ff4949"
-          @change="updateBrandStatus"
+            active-text="上架"
-        ></el-switch>
+            inactive-text="下架"
+            inactive-value="0"
+            active-value="1"
+            @change="updateBrandStatus(scope.row)"
+          >
+          </el-switch>
         </template>
+
+
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">

src/views/product/info/index.vue

@@ -70,7 +70,18 @@
       <el-table-column type="selection" width="60" 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="productDesc" />
+      <el-table-column label="商品描述" align="center" prop="productDesc">
+        <template slot-scope="scope">
+          <el-popover
+            placement="right"
+            title="商品描述"
+            width="500"
+            trigger="click">
+            <div v-html="scope.row.productDesc"></div>
+            <el-button slot="reference" type="text">查看</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
       <el-table-column label="商品类型" align="center" prop="type" />
       <el-table-column label="冗余字段" align="center" prop="typeIds" />
       <el-table-column label="商品主图" align="center" prop="img">
@@ -90,7 +101,19 @@
       <el-table-column label="单位" align="center" prop="unit" />
       <el-table-column label="搜索关键字" align="center" prop="keywords" />
       <el-table-column label="规格信息" align="center" prop="ruleId" />
-      <el-table-column label="0：添加商品信息 1：添加规格信息 2：添加描述信息" align="center" prop="step" />
+      <el-table-column label="0：添加商品信息 1：添加规格信息 2：添加描述信息" align="center" prop="step"/>
+      <el-table-column label="商品描述" align="center" prop="productDesc">
+        <template slot-scope="scope">
+          <el-popover
+            placement="right"
+            title="商品描述"
+            width="500"
+            trigger="click">
+            <div v-html="scope.row.productDesc"></div>
+            <el-button slot="reference" type="text">查看</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -163,29 +186,102 @@
         </div>
 
         <div v-show="active == 1">
+
           <el-form-item label="规格信息" prop="ruleId">
             <el-select v-model="form.rule" placeholder="请选择规格" v-on:change="changeRuleInfoListByRuleId" clearable>
               <el-option v-for="item in ruleList" :label="item.name" :value="item.id" :key="item.id"></el-option>
             </el-select>
           </el-form-item>
 
+          <el-form ref="form" :model="skuFormTemplate" label-width="80px">
+
+            <el-row>
+              <el-col :span="5">
+            <el-form-item label="商品库存">
+              <el-input-number v-model="skuFormTemplate.stock" :min="1" :max="99999" style="width: 100px" ></el-input-number>
+            </el-form-item>
+              </el-col>
+
+         <el-col :span="5">
+            <el-form-item label="商品价格">
+              <el-input-number v-model="skuFormTemplate.price" :min="1" :max="99999" style="width: 100px"></el-input-number>
+            </el-form-item>
+         </el-col>
+
+         <el-col :span="5">
+            <el-form-item label="商品进价">
+              <el-input-number v-model="skuFormTemplate.purchasePrice":min="1" :max="99999" style="width: 100px"></el-input-number>
+            </el-form-item>
+         </el-col>
+
+            <el-form-item label="商品售价">
+              <el-input-number v-model="skuFormTemplate.sellingPrice":min="1" :max="99999" style="width: 100px"></el-input-number>
+            </el-form-item>
+
+            <el-form-item label="规格图片">
+              <ImageUpload v-model="skuFormTemplate.image" :limit="1"></ImageUpload>
+            </el-form-item>
+
+           <el-col :span="5">
+            <el-form-item label="编号">
+              <el-input-number v-model="skuFormTemplate.number":min="1" :max="99999" style="width: 100px"></el-input-number>
+            </el-form-item>
+           </el-col>
+
+           <el-col :span="5">
+            <el-form-item label="重量">
+              <el-input-number v-model="skuFormTemplate.weight":min="1" :max="99999" style="width: 100px"></el-input-number>
+            </el-form-item>
+           </el-col>
+
+           <el-col :span="5">
+            <el-form-item label="体积">
+              <el-input-number v-model="skuFormTemplate.volume":min="1" :max="99999" style="width: 100px"></el-input-number>
+            </el-form-item>
+           </el-col>
+
+           <el-col :span="5">
+            <el-button type="primary" @click="onSubmit">立即同步</el-button>
+            <el-button type="primary" @click="onClear">取消</el-button>
+           </el-col>
+            </el-row>>
+          </el-form>
+
+
+
           <template>
             <el-table
-              :data="tableColumnHeaderTemplate"
+              :data="tableBodyTemplate"
               style="width: 100%">
+<!--              <el-table-column label="商品轮播图" align="center" prop="carouselImages" >-->
+<!--                <template slot-scope="scope">-->
+<!--                  <img :src="scope.row.carouselImages" alt="加载失败" width="80px" height="80px"/>-->
+<!--                </template>-->
+<!--              </el-table-column>-->
+
               <el-table-column v-for="column in tableColumnHeaderTemplate"
                 :prop="column.prop"
                 :label="column.label">
+                <template slot-scope="scope">
+                  {{scope.row[column.prop]}}
+                  <el-input-number v-if="column.prop.indexOf('image') == -1 && column.prop.indexOf('xxx') == -1"
+                                   v-model="scope.row[column.prop]" :min="1" :max="9999999999" label="描述" style="width: 120px" ></el-input-number>
+                  <ImageUpload v-else-if="column.prop.indexOf('image') > -1 " v-model="scope.row[column.prop]" :limit="1" style="width: 120px "></ImageUpload>
+                </template>
               </el-table-column>
+
             </el-table>
           </template>
         </div>
 
+
         <div v-show="active==2">
           <el-form-item label="商品描述" prop="productDesc">
               <el-input v-model="form.productDesc" type="textarea" placeholder="请输入内容" />
             </el-form-item>
         </div>
+
+
       </el-form>
       <el-button style="margin-top: 12px;" @click="step" :disabled="active <1">上一步</el-button>
       <el-button style="margin-top: 12px;" @click="next" :disabled="active >= 2">下一步</el-button>
@@ -210,11 +306,32 @@ export default {
   data() {
     return {
       tableColumnHeaderTemplate:[],
+      tableBodyTemplate:[
+        // {'stock':'商品库存1',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存2',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存3',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存4',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存5',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存6',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存7',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存8',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+        // {'stock':'商品库存9',price: "1",purchasePrice:"1",sellingPrice:"1",image:"1",number:"1",weight:"1",volume:"1"},
+      ],
       active: 0,
       rule: [],
+      ruleAttrList:[],
       brandList:[],
       ruleList:[],
       tableData:[],
+      skuFormTemplate:{
+        'stock': '0',
+        'price': '0',
+        purchasePrice: '0',
+        sellingPrice: '0',
+        image: '',
+        number: '0',
+        weight: '0',
+        volume: '0'},
       // 遮罩层
       loading: true,
       // 选中数组
@@ -262,21 +379,64 @@ export default {
     this.initRuleListInfo();
   },
   methods: {
-    changeRuleInfoListByRuleId(object){
+    onSubmit(){
-      this.tableColumnHeaderTemplate = [];
+      this.settingsOrnClear(true)
-      let ruleInfo = null
+    },
-      this.ruleList.forEach(item => {
+
-        if(object == item.id){
+    onClear(){
-          ruleInfo = item;
+      this.settingsOrnClear();
-        }
+    },
-      })
+
-      if(null == ruleInfo){
+    settingsOrnClear(flag){
-         return;
+      for (let skuFormTemplateKey in this.skuFormTemplate) {
+        this.tableBodyTemplate.forEach(item=>{
+          for (let itemKey in item) {
+            if(skuFormTemplateKey==itemKey){
+              if(flag){
+                item[itemKey]=this.skuFormTemplate[skuFormTemplateKey]
+              }else{
+                item[itemKey]=''
+              }
+            }
+          }
+        });
       }
-      let ruleAttrJson=JSON.parse(ruleInfo.ruleAttr)
+    },
-      ruleAttrJson.forEach(ruleAttr => {
+
-        this.tableColumnHeaderTemplate.push({'prop':'xxx','label':ruleAttr.ruleType})
+    changeRuleInfoListByRuleId(object) {
-      })
+      this.tableColumnHeaderTemplate = [];
+      this.tableBodyTemplate = [];
+      let ruleInfo = this.ruleList.find(item => object == item.id);
+      if (!ruleInfo) {
+        return;
+      }
+
+      let ruleAttrJson;
+      try {
+        ruleAttrJson = JSON.parse(ruleInfo.ruleAttr);
+      } catch (error) {
+        console.error('Error parsing ruleAttr JSON:', error);
+        return;
+      }
+
+      ruleAttrJson.forEach((ruleAttr, index) => {
+        this.tableColumnHeaderTemplate.push({'prop': `xxx${index}`, 'label': ruleAttr.ruleType});
+      });
+
+      const cartesian = (ruleAttrJson, index, current) => {
+        if (index === ruleAttrJson.length) {
+          this.tableBodyTemplate.push({...current});
+          return;
+        }
+        for (let i = 0; i < ruleAttrJson[index].ruleAttrList.length; i++) {
+          const updatedCurrent = {...current}; // Create a copy of current object
+          updatedCurrent[`xxx${index}`] = ruleAttrJson[index].ruleAttrList[i];
+          cartesian(ruleAttrJson, index + 1, updatedCurrent);
+        }
+      };
+
+      cartesian(ruleAttrJson, 0, {});
+
       this.tableColumnHeaderTemplate.push(
         {prop:'stock',label:'商品库存'},
         {prop:'price',label:'商品价格'},

src/views/product/rule/index.vue

@@ -1,20 +1,12 @@
 <template>
   <div class="app-container">
-    <el-card>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-    <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"
+          size="small"
-        />
-      </el-form-item>
-      <el-form-item label="乐观锁" prop="revision">
-        <el-input
-          v-model="queryParams.revision"
-          placeholder="请输入乐观锁"
-          clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -69,19 +61,34 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-    </el-card>
 
-    <el-card>
+    <el-table v-loading="loading" :data="ruleInfoList" @selection-change="handleSelectionChange">
-      <i class="el-icon-tickets">商品规格数据列表</i>
-    </el-card>
-
-    <el-card>
-    <el-table v-loading="loading" :data="infoList" @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="ruleAttr" />
+      <el-table-column label="规格详情" align="center" prop="ruleAttr">
-      <el-table-column label="规格状态" align="center" prop="status" />
+        <template v-slot="scope">
+          <p v-html="scope.row.ruleAttr"></p>
+        </template>
+      </el-table-column>
+      <el-table-column label="规格状态" align="center" prop="status" >
+
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-text="上架"
+            inactive-text="下架"
+            inactive-value="0"
+            active-value="1"
+            @change="updateRuleStatus(scope.row)"
+          >
+          </el-switch>
+        </template>
+
+
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -118,7 +125,57 @@
         </el-form-item>
 
         <el-form-item label="规格详情" prop="ruleAttr">
-          <el-input v-model="form.ruleAttr" type="textarea" placeholder="请输入内容" />
+          <span v-for="(rule,index) in templateRuleInfo">
+             <el-tag
+               :key="rule"
+               closable
+               :disable-transitions="false"
+               @close="handleCloseRule(index)">
+                {{ rule.ruleType }}
+          </el-tag>
+            <br>
+
+            <span v-for="(ruleAttr,ruleAttrIndex) in rule.ruleAttrList">
+               <el-tag
+                 :key="ruleAttr"
+                 closable
+                 :disable-transitions="false"
+                 @close="handleCloseRuleAttr(index,ruleAttrIndex)">
+                {{ ruleAttr }}
+            </el-tag>
+            </span>
+
+          <el-button type="primary" icon="el-icon-plus" size="mini" style="margin-left: 5px"v-show="rule.addRuleAttrValButton" @click="rule.addRuleAttrValButton=false;rule.addRuleAttrValForm=true"></el-button>
+             <el-form :inline="true" :model="ruleInfoForm" v-show="rule.addRuleAttrValForm">
+            <el-form-item label="规格属性">
+              <el-input v-model="ruleInfoForm.attr"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="pushTemplateRuleAttrInfo(index)">创建</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </el-form-item>
+          </el-form>
+
+            <hr>
+          </span>
+
+          <el-button type="primary" icon="el-icon-edit" circle v-show="ruleInfoForm.addRuleAttrValButton" @click="ruleInfoForm.addRuleAttrValButton=false;ruleInfoForm.addRuleAttrValForm=true"></el-button>
+
+          <el-form :inline="true" :model="ruleInfoForm" v-show="ruleInfoForm.addRuleAttrValForm">
+            <el-form-item label="规格属性">
+              <el-input v-model="ruleInfoForm.ruleType" ></el-input>
+            </el-form-item>
+            <el-form-item label="规格属性详情">
+              <el-input v-model="ruleInfoForm.attr" ></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="pushTemplateRuleInfo">创建</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </el-form-item>
+          </el-form>
+
         </el-form-item>
 
       </el-form>
@@ -127,17 +184,15 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    </el-card>
   </div>
 </template>
 
 <script>
 import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/rule";
-import {delInfo} from "@/api/product/info";
+
-import {getAttributeGroup} from "@/api/product/attributeGroup";
 
 export default {
-  name: "Info",
+  name: "Rule",
   data() {
     return {
       // 遮罩层
@@ -153,7 +208,7 @@ export default {
       // 总条数
       total: 0,
       // 商品规格表格数据
-      infoList: [],
+      ruleInfoList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -163,29 +218,23 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: null,
-        ruleAttr: null,
-        status: null,
-        revision: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "规格名称不能为空", trigger: "blur" }
+          {required: true, message: "规格名称不能为空", trigger: "blur"}
-        ],
-        ruleAttr: [
-          { required: true, message: "规格详情不能为空", trigger: "blur" }
-        ],
-        status: [
-          { required: true, message: "规格状态不能为空", trigger: "change" }
-        ],
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
+      },
+      templateRuleInfo: [],
+
+      ruleInfoForm: {
+        "ruleType": "",
+        "attr": "",
+        "ruleAttrList": [],
+        "addRuleAttrValButton": true,
+        "addRuleAttrValForm": false
       }
     };
   },
@@ -193,11 +242,81 @@ export default {
     this.getList();
   },
   methods: {
+
+    pushTemplateRuleAttrInfo(index) {
+      let templateRuleInfoElement = this.templateRuleInfo[index];
+      let ruleAttrList = templateRuleInfoElement.ruleAttrList;
+      let attrInfo = this.ruleInfoForm.attr.trim();
+
+      let isExist = -1;
+      ruleAttrList.forEach((item, attrIndex) => {
+        if (item.indexOf(attrInfo) > -1) {
+          isExist = attrIndex
+        }
+      });
+      if (isExist != -1) {
+        this.$modal.msgWarning(`ruleAttrList中${ruleAttrList[isExist]}存在`)
+        return
+      }
+
+      ruleAttrList.push(attrInfo)
+      templateRuleInfoElement.addRuleAttrValButton = true
+      templateRuleInfoElement.addRuleAttrValForm = false
+      this.ruleInfoForm.attr = '';
+    },
+    pushTemplateRuleInfo() {
+      let items = this.ruleInfoForm;
+      let ruleType = items.ruleType;
+      if (null == ruleType || undefined == ruleType || '' == ruleType) {
+        return;
+      }
+      const attr = items.attr;
+      if (attr) {
+        items.ruleAttrList.push(attr)
+      }
+      this.templateRuleInfo.push(items)
+      this.ruleInfoForm = {
+        "ruleType": "",
+        "attr": "",
+        "ruleAttrList": [],
+        "addRuleAttrValButton": true,
+        "addRuleAttrValForm": false
+      }
+    },
+
+    handleCloseRuleAttr(index, ruleAttrIndex) {
+      this.templateRuleInfo[index].ruleAttrList.splice(ruleAttrIndex, 1);
+    },
+
+    handleCloseRule(index) {
+      console.log(index);
+      this.templateRuleInfo.splice(index, 1)
+    },
+    updateRuleStatus(params) {
+      const {id, status} = params
+      this.updateRuleInfo({id, status})
+    },
+
+
     /** 查询商品规格列表 */
     getList() {
       this.loading = true;
       listRule(this.queryParams).then(response => {
-        this.infoList = response.data.list;
+        let ruleInfoList = response.data.list;
+
+        ruleInfoList.forEach(item => {
+          let ruleAttrString = '';
+          let ruleAttrJsonString = item.ruleAttr;
+          let ruleInfoList = JSON.parse(ruleAttrJsonString);
+          ruleInfoList.forEach(ruleInfo => {
+            let ruleType = ruleInfo.ruleType;
+            ruleAttrString = ruleAttrString + ruleType + "<br>"
+            let ruleAttrListString = ruleInfo.ruleAttrList.join(",");
+            ruleAttrString = ruleAttrListString + "<br>";
+          });
+          item.ruleAttr = ruleAttrString;
+        });
+        this.ruleInfoList = ruleInfoList;
         this.total = response.data.total;
         this.loading = false;
       });
@@ -207,13 +326,12 @@ export default {
       this.open = false;
       this.reset();
     },
-    // 表单重置
     reset() {
       this.form = {
         id: null,
         name: null,
         ruleAttr: null,
-        status: null,
+        status: "0",
         revision: null,
         createBy: null,
         createTime: null,
@@ -222,49 +340,42 @@ export default {
       };
       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.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;
+        let form = response.data;
+        this.templateRuleInfo = JSON.parse(form.ruleAttr)
+        this.form = form;
         this.open = true;
         this.title = "修改商品规格";
       });
     },
-    /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            updateRule(this.form).then(response => {
+            this.updateRuleInfo(this.form)
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
           } else {
+            this.form.ruleAttr = JSON.stringify(this.templateRuleInfo)
             addRule(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -274,7 +385,14 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
+
+    updateRuleInfo(data) {
+      updateRule(data).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.open = false;
+        this.getList();
+      });
+    },
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal.confirm('是否确认删除商品规格编号为"' + ids + '"的数据项？').then(function () {
@@ -285,11 +403,10 @@ export default {
       }).catch(() => {
       });
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('product/rule/export', {
         ...this.queryParams
-      }, `info_${new Date().getTime()}.xlsx`)
+      }, `ruleInfo_${new Date().getTime()}.xlsx`)
     }
   }
 };

src/views/product/sku/index.vue

@@ -174,8 +174,9 @@
 
 <script>
 import { listSku, getSku, delSku, addSku, updateSku } from "@/api/product/sku";
-
+import ImageUpload from "@/components/ImageUpload"
 export default {
+  components:{ImageUpload},
   name: "Sku",
   data() {
     return {

src/views/product/type/index.vue

@@ -1,28 +1,12 @@
 <template>
   <div class="app-container">
-    <el-card>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-    <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"
+          size="small"
-        />
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input
-          v-model="queryParams.sort"
-          placeholder="请输入排序"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="商品数量" prop="productCount">
-        <el-input
-          v-model="queryParams.productCount"
-          placeholder="请输入商品数量"
-          clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -77,24 +61,51 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-    </el-card>
 
-    <el-card>
+    <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
-    <i class="el-icon-tickets">商品分类数据列表</i>
-    </el-card>
-
-    <el-card>
-    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="分类id" align="center" prop="catId" />
       <el-table-column label="分类名称" align="center" prop="name" />
-      <el-table-column label="父分类id" align="center" prop="parentCid" />
+      <el-table-column label="父分类id" align="center" prop="parentCid">
-      <el-table-column label="层级" align="center" prop="catLevel" />
+        <template slot-scope="scope">
-      <el-table-column label="是否显示[0-不显示，1显示]" align="center" prop="showStatus"/>
+          <span style="margin-left: 10px" v-if="scope.row.parentCid==0">一级</span>
+          <span style="margin-left: 10px" v-if="scope.row.parentCid==1">二级</span>
+          <span style="margin-left: 10px" v-if="scope.row.parentCid==2">三级</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="层级" align="center" prop="catLevel" >
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" v-if="scope.row.catLevel==1">一级</span>
+          <span style="margin-left: 10px" v-if="scope.row.catLevel==2">二级</span>
+          <span style="margin-left: 10px" v-if="scope.row.catLevel==3">三级</span>
+        </template>
+      </el-table-column>
+      <el-table-column  align="center" prop="showStatus" >
+
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.showStatus"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-text="显式"
+            inactive-text="不显示"
+            inactive-value="1"
+            active-value="0"
+            @change="updateShowStatus(scope.row)"
+          >
+          </el-switch>
+        </template>
+
+      </el-table-column>
       <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="图标地址" align="center" prop="icon" />
+      <el-table-column label="图标地址" align="center" prop="icon">
+        <template slot-scope="scope">
+          <img :src="scope.row.icon">
+        </template>
+      </el-table-column>
       <el-table-column label="计量单位" align="center" prop="productUnit" />
       <el-table-column label="商品数量" align="center" prop="productCount" />
+
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -111,6 +122,7 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['product:type:remove']"
           >删除</el-button>
+
         </template>
       </el-table-column>
     </el-table>
@@ -147,21 +159,22 @@
         <el-form-item label="商品数量" prop="productCount">
           <el-input v-model="form.productCount" 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>
-    </el-card>
   </div>
 </template>
 
 <script>
-import { listType, getType, delType, addType, updateType } from "@/api/product/type";
+import {listType, getType, delType, addType, updateType} from "@/api/product/type";
+
 
 export default {
-  name: "Type",
+  name: "Category",
   data() {
     return {
       // 遮罩层
@@ -177,7 +190,7 @@ export default {
       // 总条数
       total: 0,
       // 商品三级分类表格数据
-      typeList: [],
+      categoryList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -186,6 +199,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        name: null,
       },
       // 表单参数
       form: {},
@@ -198,11 +212,17 @@ export default {
     this.getList();
   },
   methods: {
+
+
+    updateShowStatus(params){
+      const {catId,showStatus}=params
+      this.updateInfoByCategoryId({catId,showStatus})
+    },
     /** 查询商品三级分类列表 */
     getList() {
       this.loading = true;
       listType(this.queryParams).then(response => {
-        this.typeList = response.data.list;
+        this.categoryList = response.data.list;
         this.total = response.data.total;
         this.loading = false;
       });
@@ -219,7 +239,7 @@ export default {
         name: null,
         parentCid: null,
         catLevel: null,
-        showStatus: null,
+        showStatus: 0,
         sort: null,
         icon: null,
         productUnit: null,
@@ -265,11 +285,7 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.catId != null) {
-            updateType(this.form.data).then(response => {
+            this.updateInfoByCategoryId(this.form)
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
           } else {
             addType(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
@@ -294,8 +310,16 @@ export default {
     handleExport() {
       this.download('product/type/export', {
         ...this.queryParams
-      }, `type_${new Date().getTime()}.xlsx`)
+      }, `category_${new Date().getTime()}.xlsx`)
-    }
+    },
+
+    updateInfoByCategoryId(data){
+      updateType(data).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.open = false;
+        this.getList();
+      });
+    },
   }
 };
 </script>