<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>规格测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(list,index) in list_init" :key="index">
<a class="btn_a" style="border: 0">{{list.name}}</a>
<a class="btn_a" @click="btn_a(list1, list.name)" v-for="(list1,index1) in list.content" :key="index1" style="border: 1px solid rgb(204, 204, 204)">
{{list1}}
</a>
<el-button type="primary" plain @click="addnew_content(list.content)">新增规格</el-button>
</li>
<li>
<el-button type="primary" plain @click="addnew_name">新增名称</el-button>
</li>
</ul>
<table style="margin-top: 50px;">
<tr>
<td>序号</td>
<td>规格</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr v-for="(list,index) in guige_see" :key="index" v-if="list.guige">
<td>
{{index + 1}}
</td>
<td>
{{list.guige}}
</td>
<td>
<el-input v-model="list.price" placeholder="请输入内容"></el-input>
</td>
<td>
<el-button @click="del_one(index)" type="danger" icon="el-icon-delete" circle></el-button>
</td>
</tr>
</table>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="30%">
<span v-if="guige_add_state">新增规格</span>
<span v-else>新增名称</span>
<h1></h1>
<el-input v-model="input" placeholder="请输入内容"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button v-if="guige_add_state" type="primary" @click="add_content">新增内容</el-button>
<el-button v-else type="primary" @click="add_name">新增名称</el-button>
</span>
</el-dialog>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
list_init: [],
dialogVisible: false, // 弹框控制
guige_add_state: true, // 控制新增的名称或是规格
title: '', // 控制弹框标题
content: [], // 暂存规格内容
input: '', // 弹框的输入内容
guige_josn: [],
arr_cun: [],
guige_see: []
}
},
methods: {
btn_a (list1, name) {
var this_1 = this
var obj = event.target
var color = obj.style.borderColor
console.log(list1)
console.log(name)
if(color == 'rgb(204, 204, 204)'){
obj.style.border = '1px solid red'
if(this_1.guige_josn.length == 0){
console.log('没有数据')
this_1.guige_josn.push({
name: name,
content: [list1]
})
}else{
// 假如已经添加过了
var addstate = false
for(var i in this_1.guige_josn){
if(this_1.guige_josn[i].name == name){
console.log('已经添加过name')
var index = this_1.guige_josn[i].content.indexOf(list1)
if(index == -1){
this_1.guige_josn[i].content.push(list1)
}
addstate = true
}
}
// 如果没添加过的
if(addstate == false){
console.log('没有添加过name')
this_1.guige_josn.push({
name: name,
content: [list1]
})
}
}
console.log(this_1.guige_josn)
}
else{
color = 'rgb(204, 204, 204)'
obj.style.border = '1px solid rgb(204, 204, 204)'
for(var i in this_1.guige_josn){
if(this_1.guige_josn[i].name == name){
var index = this_1.guige_josn[i].content.indexOf(list1)
this_1.guige_josn[i].content.splice(index, 1)
if(this_1.guige_josn[i].content.length == 0){
delete this_1.guige_josn[i]
}
}
}
}
this_1.computed_guige()
},
computed_guige () {
var this_1 = this
this_1.arr_cun = []
this_1.guige_see = []
for(var i in this_1.guige_josn){
this_1.arr_cun.push(this_1.guige_josn[i].content)
}
console.log('arr_cun')
console.log(this_1.arr_cun)
// 计算n个数组，每组取出一个,生成所以的序列
var arr = this_1.arr_cun
var sarr = [[]];
for (var i = 0; i < arr.length; i++) {
var tarr = [];
for (var j = 0; j < sarr.length; j++)
for (var k = 0; k < arr[i].length; k++)
tarr.push(sarr[j].concat(arr[i][k]));
sarr = tarr;
}
for(var i=0;i<sarr.length;i++){
sarr[i] = sarr[i].join(',')
}
for(var i in sarr){
this_1.guige_see.push({
guige: sarr[i],
price: ''
})
}
// this_1.guige_see = sarr
console.log(this_1.guige_see)
},
// 删除一个规格
del_one (index) {
var this_1 = this
console.log(index)
this_1.guige_see.splice(index, 1)
},
get_spec () {
var this_1 = this
$.ajax({
type: 'post',
data: '',
url: 'http://test.interface.carmanclub.com.cn/cym_back/backStage/goods/spec/findSpec',
success: function(json){
console.log(json)
this_1.list_init = json.data.list
for(var i in this_1.list_init){
this_1.list_init[i].content = this_1.list_init[i].content.split(',')
}
}
})
},
addnew_content (content) {
var this_1 = this
this_1.dialogVisible = true
this_1.guige_add_state = true
this_1.title = '新增规格'
this_1.input = ''
console.log(content)
this_1.content = content
},
add_content(){
var this_1 = this
if(this_1.input) this_1.content.push(this_1.input)
this_1.dialogVisible = false
},
addnew_name () {
var this_1 = this
this_1.input = ''
this_1.dialogVisible = true
this_1.guige_add_state = false
this_1.title = '新增名称'
},
add_name () {
var this_1 = this
if(this_1.input){
this_1.list_init.push({
name: this_1.input,
content: []
})
}
this_1.dialogVisible = false
}
},
mounted () {
var this_1 = this
this_1.get_spec()
var obj = [
{
name: '尺码',
content: ['X', 'L', 'M']
},
{
name: '颜色',
content: ['黑', '白']
},
{
name: '形状',
content: ['方', '圆', '正']
}
]
for(var i in obj){
}
}
})
</script>
<style>
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
.btn_a{
display: inline-block;
padding:10px;
margin: 10px;
}
.red{
border: 1px solid red;
}
td{
padding: 50px;
}
</style>
</body>
</html>