|
|
@@ -1,122 +1,154 @@
|
|
|
<template>
|
|
|
<div class="dialogContent">
|
|
|
- <div>
|
|
|
- <el-form label-width="110px" label-position="right" ref="formInlineRef" :rules="rules" :model="formInline"
|
|
|
- size="small">
|
|
|
- <!-- 基础信息 -->
|
|
|
- <div class="titleInfo">基础信息</div>
|
|
|
- <div style="padding:0 20px;">
|
|
|
- <div style="display: flex;">
|
|
|
- <el-form-item label="商品分类" prop="categoryId">
|
|
|
- <DictSelect v-model="formInline.categoryId" @change="changeShopType" :dictOptions="shopType"
|
|
|
- placeholder="请选择" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品编号">
|
|
|
- <el-input v-model="formInline.productNo" :disabled="true" placeholder="请输入商品编号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品名称" prop="name">
|
|
|
- <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <el-form-item label="商品主图" prop="productMainImage">
|
|
|
- <ImageUpload v-model="formInline.productMainImage" :limit="1" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品图" prop="productImage">
|
|
|
- <div style="display: flex;">
|
|
|
- <ImageUpload v-model="formInline.productImage" :limit="6" tipText="建议上传商品图，最多6张" />
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
|
|
|
- </div>
|
|
|
- <!-- 描述信息 -->
|
|
|
- <div class="titleInfo">描述信息</div>
|
|
|
- <div style="padding:0 20px;">
|
|
|
- <el-form-item label="商品描述" prop="summary">
|
|
|
- <el-input v-model="formInline.summary" placeholder="请输入商品描述"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品详情描述" prop="detail">
|
|
|
- <Tinymce :height="'280px'" :width="'100%'" v-model="formInline.detail"></Tinymce>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <!-- 售卖信息 -->
|
|
|
- <div class="titleInfo">售卖信息</div>
|
|
|
- <div style="padding:0 20px;">
|
|
|
- <el-form-item label="规格">
|
|
|
- <el-button type="primary" size="small" plain @click="dialogVisibleSpec = true"
|
|
|
- style="margin-bottom: 15px;">编辑</el-button>
|
|
|
- <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef1" :tableData="this.formInline.specList"
|
|
|
- :columnData="columnData1">
|
|
|
- </tableCompontent>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="规格明细">
|
|
|
- <DictSelect v-model="formInline.paymentType" :dictOptions="selectPaymentMethod" placeholder="请选择"
|
|
|
- style="margin-bottom: 15px;" />
|
|
|
- <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef3" :tableData="formInline.skuList"
|
|
|
- :columnData="columnData3">
|
|
|
- <template v-slot:img="row">
|
|
|
- <div style="display: flex;justify-content: center;">
|
|
|
- <ImageUpload :isShowTip="false" v-model="row.image" :limit="1" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-slot:pointsOrprice="row">
|
|
|
- <div v-if="formInline.paymentType == 1 || formInline.paymentType == 2">
|
|
|
- <el-input-number v-model="row.pricePoint" controls-position="right" :min="1"></el-input-number>
|
|
|
- <span>{{ formInline.paymentType == 1 ? '积分' : '元' }}</span>
|
|
|
+ <el-dialog center :title="title" width="80%" :append-to-body="true" :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <div style="overflow-y: auto;height:80vh">
|
|
|
+ <div>
|
|
|
+ <el-form label-width="110px" label-position="right" ref="formInlineRef" :rules="rules" :model="formInline"
|
|
|
+ size="small">
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <div class="titleInfo">基础信息</div>
|
|
|
+ <div style="padding:0 20px;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="商品分类" prop="categoryId">
|
|
|
+ <DictSelect v-model="formInline.categoryId" @change="changeShopType" :dictOptions="shopType"
|
|
|
+ placeholder="请选择" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品编号">
|
|
|
+ <el-input v-model="formInline.productNo" :disabled="true" placeholder="请输入商品编号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品名称" prop="name">
|
|
|
+ <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="商品主图" prop="productMainImage">
|
|
|
+
|
|
|
+ <ImageUpload v-model="formInline.productMainImage" :limit="1" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品图" prop="productImageArr">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <ImageUpload v-model="formInline.productImageArr" :limit="6" @input="onUpload($event)"
|
|
|
+ tipText="建议上传商品图，最多6张" />
|
|
|
</div>
|
|
|
- <div v-if="formInline.paymentType == 3">
|
|
|
- <el-input-number v-model="row.pricePoint" controls-position="right" :min="1"></el-input-number>
|
|
|
- <span>元 +</span>
|
|
|
- <el-input-number v-model="row.pricePoint" controls-position="right" :min="1"></el-input-number>
|
|
|
- <span>积分</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </tableCompontent>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <!-- 服务信息 -->
|
|
|
- <div class="titleInfo">服务信息</div>
|
|
|
- <div style="display: flex;padding:0 20px;">
|
|
|
- <el-form-item label="基础运费" prop="freight">
|
|
|
- <el-input-number v-model="formInline.freight" placeholder="请输入基础运费" controls-position="right"
|
|
|
- :min="0"></el-input-number>
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="承诺发货时间" prop="deliveryTime">
|
|
|
- <DictSelect v-model="formInline.deliveryTime" :dictOptions="seedTime" placeholder="请选择" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上架时间" prop="dateRange">
|
|
|
- <el-date-picker v-model="formInline.dateRange" value-format="yyyy-MM-dd" type="daterange"
|
|
|
- range-separator="-" style="width: 220px" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 描述信息 -->
|
|
|
+ <div class="titleInfo">描述信息</div>
|
|
|
+ <div style="padding:0 20px;">
|
|
|
+ <el-form-item label="商品描述" prop="summary">
|
|
|
+ <el-input v-model="formInline.summary" placeholder="请输入商品描述"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品详情描述" prop="detail">
|
|
|
+ <Tinymce :height="'280px'" :width="'100%'" v-model="formInline.detail"></Tinymce>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!-- 售卖信息 -->
|
|
|
+ <div class="titleInfo">售卖信息</div>
|
|
|
+ <div style="padding:0 20px;">
|
|
|
+ <el-form-item label="规格">
|
|
|
+ <el-button type="primary" size="small" plain @click="dialogVisibleSpec = true"
|
|
|
+ style="margin-bottom: 15px;">编辑</el-button>
|
|
|
+ <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef1"
|
|
|
+ :tableData="this.formInline.specList" :columnData="columnData1">
|
|
|
+ </tableCompontent>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="规格明细">
|
|
|
+ <DictSelect v-model="formInline.paymentType" :dictOptions="selectPaymentMethod" placeholder="请选择"
|
|
|
+ style="margin-bottom: 15px;" />
|
|
|
+ <el-form :model="tableForm" ref="tableFormRef" inline class="tableFormClass">
|
|
|
+ <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef3" :tableData="tableForm.skuList"
|
|
|
+ :columnData="columnData3">
|
|
|
+ <template v-slot:image="scope">
|
|
|
+ <el-form-item :prop="`skuList[${scope.$index}].image`"
|
|
|
+ :rules="{ required: true, message: '请上传图片', trigger: 'blur' }">
|
|
|
+ <ImageUpload :isShowTip="false" v-model="scope.row.image" :limit="1" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-slot:pricePoint="scope">
|
|
|
+ <el-form-item :prop="`skuList[${scope.$index}].pricePoint`"
|
|
|
+ :rules="{ required: true, message: '请输入', trigger: 'blur' }">
|
|
|
+ <div v-if="formInline.paymentType == 1 || formInline.paymentType == 2">
|
|
|
+ <el-input-number v-model="scope.row.pricePoint" controls-position="right"
|
|
|
+ :min="0"></el-input-number>
|
|
|
+ <span>{{ formInline.paymentType == 1 ? '积分' : '元' }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="formInline.paymentType == 3">
|
|
|
+ <el-input-number v-model="scope.row.pricePoint" controls-position="right"
|
|
|
+ :min="0"></el-input-number>
|
|
|
+ <span>元 +</span>
|
|
|
+ <el-input-number v-model="scope.row.pricePoint" controls-position="right"
|
|
|
+ :min="0"></el-input-number>
|
|
|
+ <span>积分</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </tableCompontent>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!-- 服务信息 -->
|
|
|
+ <div class="titleInfo">服务信息</div>
|
|
|
+ <div style="display: flex;padding:0 20px;">
|
|
|
+ <el-form-item label="基础运费" prop="freight">
|
|
|
+ <el-input-number v-model="formInline.freight" placeholder="请输入基础运费" controls-position="right"
|
|
|
+ :min="0"></el-input-number>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="承诺发货时间" prop="deliveryTime">
|
|
|
+ <DictSelect v-model="formInline.deliveryTime" :dictOptions="seedTime" placeholder="请选择" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上架时间" prop="dateRange">
|
|
|
+ <el-date-picker v-model="formInline.dateRange" value-format="yyyy-MM-dd" type="daterange"
|
|
|
+ range-separator="-" style="width: 220px" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item style="padding:0 20px;" label="服务承诺" prop="servicePromise">
|
|
|
+ <el-checkbox-group v-model="formInline.servicePromise" @change="handleCheckedChange">
|
|
|
+ <el-checkbox v-for="(item, index) in servicePromiseArr" :label="item.cdescribe" :key="index">{{
|
|
|
+ item.cdescribe
|
|
|
+ }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- <el-form-item style="padding:0 20px;" label="服务承诺" prop="servicePromise">
|
|
|
- <el-checkbox-group v-model="formInline.servicePromise" @change="handleCheckedChange">
|
|
|
- <el-checkbox v-for="(item, index) in servicePromiseArr" :label="item.cdescribe" :key="index">{{
|
|
|
- item.cdescribe
|
|
|
- }}
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <!-- 规格编辑 -->
|
|
|
- <el-dialog center title="规格设置" width="80%" :append-to-body="true" :destroy-on-close="true"
|
|
|
- :visible.sync="dialogVisibleSpec" append-to-body :close-on-click-modal="false">
|
|
|
- <div>
|
|
|
- <div style="display: flex;width: 100%;">
|
|
|
- <div style="width: 99.9%;">
|
|
|
- <tableCompontent :maxHeight="'600px'" @delColumn="delColumn" @delRow="delRow" :border="true" ref="tableRef3"
|
|
|
- :tableData="list2" :columnData="columnData2">
|
|
|
- </tableCompontent>
|
|
|
+ <!-- 规格编辑 -->
|
|
|
+ <el-dialog center title="规格设置" width="80%" :append-to-body="true" :destroy-on-close="true"
|
|
|
+ :visible.sync="dialogVisibleSpec" append-to-body :close-on-click-modal="false">
|
|
|
+ <div>
|
|
|
+ <div style="display: flex;width: 100%;">
|
|
|
+ <div style="width: 99.9%;">
|
|
|
+ <tableCompontent :maxHeight="'600px'" @delColumn="delColumn" @delRow="delRow" :border="true"
|
|
|
+ ref="tableRef3" :tableData="list2" :columnData="columnData2">
|
|
|
+ </tableCompontent>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <i @click="addColumn" style="font-size: 25px;" class="el-icon-circle-plus-outline"></i>
|
|
|
+ </div>
|
|
|
+ <i @click="addRow" style="font-size: 25px;" class="el-icon-circle-plus-outline"></i>
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div style="display: flex;justify-content: center;margin-top: 25px;">
|
|
|
+ <el-button @click="dialogVisibleSpec = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="specSetSave">保存</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <i @click="addColumn" style="font-size: 25px;" class="el-icon-circle-plus-outline"></i>
|
|
|
- </div>
|
|
|
- <i @click="addRow" style="font-size: 25px;" class="el-icon-circle-plus-outline"></i>
|
|
|
- <!-- 操作按钮 -->
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
<div style="display: flex;justify-content: center;margin-top: 25px;">
|
|
|
- <el-button @click="dialogVisibleSpec = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="specSetSave">保存</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addOrEditOrDetailSave">保存</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -128,7 +160,8 @@
|
|
|
|
|
|
import tableCompontent from "@/components/tableCompontent/index.vue";
|
|
|
import Tinymce from "@/components/tinymce/index.vue";
|
|
|
-import { productSpecSetup, productGenerateProductNo, productSpecCombinations } from "@/api/points/pointsMall_api";
|
|
|
+import { productSpecSetup, productGenerateProductNo, productSpecCombinations, productUpdate } from "@/api/points/pointsMall_api";
|
|
|
+import { setTimeout } from "core-js";
|
|
|
export default {
|
|
|
components: {
|
|
|
Tinymce, tableCompontent
|
|
|
@@ -138,31 +171,41 @@ export default {
|
|
|
type: Array,
|
|
|
default: [],
|
|
|
},
|
|
|
- params:{
|
|
|
- type:Object,
|
|
|
- default: {}
|
|
|
- }
|
|
|
- // dialogVisible: {
|
|
|
- // type: Boolean,
|
|
|
- // default: false,
|
|
|
+ // params: {
|
|
|
+ // type: Object,
|
|
|
+ // default: {}
|
|
|
// },
|
|
|
+ // title: {
|
|
|
+ // type: String,
|
|
|
+ // default: ''
|
|
|
+ // }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ title: null,
|
|
|
+ dialogVisible: false,
|
|
|
dialogVisibleSpec: false,
|
|
|
checkedCities: [],
|
|
|
servicePromiseArr: [
|
|
|
- { cdescribe: '假一赔十' },
|
|
|
- { cdescribe: '7天无理由退货' },
|
|
|
+ { cdescribe: '假一赔三' },
|
|
|
+ { cdescribe: '7天无理由退换' },
|
|
|
{ cdescribe: '破损包退换' },
|
|
|
],
|
|
|
mainImageUid: null,
|
|
|
+ tableForm: {
|
|
|
+ //规格明细table
|
|
|
+ skuList: [
|
|
|
+ //{ specCombo: "白色、加粗、大号", image: "", pricePoint: '', originPrice: 2, stock: 6 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
formInline: {
|
|
|
+ name: '',
|
|
|
detail: '',
|
|
|
categoryId: '',
|
|
|
productNo: '',
|
|
|
productMainImage: '',
|
|
|
productImage: '',
|
|
|
+ productImageArr: [],
|
|
|
paymentType: 1,
|
|
|
freight: '',
|
|
|
deliveryTime: '',
|
|
|
@@ -171,15 +214,12 @@ export default {
|
|
|
servicePromise: [],
|
|
|
//规格展示table
|
|
|
specList: [],
|
|
|
- //规格明细table
|
|
|
- skuList: [
|
|
|
- //{ specCombo: "白色、加粗、大号", image: "", pricePoint: '', originPrice: 2, stock: 6 },
|
|
|
- ],
|
|
|
+
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },],
|
|
|
productMainImage: [{ required: true, message: '请上传主图', trigger: 'change' }],
|
|
|
- productImage: [{ required: true, message: '请上传商品图', trigger: 'change' }],
|
|
|
+ productImageArr: [{ required: true, message: '请上传商品图', trigger: 'change' }],
|
|
|
categoryId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
|
|
|
region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
|
|
|
deliveryTime: [{ required: true, message: '请选择承诺发货时间', trigger: 'change' }],
|
|
|
@@ -201,10 +241,10 @@ export default {
|
|
|
{ label: '测试数据2', value: '3' }
|
|
|
],
|
|
|
seedTime: [
|
|
|
- { label: '24', value: '1' },
|
|
|
- { label: '36', value: '2' },
|
|
|
- { label: '48', value: '3' },
|
|
|
- { label: '72', value: '4' },
|
|
|
+ { label: '24', value: '24' },
|
|
|
+ { label: '36', value: '36' },
|
|
|
+ { label: '48', value: '48' },
|
|
|
+ { label: '72', value: '72' },
|
|
|
],
|
|
|
// 数量限制
|
|
|
limit: 6,
|
|
|
@@ -221,29 +261,91 @@ export default {
|
|
|
|
|
|
//规格明细列
|
|
|
columnData3: [
|
|
|
- { label: "规格", prop: "specValueText", type: 'diy', align: 'center', },
|
|
|
- { label: "图片", prop: "img", type: 'diy', align: 'center', },
|
|
|
- { label: "价格", prop: "pricePoint", type: 'diy', width: 400, align: 'center', },
|
|
|
- { label: "原价", prop: "oriangePrice", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
|
|
|
- { label: "库存", prop: "number", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
|
|
|
+ { label: "规格", prop: "specCombo", type: 'diyScope', align: 'center', },
|
|
|
+ { label: "图片", prop: "image", type: 'diyScope', align: 'center', },
|
|
|
+ { label: "价格", prop: "pricePoint", type: 'diyScope', width: 400, align: 'center', },
|
|
|
+ { label: "原价", prop: "originPrice", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
|
|
|
+ { label: "库存", prop: "stock", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
|
|
|
],
|
|
|
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- if(this.title=='详情')
|
|
|
- this.formInline=this.params
|
|
|
- console.log(this.formInline,'this.formInline')
|
|
|
+
|
|
|
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- //新增、编辑---保存
|
|
|
- validate(callback) {
|
|
|
+ showPage(title, id, params) {
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.formInlineRef?.resetFields()
|
|
|
+ this.formInline.specList = []
|
|
|
+ this.tableForm.skuList = [] //规格明细table
|
|
|
+ this.title = title
|
|
|
+ if (this.title == '详情' || this.title == '编辑') {
|
|
|
+ let newForm = JSON.parse(JSON.stringify(params))
|
|
|
+ newForm.productImageArr = params.productImage
|
|
|
+ newForm.productImage = params.productImage.toString()
|
|
|
+ newForm.dateRange = [params.saleStartTime, params.saleEndTime]
|
|
|
+ this.formInline = newForm
|
|
|
+ console.log(this.formInline,'this.formInline')
|
|
|
+ if (newForm.specComboVOList.length) {
|
|
|
+ this.specDataReorganizeFun(JSON.parse(JSON.stringify(newForm.specComboVOList)))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ ////新增、编辑、详情商品 ----保存
|
|
|
+ addOrEditOrDetailSave() {
|
|
|
+ console.log(this.formInline, 'formInline')
|
|
|
+ console.log(this.tableForm, 'tableForm')
|
|
|
this.$refs.formInlineRef.validate((valid) => {
|
|
|
- callback(valid);
|
|
|
+ if (valid) {
|
|
|
+ if (this.formInline.specList.length == 0) {
|
|
|
+ this.$message.error("请编辑规格!");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.tableFormRef.validate((valid1) => {
|
|
|
+ console.log(this.tableForm.skuList,'this.tableForm.skuList')
|
|
|
+ console.log(valid1,'valid1')
|
|
|
+ if (valid1) {
|
|
|
+ let params = JSON.parse(JSON.stringify(this.formInline))
|
|
|
+ params.saleStartTime = this.formInline.dateRange[0]
|
|
|
+ params.saleEndTime = this.formInline.dateRange[1]
|
|
|
+ params.productImage=this.formInline.productImageArr
|
|
|
+ // params.delete.dateRange
|
|
|
+ // params.delete.productImageArr
|
|
|
+ //组装规格列表数据
|
|
|
+ params.specList = this.specListReorganizeFun(this.formInline.specList)
|
|
|
+ params.skuList = this.tableForm.skuList
|
|
|
+ console.log(params,'params')
|
|
|
+ productUpdate(params).then(res => {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$emit("getList");
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.error("请完善信息!");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error("请完善信息!");
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
+ //校验table
|
|
|
+ validateTable(table) {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 上传事件
|
|
|
+ onUpload(e) {
|
|
|
+ this.formInline.productImage = e.toString().split(',')
|
|
|
+
|
|
|
+ },
|
|
|
//商品分类
|
|
|
changeShopType(e) {
|
|
|
//获取商品编号
|
|
|
@@ -255,27 +357,42 @@ export default {
|
|
|
|
|
|
},
|
|
|
//规格设置保存
|
|
|
- specSetSave() {
|
|
|
- //return
|
|
|
- let specListTime = []
|
|
|
- this.list2.forEach((item, index) => {
|
|
|
- let obj = { specName: '', sort: '', specValues: [] }
|
|
|
- obj.specName = item.specName
|
|
|
- obj.sort = index + 1
|
|
|
+ async specSetSave() {
|
|
|
+ let flag = false
|
|
|
+ for (let i = 0; i < this.list2.length; i++) {
|
|
|
+ let item = this.list2[i]
|
|
|
+ // 规格名不能为空
|
|
|
+ if (item.specName.trim() == '') {
|
|
|
+ flag = false
|
|
|
+ this.$message.error("规格名不能为空")
|
|
|
+ break; //终止循环
|
|
|
+ }
|
|
|
|
|
|
- for (let key in item) {
|
|
|
- if (key !== 'specName') {
|
|
|
- let obj2 = { specValue: '', sort: '' }
|
|
|
- obj2.specValue = item[key]
|
|
|
- obj2.sort = Number(key.split("specValue")[1])
|
|
|
- obj.specValues.push(obj2)
|
|
|
- }
|
|
|
+ // 至少一个规格值
|
|
|
+ let hasValid = Object.values(item).some(v => {
|
|
|
+ return String(v || '').trim() !== '' && v !== item.specName
|
|
|
+ })
|
|
|
+
|
|
|
+ if (!hasValid) {
|
|
|
+ flag = false
|
|
|
+ this.$message.error("每个规格至少填写一个规格值")
|
|
|
+ break; //终止循环
|
|
|
}
|
|
|
- specListTime.push(obj)
|
|
|
- })
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ console.log(specListTime, 'specListTime')
|
|
|
+ console.log(this.list2, 'list2')
|
|
|
+ console.log(flag, 'flag')
|
|
|
+ if (!flag) return
|
|
|
+ let specListTime = this.specListReorganizeFun(this.list2)
|
|
|
+
|
|
|
+ //新增商品规格接口
|
|
|
productSpecSetup({ specList: specListTime }).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
- this.getSpecDetail(this.formInline.productNo)
|
|
|
+ //新增完成后查询规格组合
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getSpecDetail(this.formInline.productNo)
|
|
|
+ }, 500)
|
|
|
this.$message.success(res.msg);
|
|
|
this.dialogVisibleSpec = false
|
|
|
|
|
|
@@ -288,49 +405,73 @@ export default {
|
|
|
},
|
|
|
|
|
|
//查询商品规格和规格明细
|
|
|
- getSpecDetail( productNo) {
|
|
|
- productSpecCombinations({productNo:this.formInline.productNo}).then(res => {
|
|
|
- this.formInline.specList = []
|
|
|
- this.formInline.skuList = []//规格明细table
|
|
|
- this.columnData1 = [{ label: '规格', prop: 'specName' }]
|
|
|
- let arr = res.data
|
|
|
- const map = new Map();
|
|
|
- arr.forEach(item => {
|
|
|
- let obj = { specValueText: null, img: null, pricePoint: null, oriangePrice: null, number: null }
|
|
|
- obj.specValueText = item.specValueText
|
|
|
- //生成规格明细table数据
|
|
|
- this.formInline.skuList.push(obj)
|
|
|
-
|
|
|
- item.specNameValueList.forEach(spec => {
|
|
|
- const key = spec.specName;
|
|
|
- if (!map.has(key)) {
|
|
|
- map.set(key, new Set());
|
|
|
- }
|
|
|
- map.get(key).add(spec.specValue);
|
|
|
- });
|
|
|
- })
|
|
|
- let maxSpecValueCount = 0;
|
|
|
- // 2. 转成要的格式：specName + specValue1 + specValue2
|
|
|
- map.forEach((valueSet, specName, index) => {
|
|
|
- const values = Array.from(valueSet);
|
|
|
- const obj = { specName: specName };
|
|
|
- // 循环：自动加 specValue1、specValue2、specValue3...
|
|
|
- values.forEach((val, index) => {
|
|
|
- obj[`specValue${index + 1}`] = val;
|
|
|
- });
|
|
|
- maxSpecValueCount = Math.max(maxSpecValueCount, valueSet.size)
|
|
|
- this.formInline.specList.push(obj);
|
|
|
+ getSpecDetail() {
|
|
|
+ productSpecCombinations({ productNo: this.formInline.productNo }).then(res => {
|
|
|
+ this.specDataReorganizeFun(res.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //拿到后端返回的规格组合数据--组装成页面需要的格式
|
|
|
+ specDataReorganizeFun(data) {
|
|
|
+ this.formInline.specList = []
|
|
|
+ this.tableForm.skuList = []//规格明细table
|
|
|
+ this.columnData1 = [{ label: '规格', prop: 'specName' }]
|
|
|
+ let arr = data
|
|
|
+ const map = new Map();
|
|
|
+ arr.forEach(item => {
|
|
|
+ let obj = { specCombo: null, image:'', pricePoint: null, originPrice: null, stock: null }
|
|
|
+ obj.specCombo = item.specValueText
|
|
|
+ //生成规格明细table数据
|
|
|
+ this.tableForm.skuList.push(obj)
|
|
|
+
|
|
|
+ item.specNameValueList.forEach(spec => {
|
|
|
+ const key = spec.specName;
|
|
|
+ if (!map.has(key)) {
|
|
|
+ map.set(key, new Set());
|
|
|
+ }
|
|
|
+ map.get(key).add(spec.specValue);
|
|
|
});
|
|
|
- for (let i = 1; i <= maxSpecValueCount; i++) {
|
|
|
- this.columnData1.push({
|
|
|
- prop: `specValue${i}`,
|
|
|
- label: `规格值${i}`,
|
|
|
- });
|
|
|
- }
|
|
|
- console.log(this.formInline.skuList, 'this.formInline.skuList')
|
|
|
})
|
|
|
+ let maxSpecValueCount = 0;
|
|
|
+ // 2. 转成要的格式：specName + specValue1 + specValue2
|
|
|
+ map.forEach((valueSet, specName, index) => {
|
|
|
+ const values = Array.from(valueSet);
|
|
|
+ const obj = { specName: specName };
|
|
|
+ // 循环：自动加 specValue1、specValue2、specValue3...
|
|
|
+ values.forEach((val, index) => {
|
|
|
+ obj[`specValue${index + 1}`] = val;
|
|
|
+ });
|
|
|
+ maxSpecValueCount = Math.max(maxSpecValueCount, valueSet.size)
|
|
|
+ this.formInline.specList.push(obj);
|
|
|
+ });
|
|
|
+ for (let i = 1; i <= maxSpecValueCount; i++) {
|
|
|
+ this.columnData1.push({
|
|
|
+ prop: `specValue${i}`,
|
|
|
+ label: `规格值${i}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //console.log(this.formInline.skuList, 'this.formInline.skuList')
|
|
|
},
|
|
|
+ //组装编辑规格table保存数据
|
|
|
+ specListReorganizeFun(data) {
|
|
|
+ let list = []
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ let obj = { specName: '', sort: '', specValues: [] }
|
|
|
+ obj.specName = item.specName
|
|
|
+ obj.sort = index + 1
|
|
|
|
|
|
+ for (let key in item) {
|
|
|
+ if (key !== 'specName') {
|
|
|
+ let obj2 = { specValue: '', sort: '' }
|
|
|
+ obj2.specValue = item[key]
|
|
|
+ obj2.sort = Number(key.split("specValue")[1])
|
|
|
+ obj.specValues.push(obj2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ list.push(obj)
|
|
|
+ })
|
|
|
+ return list
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
// 文件个数超出
|
|
|
handleExceed() {
|
|
|
@@ -401,8 +542,10 @@ export default {
|
|
|
},
|
|
|
//服务承诺复选框
|
|
|
handleCheckedChange(val) {
|
|
|
+ console.log(this.formInline.servicePromise, 'this.formInline.servicePromise')
|
|
|
// this.checkedCities = val ? cityOptions : [];
|
|
|
- this.formInline.servicePromise = val.join(",");
|
|
|
+ //console.log(val,'555555')
|
|
|
+ //this.formInline.servicePromise = val.join(",");
|
|
|
},
|
|
|
|
|
|
}
|
|
|
@@ -426,6 +569,14 @@ export default {
|
|
|
margin: 20px 0 10px 0;
|
|
|
}
|
|
|
|
|
|
+::v-deep .tableFormClass {
|
|
|
+ .el-form-item__error {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ //display: flex;justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
::v-deep .el-upload--picture-card {
|
|
|
width: 90px;
|
|
|
height: 90px;
|
MS-IOHQJGHXZHQD\Administrator