使用vue + element Plus 实现商品添加规格
看效果图，分为两种但规格与多规格两种形式。
1.单规格
2.多规格
完整示例代码
从手工打造，写的不好多多指教，还有很大改善空间。
<template>
<div class="flex1">
<div class="right">
<el-card class="box-card mb15">
<p>商品规格</p>
<div class="typeRadio">
<el-radio v-model="data.radioType" :label="1">统一规格</el-radio>
<el-radio v-model="data.radioType" :label="2">多级规格</el-radio>
<span>*如有颜色、尺码等多种规格，请选择多级规格</span>
</div>
</el-card>
<!-- 统一规格 模块 -->
<el-card v-if="data.radioType == 1" class="box-card mb15">
<p>
价格库存
<el-tooltip effect="dark" content="当前页面全部为必填项" placement="right">
<i class="el-icon-question" style="font-size: 16px; margin-left: 5px"></i>
</el-tooltip>
</p>
<el-form ref="singleFormRef" label-position="left" :model="data.form" label-width="80px" :show-message="false">
<el-row :gutter="20">
<el-col :span="5">
<div class="grid-content bg-purple">
<el-form-item label="进价（￥）" prop="进价" :rules="{ required: true, trigger: 'change' }"
label-width="130px">
<el-input v-model="data.form.进价" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'')"
maxlength="8" show-word-limit></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple">
<el-form-item label="成本价（￥）" prop="成本价" :rules="[{ required: true, trigger: 'change' }]"
label-width="130px">
<el-input v-model="data.form.成本价" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'')"
maxlength="8" show-word-limit></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple">
<el-form-item label="最低售价（￥）" prop="销售价" :rules="[{ required: true, trigger: 'change' },
{ validator: (rule: any, value: any, callback: any) => {
const form = data.form;
if (Number(form.销售价) < Number(form.成本价)) {
callback('请输入销售价，且不能低于成本价');
} else {
return callback();
}
},
message: '请输入销售价，且不能低于成本价', trigger: 'blur' }]" label-width="130px">
<el-input type="text" v-model="data.form.销售价" placeholder="请输入"
oninput="value=value.replace(/[^\d\.]/g,'')" maxlength="8" autocomplete="no"
show-word-limit></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple">
<el-form-item label="市场价（￥）" prop="市场价" :rules="[{ required: true, trigger: 'change' },
{ validator: (rule: any, value: any, callback: any) => {
const form = data.form;
if (Number(form.市场价) < Number(form.销售价)) {
callback('请输入市场价，且不能低于销售价');
} else {
return callback();
}
}, message: '请输入市场价，且不能低于最低售价', trigger: 'blur'}]" label-width="130px">
<el-input type="text" v-model="data.form.市场价" placeholder="请输入"
oninput="value=value.replace(/[^\d\.]/g,'')" maxlength="8" autocomplete="no"
show-word-limit></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="5">-->
<!-- <el-form-item label="产品编码（选填）" label-width="auto">-->
<!-- <el-input v-model="data.form.party3sku" placeholder="产品编码" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-form-item label="库存量（ -1：表示库存充足 ）" label-width="230px" prop="库存"
:rules="{ required: true, trigger: 'change' }">
<el-input-number
v-model="data.form.库存"
:min="-1"
controls-position="right"
size="large"
/>
</el-form-item>
</el-form>
</el-card>
<!-- 多规格 模块 -->
<el-card v-else class="box-card mb15">
<p>
添加商品规格
<el-tooltip effect="dark" content="当前页面全部为必填项" placement="right">
<i class="el-icon-question" style="font-size: 16px; margin-left: 5px"></i>
</el-tooltip>
</p>
<el-form ref="FormatFormRef" :model="data" :scroll-to-error="true" :show-message="false"
require-asterisk-position="left" label-position="left">
<div v-for="(item, i) in data.Format1" class="Format1Box" :key="item.index"
style="position: relative; padding: 0 16px; background-color: rgb(243 243 243); margin-bottom: 15px">
<i v-if="data.Format1.length > 1" @click="deleteFormat(i)" style="z-index: 9999; font-size: 28px; top: 10px"
class="el-icon-circle-close absolute show"></i>
<el-row :gutter="20">
<el-col :span="5">
<div class="grid-content bg-purple">
<el-form-item label="规格名" :id="'Format1.' + i + '.AttributeName'" label-width="130px"
:prop="'Format1.' + i + '.AttributeName'" :rules=" { required: true, trigger: 'blur' }">
<el-input v-model="item.AttributeName" placeholder="请输入" maxlength="20"
show-word-limit></el-input>
</el-form-item>
</div>
</el-col>
<!-- <el-col v-if="i == 0" :span="6">-->
<!-- <div class="grid-content bg-purple">-->
<!-- <el-form-item label="">-->
<!-- <el-checkbox-group v-model="item.type">-->
<!-- <el-checkbox label="展示规格图片" name="1" />-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </el-col>-->
</el-row>
<el-row :gutter="20" style="align-items: flex-end;">
<div v-for="(arrItem, itemIndex) in item.product_Attribute_Value_models" class="arrItem" :key="itemIndex"
style="position: relative; display: inline-block;">
<!-- {{itemIndex}}-->
<el-form-item style="margin-left: 10px" label-width="80" :label="itemIndex == 0 ? '规格值' : ''"
:prop="'Format1.' + i + '.product_Attribute_Value_models.' + itemIndex + '.product_Attribute_Value'"
:rules=" { required: true, trigger: 'blur' }">
<el-input class="input"
v-model="item.product_Attribute_Value_models[itemIndex].product_Attribute_Value"
placeholder="请输入" maxlength="20" show-word-limit></el-input>
<i v-if="item.product_Attribute_Value_models.length > 1"
@click="deleteValue(itemIndex, item.product_Attribute_Value_models, i)" style=" font-size: 18px"
class="el-icon-circle-close absolute arrItemShow"></i>
</el-form-item>
</div>
<div class="add" @click="addValue(i)">+ 添加规格值</div>
</el-row>
</div>
<div class="add" style="width: 100%" @click="addFormat">+ 添加商品规格</div>
<div class="space-between mt20">
<p>规格明细</p>
<p style="cursor: pointer;" @click="data.DialogVisible = true">批量填充</p>
</div>
<el-table class="table" :span-method="objectSpanMethod" :data="data.tableData" empty-text="暂无数据"
ref="elTableRef" style="width: 100%">
<el-table-column v-for="(item, index) in data.Format1" :key="index" min-height="20" align="left"
:prop="item.AttributeName" :label="item.AttributeName" min-width="auto">
<template #default="{ row }">
<div>
<span style="min-height: 40px;">{{ row.column[index]['product_Attribute_Value'] }}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop="party3sku"
label="产品编码"
min-width="auto"
align="left"
>
<template #default="{ row }">
<el-input v-model="row.party3sku" placeholder="请输入"></el-input>
</template>
</el-table-column>
<el-table-column
prop="库存"
label="库存量"
min-width="auto"
align="left"
>
<template #header>
<span>库存量 </span>
<span style="color: red">*</span>
<el-tooltip effect="dark" content="库存为-1时表示充足" placement="right">
<i class="el-icon-question" style="font-size: 19px; margin-left: 5px"></i>
</el-tooltip>
</template>
<template #default="{ row }">
<el-form-item :prop="'tableData.' + row.Model_Value_orderID + '.库存'"
:rules=" { required: true, trigger: 'blur' }">
<el-input v-model="row.库存" placeholder="请输入" oninput="value=value.replace(/[^\d-]/g,'')"
maxlength="8"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="进价"
label="进价"
min-width="auto"
align="left"
>
<template #header>
<span>进价 </span>
<span style="color: red">*</span>
</template>
<template #default="{ row }">
<el-form-item :prop="'tableData.' + row.Model_Value_orderID + '.进价'"
:rules=" { required: true, trigger: 'blur' }">
<el-input v-model="row.进价" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'')"
maxlength="8"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="成本价"
label="成本价"
min-width="auto"
align="left"
>
<template #header>
<span>成本价 </span>
<span style="color: red">*</span>
</template>
<template #default="{ row }">
<el-form-item :prop="'tableData.' + row.Model_Value_orderID + '.成本价'"
:rules=" { required: true, trigger: 'blur' }">
<el-input v-model="row.成本价" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'')"
maxlength="8"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="销售价"
label="最低售价（￥）"
min-width="auto"
align="left"
>
<template #header>
<span>最低售价（￥） </span>
<span style="color: red">*</span>
</template>
<template #default="{ row }">
<el-form-item :prop="'tableData.' + row.Model_Value_orderID + '.销售价'"
:rules=" { required: true, trigger: 'blur' }">
<el-input v-model="row.销售价" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'')"
maxlength="8"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="市场价"
label="市场价"
min-width="auto"
align="left"
>
<template #header>
<span>市场价 </span>
<span style="color: red">*</span>
</template>
<template #default="{ row }">
<el-form-item :prop="'tableData.' + row.Model_Value_orderID + '.市场价'"
:rules=" { required: true, trigger: 'blur' }">
<el-input v-model="row.市场价" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'')"
maxlength="8"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</el-card>
<el-button @click="cancelFormat">取消</el-button>
<el-button type="primary" @click="addProductAttribute">确定</el-button>
</div>
<el-dialog
v-model="data.DialogVisible"
title="批量填充"
width="500px"
destroy-on-close
style="border-radius: 8px;"
>
<span>
<el-form :model="data.dialogForm" label-width="80px" label-position="right">
<el-form-item label="库存量" label-position="left">
<el-input v-model="data.dialogForm.库存" oninput="value=value.replace(/[^\d-]/g,'')" maxlength="8"
show-word-limit/>
</el-form-item>
<el-form-item label="进价">
<el-input v-model="data.dialogForm.进价" maxlength="8" oninput="value=value.replace(/[^\d\.]/g,'')"
show-word-limit/>
</el-form-item>
<el-form-item label="成本价">
<el-input v-model="data.dialogForm.成本价" oninput="value=value.replace(/[^\d\.]/g,'')" maxlength="8"
show-word-limit/>
</el-form-item>
<el-form-item label="最低售价">
<el-input v-model="data.dialogForm.销售价" oninput="value=value.replace(/[^\d\.]/g,'')" maxlength="8"
show-word-limit/>
</el-form-item>
<el-form-item label="市场价">
<el-input v-model="data.dialogForm.市场价" oninput="value=value.replace(/[^\d\.]/g,'')" maxlength="8"
show-word-limit/>
</el-form-item>
</el-form>
</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="data.DialogVisible = false">取消</el-button>
<el-button type="primary" @click="batchAdd">
确定
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import {ref, reactive, toRefs, onMounted, nextTick, defineEmits, defineProps} from "vue";
import {
ProductModelDetail,
SaveProduct
} from "@/api/index";
const emit = defineEmits(["colseFormat"]);
import {ElMessage} from "element-plus";
const props = defineProps({
id: {type: String, required: true},
'Account_ID': {type: String, required: true},
});
// interface ObjData {
// name: any;
// index: number;
// type: Array<any>;
// arr: Array<string>;
// }
let p = '';
const FormatFormRef = ref(null);
const singleFormRef = ref(null);
let data: any = reactive({
radioType: 2,
// elTable: elTable,
num: 9999,
FormatFormRef: FormatFormRef,
singleFormRef: singleFormRef,
form: {},
active: 0,
DialogVisible: false,
dialogForm: {},
manyForm: {
type: []
},
tableData: [{
库存: '',
进价: '',
成本价: '',
销售价: '',
市场价: '',
column: [{
value: '',
index: 0,
name: '',
}]
}],
Format1: [
{
name: '',
index: 0,
type: [],
value: '',
AttributeName: '',
'product_Attribute_Value_models': [{
value: '',
index: 0,
name: '',
ID: ''
}]
}
]
});
/**
* 合并单元格
* @param row
* @param column
* @param rowIndex
* @param columnIndex
*/
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex < data.Format1.length) {
let rowspan = 1;
data.Format1.forEach((element: any, index: number) => {
if (index > columnIndex) {
rowspan = rowspan * (element.product_Attribute_Value_models ? element.product_Attribute_Value_models.length : 1);
}
});
if (rowIndex % rowspan === 0) {
return {
rowspan: rowspan,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
};
const colseFormat = (params: any) => {
console.log(params);
emit("colseFormat", params);
};
/**
* 取消按钮
*/
const cancelFormat = () => {
colseFormat(false);
};
/**
* 规格名添加失去焦点事件
*/
const typeBlue = (e: any, i: number) => {
let obj = {[e.target.value]: ''};
let val = {[data.Format1[i].AttributeName]: ''};
};
/**
* 批量添加
*/
const batchAdd = () => {
data.tableData.forEach((item: any, i: number) => {
for (let key in data.dialogForm) {
item[key] = data.dialogForm[key];
}
});
data.dialogForm = {};
data.DialogVisible = false;
};
/**
* 数据转换 规格二维数组 转 排列组合一位数组
*/
const generateTableDatas = () => {
let types: any[][] = [];
data.Format1.forEach((element: { arr: Array<any> }, _index: any) => {
types.push(element.product_Attribute_Value_models);
});
let combine = function (chunks: any[][]) {
let res: Array<any[]> = [];
let helper = function (chunkIndex: number, prev: any[]) {
let chunk = chunks[chunkIndex];
let isLast = chunkIndex === chunks.length - 1;
for (let val of chunk) {
let cur: any[] = prev.concat(val);
if (isLast) {
// 如果已经处理到数组的最后一项了 则把拼接的结果放入返回值中
res.push(cur);
} else {
helper(chunkIndex + 1, cur);
}
}
};
// 从属性数组下标为 0 开始处理
// 并且此时的 prev 是个空数组
helper(0, []);
return res;
};
let datas = combine(types);
return datas;
};
/**
*
* @param i 添加规格值
*/
const addArrValue = (i: number) => {
let arr = data.Format1[i].product_Attribute_Value_models;
let obj = {
value: '',
ID: 0,
index: arr.length,
name: '',
'int_order': arr.length,
'product_Attribute_Value': '',
'product_Attribute_ID': data.Format1[i].ID
};
arr.push(obj);
};
/**
* 重置 table
*/
const setTable = (oldRowData: any) => {
data.tableData.splice(0);
let datas = generateTableDatas();
datas.forEach((_element: { arr: any }, _index: any) => {
data.tableData.push({
ID: 0,
库存: '',
进价: '',
成本价: '',
销售价: '',
'Model_Value': '',
市场价: '',
'Model_Value_orderID': _index,
'Account_ID': props.Account_ID,
'product_ID': props.id,
'product_title': '',
party3sku: '',
column: _element
});
});
data.tableData.forEach((tabItem: any, i: number) => {
let uid = '';
tabItem.column.forEach((column: any) => {
uid += column.index + '-';
});
tabItem['Model_Value_detail'] = uid;
if (oldRowData) {
const tableItemOld = oldRowData[uid];
for (let key in tableItemOld) {
if (key != 'column') {
tabItem[key] = tableItemOld[key];
}
}
tabItem['Model_Value_orderID'] = i;
tabItem['Model_Value_detail'] = uid;
}
});
};
/**
* 添加规格 值
*/
const addValue = (i: number) => {
let oldRowData: any = {};
data.tableData.forEach((tabItem: any) => {
let uid = '';
tabItem.column.forEach((column: any) => {
uid += column.index + '-';
});
oldRowData[uid] = tabItem;
});
addArrValue(i);
setTable(oldRowData);
};
/**
* 删除 规格 值
* @param i
* @param row
*/
const deleteValue = (i: number, row: Array<any>, pI: number) => {
row.splice(i, 1);
row.forEach((_element: any, _index: any) => {
_element.index = _index;
_element['int_order'] = _index;
});
// let datas = generateTableDatas();
let oldRowData: any = {};
data.tableData.forEach((tabItem: any) => {
let uid = '';
tabItem.column.forEach((column: any) => {
uid += column.index + '-';
});
oldRowData[uid] = tabItem;
});
setTable(oldRowData);
};
/**
* 添加商品规格
*/
const addFormat = () => {
let obj = {
ID: 0,
name: '',
AttributeName: '',
index: 1,
value: '',
type: [],
'Account_ID': props.Account_ID,
'org_ID': 0, // props.id,
"user_Group_ID": 327,
'product_Attribute_Value_models': []
};
data.Format1.push(obj);
addArrValue(data.Format1.length - 1);
setTable(null);
console.log(data.tableData);
};
/**
* 删除规格
* @param i
*/
const deleteFormat = (i: number) => {
deleteValue(i, data.Format1);
};
/**
* 获取商品规格
*/
const getProductModelDetail = async () => {
const {errorCode, dataTypes, dataNoAttribute, dataAttribute} = await ProductModelDetail({
'Account_shop_ID': 14889,
'Product_ID': props.id // props.id 80843
});
if (errorCode != 200) return false;
console.log(dataAttribute);
if (dataNoAttribute.length > 0) {
data.radioType = 1;
data.form = dataNoAttribute[0];
}
if (dataTypes.length > 0) {
data.radioType = 2;
let newAttribute = {};
dataAttribute.forEach((attr: any, index: number) => {
newAttribute[attr.Model_Value] = attr;
});
dataTypes.forEach((item: any, index: number) => {
// newAttribute
let Format = {
'Account_ID': props.Account_ID,
"user_Group_ID": 327,
'org_ID': 0, // props.id,
AttributeName: item.AttributeName,
name: item.AttributeName,
index: index,
type: [],
value: item.AttributeName,
ID: item.ID,
'product_Attribute_Value_models': []
};
let uid = '';
item.mv.forEach((mvItem: any, mvIndex: number) => {
let mv = {
value: mvItem.product_Attribute_Value,
index: mvIndex,
'int_order': mvIndex,
name: item.AttributeName,
ID: mvItem.ID,
'product_Attribute_Value': mvItem.product_Attribute_Value,
'product_Attribute_ID': item.ID,
};
Format.product_Attribute_Value_models.push(mv);
});
data.Format1.push(Format);
});
let datas = generateTableDatas();
datas.forEach((_element: any, _index: any) => {
let ModelValue = '';
let uid = '';
_element.forEach((item: any) => {
ModelValue += item.ID + '_';
uid += item.index + '-';
});
let obj = newAttribute[ModelValue];
data.tableData.push({
库存: obj?.库存,
进价: obj?.进价,
'Model_Value': ModelValue,
成本价: obj?.成本价,
销售价: obj?.销售价,
市场价: obj?.市场价,
ID: obj?.ID,
party3sku: obj?.party3sku,
'Model_Value_detail': uid,
'Model_Value_orderID': _index,
'product_ID': obj?.product_ID,
'product_title': '',
'Account_ID': props.Account_ID,
column: _element,
});
});
} else {
addFormat();
}
console.log(data.tableData);
};
const SaveProductReq = async (data: Array) => {
const {errorCode} = await SaveProduct(data);
if (errorCode != 200) {
ElMessage.error({
message: '提交失败，请稍后再试！',
type: "error",
});
} else {
ElMessage.success({
message: '保存成功！',
type: "success",
});
colseFormat(true);
}
};
/**
* 保存商品规格
*/
const addProductAttribute = () => {
let addList = {
// 'product_ID': props.id, // 商品 ID
'product_ID': props.id,
prodata: '',
types: '',
List: '',
};
if (data.radioType == 1) {
data.singleFormRef.validate((valid: any, object: any) => {
if (valid) {
addList.prodata = JSON.stringify(data.form);
SaveProductReq(addList);
}
});
} else {
data.FormatFormRef.validate(async (valid: any, object: any) => {
if (valid) {
let getTableData = JSON.parse(JSON.stringify(data.tableData));
getTableData.forEach((tabItem: any, tabIndex: number) => {
tabItem['product_ID'] = props.id;
let productTitle = "";
tabItem.column.forEach((SonItem: any, sonIndex: number) => {
if (sonIndex > 0) {
productTitle += ">" + SonItem.value;
} else {
productTitle += SonItem.value;
}
});
tabItem['product_title'] = productTitle;
delete tabItem.column;
});
addList.List = JSON.stringify(getTableData);
addList.types = JSON.stringify(data.Format1);
SaveProductReq(addList);
} else {
ElMessage.error({
message: '当前页面全部信息均为必填项',
type: "error",
});
// document.getElementById(Object.keys(object)[0]).scrollIntoView();
}
});
}
console.log(addList);
};
onMounted(() => {
data.Format1.splice(0);
data.tableData.splice(0);
getProductModelDetail();
// addFormat();
});
</script>
<style scoped lang="less">
.flex1 {
//display: flex;
.right {
//flex-grow: 1;
height: 100%;
overflow: auto;
.el-form {
width: 100%;
/deep/ .el-form-item {
display: flex;
flex-direction: column;
}
}
}
}
.box-card {
height: auto !important;
p {
margin: 5px 0 15px 0;
font-size: 15px;
height: auto;
}
.typeRadio {
span {
color: #999999;
}
}
/deep/ .el-form-item {
margin-bottom: 0;
}
}
.mb15 {
margin-bottom: 15px;
}
.mt20 {
margin-top: 20px;
}
/deep/ .el-button {
padding: 10px 40px;
}
.el-row {
align-items: self-end;
}
.add {
cursor: pointer;
border: #999999 dashed 1px;
width: 160px;
padding: 8px 0;
height: 16px;
line-height: 16px;
text-align: center;
display: inline-block;
margin: 0px 0 19px 0px;
}
.input {
margin: 0 20px 15px 0;
width: 260px
}
.space-between {
display: flex;
justify-content: space-between;
}
.table /deep/ .el-input__inner {
border: none;
//border-bottom: #fff 1px solid;
border-radius: 0;
padding-left: 0;
}
/deep/ .el-table__row {
min-height: 30px;
}
/deep/ .el-table__body {
min-height: 50px !important;
}
.absolute {
position: absolute;
right: 10px;
top: -6px;
color: #999;
display: none;
}
.Format1Box:hover .show {
display: block;
}
.arrItem:hover .arrItemShow {
display: block;
}
/deep/ .el-input-number__decrease {
border-bottom: 1px solid #cccccc;
line-height: 15px !important;
}
/deep/ .el-input-number__increase {
border-top: 1px solid #cccccc;
top: 3px !important;
}
</style>
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
