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

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

@ -1,6 +1,11 @@
<template>
<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">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="平台分类">
@ -16,11 +21,16 @@
</el-select>
</el-form-item>
<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-button type="primary" @click="$refs.oTable.reload()">查询</el-button>
<el-button type="primary" @click="$refs.oTable.reload()"
>查询</el-button
>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()">
@ -30,7 +40,9 @@
<el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
</el-tabs>
<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>
</template>
</obj-table-plus>
@ -39,71 +51,74 @@
</template>
<script>
import AddOrUpdate from "./popup/add-or-update.vue"
import AddOrUpdate from "./popup/add-or-update.vue";
export default {
components:{AddOrUpdate},
components: { AddOrUpdate },
data() {
return {
activeName: "出售中",
dataList: [],
formInline: {
user: '',
region: ''
}
}
user: "",
region: "",
},
};
},
methods: {
addProduct(){
this.$refs.addOrUpdate.toggle().add()
addProduct() {
this.$refs.addOrUpdate.toggle().add();
},
queryList(pageNo, pageSize) {
this.$api.mer_admin.getProductPage({
this.$api.mer_admin
.getProductPage({
p: {
pageNumber: pageNo,
pageSize: pageSize
}
pageSize: pageSize,
},
})
.then(res => {
.then((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);
})
}
});
},
},
computed: {
tableCols() {
return [
{
title: "ID"
title: "ID",
},
{
title: "商品图",
},
{
title: "商品名称"
title: "商品名称",
},
{
title: "商品售价"
title: "商品售价",
},
{
title: "销量"
title: "销量",
},
{
title: "库存"
title: "库存",
},
{
title: "状态"
title: "状态",
},
{
title: "操作"
}
]
}
title: "操作",
},
}
];
},
},
};
</script>
<style lang="scss" scoped></style>

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

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