129 lines
4.0 KiB
Vue
129 lines
4.0 KiB
Vue
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { WORKBENCH_MODULES } from '@/config/workbench-menus'
|
||
import { PAGE_PATHS, WORKBENCH_ROUTE_MAP } from '@/config/api'
|
||
import { filterWorkbenchModules } from '@/utils/workbenchMenuFilter'
|
||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||
|
||
const safeAreaStyle = getSafeAreaStyle()
|
||
const userStore = useUserStore()
|
||
const modules = computed(() =>
|
||
filterWorkbenchModules(WORKBENCH_MODULES, {
|
||
menuAll: userStore.menuAll,
|
||
menuCodes: userStore.menuCodes
|
||
})
|
||
)
|
||
const loggingOut = ref(false)
|
||
|
||
const displayName = computed(() => {
|
||
const info = userStore.userInfo
|
||
if (!info) return '未登录'
|
||
return info.realName || info.username || '用户'
|
||
})
|
||
|
||
/** 三列宫格补齐空白格，避免末行空位露出网格底色 */
|
||
const menuPadCount = (len) => {
|
||
const rem = Number(len) % 3
|
||
return rem === 0 ? 0 : 3 - rem
|
||
}
|
||
|
||
onShow(async () => {
|
||
userStore.checkLoginStatus()
|
||
if (!userStore.isLoggedIn) {
|
||
uni.reLaunch({ url: PAGE_PATHS.login })
|
||
return
|
||
}
|
||
await userStore.fetchMenuCodes()
|
||
})
|
||
|
||
const openMenu = (module, menu) => {
|
||
if (!menu.enabled) {
|
||
uni.showToast({ title: '本期暂未开放', icon: 'none' })
|
||
return
|
||
}
|
||
const route = WORKBENCH_ROUTE_MAP[menu.code]
|
||
if (route) {
|
||
uni.navigateTo({ url: route })
|
||
return
|
||
}
|
||
const title = encodeURIComponent(menu.name || '')
|
||
const moduleTitle = encodeURIComponent(module.title || '')
|
||
const code = encodeURIComponent(menu.code || '')
|
||
uni.navigateTo({
|
||
url: `${PAGE_PATHS.bizPlaceholder}?title=${title}&module=${moduleTitle}&code=${code}`
|
||
})
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
if (loggingOut.value) return
|
||
loggingOut.value = true
|
||
try {
|
||
await userStore.logout()
|
||
} finally {
|
||
loggingOut.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mp-page mp-page--tab">
|
||
<view class="sq-nav-header sq-nav-header--tall" :style="safeAreaStyle">
|
||
<view class="sq-nav-header__nav">
|
||
<view class="sq-nav-header__main">
|
||
<view class="sq-nav-header__left sq-nav-header__left--stack">
|
||
<text class="sq-nav-header__title">工作台</text>
|
||
<text class="sq-nav-header__meta">选择业务模块，进入对应功能办理</text>
|
||
</view>
|
||
<view class="sq-nav-header__user">
|
||
<text class="sq-nav-header__user-name">{{ displayName }}</text>
|
||
<text
|
||
class="sq-nav-header__logout"
|
||
:class="{ 'sq-nav-header__logout--disabled': loggingOut }"
|
||
@click="handleLogout"
|
||
>
|
||
{{ loggingOut ? '退出中…' : '退出登录' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view /><!-- 胶囊占位 -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mp-section">
|
||
<view
|
||
v-for="mod in modules"
|
||
:key="mod.key"
|
||
class="mp-module-block"
|
||
:class="'mp-module-block--' + mod.key"
|
||
>
|
||
<view class="mp-module-block__head">
|
||
<text class="mp-module-block__icon">{{ mod.iconText }}</text>
|
||
<view class="mp-module-block__title-wrap">
|
||
<text class="mp-module-block__title">{{ mod.title }}</text>
|
||
<text class="mp-module-block__desc">{{ mod.desc }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mp-menu-grid">
|
||
<view
|
||
v-for="(menu, idx) in mod.menus"
|
||
:key="menu.code || menu.name + idx"
|
||
class="mp-menu-card"
|
||
:class="{ 'mp-menu-card--disabled': !menu.enabled }"
|
||
@click="openMenu(mod, menu)"
|
||
>
|
||
<view class="mp-menu-card__icon">{{ menu.icon || '' }}</view>
|
||
<text class="mp-menu-card__name">{{ menu.name }}</text>
|
||
</view>
|
||
<view
|
||
v-for="i in menuPadCount(mod.menus.length)"
|
||
:key="'pad-' + mod.key + '-' + i"
|
||
class="mp-menu-card mp-menu-card--pad"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|