aiotagro/admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat：【antd】【crm】优化 receivable 的整体代码风格

Browse Source
This commit is contained in:
YunaiV
2025-09-29 09:47:16 +08:00
parent 985dca4990
commit e441978662
9 changed files with 105 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/router/routes/modules/crm.ts
View File

@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
title: '回款详情',
activePath: '/crm/receivable',
},
component: () => import('#/views/crm/receivable/modules/detail.vue'),
component: () => import('#/views/crm/receivable/detail/index.vue'),
},
{
path: 'contact/detail/:id',

73
apps/web-antd/src/views/crm/receivable/components/data.ts Normal file
View File

@@ -0,0 +1,73 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
title: '回款编号',
field: 'no',
minWidth: 150,
fixed: 'left',
},
{
title: '客户名称',
field: 'customerName',
minWidth: 150,
},
{
title: '合同编号',
field: 'contract.no',
minWidth: 150,
},
{
title: '回款日期',
field: 'returnTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '回款金额（元）',
field: 'price',
minWidth: 150,
formatter: 'formatAmount2',
},
{
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: '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' },
},
];
}

4
apps/web-antd/src/views/crm/receivable/modules/detail-list.vue → apps/web-antd/src/views/crm/receivable/components/detail-list.vue
View File

@@ -13,8 +13,8 @@ import {
} from '#/api/crm/receivable';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import Form from './form.vue';
import { useDetailListColumns } from './data';
import Form from '../modules/form.vue';
const props = defineProps<{
contractId?: number; // 合同编号

6
apps/web-antd/src/views/crm/receivable/data.ts
View File

@@ -198,7 +198,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
title: '回款编号',
field: 'no',
minWidth: 150,
minWidth: 160,
fixed: 'left',
slots: { default: 'no' },
},
@@ -211,7 +211,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
title: '合同编号',
field: 'contract',
minWidth: 150,
minWidth: 160,
slots: { default: 'contractNo' },
},
{
@@ -286,7 +286,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
title: '操作',
field: 'actions',
width: 130,
minWidth: 130,
fixed: 'right',
slots: { default: 'actions' },
},

71
apps/web-antd/src/views/crm/receivable/modules/detail-data.ts → apps/web-antd/src/views/crm/receivable/detail/data.ts
View File

@@ -1,4 +1,3 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@@ -78,73 +77,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
},
];
}
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
title: '回款编号',
field: 'no',
minWidth: 150,
fixed: 'left',
},
{
title: '客户名称',
field: 'customerName',
minWidth: 150,
},
{
title: '合同编号',
field: 'contract.no',
minWidth: 150,
},
{
title: '回款日期',
field: 'returnTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '回款金额（元）',
field: 'price',
minWidth: 150,
formatter: 'formatAmount2',
},
{
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: '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' },
},
];
}

8
apps/web-antd/src/views/crm/receivable/modules/detail.vue → apps/web-antd/src/views/crm/receivable/detail/index.vue
View File

@@ -17,10 +17,10 @@ import { getReceivable } from '#/api/crm/receivable';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { PermissionList } from '#/views/crm/permission';
import { ReceivableDetailsInfo } from '#/views/crm/receivable';
import { useDetailSchema } from './detail-data';
import ReceivableForm from './form.vue';
import ReceivableForm from '../modules/form.vue';
import { useDetailSchema } from './data';
import Info from './modules/info.vue';
const loading = ref(false);
@@ -110,7 +110,7 @@ onMounted(() => {
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ReceivableDetailsInfo :receivable="receivable" />
<Info :receivable="receivable" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="2" :force-render="true">
<PermissionList

2
apps/web-antd/src/views/crm/receivable/modules/detail-info.vue → apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
View File

@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
import { useDetailBaseSchema } from '../data';
defineProps<{
receivable: CrmReceivableApi.Receivable; // 收款信息

18
apps/web-antd/src/views/crm/receivable/index.ts
View File

@@ -1,19 +1,7 @@
import { defineAsyncComponent } from 'vue';
export const ReceivableDetailsInfo = defineAsyncComponent(
() => import('./modules/detail-info.vue'),
);
export const ReceivableForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const ReceivableDetails = defineAsyncComponent(
() => import('./modules/detail.vue'),
);
export const ReceivableDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
() => import('./components/detail-list.vue'),
);
export const ReceivablePlanDetailsInfo = defineAsyncComponent(
@@ -23,7 +11,3 @@ export const ReceivablePlanDetailsInfo = defineAsyncComponent(
export const ReceivablePlanDetailsList = defineAsyncComponent(
() => import('./plan/modules/detail-list.vue'),
);
export const ReceivablePlanDetails = defineAsyncComponent(
() => import('./plan/modules/detail.vue'),
);

38
apps/web-antd/src/views/crm/receivable/index.vue
View File

@@ -31,12 +31,19 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 处理场景类型的切换 */
function handleChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
/** 导出表格 */
async function handleExport() {
// TODO @AI：缺少了 sceneType 参考，参考下别的模块？
const data = await exportReceivable(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '回款.xls', source: data });
}
@@ -59,10 +66,8 @@ async function handleDelete(row: CrmReceivableApi.Receivable) {
});
try {
await deleteReceivable(row.id!);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.no]),
});
onRefresh();
message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
handleRefresh();
} finally {
hideLoading();
}
@@ -76,10 +81,8 @@ async function handleSubmit(row: CrmReceivableApi.Receivable) {
});
try {
await submitReceivable(row.id!);
message.success({
content: '提交审核成功',
});
onRefresh();
message.success('提交审核成功');
handleRefresh();
} finally {
hideLoading();
}
@@ -130,6 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -137,11 +141,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<CrmReceivableApi.Receivable>,
});
function onChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
</script>
<template>
@@ -157,10 +156,10 @@ function onChangeSceneType(key: number | string) {
/>
</template>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid>
<template #top>
<Tabs class="border-none" @change="onChangeSceneType">
<Tabs class="-mt-11" @change="handleChangeSceneType">
<Tabs.TabPane tab="我负责的" key="1" />
<Tabs.TabPane tab="我参与的" key="2" />
<Tabs.TabPane tab="下属负责的" key="3" />
@@ -217,8 +216,6 @@ function onChangeSceneType(key: number | string) {
onClick: handleEdit.bind(null, row),
ifShow: row.auditStatus === 0,
},
]"
:drop-down-actions="[
{
label: '提交审核',
type: 'link',
@@ -250,3 +247,8 @@ function onChangeSceneType(key: number | string) {
</Grid>
</Page>
</template>
<style scoped>
:deep(.vxe-toolbar div) {
z-index: 1;
}
</style>