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

添加商品

This commit is contained in:
余同学 2024-08-09 18:04:10 +08:00
parent 332a0aa0da
commit 22516acb2b
3 changed files with 815 additions and 494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/modules/product/index.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div> <div>
<obj-table-plus ref="oTable" :tableCols="tableCols" @query="queryList" v-model="dataList"> <obj-table-plus
ref="oTable"
:tableCols="tableCols"
@query="queryList"
v-model="dataList"
>
<template slot="tableTop"> <template slot="tableTop">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="平台分类"> <el-form-item label="平台分类">
@ -16,11 +21,16 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品搜索"> <el-form-item label="商品搜索">
<el-input v-model="formInline.user" placeholder="商品搜索"></el-input> <el-input
v-model="formInline.user"
placeholder="商品搜索"
></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="$refs.oTable.reload()">查询</el-button> <el-button type="primary" @click="$refs.oTable.reload()"
>查询</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()"> <el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()">
@ -30,7 +40,9 @@
<el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane> <el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="mb-2"> <div class="mb-2">
<el-button type="primary" size="small" @click="addProduct">添加商品</el-button> <el-button type="primary" size="small" @click="addProduct"
>添加商品</el-button
>
</div> </div>
</template> </template>
</obj-table-plus> </obj-table-plus>
@ -39,7 +51,7 @@
</template> </template>
<script> <script>
import AddOrUpdate from "./popup/add-or-update.vue" import AddOrUpdate from "./popup/add-or-update.vue";
export default { export default {
components: { AddOrUpdate }, components: { AddOrUpdate },
data() { data() {
@ -47,63 +59,66 @@ export default {
activeName: "出售中", activeName: "出售中",
dataList: [], dataList: [],
formInline: { formInline: {
user: '', user: "",
region: '' region: "",
} },
} };
}, },
methods: { methods: {
addProduct() { addProduct() {
this.$refs.addOrUpdate.toggle().add() this.$refs.addOrUpdate.toggle().add();
}, },
queryList(pageNo, pageSize) { queryList(pageNo, pageSize) {
this.$api.mer_admin.getProductPage({ this.$api.mer_admin
.getProductPage({
p: { p: {
pageNumber: pageNo, pageNumber: pageNo,
pageSize: pageSize pageSize: pageSize,
} },
}) })
.then(res => { .then((res) => {
console.log(res); console.log(res);
this.$refs.oTable.complete(res.data.data.data, Number(res.data.data.total)); this.$refs.oTable.complete(
res.data.data.data,
Number(res.data.data.total)
);
}) })
.catch(err => { .catch((err) => {
this.$refs.oTable.complete(false); this.$refs.oTable.complete(false);
}) });
} },
}, },
computed: { computed: {
tableCols() { tableCols() {
return [ return [
{ {
title: "ID" title: "ID",
}, },
{ {
title: "商品图", title: "商品图",
}, },
{ {
title: "商品名称" title: "商品名称",
}, },
{ {
title: "商品售价" title: "商品售价",
}, },
{ {
title: "销量" title: "销量",
}, },
{ {
title: "库存" title: "库存",
}, },
{ {
title: "状态" title: "状态",
}, },
{ {
title: "操作" title: "操作",
}
]
}
}, },
} ];
},
},
};
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

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

@ -1,6 +1,14 @@
<template> <template>
<obj-modal class="obj-modal" ref="modal" labelWidth="100px" :modalCols="modalCols" :modalConfig="modalConfig" <div>
:modalData="modalData" :modalHandles="modalHandles"> <obj-modal
class="obj-modal"
ref="modal"
labelWidth="100px"
:modalCols="modalCols"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<template slot="dialog__before"> <template slot="dialog__before">
<el-tabs v-model="currentPanel"> <el-tabs v-model="currentPanel">
<el-tab-pane label="基础信息" name="基础信息"></el-tab-pane> <el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
@ -9,42 +17,46 @@
</el-tabs> </el-tabs>
</template> </template>
</obj-modal> </obj-modal>
<addSpecifications ref="addSpecifications"></addSpecifications>
</div>
</template> </template>
<script> <script>
import addSpecifications from "./add-specifications.vue";
import { debounce, cloneDeep } from "lodash"; import { debounce, cloneDeep } from "lodash";
export default { export default {
components: { addSpecifications },
data() { data() {
return { return {
currentPanel: '基础信息', currentPanel: "基础信息",
modalData: { modalData: {
"merchantId": null, merchantId: null,
"shopId": null, shopId: null,
"id": null, id: null,
"name": "", name: "",
"productCategoryId": "", productCategoryId: "",
"productPhotoList": [ productPhotoList: [
// { // {
// "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png", // "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
// "isMain": 1 // "isMain": 1
// } // }
], ],
"description": "", description: "",
"productUnit": "", productUnit: "",
"productPlace": "", productPlace: "",
//保质期 //保质期
"shelfLife": "", shelfLife: "",
//产品介绍图 //产品介绍图
"productIntroducePhoto": "", productIntroducePhoto: "",
//产品介绍视频 //产品介绍视频
"productVideo": "", productVideo: "",
//单价 //单价
"singlePrice": "", singlePrice: "",
//单库存 //单库存
"singleStock": "", singleStock: "",
//其他属性 //其他属性
"otherAttribute": "[{\"name\":\"颜色\",\"value\":\"黄色；屎黄色\"}]", otherAttribute: '[{"name":"颜色","value":"黄色；屎黄色"}]',
//折扣情况 //折扣情况
"discountActivity": { discountActivity: {
// "endTime": "2024-08-31 00:00:00", // "endTime": "2024-08-31 00:00:00",
// "id": "1821213180710957056", // "id": "1821213180710957056",
// "merchantId": "1818337963053297664", // "merchantId": "1818337963053297664",
@ -57,32 +69,32 @@ export default {
// "type": 0 // "type": 0
}, },
//是否折扣 //是否折扣
"isDiscount": 1, isDiscount: 1,
"marketId": null, marketId: null,
//最大消费 //最大消费
"maxCostPrice": 15, maxCostPrice: 15,
//市场最大消费 //市场最大消费
"maxMarketPrice": 35, maxMarketPrice: 35,
//最大售价 //最大售价
"maxSalePrice": 17.5, maxSalePrice: 17.5,
//最低售价 //最低售价
"minCostPrice": 10, minCostPrice: 10,
//市场最低售价 //市场最低售价
"minMarketPrice": 20, minMarketPrice: 20,
"minSalePrice": 10, minSalePrice: 10,
"salePrice": 20, salePrice: 20,
"sort": 999, sort: 999,
"status": "DOWN", status: "DOWN",
"stockNum": 200, stockNum: 200,
"specType": 1, specType: 1,
"productAttributeList": [ productAttributeList: [
// { // {
// "id": "1821213026050191360", // "id": "1821213026050191360",
// "attributeName": "重量", // "attributeName": "重量",
// "attributeValue": "1斤,2斤" // "attributeValue": "1斤,2斤"
// } // }
], ],
"productSpecificationList": [ productSpecificationList: [
// { // {
// "attributeValue": "重量1斤", // "attributeValue": "重量1斤",
// "costPrice": 10, // "costPrice": 10,
@ -115,7 +127,7 @@ export default {
// "_id": "重量2斤", // "_id": "重量2斤",
// "value": "售价￥17.5 成本￥15 库存100" // "value": "售价￥17.5 成本￥15 库存100"
// } // }
] ],
}, },
modalConfig: { modalConfig: {
title: "编辑商品", title: "编辑商品",
@ -123,6 +135,7 @@ export default {
width: "1300px", width: "1300px",
fullscreen: true, fullscreen: true,
}, },
fileList: [], //回显图片
}; };
}, },
mounted() {}, mounted() {},
@ -149,6 +162,10 @@ export default {
}; };
}, },
init(row) {}, init(row) {},
addSpecs() {
console.log("123");
this.$refs.addSpecifications.toggle().add();
},
}, },
computed: { computed: {
modalCols() { modalCols() {
@ -159,66 +176,118 @@ export default {
label: "商品图片", label: "商品图片",
prop: "productPhotoList", prop: "productPhotoList",
required: true, required: true,
rules: { required: true, message: '请上传商品图片', trigger: 'blur' }, rules: {
required: true,
message: "请上传商品图片",
trigger: "blur",
},
type: "jsx", type: "jsx",
render: () => { render: () => {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
console.log(fileList); // console.log(fileList);
};
} const handleAvatarSuccess = (res, file) => {
return <el-upload console.log(res);
this.modalData.productPhotoList.push(res);
console.log(this.modalData.productPhotoList);
};
const handleRemove = (file, fileList) => {
console.log(file, fileList);
this.modalData.productPhotoList = fileList.map((item) => {
return item.response;
});
console.log(this.modalData.productPhotoList);
};
return (
<el-upload
class="upload-demo" class="upload-demo"
drag drag
action={this.$api.mer_admin.uploadFile()} action={this.$api.mer_admin.uploadFile()}
{...{ {...{
props: { props: {
"on-change": handleChange, "on-change": handleChange,
"on-success": handleAvatarSuccess,
"on-remove": handleRemove,
}, },
}} }}
headers={{ headers={{
'token': 'Bearer ' + this.$cookie.get("token") token: "Bearer " + this.$cookie.get("token"),
}} }}
multiple={true} multiple={true}
file-list={this.fileList}
> >
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> 将文件拖到此处，或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload> </el-upload>
} );
},
}, },
{ {
label: "商品类目", label: "商品类目",
prop: "productCategoryId", prop: "productCategoryId",
type: "jsx", type: "jsx",
required: true, required: true,
rules: { required: true, message: '请选择商品类目', trigger: 'blur' }, rules: {
required: true,
message: "请选择商品类目",
trigger: "blur",
},
render: () => { render: () => {
return <el-select placeholder="请选择商品类目" v-model={this.modalData.productCategoryId}> return (
{this.getProductCategory.map(item => { <el-select
return <el-option label={item.name} value={item.id}></el-option> placeholder="请选择商品类目"
v-model={this.modalData.productCategoryId}
>
{this.getProductCategory.map((item) => {
return (
<el-option
label={item.name}
value={item.id}
></el-option>
);
})} })}
</el-select> </el-select>
} );
},
}, },
{ {
label: "商品名称", label: "商品名称",
prop: "name", prop: "name",
type: "Input", type: "Input",
required: true, required: true,
rules: { required: true, message: '请输入商品名称', trigger: 'blur' }, rules: {
placeholder: "请输入商品名称" required: true,
message: "请输入商品名称",
trigger: "blur",
},
placeholder: "请输入商品名称",
}, },
{ {
label: "商品描述", label: "商品描述",
prop: "description", prop: "description",
required: true, required: true,
rules: { required: true, message: '请填写商品描述', trigger: 'blur' }, rules: {
required: true,
message: "请填写商品描述",
trigger: "blur",
},
type: "jsx", type: "jsx",
render: () => { render: () => {
return <el-input type="textarea" v-model={this.modalData.description} placeholder="请简单描述，如别称、口感、用途等" /> return (
} <el-input
type="textarea"
v-model={this.modalData.description}
placeholder="请简单描述，如别称、口感、用途等"
/>
);
}, },
] },
];
break; break;
case "销售信息": case "销售信息":
return [ return [
@ -226,51 +295,77 @@ export default {
label: "销售单位", label: "销售单位",
prop: "productUnit", prop: "productUnit",
required: true, required: true,
rules: { required: true, message: '请选择销售单位', trigger: 'blur' }, rules: {
required: true,
message: "请选择销售单位",
trigger: "blur",
},
type: "jsx", type: "jsx",
render: () => { render: () => {
return <el-select v-model={this.modalData.productUnit} placeholder="请选择销售单位"> return (
{ <el-select
this.getSaleUnit.map(item => { v-model={this.modalData.productUnit}
return <el-option label={item.name} value={item.id}></el-option> placeholder="请选择销售单位"
}) >
} {this.getSaleUnit.map((item) => {
return (
<el-option
label={item.name}
value={item.id}
></el-option>
);
})}
</el-select> </el-select>
} );
},
}, },
{ {
label: "规格", label: "规格",
prop: "productSpecificationList", prop: "productSpecificationList",
type: "jsx", type: "jsx",
render: () => { render: () => {
return (
} <el-button onClick={this.addSpecs}>
若有多规格请在此配置
</el-button>
);
},
}, },
{ {
label: "价格", label: "价格",
prop: "singlePrice", prop: "singlePrice",
type: "jsx", type: "jsx",
render: () => { render: () => {
return <el-input placeholder="请输入价格" v-model={this.modalData.singlePrice}></el-input> return (
} <el-input
placeholder="请输入价格"
v-model={this.modalData.singlePrice}
></el-input>
);
},
}, },
{ {
label: "库存", label: "库存",
prop: "singleStock", prop: "singleStock",
type: "jsx", type: "jsx",
render: () => { render: () => {
return <el-input placeholder="请输入库存" v-model={this.modalData.singleStock}></el-input> return (
} <el-input
placeholder="请输入库存"
v-model={this.modalData.singleStock}
></el-input>
);
},
}, },
{ {
label: "其他属性", label: "其他属性",
prop: "productAttributeList", prop: "productAttributeList",
type: "jsx", type: "jsx",
render: () => { render: () => {
return <el-button>添加其他属性</el-button> return <el-button>添加其他属性</el-button>;
}
}, },
] },
];
break; break;
case "其他信息": case "其他信息":
return [ return [
@ -278,52 +373,63 @@ export default {
label: "产地", label: "产地",
prop: "productPlace", prop: "productPlace",
required: true, required: true,
rules: { required: true, message: '请选择产地', trigger: 'blur' }, rules: { required: true, message: "请选择产地", trigger: "blur" },
type: "jsx", type: "jsx",
render: () => { render: () => {
const change = (e) => { const change = (e) => {
console.log(e) console.log(e);
} };
return <el-cascader return (
<el-cascader
v-model={this.modalData.productPlace} v-model={this.modalData.productPlace}
onChange={change} onChange={change}
options={this.$api.mer_admin.getCityOptions()} options={this.$api.mer_admin.getCityOptions()}
{ {...{
...{
props: { props: {
checkStrictly: true checkStrictly: true,
} },
} }}
} clearable
clearable></el-cascader> ></el-cascader>
} );
},
}, },
{ {
label: "保质期", label: "保质期",
prop: "shelfLife", prop: "shelfLife",
type: "jsx", type: "jsx",
// required: true, // required: true,
rules: { required: true, message: '请填写保质期', trigger: 'blur' }, rules: {
required: true,
message: "请填写保质期",
trigger: "blur",
},
render: () => { render: () => {
return <el-input style="width:150px;" placeholder="请填写保质期" v-model={this.modalData.shelfLife}> return (
<el-input
style="width:150px;"
placeholder="请填写保质期"
v-model={this.modalData.shelfLife}
>
<div slot="suffix">天</div> <div slot="suffix">天</div>
</el-input> </el-input>
} );
},
}, },
{ {
label: "商品介绍图", label: "商品介绍图",
prop: "productIntroducePhoto", prop: "productIntroducePhoto",
type: "Input", type: "Input",
required: true, required: true,
rules: { required: true, message: '商品介绍图', trigger: 'blur' }, rules: { required: true, message: "商品介绍图", trigger: "blur" },
placeholder: "商品介绍图", placeholder: "商品介绍图",
type: "jsx", type: "jsx",
render: () => { render: () => {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
console.log(fileList); console.log(fileList);
};
} 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()}
@ -333,27 +439,37 @@ export default {
}, },
}} }}
headers={{ headers={{
'token': 'Bearer ' + this.$cookie.get("token") token: "Bearer " + this.$cookie.get("token"),
}} }}
multiple> multiple
>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> 将文件拖到此处，或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload> </el-upload>
} );
},
}, },
{ {
label: "商品视频", label: "商品视频",
prop: "productVideo", prop: "productVideo",
required: true, required: true,
rules: { required: true, message: '请填写商品描述', trigger: 'blur' }, rules: {
required: true,
message: "请填写商品描述",
trigger: "blur",
},
type: "jsx", type: "jsx",
render: () => { render: () => {
const handleChange = (file, fileList) => { const handleChange = (file, fileList) => {
console.log(fileList); console.log(fileList);
};
} 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()}
@ -363,31 +479,43 @@ export default {
}, },
}} }}
headers={{ headers={{
'token': 'Bearer ' + this.$cookie.get("token") token: "Bearer " + this.$cookie.get("token"),
}} }}
multiple> multiple
>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> 将文件拖到此处，或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload> </el-upload>
} );
}, },
] },
];
break; break;
default: default:
break; break;
} }
}, },
modalHandles() { modalHandles() {
return [ return [
{ {
label: "确定", label: this.currentPanel === "其他信息" ? "确定" : "下一步",
type: "primary", type: "primary",
loading: this.isLoading, loading: this.isLoading,
// submit: true, submit: true,
handle: debounce(() => { handle: debounce(() => {
if (this.currentPanel === "基础信息") {
this.currentPanel = "销售信息";
} else if (this.currentPanel == "销售信息") {
this.currentPanel = "其他信息";
} else {
console.log("请求接口");
}
}, 300), }, 300),
}, },
]; ];
@ -397,14 +525,15 @@ export default {
async getProductCategory() { async getProductCategory() {
let res = await this.$api.mer_admin.getProductCategory(); let res = await this.$api.mer_admin.getProductCategory();
return res.data.data; return res.data.data;
}, },
async getSaleUnit() { async getSaleUnit() {
let res = await this.$api.mer_admin.getSaleUnit({ shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId }); let res = await this.$api.mer_admin.getSaleUnit({
shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
});
console.log(res); console.log(res);
return res.data.data; return res.data.data;
} },
}, },
}; };
</script> </script>

177
src/views/modules/product/popup/add-specifications.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<div>
<obj-modal
ref="modal"
labelWidth="150px"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<div slot="dialog__content">
<div>
<el-row>
<el-input
style="width: 80%; margin: 0 20px 0 0"
placeholder="请输入内容"
v-model="input"
clearable
>
</el-input>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<el-row>
<el-tag
:key="tag"
v-for="tag in dynamicTags"
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-row
>
</div>
<el-row type="flex" justify="center">
<el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row
>
</div>
</obj-modal>
</div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
components: {},
data() {
return {
isAdd: true,
//监控对象数据
tableData: [],
//表格属性
tableProp: {},
modalConfig: {
title: "属性",
show: false,
width: "80%",
},
modalData: {},
AttributeData:[{
attributeName:"",
attributeValue:[]
}], //
input: "",
dynamicTags: [],
inputVisible: false,
inputValue: "",
};
},
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.modal.resetFields();
});
this.isAdd = true;
},
update: () => {
this.isAdd = false;
},
};
},
init(row) {
this.modalData = row;
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = "";
},
//添加属性
addAttribute() {
console.log("添加属性");
},
},
computed: {
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: this.isAdd ? "确认添加" : "确认修改",
type: "primary",
loading: this.isLoading,
// submit: true,
handle: () => {},
},
];
},
},
asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.el-row {
margin-bottom: 10px;
}
.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>