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="contractId" 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 { initProjectContract } from '~sto/app'
import { isNullES } from 'js-fast-way'

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

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

const projectProps = ref({
    value: 'id',
    label: 'projectAlias',
    children: 'contractInfoList',
})

//项目合同段
const projectContract = ref(store.projectContract)
const projectInfo = ref(store.projectInfo)
const contractInfo = ref(store.contractInfo)
const contractId = ref(store.contractId)

//监听
watch(() => [
    store.projectContract,
    store.projectInfo,
    store.contractInfo,
    store.projectId,
    store.contractId,
], ([arr, project, contract, pid, cid]) => {
    projectContract.value = arr
    projectInfo.value = project
    contractInfo.value = contract
    contractId.value = cid
    setSend(pid, cid)
})

//渲染完成
onMounted(async () => {
    await initProjectContract()
    setSend(store.projectId, store.contractId)
})

const setSend = (pid, cid) => {
    if (isNullES(pid) || isNullES(cid)) {
        return
    }
    emit('send', {
        projectId: pid,
        contractId: cid,
    })
}

//项目被选择
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;
        height: 1px;
    }
    .el-cascader.hc-header-cascader {
        width: 100%;
        .el-input .el-input__wrapper {
            border-radius: 104px;
            height: 28px;
        }
    }
}
</style>