Merge branch 'master' of http://60.204.229.151:20080/chenkangxu/merchant-web
This commit is contained in:
commit
579e4d860e
|
@ -1,5 +1,5 @@
|
||||||
import $http from '@/utils/httpRequest.js'
|
import $http from "@/utils/httpRequest.js";
|
||||||
import city_data from '@/utils/country-level2-data.js'
|
import city_data from "@/utils/country-level2-data.js";
|
||||||
|
|
||||||
export const mer_admin = {
|
export const mer_admin = {
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="height: calc(100vh - 200px)">
|
||||||
<obj-table-plus
|
<obj-table-plus
|
||||||
ref="oTable"
|
ref="oTable"
|
||||||
|
style="height: 100%"
|
||||||
:tableCols="tableCols"
|
:tableCols="tableCols"
|
||||||
|
:tableProp="tableProp"
|
||||||
@query="queryList"
|
@query="queryList"
|
||||||
v-model="dataList"
|
v-model="dataList"
|
||||||
|
:tableEvent="tableEvent"
|
||||||
>
|
>
|
||||||
<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">
|
||||||
|
@ -42,17 +45,40 @@
|
||||||
<el-button type="primary" size="small" @click="addProduct"
|
<el-button type="primary" size="small" @click="addProduct"
|
||||||
>添加商品</el-button
|
>添加商品</el-button
|
||||||
>
|
>
|
||||||
|
<el-button
|
||||||
|
:disabled="selectList.length <= 0"
|
||||||
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
@click="deleteProduct"
|
||||||
|
>批量删除</el-button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</obj-table-plus>
|
</obj-table-plus>
|
||||||
<add-or-update ref="addOrUpdate"></add-or-update>
|
<!-- 添加或编辑 -->
|
||||||
|
<add-or-update
|
||||||
|
@queryList="$refs.oTable.reload()"
|
||||||
|
ref="addOrUpdate"
|
||||||
|
></add-or-update>
|
||||||
|
<!-- 改价格 -->
|
||||||
|
<AddPrice ref="AddPrice" @queryList="$refs.oTable.reload()"></AddPrice>
|
||||||
|
<!-- 改库存 -->
|
||||||
|
<addStock ref="addStock" @queryList="$refs.oTable.reload()"></addStock>
|
||||||
|
<!-- 打折扣 -->
|
||||||
|
<AddDiscount
|
||||||
|
ref="AddDiscount"
|
||||||
|
@queryList="$refs.oTable.reload()"
|
||||||
|
></AddDiscount>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import AddDiscount from "./popup/add-discount.vue";
|
||||||
|
import AddPrice from "./popup/add-price.vue";
|
||||||
import AddOrUpdate from "./popup/add-or-update.vue";
|
import AddOrUpdate from "./popup/add-or-update.vue";
|
||||||
|
import addStock from "./popup/add-stock.vue";
|
||||||
export default {
|
export default {
|
||||||
components: { AddOrUpdate },
|
components: { AddOrUpdate, AddPrice, addStock, AddDiscount },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: "出售中",
|
activeName: "出售中",
|
||||||
|
@ -61,13 +87,42 @@ export default {
|
||||||
user: "",
|
user: "",
|
||||||
region: "",
|
region: "",
|
||||||
},
|
},
|
||||||
|
tableProp: {
|
||||||
|
"auto-resize": true,
|
||||||
|
border: true,
|
||||||
|
height: "auto",
|
||||||
|
"row-id": "id",
|
||||||
|
},
|
||||||
productFilterType: "SALE",
|
productFilterType: "SALE",
|
||||||
|
selectList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addProduct() {
|
addProduct() {
|
||||||
this.$refs.addOrUpdate.toggle().add();
|
this.$refs.addOrUpdate.toggle().add();
|
||||||
},
|
},
|
||||||
|
deleteProduct() {
|
||||||
|
console.log(this.selectList);
|
||||||
|
let integers = this.selectList.map((item) => {
|
||||||
|
return item.id;
|
||||||
|
});
|
||||||
|
this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$api.mer_admin.BatchDeleteProducts(integers).then((res) => {
|
||||||
|
this.$refs.oTable.reload();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消删除",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
queryList(pageNo, pageSize) {
|
queryList(pageNo, pageSize) {
|
||||||
this.$api.mer_admin
|
this.$api.mer_admin
|
||||||
.getProductPage({
|
.getProductPage({
|
||||||
|
@ -109,32 +164,184 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
tableCols() {
|
tableCols() {
|
||||||
return [
|
return [
|
||||||
{
|
{ type: "checkbox", width: "60px", fixed: "left" },
|
||||||
title: "ID",
|
// { type: "seq", width: "60px", align: "center", title: "序号" },
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "商品图",
|
title: "商品图",
|
||||||
|
field: "productPhotoList",
|
||||||
|
align: "center",
|
||||||
|
width: "160px",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
if (row.productPhotoList.length > 0) {
|
||||||
|
return <el-image src={row.productPhotoList[0].url}></el-image>;
|
||||||
|
} else {
|
||||||
|
return <span>暂无商品图</span>;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "商品名称",
|
title: "商品名称",
|
||||||
|
align: "center",
|
||||||
|
field: "name",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "商品售价",
|
title: "商品售价",
|
||||||
|
align: "center",
|
||||||
|
field: "minSalePrice",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
if (row.minSalePrice == row.maxSalePrice) {
|
||||||
|
return <span>¥{row.minSalePrice}</span>;
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
¥{row.minSalePrice}~¥{row.maxSalePrice}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "折扣",
|
||||||
|
align: "center",
|
||||||
|
field: "discountActivity",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
if (row.discountActivity) {
|
||||||
|
return <span>{row.discountActivity.ruleObject.discount}折</span>;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "销量",
|
title: "销量",
|
||||||
|
align: "center",
|
||||||
|
field: "saleNum",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "库存",
|
title: "库存",
|
||||||
|
align: "center",
|
||||||
|
field: "stockNum",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "状态",
|
title: "状态",
|
||||||
|
// fixed: "right",
|
||||||
|
type: "jsx",
|
||||||
|
align: "center",
|
||||||
|
"title-suffix": {
|
||||||
|
message: "点击上架/下架切换责任书状态",
|
||||||
|
icon: "vxe-icon-question-circle-fill",
|
||||||
|
},
|
||||||
|
render: ({ row }) => {
|
||||||
|
let Enable = () => {
|
||||||
|
let data = {
|
||||||
|
ids: [row.id],
|
||||||
|
status: "UP",
|
||||||
|
};
|
||||||
|
if (row.status == "UP") {
|
||||||
|
data.status = "DOWN";
|
||||||
|
} else {
|
||||||
|
data.status = "UP";
|
||||||
|
}
|
||||||
|
this.$api.mer_admin.putOnShelvesProducts(data).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.$refs.oTable.reload();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<el-popconfirm
|
||||||
|
title={
|
||||||
|
row.status == "DOWN"
|
||||||
|
? "当前为下架状态,是否更改为上架状态?"
|
||||||
|
: "当前为上架状态,是否更改为下架状态?"
|
||||||
|
}
|
||||||
|
confirmButtonText={
|
||||||
|
row.status == "DOWN" ? "确认上架" : "确认下架"
|
||||||
|
}
|
||||||
|
onConfirm={Enable}
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
slot="reference"
|
||||||
|
size="mini"
|
||||||
|
plain
|
||||||
|
type={row.status == "DOWN" ? "info" : "success"}
|
||||||
|
>
|
||||||
|
{row.status == "DOWN" ? "已下架" : "上架中"}
|
||||||
|
</el-button>
|
||||||
|
</el-popconfirm>
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
type: "jsx",
|
||||||
|
align: "center",
|
||||||
|
width: "340px",
|
||||||
|
render: ({ row }) => {
|
||||||
|
let edit = () => {
|
||||||
|
this.$refs.addOrUpdate.toggle(row).update();
|
||||||
|
};
|
||||||
|
let priceAdjustment = () => {
|
||||||
|
console.log(row);
|
||||||
|
this.$refs.AddPrice.toggle(row).update();
|
||||||
|
};
|
||||||
|
let changeInventory = () => {
|
||||||
|
this.$refs.addStock.toggle(row).update();
|
||||||
|
};
|
||||||
|
let setDiscounts = () => {
|
||||||
|
this.$refs.AddDiscount.toggle(row).update();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
disabled={row.status != "DOWN"}
|
||||||
|
type="primary"
|
||||||
|
onClick={edit}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
disabled={row.status != "DOWN"}
|
||||||
|
type="primary"
|
||||||
|
onClick={priceAdjustment}
|
||||||
|
>
|
||||||
|
改价
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
disabled={row.status != "DOWN"}
|
||||||
|
type="primary"
|
||||||
|
onClick={changeInventory}
|
||||||
|
>
|
||||||
|
改库存
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
disabled={row.status != "DOWN"}
|
||||||
|
type="primary"
|
||||||
|
onClick={setDiscounts}
|
||||||
|
>
|
||||||
|
设置折扣
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
tableEvent() {
|
||||||
|
return {
|
||||||
|
"checkbox-all": ({ records, reserves }) => {
|
||||||
|
this.selectList = [...records, ...reserves];
|
||||||
|
},
|
||||||
|
"checkbox-change": ({ records, reserves }) => {
|
||||||
|
this.selectList = [...records, ...reserves];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -111,15 +111,34 @@ export default {
|
||||||
this.init(cloneDeep(e.row));
|
this.init(cloneDeep(e.row));
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
add: () => {
|
add: (data) => {
|
||||||
this.modalConfig.title = "添加属性";
|
this.modalConfig.title = "添加属性";
|
||||||
this.$nextTick(() => {
|
if (data.length == 0) {
|
||||||
this.modalData = {};
|
this.ruleForm = {
|
||||||
this.$refs.ruleForm.resetFields();
|
name: "",
|
||||||
});
|
value: [],
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.ruleForm = {
|
||||||
|
name: data[0].name,
|
||||||
|
value: data[0].value.split(","),
|
||||||
|
};
|
||||||
|
}
|
||||||
this.isAdd = true;
|
this.isAdd = true;
|
||||||
},
|
},
|
||||||
update: () => {
|
update: (data) => {
|
||||||
|
console.log(data);
|
||||||
|
if (data.length == 0) {
|
||||||
|
this.ruleForm = {
|
||||||
|
name: "",
|
||||||
|
value: [],
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.ruleForm = {
|
||||||
|
name: data[0].name,
|
||||||
|
value: data[0].value.split(","),
|
||||||
|
};
|
||||||
|
}
|
||||||
this.isAdd = false;
|
this.isAdd = false;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,227 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<obj-modal
|
||||||
|
ref="modal"
|
||||||
|
labelWidth="150px"
|
||||||
|
:modalCols="modalCols"
|
||||||
|
:modalConfig="modalConfig"
|
||||||
|
:modalData="modalData"
|
||||||
|
:modalHandles="modalHandles"
|
||||||
|
>
|
||||||
|
<template slot="dialog__after">
|
||||||
|
<div class="introduce">
|
||||||
|
<el-divider>活动介绍</el-divider>
|
||||||
|
<span>对商品创建折扣活动,用户购买指定商品,享受商家定义折扣优惠 </span>
|
||||||
|
<el-divider>创建建议</el-divider>
|
||||||
|
<div>
|
||||||
|
<p class="introduce-center">1、拥有折扣活动的商品不能再添加折扣</p>
|
||||||
|
<p class="introduce-center">
|
||||||
|
2、挑选口碑好,毛利率高,或急需倾销的商品
|
||||||
|
</p>
|
||||||
|
<p class="introduce-center">
|
||||||
|
3、折扣商品将在店铺折扣分类专区下集中展示
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</obj-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { debounce, cloneDeep } from "lodash";
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isAdd: true,
|
||||||
|
//表格属性
|
||||||
|
modalConfig: {
|
||||||
|
title: "设置折扣",
|
||||||
|
show: false,
|
||||||
|
width: "60%",
|
||||||
|
},
|
||||||
|
modalData: {},
|
||||||
|
value1: [],
|
||||||
|
ProductData: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
queryTableData(pageNo, pageSize) {},
|
||||||
|
toggle(e) {
|
||||||
|
if (this.modalConfig.show == false) {
|
||||||
|
this.modalConfig.show = true;
|
||||||
|
} else {
|
||||||
|
this.modalConfig.show = false;
|
||||||
|
this.$refs.modal.resetFields();
|
||||||
|
}
|
||||||
|
if (e) {
|
||||||
|
this.init(cloneDeep(e));
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
add: () => {
|
||||||
|
this.modalConfig.title = "添加属性";
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.modalData = {};
|
||||||
|
this.$refs.modal.resetFields();
|
||||||
|
});
|
||||||
|
this.isAdd = true;
|
||||||
|
},
|
||||||
|
update: () => {
|
||||||
|
this.isAdd = false;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
init(row) {
|
||||||
|
this.ProductData = {
|
||||||
|
merchantId: JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
|
||||||
|
shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
|
||||||
|
productIds: [row.id],
|
||||||
|
type: "DISCOUNT",
|
||||||
|
};
|
||||||
|
if (row.discountActivity) {
|
||||||
|
this.ProductData.id = row.discountActivity.id;
|
||||||
|
this.modalData = {
|
||||||
|
discount: row.discountActivity.ruleObject.discount,
|
||||||
|
limitCount: row.discountActivity.ruleObject.limitCount,
|
||||||
|
DiscountTime: [
|
||||||
|
row.discountActivity.startTime,
|
||||||
|
row.discountActivity.endTime,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.modalData = {
|
||||||
|
discount: "",
|
||||||
|
limitCount: "",
|
||||||
|
DiscountTime: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
modalCols() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "商品折扣(折)",
|
||||||
|
prop: "discount",
|
||||||
|
type: "Input",
|
||||||
|
width: "300px",
|
||||||
|
rules: { required: true, message: "请输入打折数" },
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={9.9}
|
||||||
|
v-model={this.modalData.discount}
|
||||||
|
placeholder="请输入≤9.9数字 如:8折=售价*0.8"
|
||||||
|
></el-input>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "限制购买(数量)",
|
||||||
|
prop: "limitCount",
|
||||||
|
type: "Input",
|
||||||
|
width: "300px",
|
||||||
|
// rules: { required: true, message: "请输入价格" },
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input
|
||||||
|
type="number"
|
||||||
|
step={1}
|
||||||
|
min={1}
|
||||||
|
max={99}
|
||||||
|
v-model={this.modalData.limitCount}
|
||||||
|
placeholder="请输入≤99数字 超出数量以原价购买"
|
||||||
|
></el-input>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "活动时间",
|
||||||
|
prop: "DiscountTime",
|
||||||
|
type: "Input",
|
||||||
|
width: "300px",
|
||||||
|
rules: { required: true, message: "请输入活动时间" },
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-date-picker
|
||||||
|
// format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
v-model={this.modalData.DiscountTime}
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
></el-date-picker>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
modalHandles() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "取消",
|
||||||
|
handle: () => {
|
||||||
|
this.toggle();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.isAdd ? "确认添加" : "确认",
|
||||||
|
type: "primary",
|
||||||
|
loading: this.isLoading,
|
||||||
|
submit: true,
|
||||||
|
handle: () => {
|
||||||
|
let data = {
|
||||||
|
...this.ProductData,
|
||||||
|
ruleObject: {
|
||||||
|
discount: this.modalData.discount,
|
||||||
|
limitCount: this.modalData.limitCount,
|
||||||
|
},
|
||||||
|
startTime: this.modalData.DiscountTime[0],
|
||||||
|
endTime: this.modalData.DiscountTime[1],
|
||||||
|
};
|
||||||
|
this.$confirm(
|
||||||
|
`此操作将 商品折扣=${this.modalData.discount}折 限购数 = ${this.modalData.limitCount}, 是否确认保存此折扣?`,
|
||||||
|
"提示",
|
||||||
|
{
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
center: true,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.$api.mer_admin.setDiscounts(data).then((res) => {
|
||||||
|
this.toggle();
|
||||||
|
this.$emit("queryList");
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
asyncComputed: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.introduce {
|
||||||
|
padding: 5px;
|
||||||
|
background: #fdf6ec;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.introduce-center {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -10,7 +10,7 @@
|
||||||
:modalHandles="modalHandles"
|
:modalHandles="modalHandles"
|
||||||
>
|
>
|
||||||
<template slot="dialog__before">
|
<template slot="dialog__before">
|
||||||
<el-tabs v-model="currentPanel">
|
<el-tabs :before-leave="beforeTabLeave" 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-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
|
||||||
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
|
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
|
||||||
|
@ -64,7 +64,7 @@ export default {
|
||||||
//单库存
|
//单库存
|
||||||
singleStock: "",
|
singleStock: "",
|
||||||
//其他属性
|
//其他属性
|
||||||
otherAttribute: '[{"name":"颜色","value":"黄色;屎黄色"}]',
|
otherAttribute: [], //[{"name":"颜色","value":"黄色;屎黄色"}]
|
||||||
//折扣情况
|
//折扣情况
|
||||||
discountActivity: {
|
discountActivity: {
|
||||||
// "endTime": "2024-08-31 00:00:00",
|
// "endTime": "2024-08-31 00:00:00",
|
||||||
|
@ -146,10 +146,22 @@ export default {
|
||||||
fullscreen: true,
|
fullscreen: true,
|
||||||
},
|
},
|
||||||
fileList: [], //回显图片
|
fileList: [], //回显图片
|
||||||
|
fileListOne: [], //介绍图
|
||||||
|
fileListTwo: [], //视频
|
||||||
place: "", //场地
|
place: "", //场地
|
||||||
|
passCheck: [], //通行证
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
|
watch: {
|
||||||
|
"modalConfig.show"(newVal) {
|
||||||
|
if (!newVal) {
|
||||||
|
this.currentPanel = "基础信息";
|
||||||
|
this.fileList = [];
|
||||||
|
(this.fileListOne = []), (this.fileListTwo = []);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggle(e) {
|
toggle(e) {
|
||||||
if (this.modalConfig.show == false) {
|
if (this.modalConfig.show == false) {
|
||||||
|
@ -159,30 +171,39 @@ export default {
|
||||||
}
|
}
|
||||||
if (e) {
|
if (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
this.init(cloneDeep(e.row));
|
this.init(cloneDeep(e));
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
add: (item) => {
|
add: () => {
|
||||||
console.log(item);
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
this.modalConfig.title = "添加商品";
|
||||||
this.modalData = {
|
this.modalData = {
|
||||||
description: "",
|
description: "",
|
||||||
merchantId: "",
|
merchantId: "",
|
||||||
name: "",
|
name: "",
|
||||||
otherAttribute: "",
|
otherAttribute: [],
|
||||||
productAttributeList: [],
|
productAttributeList: [],
|
||||||
productCategoryId: "",
|
productCategoryId: "",
|
||||||
productIntroducePhoto: "",
|
productIntroducePhoto: "",
|
||||||
productPhotoList: [],
|
productPhotoList: [],
|
||||||
productPlace: "",
|
productPlace: "",
|
||||||
productSpecificationList: [],
|
productSpecificationList: [
|
||||||
|
{
|
||||||
|
attributeValue: "默认",
|
||||||
|
costPrice: 20,
|
||||||
|
salePrice: 30,
|
||||||
|
stockNum: 10,
|
||||||
|
weight: 1,
|
||||||
|
volume: 0.3,
|
||||||
|
},
|
||||||
|
],
|
||||||
productUnit: "",
|
productUnit: "",
|
||||||
productVideo: "",
|
productVideo: "",
|
||||||
shelfLife: "",
|
shelfLife: "",
|
||||||
shopId: "",
|
shopId: "",
|
||||||
singlePrice: "",
|
singlePrice: "",
|
||||||
singleStock: "",
|
singleStock: "",
|
||||||
specType: "",
|
specType: 0,
|
||||||
status: "UP",
|
status: "UP",
|
||||||
};
|
};
|
||||||
this.modalData.merchantId = JSON.parse(
|
this.modalData.merchantId = JSON.parse(
|
||||||
|
@ -191,39 +212,109 @@ export default {
|
||||||
this.modalData.shopId = JSON.parse(
|
this.modalData.shopId = JSON.parse(
|
||||||
sessionStorage.getItem("userInfo")
|
sessionStorage.getItem("userInfo")
|
||||||
).shopId;
|
).shopId;
|
||||||
|
this.passCheck = [];
|
||||||
|
this.place = [];
|
||||||
});
|
});
|
||||||
console.log(this.modalData);
|
|
||||||
|
|
||||||
this.isAdd = true;
|
this.isAdd = true;
|
||||||
},
|
},
|
||||||
update: (row) => {
|
update: () => {
|
||||||
this.modalData = row;
|
this.modalConfig.title = "编辑商品";
|
||||||
this.isAdd = false;
|
this.isAdd = false;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
init(row) {},
|
init(row) {
|
||||||
|
console.log(row);
|
||||||
|
this.fileList = row.productPhotoList.map((item) => {
|
||||||
|
return {
|
||||||
|
name: "",
|
||||||
|
url: item.url,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
if (row.productIntroducePhoto) {
|
||||||
|
this.fileListOne = [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
url: row.productIntroducePhoto,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
this.fileListOne = [];
|
||||||
|
}
|
||||||
|
if (row.productVideo) {
|
||||||
|
this.fileListTwo = [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
url: row.productVideo,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
this.fileListTwo = [];
|
||||||
|
}
|
||||||
|
this.place = row.productPlace.split("-");
|
||||||
|
this.modalData = row;
|
||||||
|
this.$set(this.modalData, "singleStock", row.stockNum);
|
||||||
|
if (row.minSalePrice == row.maxSalePrice) {
|
||||||
|
this.$set(this.modalData, "singlePrice", row.maxSalePrice);
|
||||||
|
} else {
|
||||||
|
this.$set(
|
||||||
|
this.modalData,
|
||||||
|
"singlePrice",
|
||||||
|
row.minSalePrice + "~" + row.maxSalePrice
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!row.productAttributeList) {
|
||||||
|
this.$set(this.modalData, "productAttributeList", []);
|
||||||
|
}
|
||||||
|
if (row.otherAttribute) {
|
||||||
|
this.modalData.otherAttribute = JSON.parse(row.otherAttribute);
|
||||||
|
} else {
|
||||||
|
this.modalData.otherAttribute = [];
|
||||||
|
}
|
||||||
|
},
|
||||||
addSpecs() {
|
addSpecs() {
|
||||||
console.log("123");
|
console.log("123");
|
||||||
this.$refs.addSpecifications.toggle().add();
|
if (this.isAdd) {
|
||||||
|
this.$refs.addSpecifications
|
||||||
|
.toggle()
|
||||||
|
.add(
|
||||||
|
this.modalData.productAttributeList,
|
||||||
|
this.modalData.productSpecificationList
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
if (this.modalData.specType == 0) {
|
||||||
|
this.$refs.addSpecifications.toggle().update([], []);
|
||||||
|
} else {
|
||||||
|
this.$refs.addSpecifications
|
||||||
|
.toggle()
|
||||||
|
.update(
|
||||||
|
this.modalData.productAttributeList,
|
||||||
|
this.modalData.productSpecificationList
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
//获取属性
|
//获取属性
|
||||||
getSpecs(tableData, AttributeData, salePrice, stockNum) {
|
getSpecs(tableData, AttributeData, salePrice, stockNum) {
|
||||||
|
this.modalData.specType = 1;
|
||||||
let AttributeList = AttributeData.map((item) => {
|
let AttributeList = AttributeData.map((item) => {
|
||||||
return {
|
return {
|
||||||
attributeName: item.attributeName,
|
attributeName: item.attributeName,
|
||||||
attributeValue: item.attributeValue.join(","),
|
attributeValue: item.attributeValue.join(","),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
console.log(AttributeList);
|
|
||||||
|
|
||||||
this.$set(this.modalData, "productSpecificationList", tableData);
|
this.$set(this.modalData, "productSpecificationList", tableData);
|
||||||
this.$set(this.modalData, "productAttributeList", AttributeList);
|
this.$set(this.modalData, "productAttributeList", AttributeList);
|
||||||
this.$set(this.modalData, "singlePrice", salePrice);
|
this.$set(this.modalData, "singlePrice", salePrice);
|
||||||
this.$set(this.modalData, "singleStock", stockNum);
|
this.$set(this.modalData, "singleStock", stockNum);
|
||||||
},
|
},
|
||||||
addAttribute() {
|
addAttribute() {
|
||||||
this.$refs.addAttribute.toggle().add();
|
if (this.isAdd) {
|
||||||
|
this.$refs.addAttribute.toggle().add(this.modalData.otherAttribute);
|
||||||
|
} else {
|
||||||
|
this.$refs.addAttribute.toggle().update(this.modalData.otherAttribute);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getAttribute(data) {
|
getAttribute(data) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
@ -235,6 +326,21 @@ export default {
|
||||||
];
|
];
|
||||||
console.log(this.modalData);
|
console.log(this.modalData);
|
||||||
},
|
},
|
||||||
|
beforeTabLeave(activeName, oldActiveName) {
|
||||||
|
if (this.passCheck.includes(activeName)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
let state = "";
|
||||||
|
this.$refs.modal.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (!this.passCheck.includes(oldActiveName)) {
|
||||||
|
this.passCheck.push(oldActiveName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state = valid;
|
||||||
|
});
|
||||||
|
return state;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
modalCols() {
|
modalCols() {
|
||||||
|
@ -262,16 +368,22 @@ export default {
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
return {
|
return {
|
||||||
isMain: 1,
|
isMain: 1,
|
||||||
url: item.response.data,
|
url: item.response ? item.response.data : item.url,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
url: item.response.data,
|
url: item.response ? item.response.data : item.url,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
console.log(this.modalData.productPhotoList);
|
console.log(this.modalData.productPhotoList);
|
||||||
|
this.fileList = fileList.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
url: item.response ? item.response.data : item.url,
|
||||||
|
};
|
||||||
|
});
|
||||||
};
|
};
|
||||||
const handleRemove = (file, fileList) => {
|
const handleRemove = (file, fileList) => {
|
||||||
console.log(file, fileList);
|
console.log(file, fileList);
|
||||||
|
@ -280,16 +392,22 @@ export default {
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
return {
|
return {
|
||||||
isMain: 1,
|
isMain: 1,
|
||||||
url: item.response.data,
|
url: item.url,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
url: item.response.data,
|
url: item.url,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
console.log(this.modalData.productPhotoList);
|
console.log(this.modalData.productPhotoList);
|
||||||
|
this.fileList = fileList.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
url: item.url,
|
||||||
|
};
|
||||||
|
});
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<el-upload
|
<el-upload
|
||||||
|
@ -308,6 +426,7 @@ export default {
|
||||||
}}
|
}}
|
||||||
multiple={true}
|
multiple={true}
|
||||||
file-list={this.fileList}
|
file-list={this.fileList}
|
||||||
|
list-type="picture"
|
||||||
>
|
>
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">
|
<div class="el-upload__text">
|
||||||
|
@ -353,6 +472,7 @@ export default {
|
||||||
prop: "name",
|
prop: "name",
|
||||||
type: "Input",
|
type: "Input",
|
||||||
required: true,
|
required: true,
|
||||||
|
maxlength: "30",
|
||||||
rules: {
|
rules: {
|
||||||
required: true,
|
required: true,
|
||||||
message: "请输入商品名称",
|
message: "请输入商品名称",
|
||||||
|
@ -374,6 +494,7 @@ export default {
|
||||||
return (
|
return (
|
||||||
<el-input
|
<el-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
|
maxlength={100}
|
||||||
v-model={this.modalData.description}
|
v-model={this.modalData.description}
|
||||||
placeholder="请简单描述,如别称、口感、用途等"
|
placeholder="请简单描述,如别称、口感、用途等"
|
||||||
/>
|
/>
|
||||||
|
@ -404,7 +525,7 @@ export default {
|
||||||
return (
|
return (
|
||||||
<el-option
|
<el-option
|
||||||
label={item.name}
|
label={item.name}
|
||||||
value={item.id}
|
value={item.name}
|
||||||
></el-option>
|
></el-option>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -415,6 +536,12 @@ export default {
|
||||||
{
|
{
|
||||||
label: "规格",
|
label: "规格",
|
||||||
prop: "productSpecificationList",
|
prop: "productSpecificationList",
|
||||||
|
// required: true,
|
||||||
|
// rules: {
|
||||||
|
// required: true,
|
||||||
|
// message: "请选择销售单位",
|
||||||
|
// trigger: "blur",
|
||||||
|
// },
|
||||||
type: "jsx",
|
type: "jsx",
|
||||||
render: () => {
|
render: () => {
|
||||||
return (
|
return (
|
||||||
|
@ -424,6 +551,22 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "成本",
|
||||||
|
prop: "minCostPrice",
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input
|
||||||
|
readonly={this.modalData.specType != 0}
|
||||||
|
placeholder="请输入价格"
|
||||||
|
v-model={this.modalData.minCostPrice}
|
||||||
|
>
|
||||||
|
<template slot="append">单位(元)</template>
|
||||||
|
</el-input>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "价格",
|
label: "价格",
|
||||||
prop: "singlePrice",
|
prop: "singlePrice",
|
||||||
|
@ -431,12 +574,12 @@ export default {
|
||||||
render: () => {
|
render: () => {
|
||||||
return (
|
return (
|
||||||
<el-input
|
<el-input
|
||||||
readonly={
|
readonly={this.modalData.specType != 0}
|
||||||
this.modalData.productSpecificationList.length > 0
|
|
||||||
}
|
|
||||||
placeholder="请输入价格"
|
placeholder="请输入价格"
|
||||||
v-model={this.modalData.singlePrice}
|
v-model={this.modalData.singlePrice}
|
||||||
></el-input>
|
>
|
||||||
|
<template slot="append">单位(元)</template>
|
||||||
|
</el-input>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -447,15 +590,41 @@ export default {
|
||||||
render: () => {
|
render: () => {
|
||||||
return (
|
return (
|
||||||
<el-input
|
<el-input
|
||||||
readonly={
|
readonly={this.modalData.specType != 0}
|
||||||
this.modalData.productSpecificationList.length > 0
|
|
||||||
}
|
|
||||||
placeholder="请输入库存"
|
placeholder="请输入库存"
|
||||||
v-model={this.modalData.singleStock}
|
v-model={this.modalData.singleStock}
|
||||||
></el-input>
|
></el-input>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "重量",
|
||||||
|
prop: "weight",
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input
|
||||||
|
readonly={this.modalData.specType != 0}
|
||||||
|
placeholder="请输入库存"
|
||||||
|
v-model={this.modalData.weight}
|
||||||
|
></el-input>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "体积",
|
||||||
|
prop: "volume",
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input
|
||||||
|
readonly={this.modalData.specType != 0}
|
||||||
|
placeholder="请输入库存"
|
||||||
|
v-model={this.modalData.volume}
|
||||||
|
></el-input>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "其他属性",
|
label: "其他属性",
|
||||||
prop: "productAttributeList",
|
prop: "productAttributeList",
|
||||||
|
@ -482,7 +651,6 @@ export default {
|
||||||
const change = (e) => {
|
const change = (e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
this.modalData.productPlace = e.join("-");
|
this.modalData.productPlace = e.join("-");
|
||||||
console.log(aa);
|
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<el-cascader
|
<el-cascader
|
||||||
|
@ -525,8 +693,8 @@ export default {
|
||||||
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: () => {
|
||||||
|
@ -547,6 +715,8 @@ export default {
|
||||||
drag
|
drag
|
||||||
action={this.$api.mer_admin.uploadFile()}
|
action={this.$api.mer_admin.uploadFile()}
|
||||||
limit={1}
|
limit={1}
|
||||||
|
file-list={this.fileListOne}
|
||||||
|
list-type="picture"
|
||||||
{...{
|
{...{
|
||||||
props: {
|
props: {
|
||||||
"on-change": handleChange,
|
"on-change": handleChange,
|
||||||
|
@ -573,12 +743,12 @@ export default {
|
||||||
{
|
{
|
||||||
label: "商品视频",
|
label: "商品视频",
|
||||||
prop: "productVideo",
|
prop: "productVideo",
|
||||||
required: true,
|
// required: true,
|
||||||
rules: {
|
// rules: {
|
||||||
required: true,
|
// required: true,
|
||||||
message: "请填写商品描述",
|
// message: "请填写商品描述",
|
||||||
trigger: "blur",
|
// trigger: "blur",
|
||||||
},
|
// },
|
||||||
type: "jsx",
|
type: "jsx",
|
||||||
render: () => {
|
render: () => {
|
||||||
const handleChange = (file, fileList) => {
|
const handleChange = (file, fileList) => {
|
||||||
|
@ -596,6 +766,8 @@ export default {
|
||||||
drag
|
drag
|
||||||
action={this.$api.mer_admin.uploadFile()}
|
action={this.$api.mer_admin.uploadFile()}
|
||||||
limit={1}
|
limit={1}
|
||||||
|
file-list={this.fileListTwo}
|
||||||
|
list-type="picture"
|
||||||
{...{
|
{...{
|
||||||
props: {
|
props: {
|
||||||
"on-change": handleChange,
|
"on-change": handleChange,
|
||||||
|
@ -629,7 +801,7 @@ export default {
|
||||||
modalHandles() {
|
modalHandles() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
label: this.currentPanel === "其他信息" ? "确定" : "下一步",
|
label: this.currentPanel === "其他信息" ? "立即上架" : "下一步",
|
||||||
type: "primary",
|
type: "primary",
|
||||||
loading: this.isLoading,
|
loading: this.isLoading,
|
||||||
submit: true,
|
submit: true,
|
||||||
|
@ -640,12 +812,67 @@ export default {
|
||||||
this.currentPanel = "其他信息";
|
this.currentPanel = "其他信息";
|
||||||
} else {
|
} else {
|
||||||
console.log("请求接口", this.modalData);
|
console.log("请求接口", this.modalData);
|
||||||
|
if (this.modalData.specType == 0) {
|
||||||
|
this.modalData.productAttributeList = [
|
||||||
|
{
|
||||||
|
id: "1821213026050191360",
|
||||||
|
attributeName: "重量",
|
||||||
|
attributeValue: "1斤",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.modalData.productSpecificationList = [
|
||||||
|
{
|
||||||
|
attributeValue: "默认",
|
||||||
|
costPrice: this.modalData.minCostPrice,
|
||||||
|
salePrice: this.modalData.singlePrice,
|
||||||
|
stockNum: this.modalData.singleStock,
|
||||||
|
weight: this.modalData.weight,
|
||||||
|
volume: this.modalData.volume,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
|
this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
|
this.$emit("queryList");
|
||||||
|
this.toggle();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 300),
|
}, 300),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
disabled: () => this.currentPanel != "其他信息",
|
||||||
|
label: "放入仓库",
|
||||||
|
type: "primary",
|
||||||
|
loading: this.isLoading,
|
||||||
|
submit: true,
|
||||||
|
handle: debounce(() => {
|
||||||
|
if (this.modalData.specType == 0) {
|
||||||
|
this.modalData.productAttributeList = [
|
||||||
|
{
|
||||||
|
id: "1821213026050191360",
|
||||||
|
attributeName: "重量",
|
||||||
|
attributeValue: "1斤",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.modalData.productSpecificationList = [
|
||||||
|
{
|
||||||
|
attributeValue: "默认",
|
||||||
|
costPrice: this.modalData.minCostPrice,
|
||||||
|
salePrice: this.modalData.singlePrice,
|
||||||
|
stockNum: this.modalData.singleStock,
|
||||||
|
weight: this.modalData.weight,
|
||||||
|
volume: this.modalData.volume,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
this.modalData.status = "DOWN";
|
||||||
|
this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.$emit("queryList");
|
||||||
|
this.toggle();
|
||||||
|
});
|
||||||
|
}, 300),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,185 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<obj-modal
|
||||||
|
ref="modal"
|
||||||
|
labelWidth="100px"
|
||||||
|
:modalConfig="modalConfig"
|
||||||
|
:modalCols="modalCols"
|
||||||
|
:modalData="modalData"
|
||||||
|
:modalHandles="modalHandles"
|
||||||
|
>
|
||||||
|
<obj-table-plus
|
||||||
|
v-show="tableData.length > 1"
|
||||||
|
style="height: calc(100vh - 120px - 240px)"
|
||||||
|
slot="dialog__after"
|
||||||
|
ref="oTable"
|
||||||
|
:toolbarProp="{}"
|
||||||
|
@query="queryTableData"
|
||||||
|
v-model="tableData"
|
||||||
|
:tableCols="tableCols"
|
||||||
|
:tableProp="tableProp"
|
||||||
|
:tableEvent="tableEvent"
|
||||||
|
:isPagination="false"
|
||||||
|
:enableAutoQuery="false"
|
||||||
|
>
|
||||||
|
</obj-table-plus>
|
||||||
|
</obj-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { debounce, cloneDeep } from "lodash";
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isAdd: true,
|
||||||
|
//监控对象数据
|
||||||
|
tableData: [],
|
||||||
|
//表格属性
|
||||||
|
tableProp: {
|
||||||
|
height: "auto",
|
||||||
|
border: true,
|
||||||
|
"auto-resize": false,
|
||||||
|
"print-config": {},
|
||||||
|
},
|
||||||
|
toolbarProp: {},
|
||||||
|
tableEvent: {},
|
||||||
|
modalConfig: {
|
||||||
|
title: "修改价格",
|
||||||
|
show: false,
|
||||||
|
width: "60%",
|
||||||
|
},
|
||||||
|
modalData: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
queryTableData(pageNo, pageSize) {},
|
||||||
|
toggle(e) {
|
||||||
|
if (this.modalConfig.show == false) {
|
||||||
|
this.modalConfig.show = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.oTable.doLayout();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.modalConfig.show = false;
|
||||||
|
}
|
||||||
|
if (e) {
|
||||||
|
this.init(cloneDeep(e));
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
add: () => {
|
||||||
|
this.modalData = {};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.oTable.complete(false);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
update: () => {
|
||||||
|
this.isAdd = false;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
init(row) {
|
||||||
|
this.modalData = row;
|
||||||
|
this.tableData = row.productSpecificationList;
|
||||||
|
console.log(this.modalData);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
modalCols() {
|
||||||
|
if (this.tableData.length == 1) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "价格",
|
||||||
|
prop: "",
|
||||||
|
type: "Input",
|
||||||
|
width: "300px",
|
||||||
|
rules: { required: true, message: "请输入价格" },
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input-number
|
||||||
|
v-model={this.modalData.productSpecificationList[0].salePrice}
|
||||||
|
min={0}
|
||||||
|
label="描述文字"
|
||||||
|
></el-input-number>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tableCols() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: "序号",
|
||||||
|
type: "seq",
|
||||||
|
width: "60px",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "规格",
|
||||||
|
field: "attributeValue",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "价格",
|
||||||
|
field: "salePrice",
|
||||||
|
align: "center",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<el-input-number
|
||||||
|
min={0}
|
||||||
|
size="small"
|
||||||
|
v-model={row.salePrice}
|
||||||
|
placeholder="请输入数量"
|
||||||
|
></el-input-number>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
modalHandles() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "取消",
|
||||||
|
handle: debounce(() => {
|
||||||
|
this.toggle();
|
||||||
|
}, 300),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.isAdd ? "确认添加" : "确认编辑",
|
||||||
|
type: "primary",
|
||||||
|
submit: true,
|
||||||
|
handle: debounce(() => {
|
||||||
|
if (this.tableData.length == 1) {
|
||||||
|
this.$api.mer_admin
|
||||||
|
.saveProductBase(this.modalData)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.toggle();
|
||||||
|
this.$emit("queryList");
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.modalData.productSpecificationList = this.tableData;
|
||||||
|
this.$api.mer_admin
|
||||||
|
.saveProductBase(this.modalData)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.toggle();
|
||||||
|
this.$emit("queryList");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.log(this.modalData);
|
||||||
|
}, 300),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
asyncComputed: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
|
@ -133,15 +133,51 @@ export default {
|
||||||
this.init(cloneDeep(e.row));
|
this.init(cloneDeep(e.row));
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
add: () => {
|
add: (productAttributeList, productSpecificationList) => {
|
||||||
this.modalConfig.title = "属性";
|
this.modalConfig.title = "添加属性";
|
||||||
this.$nextTick(() => {
|
if (productAttributeList.length == 0) {
|
||||||
this.modalData = {};
|
this.AttributeData = [
|
||||||
this.$refs.modal.resetFields();
|
{
|
||||||
|
attributeName: "",
|
||||||
|
attributeValue: [],
|
||||||
|
inputVisible: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
this.AttributeData = productAttributeList.map((item) => {
|
||||||
|
return {
|
||||||
|
attributeName: item.attributeName,
|
||||||
|
attributeValue: item.attributeValue.split(","),
|
||||||
|
id: item.id,
|
||||||
|
inputVisible: false,
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
this.tableData = productSpecificationList;
|
||||||
this.isAdd = true;
|
this.isAdd = true;
|
||||||
},
|
},
|
||||||
update: () => {
|
update: (productAttributeList, productSpecificationList) => {
|
||||||
|
this.modalConfig.title = "编辑属性";
|
||||||
|
console.log(productAttributeList, productSpecificationList);
|
||||||
|
if (productAttributeList.length == 0) {
|
||||||
|
this.AttributeData = [
|
||||||
|
{
|
||||||
|
attributeName: "",
|
||||||
|
attributeValue: [],
|
||||||
|
inputVisible: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
this.AttributeData = productAttributeList.map((item) => {
|
||||||
|
return {
|
||||||
|
attributeName: item.attributeName,
|
||||||
|
attributeValue: item.attributeValue.split(","),
|
||||||
|
id: item.id,
|
||||||
|
inputVisible: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.tableData = productSpecificationList;
|
||||||
this.isAdd = false;
|
this.isAdd = false;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -211,9 +247,11 @@ export default {
|
||||||
this.tableData = data.map((item) => {
|
this.tableData = data.map((item) => {
|
||||||
return {
|
return {
|
||||||
attributeValue: item,
|
attributeValue: item,
|
||||||
salePrice: "",
|
salePrice: 0,
|
||||||
costPrice: "",
|
costPrice: 0,
|
||||||
stockNum: "",
|
stockNum: 0,
|
||||||
|
weight: 0,
|
||||||
|
volume: 0,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
@ -230,7 +268,7 @@ export default {
|
||||||
"min-width": "160px",
|
"min-width": "160px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "价格",
|
title: "价格(元)",
|
||||||
field: "salePrice",
|
field: "salePrice",
|
||||||
align: "center",
|
align: "center",
|
||||||
"min-width": "160px",
|
"min-width": "160px",
|
||||||
|
@ -249,7 +287,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "成本",
|
title: "成本(元)",
|
||||||
field: "costPrice",
|
field: "costPrice",
|
||||||
align: "center",
|
align: "center",
|
||||||
"min-width": "160px",
|
"min-width": "160px",
|
||||||
|
@ -259,6 +297,7 @@ export default {
|
||||||
<div>
|
<div>
|
||||||
<el-input-number
|
<el-input-number
|
||||||
min={0}
|
min={0}
|
||||||
|
max={row.salePrice}
|
||||||
size="small"
|
size="small"
|
||||||
v-model={row.costPrice}
|
v-model={row.costPrice}
|
||||||
placeholder="请输入成本"
|
placeholder="请输入成本"
|
||||||
|
@ -286,6 +325,44 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "重量(千克)",
|
||||||
|
field: "weight",
|
||||||
|
align: "center",
|
||||||
|
"min-width": "160px",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<el-input-number
|
||||||
|
min={0}
|
||||||
|
size="small"
|
||||||
|
v-model={row.weight}
|
||||||
|
placeholder="请输入重量"
|
||||||
|
></el-input-number>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "体积(立方米)",
|
||||||
|
field: "volume",
|
||||||
|
align: "center",
|
||||||
|
"min-width": "160px",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<el-input-number
|
||||||
|
min={0}
|
||||||
|
size="small"
|
||||||
|
v-model={row.volume}
|
||||||
|
placeholder="请输入体积"
|
||||||
|
></el-input-number>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
fixed: "right",
|
fixed: "right",
|
||||||
|
@ -319,6 +396,7 @@ export default {
|
||||||
label: this.isAdd ? "确认添加" : "确认修改",
|
label: this.isAdd ? "确认添加" : "确认修改",
|
||||||
type: "primary",
|
type: "primary",
|
||||||
loading: this.isLoading,
|
loading: this.isLoading,
|
||||||
|
disabled: () => this.tableData.length <= 0,
|
||||||
// submit: true,
|
// submit: true,
|
||||||
handle: () => {
|
handle: () => {
|
||||||
let salePrice = ""; //价格范围
|
let salePrice = ""; //价格范围
|
||||||
|
|
|
@ -0,0 +1,185 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<obj-modal
|
||||||
|
ref="modal"
|
||||||
|
labelWidth="100px"
|
||||||
|
:modalConfig="modalConfig"
|
||||||
|
:modalCols="modalCols"
|
||||||
|
:modalData="modalData"
|
||||||
|
:modalHandles="modalHandles"
|
||||||
|
>
|
||||||
|
<obj-table-plus
|
||||||
|
v-show="tableData.length > 1"
|
||||||
|
style="height: calc(100vh - 120px - 240px)"
|
||||||
|
slot="dialog__after"
|
||||||
|
ref="oTable"
|
||||||
|
:toolbarProp="{}"
|
||||||
|
@query="queryTableData"
|
||||||
|
v-model="tableData"
|
||||||
|
:tableCols="tableCols"
|
||||||
|
:tableProp="tableProp"
|
||||||
|
:tableEvent="tableEvent"
|
||||||
|
:isPagination="false"
|
||||||
|
:enableAutoQuery="false"
|
||||||
|
>
|
||||||
|
</obj-table-plus>
|
||||||
|
</obj-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { debounce, cloneDeep } from "lodash";
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isAdd: true,
|
||||||
|
//监控对象数据
|
||||||
|
tableData: [],
|
||||||
|
//表格属性
|
||||||
|
tableProp: {
|
||||||
|
height: "auto",
|
||||||
|
border: true,
|
||||||
|
"auto-resize": false,
|
||||||
|
"print-config": {},
|
||||||
|
},
|
||||||
|
toolbarProp: {},
|
||||||
|
tableEvent: {},
|
||||||
|
modalConfig: {
|
||||||
|
title: "修改库存",
|
||||||
|
show: false,
|
||||||
|
width: "60%",
|
||||||
|
},
|
||||||
|
modalData: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
queryTableData(pageNo, pageSize) {},
|
||||||
|
toggle(e) {
|
||||||
|
if (this.modalConfig.show == false) {
|
||||||
|
this.modalConfig.show = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.oTable.doLayout();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.modalConfig.show = false;
|
||||||
|
}
|
||||||
|
if (e) {
|
||||||
|
this.init(cloneDeep(e));
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
add: () => {
|
||||||
|
this.modalData = {};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.oTable.complete(false);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
update: () => {
|
||||||
|
this.isAdd = false;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
init(row) {
|
||||||
|
this.modalData = row;
|
||||||
|
this.tableData = row.productSpecificationList;
|
||||||
|
console.log(this.modalData);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
modalCols() {
|
||||||
|
if (this.tableData.length == 1) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "库存",
|
||||||
|
prop: "",
|
||||||
|
type: "Input",
|
||||||
|
width: "300px",
|
||||||
|
rules: { required: true, message: "请输入库存数量" },
|
||||||
|
type: "jsx",
|
||||||
|
render: () => {
|
||||||
|
return (
|
||||||
|
<el-input-number
|
||||||
|
v-model={this.modalData.productSpecificationList[0].stockNum}
|
||||||
|
min={0}
|
||||||
|
label="描述文字"
|
||||||
|
></el-input-number>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tableCols() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: "序号",
|
||||||
|
type: "seq",
|
||||||
|
width: "60px",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "规格",
|
||||||
|
field: "attributeValue",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "库存",
|
||||||
|
field: "salePrice",
|
||||||
|
align: "center",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<el-input-number
|
||||||
|
min={0}
|
||||||
|
size="small"
|
||||||
|
v-model={row.stockNum}
|
||||||
|
placeholder="请输入数量"
|
||||||
|
></el-input-number>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
modalHandles() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "取消",
|
||||||
|
handle: debounce(() => {
|
||||||
|
this.toggle();
|
||||||
|
}, 300),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.isAdd ? "确认添加" : "确认编辑",
|
||||||
|
type: "primary",
|
||||||
|
submit: true,
|
||||||
|
handle: debounce(() => {
|
||||||
|
if (this.tableData.length == 1) {
|
||||||
|
this.$api.mer_admin
|
||||||
|
.saveProductBase(this.modalData)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.toggle();
|
||||||
|
this.$emit("queryList");
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.modalData.productSpecificationList = this.tableData;
|
||||||
|
this.$api.mer_admin
|
||||||
|
.saveProductBase(this.modalData)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.toggle();
|
||||||
|
this.$emit("queryList");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.log(this.modalData);
|
||||||
|
}, 300),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
asyncComputed: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
Loading…
Reference in New Issue