DMJS-IT
/
merchant-web
12
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

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

@ -1,109 +1,124 @@
<template> <template>
<div> <div>
<obj-table-plus ref="oTable" :tableCols="tableCols" @query="queryList" v-model="dataList"> <obj-table-plus
<template slot="tableTop"> ref="oTable"
<el-form :inline="true" :model="formInline" class="demo-form-inline"> :tableCols="tableCols"
<el-form-item label="平台分类"> @query="queryList"
<el-select v-model="formInline.region" placeholder="活动区域"> v-model="dataList"
<el-option label="区域一" value="shanghai"></el-option> >
<el-option label="区域二" value="beijing"></el-option> <template slot="tableTop">
</el-select> <el-form :inline="true" :model="formInline" class="demo-form-inline">
</el-form-item> <el-form-item label="平台分类">
<el-form-item label="商户分类"> <el-select v-model="formInline.region" placeholder="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域"> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option>
<el-option label="区域二" value="beijing"></el-option> </el-select>
</el-select> </el-form-item>
</el-form-item> <el-form-item label="商户分类">
<el-form-item label="商品搜索"> <el-select v-model="formInline.region" placeholder="活动区域">
<el-input v-model="formInline.user" placeholder="商品搜索"></el-input> <el-option label="区域一" value="shanghai"></el-option>
</el-form-item> <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-form-item>
<el-button type="primary" @click="$refs.oTable.reload()">查询</el-button> <el-button type="primary" @click="$refs.oTable.reload()"
</el-form-item> >查询</el-button
</el-form> >
<el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()"> </el-form-item>
<el-tab-pane label="出售中" name="出售中"></el-tab-pane> </el-form>
<el-tab-pane label="仓库中" name="仓库中"></el-tab-pane> <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> <el-tab-pane label="已售罄" name="已售罄"></el-tab-pane>
<div class="mb-2"> <el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
<el-button type="primary" size="small" @click="addProduct">添加商品</el-button> </el-tabs>
</div> <div class="mb-2">
</template> <el-button type="primary" size="small" @click="addProduct"
</obj-table-plus> >添加商品</el-button
<add-or-update ref="addOrUpdate"></add-or-update> >
</div> </div>
</template>
</obj-table-plus>
<add-or-update ref="addOrUpdate"></add-or-update>
</div>
</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() {
return { return {
activeName: "出售中", activeName: "出售中",
dataList: [], dataList: [],
formInline: { formInline: {
user: '', user: "",
region: '' region: "",
} },
} };
},
methods: {
addProduct() {
this.$refs.addOrUpdate.toggle().add();
}, },
methods: { queryList(pageNo, pageSize) {
addProduct(){ this.$api.mer_admin
this.$refs.addOrUpdate.toggle().add() .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({ title: "商品图",
p: { },
pageNumber: pageNo, {
pageSize: pageSize title: "商品名称",
} },
}) {
.then(res => { title: "商品售价",
console.log(res); },
this.$refs.oTable.complete(res.data.data.data, Number(res.data.data.total)); {
title: "销量",
}) },
.catch(err => { {
this.$refs.oTable.complete(false); title: "库存",
}) },
} {
title: "状态",
},
{
title: "操作",
},
];
}, },
computed: { },
tableCols() { };
return [
{
title: "ID"
},
{
title: "商品图",
},
{
title: "商品名称"
},
{
title: "商品售价"
},
{
title: "销量"
},
{
title: "库存"
},
{
title: "状态"
},
{
title: "操作"
}
]
}
},
}
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

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

@ -1,417 +1,546 @@
<template> <template>
<obj-modal class="obj-modal" ref="modal" labelWidth="100px" :modalCols="modalCols" :modalConfig="modalConfig" <div>
:modalData="modalData" :modalHandles="modalHandles"> <obj-modal
<template slot="dialog__before"> class="obj-modal"
<el-tabs v-model="currentPanel"> ref="modal"
<el-tab-pane label="基础信息" name="基础信息"></el-tab-pane> labelWidth="100px"
<el-tab-pane label="销售信息" name="销售信息"></el-tab-pane> :modalCols="modalCols"
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane> :modalConfig="modalConfig"
</el-tabs> :modalData="modalData"
</template> :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> </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 {
data() { components: { addSpecifications },
return { data() {
currentPanel: '基础信息', return {
modalData: { currentPanel: "基础信息",
"merchantId": null, modalData: {
"shopId": null, merchantId: null,
"id": null, shopId: null,
"name": "", id: null,
"productCategoryId": "", name: "",
"productPhotoList": [ productCategoryId: "",
// { productPhotoList: [
// "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png", // {
// "isMain": 1 // "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
// } // "isMain": 1
], // }
"description": "", ],
"productUnit": "", description: "",
"productPlace": "", productUnit: "",
//保质期 productPlace: "",
"shelfLife": "", //保质期
//产品介绍图 shelfLife: "",
"productIntroducePhoto": "", //产品介绍图
//产品介绍视频 productIntroducePhoto: "",
"productVideo": "", //产品介绍视频
//单价 productVideo: "",
"singlePrice": "", //单价
//单库存 singlePrice: "",
"singleStock": "", //单库存
//其他属性 singleStock: "",
"otherAttribute": "[{\"name\":\"颜色\",\"value\":\"黄色；屎黄色\"}]", //其他属性
//折扣情况 otherAttribute: '[{"name":"颜色","value":"黄色；屎黄色"}]',
"discountActivity": { //折扣情况
// "endTime": "2024-08-31 00:00:00", discountActivity: {
// "id": "1821213180710957056", // "endTime": "2024-08-31 00:00:00",
// "merchantId": "1818337963053297664", // "id": "1821213180710957056",
// "ruleObject": { // "merchantId": "1818337963053297664",
// "discount": 5, // "ruleObject": {
// "limitCount": 99 // "discount": 5,
// }, // "limitCount": 99
// "shopId": "1818337963523059712", // },
// "startTime": "2024-08-01 00:00:00", // "shopId": "1818337963523059712",
// "type": 0 // "startTime": "2024-08-01 00:00:00",
}, // "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, minMarketPrice: 20,
"salePrice": 20, minSalePrice: 10,
"sort": 999, salePrice: 20,
"status": "DOWN", sort: 999,
"stockNum": 200, status: "DOWN",
"specType": 1, stockNum: 200,
"productAttributeList": [ specType: 1,
// { productAttributeList: [
// "id": "1821213026050191360", // {
// "attributeName": "重量", // "id": "1821213026050191360",
// "attributeValue": "1斤,2斤" // "attributeName": "重量",
// } // "attributeValue": "1斤,2斤"
], // }
"productSpecificationList": [ ],
// { productSpecificationList: [
// "attributeValue": "重量1斤", // {
// "costPrice": 10, // "attributeValue": "重量1斤",
// "id": "1821213026083745792", // "costPrice": 10,
// "isDiscount": 1, // "id": "1821213026083745792",
// "limitCount": 99, // "isDiscount": 1,
// "marketPrice": 20, // "limitCount": 99,
// "productId": "1821207097380515840", // "marketPrice": 20,
// "saleNum": 0, // "productId": "1821207097380515840",
// "salePrice": 10, // "saleNum": 0,
// "stockNum": 100, // "salePrice": 10,
// "virtualSaleNum": 0, // "stockNum": 100,
// "warnStockNum": 0, // "virtualSaleNum": 0,
// "_id": "重量1斤", // "warnStockNum": 0,
// "value": "售价￥10 成本￥10 库存100" // "_id": "重量1斤",
// }, // "value": "售价￥10 成本￥10 库存100"
// { // },
// "attributeValue": "重量2斤", // {
// "costPrice": 15, // "attributeValue": "重量2斤",
// "id": "1821213026083745793", // "costPrice": 15,
// "isDiscount": 1, // "id": "1821213026083745793",
// "limitCount": 99, // "isDiscount": 1,
// "marketPrice": 35, // "limitCount": 99,
// "productId": "1821207097380515840", // "marketPrice": 35,
// "saleNum": 0, // "productId": "1821207097380515840",
// "salePrice": 17.5, // "saleNum": 0,
// "stockNum": 100, // "salePrice": 17.5,
// "virtualSaleNum": 0, // "stockNum": 100,
// "warnStockNum": 0, // "virtualSaleNum": 0,
// "_id": "重量2斤", // "warnStockNum": 0,
// "value": "售价￥17.5 成本￥15 库存100" // "_id": "重量2斤",
// } // "value": "售价￥17.5 成本￥15 库存100"
] // }
}, ],
modalConfig: { },
title: "编辑商品", modalConfig: {
show: false, title: "编辑商品",
width: "1300px", show: false,
fullscreen: true, 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() { }, init(row) {},
methods: { addSpecs() {
toggle(e) { console.log("123");
if (this.modalConfig.show == false) { this.$refs.addSpecifications.toggle().add();
this.modalConfig.show = true; },
},
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 { } else {
this.modalConfig.show = false; console.log("请求接口");
} }
if (e) { }, 300),
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;
},
};
}, },
init(row) { }, ];
}, },
computed: { },
modalCols() { asyncComputed: {
switch (this.currentPanel) { async getProductCategory() {
case "基础信息": let res = await this.$api.mer_admin.getProductCategory();
return [ return res.data.data;
{
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 getSaleUnit() {
async getProductCategory() { let res = await this.$api.mer_admin.getSaleUnit({
let res = await this.$api.mer_admin.getProductCategory(); shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
return res.data.data; });
console.log(res);
}, 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.obj-modal ::v-deep { .obj-modal ::v-deep {
.el-dialog__body { .el-dialog__body {
padding: 0 30px; padding: 0 30px;
} }
} }
</style> </style>

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>