排一下bug,有问题<script setup>
import { dictStageList,dictECUList } from '@/api/architecture/dict';
import { dotDetail } from '@/api/architecture';
import { nextTick, onMounted,watch } from 'vue';
import { debounce } from "lodash-es";
const props=defineProps({
workitemInstId:String
})
// 阶段 --------------------------------
const stage_selectValue=ref('')
const stage_list=ref([])
const currentNodeKey=ref('')
const fetchStageList=debounce(async()=>{
let res=await dictStageList(stage_selectValue.value).catch(()=>{})
if(res.code===200){
stage_list.value=[{
id:0,
label:'全选',
children:res.data.map(i=>{
return {
id:i.stageConfigId,
label:i.stageName
}
})
}];
}
// 默认第一个
nodeClick(stage_list.value[0].children[0])
},300)
fetchStageList()
const nodeClick=(node)=>{
if(node.label==='全选')return
currentNodeKey.value=node.id;
// console.log('阶段-选中节点',node.id)
// console.log('阶段-选中节点-stageList',stageList.value)
let findCurrentStateItem=stageList.value.find(i=>i.stageConfigId===node.id);
// handle_bindModelRow(findCurrentStateItem)
bindModelRow.value=[]
bindEcuRow.value={}
currentNodeKey2.value=''
elTreeModelRef.value.setCheckedKeys(bindModelRow.value)
if(!findCurrentStateItem){
elTreeModelRef.value.setCheckedKeys(bindModelRow.value)
vxeTableRef.value.setRadioRow(bindEcuRow.value)
}else{
bindModelRow.value=findCurrentStateItem.modelList.map(i=>i.modelConfigId)
elTreeModelRef.value.setCheckedKeys(bindModelRow.value)
// console.log('--------------------',findM)
nextTick(()=>{
let findM=model_list.value[0].children.find(it=>bindModelRow.value.includes(it.id))
// nodeClick2(findM)
currentNodeKey2.value=findM.id;
// console.log('车型-选中节点',node)
filterECUlist(findM.label)
})
}
// console.log('阶段-选中节点数据',findCurrentStateItem)
// console.log('------bindStageRow:',bindStageRow.value) 这个应该在初始数据绑定
// console.log('------bindModelRow:',bindModelRow.value)
// console.log('------bindEcuRow:',bindEcuRow.value)
}
// 车型 --------------------------------
const model_selectValue=ref('')
let model_list_all=[] //全部model
const model_list=ref([])
const fetchECUList=async()=>{
let res=await dictECUList('').catch(()=>{})
if(res.code!==200)return
ecu_list_all=res.data;
model_list_all=new Set(res.data.map(i=>i.modelName));
model_list.value=[{
id:0,
label:'全选',
children:[...model_list_all].map((i,index)=>{
return {
id:i,
label:i
}
})
}];
}
fetchECUList()
const filterData=debounce(()=>{
model_list.value=[{
id:0,
label:'全选',
children:[...model_list_all].filter(item=>item.includes(model_selectValue.value)).map((i,index)=>{
return {
id:i,
label:i
}
})
}];
},300)
const currentNodeKey2=ref('')
const nodeClick2=(node)=>{
if(node.label==='全选')return
currentNodeKey2.value=node.id;
// console.log('车型-选中节点',node)
filterECUlist(node.label)
}
// ECU --------------------------------
const ecu_selectValue=ref('')
const ecu_list=ref([])
let ecu_list_all=[] //全部ecu
let two_ecu_list_all=[]
const filterECUlist=(sval)=>{
two_ecu_list_all=ecu_list_all.filter(i=>{
return i.modelName===sval;
})
ecu_list.value=two_ecu_list_all
handle_bindEcuRow(true,{})
}
const debounceFilterECUlist=debounce(()=>{
ecu_list.value=two_ecu_list_all.filter(i=>i.modelName.includes(ecu_selectValue.value) || i.chnFullName.includes(ecu_selectValue.value))
},300)
// 已选择 --------------------------------
const stageList=ref([]);
const bindStageRow=ref([]); // 当前选中的阶段
const bindModelRow=ref([]); // 当前选中的车型
const bindEcuRow=ref({}); // 当前选中的ecu对象
const elTreeStageRef=ref()
const elTreeModelRef=ref()
const vxeTableRef=ref()
// watch(bindStageRow,(nVal)=>{
// console.log('监听[阶段]值',nVal)
// },{deep:true})
// 处理bindStageRow
const handle_bindStageRow=(check,callF)=>{
// console.log(check)
let m_findIndex=bindStageRow.value.findIndex(i=>currentNodeKey.value===i);
if(m_findIndex === -1 && check){
bindStageRow.value.push(currentNodeKey.value)
}else if(m_findIndex !== -1 && !check){
bindStageRow.value.splice(m_findIndex,1)
}
callF && callF();
}
// 处理bindModelRow
const handle_bindModelRow=(check,callF)=>{
console.log(check,currentNodeKey2.value)
let m_findIndex=bindModelRow.value.findIndex(i=>currentNodeKey2.value===i);
if(m_findIndex === -1 && check){
bindModelRow.value.push(currentNodeKey2.value)
}else if(m_findIndex !== -1 && !check){
bindModelRow.value.splice(m_findIndex,1)
handle_bindEcuRow(true,{})
}
callF && callF();
}
// 处理bindEcuRow
const handle_bindEcuRow=(bol,data,callF)=>{
if(!bol){
if(JSON.stringify(bindEcuRow.value) === '{}'){
bindEcuRow.value=data;
callF && callF(data);
}
}else{
bindEcuRow.value=data;
}
}
// 选第一个
const checkChange=(data,check)=>{
if(data.label==='全选')return
currentNodeKey.value!==data.id ? nodeClick(data) : null;
// console.log("****checkChange",data,check)
handle_bindStageRow(check)
setStageList(1,check)
}
// 选中间一个,处理前后
const checkChange2=(data,check)=>{
// console.log('******我是中间的',data,check,currentNodeKey2.value!==data.id)
if(data.label==='全选')return
currentNodeKey2.value!==data.id ? nodeClick2(data) : null;
// 反选
nextTick(()=>{ //设置默认值
handle_bindEcuRow(false,check?ecu_list.value[0]:{},(row)=>{
if(vxeTableRef.value){
vxeTableRef.value.setRadioRow(row)
}
})
handle_bindModelRow(check)
console.log(bindModelRow.value.length)
handle_bindStageRow(bindModelRow.value.length,()=>{
elTreeStageRef.value.setCheckedKeys(bindStageRow.value)
})
setStageList(2,check)
})
}
// 选最后一个,处理前两个
const handleRadioChange=(e)=>{
handle_bindEcuRow(true,e.row)
// 反选
handle_bindModelRow(true,()=>{
elTreeModelRef.value.setCheckedKeys(bindModelRow.value)
})
handle_bindStageRow(bindModelRow.value.length,()=>{
elTreeStageRef.value.setCheckedKeys(bindStageRow.value)
})
setStageList(3)
}
// 组装值 stageList
const setStageList=(type,check)=>{
let findIndexS=stageList.value.findIndex(i=>i.stageConfigId===currentNodeKey.value);
let modelName=model_list.value[0].children.find(item=>item.id===currentNodeKey2.value)?.label
let stageItem=stageList.value.slice(findIndexS,findIndexS+1)[0];
if(type===1){
if(!check){
stageList.value.splice(findIndexS,1)
}else if(findIndexS === -1 && check){
// 不存在stageItem新增
let newStageItem={
stageConfigId:currentNodeKey.value,
stageName:stage_list.value[0].children.find(item=>item.id===currentNodeKey.value)?.label,
modelList:modelName?[
{
stageConfigId:currentNodeKey.value,
modelConfigId:modelName,
modelName:modelName,
ecuVo:{
stageConfigId: currentNodeKey.value,
modelConfigId: modelName,
ecuConfigId: bindEcuRow.value.ecuConfigId,
ecuAbbr: bindEcuRow.value.ecuAbbr,
chnFullName: bindEcuRow.value.chnFullName,
}
}
]:[]
}
stageList.value.push(newStageItem)
}
}else if(type===2){ // 选车型
// console.log(stageItem)
let modelFindIndex=stageItem?.modelList?.findIndex(cItem=>cItem.modelConfigId === modelName)
if(!modelFindIndex)return
// console.log('**',modelFindIndex,check)
if(modelFindIndex===-1 && check){
let modelItem={
stageConfigId:currentNodeKey.value,
modelConfigId:modelName,
modelName:modelName,
ecuVo:{
stageConfigId: currentNodeKey.value,
modelConfigId: modelName,
ecuConfigId: bindEcuRow.value.ecuConfigId,
ecuAbbr: bindEcuRow.value.ecuAbbr,
chnFullName: bindEcuRow.value.chnFullName,
}
}
stageItem.modelList.push(modelItem)
}else if(modelFindIndex!==-1 && !check){
stageItem.modelList.splice(modelFindIndex,1)
}
}else if(type===3){ // 更新ecuVo
let modelItem=stageItem.modelList.find(cItem=>cItem.modelConfigId === modelName);
if(modelItem){
modelItem.ecuVo={
stageConfigId: currentNodeKey.value,
modelConfigId: modelName,
ecuConfigId: bindEcuRow.value.ecuConfigId,
ecuAbbr: bindEcuRow.value.ecuAbbr,
chnFullName: bindEcuRow.value.chnFullName,
}
}
}
// console.log('组合完成--stageList---',stageList.value)
}
</script>
<template>
<div class="dot-content">
<div class="select-left">
<!-- 阶段 -->
<div class="item">
<el-input v-model="stage_selectValue" placeholder="搜索" prefix-icon="Search" size="small" clearable @input="fetchStageList"/>
<el-tree
ref="elTreeStageRef"
:data="stage_list"
show-checkbox
node-key="id"
default-expand-all
:current-node-key="currentNodeKey"
highlight-current
@node-click="nodeClick"
@check-change="checkChange"
>
<template #default="{ node, data }">
<el-text @click.stop="nodeClick(node.data)" truncated>{{ node.label }}</el-text>
</template>
</el-tree>
</div>
<!-- 车型 -->
<div class="item">
<el-input v-model="model_selectValue" placeholder="搜索" prefix-icon="Search" size="small" clearable @input="filterData"/>
<el-tree
ref="elTreeModelRef"
:data="model_list"
show-checkbox
node-key="id"
default-expand-all
:current-node-key="currentNodeKey2"
highlight-current
@node-click="nodeClick2"
@check-change="checkChange2"
>
<template #default="{ node, data }">
<el-text @click.stop="nodeClick2(node.data)" truncated>{{ node.label }}</el-text>
</template>
</el-tree>
</div>
<!-- ecu -->
<div class="item">
<el-input v-model="ecu_selectValue" placeholder="搜索" prefix-icon="Search" size="small" clearable @input="debounceFilterECUlist"/>
<vxe-table
size="mini"
ref="vxeTableRef"
border="inner"
:cell-config="{height:32}"
:header-cell-config="{height:32}"
:data="ecu_list"
@radio-change="handleRadioChange">
<vxe-column type="radio" title=""></vxe-column>
<vxe-column field="ecuAbbr" title="ECU"></vxe-column>
<vxe-column field="chnFullName" title="中文全称"></vxe-column>
</vxe-table>
</div>
</div>
<!-- 已选择 -->
<div class="select-right">
<div class="top-menu">
<div class="select-title">已选择</div>
<el-button type="danger" icon="Delete" text @click="delAllWiki" size="small">清除</el-button>
</div>
<div class="con-list">
<div class="item" v-for="item in stageList" :key="item.stageConfigId">
<!-- 阶段 -->
<div class="stage-name">
<el-text truncated>{{ item.stageName }}</el-text>
<el-button link type="danger" icon="Close"></el-button>
</div>
<div class="model-list">
<div
class="m-l-item"
v-for="sitem in item.modelList"
:key="sitem.stageConfigId">
<el-text truncated>{{ sitem.modelName }}</el-text>
<el-text truncated>{{ sitem.ecuVo?.ecuAbbr }}</el-text>
<el-text truncated>{{ sitem.ecuVo?.chnFullName }}</el-text>
<el-button link type="danger" icon="Close"></el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
最新发布