for_client/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" class="hc-header-cascader"
            :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 { useAppStore } from '~src/store'
import { getArrValue } from 'js-fast-way'
import { initButtons, initProjectContract } from '~sto/app'

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

//状态
const store = useAppStore()
const userInfo = ref(store.getUserInfo)

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

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

//渲染完成
onMounted(() => {
    initButtons()
    initProjectContract()
    const info = store.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 = store.getProjectId //项目ID
        const contractId = store.getContractId //合同段ID
        const UserProjectInfo = store.getProjectInfo
        const UserContractInfo = store.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
            //设置缓存
            store.setProjectInfo(letProjectInfo)
            store.setContractInfo(letContractInfo)
            store.setProjectId(letProjectInfo?.id)
            store.setContractId(letContractInfo?.id)
            emit('send', {
                projectId: letProjectInfo?.id,
                contractId: letContractInfo?.id,
            })
        } else {
            projectValue.value = String(contractId)
            projectInfo.value = UserProjectInfo
            contractInfo.value = UserContractInfo
            emit('send', {
                projectId: projectId,
                contractId: contractId,
            })
        }
    } else {
        projectContract.value = []
        projectValue.value = null
        projectInfo.value = {}
        contractInfo.value = {}
        emit('send', {
            projectId: '',
            contractId: '',
        })
    }
}

//项目被选择
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
        //缓存项目数据
        store.setProjectId(val[0])
        store.setContractId(val[1])
        store.setProjectInfo(UserProjectInfo)
        store.setContractInfo(UserContractInfo)
        //更改界面更新
        projectInfo.value = UserProjectInfo
        contractInfo.value = UserContractInfo
        window.$message?.info('切换了项目，数据更新中')
        emit('send', {
            projectId: val[0],
            contractId: val[1],
        })
        emit('change')
    }
}
</script>

<style lang="scss">
.hc-header-cascader-box {
    position: relative;
    margin-right: 20px;
    .project-name-box {
        position: relative;
        max-width: 340px;
        padding-right: 20px;
        overflow: hidden;
        z-index: -1;
    }
    .el-cascader.hc-header-cascader {
        position: absolute;
        top: 2px;
        width: 100%;
        .el-input .el-input__wrapper {
            border-radius: 104px;
            height: 28px;
        }
    }
}
</style>