<template>
<div style="width: 700px;border: 1px solid #f00;text-align: center;" id="form-test">
<el-row :gutter="20">
<!-- 月份选择与方案新增 -->
<el-col :span="8">
<el-checkbox-group v-model="monthChangeList">
<el-checkbox v-for="item in monthList" :key="item.value" :label="item.value" style="margin-bottom: 15px;">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-col>
<el-col :span="15">
<el-form :model="form" size="small" label-width="30px">
<el-form-item label="尖：">
<el-row v-for="(item,index) in form.tip" :key="index" :gutter="20" style="margin-bottom:20px">
<el-col :span="15" class="tpfv">
<twoSelect :list="timeList" v-model="form.tip[index]"></twoSelect>
</el-col>
<el-col :span="4">
<el-button type="text" @click="tipAddon" icon="el-icon-plus"></el-button>
<el-button v-if="index>0" type="text" @click="tipDeleteOn(index)" icon="el-icon-delete"></el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="峰：">
<el-row v-for="(item,index) in form.peak" :key="index" :gutter="20" style="margin-bottom:20px">
<el-col :span="15" class="tpfv">
<twoSelect :list="timeList" v-model="form.peak[index]"></twoSelect>
</el-col>
<el-col :span="4">
<el-button type="text" @click="peakAddon" icon="el-icon-plus"></el-button>
<el-button v-if="index>0" type="text" @click="peakDeleteOn(index)" icon="el-icon-delete"></el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="平：">
<el-row v-for="(item,index) in form.flat" :key="index" :gutter="20" style="margin-bottom:20px">
<el-col :span="15" class="tpfv">
<twoSelect :list="timeList" v-model="form.flat[index]"></twoSelect>
</el-col>
<el-col :span="4">
<el-button type="text" @click="flatAddon" icon="el-icon-plus"></el-button>
<el-button v-if="index>0" type="text" @click="flatDeleteOn(index)" icon="el-icon-delete"></el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="谷：">
<el-row v-for="(item,index) in form.valley" :key="index" :gutter="20" style="margin-bottom:20px">
<el-col :span="15" class="tpfv">
<twoSelect :list="timeList" v-model="form.valley[index]"></twoSelect>
</el-col>
<el-col :span="4">
<el-button type="text" @click="valleyAddon" icon="el-icon-plus"></el-button>
<el-button v-if="index>0" type="text" @click="valleyDeleteOn(index)" icon="el-icon-delete"></el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-button type="primary" @click="submitOn">确定</el-button>
</div>
</template>
<script>
import twoSelect from './twoSelect.vue'
export default {
components:{twoSelect},
data(){
return{
monthList: [
{value: 1,label:'一月'},{value: 2,label:'二月'},{value: 3,label:'三月'},{value: 4,label:'四月'},
{value: 5,label:'五月'},{value: 6,label:'六月'},{value: 7,label:'七月'},{value: 8,label:'八月'},
{value: 9,label:'九月'},{value: 10,label:'十月'},{value: 11,label:'十一月'},{value: 12,label:'十二月'},
],
// 月份选择
monthChangeList: [],
// 时间范围
timeList:[],
checkList: [],
form: {
tip: [[0, 1]], // 尖
peak: [[0, 0]], // 峰
flat: [[0, 0]], // 平
valley: [[0, 0]] // 谷
},
}
},
mounted(){
this.maskListOn()
},
methods:{
selectChange(data,id){
console.log(data,id)
},
/**
* 时间数组赋值
*/
maskListOn() {
let arr = []
// 半小时制
for(let i = 0;i<49;i++){
if(i % 2 == 0){
// 偶数显示
arr[i] = i/2<10? '0'+i/2 + ':00':i/2 + ':00'
}else{
arr[i] = Math.floor(i/2)<10? '0'+Math.floor(i/2) + ':30':Math.floor(i/2) + ':30'
}
}
this.timeList = arr.map((item,index)=>{
// console.log(item)
let obj = {
label: item,
value:index,
head:false, // 是否以当前数字为开头
end:false, // 是否以当前数字为结尾
}
return obj
})
// console.log(this.timeList)
},
/**
* 尖时段
*/
// 新增
tipAddon() {
this.form.tip.push(['', ''])
},
// 删除
tipDeleteOn(index) {
this.form.tip.splice(index, 1)
},
/**
* 峰时段
*/
// 新增
peakAddon() {
this.form.peak.push(['', ''])
},
// 删除
peakDeleteOn(index) {
this.form.peak.splice(index, 1)
},
/**
* 平时段
*/
// 新增
flatAddon() {
this.form.flat.push(['', ''])
},
// 删除
flatDeleteOn(index) {
this.form.flat.splice(index, 1)
},
/**
* 谷时段
*/
// 新增
valleyAddon() {
this.form.valley.push(['', ''])
},
// 删除
valleyDeleteOn(index) {
this.form.valley.splice(index, 1)
},
/**
* 尖峰平谷之一的单个数据的去重+可合并提醒，name是对象键值
*/
duplicateRemovalAndMerge(name,form){
// 成绩最后结果
let list = []
let copyList = []
// 循环尖峰平谷对应数组的子数组数据
form[name].map((item, index) => {
let arr = []
// 数组拓充
for(let i = item[0]; i <= item[1] ; i++){
arr.push(i)
}
list.push(arr)
})
// 数组合并
list = list.flat()
copyList = [...new Set(list)]
return list.length-copyList.length
},
submitOn() {
// console.log(this.form)
// 键值内部判断是否重复
for(let i in this.form){
if(this.duplicateRemovalAndMerge(i,this.form) > 0){
this.$message.error('有可合并时间段，请重新选择')
return false
}
}
// 内部无重复，this.form数据都能用，判断this.form键与键之间的数据
// 数据改造，已知每个数只有两个属性，头或尾，两个头或两个�
