<script lang="ts" setup>
|
import type { Ref } from 'vue';
|
|
import { computed, onActivated, onMounted, ref, watch } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Badge, Card, List } from 'ant-design-vue';
|
import { automaticApproval } from '#/store/audit-policy';
|
|
import { getFollowClueCount } from '#/api/crm/clue';
|
import {
|
getAuditContractCount,
|
getRemindContractCount,
|
} from '#/api/crm/contract';
|
import {
|
getFollowCustomerCount,
|
getPutPoolRemindCustomerCount,
|
getTodayContactCustomerCount,
|
} from '#/api/crm/customer';
|
import { getAuditReceivableCount } from '#/api/crm/receivable';
|
import { getReceivablePlanRemindCount } from '#/api/crm/receivable/plan';
|
|
import { useLeftSides } from './data';
|
import ClueFollowList from './modules/clue-follow-list.vue';
|
import ContractAuditList from './modules/contract-audit-list.vue';
|
import ContractRemindList from './modules/contract-remind-list.vue';
|
import CustomerFollowList from './modules/customer-follow-list.vue';
|
import CustomerPutPoolRemindList from './modules/customer-put-pool-remind-list.vue';
|
import CustomerTodayContactList from './modules/customer-today-contact-list.vue';
|
import ReceivableAuditList from './modules/receivable-audit-list.vue';
|
import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
|
|
const leftMenu = ref('customerTodayContact');
|
|
const clueFollowCount = ref(0);
|
const customerFollowCount = ref(0);
|
const customerPutPoolRemindCount = ref(0);
|
const customerTodayContactCount = ref(0);
|
const contractAuditCount = ref(0);
|
const contractRemindCount = ref(0);
|
const receivableAuditCount = ref(0);
|
const receivablePlanRemindCount = ref(0);
|
|
const leftSides = useLeftSides(
|
customerTodayContactCount,
|
clueFollowCount,
|
customerFollowCount,
|
customerPutPoolRemindCount,
|
contractAuditCount,
|
contractRemindCount,
|
receivableAuditCount,
|
receivablePlanRemindCount,
|
);
|
const visibleLeftSides = computed(() => leftSides.filter((item) =>
|
!automaticApproval.value || !['contractAudit', 'receivableAudit'].includes(item.menu),
|
));
|
watch(automaticApproval, (automatic) => {
|
if (automatic && ['contractAudit', 'receivableAudit'].includes(leftMenu.value)) {
|
leftMenu.value = 'customerTodayContact';
|
}
|
});
|
|
const currentComponent = computed(() => {
|
const components = {
|
customerTodayContact: CustomerTodayContactList,
|
clueFollow: ClueFollowList,
|
contractAudit: ContractAuditList,
|
receivableAudit: ReceivableAuditList,
|
contractRemind: ContractRemindList,
|
customerFollow: CustomerFollowList,
|
customerPutPoolRemind: CustomerPutPoolRemindList,
|
receivablePlanRemind: ReceivablePlanRemindList,
|
} as const;
|
return components[leftMenu.value as keyof typeof components];
|
});
|
|
/** 侧边点击 */
|
function sideClick(item: { menu: string }) {
|
leftMenu.value = item.menu;
|
}
|
|
/** 独立加载各类数量，单个接口失败不阻断其他待办。 */
|
let countRequest: Promise<void> | undefined;
|
function getCount() {
|
if (countRequest) return countRequest;
|
const requests: [Ref<number>, () => Promise<number>][] = [
|
[customerTodayContactCount, getTodayContactCustomerCount],
|
[customerPutPoolRemindCount, getPutPoolRemindCustomerCount],
|
[customerFollowCount, getFollowCustomerCount],
|
[clueFollowCount, getFollowClueCount],
|
[contractRemindCount, getRemindContractCount],
|
[receivablePlanRemindCount, getReceivablePlanRemindCount],
|
];
|
if (!automaticApproval.value) {
|
requests.push(
|
[contractAuditCount, getAuditContractCount],
|
[receivableAuditCount, getAuditReceivableCount],
|
);
|
}
|
countRequest = Promise.allSettled(
|
requests.map(async ([count, request]) => {
|
count.value = await request();
|
}),
|
).then(() => undefined).finally(() => {
|
countRequest = undefined;
|
});
|
return countRequest;
|
}
|
|
/** 激活时 */
|
onActivated(() => {
|
getCount();
|
});
|
|
/** 初始化 */
|
onMounted(() => {
|
getCount();
|
});
|
</script>
|
<template>
|
<Page auto-content-height>
|
<div class="flex h-full w-full">
|
<Card class="w-1/5">
|
<List item-layout="horizontal" :data-source="visibleLeftSides">
|
<template #renderItem="{ item }">
|
<List.Item
|
@click="sideClick(item)"
|
class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
|
>
|
<List.Item.Meta>
|
<template #title>
|
{{ item.name }}
|
</template>
|
</List.Item.Meta>
|
<template #extra>
|
<Badge
|
v-if="item.count.value > 0"
|
:color="item.menu === leftMenu ? 'blue' : 'red'"
|
:count="item.count.value"
|
/>
|
</template>
|
</List.Item>
|
</template>
|
</List>
|
</Card>
|
<component class="ml-4 w-4/5" :is="currentComponent" @refresh="getCount" />
|
</div>
|
</Page>
|
</template>
|
