This commit is contained in:
KangKang0928 2024-08-13 00:23:05 +08:00
commit 2184af66c9
4 changed files with 1363 additions and 493 deletions

View File

@ -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>

View File

@ -0,0 +1,202 @@
<template>
<div>
<obj-modal
ref="modal"
labelWidth="150px"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<div slot="dialog__content">
<el-alert class="Example" title="需要注意的事项" type="info">
<template slot="title">
<el-form label-width="80px">
<el-form-item label="示例:">
<div class="iconSize">属性名称温度</div>
<div class="iconSize">属性内容常温冷饮</div>
<div class="iconSize">顾客下单时可选择常温 冷饮</div>
</el-form-item>
</el-form>
</template>
</el-alert>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="属性名称:" prop="name">
<el-input
style="width: 80%"
placeholder="请输入属性名称"
v-model="ruleForm.name"
clearable
></el-input>
</el-form-item>
<el-form-item label="属性内容:" prop="value">
<el-tag
:key="tag"
v-for="tag in ruleForm.value"
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-form-item>
</el-form>
</div>
</obj-modal>
</div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
components: {},
data() {
return {
isAdd: true,
//
modalConfig: {
title: "属性",
show: false,
width: "80%",
},
modalData: {},
inputValue: "",
inputVisible: false,
ruleForm: {
name: "",
value: [],
},
rules: {
name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
value: [
{
required: true,
message: "请输入属性内容",
trigger: "blur",
},
],
},
};
},
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.ruleForm.resetFields();
});
this.isAdd = true;
},
update: () => {
this.isAdd = false;
},
};
},
init(row) {
this.modalData = row;
},
handleClose(tag) {
this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
},
//
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.ruleForm.value.push(inputValue);
}
this.inputVisible = false;
this.inputValue = "";
},
},
computed: {
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: this.isAdd ? "确认添加" : "确认修改",
type: "primary",
loading: this.isLoading,
// submit: true,
handle: () => {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("getAttribute", this.ruleForm);
this.toggle();
}
});
},
},
];
},
},
asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.Example {
margin: 0 0 20px 20px;
width: 80%;
}
.iconSize {
font-size: 15px;
// padding: 3px;
}
.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>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,396 @@
<template>
<div>
<obj-modal
ref="modal"
labelWidth="150px"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<div slot="dialog__content">
<div v-for="(item, index) in AttributeData" :key="index">
<el-row>
<el-input
style="width: 80%; margin: 0 20px 0 0"
placeholder="请输入属性"
v-model="item.attributeName"
clearable
>
</el-input>
<el-button
@click="deleteAttribute(index)"
type="danger"
icon="el-icon-delete"
circle
></el-button>
</el-row>
<el-row>
<el-tag
:key="tag"
v-for="tag in item.attributeValue"
closable
:disable-transitions="false"
@close="handleClose(index, tag)"
>
{{ tag }}
</el-tag>
<el-input
class="input-new-tag"
v-if="item.inputVisible"
v-model="inputValue"
:ref="`saveTagInput${index}`"
size="small"
@keyup.enter.native="handleInputConfirm(index)"
@blur="handleInputConfirm(index)"
>
</el-input>
<el-button
v-else
class="button-new-tag"
size="small"
@click="showInput(index)"
>+新增规格</el-button
></el-row
>
</div>
<el-row type="flex" justify="center">
<el-button @click="addAttribute" type="text"
>+添加其他属性</el-button
></el-row
>
<obj-table-plus
slot="dialog__after"
style="height: 50vh"
ref="oTable"
@query="queryTableData"
v-model="tableData"
:tableCols="tableCols"
:tableProp="tableProp"
:toolbarProp="toolbarProp"
:tableEvent="tableEvent"
:enableAutoQuery="false"
>
<!-- <div slot="tableTop" class="mb-2">
<el-button type="primary" size="mini" @click="calculation"
>计算属性</el-button
>
</div> -->
</obj-table-plus>
</div>
</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": {},
"row-config": { isCurrent: true, isHover: true },
"highlight-hover-row": true,
"highlight-current-row": true,
},
toolbarProp: {},
tableEvent: {},
modalConfig: {
title: "属性",
show: false,
width: "80%",
},
modalData: {},
AttributeData: [
{
attributeName: "",
attributeValue: [],
inputVisible: false,
},
], //
input: "",
dynamicTags: [],
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(index, tag) {
this.AttributeData[index].attributeValue.splice(
this.AttributeData[index].attributeValue.indexOf(tag),
1
);
},
//
showInput(index) {
console.log(index);
this.AttributeData[index].inputVisible = true;
this.$nextTick(() => {
console.log(this.$refs[`saveTagInput${index}`]);
this.$refs[`saveTagInput${index}`][0].focus();
});
},
handleInputConfirm(index) {
let inputValue = this.inputValue;
if (inputValue) {
this.AttributeData[index].attributeValue.push(inputValue);
}
this.AttributeData[index].inputVisible = false;
this.inputValue = "";
this.calculation();
},
//
addAttribute() {
this.AttributeData.push({
attributeName: "",
attributeValue: [],
inputVisible: false,
});
console.log(this.AttributeData);
},
//
deleteAttribute(index) {
this.AttributeData.splice(index, 1);
this.calculation();
},
//
calculation() {
let data = [];
let list = [];
for (let i = 0; i < this.AttributeData.length; i++) {
if (i == 0) {
data = this.AttributeData[i].attributeValue.map((item) => {
return this.AttributeData[i].attributeName + item;
});
} else {
data.forEach((it) => {
this.AttributeData[i].attributeValue.forEach((e) => {
let name = this.AttributeData[i].attributeName;
list.push(it + "/" + name + e);
});
});
data = list;
list = [];
}
}
this.tableData = data.map((item) => {
return {
attributeValue: item,
salePrice: "",
costPrice: "",
stockNum: "",
};
});
console.log(data);
},
},
computed: {
tableCols() {
return [
{ title: "序号", type: "seq", width: "60px", fixed: "left" },
{
title: "属性",
field: "attributeValue",
align: "center",
"min-width": "160px",
},
{
title: "价格",
field: "salePrice",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.salePrice}
placeholder="请输入价格"
></el-input-number>
</div>
);
},
},
{
title: "成本",
field: "costPrice",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.costPrice}
placeholder="请输入成本"
></el-input-number>
</div>
);
},
},
{
title: "库存",
field: "stockNum",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.stockNum}
placeholder="请输入库存"
></el-input-number>
</div>
);
},
},
{
title: "操作",
fixed: "right",
width: "150px",
type: "jsx",
align: "center",
render: (row) => {
let remove = () => {
this.tableData.splice(row.$rowIndex, 1);
};
return (
<el-popconfirm onConfirm={remove} title="确认删除?" class="ml-1">
<el-button type="danger" size="mini" slot="reference">
删除
</el-button>
</el-popconfirm>
);
},
},
];
},
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: this.isAdd ? "确认添加" : "确认修改",
type: "primary",
loading: this.isLoading,
// submit: true,
handle: () => {
let salePrice = ""; //
let stockNum = ""; //
let minSalePrice = Math.min.apply(
Math,
this.tableData.map((item) => {
return item.salePrice;
})
);
let maxSalePrice = Math.max.apply(
Math,
this.tableData.map((item) => {
return item.salePrice;
})
);
let minStockNum = Math.min.apply(
Math,
this.tableData.map((item) => {
return item.stockNum;
})
);
let maxStockNum = Math.max.apply(
Math,
this.tableData.map((item) => {
return item.stockNum;
})
);
if (minSalePrice == maxSalePrice) {
salePrice = maxSalePrice;
} else {
salePrice = minSalePrice + "~" + maxSalePrice;
}
if (minStockNum == maxStockNum) {
stockNum = maxStockNum;
} else {
stockNum = minStockNum + "~" + maxStockNum;
}
this.$emit(
"getSpecs",
this.tableData,
this.AttributeData,
salePrice,
stockNum
);
this.toggle();
},
},
];
},
},
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>