merchant-web/src/views/modules/product/popup/add-or-update.vue

896 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<obj-modal
class="obj-modal"
ref="modal"
labelWidth="100px"
:modalCols="modalCols"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<template slot="dialog__before">
<el-tabs :before-leave="beforeTabLeave" v-model="currentPanel">
<el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
<el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
</el-tabs>
</template>
</obj-modal>
<!-- 添加规格 -->
<addSpecifications
@getSpecs="getSpecs"
ref="addSpecifications"
></addSpecifications>
<!-- 属性 -->
<addAttribute
@getAttribute="getAttribute"
ref="addAttribute"
></addAttribute>
</div>
</template>
<script>
import addAttribute from "./add-attribute.vue";
import addSpecifications from "./add-specifications.vue";
import { debounce, cloneDeep } from "lodash";
export default {
components: { addSpecifications, addAttribute },
data() {
return {
currentPanel: "基础信息",
modalData: {
merchantId: null,
shopId: null,
id: null,
name: "",
productCategoryId: "",
productPhotoList: [
// {
// "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
// "isMain": 1
// }
],
description: "",
productUnit: "",
productPlace: "",
//保质期
shelfLife: "",
//产品介绍图
productIntroducePhoto: "",
//产品介绍视频
productVideo: "",
//单价
singlePrice: "",
//单库存
singleStock: "",
//其他属性
otherAttribute: [], //[{"name":"颜色","value":"黄色;屎黄色"}]
//折扣情况
discountActivity: {
// "endTime": "2024-08-31 00:00:00",
// "id": "1821213180710957056",
// "merchantId": "1818337963053297664",
// "ruleObject": {
// "discount": 5,
// "limitCount": 99
// },
// "shopId": "1818337963523059712",
// "startTime": "2024-08-01 00:00:00",
// "type": 0
},
//是否折扣
isDiscount: 1,
marketId: null,
//最大消费
maxCostPrice: 15,
//市场最大消费
maxMarketPrice: 35,
//最大售价
maxSalePrice: 17.5,
//最低售价
minCostPrice: 10,
//市场最低售价
minMarketPrice: 20,
minSalePrice: 10,
salePrice: 20,
sort: 999,
status: "DOWN", //up 上架 //DOWN 放入仓库
stockNum: 200,
specType: 1,
productAttributeList: [
// {
// "id": "1821213026050191360",
// "attributeName": "重量",
// "attributeValue": "1斤,2斤"
// }
],
productSpecificationList: [
// {
// "attributeValue": "重量1斤",
// "costPrice": 10,
// "id": "1821213026083745792",
// "isDiscount": 1,
// "limitCount": 99,
// "marketPrice": 20,
// "productId": "1821207097380515840",
// "saleNum": 0,
// "salePrice": 10,
// "stockNum": 100,
// "virtualSaleNum": 0,
// "warnStockNum": 0,
// "_id": "重量1斤",
// "value": "售价¥10 成本¥10 库存100"
// },
// {
// "attributeValue": "重量2斤",
// "costPrice": 15,
// "id": "1821213026083745793",
// "isDiscount": 1,
// "limitCount": 99,
// "marketPrice": 35,
// "productId": "1821207097380515840",
// "saleNum": 0,
// "salePrice": 17.5,
// "stockNum": 100,
// "virtualSaleNum": 0,
// "warnStockNum": 0,
// "_id": "重量2斤",
// "value": "售价¥17.5 成本¥15 库存100"
// }
],
},
modalConfig: {
title: "编辑商品",
show: false,
width: "1300px",
fullscreen: true,
},
fileList: [], //回显图片
fileListOne: [], //介绍图
fileListTwo: [], //视频
place: "", //场地
passCheck: [], //通行证
};
},
mounted() {},
watch: {
"modalConfig.show"(newVal) {
if (!newVal) {
this.currentPanel = "基础信息";
this.fileList = [];
(this.fileListOne = []), (this.fileListTwo = []);
}
},
},
methods: {
toggle(e) {
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
}
if (e) {
console.log(e);
this.init(cloneDeep(e));
}
return {
add: () => {
this.$nextTick(() => {
this.modalConfig.title = "添加商品";
this.modalData = {
description: "",
merchantId: "",
name: "",
otherAttribute: [],
productAttributeList: [],
productCategoryId: "",
productIntroducePhoto: "",
productPhotoList: [],
productPlace: "",
productSpecificationList: [],
productUnit: "",
productVideo: "",
shelfLife: "",
shopId: "",
singlePrice: "",
singleStock: "",
specType: 0,
status: "UP",
};
this.modalData.merchantId = JSON.parse(
sessionStorage.getItem("userInfo")
).merchantId;
this.modalData.shopId = JSON.parse(
sessionStorage.getItem("userInfo")
).shopId;
this.passCheck = [];
this.place = [];
});
this.isAdd = true;
console.log("112233");
},
update: () => {
this.modalConfig.title = "编辑商品";
this.isAdd = false;
},
};
},
init(row) {
console.log(row);
this.fileList = row.productPhotoList.map((item) => {
return {
name: "",
url: item.url,
};
});
if (row.productIntroducePhoto) {
this.fileListOne = [
{
name: "",
url: row.productIntroducePhoto,
},
];
} else {
this.fileListOne = [];
}
if (row.productVideo) {
this.fileListTwo = [
{
name: "",
url: row.productVideo,
},
];
} else {
this.fileListTwo = [];
}
this.place = row.productPlace.split("-");
this.modalData = row;
this.$set(this.modalData, "singleStock", row.stockNum);
if (row.minSalePrice == row.maxSalePrice) {
this.$set(this.modalData, "singlePrice", row.maxSalePrice);
} else {
this.$set(
this.modalData,
"singlePrice",
row.minSalePrice + "~" + row.maxSalePrice
);
}
if (!row.productAttributeList) {
this.$set(this.modalData, "productAttributeList", []);
}
if (row.otherAttribute) {
this.modalData.otherAttribute = JSON.parse(row.otherAttribute);
} else {
this.modalData.otherAttribute = [];
}
},
addSpecs() {
console.log("123");
if (this.isAdd) {
this.$refs.addSpecifications
.toggle()
.add(
this.modalData.productAttributeList,
this.modalData.productSpecificationList
);
} else {
if (this.modalData.specType == 0) {
this.$refs.addSpecifications.toggle().update([], []);
} else {
this.$refs.addSpecifications
.toggle()
.update(
this.modalData.productAttributeList,
this.modalData.productSpecificationList
);
}
}
},
//获取属性
getSpecs(tableData, AttributeData, salePrice, stockNum) {
console.log(tableData);
this.modalData.specType = 1;
let AttributeList = AttributeData.map((item) => {
return {
attributeName: item.attributeName,
attributeValue: item.attributeValue.join(","),
};
});
this.$set(this.modalData, "productSpecificationList", tableData);
this.$set(this.modalData, "productAttributeList", AttributeList);
this.$set(this.modalData, "singlePrice", salePrice);
this.$set(this.modalData, "singleStock", stockNum);
},
addAttribute() {
if (this.isAdd) {
this.$refs.addAttribute.toggle().add(this.modalData.otherAttribute);
} else {
this.$refs.addAttribute.toggle().update(this.modalData.otherAttribute);
}
},
getAttribute(data) {
console.log(data);
this.modalData.otherAttribute = [
{
name: data.name,
value: data.value.join(","),
},
];
console.log(this.modalData);
},
beforeTabLeave(activeName, oldActiveName) {
if (this.passCheck.includes(activeName)) {
return true;
}
let state = "";
this.$refs.modal.validate((valid) => {
if (valid) {
if (!this.passCheck.includes(oldActiveName)) {
this.passCheck.push(oldActiveName);
}
}
state = valid;
});
return state;
},
},
computed: {
modalCols() {
switch (this.currentPanel) {
case "基础信息":
return [
{
label: "商品图片",
prop: "productPhotoList",
required: true,
rules: {
required: true,
message: "请上传商品图片",
trigger: "blur",
},
type: "jsx",
render: () => {
const handleChange = (file, fileList) => {
// console.log(fileList);
};
const handleAvatarSuccess = (res, file, fileList) => {
console.log(res, fileList);
this.modalData.productPhotoList = fileList.map(
(item, index) => {
if (index == 0) {
return {
isMain: 1,
url: item.response ? item.response.data : item.url,
};
} else {
return {
url: item.response ? item.response.data : item.url,
};
}
}
);
console.log(this.modalData.productPhotoList);
this.fileList = fileList.map((item) => {
return {
name: item.name,
url: item.response ? item.response.data : item.url,
};
});
};
const handleRemove = (file, fileList) => {
console.log(file, fileList);
this.modalData.productPhotoList = fileList.map(
(item, index) => {
if (index == 0) {
return {
isMain: 1,
url: item.url,
};
} else {
return {
url: item.url,
};
}
}
);
console.log(this.modalData.productPhotoList);
this.fileList = fileList.map((item) => {
return {
name: item.name,
url: item.url,
};
});
};
return (
<el-upload
class="upload-demo"
drag
action={this.$api.mer_admin.uploadFile()}
{...{
props: {
"on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
},
}}
headers={{
token: "Bearer " + this.$cookie.get("token"),
}}
multiple={true}
file-list={this.fileList}
list-type="picture"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件且不超过500kb
</div>
</el-upload>
);
},
},
{
label: "商品类目",
prop: "productCategoryId",
type: "jsx",
required: true,
rules: {
required: true,
message: "请选择商品类目",
trigger: "blur",
},
render: () => {
return (
<el-select
placeholder="请选择商品类目"
v-model={this.modalData.productCategoryId}
>
{this.getProductCategory.map((item) => {
return (
<el-option
label={item.name}
value={item.id}
></el-option>
);
})}
</el-select>
);
},
},
{
label: "商品名称",
prop: "name",
type: "Input",
required: true,
maxlength: "30",
rules: {
required: true,
message: "请输入商品名称",
trigger: "blur",
},
placeholder: "请输入商品名称",
},
{
label: "商品描述",
prop: "description",
required: true,
rules: {
required: true,
message: "请填写商品描述",
trigger: "blur",
},
type: "jsx",
render: () => {
return (
<el-input
type="textarea"
maxlength={100}
v-model={this.modalData.description}
placeholder="请简单描述,如别称、口感、用途等"
/>
);
},
},
];
break;
case "销售信息":
return [
{
label: "销售单位",
prop: "productUnit",
required: true,
rules: {
required: true,
message: "请选择销售单位",
trigger: "blur",
},
type: "jsx",
render: () => {
return (
<el-select
v-model={this.modalData.productUnit}
placeholder="请选择销售单位"
>
{this.getSaleUnit.map((item) => {
return (
<el-option
label={item.name}
value={item.name}
></el-option>
);
})}
</el-select>
);
},
},
{
label: "规格",
prop: "productSpecificationList",
// required: true,
// rules: {
// required: true,
// message: "请选择销售单位",
// trigger: "blur",
// },
type: "jsx",
render: () => {
return (
<el-button onClick={this.addSpecs}>
若有多规格请在此配置
</el-button>
);
},
},
{
label: "成本",
prop: "minCostPrice",
type: "jsx",
render: () => {
return (
<el-input
readonly={this.modalData.specType != 0}
placeholder="请输入价格"
v-model={this.modalData.minCostPrice}
>
<template slot="append">单位</template>
</el-input>
);
},
},
{
label: "价格",
prop: "singlePrice",
type: "jsx",
render: () => {
return (
<el-input
readonly={this.modalData.specType != 0}
placeholder="请输入价格"
v-model={this.modalData.singlePrice}
>
<template slot="append">单位</template>
</el-input>
);
},
},
{
label: "库存",
prop: "singleStock",
type: "jsx",
render: () => {
return (
<el-input
readonly={this.modalData.specType != 0}
placeholder="请输入库存"
v-model={this.modalData.singleStock}
></el-input>
);
},
},
{
label: "重量",
prop: "weight",
type: "jsx",
render: () => {
return (
<el-input
readonly={this.modalData.specType != 0}
placeholder="请输入库存"
v-model={this.modalData.weight}
></el-input>
);
},
},
{
label: "体积",
prop: "volume",
type: "jsx",
render: () => {
return (
<el-input
readonly={this.modalData.specType != 0}
placeholder="请输入库存"
v-model={this.modalData.volume}
></el-input>
);
},
},
{
label: "其他属性",
prop: "productAttributeList",
type: "jsx",
render: () => {
return (
<el-button onClick={this.addAttribute}>
添加其他属性
</el-button>
);
},
},
];
break;
case "其他信息":
return [
{
label: "产地",
prop: "productPlace",
required: true,
rules: { required: true, message: "请选择产地", trigger: "blur" },
type: "jsx",
render: () => {
const change = (e) => {
console.log(e);
this.modalData.productPlace = e.join("-");
};
return (
<el-cascader
v-model={this.place}
onChange={change}
options={this.$api.mer_admin.getCityOptions()}
props={{
props: {
label: "name",
value: "name",
},
}}
clearable
></el-cascader>
);
},
},
{
label: "保质期",
prop: "shelfLife",
type: "jsx",
// required: true,
rules: {
required: true,
message: "请填写保质期",
trigger: "blur",
},
render: () => {
return (
<el-input
style="width:150px;"
placeholder="请填写保质期"
v-model={this.modalData.shelfLife}
>
<div slot="suffix"></div>
</el-input>
);
},
},
{
label: "商品介绍图",
prop: "productIntroducePhoto",
type: "Input",
// required: true,
// rules: { required: true, message: "商品介绍图", trigger: "blur" },
placeholder: "商品介绍图",
type: "jsx",
render: () => {
const handleChange = (file, fileList) => {
// console.log(fileList);
};
const handleAvatarSuccess = (res) => {
this.modalData.productIntroducePhoto = res.data;
console.log(this.modalData.productIntroducePhoto);
};
const handleRemove = () => {
this.modalData.productIntroducePhoto = "";
console.log(this.modalData.productIntroducePhoto);
};
return (
<el-upload
class="upload-demo"
drag
action={this.$api.mer_admin.uploadFile()}
limit={1}
file-list={this.fileListOne}
list-type="picture"
{...{
props: {
"on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
},
}}
headers={{
token: "Bearer " + this.$cookie.get("token"),
}}
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件且不超过500kb
</div>
</el-upload>
);
},
},
{
label: "商品视频",
prop: "productVideo",
// required: true,
// rules: {
// required: true,
// message: "请填写商品描述",
// trigger: "blur",
// },
type: "jsx",
render: () => {
const handleChange = (file, fileList) => {
console.log(fileList);
};
const handleAvatarSuccess = (res) => {
this.modalData.productVideo = res.data;
};
const handleRemove = () => {
this.modalData.productVideo = "";
};
return (
<el-upload
class="upload-demo"
drag
action={this.$api.mer_admin.uploadFile()}
limit={1}
file-list={this.fileListTwo}
list-type="picture"
{...{
props: {
"on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
},
}}
headers={{
token: "Bearer " + this.$cookie.get("token"),
}}
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件且不超过500kb
</div>
</el-upload>
);
},
},
];
break;
default:
break;
}
},
modalHandles() {
return [
{
label: this.currentPanel === "其他信息" ? "立即上架" : "下一步",
type: "primary",
loading: this.isLoading,
submit: true,
handle: debounce(() => {
if (this.currentPanel === "基础信息") {
this.currentPanel = "销售信息";
} else if (this.currentPanel == "销售信息") {
this.currentPanel = "其他信息";
} else {
console.log("请求接口", this.modalData);
if (this.modalData.specType == 0) {
this.modalData.productAttributeList = [
{
id: "1821213026050191360",
attributeName: "重量",
attributeValue: "1斤",
},
];
this.modalData.productSpecificationList = [
{
attributeValue: "默认",
costPrice: this.modalData.minCostPrice,
salePrice: this.modalData.singlePrice,
stockNum: this.modalData.singleStock,
weight: this.modalData.weight,
volume: this.modalData.volume,
},
];
}
this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
console.log(res);
this.$emit("queryList");
this.toggle();
});
}
}, 300),
},
{
disabled: () => this.currentPanel != "其他信息",
label: "放入仓库",
type: "primary",
loading: this.isLoading,
submit: true,
handle: debounce(() => {
if (this.modalData.specType == 0) {
this.modalData.productAttributeList = [
{
id: "1821213026050191360",
attributeName: "重量",
attributeValue: "1斤",
},
];
this.modalData.productSpecificationList = [
{
attributeValue: "默认",
costPrice: this.modalData.minCostPrice,
salePrice: this.modalData.singlePrice,
stockNum: this.modalData.singleStock,
weight: this.modalData.weight,
volume: this.modalData.volume,
},
];
}
this.modalData.status = "DOWN";
this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
console.log(res);
this.$emit("queryList");
this.toggle();
});
}, 300),
},
];
},
},
asyncComputed: {
async getProductCategory() {
let res = await this.$api.mer_admin.getProductCategory();
return res.data.data;
},
async getSaleUnit() {
let res = await this.$api.mer_admin.getSaleUnit({
shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
});
console.log(res);
return res.data.data;
},
},
};
</script>
<style lang="scss" scoped>
.obj-modal ::v-deep {
.el-dialog__body {
padding: 0 30px;
}
}
</style>