<script lang="ts" setup>
|
import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { encryptByBase64 } from '@jnpf/utils';
|
|
import dayjs from 'dayjs';
|
|
import { getFlowTodoList } from '#/api/workFlow/flowMonitor';
|
|
import CardHeader from '../CardHeader/index.vue';
|
|
const props = defineProps(['activeData']);
|
const list = ref<any[]>([]);
|
const hasAuth = ref<boolean>(true);
|
const loading = ref<boolean>(false);
|
const router = useRouter();
|
const REFRESH_INTERVAL = 60_000;
|
let timer: number | undefined;
|
let requesting = false;
|
let hasLoaded = false;
|
|
async function initData() {
|
if (requesting || document.hidden) return;
|
requesting = true;
|
if (!hasLoaded) loading.value = true;
|
try {
|
const res = await getFlowTodoList(props.activeData.type || 0);
|
list.value = res.data?.list?.length ? res.data.list.slice(0, 7) : [];
|
hasAuth.value = !!res.data?.isAuthorize;
|
} catch {
|
// Keep the last successful list and retry on the next refresh.
|
} finally {
|
hasLoaded = true;
|
loading.value = false;
|
requesting = false;
|
}
|
}
|
function startRefresh() {
|
if (timer !== undefined) return;
|
void initData();
|
timer = window.setInterval(initData, REFRESH_INTERVAL);
|
}
|
function stopRefresh() {
|
if (timer === undefined) return;
|
window.clearInterval(timer);
|
timer = undefined;
|
}
|
function onVisibilityChange() {
|
if (!document.hidden && timer !== undefined) void initData();
|
}
|
function goDetail(item) {
|
const config = JSON.stringify({ ...item, operatorId: item.id, opType: props.activeData.type });
|
router.push(`/workFlowDetail?config=${encodeURIComponent(encryptByBase64(config))}`);
|
}
|
|
onMounted(() => {
|
document.addEventListener('visibilitychange', onVisibilityChange);
|
startRefresh();
|
});
|
onActivated(startRefresh);
|
onDeactivated(stopRefresh);
|
onUnmounted(() => {
|
stopRefresh();
|
document.removeEventListener('visibilitychange', onVisibilityChange);
|
});
|
</script>
|
<template>
|
<a-card class="portal-card-box">
|
<template #title v-if="activeData.title">
|
<CardHeader :title="activeData.title" :card="activeData.card" />
|
</template>
|
<template v-if="!loading">
|
<div class="portal-card-body portal-card-todoList" v-if="hasAuth">
|
<template v-if="list.length">
|
<a class="item" v-for="(item, i) in list" :key="i">
|
<span class="name com-hover" @click="goDetail(item)">{{ item.fullName }}</span>
|
<span class="time">{{ dayjs(item.creatorTime).format('YYYY-MM-DD') }}</span>
|
</a>
|
</template>
|
<div class="portal-common-noData" v-else>
|
<jnpf-empty />
|
</div>
|
</div>
|
<div class="portal-card-body portal-card-todoList no-auth-todoList" v-else>
|
<p class="no-auth-tip">您暂无该控件的访问权限</p>
|
</div>
|
</template>
|
</a-card>
|
</template>
|
