添加商品
This commit is contained in:
余同学
parent
332a0aa0da
commit
22516acb2b
|
|
@ -1,109 +1,124 @@
|
|||
<template>
|
||||
<div>
|
||||
<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="平台分类">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户分类">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品搜索">
|
||||
<el-input v-model="formInline.user" placeholder="商品搜索"></el-input>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<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="平台分类">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户分类">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品搜索">
|
||||
<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-form-item>
|
||||
</el-form>
|
||||
<el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()">
|
||||
<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-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="mb-2">
|
||||
<el-button type="primary" size="small" @click="addProduct">添加商品</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</obj-table-plus>
|
||||
<add-or-update ref="addOrUpdate"></add-or-update>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<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()">
|
||||
<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-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="mb-2">
|
||||
<el-button type="primary" size="small" @click="addProduct"
|
||||
>添加商品</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</obj-table-plus>
|
||||
<add-or-update ref="addOrUpdate"></add-or-update>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from "./popup/add-or-update.vue"
|
||||
import AddOrUpdate from "./popup/add-or-update.vue";
|
||||
export default {
|
||||
components:{AddOrUpdate},
|
||||
data() {
|
||||
return {
|
||||
activeName: "出售中",
|
||||
dataList: [],
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
components: { AddOrUpdate },
|
||||
data() {
|
||||
return {
|
||||
activeName: "出售中",
|
||||
dataList: [],
|
||||
formInline: {
|
||||
user: "",
|
||||
region: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addProduct() {
|
||||
this.$refs.addOrUpdate.toggle().add();
|
||||
},
|
||||
methods: {
|
||||
addProduct(){
|
||||
this.$refs.addOrUpdate.toggle().add()
|
||||
queryList(pageNo, pageSize) {
|
||||
this.$api.mer_admin
|
||||
.getProductPage({
|
||||
p: {
|
||||
pageNumber: pageNo,
|
||||
pageSize: pageSize,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.$refs.oTable.complete(
|
||||
res.data.data.data,
|
||||
Number(res.data.data.total)
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$refs.oTable.complete(false);
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableCols() {
|
||||
return [
|
||||
{
|
||||
title: "ID",
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
this.$api.mer_admin.getProductPage({
|
||||
p: {
|
||||
pageNumber: pageNo,
|
||||
pageSize: pageSize
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.$refs.oTable.complete(res.data.data.data, Number(res.data.data.total));
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
this.$refs.oTable.complete(false);
|
||||
})
|
||||
}
|
||||
{
|
||||
title: "商品图",
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
},
|
||||
{
|
||||
title: "商品售价",
|
||||
},
|
||||
{
|
||||
title: "销量",
|
||||
},
|
||||
{
|
||||
title: "库存",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
},
|
||||
];
|
||||
},
|
||||
computed: {
|
||||
tableCols() {
|
||||
return [
|
||||
{
|
||||
title: "ID"
|
||||
},
|
||||
{
|
||||
title: "商品图",
|
||||
},
|
||||
{
|
||||
title: "商品名称"
|
||||
},
|
||||
{
|
||||
title: "商品售价"
|
||||
},
|
||||
{
|
||||
title: "销量"
|
||||
},
|
||||
{
|
||||
title: "库存"
|
||||
},
|
||||
{
|
||||
title: "状态"
|
||||
},
|
||||
{
|
||||
title: "操作"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,417 +1,546 @@
|
|||
<template>
|
||||
<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>
|
||||
<el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
|
||||
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</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 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 ref="addSpecifications"></addSpecifications>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import addSpecifications from "./add-specifications.vue";
|
||||
import { debounce, cloneDeep } from "lodash";
|
||||
export default {
|
||||
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",
|
||||
"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,
|
||||
},
|
||||
};
|
||||
components: { addSpecifications },
|
||||
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",
|
||||
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: [], //回显图片
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
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.row));
|
||||
}
|
||||
return {
|
||||
add: (item) => {
|
||||
console.log(item);
|
||||
this.isAdd = true;
|
||||
},
|
||||
update: (row) => {
|
||||
this.modalData = row;
|
||||
this.isAdd = false;
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
toggle(e) {
|
||||
if (this.modalConfig.show == false) {
|
||||
this.modalConfig.show = true;
|
||||
init(row) {},
|
||||
addSpecs() {
|
||||
console.log("123");
|
||||
this.$refs.addSpecifications.toggle().add();
|
||||
},
|
||||
},
|
||||
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) => {
|
||||
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"),
|
||||
}}
|
||||
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>
|
||||
</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,
|
||||
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"
|
||||
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.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>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "库存",
|
||||
prop: "singleStock",
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
return (
|
||||
<el-input
|
||||
placeholder="请输入库存"
|
||||
v-model={this.modalData.singleStock}
|
||||
></el-input>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "其他属性",
|
||||
prop: "productAttributeList",
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
return <el-button>添加其他属性</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);
|
||||
};
|
||||
return (
|
||||
<el-cascader
|
||||
v-model={this.modalData.productPlace}
|
||||
onChange={change}
|
||||
options={this.$api.mer_admin.getCityOptions()}
|
||||
{...{
|
||||
props: {
|
||||
checkStrictly: true,
|
||||
},
|
||||
}}
|
||||
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);
|
||||
};
|
||||
return (
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action={this.$api.mer_admin.uploadFile()}
|
||||
{...{
|
||||
props: {
|
||||
"on-change": handleChange,
|
||||
},
|
||||
}}
|
||||
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);
|
||||
};
|
||||
return (
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action={this.$api.mer_admin.uploadFile()}
|
||||
{...{
|
||||
props: {
|
||||
"on-change": handleChange,
|
||||
},
|
||||
}}
|
||||
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 {
|
||||
this.modalConfig.show = false;
|
||||
console.log("请求接口");
|
||||
}
|
||||
if (e) {
|
||||
console.log(e);
|
||||
this.init(cloneDeep(e.row));
|
||||
}
|
||||
return {
|
||||
add: (item) => {
|
||||
console.log(item);
|
||||
this.isAdd = true;
|
||||
},
|
||||
update: (row) => {
|
||||
this.modalData = row;
|
||||
this.isAdd = false;
|
||||
},
|
||||
};
|
||||
}, 300),
|
||||
},
|
||||
init(row) { },
|
||||
];
|
||||
},
|
||||
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);
|
||||
|
||||
}
|
||||
return <el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action={this.$api.mer_admin.uploadFile()}
|
||||
{...{
|
||||
props: {
|
||||
"on-change": handleChange,
|
||||
},
|
||||
}}
|
||||
headers={{
|
||||
'token': 'Bearer ' + this.$cookie.get("token")
|
||||
}}
|
||||
multiple={true}
|
||||
>
|
||||
<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,
|
||||
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" 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.id}></el-option>
|
||||
})
|
||||
}
|
||||
</el-select>
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "规格",
|
||||
prop: "productSpecificationList",
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "价格",
|
||||
prop: "singlePrice",
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
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>
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "其他属性",
|
||||
prop: "productAttributeList",
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
return <el-button>添加其他属性</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)
|
||||
}
|
||||
return <el-cascader
|
||||
v-model={this.modalData.productPlace}
|
||||
onChange={change}
|
||||
options={this.$api.mer_admin.getCityOptions()}
|
||||
{
|
||||
...{
|
||||
props: {
|
||||
checkStrictly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
|
||||
}
|
||||
return <el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action={this.$api.mer_admin.uploadFile()}
|
||||
{...{
|
||||
props: {
|
||||
"on-change": handleChange,
|
||||
},
|
||||
}}
|
||||
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);
|
||||
|
||||
}
|
||||
return <el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action={this.$api.mer_admin.uploadFile()}
|
||||
{...{
|
||||
props: {
|
||||
"on-change": handleChange,
|
||||
},
|
||||
}}
|
||||
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: "确定",
|
||||
type: "primary",
|
||||
loading: this.isLoading,
|
||||
// submit: true,
|
||||
handle: debounce(() => {
|
||||
}, 300),
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
asyncComputed: {
|
||||
async getProductCategory() {
|
||||
let res = await this.$api.mer_admin.getProductCategory();
|
||||
return res.data.data;
|
||||
},
|
||||
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);
|
||||
|
||||
},
|
||||
async getSaleUnit() {
|
||||
let res = await this.$api.mer_admin.getSaleUnit({ shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId });
|
||||
console.log(res);
|
||||
|
||||
return res.data.data;
|
||||
}
|
||||
return res.data.data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.obj-modal ::v-deep {
|
||||
.el-dialog__body {
|
||||
padding: 0 30px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue