for_client/src/views/ledger/query.vue

<template>
    <div v-loading="boxLoading" class="hc-layout-box">
        <HcCard v-if="menuDatas.length <= 0" ui="flex-1">
            <HcStatus/>
        </HcCard>
        <template v-if="menuDatas.length > 0">
            <div class="hc-layout-left">
                <el-scrollbar>
                    <el-menu :default-active="menuKey" class="hc-ledger-query-menu" unique-opened>
                        <el-sub-menu v-for="item in menuDatas" :key="item?.primaryKeyId" :index="item?.primaryKeyId">
                            <template #title>{{ item?.title }}</template>
                            <el-menu-item :index="`${item?.primaryKeyId}-form`" @click="handleMenuValue('form',item)">
                                日志填报
                            </el-menu-item>
                            <el-menu-item :index="`${item?.primaryKeyId}-table`" @click="handleMenuValue('table',item)">
                                日志列表查看
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </div>
            <HcTableForm v-if="menuType === 'form'" :contractId="contractId" :items="menuItem"
                         :projectId="projectId" :userName="userInfo['real_name']"/>
            <HcTableList v-if="menuType === 'table'" :contractId="contractId" :items="menuItem" :projectId="projectId"/>
        </template>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import queryApi from '~api/ledger/query';
import {getArrValue} from "vue-utils-plus"
import HcTableForm from "./components/table-form.vue"
import HcTableList from "./components/table-list.vue"

//初始变量
const useAppState = useAppStore()

//全局变量
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const userInfo = ref(useAppState.getUserInfo);

//渲染完成
onMounted(() => {
    queryLogList()
})

//日志类型变量
const boxLoading = ref(false)
const menuDatas = ref([]);
const menuKey = ref('');
const menuItem = ref({});
const menuType = ref('form')

//获取当前合同段下的日志类型
const queryLogList = async () => {
    boxLoading.value = true
    const {error, code, data} = await queryApi.queryLogList({
        contractId: contractId.value
    })
    //判断状态
    boxLoading.value = false
    const dataArr = getArrValue(data)
    if (!error && code === 200 && dataArr.length > 0) {
        menuDatas.value = dataArr
        menuItem.value = dataArr[0]
        menuKey.value = `${dataArr[0]?.primaryKeyId}-form`
        menuType.value = 'form'
    } else {
        menuDatas.value = []
        menuItem.value = {}
        menuKey.value = ''
        menuType.value = ''
    }
}

//菜单被点击
const handleMenuValue = (type, item) => {
    menuItem.value = item
    menuKey.value = `${item?.primaryKeyId}-${type}`
    menuType.value = type
}
</script>

<style lang="scss" scoped>
@import "../../styles/ledger/query.scss";
</style>

<style lang="scss">
.hc-ledger-query-menu.el-menu {
    padding: 5px 24px;
    border-right: 0;
    background-color: initial;
    --el-menu-text-color: #595959;
    .el-menu {
        border-right: 0;
        background-color: initial;
    }
    .el-sub-menu, .el-menu-item {
        user-select: none;
    }
    .el-sub-menu .el-sub-menu__icon-arrow {
        right: 4px;
    }
    .el-sub-menu .el-menu-item.is-active {
        background: #f1f5f8;
        border-radius: 6px;
        box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0 #ffffff;
    }
}
</style>