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

View File

@ -140,8 +140,18 @@
</el-popconfirm> </el-popconfirm>
</template> </template>
</el-table-column> </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 }"> <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="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="priceAdjustment(row)">改价</el-button>
<el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="changeInventory(row)">改库存</el-button> <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="changeInventory(row)">改库存</el-button>

View File

@ -1,221 +1,119 @@
<template> <template>
<div> <el-dialog title="其他属性" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
<obj-modal <div class="attribute-container">
ref="modal" <el-alert title="示例:属性名称:温度,属性内容:常温,冷饮" type="info" show-icon :closable="false" style="margin-bottom: 16px"></el-alert>
labelWidth="150px" <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
: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-form-item label="属性名称:" prop="name">
<el-input <el-input style="width: 80%" placeholder="请输入属性名称" v-model="ruleForm.name" clearable></el-input>
style="width: 80%"
placeholder="请输入属性名称"
v-model="ruleForm.name"
clearable
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="属性内容:" prop="value"> <el-form-item label="属性内容:" prop="value">
<el-tag <el-tag :key="tag" v-for="tag in ruleForm.value" closable :disable-transitions="false" @close="handleClose(tag)">
:key="tag"
v-for="tag in ruleForm.value"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }} {{ tag }}
</el-tag> </el-tag>
<el-input <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
class="input-new-tag" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input> </el-input>
<el-button <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加内容</el-button>
v-else
class="button-new-tag"
size="small"
@click="showInput"
>+添加内容</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</obj-modal> <span slot="footer" class="dialog-footer">
</div> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">{{ isAdd ? "确认添加" : "确认修改" }}</el-button>
</span>
</el-dialog>
</template> </template>
<script> <script>
import { debounce, cloneDeep } from "lodash";
export default { export default {
components: {},
data() { data() {
return { return {
isAdd: true, isAdd: true,
// dialogVisible: false,
modalConfig: {
title: "属性",
show: false,
width: "80%",
},
modalData: {},
inputValue: "",
inputVisible: false, inputVisible: false,
inputValue: "",
ruleForm: { ruleForm: {
name: "", name: "",
value: [], value: [],
}, },
rules: { rules: {
name: [{ required: true, message: "请输入属性名称", trigger: "blur" }], name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
value: [ value: [{ required: true, type: 'array', message: "请添加属性内容", trigger: "change" }],
{
required: true,
message: "请输入属性内容",
trigger: "blur",
},
],
}, },
}; };
}, },
methods: { methods: {
queryTableData(pageNo, pageSize) {}, toggle() {
toggle(e) { this.dialogVisible = !this.dialogVisible;
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
}
if (e) {
this.init(cloneDeep(e.row));
}
return { return {
add: (data) => { 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.isAdd = true;
this.initData(data);
}, },
update: (data) => { update: (data) => {
console.log(data); this.isAdd = false;
if (data.length == 0) { this.initData(data);
this.ruleForm = { },
name: "",
value: [],
}; };
} else { },
initData(data) {
if (data && data.length > 0 && data[0].name) {
this.ruleForm = { this.ruleForm = {
name: data[0].name, name: data[0].name,
value: data[0].value.split(","), value: data[0].value ? data[0].value.split(",") : [],
}; };
} else {
this.ruleForm = { name: "", value: [] };
} }
this.isAdd = false; this.inputVisible = false;
}, this.inputValue = "";
};
},
init(row) {
this.modalData = row;
}, },
handleClose(tag) { handleClose(tag) {
this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1); this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
}, },
//
showInput() { showInput() {
this.inputVisible = true; this.inputVisible = true;
this.$nextTick((_) => { this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus(); this.$refs.saveTagInput.$refs.input.focus();
}); });
}, },
handleInputConfirm() { handleInputConfirm() {
let inputValue = this.inputValue; let inputValue = this.inputValue;
if (inputValue) { if (inputValue && !this.ruleForm.value.includes(inputValue)) {
this.ruleForm.value.push(inputValue); this.ruleForm.value.push(inputValue);
} }
this.inputVisible = false; this.inputVisible = false;
this.inputValue = ""; this.inputValue = "";
}, },
}, submitForm() {
computed: {
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: this.isAdd ? "确认添加" : "确认修改",
type: "primary",
loading: this.isLoading,
// submit: true,
handle: () => {
this.$refs.ruleForm.validate((valid) => { this.$refs.ruleForm.validate((valid) => {
if (valid) { if (valid) {
this.$emit("getAttribute", this.ruleForm); this.$emit("getAttribute", {
this.toggle(); name: this.ruleForm.name,
value: this.ruleForm.value.join(","),
});
this.dialogVisible = false;
} }
}); });
}, },
}, },
];
},
},
asyncComputed: {},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.Example { .attribute-container {
margin: 0 0 20px 20px; .el-tag + .el-tag {
width: 80%;
}
.iconSize {
font-size: 15px;
// padding: 3px;
}
.el-tag + .el-tag {
margin-left: 10px; margin-left: 10px;
} }
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.input-new-tag { .input-new-tag {
width: 90px; width: 90px;
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
}
} }
</style> </style>

View File

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

View File

@ -1,118 +1,134 @@
<template> <template>
<div> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
<obj-modal ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData" <div class="spec-container">
:modalHandles="modalHandles"> <div class="spec-table-container">
<div slot="dialog__content"> <el-table :data="AttributeData" border style="width: 100%">
<div v-for="(item, index) in AttributeData" :key="index"> <el-table-column label="属性名" align="center">
<el-row> <template slot-scope="{ row }">
<el-input style="width: 80%; margin: 0 20px 0 0" placeholder="请输入属性" v-model="item.attributeName" clearable> <el-input v-model="row.attributeName" placeholder="请输入属性名" @change="calculation"></el-input>
</el-input> </template>
<el-button @click="deleteAttribute(index)" type="danger" icon="el-icon-delete" circle></el-button> </el-table-column>
</el-row> <el-table-column label="属性值" align="center">
<template slot-scope="{ row, $index }">
<el-row> <div class="spec-values-wrapper">
<el-tag :key="tag" v-for="tag in item.attributeValue" closable :disable-transitions="false" <el-tag
@close="handleClose(index, tag)"> :key="tag"
v-for="tag in row.attributeValue"
closable
:disable-transitions="false"
@close="handleClose($index, tag)"
>
{{ tag }} {{ tag }}
</el-tag> </el-tag>
<el-input class="input-new-tag" v-if="item.inputVisible" v-model="inputValue" :ref="`saveTagInput${index}`" <el-input
size="small" @keyup.enter.native="handleInputConfirm(index)" @blur="handleInputConfirm(index)"> class="input-new-tag"
</el-input> v-if="row.inputVisible"
<el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+新增规格</el-button></el-row> v-model="inputValue"
</div> :ref="`saveTagInput${$index}`"
<el-row type="flex" justify="center"> size="small"
<el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row> @keyup.enter.native="handleInputConfirm($index)"
<obj-table-plus slot="dialog__after" style="height: 50vh" ref="oTable" @query="queryTableData" @blur="handleInputConfirm($index)"
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> --> </el-input>
</obj-table-plus> <el-button v-else class="button-new-tag" size="small" @click="showInput($index)">+ 增加属性值</el-button>
</div> </div>
</obj-modal> </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> </div>
</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> </template>
<script> <script>
import { debounce, cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
isAdd: true, isAdd: true,
// isLoading: false,
dialogVisible: false,
dialogTitle: "属性",
tableData: [], 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: [ AttributeData: [
{ {
attributeName: "", attributeName: "",
attributeValue: [], attributeValue: [],
inputVisible: false, inputVisible: false,
}, },
], // ],
input: "",
dynamicTags: [],
inputValue: "", inputValue: "",
}; };
}, },
methods: { methods: {
queryTableData(pageNo, pageSize) {}, toggle() {
toggle(e) { this.dialogVisible = !this.dialogVisible;
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
}
if (e) {
this.init(cloneDeep(e.row));
}
return { return {
add: (productAttributeList, productSpecificationList) => { add: (productAttributeList, productSpecificationList) => {
this.modalConfig.title = "添加属性"; this.dialogTitle = "添加属性";
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 = true; this.isAdd = true;
this.initData(productAttributeList, productSpecificationList);
}, },
update: (productAttributeList, productSpecificationList) => { update: (productAttributeList, productSpecificationList) => {
this.modalConfig.title = "编辑属性"; this.dialogTitle = "编辑属性";
console.log(productAttributeList, productSpecificationList); this.isAdd = false;
if (productAttributeList.length == 0) { this.initData(productAttributeList, productSpecificationList);
},
};
},
initData(productAttributeList, productSpecificationList) {
if (!productAttributeList || productAttributeList.length === 0) {
this.AttributeData = [ this.AttributeData = [
{ {
attributeName: "", attributeName: "",
@ -121,22 +137,14 @@ export default {
}, },
]; ];
} else { } else {
this.AttributeData = productAttributeList.map((item) => { this.AttributeData = productAttributeList.map((item) => ({
return {
attributeName: item.attributeName, attributeName: item.attributeName,
attributeValue: item.attributeValue.split(","), attributeValue: item.attributeValue ? item.attributeValue.split(",").filter(Boolean) : [],
id: item.id, id: item.id,
inputVisible: false, inputVisible: false,
}; }));
});
} }
this.tableData = productSpecificationList; this.tableData = productSpecificationList || [];
this.isAdd = false;
},
};
},
init(row) {
this.modalData = row;
}, },
handleClose(index, tag) { handleClose(index, tag) {
this.AttributeData[index].attributeValue.splice( this.AttributeData[index].attributeValue.splice(
@ -145,267 +153,125 @@ export default {
); );
this.calculation(); this.calculation();
}, },
//
showInput(index) { showInput(index) {
console.log(index); this.AttributeData.forEach((item, i) => {
if (i !== index) item.inputVisible = false;
});
this.AttributeData[index].inputVisible = true; this.AttributeData[index].inputVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
console.log(this.$refs[`saveTagInput${index}`]);
this.$refs[`saveTagInput${index}`][0].focus(); this.$refs[`saveTagInput${index}`][0].focus();
}); });
}, },
handleInputConfirm(index) { handleInputConfirm(index) {
let inputValue = this.inputValue; let inputValue = this.inputValue;
if (inputValue) { if (inputValue && !this.AttributeData[index].attributeValue.includes(inputValue)) {
this.AttributeData[index].attributeValue.push(inputValue); this.AttributeData[index].attributeValue.push(inputValue);
this.calculation();
} }
this.AttributeData[index].inputVisible = false; this.AttributeData[index].inputVisible = false;
this.inputValue = ""; this.inputValue = "";
this.calculation();
}, },
//
addAttribute() { addAttribute() {
this.AttributeData.push({ this.AttributeData.push({
attributeName: "", attributeName: "",
attributeValue: [], attributeValue: [],
inputVisible: false, inputVisible: false,
}); });
console.log(this.AttributeData);
}, },
//
deleteAttribute(index) { deleteAttribute(index) {
this.AttributeData.splice(index, 1); this.AttributeData.splice(index, 1);
this.calculation(); this.calculation();
}, },
// deleteTableRow(index) {
this.tableData.splice(index, 1);
},
calculation() { calculation() {
let data = []; const validAttributes = this.AttributeData.filter(
let list = []; (attr) => attr.attributeName && attr.attributeValue.length > 0
for (let i = 0; i < this.AttributeData.length; i++) { );
if (i == 0) {
data = this.AttributeData[i].attributeValue.map((item) => { if (validAttributes.length === 0) {
return { this.tableData = [];
attributeList: [ return;
}
let result = validAttributes[0].attributeValue.map((value) => [
{ {
attributeName: this.AttributeData[i].attributeName, attributeName: validAttributes[0].attributeName,
attributeValue: item, attributeValue: value,
}, },
], ]);
name: item,
}; for (let i = 1; i < validAttributes.length; i++) {
}); let nextResult = [];
} else { const { attributeName, attributeValue } = validAttributes[i];
data.forEach((it) => { for (const existing of result) {
this.AttributeData[i].attributeValue.forEach((e) => { for (const val of attributeValue) {
console.log(it.attributeList); nextResult.push([
let attributeList = JSON.parse(JSON.stringify(it.attributeList)); ...existing,
attributeList.push({ {
attributeName: this.AttributeData[i].attributeName, attributeName,
attributeValue: e, attributeValue: val,
}); },
list.push({ ]);
}
}
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, attributeList,
name: it.name + e, attributeValue,
}); salePrice: oldData?.salePrice || 0,
console.log(list); costPrice: oldData?.costPrice || 0,
// list.push(it + e); marketPrice: oldData?.marketPrice || 0,
}); stockNum: oldData?.stockNum || 0,
}); weight: oldData?.weight || 0,
data = list; volume: oldData?.volume || 0,
list = [];
}
}
this.tableData = data.map((item) => {
return {
attributeList: item.attributeList,
attributeValue: item.name,
salePrice: 0,
costPrice: 0,
marketPrice: 0,
stockNum: 0,
weight: 0,
volume: 0,
}; };
}); });
console.log(data);
}, },
}, submitForm() {
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( this.$emit(
"getSpecs", "getSpecs",
this.tableData, this.tableData,
this.AttributeData, this.AttributeData,
); );
this.toggle(); this.dialogVisible = false;
}, },
}, },
];
},
},
asyncComputed: {},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-row { .spec-container {
margin-bottom: 10px; max-height: 60vh;
overflow-y: auto;
.add-attribute-btn {
text-align: center;
margin-top: 10px;
}
} }
.spec-values-wrapper {
.el-tag+.el-tag { display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.el-tag + .el-tag {
margin-left: 10px; margin-left: 10px;
} }
.button-new-tag { .button-new-tag {
margin-left: 10px;
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.input-new-tag { .input-new-tag {
width: 90px; width: 90px;
margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
} }
</style> </style>