for_client/src/views/ledger/query.vue

<template>
    <div class="hc-layout-box" v-loading="boxLoading">
        <HcCard ui="flex-1" v-if="false">
            <div class="hc-no-table-form">
                <div class="table-form-no">
                    <img :src="nowebp" alt=""/>
                    <div class="desc">暂无相关数据</div>
                </div>
            </div>
        </HcCard>
        <div class="hc-layout-left">
            <el-scrollbar>
                <el-menu default-active="2" class="hc-ledger-query-menu" unique-opened>
                    <el-sub-menu v-for="item in menuOptions" :key="item?.primaryKeyId" :index="item?.primaryKeyId">
                        <template #title>{{item?.title}}</template>
                        <el-menu-item :index="`${item?.primaryKeyId}-form`">日志填报</el-menu-item>
                        <el-menu-item :index="`${item?.primaryKeyId}-table`">日志列表查看</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="hc-layout-content">
            <div class="hc-content-box">
                <div class="hc-table-forem-box">
                    456789
                </div>
                <div class="hc-right-pian-box">
                    123456
                </div>
            </div>
            <div class="hc-footer-box">
                <el-button type="primary" hc-btn>
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
                <el-button hc-btn>
                    <HcIcon name="send-plane-2"/>
                    <span>上报</span>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import nowebp from '~src/assets/view/Web2x_x.webp';
import queryApi from '~api/ledger/query';
import {getArrValue} from "vue-utils-plus"

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

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

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

//获取当前合同段下的日志类型
const boxLoading = ref(false)
const menuOptions = ref([]);
const queryLogList = async () => {
    boxLoading.value = true
    const {error, code, data} = await queryApi.queryLogList({
        contractId: contractId.value
    })
    //判断状态
    boxLoading.value = false
    if (!error && code === 200) {
        menuOptions.value = getArrValue(data)
    } else {
        menuOptions.value = []
    }
}
</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>