356 lines
7.0 KiB
Vue
356 lines
7.0 KiB
Vue
<template>
|
||
<view class="work-page">
|
||
<scroll-view
|
||
class="work-scroll"
|
||
scroll-y
|
||
:show-scrollbar="false"
|
||
>
|
||
<view class="work-content">
|
||
<view class="work-heading">
|
||
<view class="work-heading-copy">
|
||
<text class="work-kicker">业务工作台</text>
|
||
<text class="work-subtitle">
|
||
根据当前账号权限，快速进入现场业务流程
|
||
</text>
|
||
</view>
|
||
<view class="work-permission-count">
|
||
<text class="work-permission-value">{{ visibleBusinessEntries.length }}</text>
|
||
<text class="work-permission-label">项可用</text>
|
||
</view>
|
||
</view>
|
||
|
||
<TestBatchModeSwitch />
|
||
|
||
<view class="work-section">
|
||
<view class="work-section-header">
|
||
<view class="work-section-marker"></view>
|
||
<view class="work-section-copy">
|
||
<text class="work-section-title">业务管理</text>
|
||
<text class="work-section-description">选择需要执行的现场流程</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="visibleBusinessEntries.length" class="work-entry-list">
|
||
<view
|
||
v-for="entry in visibleBusinessEntries"
|
||
:key="entry.path"
|
||
class="work-entry"
|
||
@click="handleBusinessEntry(entry)"
|
||
>
|
||
<view
|
||
class="work-entry-icon"
|
||
:class="entry.iconClass"
|
||
>
|
||
<view :class="entry.icon" class="work-entry-icon-glyph"></view>
|
||
</view>
|
||
<view class="work-entry-copy">
|
||
<text class="work-entry-title">{{ entry.title }}</text>
|
||
<text class="work-entry-description">{{ entry.description }}</text>
|
||
</view>
|
||
<view class="i-mdi-chevron-right work-entry-arrow"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else class="work-empty-state">
|
||
<view class="work-empty-icon">
|
||
<view class="i-mdi-lock-outline work-empty-icon-glyph"></view>
|
||
</view>
|
||
<text class="work-empty-title">暂无已授权业务</text>
|
||
<text class="work-empty-description">请联系管理员分配业务菜单权限</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, getCurrentInstance } from "vue";
|
||
import TestBatchModeSwitch from "@/components/business/TestBatchModeSwitch.vue";
|
||
import { businessMenuEntries } from "@/config/businessMenu";
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
|
||
const visibleBusinessEntries = computed(() =>
|
||
businessMenuEntries.filter((entry) => proxy.$auth.hasPermi(entry.permission)),
|
||
);
|
||
|
||
function handleBusinessEntry(entry) {
|
||
if (!proxy.$auth.hasPermi(entry.permission)) {
|
||
proxy.$modal.msgError("当前账号没有该业务菜单权限");
|
||
return;
|
||
}
|
||
proxy.$tab.navigateTo(entry.path);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.work-page {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
overflow-x: hidden;
|
||
background: #f4f8f8;
|
||
}
|
||
|
||
.work-scroll {
|
||
width: 100%;
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.work-content {
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 28rpx calc(140rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.work-heading {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 18rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.work-heading-copy {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.work-kicker {
|
||
display: block;
|
||
color: #28225c;
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.work-subtitle {
|
||
display: block;
|
||
margin-top: 10rpx;
|
||
color: #6c7786;
|
||
font-size: 24rpx;
|
||
line-height: 1.55;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.work-permission-count {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
align-items: baseline;
|
||
border-radius: 14rpx;
|
||
padding: 12rpx 16rpx;
|
||
background: #e9f7f6;
|
||
color: #008596;
|
||
flex-direction: column;
|
||
text-align: right;
|
||
}
|
||
|
||
.work-permission-value {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.work-permission-label {
|
||
margin-top: 4rpx;
|
||
font-size: 20rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.work-section {
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 8rpx 24rpx rgba(40, 34, 92, 0.06);
|
||
}
|
||
|
||
.work-section-header {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: flex-start;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.work-section-marker {
|
||
width: 8rpx;
|
||
height: 38rpx;
|
||
flex: 0 0 8rpx;
|
||
border-radius: 999rpx;
|
||
background: #008596;
|
||
}
|
||
|
||
.work-section-copy {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.work-section-title {
|
||
display: block;
|
||
color: #28225c;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.work-section-description {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
color: #8b969d;
|
||
font-size: 22rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.work-entry-list {
|
||
display: flex;
|
||
min-width: 0;
|
||
margin-top: 20rpx;
|
||
gap: 12rpx;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.work-entry {
|
||
display: flex;
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
border: 1rpx solid #e5eeee;
|
||
border-radius: 16rpx;
|
||
padding: 18rpx;
|
||
background: #fbfdfd;
|
||
}
|
||
|
||
.work-entry:active {
|
||
border-color: #8ccbc5;
|
||
background: #f0faf9;
|
||
}
|
||
|
||
.work-entry-icon {
|
||
display: flex;
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
flex: 0 0 82rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 18rpx;
|
||
}
|
||
|
||
.work-entry-icon-glyph {
|
||
font-size: 42rpx;
|
||
}
|
||
|
||
.work-entry-copy {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.work-entry-title,
|
||
.work-entry-description {
|
||
display: block;
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.work-entry-title {
|
||
color: #27313a;
|
||
font-size: 27rpx;
|
||
font-weight: 700;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.work-entry-description {
|
||
margin-top: 7rpx;
|
||
color: #7b8791;
|
||
font-size: 22rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.work-entry-arrow {
|
||
flex: 0 0 34rpx;
|
||
color: #a9b7bb;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.work-empty-state {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 70rpx 16rpx 54rpx;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.work-empty-icon {
|
||
display: flex;
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: #f1f5f5;
|
||
color: #9aa5ad;
|
||
}
|
||
|
||
.work-empty-icon-glyph {
|
||
font-size: 42rpx;
|
||
}
|
||
|
||
.work-empty-title {
|
||
display: block;
|
||
margin-top: 20rpx;
|
||
color: #4b5563;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.work-empty-description {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
color: #9aa5ad;
|
||
font-size: 22rpx;
|
||
line-height: 1.5;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
@media screen and (max-width: 420px) {
|
||
.work-content {
|
||
padding-right: 20rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.work-kicker {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.work-section {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.work-entry {
|
||
gap: 12rpx;
|
||
padding: 14rpx;
|
||
}
|
||
|
||
.work-entry-icon {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
flex-basis: 72rpx;
|
||
}
|
||
|
||
.work-entry-icon-glyph {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
</style>
|