smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: crm

Browse Source
This commit is contained in:
xingyu4j
2025-05-29 17:33:05 +08:00
parent b4a77266a1
commit 45bcc79241
13 changed files with 785 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/web-antd/src/views/crm/business/data.ts
View File

@@ -1,12 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import { useAccess } from '@vben/access';
import { getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
@@ -37,7 +30,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 0,
controlsPosition: 'right',
placeholder: '请输入商机金额',
},
rules: 'required',
@@ -79,22 +71,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '商机名称',
component: 'Input',
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns<T = CrmBusinessApi.Business>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
@@ -165,29 +146,10 @@ export function useGridColumns<T = CrmBusinessApi.Business>(
fixed: 'right',
},
{
field: 'operation',
title: '操作',
width: 130,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '商机',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['crm:business:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['crm:business:delete']),
},
],
},
slots: { default: 'actions' },
},
];
}

102
apps/web-antd/src/views/crm/business/index.vue
View File

@@ -1,19 +1,15 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import { useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteBusiness,
exportBusiness,
@@ -38,23 +34,23 @@ function onRefresh() {
}
/** 导出表格 */
async function onExport() {
async function handleExport() {
const data = await exportBusiness(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '商机.xls', source: data });
}
/** 创建商机 */
function onCreate() {
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑商机 */
function onEdit(row: CrmBusinessApi.Business) {
function handleEdit(row: CrmBusinessApi.Business) {
formModalApi.setData(row).open();
}
/** 删除商机 */
async function onDelete(row: CrmBusinessApi.Business) {
async function handleDelete(row: CrmBusinessApi.Business) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
@@ -70,38 +66,21 @@ async function onDelete(row: CrmBusinessApi.Business) {
}
/** 查看商机详情 */
function onDetail(row: CrmBusinessApi.Business) {
function handleDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmBusinessDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function onCustomerDetail(row: CrmBusinessApi.Business) {
function handleCustomerDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<CrmBusinessApi.Business>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@@ -142,34 +121,59 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="商机列表">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['crm:business:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['商机']) }}
</Button>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['crm:business:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['商机']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:business:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['crm:business:export'],
onClick: handleExport,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="onDetail(row)">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="onCustomerDetail(row)">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['crm:business:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['crm:business:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

83
apps/web-antd/src/views/crm/business/status/data.ts
View File

@@ -1,18 +1,11 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessStatusApi } from '#/api/crm/business/status';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useAccess } from '@vben/access';
import { handleTree } from '@vben/utils';
import { z } from '#/adapter/form';
import {
CommonStatusEnum,
DICT_TYPE,
getDictOptions,
getRangePickerDefaultProps,
} from '#/utils';
const { hasAccessByCodes } = useAccess();
import { getDeptList } from '#/api/system/dept';
import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
@@ -34,12 +27,16 @@ export function useFormSchema(): VbenFormSchema[] {
{
fieldName: 'deptIds',
label: '应用部门',
component: 'TreeSelect',
component: 'ApiTreeSelect',
componentProps: {
api: async () => {
const data = await getDeptList();
return handleTree(data);
},
multiple: true,
treeCheckable: true,
showCheckedStrategy: 'SHOW_PARENT',
fieldNames: { label: 'name', value: 'id', children: 'children' },
placeholder: '请选择应用部门',
treeDefaultExpandAll: true,
},
},
{
@@ -56,79 +53,37 @@ export function useFormSchema(): VbenFormSchema[] {
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '状态组名',
component: 'Input',
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns<T = CrmBusinessStatusApi.BusinessStatus>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '状态组名',
minWidth: 200,
width: 200,
},
{
field: 'deptNames',
title: '应用部门',
minWidth: 200,
formatter: ({ cellValue }) => {
return cellValue?.length > 0 ? cellValue.join(' ') : '全公司';
},
width: 200,
formatter: ({ cellValue }) =>
cellValue?.length > 0 ? cellValue.join(' ') : '全公司',
},
{
field: 'creator',
title: '创建人',
minWidth: 100,
width: 100,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
width: 150,
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
width: 160,
fixed: 'right',
align: 'center',
cellRender: {
name: 'TableAction',
props: {
actions: [
{
label: '编辑',
code: 'edit',
show: hasAccessByCodes(['crm:business-status:update']),
},
{
label: '删除',
code: 'delete',
show: hasAccessByCodes(['crm:business-status:delete']),
},
],
onActionClick,
},
},
slots: { default: 'actions' },
},
];
}

83
apps/web-antd/src/views/crm/business/status/index.vue
View File

@@ -1,16 +1,12 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessStatusApi } from '#/api/crm/business/status';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteBusinessStatus,
getBusinessStatusPage,
@@ -18,7 +14,7 @@ import {
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
@@ -32,12 +28,12 @@ function onRefresh() {
}
/** 创建商机状态 */
function onCreate() {
function handleCreate() {
formModalApi.setData(null).open();
}
/** 删除商机状态 */
async function onDelete(row: CrmBusinessStatusApi.BusinessStatus) {
async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
@@ -53,33 +49,13 @@ async function onDelete(row: CrmBusinessStatusApi.BusinessStatus) {
}
/** 编辑商机状态 */
function onEdit(row: CrmBusinessStatusApi.BusinessStatus) {
function handleEdit(row: CrmBusinessStatusApi.BusinessStatus) {
formModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<CrmBusinessStatusApi.BusinessStatus>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@@ -120,14 +96,41 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="商机状态列表">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['crm:business-status:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['商机状态']) }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['商机状态']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['system:post:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['crm:business-status:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['crm:business-status:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>