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: add customer-limit-config

pull/122/head^2
xingyu4j 2025-05-30 00:40:14 +08:00
parent daee025866
commit 7f6726f456
4 changed files with 408 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,16 +12,14 @@ export namespace CrmCustomerLimitConfigApi {
maxCount?: number; maxCount?: number;
dealCountEnabled?: boolean; dealCountEnabled?: boolean;
} }
}
/** /** 客户限制配置类型 */
* 客户限制配置类型 export enum LimitConfType {
*/ /** 锁定客户数限制 */
export enum LimitConfType { CUSTOMER_LOCK_LIMIT = 2,
/** 锁定客户数限制 */ /** 拥有客户数限制 */
CUSTOMER_LOCK_LIMIT = 2, CUSTOMER_QUANTITY_LIMIT = 1,
/** 拥有客户数限制 */
CUSTOMER_QUANTITY_LIMIT = 1,
}
} }
/** 查询客户限制配置列表 */ /** 查询客户限制配置列表 */

140
apps/web-antd/src/views/crm/customer/limitConfig/data.ts Normal file
View File

@ -0,0 +1,140 @@
import type { VbenFormSchema } from '@vben/common-ui';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { handleTree } from '@vben/utils';
import { LimitConfType } from '#/api/crm/customer/limitConfig';
import { getSimpleDeptList } from '#/api/system/dept';
import { getSimpleUserList } from '#/api/system/user';
import { DICT_TYPE } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'userIds',
label: '规则适用人群',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
fieldNames: {
label: 'nickname',
value: 'id',
},
multiple: true,
allowClear: true,
},
rules: 'required',
},
{
fieldName: 'deptIds',
label: '规则适用部门',
component: 'ApiTreeSelect',
componentProps: {
api: async () => {
const data = await getSimpleDeptList();
return handleTree(data);
},
multiple: true,
fieldNames: { label: 'name', value: 'id', children: 'children' },
placeholder: '请选择规则适用部门',
treeDefaultExpandAll: true,
},
rules: 'required',
},
{
fieldName: 'maxCount',
label:
confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT
? '拥有客户数上限'
: '锁定客户数上限',
component: 'InputNumber',
},
{
fieldName: 'dealCountEnabled',
label: '成交客户是否占用拥有客户数',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '是', value: true },
{ label: '否', value: false },
],
},
dependencies: {
triggerFields: [''],
show: () => confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(
confType: LimitConfType,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
fixed: 'left',
},
{
field: 'users',
title: '规则适用人群',
formatter: ({ cellValue }) => {
return cellValue
.map((user: any) => {
return user.nickname;
})
.join(',');
},
},
{
field: 'depts',
title: '规则适用部门',
formatter: ({ cellValue }) => {
return cellValue
.map((dept: any) => {
return dept.name;
})
.join(',');
},
},
{
field: 'maxCount',
title:
confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT
? '拥有客户数上限'
: '锁定客户数上限',
},
{
field: 'dealCountEnabled',
title: '成交客户是否占用拥有客户数',
visible: confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 180,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

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

@ -1,38 +1,170 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Page } from '@vben/common-ui'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmCustomerLimitConfigApi } from '#/api/crm/customer/limitConfig';
import { Button } from 'ant-design-vue'; import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { message, Tabs } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteCustomerLimitConfig,
getCustomerLimitConfigPage,
LimitConfType,
} from '#/api/crm/customer/limitConfig';
import { DocAlert } from '#/components/doc-alert'; import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const configType = ref(LimitConfType.CUSTOMER_QUANTITY_LIMIT);
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 创建规则 */
function handleCreate(type: LimitConfType) {
formModalApi.setData({ type }).open();
}
/** 编辑规则 */
function handleEdit(
row: CrmCustomerLimitConfigApi.CustomerLimitConfig,
type: LimitConfType,
) {
formModalApi.setData({ id: row.id, type }).open();
}
/** 删除规则 */
async function handleDelete(
row: CrmCustomerLimitConfigApi.CustomerLimitConfig,
) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]),
key: 'action_key_msg',
});
try {
await deleteCustomerLimitConfig(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(configType.value),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getCustomerLimitConfigPage({
page: page.currentPage,
pageSize: page.pageSize,
type: configType.value,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmCustomerLimitConfigApi.CustomerLimitConfig>,
});
function onChangeConfigType(key: number | string) {
configType.value = key as LimitConfType;
gridApi.setGridOptions({
columns: useGridColumns(configType.value),
});
onRefresh();
}
</script> </script>
<template> <template>
<Page> <Page auto-content-height>
<DocAlert <template #doc>
title="【客户】客户管理、公海客户" <DocAlert
url="https://doc.iocoder.cn/crm/customer/" title="【客户】客户管理、公海客户"
/> url="https://doc.iocoder.cn/crm/customer/"
<DocAlert />
title="【通用】数据权限" <DocAlert
url="https://doc.iocoder.cn/crm/permission/" title="【通用】数据权限"
/> url="https://doc.iocoder.cn/crm/permission/"
<Button />
danger </template>
type="link"
target="_blank" <FormModal />
href="https://github.com/yudaocode/yudao-ui-admin-vue3" <Grid>
> <template #top>
该功能支持 Vue3 + element-plus 版本！ <Tabs class="border-none" @change="onChangeConfigType">
</Button> <Tabs.TabPane
<br /> tab="拥有客户数限制"
<Button :key="LimitConfType.CUSTOMER_QUANTITY_LIMIT"
type="link" />
target="_blank" <Tabs.TabPane
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index" tab="锁定客户数限制"
> :key="LimitConfType.CUSTOMER_LOCK_LIMIT"
可参考 />
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index </Tabs>
代码，pull request 贡献给我们！ </template>
</Button> <template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['规则']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:customer-limit-config:create'],
onClick: handleCreate.bind(null, configType),
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['crm:customer-limit-config:update'],
onClick: handleEdit.bind(null, row, configType),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['crm:customer-limit-config:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page> </Page>
</template> </template>

100
apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue Normal file
View File

@ -0,0 +1,100 @@
<script lang="ts" setup>
import type { CrmCustomerLimitConfigApi } from '#/api/crm/customer/limitConfig';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createCustomerLimitConfig,
getCustomerLimitConfig,
LimitConfType,
updateCustomerLimitConfig,
} from '#/api/crm/customer/limitConfig';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<CrmCustomerLimitConfigApi.CustomerLimitConfig>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['规则'])
: $t('ui.actionTitle.create', ['规则']);
});
const confType = ref<LimitConfType>(LimitConfType.CUSTOMER_LOCK_LIMIT);
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(confType.value),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as CrmCustomerLimitConfigApi.CustomerLimitConfig;
try {
await (formData.value?.id
? updateCustomerLimitConfig(data)
: createCustomerLimitConfig(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
let data =
modalApi.getData<CrmCustomerLimitConfigApi.CustomerLimitConfig>();
if (!data) {
return;
}
if (data.type) {
confType.value = data.type as LimitConfType;
}
formApi.setState({ schema: useFormSchema(confType.value) });
modalApi.lock();
try {
if (data.id) {
data = await getCustomerLimitConfig(data.id as number);
}
formData.value = data;
// 设置到 values
await formApi.setValues(data);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Form class="mx-4" />
</Modal>
</template>