feat: crm detail

pull/130/head^2
xingyu4j 2025-06-05 20:47:02 +08:00
parent 91a9c508a0
commit 181367791f
8 changed files with 528 additions and 23 deletions

View File

@ -29,10 +29,20 @@ export namespace CrmReceivablePlanApi {
returnTime: Date;
};
}
export interface PlanPageParam extends PageParam {
customerId?: number;
contractId?: number;
contractNo?: string;
sceneType?: number;
remindType?: number;
}
}
/** 查询回款计划列表 */
export function getReceivablePlanPage(params: PageParam) {
export function getReceivablePlanPage(
params: CrmReceivablePlanApi.PlanPageParam,
) {
return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
'/crm/receivable-plan/page',
{ params },
@ -40,7 +50,9 @@ export function getReceivablePlanPage(params: PageParam) {
}
/** 查询回款计划列表(按客户) */
export function getReceivablePlanPageByCustomer(params: PageParam) {
export function getReceivablePlanPageByCustomer(
params: CrmReceivablePlanApi.PlanPageParam,
) {
return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
'/crm/receivable-plan/page-by-customer',
{ params },

View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import type { CrmReceivableApi } from '#/api/crm/receivable';
import { ref } from 'vue';
@ -102,7 +101,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmBusinessApi.Business>,
} as VxeTableGridOptions<CrmReceivableApi.Receivable>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
@ -121,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: $t('ui.actionTitle.create', ['回款']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:business:create'],
auth: ['crm:receivable:create'],
onClick: handleCreate,
},
]"

View File

@ -1,7 +1,14 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { getCustomerSimpleList } from '#/api/crm/customer';
import { DictTag } from '#/components/dict-tag';
import { erpPriceInputFormatter } from '#/utils';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
/** 新增/修改的表单 */
@ -228,3 +235,150 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'customerName',
label: '客户名称',
},
{
field: 'totalPrice',
label: '合同金额',
content: (data) => erpPriceInputFormatter(data.totalPrice),
},
{
field: 'returnTime',
label: '回款日期',
content: (data) => formatDateTime(data?.returnTime) as string,
},
{
field: 'price',
label: '回款金额',
content: (data) => erpPriceInputFormatter(data.price),
},
{
field: 'ownerUserName',
label: '负责人',
},
];
}
/** 详情页的基础字段 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'no',
label: '回款编号',
},
{
field: 'customerName',
label: '客户名称',
},
{
field: 'contract',
label: '合同编号',
content: (data) => data?.contract?.no,
},
{
field: 'returnTime',
label: '回款日期',
content: (data) => formatDateTime(data?.returnTime) as string,
},
{
field: 'price',
label: '回款金额',
content: (data) => erpPriceInputFormatter(data.price),
},
{
field: 'returnType',
label: '回款方式',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
value: data?.returnType,
}),
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
title: '回款编号',
field: 'no',
minWidth: 150,
fixed: 'left',
},
{
title: '客户名称',
field: 'customerName',
minWidth: 150,
},
{
title: '合同编号',
field: 'contract',
minWidth: 150,
},
{
title: '回款日期',
field: 'returnTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '回款金额(元)',
field: 'price',
minWidth: 150,
formatter: 'formatNumber',
},
{
title: '回款方式',
field: 'returnType',
minWidth: 150,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
},
},
{
title: '负责人',
field: 'ownerUserName',
minWidth: 150,
},
{
title: '备注',
field: 'remark',
minWidth: 150,
},
{
title: '合同金额(元)',
field: 'contract.totalPrice',
minWidth: 150,
formatter: 'formatNumber',
},
{
title: '回款状态',
field: 'auditStatus',
minWidth: 100,
fixed: 'right',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
},
},
{
title: '操作',
field: 'actions',
width: 130,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

View File

@ -53,12 +53,12 @@ function handleCreate() {
}
/** 编辑回款计划 */
function handleEdit(row: CrmReceivablePlanApi.ReceivablePlan) {
function handleEdit(row: CrmReceivablePlanApi.Plan) {
formModalApi.setData(row).open();
}
/** 删除回款计划 */
async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
async function handleDelete(row: CrmReceivablePlanApi.Plan) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.period]),
key: 'action_key_msg',
@ -76,17 +76,17 @@ async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
}
/** 创建回款 */
function handleCreateReceivable(row: CrmReceivablePlanApi.ReceivablePlan) {
function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
receivableFormModalApi.setData({ plan: row }).open();
}
/** 查看回款计划详情 */
function handleDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
function handleDetail(row: CrmReceivablePlanApi.Plan) {
push({ name: 'CrmReceivablePlanDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmReceivablePlanApi.ReceivablePlan>,
} as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
});
function onChangeSceneType(key: number | string) {

View File

@ -1,4 +1,42 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from '../data';
defineProps<{
receivablePlan: CrmReceivablePlanApi.Plan; //
}>();
const [BaseDescription] = useDescription({
componentProps: {
title: '基本信息',
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailBaseSchema(),
});
const [SystemDescription] = useDescription({
componentProps: {
title: '系统信息',
bordered: false,
column: 3,
class: 'mx-4',
},
schema: useFollowUpDetailSchema(),
});
</script>
<template>
<div>receivablePlanInfo</div>
<div class="p-4">
<BaseDescription :data="receivablePlan" />
<Divider />
<SystemDescription :data="receivablePlan" />
</div>
</template>

View File

@ -1,4 +1,171 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmReceivableApi } from '#/api/crm/receivable';
import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteReceivablePlan,
getReceivablePlanPageByCustomer,
} from '#/api/crm/receivable/plan';
import { $t } from '#/locales';
import ReceivableForm from '../../modules/form.vue';
import { useDetailListColumns } from '../data';
import Form from './form.vue';
const props = defineProps<{
contractId?: number; //
customerId?: number; //
}>();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
connectedComponent: ReceivableForm,
destroyOnClose: true,
});
const checkedRows = ref<CrmReceivablePlanApi.Plan[]>([]);
function setCheckedRows({ records }: { records: CrmReceivablePlanApi.Plan[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建回款计划 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 创建回款 */
function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
receivableFormModalApi.setData({ plan: row }).open();
}
/** 编辑回款计划 */
function handleEdit(row: CrmReceivableApi.Receivable) {
formModalApi.setData({ receivable: row }).open();
}
/** 删除回款计划 */
async function handleDelete(row: CrmReceivablePlanApi.Plan) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.period]),
key: 'action_key_msg',
});
try {
await deleteReceivablePlan(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.period]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const queryParams: CrmReceivablePlanApi.PlanPageParam = {
page: page.currentPage,
pageSize: page.pageSize,
...formValues,
};
if (props.customerId && !props.contractId) {
queryParams.customerId = props.customerId;
} else if (props.customerId && props.contractId) {
//
queryParams.customerId = props.customerId;
queryParams.contractId = props.contractId;
}
return await getReceivablePlanPageByCustomer(queryParams);
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<div>receivablePlanList</div>
<div>
<FormModal @success="onRefresh" />
<ReceivableFormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['回款计划']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:receivable-plan:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['回款']),
type: 'link',
icon: ACTION_ICON.ADD,
auth: ['crm:receivable-plan:create'],
onClick: handleCreateReceivable.bind(null, row),
},
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['crm:receivable-plan:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['crm:receivable-plan:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.period]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</div>
</template>

View File

@ -1,7 +1,143 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { ArrowLeft } from '@vben/icons';
import { Button, Card, Tabs } from 'ant-design-vue';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { getReceivablePlan } from '#/api/crm/receivable/plan';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
import ReceivablePlanForm from './form.vue';
const PermissionList = defineAsyncComponent(
() => import('#/views/crm/permission/modules/permission-list.vue'),
);
const OperateLog = defineAsyncComponent(
() => import('#/components/operate-log'),
);
const ReceivablePlanDetailsInfo = defineAsyncComponent(
() => import('./detail-info.vue'),
);
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const receivablePlanId = ref(0);
const receivablePlan = ref<CrmReceivablePlanApi.Plan>(
{} as CrmReceivablePlanApi.Plan,
);
const receivablePlanLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref
//
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ReceivablePlanForm,
destroyOnClose: true,
});
/** 加载线索详情 */
async function loadreceivablePlanDetail() {
loading.value = true;
const data = await getReceivablePlan(receivablePlanId.value);
receivablePlan.value = data;
//
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
bizId: receivablePlanId.value,
});
receivablePlanLogList.value = logList.list;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/receivablePlan');
}
/** 编辑收款 */
function handleEdit() {
formModalApi.setData({ id: receivablePlanId.value }).open();
}
//
onMounted(async () => {
receivablePlanId.value = Number(route.params.id);
await loadreceivablePlanDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page
auto-content-height
:title="`第${receivablePlan?.period}期`"
:loading="loading"
>
<FormModal @success="loadreceivablePlanDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button @click="handleBack">
<ArrowLeft class="size-5" />
返回
</Button>
<Button
v-if="validateWrite"
type="primary"
@click="handleEdit"
v-access:code="['crm:receivable-plan:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="receivablePlan" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ReceivablePlanDetailsInfo :receivable-plan="receivablePlan" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="2" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="receivablePlanId"
:biz-type="BizTypeEnum.CRM_RECEIVABLE_PLAN"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="3" :force-render="true">
<OperateLog :log-list="receivablePlanLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

View File

@ -17,7 +17,7 @@ import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<CrmReceivablePlanApi.ReceivablePlan>();
const formData = ref<CrmReceivablePlanApi.Plan>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['回款计划'])
@ -45,8 +45,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
//
const data =
(await formApi.getValues()) as CrmReceivablePlanApi.ReceivablePlan;
const data = (await formApi.getValues()) as CrmReceivablePlanApi.Plan;
try {
await (formData.value?.id
? updateReceivablePlan(data)
@ -65,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<CrmReceivablePlanApi.ReceivablePlan>();
const data = modalApi.getData<CrmReceivablePlanApi.Plan>();
if (!data || !data.id) {
return;
}