From bedd5ec17ff846f2b24ae346dbdc38a83e0909cf Mon Sep 17 00:00:00 2001
From: csy <435732439@qq.com>
Date: Fri, 8 Mar 2024 20:10:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E4=BF=A1=E6=81=AF=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/info/index.vue | 527 ++++++++++++++++++++++++++-----
 1 file changed, 452 insertions(+), 75 deletions(-)

diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
index 1bc5c86..7e8cd87 100644
--- a/src/views/product/info/index.vue
+++ b/src/views/product/info/index.vue
@@ -9,22 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="商品价格" prop="price">
-        <el-input
-          v-model="queryParams.price"
-          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="status">
         <el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable>
           <el-option
@@ -35,14 +19,6 @@
           />
         </el-select>
       </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 label="规格" prop="ruleId">
         <el-input
           v-model="queryParams.ruleId"
@@ -51,6 +27,14 @@
           @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>
@@ -107,24 +91,27 @@
       <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="mianType" />
-      <el-table-column label="父类型" align="center" prop="parentType" />
-      <el-table-column label="商品类型" align="center" prop="type" />
-      <el-table-column label="商品价格" align="center" prop="price" />
-      <el-table-column label="商品数量" align="center" prop="num" />
-      <el-table-column label="商品介绍" align="center" prop="introduction" />
+      <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="brandId" />
       <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">
@@ -155,43 +142,223 @@
     />
 
     <!-- 添加或修改商品信息对话框 -->
-    <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-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">
-        <el-form-item label="商品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入商品名称" />
-        </el-form-item>
-        <el-form-item label="商品图片" prop="image">
-          <image-upload v-model="form.image"/>
-        </el-form-item>
-        <el-form-item label="商品价格" prop="price">
-          <el-input v-model="form.price" placeholder="请输入商品价格" />
-        </el-form-item>
-        <el-form-item label="商品数量" prop="num">
-          <el-input v-model="form.num" placeholder="请输入商品数量" />
-        </el-form-item>
-        <el-form-item label="商品介绍">
-          <editor v-model="form.introduction" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="商品状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_yes_no"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="品牌" prop="brandId">
-          <el-input v-model="form.brandId" placeholder="请输入品牌" />
-        </el-form-item>
-        <el-form-item label="规格" prop="ruleId">
-          <el-input v-model="form.ruleId" placeholder="请输入规格" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+        <div v-show="stepNumber === 0">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="商品名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入商品名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="商品状态" prop="status">
+                <el-radio-group v-model="form.status">
+                  <el-radio
+                    v-for="dict in dict.type.sys_yes_no"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{dict.label}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="品牌" prop="brandId">
+                <el-select
+                  v-model="form.brandId"
+                  filterable
+                  remote
+                  reserve-keyword
+                  placeholder="请输入关键词"
+                  :remote-method="remoteSearchBrandList"
+                  :loading="loading">
+                  <el-option
+                    v-for="brand in brandList"
+                    :key="brand.id"
+                    :label="brand.nam"
+                    :value="brand.id">
+                    <el-row>
+                      <image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
+                      <div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
+                    </el-row>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="备注" prop="remark">
+                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item label="商品图片" prop="image">
+              <image-upload v-model="form.image"/>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="商品轮播图" prop="carouselImages">
+              <image-upload v-model="form.carouselImages"/>
+            </el-form-item>
+          </el-row>
+        </div>
+        <div v-show="stepNumber === 1">
+          <el-form-item label="品类" prop="ruleId">
+            <el-cascader
+              style="width: 100%"
+              v-model="categoryOptionValue"
+              clearable
+              :props="{'value': 'id', 'label': 'name'}"
+              :options="categoryOptions"></el-cascader>
+          </el-form-item>
+          <el-empty v-show="categoryOptionValue.length === 0" description="请选择品类，在进行操作"></el-empty>
+          <el-tabs v-show="categoryOptionValue.length > 0" v-model="activeName" type="border-card">
+            <el-tab-pane label="商品属性组" name="attributeGroup">
+              <el-row style="overflow-x: auto; height: 300px;">
+                <el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
+                  <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                      <span>属性组【{{templateAttributeGroup.groupName}}】</span>
+                    </div>
+                    <div style="height: 200px; width: 100%;">
+                      <el-form ref="form" label-width="80px">
+                        <el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
+                          <el-input v-model="attribute.value"></el-input>
+                        </el-form-item>
+                      </el-form>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="商品属性" name="attribute">
+              <el-row style="overflow-x: auto; height: 300px;">
+                <el-form ref="form" :model="form" label-width="80px">
+                  <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
+                    <el-form-item :label="templateAttribute.name" >
+                      <el-input v-model="templateAttribute.value"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-form>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="自有属性" name="third">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>添加商品属性</span>
+                </div>
+                <el-row>
+                  <el-button v-show="!customAttributeFormStatus" @click="customAttributeFormStatus = true">添加自有属性</el-button>
+                  <el-form v-show="customAttributeFormStatus" :inline="true" :model="customAttributeForm" class="demo-form-inline">
+                    <el-form-item label="属性编码">
+                      <el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
+                    </el-form-item>
+                    <el-form-item label="属性名称">
+                      <el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="属性值">
+                      <el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" @click="saveCustomAttribute">确定</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-row>
+              </el-card>
+
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>选择属性</span>
+                </div>
+                <el-row style="height: 80px; overflow-y: auto">
+                  <el-checkbox-group v-model="attributeIdCheckedList" @change="attributeCheckedFun">
+                    <el-col :span="4" v-for="attribute in categoryCommonElement.attributeList" style="margin: 5px 0">
+                      <el-checkbox :label="attribute.id" :value="attribute.id" :key="attribute.id" border>{{attribute.name}}</el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+              </el-card>
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>属性值填写</span>
+                </div>
+                <el-row style="overflow-x: auto; height: 300px;">
+                  <el-form ref="form" :model="form" label-width="80px">
+                    <el-col :span="6" v-for="attribute in attributeCheckedList">
+                      <el-form-item :label="attribute.name">
+                        <el-input v-model="attribute.value"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-form>
+                </el-row>
+              </el-card>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-show="stepNumber === 2">
+          <el-form-item label="规格" prop="ruleId">
+            <el-select v-model="form.ruleId" placeholder="请选择" 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-item>
+            <el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
+              <el-form-item label="图片">
+                <image-upload
+                  :limit="1"
+                  :is-show-tip="false"
+                  v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
+              </el-form-item>
+              <el-form-item label="价格">
+                <el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
+              </el-form-item>
+              <el-form-item label="库存">
+                <el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="oneSetting">一键设置</el-button>
+              </el-form-item>
+            </el-form>
+            <el-table
+              :data="skuList"
+              border
+              style="width: 100%">
+              <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
+                <template slot-scope="scope">
+                  <span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
+                  <el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
+                  <image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
+                  :limit="1"
+                  :is-show-tip="false">
+                  </image-upload>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </div>
+        <div v-show="stepNumber === 3">
+          <el-form-item label="商品描述">
+            <editor v-model="form.introduction" :min-height="192"/>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
+        <el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
+        <el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -201,6 +368,10 @@
 
 <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",
@@ -230,16 +401,15 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: null,
-        image: null,
+        introduction: null,
         mianType: null,
         parentType: null,
         type: null,
-        price: null,
-        num: null,
-        introduction: null,
+        image: null,
+        carouselImages: null,
         status: null,
-        brandId: null,
         ruleId: null,
+        brandId: null,
       },
       // 表单参数
       form: {},
@@ -251,13 +421,211 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
+      },
+      stepNumber: 1,
+      brandList: [],
+      categoryOptions: [],
+      categoryOptionValue: [],
+      ruleList: [],
+      activeName: "attributeGroup",
+      customAttributeForm: {
+
+      },
+      customAttributeFormStatus: false,
+      attributeIdCheckedList: [],
+      attributeCheckedList: [],
+      categoryCommonElement: {
+        templateAttributeGroupList: [],
+        templateAttributeList: [],
+        attributeList: []
+      },
+      templateTitleList:[
+        {
+          "label":"规格照片",
+          "prop":"image"
+        },
+        {
+          "label":"商品库存",
+          "prop":"stock"
+        },
+        {
+          "label":"商品价格",
+          "prop":"price"
+        }
+      ],
+      titleList:[],
+      skuList:[],
+      oneSettingForm:{
+        "image":null,
+        "stock":null,
+        "price":null
       }
     };
   },
+  watch: {
+    categoryOptionValue: {
+      handler(value){
+        if (value !== null && value !== undefined && value.length > 0){
+          this.form.mianType = value[0];
+          this.form.parentType = value[1];
+          this.form.type = value[2];
+        }else {
+          this.form.mianType = null;
+          this.form.parentType = null;
+          this.form.type = null;
+        }
+      }
+    },
+    "form.type": {
+      handler(value) {
+        console.log(value)
+        if (value != null){
+          getTemplateAttribute(value).then(response => {
+            const {data} = response;
+            const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
+            this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
+            this.categoryCommonElement.templateAttributeList = templateAttributeList;
+            this.categoryCommonElement.attributeList = attributeList;
+          })
+        }
+
+      }
+    }
+  },
   created() {
     this.getList();
   },
   methods: {
+    oneSetting(){
+      this.skuList.forEach(skuInfo => {
+        skuInfo.image=this.oneSettingForm.image;
+        skuInfo.stock=this.oneSettingForm.stock;
+        skuInfo.price=this.oneSettingForm.price;
+      })
+    },
+    changeRule(ruleId){
+      this.titleList=[]
+      let ruleInfo=this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
+      const {ruleAttrList}=ruleInfo;
+      let skuTotal=1;
+      for (let ruleAttrListKey in ruleAttrList) {
+        let ruleAttrInfo=ruleAttrList[ruleAttrListKey];
+        this.titleList.push({
+          "label":ruleAttrInfo.name,
+          "prop":"prop"+ruleAttrListKey
+        })
+        skuTotal=skuTotal*ruleAttrInfo.valueList.length;
+      }
+      this.titleList.push(...this.templateTitleList);
+      console.log(this.titleList);
+      this.skuList=[];
+      for(let i=0;i<skuTotal;i++){
+        this.skuList.push(
+          {
+            "image":null,
+            "price":85.62,
+            "stock":236
+          }
+        );
+      }
+      //currentIndex 当前下标
+      for(let currentIndex in ruleAttrList){
+        let ruleAttrInfo=ruleAttrList[currentIndex];
+        //连续出现次数 循环出现次数
+        let continuousSize=1,forSize=1;
+        for(let continuousIndex=parseInt(currentIndex)+1;continuousIndex<ruleAttrList.length;continuousIndex++){
+          continuousSize=continuousSize * ruleAttrList[continuousIndex].valueList.length;
+        }
+        for(let forIndex=parseInt(currentIndex)-1;forIndex >= 0;forIndex--){
+          forSize=forSize*ruleAttrList[forIndex].valueList.length
+        }
+        console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize} 循环出现次数：${forSize}`)
+        let counter=0;
+        for(let forIndex=0;forIndex<forSize;forIndex++){
+          const {valueList} =ruleAttrInfo;
+          valueList.forEach(value => {
+            for(let continuousIndex=0;continuousIndex<continuousSize;continuousIndex++){
+              this.skuList[counter++]["prop"+currentIndex]=value;
+            }
+          })
+        }
+      }
+
+
+
+    },
+
+    saveCustomAttribute(){
+      addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
+        if (response.code === 200){
+          // 添加逻辑
+          let attributeId = response.data,
+            code = this.customAttributeForm.code,
+            name = this.customAttributeForm.name,
+            value = this.customAttributeForm.value;
+          this.categoryCommonElement.attributeList.push({
+            "id":attributeId,
+            "name":name,
+            "code":code
+          });
+          this.attributeIdCheckedList.push(attributeId);
+          this.attributeCheckedList.push(
+            {
+              "id":attributeId,
+              "name":name,
+              "value":value
+            }
+          );
+          this.customAttributeForm={}
+          this.customAttributeFormStatus=false;
+        }
+      })
+    },
+    attributeCheckedFun() {
+      // attributeIdCheckedList -> attributeCheckedList 不在
+      // 1 -> ID 1 : attributeCheckedList[] -> 1
+      // 2 -> ID 3 : attributeCheckedList[1] -> 3
+      let attributeId =this.attributeIdCheckedList
+        .find(attributeId =>
+          this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1
+        )
+      if (attributeId !== undefined){
+        let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
+        this.attributeCheckedList.push(attributeInfo);
+      }else {
+        // attributeIdCheckedList [3] : attributeCheckedList [] -> [3]
+        // attributeIdCheckedList [3,5] : attributeCheckedList [3] -> [3,5]
+        // attributeIdCheckedList [3,5,9] : attributeCheckedList [3,5] -> [3,5,9]
+        // attributeIdCheckedList [3,9] : attributeCheckedList [3,5,9] -> [3,9]
+        // attributeCheckedList 集合  不在 attributeIdCheckedList 集合的元素，然后删除
+        let attributeChecked = this.attributeCheckedList.find(attributeChecked => this.attributeIdCheckedList.indexOf(attributeChecked.id) === -1);
+        this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked), 1);
+      }
+
+    },
+    initRuleList(){
+      listRule({"params[isPage]": false}).then(response => {
+        this.ruleList = response.data;
+      });
+    },
+    initCategoryTree(){
+      listCategory().then(response => {
+        this.categoryOptions = [];
+        this.categoryOptions = this.handleTree(response.data, "id", "parentId");
+        console.log(this.categoryOptions)
+      });
+    },
+    remoteSearchBrandList(queryValue){
+      listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
+        this.brandList = response.data;
+      });
+    },
+    last() {
+      this.stepNumber--
+    },
+    next() {
+      this.stepNumber++
+    },
     /** 查询商品信息列表 */
     getList() {
       this.loading = true;
@@ -277,16 +645,15 @@ export default {
       this.form = {
         id: null,
         name: null,
-        image: null,
+        introduction: null,
         mianType: null,
         parentType: null,
         type: null,
-        price: null,
-        num: null,
-        introduction: null,
+        image: null,
+        carouselImages: null,
         status: null,
-        brandId: null,
         ruleId: null,
+        brandId: null,
         remark: null,
         createBy: null,
         createTime: null,
@@ -294,6 +661,8 @@ export default {
         updateTime: null
       };
       this.resetForm("form");
+      this.initCategoryTree();
+      this.initRuleList();
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -366,3 +735,11 @@ export default {
   }
 };
 </script>
+<style>
+.el-select-dropdown__item{
+  height: 45px;
+}
+.box-card {
+  margin: 10px;
+}
+</style>