|
@@ -1,22 +1,22 @@
|
|
|
<template>
|
|
|
<div class="single-container">
|
|
|
- <el-form :model="form">
|
|
|
+ <el-form>
|
|
|
<div class="operation-row">
|
|
|
- <el-checkbox-group size="small" v-model="form.defaultCheckeds" @change="emitValues">
|
|
|
- <el-checkbox-button v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="i" :label="i" :disabled="(form.defaultCheckeds[0]!=undefined&&form.defaultCheckeds[0]!=i)||form.sameToNones[0]==i||form.sameToBans[0]==i">默认选中</el-checkbox-button>
|
|
|
+ <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="1+i" v-model="rows[i].defaultSelect" @change="emitValues(i,'hasDefault',rows[i].defaultSelect)">
|
|
|
+ <el-checkbox-button :label="i" :disabled="hasNone==i||hasBan==i||(hasDefault!=-1&&hasDefault!=i)">默认选中</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
- <el-checkbox-group size="small" v-model="form.sameToNones" @change="emitValues">
|
|
|
- <el-checkbox-button v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="i" :label="i" :disabled="(form.sameToNones[0]!=undefined&&form.sameToNones[0]!=i)||form.defaultCheckeds[0]==i||form.sameToBans[0]==i">同“无”类型</el-checkbox-button>
|
|
|
+ <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="2+i" v-model="rows[i].isNone" @change="emitValues(i,'hasNone',rows[i].isNone)">
|
|
|
+ <el-checkbox-button :label="i" :disabled="hasDefault==i||hasBan==i||(hasNone!=-1&&hasNone!=i)">同“无”类型</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
- <el-checkbox-group size="small" v-model="form.sameToBans" @change="emitValues">
|
|
|
- <el-checkbox-button v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="i" :label="i" :disabled="(form.sameToBans[0]!=undefined&&form.sameToBans[0]!=i)||form.sameToNones[0]==i||form.defaultCheckeds[0]==i">同“伴”类型</el-checkbox-button>
|
|
|
+ <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="3+i" v-model="rows[i].isBan" @change="emitValues(i,'hasBan',rows[i].isBan)">
|
|
|
+ <el-checkbox-button :label="i" :disabled="hasDefault==i||hasNone==i||(hasBan!=-1&&hasBan!=i)">同“伴”类型</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
<el-button type="danger" size="small" class="del" @click="delRow">删除</el-button>
|
|
|
</div>
|
|
|
<div class="main-area">
|
|
|
<el-input v-for="(it,i) in rows"
|
|
|
:key="i"
|
|
|
- v-model="form.options[i]"
|
|
|
+ v-model="rows[i].name"
|
|
|
v-bind:class="{select:focusOn==i}"
|
|
|
@focus="selectRow(i)"
|
|
|
@blur="emitValues"></el-input>
|
|
@@ -73,65 +73,52 @@
|
|
|
}
|
|
|
</style>
|
|
|
<script>
|
|
|
- import utils from '@api/utils';
|
|
|
+ import utils from '@api/utils.js';
|
|
|
export default {
|
|
|
props:['type'],
|
|
|
data(){
|
|
|
return {
|
|
|
- argus:['defaultCheckeds','sameToNones','sameToBans'],
|
|
|
- form:{
|
|
|
- options:[],
|
|
|
- defaultCheckeds:[],
|
|
|
- sameToNones:[],
|
|
|
- sameToBans:[]
|
|
|
- },
|
|
|
- rows:[{},{},{},{}],
|
|
|
+ rows:[{name:'',defaultSelect:'',isBan:'',isNone:''},{name:'',defaultSelect:'',isBan:'',isNone:''},{name:'',defaultSelect:'',isBan:'',isNone:''},{name:'',defaultSelect:'',isBan:'',isNone:''}],
|
|
|
focusOn:-1
|
|
|
}
|
|
|
},
|
|
|
- /*computed:{
|
|
|
- isDisable:function(){ //属性按钮是否可用
|
|
|
- return function(type,i){
|
|
|
- if(this.form[type][0]!=undefined&&this.form[type][0]!=i){
|
|
|
- return true;
|
|
|
- }
|
|
|
- if(this.form[type][0] == i){
|
|
|
- return false;
|
|
|
- }
|
|
|
- for(let x=0;x<this.argus.length;x++){
|
|
|
- if([...this.form.defaultCheckeds,...this.form.sameToNones,...this.form.sameToBans].length==0||this.form[this.argus[x]][0]==i){
|
|
|
- return false;
|
|
|
- }else{
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return false;
|
|
|
- }
|
|
|
+ computed:{
|
|
|
+ hasDefault:function(){ //是否有选项默认选中
|
|
|
+ let index =this.rows.findIndex((it)=>{
|
|
|
+ return it.defaultSelect;
|
|
|
+ });console.log(index)
|
|
|
+ return index;
|
|
|
+ },
|
|
|
+ hasNone:function(){ //是否有选项同无
|
|
|
+ let index =this.rows.findIndex((it)=>{
|
|
|
+ return it.isNone;
|
|
|
+ });
|
|
|
+ return index;
|
|
|
+ },
|
|
|
+ hasBan:function(){ //是否有选项同伴
|
|
|
+ let index =this.rows.findIndex((it)=>{
|
|
|
+ return it.isBan;
|
|
|
+ });
|
|
|
+ return index;
|
|
|
}
|
|
|
- },*/
|
|
|
+ },
|
|
|
methods:{
|
|
|
- setValues(name){
|
|
|
- if(this.focusOn==-1){
|
|
|
- this[name] = false;
|
|
|
- this.$message({
|
|
|
- message: '请先选择要操作的行',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- this.form[name]=this[name]?this.focusOn:-1;
|
|
|
- this.emitValues();
|
|
|
- },
|
|
|
addRow(){
|
|
|
- this.rows.push({});
|
|
|
+ this.rows.push({name:'',defaultSelect:'',isBan:'',isNone:''});
|
|
|
},
|
|
|
selectRow(index){
|
|
|
this.focusOn = index;
|
|
|
|
|
|
},
|
|
|
- emitValues(){
|
|
|
- const items = utils.simpleOptionData(this.form);console.log(111,items)
|
|
|
+ emitValues(i,type,flag){
|
|
|
+ if(typeof i =='number'&&this.focusOn == -1){
|
|
|
+ this.$message({
|
|
|
+ message: '请先选择要操作的行',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const items = utils.simpleOptionData(this.rows);
|
|
|
this.$emit('pushValues',items);
|
|
|
},
|
|
|
delRow(){
|
|
@@ -146,7 +133,6 @@
|
|
|
confirmButtonText: '确定',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
- this.form.options.splice(this.focusOn,1);
|
|
|
this.rows.splice(this.focusOn,1);
|
|
|
this.focusOn = -1;
|
|
|
this.emitValues();
|