Simon
112 lines
3.0 KiB
Vue
112 lines
3.0 KiB
Vue
<!-- =============================================================================
|
|
// 企微IT智能服务台 — H5用户端审批流程链接组件
|
|
// =============================================================================
|
|
// 说明：展示所有审批流程链接，按分类分组
|
|
// 使用 Vant4 CellGroup + Cell 组件
|
|
// 点击链接在企微内置浏览器中打开
|
|
// ============================================================================= -->
|
|
|
|
<template>
|
|
<div class="approval-links">
|
|
<!-- 加载中提示 -->
|
|
<div v-if="loading" class="approval-links__loading">
|
|
<van-loading size="24px" vertical>加载中...</van-loading>
|
|
</div>
|
|
|
|
<!-- 无数据提示 -->
|
|
<div v-else-if="Object.keys(groupedLinks).length === 0" class="approval-links__empty">
|
|
<van-empty description="暂无审批流程" image="search" />
|
|
</div>
|
|
|
|
<!-- 按分类展示审批链接 -->
|
|
<template v-else>
|
|
<div
|
|
v-for="(links, category) in groupedLinks"
|
|
:key="category"
|
|
class="approval-links__group"
|
|
>
|
|
<!-- 分类标题 -->
|
|
<div class="approval-links__category">{{ category }}</div>
|
|
<!-- 该分类下的链接列表 -->
|
|
<van-cell-group inset>
|
|
<van-cell
|
|
v-for="link in links"
|
|
:key="link.id"
|
|
:title="link.title"
|
|
:icon="link.icon || 'link-o'"
|
|
is-link
|
|
@click="openLink(link.url)"
|
|
>
|
|
<!-- 右侧箭头 -->
|
|
<template #right-icon>
|
|
<van-icon name="arrow" />
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/**
|
|
* ApprovalLinks 审批流程链接组件
|
|
* 从 API 获取审批流程数据，按分类分组展示
|
|
* 点击链接在企微内置浏览器中打开
|
|
*/
|
|
|
|
import { computed } from 'vue'
|
|
import { useConversationStore } from '@/stores/conversation'
|
|
const store = useConversationStore()
|
|
|
|
/** 加载状态：当审批链接列表为空且未初始化时视为加载中 */
|
|
const loading = computed(() => {
|
|
return store.approvalLinks.length === 0 && !store.initialized
|
|
})
|
|
|
|
/** 审批链接按分类分组（从 store 计算属性获取） */
|
|
const groupedLinks = computed(() => store.approvalLinksByCategory)
|
|
|
|
/**
|
|
* 打开审批流程链接
|
|
* 在企微内置浏览器中打开目标链接
|
|
* @param url 审批流程链接地址
|
|
*/
|
|
function openLink(url: string): void {
|
|
// 在企微 WebView 中直接使用 window.open 即可在内置浏览器中打开
|
|
window.open(url, '_blank')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 审批链接容器 */
|
|
.approval-links {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
/* 加载中状态 */
|
|
.approval-links__loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
/* 空数据状态 */
|
|
.approval-links__empty {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
/* 分类分组容器 */
|
|
.approval-links__group {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* 分类标题 */
|
|
.approval-links__category {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
padding: 8px 16px 4px;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|