analysis/src/views/project/middle.vue

<template>
    <div class="hc-project-collect-middle hc-h-full">
        <div class="menu hc-h-full inline-block w-[180px]">
            <hc-card>
                <HcMenuBar :cur="menuKey" :datas="menuData" @change="menuChange" />
            </hc-card>
        </div>
        <div class="content hc-h-full inline-block">
            <AdminCreate v-if="menuKey === 'project-collect-admin-create'" :form="adminFormInfo" @back="adminCreateBack" />
            <AdminListe v-else-if="menuKey === 'project-collect-admin-list'" @edit="adminListeEdit" />
            <GistCreate v-else-if="menuKey === 'project-collect-gist-create'" :form="gistFormInfo" @back="gistCreateBack" />
            <GistListe v-else-if="menuKey === 'project-collect-gist-list'" @edit="gistListeEdit" />
            <hc-empty v-else />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { useRoute, useRouter } from 'vue-router'
import { isArray, isNullES } from 'js-fast-way'

//子组件
import HcMenuBar from '~src/layout/modules/MenuBar.vue'
import AdminCreate from './admin/create.vue'
import AdminListe from './admin/list.vue'
import GistCreate from './gist/create.vue'
import GistListe from './gist/list.vue'

//初始化
const router = useRouter()
const useRoutes = useRoute()
const store = useAppStore()

//渲染完成
onMounted(() => {
    getMenuDataKey(store.projectMenu)
})

//监听菜单变化
watch(() => store.projectMenu, (menu) => {
    getMenuDataKey(menu)
})

//左侧菜单
const menuKey = ref('')
const menuData = ref([])
const menuChange = ({ code }) => {
    adminFormInfo.value = {}
    gistFormInfo.value = {}
    menuKey.value = code
    router.push({
        path: useRoutes.path,
        query: { code },
    })
}

//获取菜单数据
const getMenuDataKey = async (menu) => {
    if (!isArray(menu)) return
    //获取当前左侧菜单
    menuData.value = menu
    if (menu.length <= 0) return
    //获取当前页面key
    const df_key = await getMenuDefaultKey(menu)
    const { code } = useRoutes.query
    menuKey.value = code || df_key
}

//获取菜单默认key
const getMenuDefaultKey = async (data) => {
    const children = data[0].children
    if (!isNullES(children) && children.length > 0) {
        return await getMenuDefaultKey(children)
    } else {
        return data[0].code
    }
}

//项目列表编辑
const adminFormInfo = ref({})
const adminListeEdit = (row) => {
    toCollectAdmin('project-collect-admin-create', row)
}

//返回
const adminCreateBack = () => {
    toCollectAdmin('project-collect-admin-list')
}

//跳转到项目管理相关页面
const toCollectAdmin = (code, row = {}) => {
    adminFormInfo.value = row
    menuKey.value = code
    router.push({
        path: useRoutes.path,
        query: { code },
    })
}

//工作要点列表编辑
const gistFormInfo = ref({})
const gistListeEdit = (row) => {
    toCollectGist('project-collect-gist-create', row)
}

//返回
const gistCreateBack = () => {
    toCollectGist('project-collect-gist-list')
}

//跳转到工作要点相关页面
const toCollectGist = (code, row = {}) => {
    gistFormInfo.value = row
    menuKey.value = code
    router.push({
        path: useRoutes.path,
        query: { code },
    })
}
</script>

<style lang="scss">
@import '~src/styles/project/middle';
</style>