<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { getFlowTodoCount } from '#/api/workFlow/flowMonitor';
|
import { useBaseStore } from '#/store';
|
|
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 baseStore = useBaseStore();
|
const { createMessage } = useMessage();
|
|
function initData() {
|
loading.value = true;
|
const query = {
|
flowToSignType: [],
|
flowTodoType: [],
|
flowDoingType: [],
|
flowDoneType: [],
|
flowCirculateType: [],
|
};
|
list.value.map((e) => {
|
query[`${e.id}Type`] = e.category;
|
return e;
|
});
|
getFlowTodoCount(query).then((res) => {
|
loading.value = false;
|
const data = res.data || {};
|
hasAuth.value = data.isToSign || data.isTodo || data.isDoing || data.isDone || data.isCirculate;
|
list.value.forEach((e) => {
|
if (e.id == 'flowToSign') {
|
e.num = data.flowToSign || 0;
|
if (!e.noShow) e.noShow = !data.isToSign;
|
}
|
if (e.id == 'flowTodo') {
|
e.num = data.flowTodo || 0;
|
if (!e.noShow) e.noShow = !data.isTodo;
|
}
|
if (e.id == 'flowDoing') {
|
e.num = data.flowDoing || 0;
|
if (!e.noShow) e.noShow = !data.isDoing;
|
}
|
if (e.id == 'flowDone') {
|
e.num = data.flowDone || 0;
|
if (!e.noShow) e.noShow = !data.isDone;
|
}
|
if (e.id == 'flowCirculate') {
|
e.num = data.flowCirculate || 0;
|
if (!e.noShow) e.noShow = !data.isCirculate;
|
}
|
});
|
});
|
}
|
function handleClick(item) {
|
if (item.id == 'flowToSign' && !baseStore.sysConfigInfo.flowSign) return createMessage.warning('系统未开启流程待签，无法跳转');
|
if (item.id == 'flowTodo' && !baseStore.sysConfigInfo.flowTodo) return createMessage.warning('系统未开启流程待办，无法跳转');
|
router.push(item.urlAddress);
|
}
|
|
onMounted(() => {
|
list.value = props.activeData.option.defaultValue;
|
initData();
|
});
|
</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="todo-box-body" v-if="hasAuth">
|
<div
|
class="item"
|
:style="{ width: `${100 / (activeData.option.rowNumber || 3)}%` }"
|
:class="{ 'item-border': activeData.option.showBorder }"
|
@click="handleClick(item)"
|
v-for="(item, index) in list"
|
:key="index"
|
v-show="!item.noShow">
|
<i :class="item.icon" :style="{ background: item.iconBgColor }"></i>
|
<div class="text">
|
<p
|
class="num"
|
:style="{
|
'font-size': `${activeData.option.valueFontSize}px`,
|
'font-weight': activeData.option.valueFontWeight ? 'bolder' : 'normal',
|
color: activeData.option.valueFontColor,
|
}">
|
{{ item.num }}
|
</p>
|
<p
|
class="name"
|
:style="{
|
'font-size': `${activeData.option.labelFontSize}px`,
|
'font-weight': activeData.option.labelFontWeight ? 'bolder' : 'normal',
|
color: activeData.option.labelFontColor,
|
}">
|
{{ item.fullName }}
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="todo-box-body no-auth-body" v-else>
|
<p class="no-auth-tip">您暂无该控件的访问权限</p>
|
</div>
|
</template>
|
</a-card>
|
</template>
|
<style lang="scss" scoped>
|
.todo-box-body {
|
display: flex;
|
flex-wrap: wrap;
|
|
&.no-auth-body {
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
color: var(--text-color-secondary);
|
}
|
|
.item-border {
|
box-shadow:
|
1px 0 #f0f0f0,
|
0 1px #f0f0f0,
|
1px 1px #f0f0f0,
|
1px 0 #f0f0f0 inset,
|
0 1px #f0f0f0 inset;
|
transition: all 0.3s;
|
|
&:hover {
|
position: relative;
|
z-index: 1;
|
box-shadow:
|
0 1px 2px -2px #00000029,
|
0 3px 6px #0000001f,
|
0 5px 12px 4px #00000017;
|
}
|
}
|
|
.item {
|
display: flex;
|
align-items: center;
|
height: 141px;
|
overflow: hidden;
|
cursor: pointer;
|
|
i {
|
display: inline-block;
|
flex-shrink: 0;
|
width: 56px;
|
height: 56px;
|
margin-right: 14px;
|
margin-left: 30px;
|
font-size: 30px;
|
line-height: 56px;
|
vertical-align: top;
|
color: #fff;
|
text-align: center;
|
border-radius: 50%;
|
}
|
|
.text {
|
display: inline-block;
|
height: 56px;
|
|
.num {
|
font-size: 20px;
|
line-height: 36px;
|
}
|
|
.name {
|
font-size: 14px;
|
color: #666;
|
}
|
}
|
}
|
}
|
</style>
|
