feature(管理后台): 商品列表

yudao-ui-admin/src/views/mall/product/spu/save.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-tabs v-model="activeName" class="tabs"  >
+    <el-tabs v-model="activeName" class="tabs">
       <!-- 基础设置 -->
       <el-tab-pane label="基础设置" name="base">
         <el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
@@ -11,20 +11,20 @@
             <el-input type="textarea" v-model="baseForm.sellPoint" placeholder="请输入商品卖点"/>
           </el-form-item>
           <el-form-item label="商品主图" prop="picUrls">
-            <ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10" class="mall-image" />
+            <ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10" class="mall-image"/>
           </el-form-item>
           <el-form-item label="商品视频" prop="videoUrl">
-            <VideoUpload v-model="baseForm.videoUrl" :value="baseForm.videoUrl" />
+            <VideoUpload v-model="baseForm.videoUrl" :value="baseForm.videoUrl"/>
           </el-form-item>
 
           <el-form-item label="商品品牌" prop="brandId">
             <el-select v-model="baseForm.brandId" placeholder="请选择商品品牌">
-              <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
           </el-form-item>
           <el-form-item label="商品分类" prop="categoryIds">
             <el-cascader v-model="baseForm.categoryIds" placeholder="商品分类" style="width: 100%"
-                         :options="categoryList" :props="propName" clearable />
+                         :options="categoryList" :props="propName" clearable/>
           </el-form-item>
           <el-form-item label="是否上架" prop="status">
             <el-radio-group v-model="baseForm.status">
@@ -46,11 +46,11 @@
           <div v-show="ratesForm.spec === 2">
             <div v-for="(specs, index) in dynamicSpec" :key="index" class="dynamic-spec">
               <!-- 删除按钮 -->
-              <el-button type="danger" icon="el-icon-delete" circle class="spec-delete" @click="removeSpec(index)" />
+              <el-button type="danger" icon="el-icon-delete" circle class="spec-delete" @click="removeSpec(index)"/>
               <div class="spec-header">
                 规格项：
                 <el-select v-model="specs.specId" filterable placeholder="请选择" @change="changeSpec">
-                  <el-option v-for="item in propertyPageList" :key="item.id" :label="item.name" :value="item.id" />
+                  <el-option v-for="item in propertyPageList" :key="item.id" :label="item.name" :value="item.id"/>
                 </el-select>
               </div>
               <div class="spec-values">
@@ -59,7 +59,8 @@
                 </template>
               </div>
             </div>
-            <el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []">添加规格项目</el-button>
+            <el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []">添加规格项目
+            </el-button>
           </div>
 
           <!-- 规格明细 -->
@@ -69,53 +70,59 @@
                 <el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v => v.specName !== undefined)"
                                  :label="item.specName">
                   <template slot-scope="scope">
-                    <el-input v-if="scope.row.spec" v-model="scope.row.spec[index]" disabled />
+                    <el-input v-if="scope.row.spec" v-model="scope.row.spec[index]" disabled/>
                   </template>
                 </el-table-column>
               </template>
               <el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90">
                 <template slot-scope="scope">
-                    <ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
+                  <ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
                                style="width: 100px; height: 50px"/>
                 </template>
               </el-table-column>
               <template v-if="this.activeSwitch">
-               <el-table-column label="sku名称" :render-header="addRedStar" key="91">
+                <el-table-column label="sku名称" :render-header="addRedStar" key="91">
                   <template slot-scope="scope">
-                    <el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
-                      <el-input v-model="scope.row.name" />
+                    <el-form-item :prop="'rates.'+ scope.$index + '.name'"
+                                  :rules="[{required: true, trigger: 'change'}]">
+                      <el-input v-model="scope.row.name"/>
                     </el-form-item>
                   </template>
                 </el-table-column>
               </template>
               <el-table-column label="市场价(元)" :render-header="addRedStar" key="92">
                 <template slot-scope="scope">
-                  <el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'" :rules="[{required: true, trigger: 'change'}]">
+                  <el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'"
+                                :rules="[{required: true, trigger: 'change'}]">
                     <el-input v-model="scope.row.marketPrice"
-                      oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
+                              oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
                   </el-form-item>
                 </template>
               </el-table-column>
               <el-table-column label="销售价(元)" :render-header="addRedStar" key="93">
                 <template slot-scope="scope">
-                 <el-form-item :prop="'rates.'+ scope.$index + '.price'" :rules="[{required: true, trigger: 'change'}]">
-                  <el-input v-model="scope.row.price" oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
+                  <el-form-item :prop="'rates.'+ scope.$index + '.price'"
+                                :rules="[{required: true, trigger: 'change'}]">
+                    <el-input v-model="scope.row.price"
+                              oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
                   </el-form-item>
                 </template>
               </el-table-column>
               <el-table-column label="成本价" :render-header="addRedStar" key="94">
                 <template slot-scope="scope">
-                <el-form-item :prop="'rates.'+ scope.$index + '.costPrice'" :rules="[{required: true, trigger: 'change'}]">
-                  <el-input
-                    v-model="scope.row.costPrice"
-                    oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
-                  ></el-input>
+                  <el-form-item :prop="'rates.'+ scope.$index + '.costPrice'"
+                                :rules="[{required: true, trigger: 'change'}]">
+                    <el-input
+                      v-model="scope.row.costPrice"
+                      oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
+                    ></el-input>
                   </el-form-item>
                 </template>
               </el-table-column>
               <el-table-column label="库存" :render-header="addRedStar" key="95">
                 <template slot-scope="scope">
-                  <el-form-item :prop="'rates.'+ scope.$index + '.stock'" :rules="[{required: true, trigger: 'change'}]">
+                  <el-form-item :prop="'rates.'+ scope.$index + '.stock'"
+                                :rules="[{required: true, trigger: 'change'}]">
                     <el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                   </el-form-item>
                 </template>
@@ -127,12 +134,12 @@
               </el-table-column>
               <el-table-column label="体积" key="97">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.volume" ></el-input>
+                  <el-input v-model="scope.row.volume"></el-input>
                 </template>
               </el-table-column>
               <el-table-column label="重量" key="98">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.weight" ></el-input>
+                  <el-input v-model="scope.row.weight"></el-input>
                 </template>
               </el-table-column>
               <el-table-column label="条码" key="99">
@@ -140,29 +147,34 @@
                   <el-input v-model="scope.row.barCode"></el-input>
                 </template>
               </el-table-column>
-               <template v-if="this.activeSwitch">
+              <template v-if="this.activeSwitch">
                 <el-table-column fixed="right" label="操作" width="50" key="100">
                   <template slot-scope="scope">
-                    <el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
-                    <el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">启用</el-button>
+                    <el-button @click="scope.row.status = 1" type="text" size="small"
+                               v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用
+                    </el-button>
+                    <el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">
+                      启用
+                    </el-button>
                   </template>
                 </el-table-column>
               </template>
             </el-table>
           </el-form-item>
-          <el-form-item label="虚拟销量" prop="virtualSalesCount" >
-            <el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
+          <el-form-item label="虚拟销量" prop="virtualSalesCount">
+            <el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量"
+                      oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
           </el-form-item>
         </el-form>
       </el-tab-pane>
 
       <!-- 商品详情 -->
       <el-tab-pane label="商品详情" name="third">
-      <el-form ref="third" :model="baseForm" :rules="rules">
-        <el-form-item prop="description">
-          <editor v-model="baseForm.description" :min-height="380"/>
-        </el-form-item>
-      </el-form>
+        <el-form ref="third" :model="baseForm" :rules="rules">
+          <el-form-item prop="description">
+            <editor v-model="baseForm.description" :min-height="380"/>
+          </el-form-item>
+        </el-form>
       </el-tab-pane>
 
       <!-- 销售设置 -->
@@ -171,8 +183,8 @@
           <el-form-item label="排序字段">
             <el-input v-model="baseForm.sort" placeholder="请输入排序字段" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
           </el-form-item>
-           <el-form-item label="是否展示库存" prop="showStock">
-             <el-radio-group v-model="baseForm.showStock">
+          <el-form-item label="是否展示库存" prop="showStock">
+            <el-radio-group v-model="baseForm.showStock">
               <el-radio :label="true">是</el-radio>
               <el-radio :label="false">否</el-radio>
             </el-radio-group>
@@ -193,7 +205,7 @@
 
 import {getBrandList} from "@/api/mall/product/brand";
 import {getProductCategoryList} from "@/api/mall/product/category";
-import {createSpu, updateSpu, getSpuDetail} from "@/api/mall/product/spu";
+import {createSpu, getSpuDetail, updateSpu} from "@/api/mall/product/spu";
 import {getPropertyListAndValue,} from "@/api/mall/product/property";
 import Editor from "@/components/Editor";
 import ImageUpload from "@/components/ImageUpload";
@@ -205,7 +217,7 @@ export default {
     ImageUpload,
     VideoUpload
   },
-  props:{
+  props: {
     obj: Object
   },
   data() {
@@ -256,7 +268,7 @@ export default {
 
       // 表单校验
       rules: {
-        name:[{required: true, message: "商品名称不能为空", trigger: "blur"},],
+        name: [{required: true, message: "商品名称不能为空", trigger: "blur"},],
         description: [{required: true, message: "描述不能为空", trigger: "blur"},],
         categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"},],
         status: [{required: true, message: "商品状态不能为空", trigger: "blur"}],
@@ -269,24 +281,24 @@ export default {
     this.getListBrand();
     this.getListCategory();
     this.getPropertyPageList();
-    if(this.obj.id != null){
+    if (this.obj.id != null) {
       this.updateType(this.obj.id)
     }
   },
   methods: {
-    removeSpec(index){
-        this.dynamicSpec.splice(index, 1);
-        this.changeRadio()
+    removeSpec(index) {
+      this.dynamicSpec.splice(index, 1);
+      this.changeRadio()
     },
     // 必选标识
-    addRedStar(h, { column }) {
+    addRedStar(h, {column}) {
       return [
-        h('span', { style: 'color: #F56C6C' }, '*'),
+        h('span', {style: 'color: #F56C6C'}, '*'),
         h('span', ' ' + column.label)
       ];
     },
     changeRadio() {
-      this.activeSwitch ? this.ratesForm.spec = 2:  this.ratesForm.spec = 1;
+      this.activeSwitch ? this.ratesForm.spec = 2 : this.ratesForm.spec = 1;
       this.$refs.ratesTable.doLayout();
       if (this.ratesForm.spec == 1) {
         this.ratesForm.rates = [{}]
@@ -334,7 +346,7 @@ export default {
         this.categoryList = this.handleTree(response.data, "id", "parentId");
       });
     },
-     /** 查询品牌列表 */
+    /** 查询品牌列表 */
     getListBrand() {
       // 执行查询
       getBrandList().then((response) => {
@@ -345,30 +357,30 @@ export default {
       this.$emit("closeDialog");
     },
     submit() {
-       this.$refs[this.activeName].validate((valid) => {
+      this.$refs[this.activeName].validate((valid) => {
         if (!valid) {
           return;
         }
-      let rates = this.ratesForm.rates;
+        let rates = this.ratesForm.rates;
 
-      // 价格元转分
-      rates.forEach(r=>{
-        r.marketPrice = r.marketPrice*100;
-        r.price = r.price*100;
-        r.costPrice = r.costPrice*100;
-      })
-
-      // 动态规格调整字段
-      if (this.activeSwitch) {
+        // 价格元转分
         rates.forEach(r => {
-          let properties = []
+          r.marketPrice = r.marketPrice * 100;
+          r.price = r.price * 100;
+          r.costPrice = r.costPrice * 100;
+        })
+
+        // 动态规格调整字段
+        if (this.activeSwitch) {
+          rates.forEach(r => {
+            let properties = []
             Array.of(r.spec).forEach(s => {
               let obj;
-               if (s instanceof Array) {
-                  obj = s;
-               }else{
-                  obj = Array.of(s);
-               }
+              if (s instanceof Array) {
+                obj = s;
+              } else {
+                obj = Array.of(s);
+              }
               obj.forEach((v, i) => {
                 let specValue = this.dynamicSpec[i].specValue.find(o => o.name == v);
                 let propertie = {};
@@ -377,35 +389,35 @@ export default {
                 properties.push(propertie);
               })
             })
-          r.properties = properties;
-        })
-      }else{
-        rates[0].name = this.baseForm.name;
-        rates[0].status = this.baseForm.status;
-      }
-      let form = this.baseForm
-      if(form.picUrls instanceof Array){
-        form.picUrls = form.picUrls.flatMap(m=>m.split(','))
-      }else if(form.picUrls.split(',') instanceof Array){
-        form.picUrls = form.picUrls.split(',').flatMap(m=>m.split(','))
-      }else{
-        form.picUrls = Array.of(form.picUrls)
-      }
-      form.skus = rates;
-      form.specType = this.ratesForm.spec;
-      form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
+            r.properties = properties;
+          })
+        } else {
+          rates[0].name = this.baseForm.name;
+          rates[0].status = this.baseForm.status;
+        }
+        let form = this.baseForm
+        if (form.picUrls instanceof Array) {
+          form.picUrls = form.picUrls.flatMap(m => m.split(','))
+        } else if (form.picUrls.split(',') instanceof Array) {
+          form.picUrls = form.picUrls.split(',').flatMap(m => m.split(','))
+        } else {
+          form.picUrls = Array.of(form.picUrls)
+        }
+        form.skus = rates;
+        form.specType = this.ratesForm.spec;
+        form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
 
-      if(form.id == null){
-        createSpu(form).then((response) => {
-          this.$modal.msgSuccess("新增成功");
-          this.$emit("closeDialog");
-        })
-      }else{
-        updateSpu(form).then((response) => {
-          this.$modal.msgSuccess("修改成功");
-          this.$emit("closeDialog");
-        })
-      }
+        if (form.id == null) {
+          createSpu(form).then((response) => {
+            this.$modal.msgSuccess("新增成功");
+            this.$emit("closeDialog");
+          })
+        } else {
+          updateSpu(form).then((response) => {
+            this.$modal.msgSuccess("修改成功");
+            this.$emit("closeDialog");
+          })
+        }
       });
 
     },
@@ -425,46 +437,46 @@ export default {
       spec.specValue = obj.values;
       this.buildRatesFormRates();
     },
-    updateType(id){
-      getSpuDetail(id).then((response) =>{
-            let data = response.data;
-            this.baseForm.id=data.id;
-            this.baseForm.name=data.name;
-            this.baseForm.sellPoint=data.sellPoint;
-            this.baseForm.categoryIds=data.categoryIds;
-            this.baseForm.videoUrl = data.videoUrl;
-            this.baseForm.sort=data.sort;
-            this.baseForm.description=data.description;
-            this.baseForm.picUrls=data.picUrls;
-            this.baseForm.status=data.status;
-            this.baseForm.virtualSalesCount=data.virtualSalesCount;
-            this.baseForm.showStock=data.showStock;
-            this.baseForm.brandId=data.brandId;
-            this.ratesForm.spec=data.specType;
-            data.skus.forEach(r=>{
-              r.marketPrice = this.divide(r.marketPrice, 100)
-              r.price = this.divide(r.price, 100)
-              r.costPrice = this.divide(r.costPrice, 100)
-            })
-            if(this.ratesForm.spec == 2){
-              this.activeSwitch = true;
-              data.productPropertyViews.forEach(p=>{
-                let obj = {};
-                obj.specId = p.propertyId;
-                obj.specName = p.name;
-                obj.specValue = p.propertyValues;
-                this.dynamicSpec.push(obj);
-              })
-              data.skus.forEach(s=>{
-                s.spec = [];
-                s.properties.forEach(sp=>{
-                  let spec = data.productPropertyViews.find(o=>o.propertyId == sp.propertyId).propertyValues.find(v=>v.id == sp.valueId).name;
-                   s.spec.push(spec)
-                })
-              })
-            }
-            this.ratesForm.rates=data.skus
+    updateType(id) {
+      getSpuDetail(id).then((response) => {
+        let data = response.data;
+        this.baseForm.id = data.id;
+        this.baseForm.name = data.name;
+        this.baseForm.sellPoint = data.sellPoint;
+        this.baseForm.categoryIds = data.categoryIds;
+        this.baseForm.videoUrl = data.videoUrl;
+        this.baseForm.sort = data.sort;
+        this.baseForm.description = data.description;
+        this.baseForm.picUrls = data.picUrls;
+        this.baseForm.status = data.status;
+        this.baseForm.virtualSalesCount = data.virtualSalesCount;
+        this.baseForm.showStock = data.showStock;
+        this.baseForm.brandId = data.brandId;
+        this.ratesForm.spec = data.specType;
+        data.skus.forEach(r => {
+          r.marketPrice = this.divide(r.marketPrice, 100)
+          r.price = this.divide(r.price, 100)
+          r.costPrice = this.divide(r.costPrice, 100)
         })
+        if (this.ratesForm.spec == 2) {
+          this.activeSwitch = true;
+          data.productPropertyViews.forEach(p => {
+            let obj = {};
+            obj.specId = p.propertyId;
+            obj.specName = p.name;
+            obj.specValue = p.propertyValues;
+            this.dynamicSpec.push(obj);
+          })
+          data.skus.forEach(s => {
+            s.spec = [];
+            s.properties.forEach(sp => {
+              let spec = data.productPropertyViews.find(o => o.propertyId == sp.propertyId).propertyValues.find(v => v.id == sp.valueId).name;
+              s.spec.push(spec)
+            })
+          })
+        }
+        this.ratesForm.rates = data.skus
+      })
     },
 
   },
@@ -557,13 +569,14 @@ export default {
   }
 }
 
-.mall-image{
-  .el-upload--picture-card{
+.mall-image {
+  .el-upload--picture-card {
     width: 80px;
     height: 80px;
     line-height: 90px;
   }
-  .el-upload-list__item{
+
+  .el-upload-list__item {
     width: 80px;
     height: 80px;
   }