for_client/src/views/ledger/query.vue

<template>
    <div v-loading="boxLoading" class="hc-layout-box">
        <HcNewCard v-if="menuDatas.length <= 0" ui="flex-1">
            <HcStatus />
        </HcNewCard>
        <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'" :contract-id="contractId" :items="menuItem"
                :project-id="projectId" :user-name="userInfo.real_name"
            />
            <HcTableList v-if="menuType === 'table'" :contract-id="contractId" :items="menuItem" :project-id="projectId" />
        </template>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import queryApi from '~api/ledger/query'
import HcTableForm from './components/table-form.vue'
import HcTableList from './components/table-list.vue'
import { getArrValue } from 'js-fast-way'
//初始变量
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>