yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: crm backlog

pull/121/MERGE
xingyu4j 2025-05-29 23:27:57 +08:00
parent 4969799412
commit a043e4a746
11 changed files with 304 additions and 867 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

670
apps/web-antd/src/views/crm/backlog/data.ts
View File

@ -1,15 +1,5 @@
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmReceivableApi } from '#/api/crm/receivable';
import { useAccess } from '@vben/access';
import { DICT_TYPE } from '#/utils';
const { hasAccessByCodes } = useAccess();
export interface LeftSideItem { export interface LeftSideItem {
name: string; name: string;
menu: string; menu: string;
@ -109,663 +99,3 @@ export const useLeftSides = (
}, },
]; ];
}; };
/** 分配给我的线索 列表的搜索表单 */
export function useClueFollowFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'followUpStatus',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: FOLLOWUP_STATUS,
},
defaultValue: false,
},
];
}
/** 分配给我的线索 列表的字段 */
export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '线索名称',
fixed: 'left',
slots: { default: 'name' },
},
{
field: 'source',
title: '线索来源',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
},
},
{
field: 'mobile',
title: '手机',
},
{
field: 'telephone',
title: '电话',
},
{
field: 'email',
title: '邮箱',
},
{
field: 'detailAddress',
title: '地址',
},
{
field: 'industryId',
title: '客户行业',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
},
},
{
field: 'level',
title: '客户级别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
},
},
{
field: 'contactNextTime',
title: '下次联系时间',
formatter: 'formatDateTime',
},
{
field: 'remark',
title: '备注',
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
},
{
field: 'contactLastContent',
title: '最后跟进记录',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
field: 'creatorName',
title: '创建人',
},
];
}
/** 合同审核列表的搜索表单 */
export function useContractAuditFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'auditStatus',
label: '合同状态',
component: 'Select',
componentProps: {
allowClear: true,
options: AUDIT_STATUS,
},
defaultValue: 10,
},
];
}
/** 合同提醒列表的搜索表单 */
export function useContractRemindFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'expiryType',
label: '到期状态',
component: 'Select',
componentProps: {
allowClear: true,
options: CONTRACT_EXPIRY_TYPE,
},
defaultValue: 1,
},
];
}
/** 合同审核列表的字段 */
export function useContractColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'no',
title: '合同编号',
fixed: 'left',
},
{
field: 'name',
title: '合同名称',
slots: { default: 'name' },
},
{
field: 'customerName',
title: '客户名称',
slots: { default: 'customerName' },
},
{
field: 'businessName',
title: '商机名称',
slots: { default: 'businessName' },
},
{
field: 'price',
title: '合同金额（元）',
formatter: 'formatNumber',
},
{
field: 'orderDate',
title: '下单时间',
formatter: 'formatDateTime',
},
{
field: 'startTime',
title: '合同开始时间',
formatter: 'formatDateTime',
},
{
field: 'endTime',
title: '合同结束时间',
formatter: 'formatDateTime',
},
{
field: 'contactName',
title: '客户签约人',
slots: { default: 'contactName' },
},
{
field: 'signUserName',
title: '公司签约人',
},
{
field: 'remark',
title: '备注',
},
{
field: 'totalReceivablePrice',
title: '已回款金额（元）',
formatter: 'formatNumber',
},
{
field: 'noReceivablePrice',
title: '未回款金额（元）',
formatter: 'formatNumber',
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
field: 'creatorName',
title: '创建人',
},
{
field: 'auditStatus',
title: '合同状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
},
},
{
title: '操作',
width: 80,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 客户跟进列表的搜索表单 */
export function useCustomerFollowFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'followUpStatus',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: FOLLOWUP_STATUS,
},
defaultValue: false,
},
];
}
/** 待进入公海客户列表的搜索表单 */
export function useCustomerPutPoolFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'sceneType',
label: '归属',
component: 'Select',
componentProps: {
allowClear: true,
options: SCENE_TYPES,
},
defaultValue: 1,
},
];
}
/** 今日需联系客户列表的搜索表单 */
export function useCustomerTodayContactFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'contactStatus',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: CONTACT_STATUS,
},
defaultValue: 1,
},
{
fieldName: 'sceneType',
label: '归属',
component: 'Select',
componentProps: {
allowClear: true,
options: SCENE_TYPES,
},
defaultValue: 1,
},
];
}
/** 客户列表的字段 */
export function useCustomerColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '客户名称',
slots: { default: 'name' },
},
{
field: 'source',
title: '客户来源',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
},
},
{
field: 'mobile',
title: '手机',
},
{
field: 'telephone',
title: '电话',
},
{
field: 'email',
title: '邮箱',
},
{
field: 'level',
title: '客户级别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
},
},
{
field: 'industryId',
title: '客户行业',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
},
},
{
field: 'contactNextTime',
title: '下次联系时间',
formatter: 'formatDateTime',
},
{
field: 'remark',
title: '备注',
},
{
field: 'lockStatus',
title: '锁定状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'dealStatus',
title: '成交状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
},
{
field: 'contactLastContent',
title: '最后跟进记录',
},
{
field: 'detailAddress',
title: '地址',
},
{
field: 'poolDay',
title: '距离进入公海天数',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
field: 'creatorName',
title: '创建人',
},
];
}
/** 回款审核列表的搜索表单 */
export function useReceivableAuditFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'auditStatus',
label: '合同状态',
component: 'Select',
componentProps: {
allowClear: true,
options: AUDIT_STATUS,
},
defaultValue: 10,
},
];
}
/** 回款审核列表的字段 */
export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'no',
title: '回款编号',
fixed: 'left',
slots: { default: 'no' },
},
{
field: 'customerName',
title: '客户名称',
slots: { default: 'customerName' },
},
{
field: 'contractNo',
title: '合同编号',
slots: { default: 'contractNo' },
},
{
field: 'returnTime',
title: '回款日期',
formatter: 'formatDateTime',
},
{
field: 'price',
title: '回款金额(元)',
formatter: 'formatNumber',
},
{
field: 'returnType',
title: '回款方式',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
},
},
{
field: 'remark',
title: '备注',
},
{
field: 'contract.totalPrice',
title: '合同金额（元）',
formatter: 'formatNumber',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
field: 'creatorName',
title: '创建人',
},
{
field: 'auditStatus',
title: '回款状态',
fixed: 'right',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
},
},
{
field: 'operation',
title: '操作',
width: 140,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '角色',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'processDetail',
text: '查看审批',
show: hasAccessByCodes(['crm:receivable:update']),
},
],
},
},
];
}
/** 回款计划提醒列表的搜索表单 */
export function useReceivablePlanRemindFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'remindType',
label: '合同状态',
component: 'Select',
componentProps: {
allowClear: true,
options: RECEIVABLE_REMIND_TYPE,
},
defaultValue: 1,
},
];
}
/** 回款计划提醒列表的字段 */
export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'customerName',
title: '客户名称',
fixed: 'left',
slots: { default: 'customerName' },
},
{
field: 'contractNo',
title: '合同编号',
},
{
field: 'period',
title: '期数',
slots: { default: 'period' },
},
{
field: 'price',
title: '计划回款金额（元）',
formatter: 'formatNumber',
},
{
field: 'returnTime',
title: '计划回款日期',
formatter: 'formatDateTime',
},
{
field: 'remindDays',
title: '提前几天提醒',
},
{
field: 'remindTime',
title: '提醒日期',
formatter: 'formatDateTime',
},
{
field: 'returnType',
title: '回款方式',
fixed: 'right',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
},
},
{
field: 'remark',
title: '备注',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'receivable.price',
title: '实际回款金额（元）',
formatter: 'formatNumber',
},
{
field: 'receivable.returnTime',
title: '实际回款日期',
formatter: 'formatDateTime',
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
field: 'creatorName',
title: '创建人',
},
{
field: 'operation',
title: '操作',
width: 140,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'customerName',
nameTitle: '客户名称',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'receivableForm',
text: '创建回款',
show: hasAccessByCodes(['crm:receivable:create']),
},
],
},
},
];
}

31
apps/web-antd/src/views/crm/backlog/index.vue
View File

@ -10,17 +10,16 @@ import * as ContractApi from '#/api/crm/contract';
import * as CustomerApi from '#/api/crm/customer'; import * as CustomerApi from '#/api/crm/customer';
import * as ReceivableApi from '#/api/crm/receivable'; import * as ReceivableApi from '#/api/crm/receivable';
import * as ReceivablePlanApi from '#/api/crm/receivable/plan'; import * as ReceivablePlanApi from '#/api/crm/receivable/plan';
import { DocAlert } from '#/components/doc-alert';
import { useLeftSides } from './data'; import { useLeftSides } from './data';
import ClueFollowList from './modules/clue-follow-list.vue'; import ClueFollowList from './modules/clue-follow-list.vue';
import ContractAuditList from './modules/contract-audit-list.vue'; import ContractAuditList from './modules/contract-audit-list.vue';
import ContractRemindList from './modules/ContractRemindList.vue'; import ContractRemindList from './modules/contract-remind-list.vue';
import CustomerFollowList from './modules/CustomerFollowList.vue'; import CustomerFollowList from './modules/customer-follow-list.vue';
import CustomerPutPoolRemindList from './modules/CustomerPutPoolRemindList.vue'; import CustomerPutPoolRemindList from './modules/customer-put-pool-remind-list.vue';
import CustomerTodayContactList from './modules/CustomerTodayContactList.vue'; import CustomerTodayContactList from './modules/customer-today-contact-list.vue';
import ReceivableAuditList from './modules/ReceivableAuditList.vue'; import ReceivableAuditList from './modules/receivable-audit-list.vue';
import ReceivablePlanRemindList from './modules/ReceivablePlanRemindList.vue'; import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
defineOptions({ name: 'CrmBacklog' }); defineOptions({ name: 'CrmBacklog' });
@ -92,12 +91,6 @@ onMounted(async () => {
</script> </script>
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<template #doc>
<DocAlert
title="【通用】跟进记录、待办事项"
url="https://doc.iocoder.cn/crm/follow-up/"
/>
</template>
<div class="flex h-full w-full"> <div class="flex h-full w-full">
<Card class="w-1/5"> <Card class="w-1/5">
<List item-layout="horizontal" :data-source="leftSides"> <List item-layout="horizontal" :data-source="leftSides">
@ -105,11 +98,17 @@ onMounted(async () => {
<List.Item> <List.Item>
<List.Item.Meta> <List.Item.Meta>
<template #title> <template #title>
<a @click="sideClick(item)"> {{ item.name }} </a> <a @click="sideClick(item)">
{{ item.name }}
</a>
</template> </template>
</List.Item.Meta> </List.Item.Meta>
<template #extra v-if="item.count.value && item.count.value > 0"> <template #extra>
<Badge :count="item.count.value" /> <Badge
:color="item.menu === leftMenu ? 'blue' : 'red'"
:count="item.count.value"
:show-zero="true"
/>
</template> </template>
</List.Item> </List.Item>
</template> </template>

90
apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
View File

@ -1,90 +0,0 @@
<!-- 待回款提醒 -->
<script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table';
import type { CrmReceivableApi } from '#/api/crm/receivable';
import { useRouter } from 'vue-router';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getReceivablePage } from '#/api/crm/receivable';
import {
useReceivablePlanRemindColumns,
useReceivablePlanRemindFormSchema,
} from '../data';
const { push } = useRouter();
/** 打开回款详情 */
function openDetail(row: CrmReceivableApi.Receivable) {
push({ name: 'CrmReceivableDetail', params: { id: row.id } });
}
/** 打开客户详情 */
function openCustomerDetail(row: CrmReceivableApi.Receivable) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 创建回款 */
function openReceivableForm(row: CrmReceivableApi.Receivable) {
// Todo: 打开创建回款
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<CrmReceivableApi.Receivable>) {
switch (code) {
case 'receivableForm': {
openReceivableForm(row);
break;
}
}
}
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useReceivablePlanRemindFormSchema(),
},
gridOptions: {
columns: useReceivablePlanRemindColumns(onActionClick),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getReceivablePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
},
});
</script>
<template>
<Grid table-title="待回款提醒">
<template #customerName="{ row }">
<Button type="link" @click="openCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
<template #period="{ row }">
<Button type="link" @click="openDetail(row)">{{ row.period }}</Button>
</template>
</Grid>
</template>

26
apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
View File

@ -1,5 +1,6 @@
<!-- 分配给我的线索 --> <!-- 分配给我的线索 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmClueApi } from '#/api/crm/clue'; import type { CrmClueApi } from '#/api/crm/clue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -8,8 +9,9 @@ import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCluePage } from '#/api/crm/clue'; import { getCluePage } from '#/api/crm/clue';
import { useGridColumns } from '#/views/crm/clue/data';
import { useClueFollowColumns, useClueFollowFormSchema } from '../data'; import { FOLLOWUP_STATUS } from '../data';
const { push } = useRouter(); const { push } = useRouter();
@ -20,10 +22,21 @@ function handleDetail(row: CrmClueApi.Clue) {
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useClueFollowFormSchema(), schema: [
{
fieldName: 'followUpStatus',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: FOLLOWUP_STATUS,
},
defaultValue: false,
},
],
}, },
gridOptions: { gridOptions: {
columns: useClueFollowColumns(), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmClueApi.Clue>,
}); });
</script> </script>
<template> <template>
<Grid table-title="分配给我的线索"> <Grid>
<template #name="{ row }"> <template #name="{ row }">
<Button type="link" @click="handleDetail(row)">{{ row.name }}</Button> <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
</template> </template>
<template #actions="{ row }">
<Button type="link" @click="handleDetail(row)">查看详情</Button>
</template>
</Grid> </Grid>
</template> </template>

23
apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
View File

@ -1,5 +1,6 @@
<!-- 待审核合同 --> <!-- 待审核合同 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContractApi } from '#/api/crm/contract'; import type { CrmContractApi } from '#/api/crm/contract';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -8,8 +9,9 @@ import { Button } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getContractPage } from '#/api/crm/contract'; import { getContractPage } from '#/api/crm/contract';
import { useGridColumns } from '#/views/crm/contract/data';
import { useContractAuditFormSchema, useContractColumns } from '../data'; import { AUDIT_STATUS } from '../data';
const { push } = useRouter(); const { push } = useRouter();
@ -42,10 +44,21 @@ function handleBusinessDetail(row: CrmContractApi.Contract) {
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useContractAuditFormSchema(), schema: [
{
fieldName: 'auditStatus',
label: '合同状态',
component: 'Select',
componentProps: {
allowClear: true,
options: AUDIT_STATUS,
},
defaultValue: 10,
},
],
}, },
gridOptions: { gridOptions: {
columns: useContractColumns(), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -67,12 +80,12 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmContractApi.Contract>,
}); });
</script> </script>
<template> <template>
<Grid table-title="待审核合同"> <Grid>
<template #name="{ row }"> <template #name="{ row }">
<Button type="link" @click="handleContractDetail(row)"> <Button type="link" @click="handleContractDetail(row)">
{{ row.name }} {{ row.name }}

73
apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue → apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
View File

@ -1,21 +1,22 @@
<!-- 即将到期的合同 --> <!-- 即将到期的合同 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContractApi } from '#/api/crm/contract'; import type { CrmContractApi } from '#/api/crm/contract';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Button } from 'ant-design-vue'; import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getContractPage } from '#/api/crm/contract'; import { getContractPage } from '#/api/crm/contract';
import { useGridColumns } from '#/views/crm/contract/data';
import { useContractColumns, useContractRemindFormSchema } from '../data'; import { CONTRACT_EXPIRY_TYPE } from '../data';
const { push } = useRouter(); const { push } = useRouter();
/** 查看审批 */ /** 查看审批 */
function openProcessDetail(row: CrmContractApi.Contract) { function handleProcessDetail(row: CrmContractApi.Contract) {
push({ push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
query: { id: row.processInstanceId }, query: { id: row.processInstanceId },
@ -23,43 +24,41 @@ function openProcessDetail(row: CrmContractApi.Contract) {
} }
/** 打开合同详情 */ /** 打开合同详情 */
function openContractDetail(row: CrmContractApi.Contract) { function handleContractDetail(row: CrmContractApi.Contract) {
push({ name: 'CrmContractDetail', params: { id: row.id } }); push({ name: 'CrmContractDetail', params: { id: row.id } });
} }
/** 打开客户详情 */ /** 打开客户详情 */
function openCustomerDetail(row: CrmContractApi.Contract) { function handleCustomerDetail(row: CrmContractApi.Contract) {
push({ name: 'CrmCustomerDetail', params: { id: row.id } }); push({ name: 'CrmCustomerDetail', params: { id: row.id } });
} }
/** 打开联系人详情 */ /** 打开联系人详情 */
function openContactDetail(row: CrmContractApi.Contract) { function handleContactDetail(row: CrmContractApi.Contract) {
push({ name: 'CrmContactDetail', params: { id: row.id } }); push({ name: 'CrmContactDetail', params: { id: row.id } });
} }
/** 打开商机详情 */ /** 打开商机详情 */
function openBusinessDetail(row: CrmContractApi.Contract) { function handleBusinessDetail(row: CrmContractApi.Contract) {
push({ name: 'CrmBusinessDetail', params: { id: row.id } }); push({ name: 'CrmBusinessDetail', params: { id: row.id } });
} }
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<CrmContractApi.Contract>) {
switch (code) {
case 'processDetail': {
openProcessDetail(row);
break;
}
}
}
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useContractRemindFormSchema(), schema: [
{
fieldName: 'expiryType',
label: '到期状态',
component: 'Select',
componentProps: {
allowClear: true,
options: CONTRACT_EXPIRY_TYPE,
},
defaultValue: 1,
},
],
}, },
gridOptions: { gridOptions: {
columns: useContractColumns(onActionClick), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -81,31 +80,43 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmContractApi.Contract>,
}); });
</script> </script>
<template> <template>
<Grid table-title="即将到期的合同"> <Grid>
<template #name="{ row }"> <template #name="{ row }">
<Button type="link" @click="openContractDetail(row)"> <Button type="link" @click="handleContractDetail(row)">
{{ row.name }} {{ row.name }}
</Button> </Button>
</template> </template>
<template #customerName="{ row }"> <template #customerName="{ row }">
<Button type="link" @click="openCustomerDetail(row)"> <Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }} {{ row.customerName }}
</Button> </Button>
</template> </template>
<template #businessName="{ row }"> <template #businessName="{ row }">
<Button type="link" @click="openBusinessDetail(row)"> <Button type="link" @click="handleBusinessDetail(row)">
{{ row.businessName }} {{ row.businessName }}
</Button> </Button>
</template> </template>
<template #contactName="{ row }"> <template #signContactName="{ row }">
<Button type="link" @click="openContactDetail(row)"> <Button type="link" @click="handleContactDetail(row)">
{{ row.contactName }} {{ row.signContactName }}
</Button> </Button>
</template> </template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '查看审批',
type: 'link',
auth: ['crm:contract:update'],
onClick: handleProcessDetail.bind(null, row),
},
]"
/>
</template>
</Grid> </Grid>
</template> </template>

30
apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue → apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
View File

@ -1,5 +1,6 @@
<!-- 分配给我的客户 --> <!-- 分配给我的客户 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmCustomerApi } from '#/api/crm/customer'; import type { CrmCustomerApi } from '#/api/crm/customer';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCustomerPage } from '#/api/crm/customer'; import { getCustomerPage } from '#/api/crm/customer';
import { useGridColumns } from '#/views/crm/customer/data';
import { useCustomerColumns, useCustomerFollowFormSchema } from '../data'; import { FOLLOWUP_STATUS } from '../data';
const { push } = useRouter(); const { push } = useRouter();
/** 打开客户详情 */ /** 打开客户详情 */
function onDetail(row: CrmCustomerApi.Customer) { function handleDetail(row: CrmCustomerApi.Customer) {
push({ name: 'CrmCustomerDetail', params: { id: row.id } }); push({ name: 'CrmCustomerDetail', params: { id: row.id } });
} }
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useCustomerFollowFormSchema(), schema: [
{
fieldName: 'followUpStatus',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: FOLLOWUP_STATUS,
},
defaultValue: false,
},
],
}, },
gridOptions: { gridOptions: {
columns: useCustomerColumns(), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmCustomerApi.Customer>,
}); });
</script> </script>
<template> <template>
<Grid table-title="分配给我的客户"> <Grid>
<template #name="{ row }"> <template #name="{ row }">
<Button type="link" @click="onDetail(row)">{{ row.name }}</Button> <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
</template>
<template #actions="{ row }">
<Button type="link" @click="handleDetail(row)">查看详情</Button>
</template> </template>
</Grid> </Grid>
</template> </template>

30
apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue → apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
View File

@ -1,5 +1,6 @@
<!-- 待进入公海的客户 --> <!-- 待进入公海的客户 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmCustomerApi } from '#/api/crm/customer'; import type { CrmCustomerApi } from '#/api/crm/customer';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCustomerPage } from '#/api/crm/customer'; import { getCustomerPage } from '#/api/crm/customer';
import { useGridColumns } from '#/views/crm/customer/data';
import { useCustomerColumns, useCustomerPutPoolFormSchema } from '../data'; import { SCENE_TYPES } from '../data';
const { push } = useRouter(); const { push } = useRouter();
/** 打开客户详情 */ /** 打开客户详情 */
function onDetail(row: CrmCustomerApi.Customer) { function handleDetail(row: CrmCustomerApi.Customer) {
push({ name: 'CrmCustomerDetail', params: { id: row.id } }); push({ name: 'CrmCustomerDetail', params: { id: row.id } });
} }
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useCustomerPutPoolFormSchema(), schema: [
{
fieldName: 'sceneType',
label: '归属',
component: 'Select',
componentProps: {
allowClear: true,
options: SCENE_TYPES,
},
defaultValue: 1,
},
],
}, },
gridOptions: { gridOptions: {
columns: useCustomerColumns(), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmCustomerApi.Customer>,
}); });
</script> </script>
<template> <template>
<Grid table-title="待进入公海的客户"> <Grid>
<template #name="{ row }"> <template #name="{ row }">
<Button type="link" @click="onDetail(row)">{{ row.name }}</Button> <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
</template>
<template #actions="{ row }">
<Button type="link" @click="handleDetail(row)">查看详情</Button>
</template> </template>
</Grid> </Grid>
</template> </template>

40
apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue → apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
View File

@ -1,5 +1,6 @@
<!-- 今日需联系客户 --> <!-- 今日需联系客户 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmCustomerApi } from '#/api/crm/customer'; import type { CrmCustomerApi } from '#/api/crm/customer';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -8,22 +9,44 @@ import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCustomerPage } from '#/api/crm/customer'; import { getCustomerPage } from '#/api/crm/customer';
import { useGridColumns } from '#/views/crm/customer/data';
import { useCustomerColumns, useCustomerTodayContactFormSchema } from '../data'; import { CONTACT_STATUS, SCENE_TYPES } from '../data';
const { push } = useRouter(); const { push } = useRouter();
/** 打开客户详情 */ /** 打开客户详情 */
function onDetail(row: CrmCustomerApi.Customer) { function handleDetail(row: CrmCustomerApi.Customer) {
push({ name: 'CrmCustomerDetail', params: { id: row.id } }); push({ name: 'CrmCustomerDetail', params: { id: row.id } });
} }
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useCustomerTodayContactFormSchema(), schema: [
{
fieldName: 'contactStatus',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: CONTACT_STATUS,
},
defaultValue: 1,
},
{
fieldName: 'sceneType',
label: '归属',
component: 'Select',
componentProps: {
allowClear: true,
options: SCENE_TYPES,
},
defaultValue: 1,
},
],
}, },
gridOptions: { gridOptions: {
columns: useCustomerColumns(), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -45,14 +68,17 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmCustomerApi.Customer>,
}); });
</script> </script>
<template> <template>
<Grid table-title="今日需联系客户"> <Grid>
<template #name="{ row }"> <template #name="{ row }">
<Button type="link" @click="onDetail(row)">{{ row.name }}</Button> <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
</template>
<template #actions="{ row }">
<Button type="link" @click="handleDetail(row)">查看详情</Button>
</template> </template>
</Grid> </Grid>
</template> </template>

57
apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue → apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
View File

@ -1,6 +1,6 @@
<!-- 待审核回款 --> <!-- 待审核回款 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmReceivableApi } from '#/api/crm/receivable'; import type { CrmReceivableApi } from '#/api/crm/receivable';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -9,16 +9,14 @@ import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getReceivablePage } from '#/api/crm/receivable'; import { getReceivablePage } from '#/api/crm/receivable';
import { useGridColumns } from '#/views/crm/receivable/data';
import { import { AUDIT_STATUS } from '../data';
useReceivableAuditColumns,
useReceivableAuditFormSchema,
} from '../data';
const { push } = useRouter(); const { push } = useRouter();
/** 查看审批 */ /** 查看审批 */
function openProcessDetail(row: CrmReceivableApi.Receivable) { function handleProcessDetail(row: CrmReceivableApi.Receivable) {
push({ push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
query: { id: row.processInstanceId }, query: { id: row.processInstanceId },
@ -26,39 +24,37 @@ function openProcessDetail(row: CrmReceivableApi.Receivable) {
} }
/** 打开回款详情 */ /** 打开回款详情 */
function openDetail(row: CrmReceivableApi.Receivable) { function handleDetail(row: CrmReceivableApi.Receivable) {
push({ name: 'CrmReceivableDetail', params: { id: row.id } }); push({ name: 'CrmReceivableDetail', params: { id: row.id } });
} }
/** 打开客户详情 */ /** 打开客户详情 */
function openCustomerDetail(row: CrmReceivableApi.Receivable) { function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } }); push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
} }
/** 打开合同详情 */ /** 打开合同详情 */
function openContractDetail(row: CrmReceivableApi.Receivable) { function handleContractDetail(row: CrmReceivableApi.Receivable) {
push({ name: 'CrmContractDetail', params: { id: row.contractId } }); push({ name: 'CrmContractDetail', params: { id: row.contractId } });
} }
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<CrmReceivableApi.Receivable>) {
switch (code) {
case 'processDetail': {
openProcessDetail(row);
break;
}
}
}
const [Grid] = useVbenVxeGrid({ const [Grid] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useReceivableAuditFormSchema(), schema: [
{
fieldName: 'auditStatus',
label: '合同状态',
component: 'Select',
componentProps: {
allowClear: true,
options: AUDIT_STATUS,
},
defaultValue: 10,
},
],
}, },
gridOptions: { gridOptions: {
columns: useReceivableAuditColumns(onActionClick), columns: useGridColumns(),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@ -79,26 +75,29 @@ const [Grid] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
}, } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
}); });
</script> </script>
<template> <template>
<Grid table-title="待审核回款"> <Grid>
<template #no="{ row }"> <template #no="{ row }">
<Button type="link" @click="openDetail(row)"> <Button type="link" @click="handleDetail(row)">
{{ row.no }} {{ row.no }}
</Button> </Button>
</template> </template>
<template #customerName="{ row }"> <template #customerName="{ row }">
<Button type="link" @click="openCustomerDetail(row)"> <Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }} {{ row.customerName }}
</Button> </Button>
</template> </template>
<template #contractNo="{ row }"> <template #contractNo="{ row }">
<Button type="link" @click="openContractDetail(row)"> <Button type="link" @click="handleContractDetail(row)">
{{ row.contractNo }} {{ row.contractNo }}
</Button> </Button>
</template> </template>
<template #actions="{ row }">
<Button type="link" @click="handleProcessDetail(row)">查看审批</Button>
</template>
</Grid> </Grid>
</template> </template>

101
apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue Normal file
View File

@ -0,0 +1,101 @@
<!-- 待回款提醒 -->
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
import { useRouter } from 'vue-router';
import { useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getReceivablePlanPage } from '#/api/crm/receivable/plan';
import Form from '#/views/crm/receivable/modules/form.vue';
import { useGridColumns } from '#/views/crm/receivable/plan/data';
import { RECEIVABLE_REMIND_TYPE } from '../data';
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 打开回款详情 */
function handleDetail(row: CrmReceivablePlanApi.Plan) {
push({ name: 'CrmReceivableDetail', params: { id: row.id } });
}
/** 打开客户详情 */
function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 创建回款 */
function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
formModalApi.setData({ plan: row }).open();
}
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'remindType',
label: '合同状态',
component: 'Select',
componentProps: {
allowClear: true,
options: RECEIVABLE_REMIND_TYPE,
},
defaultValue: 1,
},
],
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getReceivablePlanPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
});
</script>
<template>
<div>
<FormModal />
<Grid>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
<template #period="{ row }">
<Button type="link" @click="handleDetail(row)">{{ row.period }}</Button>
</template>
<template #actions="{ row }">
<Button type="link" @click="handleCreateReceivable(row)">
创建回款
</Button>
</template>
</Grid>
</div>
</template>