DMJS-IT
/
merchant-web
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 商品管理样式调优

This commit is contained in:
lzhizhao 2025-10-01 14:27:32 +08:00
parent 7b5719829d
commit 8dbaa7aa36
4 changed files with 380 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/modules/operation-management/commodity/index.vue
View File

@ -140,8 +140,18 @@
</el-popconfirm>
</template>
</el-table-column>
<el-table-column label="操作 (提示：下架后可进行操作)" align="center" width="340" fixed="right">
<el-table-column label="操作" align="center" width="400" fixed="right">
<template slot-scope="{ row }">
<el-popconfirm
style="margin-right: 10px;"
:title="row.status == 'DOWN' ? '当前为下架状态，是否更改为上架状态？' : '当前为上架状态，是否更改为下架状态？'"
:confirm-button-text="row.status == 'DOWN' ? '确认上架' : '确认下架'"
@confirm="toggleStatus(row)"
>
<el-button slot="reference" size="mini" :type="row.status === 'UP' ? 'danger' : 'success'">
{{ row.status === 'UP' ? '下架' : '上架' }}
</el-button>
</el-popconfirm>
<el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="editProduct(row)">编辑</el-button>
<el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="priceAdjustment(row)">改价</el-button>
<el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="changeInventory(row)">改库存</el-button>

242
src/views/modules/operation-management/commodity/popup/add-attribute.vue
View File

@ -1,221 +1,119 @@
<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>
<el-dialog title="其他属性" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
<div class="attribute-container">
<el-alert title="示例：属性名称：温度，属性内容：常温,冷饮" type="info" show-icon :closable="false" style="margin-bottom: 16px"></el-alert>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<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>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">{{ isAdd ? "确认添加" : "确认修改" }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
components: {},
data() {
return {
isAdd: true,
//表格属性
modalConfig: {
title: "属性",
show: false,
width: "80%",
},
modalData: {},
inputValue: "",
dialogVisible: false,
inputVisible: false,
inputValue: "",
ruleForm: {
name: "",
value: [],
},
rules: {
name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
value: [
{
required: true,
message: "请输入属性内容",
trigger: "blur",
},
],
value: [{ required: true, type: 'array', message: "请添加属性内容", trigger: "change" }],
},
};
},
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));
}
toggle() {
this.dialogVisible = !this.dialogVisible;
return {
add: (data) => {
this.modalConfig.title = "添加属性";
if (data.length == 0) {
this.ruleForm = {
name: "",
value: [],
};
} else {
this.ruleForm = {
name: data[0].name,
value: data[0].value.split(","),
};
}
this.isAdd = true;
this.initData(data);
},
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.initData(data);
},
};
},
init(row) {
this.modalData = row;
initData(data) {
if (data && data.length > 0 && data[0].name) {
this.ruleForm = {
name: data[0].name,
value: data[0].value ? data[0].value.split(",") : [],
};
} else {
this.ruleForm = { name: "", value: [] };
}
this.inputVisible = false;
this.inputValue = "";
},
handleClose(tag) {
this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
},
//聚焦
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
if (inputValue && !this.ruleForm.value.includes(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();
}
});
},
},
];
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("getAttribute", {
name: this.ruleForm.name,
value: this.ruleForm.value.join(","),
});
this.dialogVisible = false;
}
});
},
},
asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.Example {
margin: 0 0 20px 20px;
width: 80%;
.attribute-container {
.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;
}
}
.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>
</style>

257
src/views/modules/operation-management/commodity/popup/add-or-update.vue
View File

@ -13,24 +13,20 @@
<el-tab-pane label="基础信息" name="基础信息">
<el-form-item label="商品图片" prop="productPhotoList">
<el-upload
class="upload-demo"
drag
:action="$api.mer_admin.uploadFile()"
:on-change="handlePhotoChange"
:on-success="handlePhotoSuccess"
:on-remove="handlePhotoRemove"
:headers="{ token: 'Bearer ' + $cookie.get('token') }"
multiple
:file-list="fileList"
list-type="picture"
list-type="picture-card"
>
<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>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item label="商品类目" prop="productCategoryId">
<el-select placeholder="请选择商品类目" v-model="modalData.productCategoryId">
<el-select style="width: 50%;" placeholder="请选择商品类目" v-model="modalData.productCategoryId">
<el-option
v-for="item in getProductCategory"
:key="item.id"
@ -53,7 +49,7 @@
</el-tab-pane>
<el-tab-pane label="销售信息" name="销售信息">
<el-form-item label="销售单位" prop="productUnit">
<el-select v-model="modalData.productUnit" placeholder="请选择销售单位">
<el-select style="width: 50%;" v-model="modalData.productUnit" placeholder="请选择销售单位">
<el-option
v-for="item in getSaleUnit"
:key="item.name"
@ -62,59 +58,87 @@
></el-option>
</el-select>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="成本" prop="costPrice">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入价格'"
v-model="modalData.costPrice"
>
<template slot="append">单位（元）</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="市场价" prop="marketPrice">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入市场价'"
v-model="modalData.marketPrice"
>
<template slot="append">单位（元）</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="库存" prop="stockNum">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入库存'"
v-model="modalData.stockNum"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重量" prop="weight">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入重量'"
v-model="modalData.weight"
>
<template slot="append">KG</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="体积" prop="volume">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入体积'"
v-model="modalData.volume"
>
<template slot="append">立方米</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="规格" prop="productSpecificationList">
<el-button @click="addSpecs">若有多规格请在此配置</el-button>
</el-form-item>
<el-form-item label="成本" prop="costPrice">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入价格'"
v-model="modalData.costPrice"
<el-button @click="addSpecs">修改规格配置</el-button>
<el-table
v-if="modalData.specType === 1 && modalData.productSpecificationList.length > 0"
:data="modalData.productSpecificationList"
border
style="width: 100%; margin-top: 10px;"
>
<template slot="append">单位（元）</template>
</el-input>
</el-form-item>
<el-form-item label="市场价" prop="marketPrice">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入市场价'"
v-model="modalData.marketPrice"
>
<template slot="append">单位（元）</template>
</el-input>
</el-form-item>
<el-form-item label="库存" prop="stockNum">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入库存'"
v-model="modalData.stockNum"
></el-input>
</el-form-item>
<el-form-item label="重量" prop="weight">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入重量'"
v-model="modalData.weight"
>
<template slot="append">KG</template>
</el-input>
</el-form-item>
<el-form-item label="体积" prop="volume">
<el-input
:readonly="modalData.specType !== 0"
:placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入体积'"
v-model="modalData.volume"
>
<template slot="append">立方米</template>
</el-input>
</el-form-item>
<el-form-item label="其他属性" prop="otherAttribute">
<el-button @click="addAttribute">添加其他属性</el-button>
<el-table-column prop="attributeValue" label="属性" align="center"></el-table-column>
<el-table-column prop="costPrice" label="成本(元)" align="center"></el-table-column>
<el-table-column prop="marketPrice" label="市场价(元)" align="center"></el-table-column>
<el-table-column prop="stockNum" label="库存" align="center"></el-table-column>
<el-table-column prop="weight" label="重量(kg)" align="center"></el-table-column>
<el-table-column prop="volume" label="体积(m³)" align="center"></el-table-column>
</el-table>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="其他信息" name="其他信息">
<el-form-item label="产地" prop="productPlace">
<el-cascader
style="width: 50%;"
v-model="place"
@change="handlePlaceChange"
:options="$api.mer_admin.getCityOptions()"
@ -123,41 +147,36 @@
></el-cascader>
</el-form-item>
<el-form-item label="保质期" prop="shelfLife">
<el-input style="width:150px;" placeholder="请填写保质期" v-model="modalData.shelfLife">
<el-input style="width:50%;" placeholder="请填写保质期" v-model="modalData.shelfLife">
<div slot="suffix">天</div>
</el-input>
</el-form-item>
<el-form-item label="商品介绍图" prop="productIntroducePhoto">
<el-upload
class="upload-demo"
drag
:action="$api.mer_admin.uploadFile()"
:file-list="fileListOne"
list-type="picture"
list-type="picture-card"
:on-success="handleIntroducePhotoSuccess"
:on-remove="handleIntroducePhotoRemove"
:headers="{ token: 'Bearer ' + $cookie.get('token') }"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<i class="el-icon-plus"></i>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item label="商品视频" prop="productVideo">
<el-upload
class="upload-demo"
drag
:action="$api.mer_admin.uploadFile()"
:limit="1"
:file-list="fileListTwo"
list-type="text"
accept=".mp4,.avi,.mov,.wmv,.flv"
:on-success="handleVideoSuccess"
:on-remove="handleVideoRemove"
:headers="{ token: 'Bearer ' + $cookie.get('token') }"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将视频文件拖到此处，或<em>点击上传</em></div>
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">支持mp4、avi、mov等视频格式，建议不超过50MB</div>
</el-upload>
</el-form-item>
@ -171,16 +190,13 @@
</el-dialog>
<!-- 添加规格 -->
<addSpecifications @getSpecs="getSpecs" ref="addSpecifications"></addSpecifications>
<!-- 属性 -->
<addAttribute @getAttribute="getAttribute" ref="addAttribute"></addAttribute>
</div>
</template>
<script>
import addAttribute from "./add-attribute.vue";
import addSpecifications from "./add-specifications.vue";
import { debounce, cloneDeep } from "lodash";
export default {
components: { addSpecifications, addAttribute },
components: { addSpecifications },
data() {
return {
currentPanel: "基础信息",
@ -209,8 +225,6 @@ export default {
singlePrice: "",
//单库存
singleStock: "",
//其他属性
otherAttribute: [], //[{"name":"颜色","value":"黄色；屎黄色"}]
//折扣情况
discountActivity: {
// "endTime": "2024-08-31 00:00:00",
@ -334,54 +348,19 @@ export default {
handleClose() {
this.modalConfig.show = false;
},
handlePhotoChange(file, fileList) {
// console.log(fileList);
},
handlePhotoSuccess(res, file, fileList) {
console.log(res, fileList);
this.modalData.productPhotoList = fileList.map((item, index) => {
if (index == 0) {
return {
isMain: 1,
url: item.response ? item.response.data : item.url
};
} else {
return {
isMain: 0,
url: item.response ? item.response.data : item.url
};
}
});
console.log(this.modalData.productPhotoList);
this.fileList = fileList.map(item => {
return {
name: item.name,
url: item.response ? item.response.data : item.url
};
});
this.fileList = fileList;
this.updateProductPhotoList();
},
handlePhotoRemove(file, fileList) {
console.log(file, fileList);
this.modalData.productPhotoList = fileList.map((item, index) => {
if (index == 0) {
return {
isMain: 1,
url: item.url
};
} else {
return {
isMain: 0,
url: item.url
};
}
});
console.log(this.modalData.productPhotoList);
this.fileList = fileList.map(item => {
return {
name: item.name,
url: item.url
};
});
this.fileList = fileList;
this.updateProductPhotoList();
},
updateProductPhotoList() {
this.modalData.productPhotoList = this.fileList.map((item, index) => ({
isMain: index === 0 ? 1 : 0,
url: item.response ? item.response.data : item.url,
}));
},
handlePlaceChange(e) {
console.log(e);
@ -461,28 +440,29 @@ export default {
});
}, 300),
saveProduct(status) {
console.log("请求接口", this.modalData);
if (this.modalData.specType == 0) {
this.modalData.productAttributeList = [
const payload = { ...this.modalData };
console.log("请求接口", payload);
if (payload.specType == 0) {
payload.productAttributeList = [
{
id: "1821213026050191360",
attributeName: "重量",
attributeValue: "1斤"
}
];
this.modalData.productSpecificationList = [
payload.productSpecificationList = [
{
attributeValue: "默认",
costPrice: this.modalData.costPrice,
marketPrice: this.modalData.marketPrice,
stockNum: this.modalData.stockNum,
weight: this.modalData.weight,
volume: this.modalData.volume
costPrice: payload.costPrice,
marketPrice: payload.marketPrice,
stockNum: payload.stockNum,
weight: payload.weight,
volume: payload.volume
}
];
}
this.modalData.status = status;
this.$api.mer_admin.saveProduct(this.modalData).then(res => {
payload.status = status;
this.$api.mer_admin.saveProduct(payload).then(res => {
console.log(res);
this.$emit("queryList");
this.toggle();
@ -509,7 +489,6 @@ export default {
description: "",
merchantId: "",
name: "",
otherAttribute: [],
productAttributeList: [],
productCategoryId: "",
productIntroducePhoto: "",
@ -596,11 +575,6 @@ export default {
if (!row.productAttributeList) {
this.$set(this.modalData, "productAttributeList", []);
}
if (row.otherAttribute) {
this.modalData.otherAttribute = JSON.parse(row.otherAttribute);
} else {
this.modalData.otherAttribute = [];
}
console.log(this.modalData);
},
addSpecs() {
@ -639,23 +613,6 @@ export default {
this.$set(this.modalData, "productSpecificationList", tableData);
this.$set(this.modalData, "productAttributeList", AttributeList);
},
addAttribute() {
if (this.isAdd) {
this.$refs.addAttribute.toggle().add(this.modalData.otherAttribute);
} else {
this.$refs.addAttribute.toggle().update(this.modalData.otherAttribute);
}
},
getAttribute(data) {
console.log(data);
this.modalData.otherAttribute = [
{
name: data.name,
value: data.value.join(",")
}
];
console.log(this.modalData);
},
beforeTabLeave(activeName, oldActiveName) {
if (this.passCheck.includes(activeName)) {
return true;

518
src/views/modules/operation-management/commodity/popup/add-specifications.vue
View File

@ -1,142 +1,150 @@
<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>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
<div class="spec-container">
<div class="spec-table-container">
<el-table :data="AttributeData" border style="width: 100%">
<el-table-column label="属性名" align="center">
<template slot-scope="{ row }">
<el-input v-model="row.attributeName" placeholder="请输入属性名" @change="calculation"></el-input>
</template>
</el-table-column>
<el-table-column label="属性值" align="center">
<template slot-scope="{ row, $index }">
<div class="spec-values-wrapper">
<el-tag
:key="tag"
v-for="tag in row.attributeValue"
closable
:disable-transitions="false"
@close="handleClose($index, tag)"
>
{{ tag }}
</el-tag>
<el-input
class="input-new-tag"
v-if="row.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>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="{ $index }">
<el-button @click="deleteAttribute($index)" type="danger" icon="el-icon-delete" circle></el-button>
</template>
</el-table-column>
</el-table>
<div class="add-attribute-btn">
<el-button @click="addAttribute" type="primary" plain icon="el-icon-plus">添加属性</el-button>
</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>
<el-table :data="tableData" border style="width: 100%; margin-top: 20px;" max-height="50vh">
<el-table-column type="index" label="序号" width="60" align="center" fixed="left"></el-table-column>
<el-table-column prop="attributeValue" label="属性" align="center" min-width="160"></el-table-column>
<el-table-column label="成本（元）" align="center" min-width="160">
<template slot-scope="{ row }">
<el-input-number size="small" v-model="row.costPrice" :min="0" placeholder="请输入成本"></el-input-number>
</template>
</el-table-column>
<el-table-column label="市场价（元）" align="center" min-width="160">
<template slot-scope="{ row }">
<el-input-number size="small" v-model="row.marketPrice" :min="0" placeholder="请输入市场价"></el-input-number>
</template>
</el-table-column>
<el-table-column label="库存" align="center" min-width="160">
<template slot-scope="{ row }">
<el-input-number size="small" v-model="row.stockNum" :min="0" placeholder="请输入库存"></el-input-number>
</template>
</el-table-column>
<el-table-column label="重量（千克）" align="center" min-width="160">
<template slot-scope="{ row }">
<el-input-number size="small" v-model="row.weight" :min="0" placeholder="请输入重量"></el-input-number>
</template>
</el-table-column>
<el-table-column label="体积（立方米）" align="center" min-width="160">
<template slot-scope="{ row }">
<el-input-number size="small" v-model="row.volume" :min="0" placeholder="请输入体积"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="100" align="center">
<template slot-scope="{ $index }">
<el-popconfirm title="确认删除？" @confirm="deleteTableRow($index)" class="ml-1">
<el-button type="danger" size="mini" slot="reference">
删除
</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm" :loading="isLoading">{{ isAdd ? "确认添加" : "确认修改" }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { cloneDeep } from "lodash";
export default {
components: {},
data() {
return {
isAdd: true,
//监控对象数据
isLoading: false,
dialogVisible: false,
dialogTitle: "属性",
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));
}
toggle() {
this.dialogVisible = !this.dialogVisible;
return {
add: (productAttributeList, productSpecificationList) => {
this.modalConfig.title = "添加属性";
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.dialogTitle = "添加属性";
this.isAdd = true;
this.initData(productAttributeList, productSpecificationList);
},
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.dialogTitle = "编辑属性";
this.isAdd = false;
this.initData(productAttributeList, productSpecificationList);
},
};
},
init(row) {
this.modalData = row;
initData(productAttributeList, productSpecificationList) {
if (!productAttributeList || productAttributeList.length === 0) {
this.AttributeData = [
{
attributeName: "",
attributeValue: [],
inputVisible: false,
},
];
} else {
this.AttributeData = productAttributeList.map((item) => ({
attributeName: item.attributeName,
attributeValue: item.attributeValue ? item.attributeValue.split(",").filter(Boolean) : [],
id: item.id,
inputVisible: false,
}));
}
this.tableData = productSpecificationList || [];
},
handleClose(index, tag) {
this.AttributeData[index].attributeValue.splice(
@ -145,267 +153,125 @@ export default {
);
this.calculation();
},
//聚焦
showInput(index) {
console.log(index);
this.AttributeData.forEach((item, i) => {
if (i !== index) item.inputVisible = false;
});
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) {
if (inputValue && !this.AttributeData[index].attributeValue.includes(inputValue)) {
this.AttributeData[index].attributeValue.push(inputValue);
this.calculation();
}
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();
},
//计算属性
deleteTableRow(index) {
this.tableData.splice(index, 1);
},
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 {
attributeList: [
{
attributeName: this.AttributeData[i].attributeName,
attributeValue: item,
},
],
name: item,
};
});
} else {
data.forEach((it) => {
this.AttributeData[i].attributeValue.forEach((e) => {
console.log(it.attributeList);
let attributeList = JSON.parse(JSON.stringify(it.attributeList));
attributeList.push({
attributeName: this.AttributeData[i].attributeName,
attributeValue: e,
});
list.push({
attributeList,
name: it.name + e,
});
console.log(list);
// list.push(it + e);
});
});
data = list;
list = [];
}
const validAttributes = this.AttributeData.filter(
(attr) => attr.attributeName && attr.attributeValue.length > 0
);
if (validAttributes.length === 0) {
this.tableData = [];
return;
}
this.tableData = data.map((item) => {
let result = validAttributes[0].attributeValue.map((value) => [
{
attributeName: validAttributes[0].attributeName,
attributeValue: value,
},
]);
for (let i = 1; i < validAttributes.length; i++) {
let nextResult = [];
const { attributeName, attributeValue } = validAttributes[i];
for (const existing of result) {
for (const val of attributeValue) {
nextResult.push([
...existing,
{
attributeName,
attributeValue: val,
},
]);
}
}
result = nextResult;
}
this.tableData = result.map((attributeList) => {
const attributeValue = attributeList.map((attr) => attr.attributeValue).join("/");
// 保留旧数据
const oldData = this.tableData.find(item => item.attributeValue === attributeValue);
return {
attributeList: item.attributeList,
attributeValue: item.name,
salePrice: 0,
costPrice: 0,
marketPrice: 0,
stockNum: 0,
weight: 0,
volume: 0,
attributeList,
attributeValue,
salePrice: oldData?.salePrice || 0,
costPrice: oldData?.costPrice || 0,
marketPrice: oldData?.marketPrice || 0,
stockNum: oldData?.stockNum || 0,
weight: oldData?.weight || 0,
volume: oldData?.volume || 0,
};
});
console.log(data);
},
submitForm() {
this.$emit(
"getSpecs",
this.tableData,
this.AttributeData,
);
this.dialogVisible = false;
},
},
computed: {
tableCols() {
return [
{ title: "序号", type: "seq", width: "60px", fixed: "left" },
{
title: "属性",
field: "attributeValue",
align: "center",
"min-width": "160px",
},
{
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: "marketPrice",
align: "center",
"min-width": "160px",
type: "jsx",
render: ({ row }) => {
return (
<div>
<el-input-number
min={0}
size="small"
v-model={row.marketPrice}
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: "重量（千克）",
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: "操作",
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,
// disabled: () => this.tableData.length <= 0,
// submit: true,
handle: () => {
this.$emit(
"getSpecs",
this.tableData,
this.AttributeData,
);
this.toggle();
},
},
];
},
},
asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.el-row {
margin-bottom: 10px;
.spec-container {
max-height: 60vh;
overflow-y: auto;
.add-attribute-btn {
text-align: center;
margin-top: 10px;
}
}
.el-tag+.el-tag {
.spec-values-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 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>
</style>