示例图片
需求
- 已经选择了得ECUname，其余下拉框不再显示
- 默认将软件产品中所有SWK1和SWK2存在值得TRCname全部显示，SWK1和SWK2默认显示一个任意值
- SWK1、SWK2软件产品中ECUname对应得SWK1、SWK2得所有值
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column label="" width="50">
<template slot-scope="scope">
<i class="el-icon-circle-plus" @click="addRow(scope.row)" v-if="scope.$index === 0"></i>
<i class="el-icon-remove" @click="deleteRow(scope.$index)" v-else></i>
</template>
</el-table-column>
<el-table-column prop="ecuName" label="ECUname">
<template slot-scope="scope">
<el-select
:ref="scope.row.params" v-model="ecuForm[scope.row.params]"
placeholder="ECUname" :clearable="false"
@change="handleSupplier"
@visible-change="handleFilter(ecuForm[scope.row.params])">
<template v-for="(val, idx) in ecu_arr">
<el-option
:label="val.ecuName"
:value="val.ecuName"
:key="idx"
v-if="val.perms != 1"
@click.native="clearSwk(scope.$index)">
</el-option>
</template>
</el-select>
<span class="font_12 Danger" v-if="!ecuForm[scope.row.params]">请输入ECUname</span>
</template>
</el-table-column>
<el-table-column prop="swk1" label="SWK1">
<template slot-scope="scope">
<el-select v-model="scope.row.swk1" placeholder="SWK1" :clearable="false">
<template v-if="ecuForm[scope.row.params]">
<el-option
v-for="(item, idx) in ecu_swk_obj[ecuForm[scope.row.params]].swk1Arr"
:key="idx"
:label="item.swPartNumber + item.swPartVersion" :value="item.swPartNumber + item.swPartVersion">
</el-option>
</template>
</el-select>
<span class="font_12 Danger" v-if="!scope.row.swk1">请输入SWK1</span>
</template>
</el-table-column>
<el-table-column prop="swk2" label="SWK2">
<template slot-scope="scope">
<el-select v-model="scope.row.swk2" placeholder="SWK2" :clearable="false">
<template v-if="ecuForm[scope.row.params]">
<el-option
v-for="(item, idx) in ecu_swk_obj[ecuForm[scope.row.params]].swk2Arr || []"
:key="idx"
:label="item.swPartNumber + item.swPartVersion" :value="item.swPartNumber + item.swPartVersion">
</el-option>
</template>
</el-select>
<span class="font_12 Danger" v-if="!scope.row.swk2">请输入SWK2</span>
</template>
</el-table-column>
</el-table>
</template>
export default {
data () {
return {
tableData: [],
ecu_arr: [],
ecu_swk_obj: {},
ecuForm: {},
perms: 0
}
},
mounted () {
this.getParamsList()
},
methods: {
getParamsList () {
const data = [{"ecuName":"ADSC1303","partInfoList":[{"swPartNumber":"8895172642","swPartVersion":"A","swPartType":"SWK2","ecuName":null},{"swPartNumber":"8895172635","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895704476","swPartVersion":"B","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895704477","swPartVersion":"B","swPartType":"SWK2","ecuName":null},{"swPartNumber":"8895704476","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895704477","swPartVersion":"A","swPartType":"SWK2","ecuName":null}]},{"ecuName":"TCAM","partInfoList":[{"swPartNumber":"8895254274","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895254278","swPartVersion":"A","swPartType":"SWK2","ecuName":null},{"swPartNumber":"8895916007","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895916008","swPartVersion":"A","swPartType":"SWK2","ecuName":null}]},{"ecuName":"ADMC1301","partInfoList":[{"swPartNumber":"8895172621","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895172629","swPartVersion":"D","swPartType":"SWK2","ecuName":null},{"swPartNumber":"8895704529","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895704530","swPartVersion":"A","swPartType":"SWK2","ecuName":null},{"swPartNumber":"8895172629","swPartVersion":"A","swPartType":"SWK2","ecuName":null},{"swPartNumber":"8895172622","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895172623","swPartVersion":"A","swPartType":"SWK1","ecuName":null}]},{"ecuName":"DHU1202","partInfoList":[{"swPartNumber":"8895239040","swPartVersion":"A","swPartType":"SWK1","ecuName":null},{"swPartNumber":"8895239042","swPartVersion":"A","swPartType":"SWK2","ecuName":null}]}]
const obj = {}
const ecu_obj = {}
const ecuArr = []
const arr = []
res.data.map((val, idx) => {
this.perms += 1
const sw1 = []
const sw2 = []
ecuArr.push({ ecuName: val.ecuName, perms: 1 })
val.partInfoList.map(item => {
if (item.swPartType == 'SWK1') {
sw1.push(item)
}
if (item.swPartType == 'SWK2') {
sw2.push(item)
}
})
const temp = {
swk1Arr: sw1,
swk2Arr: sw2
}
obj[val.ecuName] = temp
const params = 'ecuD' + this.perms + 'A'
arr.push({
params,
type: idx == 0 ? 'add' : 'reduce',
ecuName: val.ecuName,
swk1: sw1.length ? (sw1[0].swPartNumber + sw1[0].swPartVersion) : '',
swk2: sw2.length ? (sw2[0].swPartNumber + sw2[0].swPartVersion) : '',
swPartType: sw1[0].swPartType || sw1[1].swPartType
})
ecu_obj[params] = val.ecuName;
})
this.ecu_arr = lodash.cloneDeep(ecuArr)
this.ecu_swk_obj = lodash.cloneDeep(obj)
this.tableData = lodash.cloneDeep(arr)
this.ecuForm = lodash.cloneDeep(ecu_obj)
},
clearSwk (idx) {
this.tableData[idx].swk1 = ''
this.tableData[idx].swk2 = ''
},
handleFilter (val) {
const arr = [];
this.tableData.map((item) => {
if (this.ecuForm[item.params] != val) {
this.$refs[item.params].blur();
arr.push(this.ecuForm[item.params]);
}
});
this.ecu_arr.map((item) => {
if (arr.includes(item.ecuName)) {
item.perms = 1;
} else {
item.perms = '';
}
});
this.ecu_arr = lodash.cloneDeep(this.ecu_arr);
},
handleSupplier () {
const arr = [];
this.ecu_arr.map((item) => (item.perms = '')); // 删除时候触发
this.tableData.map((item) => {
arr.push(this.ecuForm[item.params]);
});
setTimeout(() => {
this.ecu_arr.map((item) => {
if (arr.includes(item.ecuName)) {
item.perms = 1;
} else {
item.perms = '';
}
});
this.ecu_arr = lodash.cloneDeep(this.ecu_arr);
}, 0);
},
addRow (row) {
this.perms += 1;
const param = row.params + this.perms + 'A';
this.tableData.push({
ecuName: '',
swk1: '',
swk2: '',
swPartType: '',
params: param,
type: 'reduce'
});
this.ecuForm[param] = '';
this.ecuForm = lodash.cloneDeep(this.ecuForm);
},
deleteRow (index) {
this.tableData.splice(index, 1);
this.ecuForm = lodash.cloneDeep(this.ecuForm);
this.handleSupplier(); // 删除时候触发事件
},
setEcu (idx) {
this.tableData[idx].swk1 = ''
this.tableData[idx].swk2 = ''
}
}
}
