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

feat：【antd】【crm】客户的列表的重构

Browse Source
This commit is contained in:
YunaiV
2025-09-27 16:36:18 +08:00
parent 06633c336e
commit 09abc9cead
12 changed files with 174 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/api/crm/customer/index.ts
View File

@@ -16,6 +16,7 @@ export namespace CrmCustomerApi {
ownerUserId: number; // 负责人的用户编号
ownerUserName?: string; // 负责人的用户名称
ownerUserDept?: string; // 负责人的部门名称
ownerUserDeptName?: string; // 负责人的部门名称
lockStatus?: boolean;
dealStatus?: boolean;
mobile: string; // 手机号
@@ -34,6 +35,7 @@ export namespace CrmCustomerApi {
creatorName?: string; // 创建人名称
createTime: Date; // 创建时间
updateTime: Date; // 更新时间
poolDay?: number; // 距离进入公海天数
}
export interface CustomerImport {
ownerUserId: number;

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

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
title: '客户详情',
activePath: '/crm/customer',
},
component: () => import('#/views/crm/customer/modules/detail.vue'),
component: () => import('#/views/crm/customer/detail/index.vue'),
},
{
path: 'business/detail/:id',

12
apps/web-antd/src/views/crm/contact/index.vue
View File

@@ -34,6 +34,12 @@ function handleRefresh() {
gridApi.query();
}
/** 处理场景类型的切换 */
function handleChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
/** 导出表格 */
async function handleExport() {
const formValues = await gridApi.formApi.getValues();
@@ -79,12 +85,6 @@ function handleCustomerDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 处理场景类型的切换 */
function handleChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),

19
apps/web-antd/src/views/crm/contract/index.vue
View File

@@ -35,9 +35,19 @@ function onRefresh() {
gridApi.query();
}
/** 处理场景类型的切换 */
function handleChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
/** 导出表格 */
async function handleExport() {
const data = await exportContract(await gridApi.formApi.getValues());
const formValues = await gridApi.formApi.getValues();
const data = await exportContract({
sceneType: sceneType.value,
...formValues,
});
downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
}
@@ -142,11 +152,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<CrmContractApi.Contract>,
});
function onChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
</script>
<template>
@@ -165,7 +170,7 @@ function onChangeSceneType(key: number | string) {
<FormModal @success="onRefresh" />
<Grid>
<template #top>
<Tabs class="border-none" @change="onChangeSceneType">
<Tabs class="border-none" @change="handleChangeSceneType">
<Tabs.TabPane tab="我负责的" key="1" />
<Tabs.TabPane tab="我参与的" key="2" />
<Tabs.TabPane tab="下属负责的" key="3" />

166
apps/web-antd/src/views/crm/customer/data.ts
View File

@@ -1,6 +1,7 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { useUserStore } from '@vben/stores';
@@ -37,8 +38,9 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
placeholder: '请选择客户来源',
allowClear: true,
},
rules: 'required',
},
{
fieldName: 'mobile',
@@ -201,13 +203,53 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
placeholder: '请选择创建时间',
placeholder: ['开始日期', '结束日期'],
allowClear: true,
},
},
];
}
/** 导入客户的表单 */
export function useImportFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
placeholder: '请选择负责人',
allowClear: true,
class: 'w-full',
},
rules: 'required',
},
{
fieldName: 'file',
label: '客户数据',
component: 'Upload',
rules: 'required',
help: '仅允许导入 xls、xlsx 格式文件',
},
{
fieldName: 'updateSupport',
label: '是否覆盖',
component: 'Switch',
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
rules: z.boolean().default(false),
help: '是否更新已经存在的客户数据',
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
@@ -215,11 +257,8 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'name',
title: '客户名称',
fixed: 'left',
align: 'left',
minWidth: 280,
slots: {
default: 'name',
},
minWidth: 160,
slots: { default: 'name' },
},
{
field: 'source',
@@ -233,83 +272,118 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'mobile',
title: '手机',
minWidth: 100,
minWidth: 120,
},
{
field: 'telephone',
title: '电话',
minWidth: 100,
minWidth: 130,
},
{
field: 'email',
title: '邮箱',
minWidth: 100,
},
{
field: 'areaName',
title: '地址',
minWidth: 140,
},
{
field: 'detailAddress',
title: '地址',
minWidth: 140,
},
{
field: 'industryId',
title: '客户行业',
minWidth: 80,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
},
minWidth: 180,
},
{
field: 'level',
title: '客户级别',
minWidth: 120,
minWidth: 135,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
},
},
{
field: 'industryId',
title: '客户行业',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
},
},
{
field: 'contactNextTime',
title: '下次联系时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'remark',
title: '备注',
minWidth: 200,
},
{
field: 'lockStatus',
title: '锁定状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'dealStatus',
title: '成交状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'contactLastContent',
title: '最后跟进记录',
minWidth: 200,
},
{
field: 'detailAddress',
title: '地址',
minWidth: 180,
},
{
field: 'poolDay',
title: '距离进入公海天数',
minWidth: 140,
formatter: ({ cellValue }) =>
cellValue == null ? '-' : `${cellValue} 天`,
},
{
field: 'ownerUserName',
title: '负责人',
minWidth: 80,
minWidth: 100,
},
{
field: 'ownerUserDeptName',
title: '所属部门',
minWidth: 100,
},
{
field: 'contactNextTime',
title: '下次联系时间',
formatter: 'formatDateTime',
minWidth: 160,
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
minWidth: 160,
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
minWidth: 160,
minWidth: 180,
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
minWidth: 160,
minWidth: 180,
},
{
field: 'creatorName',
title: '创建人',
minWidth: 100,
},
{
title: '操作',
width: 180,
width: 130,
fixed: 'right',
slots: { default: 'actions' },
},

10
apps/web-antd/src/views/crm/customer/index.ts
View File

@@ -1,15 +1,7 @@
import { defineAsyncComponent } from 'vue';
export const CustomerDetailsInfo = defineAsyncComponent(
() => import('./modules/detail-info.vue'),
);
export const CustomerForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const CustomerDetails = defineAsyncComponent(
() => import('./modules/detail.vue'),
() => import('./detail/modules/info.vue'),
);
export const DistributeForm = defineAsyncComponent(

51
apps/web-antd/src/views/crm/customer/index.vue
View File

@@ -30,16 +30,22 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
const [ImportModal, importModalApi] = useVbenModal({
connectedComponent: ImportForm,
destroyOnClose: true,
});
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 处理场景类型的切换 */
function handleChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
/** 导入客户 */
function handleImport() {
importModalApi.open();
@@ -47,7 +53,11 @@ function handleImport() {
/** 导出表格 */
async function handleExport() {
const data = await exportCustomer(await gridApi.formApi.getValues());
const formValues = await gridApi.formApi.getValues();
const data = await exportCustomer({
sceneType: sceneType.value,
...formValues,
});
downloadFileFromBlobPart({ fileName: '客户.xls', source: data });
}
@@ -69,10 +79,8 @@ async function handleDelete(row: CrmCustomerApi.Customer) {
});
try {
await deleteCustomer(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
onRefresh();
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
}
@@ -105,6 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -112,11 +121,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<CrmCustomerApi.Customer>,
});
function onChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
</script>
<template>
@@ -132,11 +136,11 @@ function onChangeSceneType(key: number | string) {
/>
</template>
<FormModal @success="onRefresh" />
<ImportModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<ImportModal @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" />
@@ -184,12 +188,6 @@ function onChangeSceneType(key: number | string) {
auth: ['crm:customer:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.detail'),
type: 'link',
icon: ACTION_ICON.VIEW,
onClick: handleDetail.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
@@ -207,3 +205,8 @@ function onChangeSceneType(key: number | string) {
</Grid>
</Page>
</template>
<style scoped>
:deep(.vxe-toolbar div) {
z-index: 1;
}
</style>

101
apps/web-antd/src/views/crm/customer/modules/detail-data.ts
View File

@@ -1,101 +0,0 @@
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'level',
label: '客户级别',
content: (data) =>
h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
},
{
field: 'dealStatus',
label: '成交状态',
content: (data) => (data.dealStatus ? '已成交' : '未成交'),
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
];
}
/** 详情页的基础字段 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '客户名称',
},
{
field: 'source',
label: '客户来源',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
value: data?.source,
}),
},
{
field: 'mobile',
label: '手机',
},
{
field: 'telephone',
label: '电话',
},
{
field: 'email',
label: '邮箱',
},
{
field: 'areaName',
label: '地址',
},
{
field: 'detailAddress',
label: '详细地址',
},
{
field: 'qq',
label: 'QQ',
},
{
field: 'wechat',
label: '微信',
},
{
field: 'industryId',
label: '客户行业',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
value: data?.industryId,
}),
},
{
field: 'level',
label: '客户级别',
content: (data) =>
h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
},
{
field: 'contactNextTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'remark',
label: '备注',
},
];
}

42
apps/web-antd/src/views/crm/customer/modules/detail-info.vue
View File

@@ -1,42 +0,0 @@
<script lang="ts" setup>
import type { CrmCustomerApi } from '#/api/crm/customer';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
defineProps<{
customer: CrmCustomerApi.Customer; // 客户信息
}>();
const [BaseDescriptions] = useDescription({
componentProps: {
title: '基本信息',
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailBaseSchema(),
});
const [SystemDescriptions] = useDescription({
componentProps: {
title: '系统信息',
bordered: false,
column: 3,
class: 'mx-4',
},
schema: useFollowUpDetailSchema(),
});
</script>
<template>
<div class="p-4">
<BaseDescriptions :data="customer" />
<Divider />
<SystemDescriptions :data="customer" />
</div>
</template>

321
apps/web-antd/src/views/crm/customer/modules/detail.vue
View File

@@ -1,321 +0,0 @@
<script setup lang="ts">
import type { CrmCustomerApi } from '#/api/crm/customer';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Card, message, Tabs } from 'ant-design-vue';
import {
getCustomer,
lockCustomer,
putCustomerPool,
receiveCustomer,
updateCustomerDealStatus,
} from '#/api/crm/customer';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { BusinessDetailsList } from '#/views/crm/business';
import { ContactDetailsList } from '#/views/crm/contact/components';
import { ContractDetailsList } from '#/views/crm/contract';
import {
CustomerDetailsInfo,
CustomerForm,
DistributeForm,
} from '#/views/crm/customer';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import {
ReceivableDetailsList,
ReceivablePlanDetailsList,
} from '#/views/crm/receivable';
import { useDetailSchema } from './detail-data';
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const customerId = ref(0);
const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
const [Descriptions] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: CustomerForm,
destroyOnClose: true,
});
const [TransferModal, transferModalApi] = useVbenModal({
connectedComponent: TransferForm,
destroyOnClose: true,
});
const [DistributeModal, distributeModalApi] = useVbenModal({
connectedComponent: DistributeForm,
destroyOnClose: true,
});
/** 加载详情 */
async function loadCustomerDetail() {
loading.value = true;
customerId.value = Number(route.params.id);
const data = await getCustomer(customerId.value);
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CUSTOMER,
bizId: customerId.value,
});
customerLogList.value = logList.list;
customer.value = data;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/customer');
}
/** 编辑 */
function handleEdit() {
formModalApi.setData({ id: customerId.value }).open();
}
/** 转移线索 */
function handleTransfer() {
transferModalApi.setData({ id: customerId.value }).open();
}
/** 锁定客户 */
function handleLock(lockStatus: boolean): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: `确定锁定客户【${customer.value.name}】吗？`,
})
.then(async () => {
const res = await lockCustomer(customerId.value, lockStatus);
if (res) {
message.success(lockStatus ? '锁定客户成功' : '解锁客户成功');
resolve(true);
} else {
reject(new Error(lockStatus ? '锁定客户失败' : '解锁客户失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
/** 领取客户 */
function handleReceive(): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: `确定领取客户【${customer.value.name}】吗？`,
})
.then(async () => {
const res = await receiveCustomer([customerId.value]);
if (res) {
message.success('领取客户成功');
resolve(true);
} else {
reject(new Error('领取客户失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
/** 分配客户 */
function handleDistributeForm() {
distributeModalApi.setData({ id: customerId.value }).open();
}
/** 客户放入公海 */
function handlePutPool(): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: `确定将客户【${customer.value.name}】放入公海吗？`,
})
.then(async () => {
const res = await putCustomerPool(customerId.value);
if (res) {
message.success('放入公海成功');
resolve(true);
} else {
reject(new Error('放入公海失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
/** 更新成交状态操作 */
async function handleUpdateDealStatus(): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
const dealStatus = !customer.value.dealStatus;
confirm({
content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
})
.then(async () => {
const res = await updateCustomerDealStatus(
customerId.value,
dealStatus,
);
if (res) {
message.success('更新成交状态成功');
resolve(true);
} else {
reject(new Error('更新成交状态失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
// 加载数据
onMounted(() => {
customerId.value = Number(route.params.id);
loadCustomerDetail();
});
</script>
<template>
<Page auto-content-height :title="customer?.name" :loading="loading">
<FormModal @success="loadCustomerDetail" />
<TransferModal @success="loadCustomerDetail" />
<DistributeModal @success="loadCustomerDetail" />
<template #extra>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.edit'),
type: 'primary',
icon: ACTION_ICON.EDIT,
auth: ['crm:customer:update'],
ifShow: permissionListRef?.validateWrite,
onClick: handleEdit,
},
{
label: '转移',
type: 'primary',
ifShow: permissionListRef?.validateOwnerUser,
onClick: handleTransfer,
},
{
label: '更改成交状态',
type: 'default',
ifShow: permissionListRef?.validateWrite,
onClick: handleUpdateDealStatus,
},
{
label: '锁定',
type: 'default',
ifShow:
!customer.lockStatus && permissionListRef?.validateOwnerUser,
onClick: handleLock.bind(null, true),
},
{
label: '解锁',
type: 'default',
ifShow: customer.lockStatus && permissionListRef?.validateOwnerUser,
onClick: handleLock.bind(null, false),
},
{
label: '领取',
type: 'primary',
ifShow: !customer.ownerUserId,
onClick: handleReceive,
},
{
label: '分配',
type: 'default',
ifShow: !customer.ownerUserId,
onClick: handleDistributeForm,
},
{
label: '放入公海',
type: 'default',
ifShow:
!!customer.ownerUserId && permissionListRef?.validateOwnerUser,
onClick: handlePutPool,
},
]"
/>
</template>
<Card class="min-h-[10%]">
<Descriptions :data="customer" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<CustomerDetailsInfo :customer="customer" />
</Tabs.TabPane>
<Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
<FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</Tabs.TabPane>
<Tabs.TabPane tab="联系人" key="3" :force-render="true">
<ContactDetailsList
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
:customer-id="customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="4" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="商机" key="5" :force-render="true">
<BusinessDetailsList
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
:customer-id="customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="合同" key="6" :force-render="true">
<ContractDetailsList
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="回款" key="7" :force-render="true">
<ReceivablePlanDetailsList :customer-id="customerId" />
<ReceivableDetailsList :customer-id="customerId" />
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="8" :force-render="true">
<AsyncOperateLog :log-list="customerLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

1
apps/web-antd/src/views/crm/customer/modules/form.vue
View File

@@ -29,6 +29,7 @@ const [Form, formApi] = useVbenForm({
componentProps: {
class: 'w-full',
},
labelWidth: 100,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',

40
apps/web-antd/src/views/crm/customer/modules/import-form.vue
View File

@@ -1,16 +1,17 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import { useVbenModal, z } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message, Upload } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { importCustomer, importCustomerTemplate } from '#/api/crm/customer';
import { getSimpleUserList } from '#/api/system/user';
import { $t } from '#/locales';
import { useImportFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
@@ -19,40 +20,7 @@ const [Form, formApi] = useVbenForm({
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
class: 'w-full',
},
rules: 'required',
},
{
fieldName: 'file',
label: '用户数据',
component: 'Upload',
rules: 'required',
help: '仅允许导入 xls、xlsx 格式文件',
},
{
fieldName: 'updateSupport',
label: '是否覆盖',
component: 'Switch',
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
rules: z.boolean().default(false),
help: '是否更新已经存在的用户数据',
},
],
schema: useImportFormSchema(),
showDefaultActions: false,
});