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

!131 Merge dev： CRM 基本模块完成，待测试，待完成统计 

Merge pull request !131 from xingyu/dev
pull/136/MERGE v2.6.0
xingyu 2025-06-06 08:26:04 +00:00 committed by Gitee
parent 4802671152 acd0677f81
commit 2fb7258456
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
109 changed files with 6042 additions and 1290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web-antd/src/api/crm/business/index.ts
View File

@ -40,6 +40,7 @@ export namespace CrmBusinessApi {
totalProductPrice: number;
totalPrice: number;
discountPercent: number;
status?: number;
remark: string;
creator: string; // 创建人
creatorName?: string; // 创建人名称
@ -47,6 +48,12 @@ export namespace CrmBusinessApi {
updateTime: Date; // 更新时间
products?: BusinessProduct[];
}
export interface BusinessStatus {
id: number;
statusId: number | undefined;
endStatus: number | undefined;
}
}
/** 查询商机列表 */
@ -90,7 +97,7 @@ export function updateBusiness(data: CrmBusinessApi.Business) {
}
/** 修改商机状态 */
export function updateBusinessStatus(data: CrmBusinessApi.Business) {
export function updateBusinessStatus(data: CrmBusinessApi.BusinessStatus) {
return requestClient.put('/crm/business/update-status', data);
}

76
apps/web-antd/src/api/crm/business/status/index.ts
View File

@ -4,46 +4,50 @@ import { requestClient } from '#/api/request';
export namespace CrmBusinessStatusApi {
/** 商机状态信息 */
export interface BusinessStatus {
id: number;
name: string;
percent: number;
}
/** 商机状态组信息 */
export interface BusinessStatusType {
id: number;
name: string;
deptIds: number[];
statuses?: BusinessStatus[];
percent: number;
sort: number;
}
/** 默认商机状态 */
export const DEFAULT_STATUSES = [
{
endStatus: 1,
key: '结束',
name: '赢单',
percent: 100,
},
{
endStatus: 2,
key: '结束',
name: '输单',
percent: 0,
},
{
endStatus: 3,
key: '结束',
name: '无效',
percent: 0,
},
] as const;
/** 商机状态组信息 */
export interface BusinessStatus {
id: number;
name: string;
deptIds: number[];
deptNames: string[];
creator: string;
createTime: Date;
statuses?: BusinessStatusType[];
}
}
/** 默认商机状态 */
export const DEFAULT_STATUSES = [
{
endStatus: 1,
key: '结束',
name: '赢单',
percent: 100,
},
{
endStatus: 2,
key: '结束',
name: '输单',
percent: 0,
},
{
endStatus: 3,
key: '结束',
name: '无效',
percent: 0,
},
];
/** 查询商机状态组列表 */
export function getBusinessStatusPage(params: PageParam) {
return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatusType>>(
return requestClient.get<PageResult<CrmBusinessStatusApi.BusinessStatus>>(
'/crm/business-status/page',
{ params },
);
@ -51,21 +55,21 @@ export function getBusinessStatusPage(params: PageParam) {
/** 新增商机状态组 */
export function createBusinessStatus(
data: CrmBusinessStatusApi.BusinessStatusType,
data: CrmBusinessStatusApi.BusinessStatus,
) {
return requestClient.post('/crm/business-status/create', data);
}
/** 修改商机状态组 */
export function updateBusinessStatus(
data: CrmBusinessStatusApi.BusinessStatusType,
data: CrmBusinessStatusApi.BusinessStatus,
) {
return requestClient.put('/crm/business-status/update', data);
}
/** 查询商机状态类型详情 */
export function getBusinessStatus(id: number) {
return requestClient.get<CrmBusinessStatusApi.BusinessStatusType>(
return requestClient.get<CrmBusinessStatusApi.BusinessStatus>(
`/crm/business-status/get?id=${id}`,
);
}
@ -77,14 +81,14 @@ export function deleteBusinessStatus(id: number) {
/** 获得商机状态组列表 */
export function getBusinessStatusTypeSimpleList() {
return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
'/crm/business-status/type-simple-list',
);
}
/** 获得商机阶段列表 */
export function getBusinessStatusSimpleList(typeId: number) {
return requestClient.get<CrmBusinessStatusApi.BusinessStatus[]>(
return requestClient.get<CrmBusinessStatusApi.BusinessStatusType[]>(
'/crm/business-status/status-simple-list',
{ params: { typeId } },
);

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

@ -77,7 +77,7 @@ export function transferClue(data: CrmPermissionApi.TransferReq) {
/** 线索转化为客户 */
export function transformClue(id: number) {
return requestClient.put('/crm/clue/transform', { id });
return requestClient.put(`/crm/clue/transform?id=${id}`);
}
/** 获得分配给我的、待跟进的线索数量 */

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

@ -35,6 +35,11 @@ export namespace CrmCustomerApi {
createTime: Date; // 创建时间
updateTime: Date; // 更新时间
}
export interface CustomerImport {
ownerUserId: number;
file: File;
updateSupport: boolean;
}
}
/** 查询客户列表 */
@ -78,8 +83,8 @@ export function importCustomerTemplate() {
}
/** 导入客户 */
export function importCustomer(file: File) {
return requestClient.upload('/crm/customer/import', { file });
export function importCustomer(data: CrmCustomerApi.CustomerImport) {
return requestClient.upload('/crm/customer/import', data);
}
/** 获取客户精简信息列表 */

17
apps/web-antd/src/api/crm/receivable/index.ts
View File

@ -34,10 +34,21 @@ export namespace CrmReceivableApi {
createTime: Date; // 创建时间
updateTime: Date; // 更新时间
}
export interface ReceivablePageParam extends PageParam {
no?: string;
planId?: number;
customerId?: number;
contractId?: number;
sceneType?: number;
auditStatus?: number;
}
}
/** 查询回款列表 */
export function getReceivablePage(params: PageParam) {
export function getReceivablePage(
params: CrmReceivableApi.ReceivablePageParam,
) {
return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
'/crm/receivable/page',
{ params },
@ -45,7 +56,9 @@ export function getReceivablePage(params: PageParam) {
}
/** 查询回款列表，基于指定客户 */
export function getReceivablePageByCustomer(params: PageParam) {
export function getReceivablePageByCustomer(
params: CrmReceivableApi.ReceivablePageParam,
) {
return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
'/crm/receivable/page-by-customer',
{ params },

16
apps/web-antd/src/api/crm/receivable/plan/index.ts
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 },

13
apps/web-antd/src/api/infra/codegen/index.ts
View File

@ -112,26 +112,19 @@ export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReqVO) {
/** 基于数据库的表结构，同步数据库的表和字段定义 */
export function syncCodegenFromDB(tableId: number) {
return requestClient.put('/infra/codegen/sync-from-db', {
params: { tableId },
});
return requestClient.put(`/infra/codegen/sync-from-db?tableId=${tableId}`);
}
/** 预览生成代码 */
export function previewCodegen(tableId: number) {
return requestClient.get<InfraCodegenApi.CodegenPreview[]>(
'/infra/codegen/preview',
{
params: { tableId },
},
`/infra/codegen/preview?tableId=${tableId}`,
);
}
/** 下载生成代码 */
export function downloadCodegen(tableId: number) {
return requestClient.download('/infra/codegen/download', {
params: { tableId },
});
return requestClient.download(`/infra/codegen/download?tableId=${tableId}`);
}
/** 获得表定义 */

2
apps/web-antd/src/api/infra/job/index.ts
View File

@ -57,7 +57,7 @@ export function updateJobStatus(id: number, status: number) {
id,
status,
};
return requestClient.put('/infra/job/update-status', { params });
return requestClient.put('/infra/job/update-status', {}, { params });
}
/** 定时任务立即执行一次 */

6
apps/web-antd/src/components/operate-log/index.ts
View File

@ -1,3 +1,9 @@
import { defineAsyncComponent } from 'vue';
export const AsyncOperateLog = defineAsyncComponent(
() => import('./operate-log.vue'),
);
export { default as OperateLog } from './operate-log.vue';
export type { OperateLogProps } from './typing';

21
apps/web-antd/src/components/operate-log/operate-log.vue
View File

@ -1,7 +1,9 @@
<script setup lang="ts">
import type { OperateLogProps } from './typing';
import { Timeline } from 'ant-design-vue';
import { formatDateTime } from '@vben/utils';
import { Tag, Timeline } from 'ant-design-vue';
import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils';
@ -38,8 +40,21 @@ function getUserTypeColor(userType: number) {
:key="log.id"
:color="getUserTypeColor(log.userType)"
>
<p>{{ log.createTime }}</p>
<p>{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}</p>
<template #dot>
<p
:style="{ backgroundColor: getUserTypeColor(log.userType) }"
class="absolute left-[-5px] flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
>
{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
</p>
</template>
<p>{{ formatDateTime(log.createTime) }}</p>
<p>
<Tag :color="getUserTypeColor(log.userType)">
{{ log.userName }}
</Tag>
{{ log.action }}
</p>
</Timeline.Item>
</Timeline>
</div>

7
apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
View File

@ -27,14 +27,13 @@ import {
TreeSelect,
} from 'ant-design-vue';
import { BpmModelFormType } from '#/utils';
import { BpmModelFormType, BpmNodeTypeEnum } from '#/utils';
import {
CANDIDATE_STRATEGY,
CandidateStrategy,
FieldPermissionType,
MULTI_LEVEL_DEPT,
NodeType,
} from '../../consts';
import {
useFormFieldsPermission,
@ -77,7 +76,7 @@ const currentNode = useWatchNode(props);
// 节点名称
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.COPY_TASK_NODE,
BpmNodeTypeEnum.COPY_TASK_NODE,
);
// 激活的 Tab 标签页
@ -137,7 +136,7 @@ const {
getShowText,
handleCandidateParam,
parseCandidateParam,
} = useNodeForm(NodeType.COPY_TASK_NODE);
} = useNodeForm(BpmNodeTypeEnum.COPY_TASK_NODE);
const configForm = tempConfigForm as Ref<CopyTaskFormType>;
// 抄送人策略， 去掉发起人自选 和 发起人自己

5
apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
View File

@ -22,10 +22,11 @@ import {
SelectOption,
} from 'ant-design-vue';
import { BpmNodeTypeEnum } from '#/utils';
import {
DELAY_TYPE,
DelayTypeEnum,
NodeType,
TIME_UNIT_TYPES,
TimeUnitType,
} from '../../consts';
@ -45,7 +46,7 @@ const props = defineProps({
const currentNode = useWatchNode(props);
// 节点名称
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.DELAY_TIMER_NODE,
BpmNodeTypeEnum.DELAY_TIMER_NODE,
);
// 抄送人表单配置
const formRef = ref(); // 表单 Ref

12
apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
View File

@ -21,7 +21,9 @@ import {
SelectOption,
} from 'ant-design-vue';
import { ConditionType, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { ConditionType } from '../../consts';
import { useNodeName, useWatchNode } from '../../helpers';
import Condition from './modules/condition.vue';
@ -40,7 +42,7 @@ const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
const currentNode = useWatchNode(props);
/** 节点名称 */
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.ROUTER_BRANCH_NODE,
BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
);
const routerGroups = ref<RouterSetting[]>([]);
const nodeOptions = ref<any[]>([]);
@ -176,15 +178,15 @@ function getRouterNode(node: any) {
while (true) {
if (!node) break;
if (
node.type !== NodeType.ROUTER_BRANCH_NODE &&
node.type !== NodeType.CONDITION_NODE
node.type !== BpmNodeTypeEnum.ROUTER_BRANCH_NODE &&
node.type !== BpmNodeTypeEnum.CONDITION_NODE
) {
nodeOptions.value.push({
label: node.name,
value: node.id,
});
}
if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
if (!node.childNode || node.type === BpmNodeTypeEnum.END_EVENT_NODE) {
break;
}
if (node.conditionNodes && node.conditionNodes.length > 0) {

10
apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
View File

@ -23,13 +23,9 @@ import {
TypographyText,
} from 'ant-design-vue';
import { BpmModelFormType } from '#/utils';
import { BpmModelFormType, BpmNodeTypeEnum } from '#/utils';
import {
FieldPermissionType,
NodeType,
START_USER_BUTTON_SETTING,
} from '../../consts';
import { FieldPermissionType, START_USER_BUTTON_SETTING } from '../../consts';
import {
useFormFieldsPermission,
useNodeName,
@ -57,7 +53,7 @@ const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
const currentNode = useWatchNode(props);
// 节点名称
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.COPY_TASK_NODE,
BpmNodeTypeEnum.START_USER_NODE,
);
// 激活的 Tab 标签页
const activeTabName = ref('user');

5
apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
View File

@ -29,9 +29,10 @@ import {
Tag,
} from 'ant-design-vue';
import { BpmNodeTypeEnum } from '#/utils';
import {
DEFAULT_CONDITION_GROUP_VALUE,
NodeType,
TRIGGER_TYPES,
TriggerTypeEnum,
} from '../../consts';
@ -72,7 +73,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
const currentNode = useWatchNode(props);
// 节点名称
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.TRIGGER_NODE,
BpmNodeTypeEnum.TRIGGER_NODE,
);
// 触发器表单配置
const formRef = ref(); // 表单 Ref

28
apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
View File

@ -34,7 +34,11 @@ import {
TypographyText,
} from 'ant-design-vue';
import { BpmModelFormType } from '#/utils';
import {
BpmModelFormType,
BpmNodeTypeEnum,
ProcessVariableEnum,
} from '#/utils';
import {
APPROVE_METHODS,
@ -49,9 +53,7 @@ import {
DEFAULT_BUTTON_SETTING,
FieldPermissionType,
MULTI_LEVEL_DEPT,
NodeType,
OPERATION_BUTTON_NAME,
ProcessVariableEnum,
REJECT_HANDLER_TYPES,
RejectHandlerType,
TIME_UNIT_TYPES,
@ -113,7 +115,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
// 节点名称配置
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.USER_TASK_NODE,
BpmNodeTypeEnum.USER_TASK_NODE,
);
// 激活的 Tab 标签页
@ -245,7 +247,9 @@ const userTaskListenerRef = ref();
/** 节点类型名称 */
const nodeTypeName = computed(() => {
return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
return currentNode.value.type === BpmNodeTypeEnum.TRANSACTOR_NODE
? '办理'
: '审批';
});
/** 校验节点配置 */
@ -407,7 +411,7 @@ function showUserTaskNodeConfig(node: SimpleFlowNode) {
// 3. 操作按钮设置
buttonsSetting.value =
cloneDeep(node.buttonsSetting) ||
(node.type === NodeType.TRANSACTOR_NODE
(node.type === BpmNodeTypeEnum.TRANSACTOR_NODE
? TRANSACTOR_DEFAULT_BUTTON_SETTING
: DEFAULT_BUTTON_SETTING);
// 4. 表单字段权限配置
@ -595,7 +599,7 @@ onMounted(() => {
</div>
</template>
<div
v-if="currentNode.type === NodeType.USER_TASK_NODE"
v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE"
class="mb-3 flex items-center"
>
<span class="mr-3 text-[16px]">审批类型 :</span>
@ -860,7 +864,7 @@ onMounted(() => {
</RadioGroup>
</FormItem>
<div v-if="currentNode.type === NodeType.USER_TASK_NODE">
<div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
<Divider content-position="left">审批人拒绝时</Divider>
<FormItem name="rejectHandlerType">
<RadioGroup
@ -902,7 +906,7 @@ onMounted(() => {
</FormItem>
</div>
<div v-if="currentNode.type === NodeType.USER_TASK_NODE">
<div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
<Divider content-position="left">审批人超时未处理时</Divider>
<FormItem
label="启用开关"
@ -1047,7 +1051,7 @@ onMounted(() => {
</Select>
</FormItem>
<div v-if="currentNode.type === NodeType.USER_TASK_NODE">
<div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
<Divider content-position="left">
审批人与提交人为同一人时
</Divider>
@ -1081,7 +1085,7 @@ onMounted(() => {
</FormItem>
</div>
<div v-if="currentNode.type === NodeType.USER_TASK_NODE">
<div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
<Divider content-position="left">审批意见</Divider>
<FormItem name="reasonRequire">
<Switch
@ -1096,7 +1100,7 @@ onMounted(() => {
</TabPane>
<TabPane
tab="操作按钮设置"
v-if="currentNode.type === NodeType.USER_TASK_NODE"
v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE"
key="buttons"
>
<div class="p-1">

8
apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
View File

@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import CopyTaskNodeConfig from '../nodes-config/copy-task-node-config.vue';
import NodeHandler from './node-handler.vue';
@ -32,7 +34,7 @@ const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.COPY_TASK_NODE,
BpmNodeTypeEnum.COPY_TASK_NODE,
);
const nodeSetting = ref();
@ -85,7 +87,7 @@ function deleteNode() {
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.COPY_TASK_NODE) }}
</div>
<IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
</div>

8
apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
View File

@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
import NodeHandler from './node-handler.vue';
@ -30,7 +32,7 @@ const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.DELAY_TIMER_NODE,
BpmNodeTypeEnum.DELAY_TIMER_NODE,
);
const nodeSetting = ref();
@ -82,7 +84,7 @@ function deleteNode() {
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) }}
</div>
<IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
</div>

9
apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
View File

@ -8,11 +8,12 @@ import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
import { Button, Input } from 'ant-design-vue';
import { BpmNodeTypeEnum } from '#/utils';
import {
ConditionType,
DEFAULT_CONDITION_GROUP_VALUE,
NODE_DEFAULT_TEXT,
NodeType,
} from '../../consts';
import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
@ -90,7 +91,7 @@ function addCondition() {
id: `Flow_${generateUUID()}`,
name: `条件${len}`,
showText: '',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionNodes: [],
conditionSetting: {
@ -138,7 +139,7 @@ function recursiveFindParentNode(
node: SimpleFlowNode,
nodeType: number,
) {
if (!node || node.type === NodeType.START_USER_NODE) {
if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
return;
}
if (node.type === nodeType) {
@ -210,7 +211,7 @@ function recursiveFindParentNode(
{{ item.showText }}
</div>
<div class="branch-node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
</div>
</div>
<div

9
apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
View File

@ -8,11 +8,12 @@ import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
import { Button, Input } from 'ant-design-vue';
import { BpmNodeTypeEnum } from '#/utils';
import {
ConditionType,
DEFAULT_CONDITION_GROUP_VALUE,
NODE_DEFAULT_TEXT,
NodeType,
} from '../../consts';
import {
getDefaultInclusiveConditionNodeName,
@ -95,7 +96,7 @@ function addCondition() {
id: `Flow_${generateUUID()}`,
name: `包容条件${len}`,
showText: '',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionNodes: [],
conditionSetting: {
@ -143,7 +144,7 @@ function recursiveFindParentNode(
node: SimpleFlowNode,
nodeType: number,
) {
if (!node || node.type === NodeType.START_USER_NODE) {
if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
return;
}
if (node.type === nodeType) {
@ -213,7 +214,7 @@ function recursiveFindParentNode(
{{ item.showText }}
</div>
<div class="branch-node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
</div>
</div>
<div

100
apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
View File

@ -8,6 +8,8 @@ import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
import { message, Popover } from 'ant-design-vue';
import { BpmNodeTypeEnum } from '#/utils';
import {
ApproveMethodType,
AssignEmptyHandlerType,
@ -15,7 +17,6 @@ import {
ConditionType,
DEFAULT_CONDITION_GROUP_VALUE,
NODE_DEFAULT_NAME,
NodeType,
RejectHandlerType,
} from '../../consts';
@ -41,17 +42,21 @@ const readonly = inject<Boolean>('readonly'); // 是否只读
function addNode(type: number) {
// 校验：条件分支、包容分支后面，不允许直接添加并行分支
if (
type === NodeType.PARALLEL_BRANCH_NODE &&
[NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
props.currentNode?.type,
)
type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE &&
[
BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
].includes(props.currentNode?.type)
) {
message.error('条件分支、包容分支后面，不允许直接添加并行分支');
return;
}
popoverShow.value = false;
if (type === NodeType.USER_TASK_NODE || type === NodeType.TRANSACTOR_NODE) {
if (
type === BpmNodeTypeEnum.USER_TASK_NODE ||
type === BpmNodeTypeEnum.TRANSACTOR_NODE
) {
const id = `Activity_${generateUUID()}`;
const data: SimpleFlowNode = {
id,
@ -83,20 +88,20 @@ function addNode(type: number) {
};
emits('update:childNode', data);
}
if (type === NodeType.COPY_TASK_NODE) {
if (type === BpmNodeTypeEnum.COPY_TASK_NODE) {
const data: SimpleFlowNode = {
id: `Activity_${generateUUID()}`,
name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.COPY_TASK_NODE) as string,
showText: '',
type: NodeType.COPY_TASK_NODE,
type: BpmNodeTypeEnum.COPY_TASK_NODE,
childNode: props.childNode,
};
emits('update:childNode', data);
}
if (type === NodeType.CONDITION_BRANCH_NODE) {
if (type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE) {
const data: SimpleFlowNode = {
name: '条件分支',
type: NodeType.CONDITION_BRANCH_NODE,
type: BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
id: `GateWay_${generateUUID()}`,
childNode: props.childNode,
conditionNodes: [
@ -104,7 +109,7 @@ function addNode(type: number) {
id: `Flow_${generateUUID()}`,
name: '条件1',
showText: '',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionSetting: {
defaultFlow: false,
@ -116,7 +121,7 @@ function addNode(type: number) {
id: `Flow_${generateUUID()}`,
name: '其它情况',
showText: '未满足其它条件时，将进入此分支',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionSetting: {
defaultFlow: true,
@ -126,10 +131,10 @@ function addNode(type: number) {
};
emits('update:childNode', data);
}
if (type === NodeType.PARALLEL_BRANCH_NODE) {
if (type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE) {
const data: SimpleFlowNode = {
name: '并行分支',
type: NodeType.PARALLEL_BRANCH_NODE,
type: BpmNodeTypeEnum.PARALLEL_BRANCH_NODE,
id: `GateWay_${generateUUID()}`,
childNode: props.childNode,
conditionNodes: [
@ -137,24 +142,24 @@ function addNode(type: number) {
id: `Flow_${generateUUID()}`,
name: '并行1',
showText: '无需配置条件同时执行',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
},
{
id: `Flow_${generateUUID()}`,
name: '并行2',
showText: '无需配置条件同时执行',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
},
],
};
emits('update:childNode', data);
}
if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
if (type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE) {
const data: SimpleFlowNode = {
name: '包容分支',
type: NodeType.INCLUSIVE_BRANCH_NODE,
type: BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
id: `GateWay_${generateUUID()}`,
childNode: props.childNode,
conditionNodes: [
@ -162,7 +167,7 @@ function addNode(type: number) {
id: `Flow_${generateUUID()}`,
name: '包容条件1',
showText: '',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionSetting: {
defaultFlow: false,
@ -174,7 +179,7 @@ function addNode(type: number) {
id: `Flow_${generateUUID()}`,
name: '其它情况',
showText: '未满足其它条件时，将进入此分支',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionSetting: {
defaultFlow: true,
@ -184,42 +189,42 @@ function addNode(type: number) {
};
emits('update:childNode', data);
}
if (type === NodeType.DELAY_TIMER_NODE) {
if (type === BpmNodeTypeEnum.DELAY_TIMER_NODE) {
const data: SimpleFlowNode = {
id: `Activity_${generateUUID()}`,
name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) as string,
showText: '',
type: NodeType.DELAY_TIMER_NODE,
type: BpmNodeTypeEnum.DELAY_TIMER_NODE,
childNode: props.childNode,
};
emits('update:childNode', data);
}
if (type === NodeType.ROUTER_BRANCH_NODE) {
if (type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE) {
const data: SimpleFlowNode = {
id: `GateWay_${generateUUID()}`,
name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) as string,
showText: '',
type: NodeType.ROUTER_BRANCH_NODE,
type: BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
childNode: props.childNode,
};
emits('update:childNode', data);
}
if (type === NodeType.TRIGGER_NODE) {
if (type === BpmNodeTypeEnum.TRIGGER_NODE) {
const data: SimpleFlowNode = {
id: `Activity_${generateUUID()}`,
name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.TRIGGER_NODE) as string,
showText: '',
type: NodeType.TRIGGER_NODE,
type: BpmNodeTypeEnum.TRIGGER_NODE,
childNode: props.childNode,
};
emits('update:childNode', data);
}
if (type === NodeType.CHILD_PROCESS_NODE) {
if (type === BpmNodeTypeEnum.CHILD_PROCESS_NODE) {
const data: SimpleFlowNode = {
id: `Activity_${generateUUID()}`,
name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.CHILD_PROCESS_NODE) as string,
showText: '',
type: NodeType.CHILD_PROCESS_NODE,
type: BpmNodeTypeEnum.CHILD_PROCESS_NODE,
childNode: props.childNode,
childProcessSetting: {
calledProcessDefinitionKey: '',
@ -247,7 +252,10 @@ function addNode(type: number) {
<Popover trigger="hover" placement="right" width="auto" v-if="!readonly">
<template #content>
<div class="handler-item-wrapper">
<div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
<div
class="handler-item"
@click="addNode(BpmNodeTypeEnum.USER_TASK_NODE)"
>
<div class="approve handler-item-icon">
<span class="iconfont icon-approve icon-size"></span>
</div>
@ -255,14 +263,17 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.TRANSACTOR_NODE)"
@click="addNode(BpmNodeTypeEnum.TRANSACTOR_NODE)"
>
<div class="transactor handler-item-icon">
<span class="iconfont icon-transactor icon-size"></span>
</div>
<div class="handler-item-text">办理人</div>
</div>
<div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
<div
class="handler-item"
@click="addNode(BpmNodeTypeEnum.COPY_TASK_NODE)"
>
<div class="handler-item-icon copy">
<span class="iconfont icon-size icon-copy"></span>
</div>
@ -270,7 +281,7 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.CONDITION_BRANCH_NODE)"
@click="addNode(BpmNodeTypeEnum.CONDITION_BRANCH_NODE)"
>
<div class="handler-item-icon condition">
<span class="iconfont icon-size icon-exclusive"></span>
@ -279,7 +290,7 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
@click="addNode(BpmNodeTypeEnum.PARALLEL_BRANCH_NODE)"
>
<div class="handler-item-icon parallel">
<span class="iconfont icon-size icon-parallel"></span>
@ -288,7 +299,7 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)"
@click="addNode(BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE)"
>
<div class="handler-item-icon inclusive">
<span class="iconfont icon-size icon-inclusive"></span>
@ -297,7 +308,7 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.DELAY_TIMER_NODE)"
@click="addNode(BpmNodeTypeEnum.DELAY_TIMER_NODE)"
>
<div class="handler-item-icon delay">
<span class="iconfont icon-size icon-delay"></span>
@ -306,14 +317,17 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.ROUTER_BRANCH_NODE)"
@click="addNode(BpmNodeTypeEnum.ROUTER_BRANCH_NODE)"
>
<div class="handler-item-icon router">
<span class="iconfont icon-size icon-router"></span>
</div>
<div class="handler-item-text">路由分支</div>
</div>
<div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
<div
class="handler-item"
@click="addNode(BpmNodeTypeEnum.TRIGGER_NODE)"
>
<div class="handler-item-icon trigger">
<span class="iconfont icon-size icon-trigger"></span>
</div>
@ -321,7 +335,7 @@ function addNode(type: number) {
</div>
<div
class="handler-item"
@click="addNode(NodeType.CHILD_PROCESS_NODE)"
@click="addNode(BpmNodeTypeEnum.CHILD_PROCESS_NODE)"
>
<div class="handler-item-icon child-process">
<span class="iconfont icon-size icon-child-process"></span>

10
apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
View File

@ -8,7 +8,9 @@ import { buildShortUUID as generateUUID } from '@vben/utils';
import { Button, Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useTaskStatusClass } from '../../helpers';
import ProcessNodeTree from '../process-node-tree.vue';
import NodeHandler from './node-handler.vue';
@ -70,7 +72,7 @@ function addCondition() {
id: `Flow_${generateUUID()}`,
name: `并行${len}`,
showText: '无需配置条件同时执行',
type: NodeType.CONDITION_NODE,
type: BpmNodeTypeEnum.CONDITION_NODE,
childNode: undefined,
conditionNodes: [],
};
@ -97,7 +99,7 @@ function recursiveFindParentNode(
node: SimpleFlowNode,
nodeType: number,
) {
if (!node || node.type === NodeType.START_USER_NODE) {
if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
return;
}
if (node.type === nodeType) {
@ -168,7 +170,7 @@ function recursiveFindParentNode(
{{ item.showText }}
</div>
<div class="branch-node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
</div>
</div>
<div v-if="!readonly" class="node-toolbar">

8
apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
View File

@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import RouterNodeConfig from '../nodes-config/router-node-config.vue';
import NodeHandler from './node-handler.vue';
@ -33,7 +35,7 @@ const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.ROUTER_BRANCH_NODE,
BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
);
const nodeSetting = ref();
@ -85,7 +87,7 @@ function deleteNode() {
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) }}
</div>
<IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
</div>

8
apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
View File

@ -9,7 +9,9 @@ import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
import NodeHandler from './node-handler.vue';
@ -36,7 +38,7 @@ const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.START_USER_NODE,
BpmNodeTypeEnum.START_USER_NODE,
);
const nodeSetting = ref();
@ -98,7 +100,7 @@ function nodeClick() {
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.START_USER_NODE) }}
</div>
<IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
</div>

8
apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
View File

@ -7,7 +7,9 @@ import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import TriggerNodeConfig from '../nodes-config/trigger-node-config.vue';
import NodeHandler from './node-handler.vue';
@ -35,7 +37,7 @@ const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.TRIGGER_NODE,
BpmNodeTypeEnum.TRIGGER_NODE,
);
const nodeSetting = ref();
@ -87,7 +89,7 @@ function deleteNode() {
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.TRIGGER_NODE) }}
{{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.TRIGGER_NODE) }}
</div>
<IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
</div>

14
apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
View File

@ -9,7 +9,9 @@ import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
import NodeHandler from './node-handler.vue';
@ -24,7 +26,7 @@ const props = defineProps({
});
const emits = defineEmits<{
findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
findParentNode: [nodeList: SimpleFlowNode[], nodeType: BpmNodeTypeEnum];
'update:flowNode': [node: SimpleFlowNode | undefined];
}>();
@ -36,7 +38,7 @@ const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.START_USER_NODE,
BpmNodeTypeEnum.USER_TASK_NODE,
);
const nodeSetting = ref();
@ -60,7 +62,7 @@ function findReturnTaskNodes(
matchNodeList: SimpleFlowNode[], // 匹配的节点
) {
// 从父节点查找
emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
emits('findParentNode', matchNodeList, BpmNodeTypeEnum.USER_TASK_NODE);
}
// const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
@ -77,10 +79,10 @@ function findReturnTaskNodes(
>
<div class="node-title-container">
<div
:class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
:class="`node-title-icon ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
>
<span
:class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
:class="`iconfont ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
>
</span>
</div>

35
apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
View File

@ -1,7 +1,8 @@
<script setup lang="ts">
import type { SimpleFlowNode } from '../consts';
import { NodeType } from '../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { useWatchNode } from '../helpers';
import CopyTaskNode from './nodes/copy-task-node.vue';
import DelayTimerNode from './nodes/delay-timer-node.vue';
@ -57,7 +58,7 @@ function recursiveFindParentNode(
if (!findNode) {
return;
}
if (findNode.type === NodeType.START_USER_NODE) {
if (findNode.type === BpmNodeTypeEnum.START_USER_NODE) {
nodeList.push(findNode);
return;
}
@ -71,15 +72,15 @@ function recursiveFindParentNode(
<template>
<!-- 发起人节点 -->
<StartUserNode
v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
v-if="currentNode && currentNode.type === BpmNodeTypeEnum.START_USER_NODE"
:flow-node="currentNode"
/>
<!-- 审批节点 -->
<UserTaskNode
v-if="
currentNode &&
(currentNode.type === NodeType.USER_TASK_NODE ||
currentNode.type === NodeType.TRANSACTOR_NODE)
(currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE ||
currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE)
"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
@ -87,46 +88,54 @@ function recursiveFindParentNode(
/>
<!-- 抄送节点 -->
<CopyTaskNode
v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
v-if="currentNode && currentNode.type === BpmNodeTypeEnum.COPY_TASK_NODE"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
/>
<!-- 条件节点 -->
<ExclusiveNode
v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
v-if="
currentNode && currentNode.type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE
"
:flow-node="currentNode"
@update:model-value="handleModelValueUpdate"
@find-parent-node="findParentNode"
/>
<!-- 并行节点 -->
<ParallelNode
v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
v-if="
currentNode && currentNode.type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE
"
:flow-node="currentNode"
@update:model-value="handleModelValueUpdate"
@find-parent-node="findParentNode"
/>
<!-- 包容分支节点 -->
<InclusiveNode
v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
v-if="
currentNode && currentNode.type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
"
:flow-node="currentNode"
@update:model-value="handleModelValueUpdate"
@find-parent-node="findParentNode"
/>
<!-- 延迟器节点 -->
<DelayTimerNode
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
v-if="currentNode && currentNode.type === BpmNodeTypeEnum.DELAY_TIMER_NODE"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
/>
<!-- 路由分支节点 -->
<RouterNode
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
v-if="
currentNode && currentNode.type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE
"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
/>
<!-- 触发器节点 -->
<TriggerNode
v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
v-if="currentNode && currentNode.type === BpmNodeTypeEnum.TRIGGER_NODE"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
/>
@ -146,7 +155,7 @@ function recursiveFindParentNode(
<!-- 结束节点 -->
<EndEventNode
v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
v-if="currentNode && currentNode.type === BpmNodeTypeEnum.END_EVENT_NODE"
:flow-node="currentNode"
/>
</template>

16
apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
View File

@ -22,9 +22,9 @@ import { getSimpleDeptList } from '#/api/system/dept';
import { getSimplePostList } from '#/api/system/post';
import { getSimpleRoleList } from '#/api/system/role';
import { getSimpleUserList } from '#/api/system/user';
import { BpmModelFormType } from '#/utils/constants';
import { BpmModelFormType, BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT, NodeId, NodeType } from '../consts';
import { NODE_DEFAULT_TEXT, NodeId } from '../consts';
import SimpleProcessModel from './simple-process-model.vue';
defineOptions({
@ -124,13 +124,13 @@ function updateModel() {
if (!processNodeTree.value) {
processNodeTree.value = {
name: '发起人',
type: NodeType.START_USER_NODE,
type: BpmNodeTypeEnum.START_USER_NODE,
id: NodeId.START_USER_NODE_ID,
showText: '默认配置',
childNode: {
id: NodeId.END_EVENT_NODE_ID,
name: '结束',
type: NodeType.END_EVENT_NODE,
type: BpmNodeTypeEnum.END_EVENT_NODE,
},
};
// 初始化时也触发一次保存
@ -162,14 +162,14 @@ function validateNode(
) {
if (node) {
const { type, showText, conditionNodes } = node;
if (type === NodeType.END_EVENT_NODE) {
if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
return;
}
if (
type === NodeType.CONDITION_BRANCH_NODE ||
type === NodeType.PARALLEL_BRANCH_NODE ||
type === NodeType.INCLUSIVE_BRANCH_NODE
type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
) {
// 1. 分支节点, 先校验各个分支
conditionNodes?.forEach((item) => {

20
apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
View File

@ -8,7 +8,9 @@ import { downloadFileFromBlob, isString } from '@vben/utils';
import { Button, ButtonGroup, Modal, Row } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../consts';
import { BpmNodeTypeEnum } from '#/utils';
import { NODE_DEFAULT_TEXT } from '../consts';
import { useWatchNode } from '../helpers';
import ProcessNodeTree from './process-node-tree.vue';
@ -113,18 +115,18 @@ function validateNode(
) {
if (node) {
const { type, showText, conditionNodes } = node;
if (type === NodeType.END_EVENT_NODE) {
if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
return;
}
if (type === NodeType.START_USER_NODE) {
if (type === BpmNodeTypeEnum.START_USER_NODE) {
// 发起人节点暂时不用校验，直接校验孩子节点
validateNode(node.childNode, errorNodes);
}
if (
type === NodeType.USER_TASK_NODE ||
type === NodeType.COPY_TASK_NODE ||
type === NodeType.CONDITION_NODE
type === BpmNodeTypeEnum.USER_TASK_NODE ||
type === BpmNodeTypeEnum.COPY_TASK_NODE ||
type === BpmNodeTypeEnum.CONDITION_NODE
) {
if (!showText) {
errorNodes.push(node);
@ -133,9 +135,9 @@ function validateNode(
}
if (
type === NodeType.CONDITION_BRANCH_NODE ||
type === NodeType.PARALLEL_BRANCH_NODE ||
type === NodeType.INCLUSIVE_BRANCH_NODE
type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
) {
// 分支节点
// 1. 先校验各个分支

166
apps/web-antd/src/components/simple-process-design/consts.ts
View File

@ -1,4 +1,4 @@
// TODO 芋艿 这些 常量是不是可以共享
import { BpmNodeTypeEnum, BpmTaskStatusEnum } from '#/utils';
interface DictDataType {
label: string;
@ -43,112 +43,6 @@ export enum ApproveMethodType {
SEQUENTIAL_APPROVE = 4,
}
/**
* 任务状态枚举
*/
export enum TaskStatusEnum {
/**
* 审批通过
*/
APPROVE = 2,
/**
* 审批通过中
*/
APPROVING = 7,
/**
* 已取消
*/
CANCEL = 4,
/**
* 未开始
*/
NOT_START = -1,
/**
* 审批不通过
*/
REJECT = 3,
/**
* 已退回
*/
RETURN = 5,
/**
* 审批中
*/
RUNNING = 1,
/**
* 待审批
*/
WAIT = 0,
}
/**
* 节点类型
*/
export enum NodeType {
/**
* 子流程节点
*/
CHILD_PROCESS_NODE = 20,
/**
* 条件分支节点 (对应排他网关)
*/
CONDITION_BRANCH_NODE = 51,
/**
* 条件节点
*/
CONDITION_NODE = 50,
/**
* 抄送人节点
*/
COPY_TASK_NODE = 12,
/**
* 延迟器节点
*/
DELAY_TIMER_NODE = 14,
/**
* 结束节点
*/
END_EVENT_NODE = 1,
/**
* 包容分支节点 (对应包容网关)
*/
INCLUSIVE_BRANCH_NODE = 53,
/**
* 并行分支节点 (对应并行网关)
*/
PARALLEL_BRANCH_NODE = 52,
/**
* 路由分支节点
*/
ROUTER_BRANCH_NODE = 54,
/**
* 发起人节点
*/
START_USER_NODE = 10,
/**
* 办理人节点
*/
TRANSACTOR_NODE = 13,
/**
* 触发器节点
*/
TRIGGER_NODE = 15,
/**
* 审批人节点
*/
USER_TASK_NODE = 11,
}
export enum NodeId {
/**
* 发起人节点 Id
@ -660,7 +554,7 @@ export type ChildProcessSetting = {
*/
export interface SimpleFlowNode {
id: string;
type: NodeType;
type: BpmNodeTypeEnum;
name: string;
showText?: string;
// 孩子节点
@ -698,7 +592,7 @@ export interface SimpleFlowNode {
// 条件设置
conditionSetting?: ConditionSetting;
// 活动的状态，用于前端节点状态展示
activityStatus?: TaskStatusEnum;
activityStatus?: BpmTaskStatusEnum;
// 延迟设置
delaySetting?: DelaySetting;
// 路由分支
@ -734,26 +628,26 @@ export const DEFAULT_CONDITION_GROUP_VALUE = {
};
export const NODE_DEFAULT_TEXT = new Map<number, string>();
NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人');
NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人');
NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件');
NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人');
NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器');
NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点');
NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器');
NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人');
NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.USER_TASK_NODE, '请配置审批人');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.COPY_TASK_NODE, '请配置抄送人');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CONDITION_NODE, '请设置条件');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.START_USER_NODE, '请设置发起人');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '请设置延迟器');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '请设置路由节点');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRIGGER_NODE, '请设置触发器');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '请设置办理人');
NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '请设置子流程');
export const NODE_DEFAULT_NAME = new Map<number, string>();
NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人');
NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人');
NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件');
NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人');
NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器');
NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支');
NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器');
NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人');
NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.USER_TASK_NODE, '审批人');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.COPY_TASK_NODE, '抄送人');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CONDITION_NODE, '条件');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.START_USER_NODE, '发起人');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '延迟器');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '路由分支');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRIGGER_NODE, '触发器');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '办理人');
NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '子流程');
// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
export const CANDIDATE_STRATEGY: DictDataType[] = [
@ -930,24 +824,6 @@ export const MULTI_LEVEL_DEPT: DictDataType[] = [
{ label: '第 15 级部门', value: 15 },
];
/**
* 流程实例的变量枚举
*/
export enum ProcessVariableEnum {
/**
* 流程定义名称
*/
PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME',
/**
* 发起时间
*/
START_TIME = 'PROCESS_START_TIME',
/**
* 发起用户 ID
*/
START_USER_ID = 'PROCESS_START_USER_ID',
}
export const DELAY_TYPE = [
{ label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
{ label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME },

32
apps/web-antd/src/components/simple-process-design/helpers.ts
View File

@ -14,6 +14,12 @@ import type { SystemUserApi } from '#/api/system/user';
import { inject, ref, toRaw, unref, watch } from 'vue';
import {
BpmNodeTypeEnum,
BpmTaskStatusEnum,
ProcessVariableEnum,
} from '#/utils';
import {
ApproveMethodType,
AssignEmptyHandlerType,
@ -23,10 +29,7 @@ import {
ConditionType,
FieldPermissionType,
NODE_DEFAULT_NAME,
NodeType,
ProcessVariableEnum,
RejectHandlerType,
TaskStatusEnum,
} from './consts';
export function useWatchNode(props: {
@ -252,7 +255,7 @@ export type CopyTaskFormType = {
/**
* @description 节点表单数据。 用于审批节点、抄送节点
*/
export function useNodeForm(nodeType: NodeType) {
export function useNodeForm(nodeType: BpmNodeTypeEnum) {
const roleOptions = inject<Ref<SystemRoleApi.Role[]>>('roleList', ref([])); // 角色列表
const postOptions = inject<Ref<SystemPostApi.Post[]>>('postList', ref([])); // 岗位列表
const userOptions = inject<Ref<SystemUserApi.User[]>>('userList', ref([])); // 用户列表
@ -269,8 +272,8 @@ export function useNodeForm(nodeType: NodeType) {
const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
if (
nodeType === NodeType.USER_TASK_NODE ||
nodeType === NodeType.TRANSACTOR_NODE
nodeType === BpmNodeTypeEnum.USER_TASK_NODE ||
nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE
) {
configForm.value = {
candidateStrategy: CandidateStrategy.USER,
@ -614,7 +617,7 @@ export function useDrawer() {
/**
* @description 节点名称配置
*/
export function useNodeName(nodeType: NodeType) {
export function useNodeName(nodeType: BpmNodeTypeEnum) {
// 节点名称
const nodeName = ref<string>();
// 节点名称输入框
@ -637,7 +640,10 @@ export function useNodeName(nodeType: NodeType) {
};
}
export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
export function useNodeName2(
node: Ref<SimpleFlowNode>,
nodeType: BpmNodeTypeEnum,
) {
// 显示节点名称输入框
const showInput = ref(false);
// 节点名称输入框失去焦点
@ -661,21 +667,21 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
* @description 根据节点任务状态，获取节点任务状态样式
*/
export function useTaskStatusClass(
taskStatus: TaskStatusEnum | undefined,
taskStatus: BpmTaskStatusEnum | undefined,
): string {
if (!taskStatus) {
return '';
}
if (taskStatus === TaskStatusEnum.APPROVE) {
if (taskStatus === BpmTaskStatusEnum.APPROVE) {
return 'status-pass';
}
if (taskStatus === TaskStatusEnum.RUNNING) {
if (taskStatus === BpmTaskStatusEnum.RUNNING) {
return 'status-running';
}
if (taskStatus === TaskStatusEnum.REJECT) {
if (taskStatus === BpmTaskStatusEnum.REJECT) {
return 'status-reject';
}
if (taskStatus === TaskStatusEnum.CANCEL) {
if (taskStatus === BpmTaskStatusEnum.CANCEL) {
return 'status-cancel';
}
return '';

4
apps/web-antd/src/components/simple-process-design/index.ts
View File

@ -1,3 +1,7 @@
import './styles/simple-process-designer.scss';
export { default as HttpRequestSetting } from './components/nodes-config/modules/http-request-setting.vue';
export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
export { parseFormFields } from './helpers';

4
apps/web-antd/src/components/table-action/table-action.vue
View File

@ -204,7 +204,9 @@ function handleMenuClick(e: any) {
"
>
<IconifyIcon v-if="action.icon" :icon="action.icon" />
<span class="ml-1">{{ action.text }}</span>
<span :class="action.icon ? 'ml-1' : ''">
{{ action.text }}
</span>
</div>
</Popconfirm>
</template>

18
apps/web-antd/src/utils/constants.ts
View File

@ -725,3 +725,21 @@ OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.DELEGATE, '委派');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.ADD_SIGN, '加签');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.RETURN, '退回');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.COPY, '抄送');
/**
* 流程实例的变量枚举
*/
export enum ProcessVariableEnum {
/**
* 流程定义名称
*/
PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME',
/**
* 发起时间
*/
START_TIME = 'PROCESS_START_TIME',
/**
* 发起用户 ID
*/
START_USER_ID = 'PROCESS_START_USER_ID',
}

104
apps/web-antd/src/utils/formatNumber.ts
View File

@ -80,3 +80,107 @@ export function calculateRelativeRate(
((100 * ((value || 0) - reference)) / reference).toFixed(0),
);
}
// ========== ERP 专属方法 ==========
const ERP_COUNT_DIGIT = 3;
const ERP_PRICE_DIGIT = 2;
/**
* 【ERP】格式化 Input 数字
*
* 例如说：库存数量
*
* @param num 数量
* @package
* @return 格式化后的数量
*/
export function erpNumberFormatter(
num: number | string | undefined,
digit: number,
) {
if (num === null || num === undefined) {
return '';
}
if (typeof num === 'string') {
num = Number.parseFloat(num);
}
// 如果非 number，则直接返回空串
if (Number.isNaN(num)) {
return '';
}
return num.toFixed(digit);
}
/**
* 【ERP】格式化数量，保留三位小数
*
* 例如说：库存数量
*
* @param num 数量
* @return 格式化后的数量
*/
export function erpCountInputFormatter(num: number | string | undefined) {
return erpNumberFormatter(num, ERP_COUNT_DIGIT);
}
// noinspection JSCommentMatchesSignature
/**
* 【ERP】格式化数量，保留三位小数
*
* @param cellValue 数量
* @return 格式化后的数量
*/
export function erpCountTableColumnFormatter(cellValue: any) {
return erpNumberFormatter(cellValue, ERP_COUNT_DIGIT);
}
/**
* 【ERP】格式化金额，保留二位小数
*
* 例如说：库存数量
*
* @param num 数量
* @return 格式化后的数量
*/
export function erpPriceInputFormatter(num: number | string | undefined) {
return erpNumberFormatter(num, ERP_PRICE_DIGIT);
}
// noinspection JSCommentMatchesSignature
/**
* 【ERP】格式化金额，保留二位小数
*
* @param cellValue 数量
* @return 格式化后的数量
*/
export function erpPriceTableColumnFormatter(cellValue: any) {
return erpNumberFormatter(cellValue, ERP_PRICE_DIGIT);
}
/**
* 【ERP】价格计算，四舍五入保留两位小数
*
* @param price 价格
* @param count 数量
* @return 总价格。如果有任一为空，则返回 undefined
*/
export function erpPriceMultiply(price: number, count: number) {
if (price === null || count === null) {
return undefined;
}
return Number.parseFloat((price * count).toFixed(ERP_PRICE_DIGIT));
}
/**
* 【ERP】百分比计算，四舍五入保留两位小数
*
* 如果 total 为 0，则返回 0
*
* @param value 当前值
* @param total 总值
*/
export function erpCalculatePercentage(value: number, total: number) {
if (total === 0) return 0;
return ((value / total) * 100).toFixed(2);
}

31
apps/web-antd/src/views/bpm/model/form/index.vue
View File

@ -29,6 +29,7 @@ import { getSimpleUserList } from '#/api/system/user';
import { BpmAutoApproveType, BpmModelFormType, BpmModelType } from '#/utils';
import BasicInfo from './modules/basic-info.vue';
import ExtraSetting from './modules/extra-setting.vue';
import FormDesign from './modules/form-design.vue';
import ProcessDesign from './modules/process-design.vue';
@ -55,6 +56,8 @@ const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
const formDesignRef = ref<InstanceType<typeof FormDesign>>();
// 流程设计组件引用
const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
// 更多设置组件引用
const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>();
/** 步骤校验函数 */
const validateBasic = async () => {
@ -71,13 +74,18 @@ const validateProcess = async () => {
await processDesignRef.value?.validate();
};
/** 更多设置校验 */
const validateExtra = async () => {
await extraSettingRef.value?.validate();
};
const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
const steps = [
{ title: '基本信息', validator: validateBasic },
{ title: '表单设计', validator: validateForm },
{ title: '流程设计', validator: validateProcess },
{ title: '更多设置', validator: null },
{ title: '更多设置', validator: validateExtra },
];
// 表单数据
@ -190,8 +198,8 @@ const initData = async () => {
// 最终，设置 currentStep 切换到第一步
currentStep.value = 0;
// TODO 兼容，以前未配置更多设置的流程
// extraSettingsRef.value.initData()
// 以前未配置更多设置的流程
extraSettingRef.value?.initData();
};
/** 根据类型切换流程数据 */
@ -237,7 +245,13 @@ const validateAllSteps = async () => {
return false;
}
// TODO 更多设置校验
// 更多设置校验
try {
await validateExtra();
} catch {
currentStep.value = 3;
return false;
}
return true;
};
@ -345,6 +359,9 @@ const handleStepClick = async (index: number) => {
if (index !== 2) {
await validateProcess();
}
if (index !== 3) {
await validateExtra();
}
// 切换步骤
currentStep.value = index;
} catch (error) {
@ -475,8 +492,10 @@ onBeforeUnmount(() => {
ref="processDesignRef"
/>
<!-- 第四步：更多设置 TODO -->
<div v-if="currentStep === 3" class="mx-auto w-4/6"></div>
<!-- 第四步：更多设置 -->
<div v-if="currentStep === 3" class="mx-auto w-4/6">
<ExtraSetting v-model="formData" ref="extraSettingRef" />
</div>
</div>
</Card>
</div>

498
apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue Normal file
View File

@ -0,0 +1,498 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { CircleHelp } from '@vben/icons';
import {
Checkbox,
Col,
Form,
FormItem,
Input,
InputNumber,
Mentions,
Radio,
RadioGroup,
Row,
Select,
Switch,
Tooltip,
TypographyText,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import * as FormApi from '#/api/bpm/form';
import {
HttpRequestSetting,
parseFormFields,
} from '#/components/simple-process-design';
import { ProcessVariableEnum } from '#/utils';
import { BpmAutoApproveType, BpmModelFormType } from '#/utils/constants';
const modelData = defineModel<any>();
/** 自定义 ID 流程编码 */
const timeOptions = ref([
{
value: '',
label: '无',
},
{
value: 'DAY',
label: '精确到日',
},
{
value: 'HOUR',
label: '精确到时',
},
{
value: 'MINUTE',
label: '精确到分',
},
{
value: 'SECOND',
label: '精确到秒',
},
]);
const numberExample = computed(() => {
if (modelData.value.processIdRule.enable) {
let infix = '';
switch (modelData.value.processIdRule.infix) {
case 'DAY': {
infix = dayjs().format('YYYYMMDD');
break;
}
case 'HOUR': {
infix = dayjs().format('YYYYMMDDHH');
break;
}
case 'MINUTE': {
infix = dayjs().format('YYYYMMDDHHmm');
break;
}
case 'SECOND': {
infix = dayjs().format('YYYYMMDDHHmmss');
break;
}
default: {
break;
}
}
return (
modelData.value.processIdRule.prefix +
infix +
modelData.value.processIdRule.postfix +
'1'.padStart(modelData.value.processIdRule.length - 1, '0')
);
} else {
return '';
}
});
/** 是否开启流程前置通知 */
const processBeforeTriggerEnable = ref(false);
const handleProcessBeforeTriggerEnableChange = (
val: boolean | number | string,
) => {
modelData.value.processBeforeTriggerSetting = val
? {
url: '',
header: [],
body: [],
response: [],
}
: null;
};
/** 是否开启流程后置通知 */
const processAfterTriggerEnable = ref(false);
const handleProcessAfterTriggerEnableChange = (
val: boolean | number | string,
) => {
modelData.value.processAfterTriggerSetting = val
? {
url: '',
header: [],
body: [],
response: [],
}
: null;
};
/** 是否开启任务前置通知 */
const taskBeforeTriggerEnable = ref(false);
const handleTaskBeforeTriggerEnableChange = (
val: boolean | number | string,
) => {
modelData.value.taskBeforeTriggerSetting = val
? {
url: '',
header: [],
body: [],
response: [],
}
: null;
};
/** 是否开启任务后置通知 */
const taskAfterTriggerEnable = ref(false);
const handleTaskAfterTriggerEnableChange = (val: boolean | number | string) => {
modelData.value.taskAfterTriggerSetting = val
? {
url: '',
header: [],
body: [],
response: [],
}
: null;
};
/** 表单选项 */
const formField = ref<Array<{ field: string; title: string }>>([]);
const formFieldOptions4Title = computed(() => {
const cloneFormField = formField.value.map((item) => {
return {
label: item.title,
value: item.field,
};
});
// 固定添加发起人 ID 字段
cloneFormField.unshift({
label: '流程名称',
value: ProcessVariableEnum.PROCESS_DEFINITION_NAME,
});
cloneFormField.unshift({
label: '发起时间',
value: ProcessVariableEnum.START_TIME,
});
cloneFormField.unshift({
label: '发起人',
value: ProcessVariableEnum.START_USER_ID,
});
return cloneFormField;
});
const formFieldOptions4Summary = computed(() => {
return formField.value.map((item) => {
return {
label: item.title,
value: item.field,
};
});
});
/** 兼容以前未配置更多设置的流程 */
const initData = () => {
if (!modelData.value.processIdRule) {
modelData.value.processIdRule = {
enable: false,
prefix: '',
infix: '',
postfix: '',
length: 5,
};
}
if (!modelData.value.autoApprovalType) {
modelData.value.autoApprovalType = BpmAutoApproveType.NONE;
}
if (!modelData.value.titleSetting) {
modelData.value.titleSetting = {
enable: false,
title: '',
};
}
if (!modelData.value.summarySetting) {
modelData.value.summarySetting = {
enable: false,
summary: [],
};
}
if (modelData.value.processBeforeTriggerSetting) {
processBeforeTriggerEnable.value = true;
}
if (modelData.value.processAfterTriggerSetting) {
processAfterTriggerEnable.value = true;
}
if (modelData.value.taskBeforeTriggerSetting) {
taskBeforeTriggerEnable.value = true;
}
if (modelData.value.taskAfterTriggerSetting) {
taskAfterTriggerEnable.value = true;
}
};
/** 监听表单 ID 变化，加载表单数据 */
watch(
() => modelData.value.formId,
async (newFormId) => {
if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
const data = await FormApi.getFormDetail(newFormId);
const result: Array<{ field: string; title: string }> = [];
if (data.fields) {
data.fields.forEach((fieldStr: string) => {
parseFormFields(JSON.parse(fieldStr), result);
});
}
formField.value = result;
} else {
formField.value = [];
}
},
{ immediate: true },
);
// 表单引用
const formRef = ref();
/** 表单校验 */
const validate = async () => {
await formRef.value?.validate();
};
defineExpose({ initData, validate });
</script>
<template>
<Form
ref="formRef"
:model="modelData"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
class="mt-5 px-5"
>
<FormItem class="mb-5" label="提交人权限">
<div class="mt-1 flex flex-col">
<Checkbox v-model:checked="modelData.allowCancelRunningProcess">
允许撤销审批中的申请
</Checkbox>
<div class="ml-6">
<TypographyText type="warning">
第一个审批节点通过后，提交人仍可撤销申请
</TypographyText>
</div>
</div>
</FormItem>
<FormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
<Row :gutter="8" align="middle">
<Col :span="1">
<Checkbox v-model:checked="modelData.processIdRule.enable" />
</Col>
<Col :span="5">
<Input
v-model:value="modelData.processIdRule.prefix"
placeholder="前缀"
:disabled="!modelData.processIdRule.enable"
/>
</Col>
<Col :span="6">
<Select
v-model:value="modelData.processIdRule.infix"
allow-clear
placeholder="中缀"
:disabled="!modelData.processIdRule.enable"
:options="timeOptions"
/>
</Col>
<Col :span="4">
<Input
v-model:value="modelData.processIdRule.postfix"
placeholder="后缀"
:disabled="!modelData.processIdRule.enable"
/>
</Col>
<Col :span="4">
<InputNumber
v-model:value="modelData.processIdRule.length"
:min="5"
:disabled="!modelData.processIdRule.enable"
/>
</Col>
</Row>
<div class="ml-6 mt-2" v-if="modelData.processIdRule.enable">
<TypographyText type="success">
编码示例：{{ numberExample }}
</TypographyText>
</div>
</FormItem>
<FormItem class="mb-5" label="自动去重">
<div class="mt-1">
<TypographyText class="mb-2 block">
同一审批人在流程中重复出现时：
</TypographyText>
<RadioGroup v-model:value="modelData.autoApprovalType">
<Row :gutter="[0, 8]">
<Col :span="24">
<Radio :value="0">不自动通过</Radio>
</Col>
<Col :span="24">
<Radio :value="1">
仅审批一次，后续重复的审批节点均自动通过
</Radio>
</Col>
<Col :span="24">
<Radio :value="2">仅针对连续审批的节点自动通过</Radio>
</Col>
</Row>
</RadioGroup>
</div>
</FormItem>
<FormItem v-if="modelData.titleSetting" class="mb-5" label="标题设置">
<div class="mt-1">
<RadioGroup v-model:value="modelData.titleSetting.enable">
<Row :gutter="[0, 8]">
<Col :span="24">
<Radio :value="false">
系统默认
<TypographyText type="success"> 展示流程名称 </TypographyText>
</Radio>
</Col>
<Col :span="24">
<Radio :value="true">
<div class="inline-flex items-center">
自定义标题
<Tooltip
title="输入字符 '{' 即可插入表单字段"
placement="top"
>
<CircleHelp class="ml-1 size-4 text-gray-500" />
</Tooltip>
</div>
</Radio>
</Col>
</Row>
</RadioGroup>
<div class="mt-2">
<Mentions
v-if="modelData.titleSetting.enable"
v-model:value="modelData.titleSetting.title"
style="width: 100%; max-width: 600px"
type="textarea"
prefix="{"
split="}"
:options="formFieldOptions4Title"
placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
/>
</div>
</div>
</FormItem>
<FormItem
v-if="
modelData.summarySetting &&
modelData.formType === BpmModelFormType.NORMAL
"
class="mb-5"
label="摘要设置"
>
<div class="mt-1">
<RadioGroup v-model:value="modelData.summarySetting.enable">
<Row :gutter="[0, 8]">
<Col :span="24">
<Radio :value="false">
系统默认
<TypographyText type="secondary">
展示表单前 3 个字段
</TypographyText>
</Radio>
</Col>
<Col :span="24">
<Radio :value="true"> 自定义摘要 </Radio>
</Col>
</Row>
</RadioGroup>
<div class="mt-2">
<Select
v-if="modelData.summarySetting.enable"
v-model:value="modelData.summarySetting.summary"
mode="multiple"
placeholder="请选择要展示的表单字段"
:options="formFieldOptions4Summary"
/>
</div>
</div>
</FormItem>
<FormItem class="mb-5" label="流程前置通知">
<Row class="mt-1">
<Col :span="24">
<div class="flex items-center">
<Switch
v-model:checked="processBeforeTriggerEnable"
@change="handleProcessBeforeTriggerEnableChange"
/>
<span class="ml-4">流程启动后通知</span>
</div>
</Col>
</Row>
<Row v-if="processBeforeTriggerEnable">
<Col :span="24" class="mt-6">
<HttpRequestSetting
v-model:setting="modelData.processBeforeTriggerSetting"
:response-enable="true"
form-item-prefix="processBeforeTriggerSetting"
/>
</Col>
</Row>
</FormItem>
<FormItem class="mb-5" label="流程后置通知">
<Row class="mt-1">
<Col :span="24">
<div class="flex items-center">
<Switch
v-model:checked="processAfterTriggerEnable"
@change="handleProcessAfterTriggerEnableChange"
/>
<span class="ml-4">流程结束后通知</span>
</div>
</Col>
</Row>
<Row v-if="processAfterTriggerEnable" class="mt-2">
<Col :span="24">
<HttpRequestSetting
v-model:setting="modelData.processAfterTriggerSetting"
:response-enable="true"
form-item-prefix="processAfterTriggerSetting"
/>
</Col>
</Row>
</FormItem>
<FormItem class="mb-5" label="任务前置通知">
<Row class="mt-1">
<Col :span="24">
<div class="flex items-center">
<Switch
v-model:checked="taskBeforeTriggerEnable"
@change="handleTaskBeforeTriggerEnableChange"
/>
<span class="ml-4">任务执行时通知</span>
</div>
</Col>
</Row>
<Row v-if="taskBeforeTriggerEnable" class="mt-2">
<Col :span="24">
<HttpRequestSetting
v-model:setting="modelData.taskBeforeTriggerSetting"
:response-enable="true"
form-item-prefix="taskBeforeTriggerSetting"
/>
</Col>
</Row>
</FormItem>
<FormItem class="mb-5" label="任务后置通知">
<Row class="mt-1">
<Col :span="24">
<div class="flex items-center">
<Switch
v-model:checked="taskAfterTriggerEnable"
@change="handleTaskAfterTriggerEnableChange"
/>
<span class="ml-4">任务结束后通知</span>
</div>
</Col>
</Row>
<Row v-if="taskAfterTriggerEnable" class="mt-2">
<Col :span="24">
<HttpRequestSetting
v-model:setting="modelData.taskAfterTriggerSetting"
:response-enable="true"
form-item-prefix="taskAfterTriggerSetting"
/>
</Col>
</Row>
</FormItem>
</Form>
</template>

2
apps/web-antd/src/views/crm/backlog/index.vue
View File

@ -21,8 +21,6 @@ import CustomerTodayContactList from './modules/customer-today-contact-list.vue'
import ReceivableAuditList from './modules/receivable-audit-list.vue';
import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
defineOptions({ name: 'CrmBacklog' });
const leftMenu = ref('customerTodayContact');
const clueFollowCount = ref(0);

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

@ -1,6 +1,11 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { getBusinessStatusTypeSimpleList } from '#/api/crm/business/status';
import { getCustomerSimpleList } from '#/api/crm/customer';
import { getSimpleUserList } from '#/api/system/user';
import { erpPriceMultiply } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@ -19,18 +24,58 @@ export function useFormSchema(): VbenFormSchema[] {
rules: 'required',
},
{
fieldName: 'customerId',
label: '客户',
component: 'Input',
fieldName: 'ownerUserId',
label: '负责人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
},
rules: 'required',
},
{
fieldName: 'totalPrice',
label: '商机金额',
component: 'InputNumber',
fieldName: 'customerId',
label: '客户名称',
component: 'ApiSelect',
componentProps: {
min: 0,
placeholder: '请输入商机金额',
api: () => getCustomerSimpleList(),
fieldNames: {
label: 'name',
value: 'id',
},
},
dependencies: {
triggerFields: ['id'],
disabled: (values) => !values.customerId,
},
rules: 'required',
},
{
fieldName: 'contactId',
label: '合同名称',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'statusTypeId',
label: '商机状态组',
component: 'ApiSelect',
componentProps: {
api: () => getBusinessStatusTypeSimpleList(),
fieldNames: {
label: 'name',
value: 'id',
},
},
dependencies: {
triggerFields: ['id'],
disabled: (values) => values.id,
},
rules: 'required',
},
@ -46,9 +91,49 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
fieldName: 'product',
label: '产品清单',
component: 'Input',
formItemClass: 'col-span-3',
},
{
fieldName: 'totalProductPrice',
label: '产品总金额',
component: 'InputNumber',
componentProps: {
min: 0,
},
rules: 'required',
},
{
fieldName: 'discountPercent',
label: '整单折扣（%）',
component: 'InputNumber',
componentProps: {
min: 0,
precision: 2,
},
rules: 'required',
},
{
fieldName: 'totalPrice',
label: '折扣后金额',
component: 'InputNumber',
dependencies: {
triggerFields: ['totalProductPrice', 'discountPercent'],
disabled: () => true,
trigger(values, form) {
const discountPrice =
erpPriceMultiply(
values.totalProductPrice,
values.discountPercent / 100,
) ?? 0;
form.setFieldValue(
'totalPrice',
values.totalProductPrice - discountPrice,
);
},
},
},
];
}

25
apps/web-antd/src/views/crm/business/index.ts Normal file
View File

@ -0,0 +1,25 @@
import { defineAsyncComponent } from 'vue';
export const BusinessForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const BusinessDetailsInfo = defineAsyncComponent(
() => import('./modules/detail-info.vue'),
);
export const BusinessDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
);
export const BusinessDetails = defineAsyncComponent(
() => import('./modules/detail.vue'),
);
export const BusinessDetailsListModal = defineAsyncComponent(
() => import('./modules/detail-list-modal.vue'),
);
export const UpStatusForm = defineAsyncComponent(
() => import('./modules/up-status-form.vue'),
);

126
apps/web-antd/src/views/crm/business/modules/detail-data.ts Normal file
View File

@ -0,0 +1,126 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { formatDateTime } from '@vben/utils';
import { erpPriceInputFormatter } from '#/utils';
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'customerName',
label: '客户名称',
},
{
field: 'totalPrice',
label: '商机金额（元）',
content: (data) => erpPriceInputFormatter(data.totalPrice),
},
{
field: 'statusTypeName',
label: '商机组',
},
{
field: 'ownerUserName',
label: '负责人',
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
];
}
/** 详情页的基础字段 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '商机名称',
},
{
field: 'customerName',
label: '客户名称',
},
{
field: 'totalPrice',
label: '商机金额（元）',
content: (data) => erpPriceInputFormatter(data.totalPrice),
},
{
field: 'dealTime',
label: '预计成交日期',
content: (data) => formatDateTime(data?.dealTime) as string,
},
{
field: 'contactNextTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'statusTypeName',
label: '商机状态组',
},
{
field: 'statusName',
label: '商机阶段',
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'checkbox',
width: 50,
fixed: 'left',
},
{
field: 'name',
title: '商机名称',
fixed: 'left',
slots: { default: 'name' },
},
{
field: 'customerName',
title: '客户名称',
fixed: 'left',
slots: { default: 'customerName' },
},
{
field: 'totalPrice',
title: '商机金额（元）',
formatter: 'formatNumber',
},
{
field: 'dealTime',
title: '预计成交日期',
formatter: 'formatDate',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'statusTypeName',
title: '商机状态组',
fixed: 'right',
},
{
field: 'statusName',
title: '商机阶段',
fixed: 'right',
},
];
}

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

@ -1,4 +1,42 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmBusinessApi } from '#/api/crm/business';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
defineProps<{
business: CrmBusinessApi.Business; // 商机信息
}>();
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>businessInfo</div>
<div class="p-4">
<BaseDescription :data="business" />
<Divider />
<SystemDescription :data="business" />
</div>
</template>

163
apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue Normal file
View File

@ -0,0 +1,163 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBusinessPageByCustomer } from '#/api/crm/business';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import Form from './form.vue';
const props = defineProps<{
customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
}>();
const emit = defineEmits(['success']);
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const checkedRows = ref<CrmBusinessApi.Business[]>([]);
function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建商机 */
function handleCreate() {
formModalApi.setData({ customerId: props.customerId }).open();
}
/** 查看商机详情 */
function handleDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmBusinessDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (checkedRows.value.length === 0) {
message.error('请先选择商机后操作！');
return;
}
modalApi.lock();
// 提交表单
try {
const businessIds = checkedRows.value.map((item) => item.id);
// 关闭并提示
await modalApi.close();
emit('success', businessIds, checkedRows.value);
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<any>();
if (!data) {
return;
}
modalApi.lock();
try {
// 设置到 values
// await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'name',
label: '商机名称',
component: 'Input',
},
],
},
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getBusinessPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.customerId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmBusinessApi.Business>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<Modal title="关联商机" class="w-[40%]">
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['商机']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:business:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
</Grid>
</Modal>
</template>

206
apps/web-antd/src/views/crm/business/modules/detail-list.vue
View File

@ -1,4 +1,206 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import type { CrmContactApi } from '#/api/crm/contact';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { confirm, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
getBusinessPageByContact,
getBusinessPageByCustomer,
} from '#/api/crm/business';
import { createContactBusinessList } from '#/api/crm/contact';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import ListModal from './detail-list-modal.vue';
import Form from './form.vue';
const props = defineProps<{
bizId: number; // 业务编号
bizType: number; // 业务类型
contactId?: number; // 特殊：联系人编号；在【联系人】详情中，可以传递联系人编号，默认新建的商机关联到该联系人
customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
}>();
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [DetailListModal, detailListModalApi] = useVbenModal({
connectedComponent: ListModal,
destroyOnClose: true,
});
const checkedRows = ref<CrmBusinessApi.Business[]>([]);
function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建商机 */
function handleCreate() {
formModalApi
.setData({ customerId: props.customerId, contactId: props.contactId })
.open();
}
function handleCreateBusiness() {
detailListModalApi.setData({ customerId: props.customerId }).open();
}
async function handleDeleteContactBusinessList() {
if (checkedRows.value.length === 0) {
message.error('请先选择商机后操作！');
return;
}
return new Promise((resolve, reject) => {
confirm({
content: `确定要将${checkedRows.value.map((item) => item.name).join(',')}解除关联吗？`,
})
.then(async () => {
const res = await createContactBusinessList({
contactId: props.bizId,
businessIds: checkedRows.value.map((item) => item.id),
});
if (res) {
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
resolve(true);
} else {
reject(new Error($t('ui.actionMessage.operationFailed')));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
/** 查看商机详情 */
function handleDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmBusinessDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
async function handleCreateContactBusinessList(businessIds: number[]) {
const data = {
contactId: props.bizId,
businessIds,
} as CrmContactApi.ContactBusinessReq;
await createContactBusinessList(data);
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
return await getBusinessPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.customerId,
...formValues,
});
} else if (props.bizType === BizTypeEnum.CRM_CONTACT) {
return await getBusinessPageByContact({
page: page.currentPage,
pageSize: page.pageSize,
contactId: props.contactId,
...formValues,
});
} else {
return [];
}
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmBusinessApi.Business>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<div>businessList</div>
<div>
<FormModal @success="onRefresh" />
<DetailListModal
:customer-id="customerId"
@success="handleCreateContactBusinessList"
/>
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['商机']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:business:create'],
onClick: handleCreate,
},
{
label: '关联',
icon: ACTION_ICON.ADD,
type: 'default',
auth: ['crm:contact:create-business'],
ifShow: () => !!contactId,
onClick: handleCreateBusiness,
},
{
label: '解除关联',
icon: ACTION_ICON.ADD,
type: 'default',
auth: ['crm:contact:create-business'],
ifShow: () => !!contactId,
onClick: handleDeleteContactBusinessList,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
</Grid>
</div>
</template>

184
apps/web-antd/src/views/crm/business/modules/detail.vue
View File

@ -1,7 +1,183 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmBusinessApi } from '#/api/crm/business';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Button, Card, Tabs } from 'ant-design-vue';
import { getBusiness } from '#/api/crm/business';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import {
BusinessDetailsInfo,
BusinessForm,
UpStatusForm,
} from '#/views/crm/business';
import { ContactDetailsList } from '#/views/crm/contact';
import { ContractDetailsList } from '#/views/crm/contract';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import { ProductDetailsList } from '#/views/crm/product';
import { useDetailSchema } from './detail-data';
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const businessId = ref(0);
const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business);
const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: BusinessForm,
destroyOnClose: true,
});
const [TransferModal, transferModalApi] = useVbenModal({
connectedComponent: TransferForm,
destroyOnClose: true,
});
const [UpStatusModal, upStatusModalApi] = useVbenModal({
connectedComponent: UpStatusForm,
destroyOnClose: true,
});
/** 加载详情 */
async function loadBusinessDetail() {
loading.value = true;
const data = await getBusiness(businessId.value);
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_BUSINESS,
bizId: businessId.value,
});
businessLogList.value = logList.list;
business.value = data;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/business');
}
/** 编辑 */
function handleEdit() {
formModalApi.setData({ id: businessId.value }).open();
}
/** 转移线索 */
function handleTransfer() {
transferModalApi.setData({ bizType: BizTypeEnum.CRM_BUSINESS }).open();
}
/** 更新商机状态操作 */
async function handleUpdateStatus() {
upStatusModalApi.setData(business.value).open();
}
// 加载数据
onMounted(() => {
businessId.value = Number(route.params.id);
loadBusinessDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page auto-content-height :title="business?.name" :loading="loading">
<FormModal @success="loadBusinessDetail" />
<TransferModal @success="loadBusinessDetail" />
<UpStatusModal @success="loadBusinessDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button
v-if="permissionListRef?.validateWrite"
type="primary"
@click="handleEdit"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button
v-if="permissionListRef?.validateWrite"
@click="handleUpdateStatus"
>
变更商机状态
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser"
@click="handleTransfer"
>
转移
</Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="business" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<BusinessDetailsInfo :business="business" />
</Tabs.TabPane>
<Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
<FollowUp :biz-id="businessId" :biz-type="BizTypeEnum.CRM_BUSINESS" />
</Tabs.TabPane>
<Tabs.TabPane tab="联系人" key="3" :force-render="true">
<ContactDetailsList
:biz-id="businessId"
:biz-type="BizTypeEnum.CRM_BUSINESS"
:business-id="businessId"
:customer-id="business.customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="产品" key="4" :force-render="true">
<ProductDetailsList
:biz-id="businessId"
:biz-type="BizTypeEnum.CRM_BUSINESS"
:business="business"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="合同" key="5" :force-render="true">
<ContractDetailsList
:biz-id="businessId"
:biz-type="BizTypeEnum.CRM_BUSINESS"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="6" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="businessId"
:biz-type="BizTypeEnum.CRM_BUSINESS"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="7" :force-render="true">
<AsyncOperateLog :log-list="businessLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

48
apps/web-antd/src/views/crm/business/modules/form.vue
View File

@ -13,7 +13,10 @@ import {
getBusiness,
updateBusiness,
} from '#/api/crm/business';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { erpPriceMultiply } from '#/utils';
import { ProductEditTable } from '#/views/crm/product';
import { useFormSchema } from '../data';
@ -25,15 +28,37 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['商机']);
});
function handleUpdateProducts(products: any) {
formData.value = modalApi.getData<CrmBusinessApi.Business>();
formData.value!.products = products;
if (formData.value) {
const totalProductPrice =
formData.value.products?.reduce(
(prev, curr) => prev + curr.totalPrice,
0,
) ?? 0;
const discountPercent = formData.value.discountPercent;
const discountPrice =
discountPercent === null
? 0
: erpPriceMultiply(totalProductPrice, discountPercent / 100);
const totalPrice = totalProductPrice - (discountPrice ?? 0);
formData.value!.totalProductPrice = totalProductPrice;
formData.value!.totalPrice = totalPrice;
formApi.setValues(formData.value!);
}
}
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
// 一共3列
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),
showDefaultActions: false,
});
@ -47,6 +72,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmBusinessApi.Business;
data.products = formData.value?.products;
try {
await (formData.value?.id ? updateBusiness(data) : createBusiness(data));
// 关闭并提示
@ -64,12 +90,12 @@ const [Modal, modalApi] = useVbenModal({
}
// 加载数据
const data = modalApi.getData<CrmBusinessApi.Business>();
if (!data || !data.id) {
if (!data) {
return;
}
modalApi.lock();
try {
formData.value = await getBusiness(data.id as number);
formData.value = data.id ? await getBusiness(data.id as number) : data;
// 设置到 values
await formApi.setValues(formData.value);
} finally {
@ -80,7 +106,17 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Form class="mx-4" />
<Modal :title="getTitle" class="w-[50%]">
<Form class="mx-4">
<template #product="slotProps">
<ProductEditTable
v-bind="slotProps"
class="w-full"
:products="formData?.products ?? []"
:biz-type="BizTypeEnum.CRM_BUSINESS"
@update:products="handleUpdateProducts"
/>
</template>
</Form>
</Modal>
</template>

140
apps/web-antd/src/views/crm/business/modules/up-status-form.vue Normal file
View File

@ -0,0 +1,140 @@
<script lang="ts" setup>
import type { CrmBusinessApi } from '#/api/crm/business';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { updateBusinessStatus } from '#/api/crm/business';
import {
DEFAULT_STATUSES,
getBusinessStatusSimpleList,
} from '#/api/crm/business/status';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<CrmBusinessApi.Business>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'statusId',
label: '商机状态',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'endStatus',
label: '商机状态',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'status',
label: '商机阶段',
component: 'Select',
dependencies: {
triggerFields: [''],
async componentProps() {
const statusList = await getBusinessStatusSimpleList(
formData.value?.statusTypeId ?? 0,
);
const statusOptions = statusList.map((item) => ({
label: `${item.name}(赢单率：${item.percent}%)`,
value: item.id,
}));
const options = DEFAULT_STATUSES.map((item) => ({
label: `${`${item.name}(赢单率：${item.percent}`}%)`,
value: item.endStatus,
}));
statusOptions.push(...options);
return {
options: statusOptions,
};
},
},
rules: 'required',
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmBusinessApi.Business;
try {
if (!data.status) {
return;
}
await updateBusinessStatus({
id: data.id,
statusId: data.status > 0 ? data.status : undefined,
endStatus: data.status < 0 ? -data.status : undefined,
});
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<CrmBusinessApi.Business>();
if (!data || !data.id) {
return;
}
data.status = data.endStatus === null ? data.statusId : -data.endStatus;
formData.value = data;
modalApi.lock();
try {
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal title="变更商机状态" class="w-[40%]">
<Form class="mx-4" />
</Modal>
</template>

6
apps/web-antd/src/views/crm/business/status/modules/form.vue
View File

@ -18,7 +18,7 @@ import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<CrmBusinessStatusApi.BusinessStatusType>();
const formData = ref<CrmBusinessStatusApi.BusinessStatus>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['商机状态'])
@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as CrmBusinessStatusApi.BusinessStatusType;
(await formApi.getValues()) as CrmBusinessStatusApi.BusinessStatus;
try {
await (formData.value?.id
? updateBusinessStatus(data)
@ -66,7 +66,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<CrmBusinessStatusApi.BusinessStatusType>();
const data = modalApi.getData<CrmBusinessStatusApi.BusinessStatus>();
if (!data || !data.id) {
return;
}

159
apps/web-antd/src/views/crm/clue/data.ts
View File

@ -1,13 +1,8 @@
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 { getAreaTree } from '#/api/system/area';
import { DictTag } from '#/components/dict-tag';
import { getSimpleUserList } from '#/api/system/user';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
/** 新增/修改的表单 */
@ -32,7 +27,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '客户来源',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE),
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
},
rules: 'required',
},
@ -44,9 +39,12 @@ export function useFormSchema(): VbenFormSchema[] {
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'Select',
component: 'ApiSelect',
componentProps: {
api: 'getSimpleUserList',
api: getSimpleUserList,
labelField: 'nickname',
valueField: 'id',
allowClear: true,
},
rules: 'required',
},
@ -75,7 +73,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '客户行业',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY),
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
},
},
{
@ -83,7 +81,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '客户级别',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL),
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
},
},
{
@ -250,142 +248,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情头部的配置 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'source',
label: '线索来源',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
value: data?.source,
}),
},
{
field: 'mobile',
label: '手机',
},
{
field: 'ownerUserName',
label: '负责人',
},
{
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: 'ownerUserName',
label: '负责人',
},
{
field: 'telephone',
label: '电话',
},
{
field: 'email',
label: '邮箱',
},
{
field: 'wechat',
label: '微信',
},
{
field: 'qq',
label: 'QQ',
},
{
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: 'areaId',
label: '地址',
},
{
field: 'detailAddress',
label: '详细地址',
},
{
field: 'contactNextTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情系统信息的配置 */
export function useDetailSystemSchema(): DescriptionItemSchema[] {
return [
{
field: 'ownerUserName',
label: '负责人',
},
{
field: 'contactLastContent',
label: '最后跟进记录',
},
{
field: 'contactLastContent',
label: '最后跟进时间',
content: (data) => formatDateTime(data?.contactLastContent) as string,
},
{
field: 'creatorName',
label: '创建人',
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
{
field: 'updateTime',
label: '更新时间',
content: (data) => formatDateTime(data?.updateTime) as string,
},
];
}

107
apps/web-antd/src/views/crm/clue/modules/detail-data.ts Normal file
View File

@ -0,0 +1,107 @@
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
/** 详情头部的配置 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'source',
label: '线索来源',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
value: data?.source,
}),
},
{
field: 'mobile',
label: '手机',
},
{
field: 'ownerUserName',
label: '负责人',
},
{
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: '地址',
content: (data) => data?.areaName + data?.detailAddress,
},
{
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: '备注',
},
];
}

15
apps/web-antd/src/views/crm/clue/modules/detail-info.vue
View File

@ -4,12 +4,11 @@ import type { CrmClueApi } from '#/api/crm/clue';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
import { useDetailBaseSchema } from './detail-data';
defineOptions({ name: 'CrmClueDetailsInfo' });
const { clue } = defineProps<{
defineProps<{
clue: CrmClueApi.Clue; // 线索信息
}>();
@ -21,7 +20,6 @@ const [BaseDescription] = useDescription({
class: 'mx-4',
},
schema: useDetailBaseSchema(),
data: clue,
});
const [SystemDescription] = useDescription({
@ -31,15 +29,14 @@ const [SystemDescription] = useDescription({
column: 3,
class: 'mx-4',
},
schema: useDetailSystemSchema(),
data: clue,
schema: useFollowUpDetailSchema(),
});
</script>
<template>
<div class="p-4">
<BaseDescription />
<BaseDescription :data="clue" />
<Divider />
<SystemDescription />
<SystemDescription :data="clue" />
</div>
</template>

104
apps/web-antd/src/views/crm/clue/modules/detail.vue
View File

@ -1,21 +1,25 @@
<script setup lang="ts">
import type { CrmClueApi } from '#/api/crm/clue';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { ArrowLeft } from '@vben/icons';
import { Button, Card, Modal, Tabs } from 'ant-design-vue';
import { Button, Card, message, Tabs } from 'ant-design-vue';
import { getClue, transformClue } from '#/api/crm/clue';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import { useDetailSchema } from '../data';
import { useDetailSchema } from './detail-data';
import ClueForm from './form.vue';
const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
@ -29,7 +33,14 @@ const tabs = useTabs();
const clueId = ref(0);
const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue);
const permissionListRef = ref(); // 团队成员列表 Ref
const clueLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
// 校验负责人权限和编辑权限
const validateOwnerUser = computed(
() => permissionListRef.value?.validateOwnerUser,
);
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({
componentProps: {
@ -53,9 +64,14 @@ const [TransferModal, transferModalApi] = useVbenModal({
/** 加载线索详情 */
async function loadClueDetail() {
loading.value = true;
clueId.value = Number(route.params.id);
const data = await getClue(clueId.value);
clue.value = data;
// 操作日志
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CLUE,
bizId: clueId.value,
});
clueLogList.value = logList.list;
loading.value = false;
}
@ -67,7 +83,7 @@ function handleBack() {
/** 编辑线索 */
function handleEdit() {
formModalApi.setData({ id: clueId }).open();
formModalApi.setData({ id: clueId.value }).open();
}
/** 转移线索 */
@ -76,31 +92,38 @@ function handleTransfer() {
}
/** 转化为客户 */
async function handleTransform() {
try {
await Modal.confirm({
title: '提示',
async function handleTransform(): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: '确定将该线索转化为客户吗？',
});
await transformClue(clueId.value);
Modal.success({
title: '成功',
content: '转化客户成功',
});
await loadClueDetail();
} catch {
// 用户取消操作
}
})
.then(async () => {
const res = await transformClue(clueId.value);
if (res) {
// 提示并返回成功
message.success('转化客户成功');
resolve(true);
} else {
reject(new Error('转化失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
// 加载数据
onMounted(async () => {
await loadClueDetail();
onMounted(() => {
clueId.value = Number(route.params.id);
loadClueDetail();
});
</script>
<template>
<Page auto-content-height :title="clue?.name" :loading="loading">
<FormModal @success="loadClueDetail" />
<TransferModal @success="loadClueDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button @click="handleBack">
@ -108,58 +131,49 @@ onMounted(async () => {
返回
</Button>
<Button
v-if="permissionListRef?.validateWrite"
v-if="validateWrite"
type="primary"
@click="handleEdit"
v-access:code="['crm:clue:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser"
type="primary"
@click="handleTransfer"
v-access:code="['crm:clue:update']"
>
<Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
转移
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
v-if="validateOwnerUser && !clue?.transformStatus"
type="primary"
@click="handleTransform"
v-access:code="['crm:clue:update']"
>
转化为客户
</Button>
</div>
</template>
<Card>
<Card class="min-h-[10%]">
<Description :data="clue" />
</Card>
<Card class="mt-4">
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="线索跟进" key="1">
<div>线索跟进</div>
</Tabs.TabPane>
<Tabs.TabPane tab="基本信息" key="2">
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ClueDetailsInfo :clue="clue" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3">
<Tabs.TabPane tab="线索跟进" key="2" :force-render="true">
<FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="clue.id!"
:biz-id="clueId"
:biz-type="BizTypeEnum.CRM_CLUE"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="4">
<div>操作日志</div>
<Tabs.TabPane tab="操作日志" key="4" :force-render="true">
<AsyncOperateLog :log-list="clueLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
<FormModal @success="loadClueDetail" />
<TransferModal @success="loadClueDetail" />
</Page>
</template>

111
apps/web-antd/src/views/crm/contact/data.ts
View File

@ -1,16 +1,10 @@
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 { getSimpleContactList } from '#/api/crm/contact';
import { getCustomerSimpleList } from '#/api/crm/customer';
import { getAreaTree } from '#/api/system/area';
import { getSimpleUserList } from '#/api/system/user';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
@ -278,108 +272,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
}
/** 详情页的基础字段 */
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: 'wechat',
label: '微信',
},
{
field: 'qq',
label: 'QQ',
},
{
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: 'areaName',
label: '地址',
},
{
field: 'detailAddress',
label: '详细地址',
},
{
field: 'contactNextTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情页的系统字段 */
export function useDetailSystemSchema(): DescriptionItemSchema[] {
return [
{
field: 'ownerUserName',
label: '负责人',
},
{
field: 'ownerUserDeptName',
label: '所属部门',
},
{
field: 'contactLastTime',
label: '最后跟进时间',
content: (data) => formatDateTime(data?.contactLastTime) as string,
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
{
field: 'updateTime',
label: '更新时间',
content: (data) => formatDateTime(data?.updateTime) as string,
},
];
}

17
apps/web-antd/src/views/crm/contact/index.ts Normal file
View File

@ -0,0 +1,17 @@
import { defineAsyncComponent } from 'vue';
export const ContactDetailsInfo = defineAsyncComponent(
() => import('./modules/detail-info.vue'),
);
export const ContactForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const ContactDetails = defineAsyncComponent(
() => import('./modules/detail.vue'),
);
export const ContactDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
);

165
apps/web-antd/src/views/crm/contact/modules/detail-data.ts Normal file
View File

@ -0,0 +1,165 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
/** 详情页的基础字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '客户名称',
},
{
field: 'post',
label: '职务',
},
{
field: 'mobile',
label: '手机',
},
{
field: 'createTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
];
}
/** 详情页的基础字段 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '姓名',
},
{
field: 'customerName',
label: '客户名称',
},
{
field: 'mobile',
label: '手机',
},
{
field: 'telephone',
label: '电话',
},
{
field: 'email',
label: '邮箱',
},
{
field: 'qq',
label: 'QQ',
},
{
field: 'wechat',
label: '微信',
},
{
field: 'areaName',
label: '地址',
},
{
field: 'detailAddress',
label: '详细地址',
},
{
field: 'post',
label: '职务',
},
{
field: 'parentName',
label: '直属上级',
},
{
field: 'master',
label: '关键决策人',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.master,
}),
},
{
field: 'sex',
label: '性别',
content: (data) =>
h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: data?.sex }),
},
{
field: 'contactNextTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'checkbox',
width: 50,
fixed: 'left',
},
{
field: 'name',
title: '姓名',
fixed: 'left',
slots: { default: 'name' },
},
{
field: 'customerName',
title: '客户名称',
fixed: 'left',
slots: { default: 'customerName' },
},
{
field: 'sex',
title: '性别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX },
},
},
{
field: 'mobile',
title: '手机',
},
{
field: 'telephone',
title: '电话',
},
{
field: 'email',
title: '邮箱',
},
{
field: 'post',
title: '职位',
},
{
field: 'detailAddress',
title: '地址',
},
{
field: 'master',
title: '关键决策人',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
];
}

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

@ -1,4 +1,42 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmContactApi } from '#/api/crm/contact';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
defineProps<{
contact: CrmContactApi.Contact; // 联系人信息
}>();
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>contactInfo</div>
<div class="p-4">
<BaseDescription :data="contact" />
<Divider />
<SystemDescription :data="contact" />
</div>
</template>

163
apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue Normal file
View File

@ -0,0 +1,163 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContactApi } from '#/api/crm/contact';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getContactPageByCustomer } from '#/api/crm/contact';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import Form from './form.vue';
const props = defineProps<{
customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
}>();
const emit = defineEmits(['success']);
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const checkedRows = ref<CrmContactApi.Contact[]>([]);
function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建商机 */
function handleCreate() {
formModalApi.setData({ customerId: props.customerId }).open();
}
/** 查看商机详情 */
function handleDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmContactDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (checkedRows.value.length === 0) {
message.error('请先选择联系人后操作！');
return;
}
modalApi.lock();
// 提交表单
try {
const contactIds = checkedRows.value.map((item) => item.id);
// 关闭并提示
await modalApi.close();
emit('success', contactIds, checkedRows.value);
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<any>();
if (!data) {
return;
}
modalApi.lock();
try {
// 设置到 values
// await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'name',
label: '联系人名称',
component: 'Input',
},
],
},
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getContactPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.customerId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<Modal title="关联联系人" class="w-[40%]">
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['联系人']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:contact:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
</Grid>
</Modal>
</template>

205
apps/web-antd/src/views/crm/contact/modules/detail-list.vue
View File

@ -1,4 +1,205 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContactApi } from '#/api/crm/contact';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { confirm, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
createBusinessContactList,
deleteBusinessContactList,
getContactPageByBusiness,
getContactPageByCustomer,
} from '#/api/crm/contact';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import ListModal from './detail-list-modal.vue';
import Form from './form.vue';
const props = defineProps<{
bizId: number; // 业务编号
bizType: number; // 业务类型
businessId?: number; // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
customerId?: number; // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
}>();
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [DetailListModal, detailListModalApi] = useVbenModal({
connectedComponent: ListModal,
destroyOnClose: true,
});
const checkedRows = ref<CrmContactApi.Contact[]>([]);
function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建联系人 */
function handleCreate() {
formModalApi
.setData({ customerId: props.customerId, businessId: props.businessId })
.open();
}
function handleCreateContact() {
detailListModalApi.setData({ customerId: props.customerId }).open();
}
async function handleDeleteContactBusinessList() {
if (checkedRows.value.length === 0) {
message.error('请先选择联系人后操作！');
return;
}
return new Promise((resolve, reject) => {
confirm({
content: `确定要将${checkedRows.value.map((item) => item.name).join(',')}解除关联吗？`,
})
.then(async () => {
const res = await deleteBusinessContactList({
businessId: props.bizId,
contactIds: checkedRows.value.map((item) => item.id),
});
if (res) {
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
resolve(true);
} else {
reject(new Error($t('ui.actionMessage.operationFailed')));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
/** 查看联系人详情 */
function handleDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmContactDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
async function handleCreateBusinessContactList(contactIds: number[]) {
const data = {
businessId: props.bizId,
contactIds,
} as CrmContactApi.BusinessContactReq;
await createBusinessContactList(data);
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
return await getContactPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.bizId,
...formValues,
});
} else if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
return await getContactPageByBusiness({
page: page.currentPage,
pageSize: page.pageSize,
businessId: props.bizId,
...formValues,
});
} else {
return [];
}
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<div>contactList</div>
<div>
<FormModal @success="onRefresh" />
<DetailListModal
:customer-id="customerId"
@success="handleCreateBusinessContactList"
/>
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['联系人']),
type: 'primary',
icon: ACTION_ICON.ADD,
onClick: handleCreate,
},
{
label: '关联',
icon: ACTION_ICON.ADD,
type: 'default',
auth: ['crm:contact:create-business'],
ifShow: () => !!businessId,
onClick: handleCreateContact,
},
{
label: '解除关联',
icon: ACTION_ICON.ADD,
type: 'default',
auth: ['crm:contact:create-business'],
ifShow: () => !!businessId,
onClick: handleDeleteContactBusinessList,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
</Grid>
</div>
</template>

150
apps/web-antd/src/views/crm/contact/modules/detail.vue
View File

@ -1,7 +1,149 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmContactApi } from '#/api/crm/contact';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Button, Card, Tabs } from 'ant-design-vue';
import { getContact } from '#/api/crm/contact';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { BusinessDetailsList } from '#/views/crm/business';
import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import { useDetailSchema } from './detail-data';
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const contactId = ref(0);
const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ContactForm,
destroyOnClose: true,
});
const [TransferModal, transferModalApi] = useVbenModal({
connectedComponent: TransferForm,
destroyOnClose: true,
});
/** 加载详情 */
async function loadContactDetail() {
loading.value = true;
contactId.value = Number(route.params.id);
const data = await getContact(contactId.value);
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CONTACT,
bizId: contactId.value,
});
contactLogList.value = logList.list;
contact.value = data;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/contact');
}
/** 编辑 */
function handleEdit() {
formModalApi.setData({ id: contactId.value }).open();
}
/** 转移线索 */
function handleTransfer() {
transferModalApi.setData({ id: contactId.value }).open();
}
// 加载数据
onMounted(() => {
contactId.value = Number(route.params.id);
loadContactDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page auto-content-height :title="contact?.name" :loading="loading">
<FormModal @success="loadContactDetail" />
<TransferModal @success="loadContactDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button
v-if="permissionListRef?.validateWrite"
type="primary"
@click="handleEdit"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser"
type="primary"
@click="handleTransfer"
>
转移
</Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="contact" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ContactDetailsInfo :contact="contact" />
</Tabs.TabPane>
<Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
<FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="contactId"
:biz-type="BizTypeEnum.CRM_CONTACT"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="商机" key="4" :force-render="true">
<BusinessDetailsList
:biz-id="contactId"
:biz-type="BizTypeEnum.CRM_CONTACT"
:contact-id="contactId"
:customer-id="contact.customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="5" :force-render="true">
<AsyncOperateLog :log-list="contactLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

118
apps/web-antd/src/views/crm/contract/data.ts
View File

@ -1,22 +1,32 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { getSimpleBusinessList } from '#/api/crm/business';
import { getSimpleContactList } from '#/api/crm/contact';
import { getCustomerSimpleList } from '#/api/crm/customer';
import { floatToFixed2 } from '#/utils';
import { getSimpleUserList } from '#/api/system/user';
import { erpPriceMultiply, floatToFixed2 } from '#/utils';
import { DICT_TYPE } from '#/utils/dict';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'no',
label: '合同编号',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入合同编号',
placeholder: '保存时自动生成',
disabled: () => true,
},
},
{
@ -28,9 +38,22 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入合同名称',
},
},
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
},
rules: 'required',
},
{
fieldName: 'customerId',
label: '客户',
label: '客户名称',
component: 'ApiSelect',
rules: 'required',
componentProps: {
@ -42,9 +65,8 @@ export function useFormSchema(): VbenFormSchema[] {
},
{
fieldName: 'businessId',
label: '商机',
label: '商机名称',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: getSimpleBusinessList,
labelField: 'name',
@ -52,49 +74,53 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请选择商机',
},
},
{
fieldName: 'totalPrice',
label: '合同金额',
component: 'InputNumber',
rules: 'required',
componentProps: {
placeholder: '请输入合同金额',
min: 0,
precision: 2,
},
},
{
fieldName: 'orderDate',
label: '下单时间',
label: '下单日期',
component: 'DatePicker',
rules: 'required',
componentProps: {
placeholder: '请选择下单时间',
showTime: false,
format: 'YYYY-MM-DD',
valueFormat: 'x',
},
},
{
fieldName: 'startTime',
label: '合同开始时间',
component: 'DatePicker',
rules: 'required',
componentProps: {
placeholder: '请选择合同开始时间',
showTime: false,
format: 'YYYY-MM-DD',
valueFormat: 'x',
},
},
{
fieldName: 'endTime',
label: '合同结束时间',
component: 'DatePicker',
rules: 'required',
componentProps: {
placeholder: '请选择合同结束时间',
showTime: false,
format: 'YYYY-MM-DD',
valueFormat: 'x',
},
},
{
fieldName: 'signUserId',
label: '公司签约人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
},
},
{
fieldName: 'signContactId',
label: '客户签约人',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: getSimpleContactList,
labelField: 'name',
@ -111,6 +137,50 @@ export function useFormSchema(): VbenFormSchema[] {
rows: 4,
},
},
{
fieldName: 'product',
label: '产品清单',
component: 'Input',
formItemClass: 'col-span-3',
},
{
fieldName: 'totalProductPrice',
label: '产品总金额',
component: 'InputNumber',
componentProps: {
min: 0,
},
},
{
fieldName: 'discountPercent',
label: '整单折扣（%）',
component: 'InputNumber',
rules: z.number().min(0).max(100).default(0),
componentProps: {
min: 0,
precision: 2,
},
},
{
fieldName: 'totalPrice',
label: '折扣后金额',
component: 'InputNumber',
dependencies: {
triggerFields: ['totalProductPrice', 'discountPercent'],
disabled: () => true,
trigger(values, form) {
const discountPrice =
erpPriceMultiply(
values.totalProductPrice,
values.discountPercent / 100,
) ?? 0;
form.setFieldValue(
'totalPrice',
values.totalProductPrice - discountPrice,
);
},
},
},
];
}

17
apps/web-antd/src/views/crm/contract/index.ts Normal file
View File

@ -0,0 +1,17 @@
import { defineAsyncComponent } from 'vue';
export const ContractDetailsInfo = defineAsyncComponent(
() => import('./modules/detail-info.vue'),
);
export const ContractForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const ContractDetails = defineAsyncComponent(
() => import('./modules/detail.vue'),
);
export const ContractDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
);

188
apps/web-antd/src/views/crm/contract/modules/detail-data.ts Normal file
View File

@ -0,0 +1,188 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, erpPriceInputFormatter, floatToFixed2 } from '#/utils';
/** 详情头部的配置 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'customerName',
label: '客户名称',
},
{
field: 'totalPrice',
label: '合同金额（元）',
content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
},
{
field: 'orderDate',
label: '下单时间',
content: (data) => formatDateTime(data?.orderDate) as string,
},
{
field: 'totalReceivablePrice',
label: '回款金额（元）',
content: (data) =>
erpPriceInputFormatter(data?.totalReceivablePrice) as string,
},
{
field: 'ownerUserName',
label: '负责人',
},
];
}
/** 详情基本信息的配置 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'no',
label: '合同编号',
},
{
field: 'name',
label: '合同名称',
},
{
field: 'customerName',
label: '客户名称',
},
{
field: 'businessName',
label: '商机名称',
},
{
field: 'totalPrice',
label: '合同金额（元）',
content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
},
{
field: 'orderDate',
label: '下单时间',
content: (data) => formatDateTime(data?.orderDate) as string,
},
{
field: 'startTime',
label: '合同开始时间',
content: (data) => formatDateTime(data?.startTime) as string,
},
{
field: 'endTime',
label: '合同结束时间',
content: (data) => formatDateTime(data?.endTime) as string,
},
{
field: 'signContactName',
label: '客户签约人',
},
{
field: 'signUserName',
label: '公司签约人',
},
{
field: 'remark',
label: '备注',
},
{
field: 'auditStatus',
label: '合同状态',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_AUDIT_STATUS,
value: data?.auditStatus,
}),
},
];
}
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
title: '合同编号',
field: 'no',
minWidth: 150,
fixed: 'left',
},
{
title: '合同名称',
field: 'name',
minWidth: 150,
fixed: 'left',
slots: { default: 'name' },
},
{
title: '合同金额（元）',
field: 'totalPrice',
minWidth: 150,
formatter: 'formatNumber',
},
{
title: '合同开始时间',
field: 'startTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '合同结束时间',
field: 'endTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '已回款金额（元）',
field: 'totalReceivablePrice',
minWidth: 150,
formatter: 'formatNumber',
},
{
title: '未回款金额（元）',
field: 'unpaidPrice',
minWidth: 150,
formatter: ({ row }) => {
return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
},
},
{
title: '负责人',
field: 'ownerUserName',
minWidth: 150,
},
{
title: '所属部门',
field: 'ownerUserDeptName',
minWidth: 150,
},
{
title: '创建时间',
field: 'createTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '创建人',
field: 'creatorName',
minWidth: 150,
},
{
title: '备注',
field: 'remark',
minWidth: 150,
},
{
title: '合同状态',
field: 'auditStatus',
fixed: 'right',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
},
},
];
}

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

@ -1,4 +1,42 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmContractApi } from '#/api/crm/contract';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
defineProps<{
contract: CrmContractApi.Contract; // 合同信息
}>();
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>contractInfo</div>
<div class="p-4">
<BaseDescription :data="contract" />
<Divider />
<SystemDescription :data="contract" />
</div>
</template>

123
apps/web-antd/src/views/crm/contract/modules/detail-list.vue
View File

@ -1,4 +1,123 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import type { CrmContractApi } from '#/api/crm/contract';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
getContractPageByBusiness,
getContractPageByCustomer,
} from '#/api/crm/contract';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import Form from './form.vue';
const props = defineProps<{
bizId: number; // 业务编号
bizType: number; // 业务类型
}>();
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const checkedRows = ref<CrmContractApi.Contract[]>([]);
function setCheckedRows({ records }: { records: CrmContractApi.Contract[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建合同 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 查看合同详情 */
function handleDetail(row: CrmContractApi.Contract) {
push({ name: 'CrmContractDetail', params: { id: row.id } });
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
return await getContractPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.bizId,
...formValues,
});
} else if (props.bizType === BizTypeEnum.CRM_CONTACT) {
return await getContractPageByBusiness({
page: page.currentPage,
pageSize: page.pageSize,
businessId: props.bizId,
...formValues,
});
} else {
return [];
}
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmBusinessApi.Business>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<div>contractList</div>
<div>
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['合同']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:contract:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
</Grid>
</div>
</template>

170
apps/web-antd/src/views/crm/contract/modules/detail.vue
View File

@ -1,7 +1,169 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmContractApi } from '#/api/crm/contract';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { computed, 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 { getContract } from '#/api/crm/contract';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { ContractDetailsInfo, ContractForm } from '#/views/crm/contract';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import { ProductDetailsList } from '#/views/crm/product';
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 contractId = ref(0);
const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract);
const contractLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
// 校验负责人权限和编辑权限
const validateOwnerUser = computed(
() => permissionListRef.value?.validateOwnerUser,
);
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ContractForm,
destroyOnClose: true,
});
const [TransferModal, transferModalApi] = useVbenModal({
connectedComponent: TransferForm,
destroyOnClose: true,
});
/** 加载线索详情 */
async function loadContractDetail() {
loading.value = true;
const data = await getContract(contractId.value);
contract.value = data;
// 操作日志
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CLUE,
bizId: contractId.value,
});
contractLogList.value = logList.list;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/contract');
}
/** 编辑 */
function handleEdit() {
formModalApi.setData({ id: contractId.value }).open();
}
/** 转移 */
function handleTransfer() {
transferModalApi.setData({ bizType: BizTypeEnum.CRM_CONTRACT }).open();
}
// 加载数据
onMounted(() => {
contractId.value = Number(route.params.id);
loadContractDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page auto-content-height :title="contract?.name" :loading="loading">
<FormModal @success="loadContractDetail" />
<TransferModal @success="loadContractDetail" />
<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:contract:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
转移
</Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="contract" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ContractDetailsInfo :contract="contract" />
</Tabs.TabPane>
<Tabs.TabPane tab="合同跟进" key="2" :force-render="true">
<FollowUp :biz-id="contractId" :biz-type="BizTypeEnum.CRM_CONTRACT" />
</Tabs.TabPane>
<Tabs.TabPane tab="产品" key="3" :force-render="true">
<ProductDetailsList
:biz-id="contractId"
:biz-type="BizTypeEnum.CRM_CONTRACT"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="回款" key="4" :force-render="true">
<ReceivablePlanDetailsList
:contract-id="contractId"
:customer-id="contract.customerId"
/>
<ReceivableDetailsList
:contract-id="contractId"
:customer-id="contract.customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="5" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="contractId"
:biz-type="BizTypeEnum.CRM_CONTRACT"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="6" :force-render="true">
<AsyncOperateLog :log-list="contractLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

46
apps/web-antd/src/views/crm/contract/modules/form.vue
View File

@ -12,7 +12,10 @@ import {
getContract,
updateContract,
} from '#/api/crm/contract';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { erpPriceMultiply } from '#/utils';
import { ProductEditTable } from '#/views/crm/product';
import { useFormSchema } from '../data';
@ -24,15 +27,37 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['合同']);
});
function handleUpdateProducts(products: any) {
formData.value = modalApi.getData<CrmContractApi.Contract>();
formData.value!.products = products;
if (formData.value) {
const totalProductPrice =
formData.value.products?.reduce(
(prev, curr) => prev + curr.totalPrice,
0,
) ?? 0;
const discountPercent = formData.value.discountPercent;
const discountPrice =
discountPercent === null
? 0
: erpPriceMultiply(totalProductPrice, discountPercent / 100);
const totalPrice = totalProductPrice - (discountPrice ?? 0);
formData.value!.totalProductPrice = totalProductPrice;
formData.value!.totalPrice = totalPrice;
formApi.setValues(formData.value!);
}
}
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
labelWidth: 120,
},
// 一共2列
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
// 一共3列
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),
showDefaultActions: false,
});
@ -46,6 +71,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmContractApi.Contract;
data.products = formData.value?.products;
try {
await (formData.value?.id ? updateContract(data) : createContract(data));
// 关闭并提示
@ -79,7 +105,17 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Form class="mx-4" />
<Modal :title="getTitle" class="w-[50%]">
<Form class="mx-4">
<template #product="slotProps">
<ProductEditTable
v-bind="slotProps"
class="w-full"
:products="formData?.products ?? []"
:biz-type="BizTypeEnum.CRM_CONTRACT"
@update:products="handleUpdateProducts"
/>
</template>
</Form>
</Modal>
</template>

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

@ -1,14 +1,8 @@
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 { getAreaTree } from '#/api/system/area';
import { getSimpleUserList } from '#/api/system/user';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
/** 新增/修改的表单 */
@ -240,108 +234,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
}
/** 详情页的基础字段 */
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: 'wechat',
label: '微信',
},
{
field: 'qq',
label: 'QQ',
},
{
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: 'areaName',
label: '地址',
},
{
field: 'detailAddress',
label: '详细地址',
},
{
field: 'contactNextTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情页的系统字段 */
export function useDetailSystemSchema(): DescriptionItemSchema[] {
return [
{
field: 'ownerUserName',
label: '负责人',
},
{
field: 'ownerUserDeptName',
label: '所属部门',
},
{
field: 'contactLastTime',
label: '最后跟进时间',
content: (data) => formatDateTime(data?.contactLastTime) as string,
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
{
field: 'updateTime',
label: '更新时间',
content: (data) => formatDateTime(data?.updateTime) as string,
},
];
}

17
apps/web-antd/src/views/crm/customer/index.ts Normal file
View File

@ -0,0 +1,17 @@
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'),
);
export const DistributeForm = defineAsyncComponent(
() => import('./poolConfig/distribute-form.vue'),
);

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

@ -21,6 +21,7 @@ import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
const { push } = useRouter();
const sceneType = ref('1');
@ -35,6 +36,16 @@ function onRefresh() {
gridApi.query();
}
const [ImportModal, importModalApi] = useVbenModal({
connectedComponent: ImportForm,
destroyOnClose: true,
});
/** 导入客户 */
function handleImport() {
importModalApi.open();
}
/** 导出表格 */
async function handleExport() {
const data = await exportCustomer(await gridApi.formApi.getValues());
@ -124,6 +135,7 @@ function onChangeSceneType(key: number | string) {
</template>
<FormModal @success="onRefresh" />
<ImportModal @success="onRefresh" />
<Grid>
<template #top>
<Tabs class="border-none" @change="onChangeSceneType">
@ -142,6 +154,13 @@ function onChangeSceneType(key: number | string) {
auth: ['crm:customer:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.import'),
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['crm:customer:import'],
onClick: handleImport,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',

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

@ -0,0 +1,101 @@
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
/** 详情页的字段 */
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: '备注',
},
];
}

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

@ -1,5 +1,42 @@
<script lang="ts" setup></script>
<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 [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>detail-info</div>
<div class="p-4">
<BaseDescription :data="customer" />
<Divider />
<SystemDescription :data="customer" />
</div>
</template>

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

@ -1,4 +0,0 @@
<script lang="ts" setup></script>
<template>
<div>customerList</div>
</template>

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

@ -2,34 +2,47 @@
import type { CrmCustomerApi } from '#/api/crm/customer';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Button, Card, Modal, Tabs } from 'ant-design-vue';
import { Button, Card, message, Tabs } from 'ant-design-vue';
import { getCustomer, updateCustomerDealStatus } from '#/api/crm/customer';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { OperateLog } from '#/components/operate-log';
import { AsyncOperateLog } from '#/components/operate-log';
import { BusinessDetailsList } from '#/views/crm/business';
import { ContactDetailsList } from '#/views/crm/contact';
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 '../data';
const CustomerDetailsInfo = defineAsyncComponent(
() => import('./detail-info.vue'),
);
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 permissionListRef = ref(); // 团队成员列表 Ref
const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
const [Description] = useDescription({
componentProps: {
@ -40,91 +53,113 @@ const [Description] = useDescription({
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);
await getOperateLog();
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: clueId }).open();
formModalApi.setData({ id: customerId.value }).open();
}
/** 转移线索 */
function handleTransfer() {
// transferModalApi.setData({ id: clueId }).open();
transferModalApi.setData({ id: customerId.value }).open();
}
/** 锁定客户 */
function handleLock() {
// transferModalApi.setData({ id: clueId }).open();
transferModalApi.setData({ id: customerId.value }).open();
}
/** 解锁客户 */
function handleUnlock() {
// transferModalApi.setData({ id: clueId }).open();
transferModalApi.setData({ id: customerId.value }).open();
}
/** 领取客户 */
function handleReceive() {
// transferModalApi.setData({ id: clueId }).open();
transferModalApi.setData({ id: customerId.value }).open();
}
/** 分配客户 */
function handleDistributeForm() {
// transferModalApi.setData({ id: clueId }).open();
distributeModalApi.setData({ id: customerId.value }).open();
}
/** 客户放入公海 */
function handlePutPool() {
// transferModalApi.setData({ id: clueId }).open();
transferModalApi.setData({ id: customerId.value }).open();
}
/** 更新成交状态操作 */
async function handleUpdateDealStatus() {
const dealStatus = !customer.value.dealStatus;
try {
await Modal.confirm({
title: '提示',
async function handleUpdateDealStatus(): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
const dealStatus = !customer.value.dealStatus;
confirm({
content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
});
await updateCustomerDealStatus(customerId.value, dealStatus);
Modal.success({
title: '成功',
content: '更新成交状态成功',
});
await loadCustomerDetail();
} catch {
// 用户取消操作
}
}
/** 获取操作日志 */
const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志列表
async function getOperateLog() {
if (!customerId.value) {
return;
}
const data = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CUSTOMER,
bizId: customerId.value,
})
.then(async () => {
const res = await updateCustomerDealStatus(
customerId.value,
dealStatus,
);
if (res) {
message.success('更新成交状态成功');
resolve(true);
} else {
reject(new Error('更新成交状态失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
logList.value = data.list;
}
// 加载数据
onMounted(async () => {
await loadCustomerDetail();
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>
<div class="flex items-center gap-2">
<Button
@ -160,10 +195,18 @@ onMounted(async () => {
>
锁定
</Button>
<Button v-if="!customer.ownerUserId" @click="handleReceive">
<Button
v-if="!customer.ownerUserId"
type="primary"
@click="handleReceive"
>
领取
</Button>
<Button v-if="!customer.ownerUserId" @click="handleDistributeForm">
<Button
v-if="!customer.ownerUserId"
type="primary"
@click="handleDistributeForm"
>
分配
</Button>
<Button
@ -174,34 +217,52 @@ onMounted(async () => {
</Button>
</div>
</template>
<Card>
<Card class="min-h-[10%]">
<Description :data="customer" />
</Card>
<Card class="mt-4">
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="跟进记录" key="1">
<div>跟进记录</div>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<CustomerDetailsInfo :customer="customer" />
</Tabs.TabPane>
<Tabs.TabPane tab="基本信息" key="2">
<CustomerDetailsInfo />
<Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
<FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</Tabs.TabPane>
<Tabs.TabPane tab="联系人" key="3">
<div>联系人</div>
<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">
<div>团队成员</div>
<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">
<div>商机</div>
<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">
<div>合同</div>
<Tabs.TabPane tab="合同" key="6" :force-render="true">
<ContractDetailsList
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="回款" key="7">
<div>回款</div>
<Tabs.TabPane tab="回款" key="7" :force-render="true">
<ReceivablePlanDetailsList :customer-id="customerId" />
<ReceivableDetailsList :customer-id="customerId" />
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="8">
<OperateLog :log-list="logList" />
<Tabs.TabPane tab="操作日志" key="8" :force-render="true">
<AsyncOperateLog :log-list="customerLogList" />
</Tabs.TabPane>
</Tabs>
</Card>

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

@ -0,0 +1,118 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import { useVbenModal, z } 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';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
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: '是否更新已经存在的用户数据',
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = await formApi.getValues();
try {
await importCustomer({
ownerUserId: data.ownerUserId,
file: data.file,
updateSupport: data.updateSupport,
});
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
});
/** 上传前 */
function beforeUpload(file: FileType) {
formApi.setFieldValue('file', file);
return false;
}
/** 下载模版 */
async function handleDownload() {
const data = await importCustomerTemplate();
downloadFileFromBlobPart({ fileName: '客户导入模板.xls', source: data });
}
</script>
<template>
<Modal title="客户导入" class="w-[30%]">
<Form class="mx-4">
<template #file>
<div class="w-full">
<Upload
:max-count="1"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
>
<Button type="primary"> 选择 Excel 文件 </Button>
</Upload>
</div>
</template>
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<Button @click="handleDownload"> 下载导入模板 </Button>
</div>
</template>
</Modal>
</template>

40
apps/web-antd/src/views/crm/clue/modules/transfer.vue → apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
View File

@ -1,18 +1,14 @@
<script lang="ts" setup>
import type { CrmPermissionApi } from '#/api/crm/permission';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { transferClue } from '#/api/crm/clue';
import { distributeCustomer } from '#/api/crm/customer';
import { getSimpleUserList } from '#/api/system/user';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<{ id: number }>();
const [Form, formApi] = useVbenForm({
commonConfig: {
@ -24,12 +20,24 @@ const [Form, formApi] = useVbenForm({
},
layout: 'horizontal',
schema: [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'Select',
component: 'ApiSelect',
componentProps: {
api: 'getSimpleUserList',
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
},
rules: 'required',
},
@ -45,9 +53,9 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
const data = await formApi.getValues();
try {
await transferClue(data);
await distributeCustomer([data.id], data.ownerUserId);
// 关闭并提示
await modalApi.close();
emit('success');
@ -58,21 +66,25 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<{ id: number }>();
const data = modalApi.getData();
if (!data || !data.id) {
return;
}
formData.value = data;
modalApi.lock();
try {
await formApi.setValues(data);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
<Modal title="分配客户" class="w-[40%]">
<Form class="mx-4" />
</Modal>
</template>

36
apps/web-antd/src/views/crm/followup/data.ts Normal file
View File

@ -0,0 +1,36 @@
import type { DescriptionItemSchema } from '#/components/description';
import { formatDateTime } from '@vben/utils';
/** 详情页的系统字段 */
export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'ownerUserName',
label: '负责人',
},
{
field: 'contactLastContent',
label: '最后跟进记录',
},
{
field: 'contactLastTime',
label: '最后跟进时间',
content: (data) => formatDateTime(data?.contactLastTime) as string,
},
{
field: 'creatorName',
label: '创建人',
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
{
field: 'updateTime',
label: '更新时间',
content: (data) => formatDateTime(data?.updateTime) as string,
},
];
}

3
apps/web-antd/src/views/crm/followup/index.ts Normal file
View File

@ -0,0 +1,3 @@
import { defineAsyncComponent } from 'vue';
export const FollowUp = defineAsyncComponent(() => import('./index.vue'));

75
apps/web-antd/src/views/crm/followup/index.vue
View File

@ -1,18 +1,22 @@
<script lang="ts" setup>
import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmFollowUpApi } from '#/api/crm/followup';
import { watch } from 'vue';
import { useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { BizTypeEnum } from '@/api/crm/permission';
import { DICT_TYPE } from '@/utils/dict';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteFollowUpRecord,
getFollowUpRecordPage,
} from '#/api/crm/followup';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { DICT_TYPE } from '#/utils';
import FollowUpRecordForm from './modules/form.vue';
@ -33,17 +37,17 @@ function onRefresh() {
/** 添加跟进记录 */
function handleCreate() {
formModalApi.setData(null).open();
formModalApi.setData({ bizId: props.bizId, bizType: props.bizType }).open();
}
/** 删除跟进记录 */
async function handleDelete(row: FollowUpRecordVO) {
async function handleDelete(row: CrmFollowUpApi.FollowUpRecord) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]),
key: 'action_key_msg',
});
try {
await FollowUpRecordApi.deleteFollowUpRecord(row.id);
await deleteFollowUpRecord(row.id);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_key_msg',
@ -75,7 +79,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
field: 'createTime',
title: '创建时间',
width: 180,
formatter: 'formatDateTime',
},
{ field: 'creatorName', title: '跟进人' },
@ -91,58 +94,32 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
field: 'nextTime',
title: '下次联系时间',
width: 180,
formatter: 'formatDateTime',
},
{
field: 'contacts',
title: '关联联系人',
visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
slots: {
default: ({ row }) =>
row.contacts?.map((contact) =>
h(
Button,
{
type: 'link',
onClick: () => openContactDetail(contact.id),
},
() => contact.name,
),
),
},
slots: { default: 'contacts' },
},
{
field: 'businesses',
title: '关联商机',
visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
slots: {
default: ({ row }) =>
row.businesses?.map((business) =>
h(
Button,
{
type: 'link',
onClick: () => openBusinessDetail(business.id),
},
() => business.name,
),
),
},
slots: { default: 'businesses' },
},
{
field: 'actions',
title: '操作',
width: 100,
slots: { default: 'actions' },
},
],
height: 'auto',
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await FollowUpRecordApi.getFollowUpRecordPage({
return await getFollowUpRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
bizType: props.bizType,
@ -157,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
toolbarConfig: {
refresh: { code: 'query' },
},
} as VxeTableGridOptions<FollowUpRecordVO>,
} as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
});
watch(
@ -169,8 +146,9 @@ watch(
</script>
<template>
<Page auto-content-height>
<Grid table-title="跟进记录列表">
<div>
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
@ -183,6 +161,16 @@ watch(
]"
/>
</template>
<template #contacts="{ row }">
<Button type="link" @click="openContactDetail(row.id)">
{{ row.name }}
</Button>
</template>
<template #businesses="{ row }">
<Button type="link" @click="openBusinessDetail(row.id)">
{{ row.name }}
</Button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
@ -200,6 +188,5 @@ watch(
/>
</template>
</Grid>
<FormModal @success="onRefresh" />
</Page>
</div>
</template>

133
apps/web-antd/src/views/crm/followup/modules/form.vue
View File

@ -1,27 +1,23 @@
<script lang="ts" setup>
import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
import type { CrmFollowUpApi } from '#/api/crm/followup';
import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createFollowUpRecord,
getFollowUpRecord,
updateFollowUpRecord,
} from '#/api/crm/followup';
import { getBusinessPageByCustomer } from '#/api/crm/business';
import { getContactPageByCustomer } from '#/api/crm/contact';
import { createFollowUpRecord } from '#/api/crm/followup';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils';
const emit = defineEmits(['success']);
const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['跟进记录'])
: $t('ui.actionTitle.create', ['跟进记录']);
});
const bizId = ref<number>();
const bizType = ref<number>();
const [Form, formApi] = useVbenForm({
commonConfig: {
@ -32,7 +28,94 @@ const [Form, formApi] = useVbenForm({
labelWidth: 120,
},
layout: 'horizontal',
schema: [],
schema: [
{
component: 'Input',
fieldName: 'bizId',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'bizType',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'type',
label: '跟进类型',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE, 'number'),
},
rules: 'required',
},
{
fieldName: 'nextTime',
label: '下次联系时间',
component: 'DatePicker',
componentProps: {
showTime: false,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
},
rules: 'required',
},
{
fieldName: 'content',
label: '跟进内容',
component: 'Textarea',
rules: 'required',
},
{
fieldName: 'picUrls',
label: '图片',
component: 'ImageUpload',
},
{
fieldName: 'fileUrls',
label: '附件',
component: 'FileUpload',
},
{
fieldName: 'contactIds',
label: '关联联系人',
component: 'ApiSelect',
componentProps: {
api: async () => {
const res = await getContactPageByCustomer({
pageNo: 1,
pageSize: 100,
customerId: bizId.value,
});
return res.list;
},
mode: 'multiple',
fieldNames: { label: 'name', value: 'id' },
},
},
{
fieldName: 'businessIds',
label: '关联商机',
component: 'ApiSelect',
componentProps: {
api: async () => {
const res = await getBusinessPageByCustomer({
pageNo: 1,
pageSize: 100,
customerId: bizId.value,
});
return res.list;
},
mode: 'multiple',
fieldNames: { label: 'name', value: 'id' },
},
},
],
showDefaultActions: false,
});
@ -44,12 +127,9 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
const data = (await formApi.getValues()) as CrmFollowUpApi.FollowUpRecord;
try {
await (formData.value?.id
? updateFollowUpRecord(data)
: createFollowUpRecord(data));
await createFollowUpRecord(data);
// 关闭并提示
await modalApi.close();
emit('success');
@ -60,19 +140,20 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
if (!data || !data.id) {
const data = modalApi.getData<CrmFollowUpApi.FollowUpRecord>();
if (!data) {
return;
}
if (data.bizId && data.bizType) {
bizId.value = data.bizId;
bizType.value = data.bizType;
}
modalApi.lock();
try {
formData.value = await getFollowUpRecord(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
await formApi.setValues(data);
} finally {
modalApi.unlock();
}
@ -81,7 +162,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Modal title="添加跟进记录" class="w-[40%]">
<Form class="mx-4" />
</Modal>
</template>

15
apps/web-antd/src/views/crm/permission/index.ts
View File

@ -1,2 +1,13 @@
export { default as PermissionList } from './modules/permission-list.vue';
export { default as TransferForm } from './modules/transfer-form.vue';
import { defineAsyncComponent } from 'vue';
export const PermissionList = defineAsyncComponent(
() => import('./modules/permission-list.vue'),
);
export const PermissionForm = defineAsyncComponent(
() => import('./modules/permission-form.vue'),
);
export const TransferForm = defineAsyncComponent(
() => import('./modules/transfer-form.vue'),
);

231
apps/web-antd/src/views/crm/permission/modules/data.ts Normal file
View File

@ -0,0 +1,231 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
import { getSimpleUserList } from '#/api/system/user';
import { DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
export function useTransferFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'newOwnerUserId',
label: '选择新负责人',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
labelField: 'nickname',
valueField: 'id',
},
rules: 'required',
},
{
fieldName: 'oldOwnerHandler',
label: '老负责人',
component: 'RadioGroup',
componentProps: {
options: [
{
label: '加入团队',
value: true,
},
{
label: '移除',
value: false,
},
],
},
rules: 'required',
},
{
fieldName: 'oldOwnerPermissionLevel',
label: '老负责人权限级别',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(
DICT_TYPE.CRM_PERMISSION_LEVEL,
'number',
).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
},
dependencies: {
triggerFields: ['oldOwnerHandler'],
show: (values) => values.oldOwnerHandler,
trigger(values) {
if (!values.oldOwnerHandler) {
values.oldOwnerPermissionLevel = undefined;
}
},
},
rules: 'required',
},
{
fieldName: 'toBizTypes',
label: '同时转移',
component: 'CheckboxGroup',
componentProps: {
options: [
{
label: '联系人',
value: BizTypeEnum.CRM_CONTACT,
},
{
label: '商机',
value: BizTypeEnum.CRM_BUSINESS,
},
{
label: '合同',
value: BizTypeEnum.CRM_CONTRACT,
},
],
},
},
];
}
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'bizId',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'ids',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'userId',
label: '选择人员',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
labelField: 'nickname',
valueField: 'id',
},
dependencies: {
triggerFields: ['ids'],
show: (values) => {
return values.ids === undefined;
},
},
},
{
fieldName: 'level',
label: '权限级别',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(
DICT_TYPE.CRM_PERMISSION_LEVEL,
'number',
).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
},
rules: 'required',
},
{
fieldName: 'bizType',
label: 'Crm 类型',
component: 'RadioGroup',
componentProps: {
options: [
{
label: '联系人',
value: BizTypeEnum.CRM_CONTACT,
},
{
label: '商机',
value: BizTypeEnum.CRM_BUSINESS,
},
{
label: '合同',
value: BizTypeEnum.CRM_CONTRACT,
},
],
},
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'toBizTypes',
label: '同时添加至',
component: 'CheckboxGroup',
componentProps: {
options: [
{
label: '联系人',
value: BizTypeEnum.CRM_CONTACT,
},
{
label: '商机',
value: BizTypeEnum.CRM_BUSINESS,
},
{
label: '合同',
value: BizTypeEnum.CRM_CONTRACT,
},
],
},
dependencies: {
triggerFields: ['ids', 'bizType'],
show: (values) => {
return (
values.ids === undefined &&
values.bizType === BizTypeEnum.CRM_CUSTOMER
);
},
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'checkbox',
width: 50,
},
{
field: 'nickname',
title: '姓名',
},
{
field: 'deptName',
title: '部门',
},
{
field: 'postNames',
title: '岗位',
},
{
field: 'level',
title: '权限级别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
},
},
{
field: 'createTime',
title: '加入时间',
formatter: 'formatDateTime',
},
];
}

85
apps/web-antd/src/views/crm/permission/modules/permission-form.vue
View File

@ -8,15 +8,10 @@ import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
BizTypeEnum,
createPermission,
PermissionLevelEnum,
updatePermission,
} from '#/api/crm/permission';
import { getSimpleUserList } from '#/api/system/user';
import { createPermission, updatePermission } from '#/api/crm/permission';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils';
import { useFormSchema } from './data';
const emit = defineEmits(['success']);
const formData = ref<CrmPermissionApi.Permission>();
@ -35,74 +30,7 @@ const [Form, formApi] = useVbenForm({
labelWidth: 80,
},
layout: 'horizontal',
schema: [
{
fieldName: 'ids',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'userId',
label: '选择人员',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
labelField: 'nickname',
valueField: 'id',
},
dependencies: {
triggerFields: ['ids'],
show: (values) => {
return values.ids === undefined;
},
},
},
{
fieldName: 'level',
label: '权限级别',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(
DICT_TYPE.CRM_PERMISSION_LEVEL,
'number',
).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
},
rules: 'required',
},
{
fieldName: 'toBizTypes',
label: '同时添加至',
component: 'CheckboxGroup',
componentProps: {
options: [
{
label: '联系人',
value: BizTypeEnum.CRM_CONTACT,
},
{
label: '商机',
value: BizTypeEnum.CRM_BUSINESS,
},
{
label: '合同',
value: BizTypeEnum.CRM_CONTRACT,
},
],
},
dependencies: {
triggerFields: ['ids', 'bizType'],
show: (values) => {
return (
values.ids === undefined &&
formData.value?.bizType === BizTypeEnum.CRM_CUSTOMER
);
},
},
},
],
schema: useFormSchema(),
showDefaultActions: false,
});
@ -114,8 +42,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
let data = (await formApi.getValues()) as CrmPermissionApi.Permission;
data = Object.assign(data, formData.value);
const data = (await formApi.getValues()) as CrmPermissionApi.Permission;
try {
await (formData.value?.ids
? updatePermission(data)
@ -141,7 +68,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
formData.value = {
ids: data.ids || [data.id] || undefined,
ids: data.ids ?? (data.id ? [data.id] : undefined),
userId: undefined,
bizType: data.bizType,
bizId: data.bizId,

67
apps/web-antd/src/views/crm/permission/modules/permission-list.vue
View File

@ -17,12 +17,10 @@ import {
PermissionLevelEnum,
} from '#/api/crm/permission';
import { $t } from '#/locales';
import { DICT_TYPE } from '#/utils';
import { useGridColumns } from './data';
import Form from './permission-form.vue';
defineOptions({ name: 'CrmPermissionList' });
const props = defineProps<{
bizId: number; // 模块数据编号
bizType: number; // 模块类型
@ -50,13 +48,18 @@ function onRefresh() {
gridApi.query();
}
const checkedIds = ref<CrmPermissionApi.Permission[]>([]);
function setCheckedIds({
const checkedRows = ref<CrmPermissionApi.Permission[]>([]);
function setCheckedRows({
records,
}: {
records: CrmPermissionApi.Permission[];
}) {
checkedIds.value = records;
if (records.some((item) => item.level === PermissionLevelEnum.OWNER)) {
message.warning('不能选择负责人！');
gridApi.grid.setAllCheckboxRow(false);
return;
}
checkedRows.value = records;
}
function handleCreate() {
@ -69,11 +72,11 @@ function handleCreate() {
}
function handleEdit() {
if (checkedIds.value.length === 0) {
if (checkedRows.value.length === 0) {
message.error('请先选择团队成员后操作！');
return;
}
if (checkedIds.value.length > 1) {
if (checkedRows.value.length > 1) {
message.error('只能选择一个团队成员进行编辑！');
return;
}
@ -81,29 +84,29 @@ function handleEdit() {
.setData({
bizType: props.bizType,
bizId: props.bizId,
id: checkedIds.value[0]?.id,
level: checkedIds.value[0]?.level,
id: checkedRows.value[0]?.id,
level: checkedRows.value[0]?.level,
})
.open();
}
function handleDelete() {
if (checkedIds.value.length === 0) {
if (checkedRows.value.length === 0) {
message.error('请先选择团队成员后操作！');
return;
}
return new Promise((resolve, reject) => {
confirm({
content: `你要将${checkedIds.value.map((item) => item.nickname).join(',')}移出团队吗？`,
content: `你要将${checkedRows.value.map((item) => item.nickname).join(',')}移出团队吗？`,
})
.then(async () => {
// 更新用户状态
const res = await deletePermissionBatch(
checkedIds.value.map((item) => item.id as number),
checkedRows.value.map((item) => item.id as number),
);
if (res) {
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
resolve(true);
} else {
reject(new Error('移出失败'));
@ -144,37 +147,7 @@ async function handleQuit() {
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: [
{
type: 'checkbox',
width: 50,
},
{
field: 'nickname',
title: '姓名',
},
{
field: 'deptName',
title: '部门',
},
{
field: 'postNames',
title: '岗位',
},
{
field: 'level',
title: '权限级别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
},
},
{
field: 'createTime',
title: '加入时间',
formatter: 'formatDateTime',
},
],
columns: useGridColumns(),
height: 'auto',
pagerConfig: {
enabled: false,
@ -201,8 +174,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<CrmPermissionApi.Permission>,
gridEvents: {
checkboxAll: setCheckedIds,
checkboxChange: setCheckedIds,
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});

88
apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
View File

@ -13,12 +13,10 @@ import { transferClue } from '#/api/crm/clue';
import { transferContact } from '#/api/crm/contact';
import { transferContract } from '#/api/crm/contract';
import { transferCustomer } from '#/api/crm/customer';
import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
import { getSimpleUserList } from '#/api/system/user';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils';
defineOptions({ name: 'CrmTransferForm' });
import { useTransferFormSchema } from './data';
const emit = defineEmits(['success']);
@ -56,87 +54,7 @@ const [Form, formApi] = useVbenForm({
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'ownerUserId',
label: '选择新负责人',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
labelField: 'nickname',
valueField: 'id',
},
rules: 'required',
},
{
fieldName: 'oldOwnerHandler',
label: '老负责人',
component: 'RadioGroup',
componentProps: {
options: [
{
label: '加入团队',
value: true,
},
{
label: '移除',
value: false,
},
],
},
rules: 'required',
},
{
fieldName: 'oldOwnerPermissionLevel',
label: '老负责人权限级别',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(
DICT_TYPE.CRM_PERMISSION_LEVEL,
'number',
).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
},
dependencies: {
triggerFields: ['oldOwnerHandler'],
show: (values) => values.oldOwnerHandler,
trigger(values) {
if (!values.oldOwnerHandler) {
formApi.setFieldValue('oldOwnerPermissionLevel', undefined);
}
},
},
rules: 'required',
},
{
fieldName: 'toBizTypes',
label: '同时转移',
component: 'CheckboxGroup',
componentProps: {
options: [
{
label: '联系人',
value: BizTypeEnum.CRM_CONTACT,
},
{
label: '商机',
value: BizTypeEnum.CRM_BUSINESS,
},
{
label: '合同',
value: BizTypeEnum.CRM_CONTRACT,
},
],
},
},
],
schema: useTransferFormSchema(),
showDefaultActions: false,
});

57
apps/web-antd/src/views/crm/product/data.ts
View File

@ -174,3 +174,60 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 代码生成表格列定义 */
export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'seq', title: '序号', minWidth: 50 },
{
field: 'productId',
title: '产品名称',
minWidth: 100,
slots: { default: 'productId' },
},
{
field: 'productNo',
title: '条码',
minWidth: 150,
},
{
field: 'productUnit',
title: '单位',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
},
},
{
field: 'productPrice',
title: '价格（元）',
minWidth: 100,
formatter: 'formatNumber',
},
{
field: 'sellingPrice',
title: '售价（元）',
minWidth: 100,
slots: { default: 'sellingPrice' },
},
{
field: 'count',
title: '数量',
minWidth: 100,
slots: { default: 'count' },
},
{
field: 'totalPrice',
title: '合计',
minWidth: 100,
formatter: 'formatNumber',
},
{
title: '操作',
width: 80,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

21
apps/web-antd/src/views/crm/product/index.ts Normal file
View File

@ -0,0 +1,21 @@
import { defineAsyncComponent } from 'vue';
export const ProductDetailsInfo = defineAsyncComponent(
() => import('./modules/detail-info.vue'),
);
export const ProductForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const ProductDetails = defineAsyncComponent(
() => import('./modules/detail.vue'),
);
export const ProductDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
);
export const ProductEditTable = defineAsyncComponent(
() => import('./modules/product-table.vue'),
);

116
apps/web-antd/src/views/crm/product/modules/detail-data.ts Normal file
View File

@ -0,0 +1,116 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, erpPriceInputFormatter } from '#/utils';
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'categoryName',
label: '产品类别',
},
{
field: 'unit',
label: '产品单位',
content: (data) =>
h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
},
{
field: 'price',
label: '产品价格',
content: (data) => erpPriceInputFormatter(data.price),
},
{
field: 'no',
label: '产品编码',
},
];
}
/** 详情页的基础字段 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '产品名称',
},
{
field: 'no',
label: '产品编码',
},
{
field: 'price',
label: '价格（元）',
content: (data) => erpPriceInputFormatter(data.price),
},
{
field: 'description',
label: '产品描述',
},
{
field: 'categoryName',
label: '产品类型',
},
{
field: 'status',
label: '是否上下架',
content: (data) =>
h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: data?.status }),
},
{
field: 'unit',
label: '产品单位',
content: (data) =>
h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
},
];
}
/** 详情列表的字段 */
export function useDetailListColumns(
showBussinePrice: boolean,
): VxeTableGridOptions['columns'] {
return [
{
field: 'productName',
title: '产品名称',
},
{
field: 'productNo',
title: '产品条码',
},
{
field: 'productUnit',
title: '产品单位',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
},
},
{
field: 'productPrice',
title: '产品价格（元）',
formatter: 'formatNumber',
},
{
field: 'businessPrice',
title: '商机价格（元）',
formatter: 'formatNumber',
visible: showBussinePrice,
},
{
field: 'count',
title: '数量',
formatter: 'formatNumber',
},
{
field: 'totalPrice',
title: '合计金额（元）',
formatter: 'formatNumber',
},
];
}

27
apps/web-antd/src/views/crm/product/modules/detail-info.vue
View File

@ -1,4 +1,27 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmProductApi } from '#/api/crm/product';
import { useDescription } from '#/components/description';
import { useDetailBaseSchema } from './detail-data';
defineProps<{
product: CrmProductApi.Product; // 产品信息
}>();
const [ProductDescription] = useDescription({
componentProps: {
title: '基本信息',
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailBaseSchema(),
});
</script>
<template>
<div>productInfo</div>
<div class="p-4">
<ProductDescription :data="product" />
</div>
</template>

72
apps/web-antd/src/views/crm/product/modules/detail-list.vue
View File

@ -1,4 +1,72 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmProductApi } from '#/api/crm/product';
import { ref } from 'vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBusiness } from '#/api/crm/business';
import { getContract } from '#/api/crm/contract';
import { BizTypeEnum } from '#/api/crm/permission';
import { erpPriceInputFormatter } from '#/utils';
import { useDetailListColumns } from './detail-data';
const props = defineProps<{
bizId: number;
bizType: BizTypeEnum;
}>();
const discountPercent = ref(0);
const totalProductPrice = ref(0);
const [Grid] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
height: 600,
pagerConfig: {
enabled: false,
},
proxyConfig: {
ajax: {
query: async (_params) => {
const data =
props.bizType === BizTypeEnum.CRM_BUSINESS
? await getBusiness(props.bizId)
: await getContract(props.bizId);
discountPercent.value = data.discountPercent;
totalProductPrice.value = data.totalProductPrice;
return data.products;
},
},
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
keepSource: true,
rowConfig: {
keyField: 'id',
},
} as VxeTableGridOptions<CrmProductApi.Product>,
});
</script>
<template>
<div>productList</div>
<div>
<Grid />
<div class="flex flex-col items-end justify-end">
<span class="ml-4 font-bold text-red-500">
{{ `产品总金额：${erpPriceInputFormatter(totalProductPrice)}元` }}
</span>
<span class="font-bold text-red-500">
{{ `整单折扣：${erpPriceInputFormatter(discountPercent)}%` }}
</span>
<span class="font-bold text-red-500">
{{
`实际金额：${erpPriceInputFormatter(totalProductPrice * (1 - discountPercent / 100))}元`
}}
</span>
</div>
</div>
</template>

90
apps/web-antd/src/views/crm/product/modules/detail.vue
View File

@ -1,7 +1,89 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmProductApi } from '#/api/crm/product';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Button, Card, Tabs } from 'ant-design-vue';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { getProduct } from '#/api/crm/product';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { ProductDetailsInfo } from '#/views/crm/product';
import { useDetailSchema } from './detail-data';
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const productId = ref(0);
const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
/** 加载详情 */
async function loadProductDetail() {
loading.value = true;
const data = await getProduct(productId.value);
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_PRODUCT,
bizId: productId.value,
});
productLogList.value = logList.list;
product.value = data;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/product');
}
// 加载数据
onMounted(() => {
productId.value = Number(route.params.id);
loadProductDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page auto-content-height :title="product?.name" :loading="loading">
<template #extra>
<div class="flex items-center gap-2">
<Button @click="handleBack"> 返回 </Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="product" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ProductDetailsInfo :product="product" />
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="2" :force-render="true">
<AsyncOperateLog :log-list="productLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

183
apps/web-antd/src/views/crm/product/modules/product-table.vue Normal file
View File

@ -0,0 +1,183 @@
<script lang="ts" setup>
import type { CrmBusinessApi } from '#/api/crm/business';
import type { CrmContractApi } from '#/api/crm/contract';
import type { CrmProductApi } from '#/api/crm/product';
import { nextTick, onMounted, ref, watch } from 'vue';
import { InputNumber, Select } from 'ant-design-vue';
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { BizTypeEnum } from '#/api/crm/permission';
import { getProductSimpleList } from '#/api/crm/product';
import { erpPriceMultiply } from '#/utils';
import { useProductEditTableColumns } from '../data';
const props = defineProps<{
bizType: BizTypeEnum;
products?:
| CrmBusinessApi.BusinessProduct[]
| CrmContractApi.ContractProduct[];
}>();
const emit = defineEmits(['update:products']);
const tableData = ref<any[]>([]);
function handleAdd() {
gridApi.grid.insertAt(null, -1);
}
function handleDelete(row: CrmProductApi.Product) {
gridApi.grid.remove(row);
}
function handleProductChange(productId: any, row: any) {
const product = productOptions.value.find((p) => p.id === productId);
if (!product) {
return;
}
row.productUnit = product.unit;
row.productNo = product.no;
row.productPrice = product.price;
row.sellingPrice = product.price;
row.count = 0;
row.totalPrice = 0;
handleUpdateValue(row);
}
function handlePriceChange(row: any) {
row.totalPrice = erpPriceMultiply(row.sellingPrice, row.count) ?? 0;
handleUpdateValue(row);
}
function handleUpdateValue(row: any) {
const index = tableData.value.findIndex((item) => item.id === row.id);
if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
row.businessPrice = row.sellingPrice;
} else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
row.contractPrice = row.sellingPrice;
}
if (index === -1) {
row.id = tableData.value.length + 1;
tableData.value.push(row);
} else {
tableData.value[index] = row;
}
emit('update:products', tableData.value);
}
/** 表格配置 */
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
editConfig: {
trigger: 'click',
mode: 'cell',
},
columns: useProductEditTableColumns(),
data: tableData.value,
border: true,
showOverflow: true,
autoResize: true,
keepSource: true,
rowConfig: {
keyField: 'id',
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
},
});
/** 监听外部传入的列数据 */
watch(
() => props.products,
async (products) => {
if (!products) {
return;
}
await nextTick();
tableData.value = products;
if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
tableData.value.forEach((item) => {
item.sellingPrice = item.businessPrice;
});
} else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
tableData.value.forEach((item) => {
item.sellingPrice = item.contractPrice;
});
}
gridApi.grid?.loadData(tableData.value);
},
{
immediate: true,
},
);
/** 初始化 */
const productOptions = ref<CrmProductApi.Product[]>([]);
onMounted(async () => {
productOptions.value = await getProductSimpleList();
});
</script>
<template>
<Grid class="w-full">
<template #productId="{ row }">
<Select
v-model:value="row.productId"
:options="productOptions"
:field-names="{ label: 'name', value: 'id' }"
style="width: 100%"
@change="handleProductChange($event, row)"
/>
</template>
<template #sellingPrice="{ row }">
<InputNumber
v-model:value="row.sellingPrice"
:min="0.001"
:precision="2"
@change="handlePriceChange(row)"
/>
</template>
<template #count="{ row }">
<InputNumber
v-model:value="row.count"
:min="0.001"
:precision="3"
@change="handlePriceChange(row)"
/>
</template>
<template #bottom>
<TableAction
class="mt-4 flex justify-center"
:actions="[
{
label: '添加产品',
type: 'default',
onClick: handleAdd,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.delete'),
type: 'link',
danger: true,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</template>

29
apps/web-antd/src/views/crm/receivable/index.ts Normal file
View File

@ -0,0 +1,29 @@
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'),
);
export const ReceivablePlanDetailsInfo = defineAsyncComponent(
() => import('./plan/modules/detail-info.vue'),
);
export const ReceivablePlanDetailsList = defineAsyncComponent(
() => import('./plan/modules/detail-list.vue'),
);
export const ReceivablePlanDetails = defineAsyncComponent(
() => import('./plan/modules/detail.vue'),
);

150
apps/web-antd/src/views/crm/receivable/modules/detail-data.ts Normal file
View File

@ -0,0 +1,150 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, erpPriceInputFormatter } from '#/utils';
/** 详情页的字段 */
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.no',
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: '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' },
},
];
}

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

@ -1,4 +1,42 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmReceivableApi } from '#/api/crm/receivable';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
defineProps<{
receivable: CrmReceivableApi.Receivable; // 收款信息
}>();
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>receivableInfo</div>
<div class="p-4">
<BaseDescription :data="receivable" />
<Divider />
<SystemDescription :data="receivable" />
</div>
</template>

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

@ -1,4 +1,140 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmReceivableApi } from '#/api/crm/receivable';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteReceivable,
getReceivablePageByCustomer,
} from '#/api/crm/receivable';
import { $t } from '#/locales';
import { useDetailListColumns } from './detail-data';
import Form from './form.vue';
const props = defineProps<{
contractId?: number; // 合同编号
customerId?: number; // 客户编号
}>();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建回款 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑回款 */
function handleEdit(row: CrmReceivableApi.Receivable) {
formModalApi.setData({ receivable: row }).open();
}
/** 删除回款 */
async function handleDelete(row: CrmReceivableApi.Receivable) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.no]),
key: 'action_key_msg',
});
try {
await deleteReceivable(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.no]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
height: 500,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }) => {
const queryParams: CrmReceivableApi.ReceivablePageParam = {
pageNo: page.currentPage,
pageSize: page.pageSize,
};
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 getReceivablePageByCustomer(queryParams);
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmReceivableApi.Receivable>,
});
</script>
<template>
<div>receivableList</div>
<div>
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['回款']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:receivable:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['crm:receivable:update'],
onClick: handleEdit.bind(null, row),
ifShow: row.auditStatus === 0,
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['crm:receivable:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.no]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</div>
</template>

131
apps/web-antd/src/views/crm/receivable/modules/detail.vue
View File

@ -1,7 +1,130 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmReceivableApi } from '#/api/crm/receivable';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { computed, 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 { 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';
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const receivableId = ref(0);
const receivable = ref<CrmReceivableApi.Receivable>(
{} as CrmReceivableApi.Receivable,
);
const receivableLogList = 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: ReceivableForm,
destroyOnClose: true,
});
/** 加载线索详情 */
async function loadReceivableDetail() {
loading.value = true;
const data = await getReceivable(receivableId.value);
receivable.value = data;
// 操作日志
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_RECEIVABLE,
bizId: receivableId.value,
});
receivableLogList.value = logList.list;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/receivable');
}
/** 编辑收款 */
function handleEdit() {
formModalApi.setData({ id: receivableId.value }).open();
}
// 加载数据
onMounted(() => {
receivableId.value = Number(route.params.id);
loadReceivableDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page auto-content-height :title="receivable?.no" :loading="loading">
<FormModal @success="loadReceivableDetail" />
<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:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="receivable" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ReceivableDetailsInfo :receivable="receivable" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="2" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="receivableId"
:biz-type="BizTypeEnum.CRM_RECEIVABLE"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="3" :force-render="true">
<AsyncOperateLog :log-list="receivableLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

2
apps/web-antd/src/views/crm/receivable/modules/form.vue
View File

@ -64,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<CrmReceivableApi.Receivable>();
const data = modalApi.getData();
if (!data) {
return;
}

12
apps/web-antd/src/views/crm/receivable/plan/index.vue
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) {

141
apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts Normal file
View File

@ -0,0 +1,141 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, erpPriceInputFormatter } from '#/utils';
/** 详情页的字段 */
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: 'customerName',
minWidth: 150,
},
{
title: '合同编号',
field: 'contractNo',
minWidth: 150,
},
{
title: '期数',
field: 'period',
minWidth: 150,
},
{
title: '计划回款(元)',
field: 'price',
minWidth: 150,
formatter: 'formatNumber',
},
{
title: '计划回款日期',
field: 'returnTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '提前几天提醒',
field: 'remindDays',
minWidth: 150,
},
{
title: '提醒日期',
field: 'remindTime',
minWidth: 150,
formatter: 'formatDateTime',
},
{
title: '负责人',
field: 'ownerUserName',
minWidth: 150,
},
{
title: '备注',
field: 'remark',
minWidth: 150,
},
{
title: '操作',
field: 'actions',
width: 240,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

42
apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
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 './detail-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>

Some files were not shown because too many files have changed in this diff Show More