sku组件
<template>
<div>
<el-form label-width="100px">
<el-form-item label="卖品规格" v-if="cinemaId">
<!-- 循环属性名称 -->
<el-button
v-for="(item, idx) in shuxingname"
:key="idx"
@click="clickname(item)"
>{{ item.name }}</el-button
>
<!-- 新增卖品规格 -->
<el-popover
placement="top"
width="240"
trigger="click"
style="margin-left: 10px"
>
<div style="display: flex; grid-gap: 10px">
<el-input
placeholder="新增卖品规格"
v-model.trim="skuname"
@keyup.enter.native="addskuname"
/>
<el-button type="primary" @click="addskuname">确定</el-button>
</div>
<el-button slot="reference" type="text" style="margin-right: 25px"
>新增卖品规格</el-button
>
</el-popover>
<!-- 属性值列表 -->
<div v-if="status || commoditySkus">
<div v-for="(item, index) in sxvaluelist" :key="index">
{{ item.name }}
<div>
<el-tag
v-for="(e, index) in item.valueList"
:key="index"
closable
:disable-transitions="false"
@close="handleClose(e, index)"
>
{{ e.name }}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible[index]"
v-model="value"
:ref="index"
size="small"
@keyup.enter.native="handleInputConfirm(index, item)"
@blur="handleInputConfirm(index, item)"
>
</el-input>
<el-button
v-else
class="button-new-tag"
size="small"
@click="showInput(index)"
>+ 新增</el-button
>
<el-button
class="button-new-tag"
size="small"
@click="removeListItem(index)"
>删除</el-button
>
</div>
</div>
</div>
<div v-if="status || commoditySkus">
<!-- 批量设置 -->
<div class="goods-spec_info-forms">
<el-popover placement="top" width="240" trigger="click">
<div style="display: flex; grid-gap: 10px">
<el-input
placeholder="请输入库存"
v-model.trim="batch_input"
@keyup.enter.native="batchSet('stockNum')"
/>
<el-button type="primary" @click="batchSet('stockNum')"
>确定</el-button
>
</div>
<el-button slot="reference" type="text" style="margin-right: 25px"
>设置库存</el-button
>
</el-popover>
<el-popover placement="top" width="240" trigger="click">
<div style="display: flex; grid-gap: 10px">
<el-input
placeholder="请输入卖品市场价"
v-model.trim="batch_input"
@keyup.enter.native="batchSet('marketPrice')"
/>
<el-button type="primary" @click="batchSet('marketPrice')"
>确定</el-button
>
</div>
<el-button slot="reference" type="text" style="margin-right: 25px"
>设置卖品市场价</el-button
>
</el-popover>
<el-popover placement="top" width="240" trigger="click">
<div style="display: flex; grid-gap: 10px">
<el-input
placeholder="请输入卖品售价"
v-model.trim="batch_input"
@keyup.enter.native="batchSet('salePrice')"
/>
<el-button type="primary" @click="batchSet('salePrice')"
>确定</el-button
>
</div>
<el-button slot="reference" type="text" style="margin-right: 25px"
>设置卖品售价</el-button
>
</el-popover>
<el-popover placement="top" width="240" trigger="click">
<div style="display: flex; grid-gap: 10px">
<upload-picture
ref="uploadPicture"
:limit="1"
@uploadSuccess="piliang"
/>
</div>
<el-button slot="reference" type="text" style="margin-right: 25px"
>设置图片</el-button
>
</el-popover>
</div>
<!-- 表格数据 -->
<el-table :data="table_data" border height="400">
<el-table-column
align="center"
:label="specItem.name"
v-for="(specItem, itemIndex) in sxvaluelist"
:key="itemIndex"
:prop="specItem.name"
>
</el-table-column>
<el-table-column label="卖品市场价" prop="marketPrice">
<template slot-scope="scope">
<el-input
@change="changeInput"
v-model="scope.row.marketPrice"
></el-input>
</template>
</el-table-column>
<el-table-column label="卖品售价" prop="salePrice">
<template slot-scope="scope">
<el-input
@change="changeInput"
v-model="scope.row.salePrice"
></el-input>
</template>
</el-table-column>
<el-table-column label="库存" prop="stockNum">
<template slot-scope="scope">
<el-input
@change="changeInput"
v-model="scope.row.stockNum"
></el-input>
</template>
</el-table-column>
<el-table-column
label="图片"
align="center"
width="200"
prop="imgs"
>
<template slot-scope="scope">
<div @click="selectedingImageSpecIndex = scope.$index">
<upload-picture
ref="uploadPicture"
:limit="1"
@uploadSuccess="uploadPicSuccess"
/>
</div>
<div v-for="(d, ind) in scope.row.imgs" :key="ind">
<img
style="
width: 60px;
height: 60px;
border-radius: 5px;
cursor: pointer;
object-fit: cover;
"
class="xiugaitu"
:src="'http://test.material.jianpiao.net/' + d"
/>
</div>
</template>
</el-table-column>
</el-table>
{{ table_data.length }}条
</div>
</el-form-item>
<el-form-item label="卖品规格" v-else>
<div style="color: red">请先选择影院!</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
import request from "@/utils/request";
import UploadPicture from "@/components/UploadPicture";
export default {
components: {
UploadPicture,
},
data() {
return {
shuxingname: [], //属性列表
sxvaluelist: [], //属性值列表
value: "", //属性值
skuname: "", //属性名称
inputVisible: false, //属性的状态
status: false, // 属性是否显示
table_data: [], // 表格中的数据
currentIndex: null, // 当前点击的项的索引
batch_input: "", //批量设置
selectedingImageSpecIndex: null, // 获取上传图片的表格索引
qiniuAddr: "",
};
},
props: {
cinemaId: {
type: Number,
},
commoditySkus: {
type: Array,
},
},
watch: {
cinemaId(e) {
if (e) {
// console.log(e, "id");
this.getlist();
}
},
commoditySkus(e) {
console.log(e,1);
if (e) {
console.log(e,2);
console.log("修改来的");
// console.log(e);
this.table_data = this.editlooklist(e);
let newedit = this.editlookheardlist(e);
this.sxvaluelist = newedit[0].attributes;
// console.log(newedit[0].attributes, 555);
// console.log(this.table_data);
}
},
},
mounted() {
this.getlist();
},
methods: {
// 图片上传
uploadPicSuccess(picList) {
const tempImgs = [];
for (const item of picList) {
tempImgs.push(item.url.replace(this.qiniuAddr, ""));
}
this.table_data[this.selectedingImageSpecIndex].imgs = tempImgs;
console.log(tempImgs, "组件方法");
this.$emit("tableListEmit", this.table_data);
},
// 卖品市场价,卖品售价,库存
changeInput(e) {
console.log(e);
this.$emit("tableListEmit", this.table_data);
},
// 获取属性列表
getlist() {
let obj = {
cinemaId: this.cinemaId,
pageNum: 1,
pageSize: 10,
};
if (this.cinemaId) {
request.get("/commodity/sku", { params: obj }).then((res) => {
if (res.code === 0) {
this.shuxingname = res.data.list;
// console.log(res.data.list);
}
});
}
},
// 根据属性名渲染对应属性值
clickname(e) {
// console.log(e.name);
for (let i = 0; i < this.shuxingname.length; i++) {
if (this.shuxingname[i].name === e.name) {
const newObj = { ...this.shuxingname[i] };
const index = this.sxvaluelist.findIndex(
(obj) => obj.name === newObj.name
);
if (index === -1) {
this.sxvaluelist.push(newObj);
} else {
this.sxvaluelist[index] = newObj;
}
}
}
console.log(this.sxvaluelist, "属性列表");
const combinations = this.generateCombinations(this.sxvaluelist);
this.table_data = combinations;
console.log(this.table_data, "表格数据");
this.$emit("tableListEmit", this.table_data);
this.status = true;
// console.log(this.table_data);
},
// 回溯算法求表格数据
generateCombinations(options) {
let combinations = [];
function backtrack(currentIndex, currentObj) {
if (currentIndex === options.length) {
combinations.push(currentObj);
return;
}
const currentOption = options[currentIndex];
if (!currentOption.valueList || currentOption.valueList.length === 0) {
backtrack(currentIndex + 1, currentObj);
return;
}
for (let i = 0; i < currentOption.valueList.length; i++) {
const value = currentOption.valueList[i];
const newObj = {
...currentObj,
[currentOption.name]: value.name,
attrValueIds: [...(currentObj.attrValueIds || []), value.id],
marketPrice: 0,
salePrice: 0,
stockNum: 0,
imgs: [],
};
backtrack(currentIndex + 1, newObj);
}
}
backtrack(0, {});
return combinations;
},
// 编辑回显 修改成表格的数据格式
editlooklist(e) {
return e.map((item) => {
const attributesMap = item.attributes.reduce((acc, attr) => {
acc[attr.attrName] = attr.attrValueName;
return acc;
}, {});
return {
attrValueIds: item.attributes.map((attr) => attr.attrValueId),
salePrice: item.salePrice,
stockNum: item.stockNum,
marketPrice: item.marketPrice,
imgs: item.imgs,
...attributesMap,
};
});
},
// 编辑回显 修改成表格的数据格式
editlookheardlist(e) {
return e.map((item) => ({
attributes: item.attributes.map((attr) => ({
name: attr.attrName,
attrValueId: attr.attrValueId,
attrValueName: attr.attrValueName,
})),
}));
},
// 批量设置
batchSet(propName) {
const value = Number(this.batch_input);
if (isNaN(value) || value < 0) {
this.$message({
message: `请输入正确的数值`,
type: "warning",
});
return;
}
for (let i = 0; i < this.table_data.length; i++) {
this.table_data[i][propName] = value;
}
this.batch_input = "";
},
piliang(picList) {
const tempImgs = [];
for (const item of picList) {
tempImgs.push(item.url.replace(this.qiniuAddr, ""));
}
let data_length = this.table_data.length;
for (let i = 0; i < data_length; i++) {
this.table_data[i].imgs = tempImgs;
}
},
// 点击标签关闭时的事件处理函数
handleClose(tag, index) {
const name = tag.name;
for (let i = 0; i < this.sxvaluelist.length; i++) {
const item = this.sxvaluelist[i];
const valueIndex = item.valueList.findIndex(
(valueItem) => valueItem.name === name
);
if (valueIndex !== -1) {
item.valueList.splice(valueIndex, 1);
break;
}
}
const combinations = this.generateCombinations(this.sxvaluelist);
this.table_data = combinations;
this.$emit("tableListEmit", this.table_data);
},
// 新增属性值
showInput(index) {
this.currentIndex = index;
this.inputVisible = this.sxvaluelist.map((item, i) => i === index);
this.$nextTick(() => {
const inputElement = this.$el.querySelector(
`[data-index="${index}"] .input-new-tag`
);
inputElement && inputElement.focus();
});
},
// 新增属性名
addskuname() {
if (!this.skuname) return;
request
.post("/commodity/sku", {
cinemaId: this.cinemaId,
name: this.skuname,
})
.then((res) => {
if (res.code === 0) {
this.$message({
message: `添加成功`,
type: "success",
});
this.getlist();
console.log(this.shuxingname);
this.skuname = "";
}
});
},
// input 属性值
handleInputConfirm(index, item) {
const value = this.value.trim();
if (value) {
this.sxvaluelist[index].valueList.push({ name: value });
}
this.inputVisible = this.sxvaluelist.map((item, i) =>
i === index ? false : this.inputVisible[i]
);
request
.post("/commodity/sku/value", {
attrId: item.id,
value: value,
})
.then((res) => {
if (res.code === 0) {
this.$message({
message: `添加成功`,
type: "success",
});
this.getlist();
}
});
const combinations = this.generateCombinations(this.sxvaluelist);
this.table_data = combinations;
this.$emit("tableListEmit", this.table_data);
this.value = "";
},
// 删除当前属性名称
removeListItem(index) {
this.sxvaluelist.splice(index, 1);
const combinations = this.generateCombinations(this.sxvaluelist);
this.table_data = combinations;
this.$emit("tableListEmit", this.table_data);
// console.log(this.table_data);
},
},
};
</script>
<style lang="scss" scoped>
.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;
}
.goods-spec_info-forms {
padding: 15px 10px;
border: 1px solid #eee;
border-radius: 2px;
}
</style>