<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
.Multiple-specifications {
margin: 18px 0 0 0;
}
.Specification-list {
margin: 18px 0 0 0;
}
.img_marsk {
width: 80px;
height: 80px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 999999;
top: 0px;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.checkout_icon {
padding: 3px;
display: inline-block;
font-size: 16px;
margin-right: 10px;
;
text-align: center;
position: relative;
border-radius: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
<!-- 多规格 -->
<div class="Multiple-specifications">
<el-card title="多规格" style="border-radius: 10px;">
<div style="display: flex;flex-flow: row wrap;">
<div v-for="(item, index) in dragData" :key="index">
<div label="规格名" :rules="{required: true, message: '请输入规格名',trigger: 'blur'}">
<div>
<el-input v-model="item.title" placeholder="规格名" style="width:200px"
@change="makenewTabel(item, 'ruleName', '')" ></el-input>
<el-button @click="deletRow(index, item)">删除</el-button>
</div>
</div>
<div label="规格值" :rules="{required: true, message: '请输入规格值',trigger: 'blur'}">
<div v-for="(it, ix) in item.num" :key="ix" style="margin-left: 20px;">
<div>
<el-input v-model="it.value" placeholder="规格值" style="width:200px"
@change="makenewTabel(item, 'value', it)" ></el-input>
<el-button @click="deletNum(ix, it, item, index)">删除</el-button>
</div>
</div>
</div>
<div @click="addSku(index)">+添加规格值</div>
</div>
</div>
<div @click="addOtherSku">+添加其他规格
</div>
</el-card>
</div>
<!-- 规格列表 -->
<div class="Specification-list">
<el-card title="规格列表" style="border-radius: 10px;">
<el-table :data="duoTableData">
<el-table-column v-for="(val, key) in columns2" :key="key" :prop="val.dataIndex" :label="val.title">
<template slot-scope="scope">
<el-input placeholder="请输入" v-model="scope.row[val.dataIndex]" @blur="emitTableData"></el-input>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</div>
</div>
</div>
</body>
<!-- 引入vue mete -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
tableData:[],
duoTableData: [],
dragData: [],
columns2: [],
columns: [],
specificationListdata: [],
}
},
created() {
this.initDrag()
this.columns = [
{
title: `售价(US$})`,
dataIndex: 'salesPrice',
},
{
title: `原价(US$})`,
dataIndex: 'originalPrice',
},
{
title: '重量',
width: '180',
},
{
title: '库存数量',
dataIndex: 'goodsStock',
},
{
title: 'SKU（货号）',
dataIndex: 'skuNo',
},
{
title: '条形码',
dataIndex: 'barCode',
},
{
title: '操作',
dataIndex: 'action',
}
]
this.resetColumns()
},
methods: {
// 重置表头
/***
* dragData的默认数据
*/
initDrag() {
this.dragData = this.tableData.length > 0 ? JSON.parse(JSON.stringify(this.tableData)) : [{
title: '',
oldTitle: '',
num: [{
value: '',
oldValue: ''
}]
}]
// 如果是新增取消确定 // 或者单规格，就要清空表头and 表格数据
// 把old 也要清空
this.duoTableData = []
},
/**
* 得到列
*/
resetColumns() {
const rules = []
for (var j = 0; j < this.dragData.length; j++) {
const obj = {}
obj.title = this.dragData[j].title
obj.dataIndex = `newHead${obj.title}`
rules.push(obj)
}
const columns = [...this.columns]
columns.splice(1, 0, ...rules)
this.columns2 = columns
},
async deletRow(index, item) {
if (item.title) {
const ret = await this.$confirm(`确定要删除 ${item.title} 规格？`)
if (!ret) {
return false
}
}
this.dragData.splice(index, 1)
this.tableData = this.dragData
this.makenewTabel(item, 'deleteRule', index)
},
async deletNum(index, ix, item, iii) {
if (item.num < 1) {
this.$message.error('必须有一个规格值', 2)
return false
}
if (ix.value) {
let title = `确定要删除 ${item.title} 规格中的 ${ix.value}？`
if (!item.title) {
title = `确定要删除 ${ix.value} 规格值？`
}
const ret = await this.$confirm(title)
if (!ret) {
return false
}
}
this.dragData[iii].num.splice(index, 1)
this.makenewTabel(item, 'deleteRule', ix)
},
addSku(index) {
this.dragData[index].num.push({
value: '',
oldValue: ''
})
},
addOtherSku() {
this.dragData.push({
title: '',
oldTitle: '',
num: [{
value: '',
oldValue: ''
}]
})
},
/** 按规格得到笛卡尔乘积列表 handleList */
getDecareList() {
const ret = []
if (this.dragData.length === 0) {
return ret
} else if (this.dragData.length === 1) {
for (var m = 0; m < this.dragData[0].num.length; m++) {
const e = {}
e[`newHead${this.dragData[0].title}`] = this.dragData[0].num[m].value
e['weightUnit'] = 'g'
e['goodsStock'] = 0
ret.push(e)
}
return ret
}
// 展开table中的数据
const arr1 = this.dragData.map((item) => {
const res = []
item.num.forEach(v => {
res.push({
value: v.value,
ruleName: item.title
})
})
return res
})
// 构造笛卡尔乘积
const r = arr1.reduce((col, row) => {
const res = []
col.forEach(c => {
row.forEach(r => {
const t = Array.isArray(c) ? [...c] : [`#${c.ruleName}#${c.value}`]
t.push(`#${r.ruleName}#${r.value}`)
res.push(t)
})
})
return res
})
const pattern = new RegExp('#([^#]+)#(.*)')
let match = []
for (var i = 0; i < r.length; i++) {
const e = {}
for (var k = 0; k < r[i].length; k++) {
match = pattern.exec(r[i][k])
if (match) {
e[`newHead${match[1]}`] = match[2]
e['weightUnit'] = 'g'
e['goodsStock'] = 0
}
}
ret.push(e)
}
return ret
},
/*** 规格生成 */
makenewTabel(item, type, value) {
this.resetColumns()
// 深拷贝一个值
const copyListData = JSON.parse(`${JSON.stringify(this.duoTableData)}`)
// 得到笛卡尔列
const specificationListdata = this.getDecareList()
const oldDataList = {}
let speckey = []
// 原值
let key = ''
let title = ''
// 得到规格名用于data中旧的规格信息
const ruleNames = this.dragData.map(table => {
return `newHead${table.title}`
})
copyListData.forEach(data => {
speckey = []
this.dragData.forEach(table => {
// 值变化
title = `newHead${table.title}`
key = data[title]
if (!key) {
if (type === 'value') {
data[title] = value.value
key = value.value
}
}
if (type === 'value' && table === item && key === value.oldValue) {
data[`newHead${table.title}`] = value.value
key = value.value
} else {
if (type === 'ruleName' && table === item) {
data[`newHead${table.title}`] = data[`newHead${table.oldTitle}`]
key = data[`newHead${table.oldTitle}`]
}
}
speckey.push(key)
})
// 删除原来的旧列原来的旧值
Object.keys(data).forEach(key => {
if (key.startsWith('newHead') && !ruleNames.includes(key)) {
delete data[key]
}
})
oldDataList[speckey.join('-')] = data
})
// 新值
const temps = specificationListdata
temps.forEach((data, index) => {
speckey = []
this.dragData.forEach(table => {
speckey.push(data[`newHead${table.title}`])
})
key = speckey.join('-')
if (oldDataList[key]) {
temps[index] = oldDataList[key]
}
})
this.duoTableData = temps
if (type !== 'reset') {
if (type === 'value') {
value.oldValue = value.value
} else {
item.oldTitle = item.title
}
}
},
// 每次失去焦点后，把值emit
emitTableData() {
const emitData = {
tableData: this.tableData,
specificationListdata: this.specificationListdata
}
},
}
});
</script>
</html>
标签：const,title,value,生成,item,添加,dragData,table From： https://www.cnblogs.com/kaijiangyugty/p/18150363