DMJS-IT
/
merchant-web
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加商品

This commit is contained in:
余同学 2024-08-12 18:05:59 +08:00
parent 22516acb2b
commit 5305dcafb5
3 changed files with 592 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/views/modules/product/popup/add-attribute.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<div>
<obj-modal
ref="modal"
labelWidth="150px"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<div slot="dialog__content">
<el-alert class="Example" title="需要注意的事项" type="info">
<template slot="title">
<el-form label-width="80px">
<el-form-item label="示例：">
<div class="iconSize">属性名称：温度</div>
<div class="iconSize">属性内容：常温；冷饮</div>
<div class="iconSize">顾客下单时可选择【常温】 或 【冷饮】</div>
</el-form-item>
</el-form>
</template>
</el-alert>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="属性名称：" prop="name">
<el-input
style="width: 80%"
placeholder="请输入属性名称"
v-model="ruleForm.name"
clearable
></el-input>
</el-form-item>
<el-form-item label="属性内容：" prop="value">
<el-tag
:key="tag"
v-for="tag in ruleForm.value"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button
v-else
class="button-new-tag"
size="small"
@click="showInput"
>+添加内容</el-button
>
</el-form-item>
</el-form>
</div>
</obj-modal>
</div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
components: {},
data() {
return {
isAdd: true,
//表格属性
modalConfig: {
title: "属性",
show: false,
width: "80%",
},
modalData: {},
inputValue: "",
inputVisible: false,
ruleForm: {
name: "",
value: [],
},
rules: {
name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
value: [
{
required: true,
message: "请输入属性内容",
trigger: "blur",
},
],
},
};
},
methods: {
queryTableData(pageNo, pageSize) {},
toggle(e) {
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
}
if (e) {
this.init(cloneDeep(e.row));
}
return {
add: () => {
this.modalConfig.title = "添加属性";
this.$nextTick(() => {
this.modalData = {};
this.$refs.ruleForm.resetFields();
});
this.isAdd = true;
},
update: () => {
this.isAdd = false;
},
};
},
init(row) {
this.modalData = row;
},
handleClose(tag) {
this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
},
//聚焦
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.ruleForm.value.push(inputValue);
}
this.inputVisible = false;
this.inputValue = "";
},
},
computed: {
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: this.isAdd ? "确认添加" : "确认修改",
type: "primary",
loading: this.isLoading,
// submit: true,
handle: () => {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("getAttribute", this.ruleForm);
this.toggle();
}
});
},
},
];
},
},
asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.Example {
margin: 0 0 20px 20px;
width: 80%;
}
.iconSize {
font-size: 15px;
// padding: 3px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>

156
src/views/modules/product/popup/add-or-update.vue
View File

@ -17,14 +17,24 @@
</el-tabs> </el-tabs>
</template> </template>
</obj-modal> </obj-modal>
<addSpecifications ref="addSpecifications"></addSpecifications> <!-- 添加规格 -->
<addSpecifications
@getSpecs="getSpecs"
ref="addSpecifications"
></addSpecifications>
<!-- 属性 -->
<addAttribute
@getAttribute="getAttribute"
ref="addAttribute"
></addAttribute>
</div> </div>
</template> </template>
<script> <script>
import addAttribute from "./add-attribute.vue";
import addSpecifications from "./add-specifications.vue"; import addSpecifications from "./add-specifications.vue";
import { debounce, cloneDeep } from "lodash"; import { debounce, cloneDeep } from "lodash";
export default { export default {
components: { addSpecifications }, components: { addSpecifications, addAttribute },
data() { data() {
return { return {
currentPanel: "基础信息", currentPanel: "基础信息",
@ -84,7 +94,7 @@ export default {
minSalePrice: 10, minSalePrice: 10,
salePrice: 20, salePrice: 20,
sort: 999, sort: 999,
status: "DOWN", status: "DOWN", //up 上架 //DOWN 放入仓库
stockNum: 200, stockNum: 200,
specType: 1, specType: 1,
productAttributeList: [ productAttributeList: [
@ -136,6 +146,7 @@ export default {
fullscreen: true, fullscreen: true,
}, },
fileList: [], //回显图片 fileList: [], //回显图片
place: "", //场地
}; };
}, },
mounted() {}, mounted() {},
@ -153,6 +164,36 @@ export default {
return { return {
add: (item) => { add: (item) => {
console.log(item); console.log(item);
this.$nextTick(() => {
this.modalData = {
description: "",
merchantId: "",
name: "",
otherAttribute: "",
productAttributeList: [],
productCategoryId: "",
productIntroducePhoto: "",
productPhotoList: [],
productPlace: "",
productSpecificationList: [],
productUnit: "",
productVideo: "",
shelfLife: "",
shopId: "",
singlePrice: "",
singleStock: "",
specType: "",
status: "UP",
};
this.modalData.merchantId = JSON.parse(
sessionStorage.getItem("userInfo")
).merchantId;
this.modalData.shopId = JSON.parse(
sessionStorage.getItem("userInfo")
).shopId;
});
console.log(this.modalData);
this.isAdd = true; this.isAdd = true;
}, },
update: (row) => { update: (row) => {
@ -166,6 +207,34 @@ export default {
console.log("123"); console.log("123");
this.$refs.addSpecifications.toggle().add(); this.$refs.addSpecifications.toggle().add();
}, },
//获取属性
getSpecs(tableData, AttributeData, salePrice, stockNum) {
let AttributeList = AttributeData.map((item) => {
return {
attributeName: item.attributeName,
attributeValue: item.attributeValue.join(","),
};
});
console.log(AttributeList);
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() {
this.$refs.addAttribute.toggle().add();
},
getAttribute(data) {
console.log(data);
this.modalData.otherAttribute = [
{
name: data.name,
value: data.value.join(","),
},
];
console.log(this.modalData);
},
}, },
computed: { computed: {
modalCols() { modalCols() {
@ -184,18 +253,42 @@ export default {
type: "jsx", type: "jsx",
render: () => { render: () => {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
// console.log(fileList); // console.log(fileList);
}; };
const handleAvatarSuccess = (res, file) => { const handleAvatarSuccess = (res, file, fileList) => {
console.log(res); console.log(res, fileList);
this.modalData.productPhotoList.push(res); this.modalData.productPhotoList = fileList.map(
(item, index) => {
if (index == 0) {
return {
isMain: 1,
url: item.response.data,
};
} else {
return {
url: item.response.data,
};
}
}
);
console.log(this.modalData.productPhotoList); console.log(this.modalData.productPhotoList);
}; };
const handleRemove = (file, fileList) => { const handleRemove = (file, fileList) => {
console.log(file, fileList); console.log(file, fileList);
this.modalData.productPhotoList = fileList.map((item) => { this.modalData.productPhotoList = fileList.map(
return item.response; (item, index) => {
}); if (index == 0) {
return {
isMain: 1,
url: item.response.data,
};
} else {
return {
url: item.response.data,
};
}
}
);
console.log(this.modalData.productPhotoList); console.log(this.modalData.productPhotoList);
}; };
return ( return (
@ -338,6 +431,9 @@ export default {
render: () => { render: () => {
return ( return (
<el-input <el-input
readonly={
this.modalData.productSpecificationList.length > 0
}
placeholder="请输入价格" placeholder="请输入价格"
v-model={this.modalData.singlePrice} v-model={this.modalData.singlePrice}
></el-input> ></el-input>
@ -351,6 +447,9 @@ export default {
render: () => { render: () => {
return ( return (
<el-input <el-input
readonly={
this.modalData.productSpecificationList.length > 0
}
placeholder="请输入库存" placeholder="请输入库存"
v-model={this.modalData.singleStock} v-model={this.modalData.singleStock}
></el-input> ></el-input>
@ -362,7 +461,11 @@ export default {
prop: "productAttributeList", prop: "productAttributeList",
type: "jsx", type: "jsx",
render: () => { render: () => {
return <el-button>添加其他属性</el-button>; return (
<el-button onClick={this.addAttribute}>
添加其他属性
</el-button>
);
}, },
}, },
]; ];
@ -378,10 +481,12 @@ export default {
render: () => { render: () => {
const change = (e) => { const change = (e) => {
console.log(e); console.log(e);
this.modalData.productPlace = e.join("-");
console.log(aa);
}; };
return ( return (
<el-cascader <el-cascader
v-model={this.modalData.productPlace} v-model={this.place}
onChange={change} onChange={change}
options={this.$api.mer_admin.getCityOptions()} options={this.$api.mer_admin.getCityOptions()}
{...{ {...{
@ -426,16 +531,27 @@ export default {
type: "jsx", type: "jsx",
render: () => { render: () => {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
console.log(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 ( return (
<el-upload <el-upload
class="upload-demo" class="upload-demo"
drag drag
action={this.$api.mer_admin.uploadFile()} action={this.$api.mer_admin.uploadFile()}
limit={1}
{...{ {...{
props: { props: {
"on-change": handleChange, "on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
}, },
}} }}
headers={{ headers={{
@ -468,14 +584,23 @@ export default {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
console.log(fileList); console.log(fileList);
}; };
const handleAvatarSuccess = (res) => {
this.modalData.productVideo = res.data;
};
const handleRemove = () => {
this.modalData.productVideo = "";
};
return ( return (
<el-upload <el-upload
class="upload-demo" class="upload-demo"
drag drag
action={this.$api.mer_admin.uploadFile()} action={this.$api.mer_admin.uploadFile()}
limit={1}
{...{ {...{
props: { props: {
"on-change": handleChange, "on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
}, },
}} }}
headers={{ headers={{
@ -514,7 +639,10 @@ export default {
} else if (this.currentPanel == "销售信息") { } else if (this.currentPanel == "销售信息") {
this.currentPanel = "其他信息"; this.currentPanel = "其他信息";
} else { } else {
console.log("请求接口"); console.log("请求接口", this.modalData);
this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
console.log(res);
});
} }
}, 300), }, 300),
}, },

277
src/views/modules/product/popup/add-specifications.vue
View File

@ -8,50 +8,75 @@
:modalHandles="modalHandles" :modalHandles="modalHandles"
> >
<div slot="dialog__content"> <div slot="dialog__content">
<div> <div v-for="(item, index) in AttributeData" :key="index">
<el-row> <el-row>
<el-input <el-input
style="width: 80%; margin: 0 20px 0 0" style="width: 80%; margin: 0 20px 0 0"
placeholder="请输入内容" placeholder="请输入属性"
v-model="input" v-model="item.attributeName"
clearable clearable
> >
</el-input> </el-input>
<el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button
@click="deleteAttribute(index)"
type="danger"
icon="el-icon-delete"
circle
></el-button>
</el-row> </el-row>
<el-row> <el-row>
<el-tag <el-tag
:key="tag" :key="tag"
v-for="tag in dynamicTags" v-for="tag in item.attributeValue"
closable closable
:disable-transitions="false" :disable-transitions="false"
@close="handleClose(tag)" @close="handleClose(index, tag)"
> >
{{ tag }} {{ tag }}
</el-tag> </el-tag>
<el-input <el-input
class="input-new-tag" class="input-new-tag"
v-if="inputVisible" v-if="item.inputVisible"
v-model="inputValue" v-model="inputValue"
ref="saveTagInput" :ref="`saveTagInput${index}`"
size="small" size="small"
@keyup.enter.native="handleInputConfirm" @keyup.enter.native="handleInputConfirm(index)"
@blur="handleInputConfirm" @blur="handleInputConfirm(index)"
> >
</el-input> </el-input>
<el-button <el-button
v-else v-else
class="button-new-tag" class="button-new-tag"
size="small" size="small"
@click="showInput" @click="showInput(index)"
>+新增规格</el-button >+新增规格</el-button
></el-row ></el-row
> >
</div> </div>
<el-row type="flex" justify="center"> <el-row type="flex" justify="center">
<el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row <el-button @click="addAttribute" type="text"
>+添加其他属性</el-button
></el-row
> >
<obj-table-plus
slot="dialog__after"
style="height: 50vh"
ref="oTable"
@query="queryTableData"
v-model="tableData"
:tableCols="tableCols"
:tableProp="tableProp"
:toolbarProp="toolbarProp"
:tableEvent="tableEvent"
:enableAutoQuery="false"
>
<!-- <div slot="tableTop" class="mb-2">
<el-button type="primary" size="mini" @click="calculation"
>计算属性</el-button
>
</div> -->
</obj-table-plus>
</div> </div>
</obj-modal> </obj-modal>
</div> </div>
@ -66,20 +91,33 @@ export default {
//监控对象数据 //监控对象数据
tableData: [], tableData: [],
//表格属性 //表格属性
tableProp: {}, //表格属性
tableProp: {
height: "auto",
border: true,
"auto-resize": false,
"print-config": {},
"row-config": { isCurrent: true, isHover: true },
"highlight-hover-row": true,
"highlight-current-row": true,
},
toolbarProp: {},
tableEvent: {},
modalConfig: { modalConfig: {
title: "属性", title: "属性",
show: false, show: false,
width: "80%", width: "80%",
}, },
modalData: {}, modalData: {},
AttributeData:[{ AttributeData: [
attributeName:"", {
attributeValue:[] attributeName: "",
}], // attributeValue: [],
inputVisible: false,
},
], //
input: "", input: "",
dynamicTags: [], dynamicTags: [],
inputVisible: false,
inputValue: "", inputValue: "",
}; };
}, },
@ -111,29 +149,164 @@ export default {
init(row) { init(row) {
this.modalData = row; this.modalData = row;
}, },
handleClose(tag) { handleClose(index, tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); this.AttributeData[index].attributeValue.splice(
this.AttributeData[index].attributeValue.indexOf(tag),
1
);
}, },
showInput() { //聚焦
this.inputVisible = true; showInput(index) {
this.$nextTick((_) => { console.log(index);
this.$refs.saveTagInput.$refs.input.focus();
this.AttributeData[index].inputVisible = true;
this.$nextTick(() => {
console.log(this.$refs[`saveTagInput${index}`]);
this.$refs[`saveTagInput${index}`][0].focus();
}); });
}, },
handleInputConfirm() { handleInputConfirm(index) {
let inputValue = this.inputValue; let inputValue = this.inputValue;
if (inputValue) { if (inputValue) {
this.dynamicTags.push(inputValue); this.AttributeData[index].attributeValue.push(inputValue);
} }
this.inputVisible = false; this.AttributeData[index].inputVisible = false;
this.inputValue = ""; this.inputValue = "";
this.calculation();
}, },
//添加属性 //添加属性
addAttribute() { addAttribute() {
console.log("添加属性"); this.AttributeData.push({
attributeName: "",
attributeValue: [],
inputVisible: false,
});
console.log(this.AttributeData);
},
//删除属性
deleteAttribute(index) {
this.AttributeData.splice(index, 1);
this.calculation();
},
//计算属性
calculation() {
let data = [];
let list = [];
for (let i = 0; i < this.AttributeData.length; i++) {
if (i == 0) {
data = this.AttributeData[i].attributeValue.map((item) => {
return this.AttributeData[i].attributeName + item;
});
} else {
data.forEach((it) => {
this.AttributeData[i].attributeValue.forEach((e) => {
let name = this.AttributeData[i].attributeName;
list.push(it + "/" + name + e);
});
});
data = list;
list = [];
}
}
this.tableData = data.map((item) => {
return {
attributeValue: item,
salePrice: "",
costPrice: "",
stockNum: "",
};
});
console.log(data);
}, },
}, },
computed: { computed: {
tableCols() {
return [
{ title: "序号", type: "seq", width: "60px", fixed: "left" },
{
title: "属性",
field: "attributeValue",
align: "center",
"min-width": "160px",
},
{
title: "价格",
field: "salePrice",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.salePrice}
placeholder="请输入价格"
></el-input-number>
</div>
);
},
},
{
title: "成本",
field: "costPrice",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.costPrice}
placeholder="请输入成本"
></el-input-number>
</div>
);
},
},
{
title: "库存",
field: "stockNum",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.stockNum}
placeholder="请输入库存"
></el-input-number>
</div>
);
},
},
{
title: "操作",
fixed: "right",
width: "150px",
type: "jsx",
align: "center",
render: (row) => {
let remove = () => {
this.tableData.splice(row.$rowIndex, 1);
};
return (
<el-popconfirm onConfirm={remove} title="确认删除？" class="ml-1">
<el-button type="danger" size="mini" slot="reference">
删除
</el-button>
</el-popconfirm>
);
},
},
];
},
modalHandles() { modalHandles() {
return [ return [
{ {
@ -147,7 +320,53 @@ export default {
type: "primary", type: "primary",
loading: this.isLoading, loading: this.isLoading,
// submit: true, // submit: true,
handle: () => {}, handle: () => {
let salePrice = ""; //价格范围
let stockNum = ""; //库存范围
let minSalePrice = Math.min.apply(
Math,
this.tableData.map((item) => {
return item.salePrice;
})
);
let maxSalePrice = Math.max.apply(
Math,
this.tableData.map((item) => {
return item.salePrice;
})
);
let minStockNum = Math.min.apply(
Math,
this.tableData.map((item) => {
return item.stockNum;
})
);
let maxStockNum = Math.max.apply(
Math,
this.tableData.map((item) => {
return item.stockNum;
})
);
if (minSalePrice == maxSalePrice) {
salePrice = maxSalePrice;
} else {
salePrice = minSalePrice + "~" + maxSalePrice;
}
if (minStockNum == maxStockNum) {
stockNum = maxStockNum;
} else {
stockNum = minStockNum + "~" + maxStockNum;
}
this.$emit(
"getSpecs",
this.tableData,
this.AttributeData,
salePrice,
stockNum
);
this.toggle();
},
}, },
]; ];
}, },