feat: 商品管理样式调优
This commit is contained in:
parent
7b5719829d
commit
8dbaa7aa36
|
@ -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>
|
||||||
|
|
|
@ -1,208 +1,105 @@
|
||||||
<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;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
.iconSize {
|
|
||||||
font-size: 15px;
|
|
||||||
// padding: 3px;
|
|
||||||
}
|
|
||||||
.el-tag + .el-tag {
|
.el-tag + .el-tag {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
@ -218,4 +115,5 @@ export default {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -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">支持mp4、avi、mov等视频格式,建议不超过50MB</div>
|
<div class="el-upload__tip" slot="tip">支持mp4、avi、mov等视频格式,建议不超过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;
|
||||||
|
|
|
@ -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>
|
|
||||||
</obj-modal>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
||||||
|
|
||||||
|
<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>
|
<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 {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tag + .el-tag {
|
.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>
|
Loading…
Reference in New Issue