measure/src/layout/modules/cascader.vue

<template>
    <div class="hc-header-cascader-box">
        <div class="project-name-box">{{ projectInfo.projectAlias }} / {{ contractInfo.name }}</div>
        <el-cascader
            ref="ElCascaderRef" v-model="projectValue"
            :clearable="userInfo?.role_id === '1123598816738675201'"
            :filterable="userInfo?.role_id === '1123598816738675201'"
            :options="projectContract"
            :props="projectProps" placeholder="请选择项目"
            @change="projectContractChange"
        />
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { initButtons, initProjectContract } from '~sto/app'
import { useAppStore } from '~src/store'
import { getArrValue } from 'js-fast-way'

//事件
const emit = defineEmits(['change'])

const useAppState = useAppStore()
const userInfo = ref(useAppState.getUserInfo)

//项目合同段
const projectInfo = ref({})
const contractInfo = ref({})
const projectContract = ref([])
const projectValue = ref(null)
const projectProps = ref({
    value: 'id',
    label: 'projectAlias',
    children: 'contractInfoList',
})

//监听
watch(() => useAppState.getProjectContract, (val) => {
    projectContractData(getArrValue(val))
})

//渲染完成
onMounted(() => {
    initButtons()
    initProjectContract()
    const info = useAppState.getProjectContract || []
    projectContractData(info)
})

//处理项目合同段数据
const projectContractData = (projectContractData) => {
    if (projectContractData.length > 0) {
        //处理别名
        projectContractData.forEach(item => {
            let contractArr = item['contractInfoList'] || []
            contractArr.forEach(items => {
                items['projectAlias'] = items['name']
            })
        })
        //处理其他数据
        projectContract.value = projectContractData
        const projectId = useAppState.getProjectId //项目ID
        const contractId = useAppState.getContractId //合同段ID
        const UserProjectInfo = useAppState.getProjectInfo
        const UserContractInfo = useAppState.getContractInfo
        //查询缓存的选中ID是否存在
        const pid = projectContractData.findIndex(item => Number(item.id) === Number(projectId))
        const contractList = projectContractData[pid]?.contractInfoList || []
        const cid = contractList.findIndex(item => Number(item.id) === Number(contractId))
        //如果缓存的选中ID不存在
        if (cid === -1) {
            //取项目数组中的第一个数据
            let letProjectInfo = projectContractData[0]
            let contractInfoList = letProjectInfo?.contractInfoList || []
            let letContractInfo = contractInfoList[0] || {}
            projectValue.value = letContractInfo?.id
            projectInfo.value = letProjectInfo
            contractInfo.value = letContractInfo
            //设置缓存
            useAppState.setProjectInfo(letProjectInfo)
            useAppState.setContractInfo(letContractInfo)
            useAppState.setProjectId(letProjectInfo?.id)
            useAppState.setContractId(letContractInfo?.id)
            //发送消息
            //socketSend(letProjectInfo?.id + ',' + letContractInfo?.id)
        } else {
            projectValue.value = String(contractId)
            projectInfo.value = UserProjectInfo
            contractInfo.value = UserContractInfo
            //发送消息
            //socketSend(projectId + ',' + contractId)
        }
    } else {
        projectContract.value = []
        projectValue.value = null
        projectInfo.value = {}
        contractInfo.value = {}
    }
}

//项目被选择
const ElCascaderRef = ref(null)
const projectContractChange = (val) => {
    if (val) {
        const Nodes = ElCascaderRef.value.getCheckedNodes()
        const UserProjectInfo = Nodes[0].parent.data
        const UserContractInfo = Nodes[0].data
        //缓存项目数据
        useAppState.setProjectId(val[0])
        useAppState.setContractId(val[1])
        useAppState.setProjectInfo(UserProjectInfo)
        useAppState.setContractInfo(UserContractInfo)
        //更改界面更新
        projectInfo.value = UserProjectInfo
        contractInfo.value = UserContractInfo
        window.$message?.info('切换了项目，数据更新中')
        //发送消息
        //socketSend(val[0] + ',' + val[1])
        emit('change')
    }
}
</script>

<style lang="scss" scoped>
.hc-header-cascader-box {
    position: relative;
    margin-right: 30px;
    border-radius: 100px;
    flex: 1;
    .project-name-box {
        padding-right: 55px;
        position: relative;
        visibility: hidden;
        z-index: -1;
        height: 1px;
    }
}
</style>