diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index 7afff14f0fbdd65449df05e94697887851e18a4e..f2816cb13e27a72b4224819ea747b531960472f6 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -24,6 +24,7 @@ import { ImagePreviewGroup, Popconfirm, Switch, + Tag, } from 'ant-design-vue'; import { DictTag } from '#/components/dict-tag'; @@ -113,6 +114,35 @@ setupVbenVxeTable({ }, }); + // 表格配置项可以用 cellRender: { name: 'CellTag' }, + vxeUI.renderer.add('CellTag', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + return h(Tag, { color: props?.color }, () => row[column.field]); + }, + }); + + vxeUI.renderer.add('CellTags', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + if (!row[column.field] || row[column.field].length === 0) { + return ''; + } + return h( + 'div', + { class: 'flex items-center justify-center' }, + { + default: () => + row[column.field].map((item: any) => + h(Tag, { color: props?.color }, { default: () => item }), + ), + }, + ); + }, + }); + // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} }, vxeUI.renderer.add('CellDict', { renderTableDefault(renderOpts, params) { diff --git a/apps/web-antd/src/api/crm/statistics/customer.ts b/apps/web-antd/src/api/crm/statistics/customer.ts index e661ba81c9932b42d9c1da1892c7a71ba0295357..cfc47e6bd080d3f087c7ed80d0c51e57e6d0a304 100644 --- a/apps/web-antd/src/api/crm/statistics/customer.ts +++ b/apps/web-antd/src/api/crm/statistics/customer.ts @@ -1,5 +1,3 @@ -import type { PageParam } from '@vben/request'; - import { requestClient } from '#/api/request'; export namespace CrmStatisticsCustomerApi { @@ -93,10 +91,84 @@ export namespace CrmStatisticsCustomerApi { customerDealCycle: number; customerDealCount: number; } + + export interface CustomerSummaryParams { + times: string[]; + interval: number; + deptId: number; + userId: number; + userIds: number[]; + } +} + +export function getDatas(activeTabName: any, params: any) { + switch (activeTabName) { + case 'conversionStat': { + return getContractSummary(params); + } + case 'customerSummary': { + return getCustomerSummaryByUser(params); + } + case 'dealCycleByArea': { + return getCustomerDealCycleByArea(params); + } + case 'dealCycleByProduct': { + return getCustomerDealCycleByProduct(params); + } + case 'dealCycleByUser': { + return getCustomerDealCycleByUser(params); + } + case 'followUpSummary': { + return getFollowUpSummaryByUser(params); + } + case 'followUpType': { + return getFollowUpSummaryByType(params); + } + case 'poolSummary': { + return getPoolSummaryByUser(params); + } + default: { + return []; + } + } +} + +export function getChartDatas(activeTabName: any, params: any) { + switch (activeTabName) { + case 'conversionStat': { + return getCustomerSummaryByDate(params); + } + case 'customerSummary': { + return getCustomerSummaryByDate(params); + } + case 'dealCycleByArea': { + return getCustomerDealCycleByArea(params); + } + case 'dealCycleByProduct': { + return getCustomerDealCycleByProduct(params); + } + case 'dealCycleByUser': { + return getCustomerDealCycleByUser(params); + } + case 'followUpSummary': { + return getFollowUpSummaryByDate(params); + } + case 'followUpType': { + return getFollowUpSummaryByType(params); + } + case 'poolSummary': { + return getPoolSummaryByDate(params); + } + default: { + return []; + } + } } /** 客户总量分析(按日期) */ -export function getCustomerSummaryByDate(params: PageParam) { +export function getCustomerSummaryByDate( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-customer-summary-by-date', { params }, @@ -104,7 +176,9 @@ export function getCustomerSummaryByDate(params: PageParam) { } /** 客户总量分析(按用户) */ -export function getCustomerSummaryByUser(params: PageParam) { +export function getCustomerSummaryByUser( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-customer-summary-by-user', { params }, @@ -112,7 +186,9 @@ export function getCustomerSummaryByUser(params: PageParam) { } /** 客户跟进次数分析(按日期) */ -export function getFollowUpSummaryByDate(params: PageParam) { +export function getFollowUpSummaryByDate( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-follow-up-summary-by-date', { params }, @@ -120,7 +196,9 @@ export function getFollowUpSummaryByDate(params: PageParam) { } /** 客户跟进次数分析(按用户) */ -export function getFollowUpSummaryByUser(params: PageParam) { +export function getFollowUpSummaryByUser( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-follow-up-summary-by-user', { params }, @@ -128,7 +206,9 @@ export function getFollowUpSummaryByUser(params: PageParam) { } /** 获取客户跟进方式统计数 */ -export function getFollowUpSummaryByType(params: PageParam) { +export function getFollowUpSummaryByType( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-follow-up-summary-by-type', { params }, @@ -136,7 +216,9 @@ export function getFollowUpSummaryByType(params: PageParam) { } /** 合同摘要信息(客户转化率页面) */ -export function getContractSummary(params: PageParam) { +export function getContractSummary( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-contract-summary', { params }, @@ -144,7 +226,9 @@ export function getContractSummary(params: PageParam) { } /** 获取客户公海分析(按日期) */ -export function getPoolSummaryByDate(params: PageParam) { +export function getPoolSummaryByDate( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-pool-summary-by-date', { params }, @@ -152,7 +236,9 @@ export function getPoolSummaryByDate(params: PageParam) { } /** 获取客户公海分析(按用户) */ -export function getPoolSummaryByUser(params: PageParam) { +export function getPoolSummaryByUser( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-pool-summary-by-user', { params }, @@ -160,7 +246,9 @@ export function getPoolSummaryByUser(params: PageParam) { } /** 获取客户成交周期(按日期) */ -export function getCustomerDealCycleByDate(params: PageParam) { +export function getCustomerDealCycleByDate( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-customer-deal-cycle-by-date', { params }, @@ -168,7 +256,9 @@ export function getCustomerDealCycleByDate(params: PageParam) { } /** 获取客户成交周期(按用户) */ -export function getCustomerDealCycleByUser(params: PageParam) { +export function getCustomerDealCycleByUser( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-customer-deal-cycle-by-user', { params }, @@ -176,7 +266,9 @@ export function getCustomerDealCycleByUser(params: PageParam) { } /** 获取客户成交周期(按地区) */ -export function getCustomerDealCycleByArea(params: PageParam) { +export function getCustomerDealCycleByArea( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get( '/crm/statistics-customer/get-customer-deal-cycle-by-area', { params }, @@ -184,7 +276,9 @@ export function getCustomerDealCycleByArea(params: PageParam) { } /** 获取客户成交周期(按产品) */ -export function getCustomerDealCycleByProduct(params: PageParam) { +export function getCustomerDealCycleByProduct( + params: CrmStatisticsCustomerApi.CustomerSummaryParams, +) { return requestClient.get< CrmStatisticsCustomerApi.CustomerDealCycleByProduct[] >('/crm/statistics-customer/get-customer-deal-cycle-by-product', { params }); diff --git a/apps/web-antd/src/api/crm/statistics/funnel.ts b/apps/web-antd/src/api/crm/statistics/funnel.ts index a4948e60b531ab38a09f1a98f205e7918a2a6635..8e023d1b786f4043e3ba6e10afd7fd413f04afb6 100644 --- a/apps/web-antd/src/api/crm/statistics/funnel.ts +++ b/apps/web-antd/src/api/crm/statistics/funnel.ts @@ -1,4 +1,4 @@ -import type { PageParam, PageResult } from '@vben/request'; +import type { PageResult } from '@vben/request'; import { requestClient } from '#/api/request'; @@ -25,8 +25,42 @@ export namespace CrmStatisticsFunnelApi { } } +export function getDatas(activeTabName: any, params: any) { + switch (activeTabName) { + case 'businessInversionRateSummary': { + return getBusinessPageByDate(params); + } + case 'businessSummary': { + return getBusinessPageByDate(params); + } + case 'funnel': { + return getBusinessSummaryByEndStatus(params); + } + default: { + return []; + } + } +} + +export function getChartDatas(activeTabName: any, params: any) { + switch (activeTabName) { + case 'businessInversionRateSummary': { + return getBusinessInversionRateSummaryByDate(params); + } + case 'businessSummary': { + return getBusinessSummaryByDate(params); + } + case 'funnel': { + return getFunnelSummary(params); + } + default: { + return []; + } + } +} + /** 获取销售漏斗统计数据 */ -export function getFunnelSummary(params: PageParam) { +export function getFunnelSummary(params: any) { return requestClient.get( '/crm/statistics-funnel/get-funnel-summary', { params }, @@ -34,7 +68,7 @@ export function getFunnelSummary(params: PageParam) { } /** 获取商机结束状态统计 */ -export function getBusinessSummaryByEndStatus(params: PageParam) { +export function getBusinessSummaryByEndStatus(params: any) { return requestClient.get>( '/crm/statistics-funnel/get-business-summary-by-end-status', { params }, @@ -42,7 +76,7 @@ export function getBusinessSummaryByEndStatus(params: PageParam) { } /** 获取新增商机分析(按日期) */ -export function getBusinessSummaryByDate(params: PageParam) { +export function getBusinessSummaryByDate(params: any) { return requestClient.get( '/crm/statistics-funnel/get-business-summary-by-date', { params }, @@ -50,7 +84,7 @@ export function getBusinessSummaryByDate(params: PageParam) { } /** 获取商机转化率分析(按日期) */ -export function getBusinessInversionRateSummaryByDate(params: PageParam) { +export function getBusinessInversionRateSummaryByDate(params: any) { return requestClient.get< CrmStatisticsFunnelApi.BusinessInversionRateSummaryByDate[] >('/crm/statistics-funnel/get-business-inversion-rate-summary-by-date', { @@ -59,7 +93,7 @@ export function getBusinessInversionRateSummaryByDate(params: PageParam) { } /** 获取商机列表(按日期) */ -export function getBusinessPageByDate(params: PageParam) { +export function getBusinessPageByDate(params: any) { return requestClient.get>( '/crm/statistics-funnel/get-business-page-by-date', { params }, diff --git a/apps/web-antd/src/api/crm/statistics/performance.ts b/apps/web-antd/src/api/crm/statistics/performance.ts index ab3451250aab2b3695b94b6685531f3bb1668152..2bfcdd57aa864a35d7d445e9007e8e1639e65333 100644 --- a/apps/web-antd/src/api/crm/statistics/performance.ts +++ b/apps/web-antd/src/api/crm/statistics/performance.ts @@ -1,5 +1,3 @@ -import type { PageParam } from '@vben/request'; - import { requestClient } from '#/api/request'; export namespace CrmStatisticsPerformanceApi { @@ -10,10 +8,17 @@ export namespace CrmStatisticsPerformanceApi { lastMonthCount: number; lastYearCount: number; } + export interface PerformanceParams { + times: string[]; + deptId: number; + userId: number; + } } /** 员工获得合同金额统计 */ -export function getContractPricePerformance(params: PageParam) { +export function getContractPricePerformance( + params: CrmStatisticsPerformanceApi.PerformanceParams, +) { return requestClient.get( '/crm/statistics-performance/get-contract-price-performance', { params }, @@ -21,7 +26,9 @@ export function getContractPricePerformance(params: PageParam) { } /** 员工获得回款统计 */ -export function getReceivablePricePerformance(params: PageParam) { +export function getReceivablePricePerformance( + params: CrmStatisticsPerformanceApi.PerformanceParams, +) { return requestClient.get( '/crm/statistics-performance/get-receivable-price-performance', { params }, @@ -29,7 +36,9 @@ export function getReceivablePricePerformance(params: PageParam) { } /** 员工获得签约合同数量统计 */ -export function getContractCountPerformance(params: PageParam) { +export function getContractCountPerformance( + params: CrmStatisticsPerformanceApi.PerformanceParams, +) { return requestClient.get( '/crm/statistics-performance/get-contract-count-performance', { params }, diff --git a/apps/web-antd/src/api/crm/statistics/portrait.ts b/apps/web-antd/src/api/crm/statistics/portrait.ts index 88ff518deb8b2e06c64c3e17bb726af04f920f75..ecbe9c9dc4170041eb6d86193e18d15bcde7567f 100644 --- a/apps/web-antd/src/api/crm/statistics/portrait.ts +++ b/apps/web-antd/src/api/crm/statistics/portrait.ts @@ -36,6 +36,26 @@ export namespace CrmStatisticsPortraitApi { } } +export function getDatas(activeTabName: any, params: any) { + switch (activeTabName) { + case 'area': { + return getCustomerArea(params); + } + case 'industry': { + return getCustomerIndustry(params); + } + case 'level': { + return getCustomerLevel(params); + } + case 'source': { + return getCustomerSource(params); + } + default: { + return []; + } + } +} + /** 获取客户行业统计数据 */ export function getCustomerIndustry(params: PageParam) { return requestClient.get( diff --git a/apps/web-antd/src/api/crm/statistics/rank.ts b/apps/web-antd/src/api/crm/statistics/rank.ts index f5fcfb16728ec3de38dd611871d763ebaf76ed94..216696c87422ae71256ea819108a0e7aa9395222 100644 --- a/apps/web-antd/src/api/crm/statistics/rank.ts +++ b/apps/web-antd/src/api/crm/statistics/rank.ts @@ -11,6 +11,38 @@ export namespace CrmStatisticsRankApi { } } +export function getDatas(activeTabName: any, params: any) { + switch (activeTabName) { + case 'contactCountRank': { + return getContactsCountRank(params); + } + case 'contractCountRank': { + return getContractCountRank(params); + } + case 'contractPriceRank': { + return getContractPriceRank(params); + } + case 'customerCountRank': { + return getCustomerCountRank(params); + } + case 'followCountRank': { + return getFollowCountRank(params); + } + case 'followCustomerCountRank': { + return getFollowCustomerCountRank(params); + } + case 'productSalesRank': { + return getProductSalesRank(params); + } + case 'receivablePriceRank': { + return getReceivablePriceRank(params); + } + default: { + return []; + } + } +} + /** 获得合同排行榜 */ export function getContractPriceRank(params: PageParam) { return requestClient.get( diff --git a/apps/web-antd/src/components/form-create/rules/data.ts b/apps/web-antd/src/components/form-create/rules/data.ts index 2c6cee2ce2bbd68e20cf87ef5bc84384a8c9324c..3d34bf7af3f9d6495514292a6779d1450508514e 100644 --- a/apps/web-antd/src/components/form-create/rules/data.ts +++ b/apps/web-antd/src/components/form-create/rules/data.ts @@ -121,7 +121,7 @@ const apiSelectRule = [ field: 'data', title: '请求参数 JSON 格式', props: { - autosize: true, + autoSize: true, type: 'textarea', placeholder: '{"type": 1}', }, @@ -155,7 +155,7 @@ const apiSelectRule = [ info: `data 为接口返回值,需要写一个匿名函数解析返回值为选择器 options 列表 (data: any)=>{ label: string; value: any }[]`, props: { - autosize: true, + autoSize: true, rows: { minRows: 2, maxRows: 6 }, type: 'textarea', placeholder: ` diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue index dc8d6a86238965c8885e7d919e6efae33b43645c..6e82fc266c4cc6e2b2785d2257e7fea3d922b4d2 100644 --- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue +++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue @@ -63,6 +63,7 @@ const [Modal, modalApi] = useVbenModal({ }); // TODO xingyu 暴露 modalApi 给父组件是否合适? trigger-node-config.vue 会有多个 conditionDialog 实例 +// 不用暴露啊,用 useVbenModal 就可以了 defineExpose({ modalApi }); diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts new file mode 100644 index 0000000000000000000000000000000000000000..b9f58027d18a51a155587544eef5cddbed74a76d --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts @@ -0,0 +1,56 @@ +import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; + +import { DICT_TYPE } from '#/utils'; + +/** 流程实例列表字段 */ +export function useGridColumns(): VxeTableGridOptions['columns'] { + return [ + { + field: 'startUser', + title: '发起人', + slots: { + default: ({ row }: { row: any }) => { + return row.startUser?.nickname; + }, + }, + minWidth: 100, + }, + { + field: 'deptName', + title: '部门', + slots: { + default: ({ row }: { row: any }) => { + return row.startUser?.deptName; + }, + }, + minWidth: 100, + }, + { + field: 'createTime', + title: '开始时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'endTime', + title: '结束时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'status', + title: '流程状态', + minWidth: 90, + cellRender: { + name: 'CellDict', + props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS }, + }, + }, + { + field: 'durationInMillis', + title: '耗时', + minWidth: 100, + formatter: 'formatPast2', + }, + ]; +} diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue new file mode 100644 index 0000000000000000000000000000000000000000..e9ddbf34b91d6e322971ad2b761b094193cdaed7 --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue @@ -0,0 +1,44 @@ + + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts new file mode 100644 index 0000000000000000000000000000000000000000..124ec61426e7c08b08e31b9562e4ff3078184399 --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts @@ -0,0 +1,61 @@ +import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; + +import { DICT_TYPE } from '#/utils'; + +/** 审批记录列表字段 */ +export function useGridColumns(): VxeTableGridOptions['columns'] { + return [ + { + field: 'assigneeUser', + title: '审批人', + slots: { + default: ({ row }: { row: any }) => { + return row.assigneeUser?.nickname || row.ownerUser?.nickname; + }, + }, + minWidth: 100, + }, + { + field: 'deptName', + title: '部门', + slots: { + default: ({ row }: { row: any }) => { + return row.assigneeUser?.deptName || row.ownerUser?.deptName; + }, + }, + minWidth: 100, + }, + { + field: 'createTime', + title: '开始时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'endTime', + title: '结束时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'status', + title: '审批状态', + minWidth: 90, + cellRender: { + name: 'CellDict', + props: { type: DICT_TYPE.BPM_TASK_STATUS }, + }, + }, + { + field: 'reason', + title: '审批建议', + minWidth: 160, + }, + { + field: 'durationInMillis', + title: '耗时', + minWidth: 100, + formatter: 'formatPast2', + }, + ]; +} diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue new file mode 100644 index 0000000000000000000000000000000000000000..a5e7e40e74b9efee0e5fbe298b79cbc3bae4a631 --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue @@ -0,0 +1,47 @@ + + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue index 74fffa99278555ae142162ab3681e4498816ff5b..c6acbe0ecbd09ab601d7b71f5078621f43b2c45b 100644 --- a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue @@ -6,6 +6,7 @@ import type { SimpleFlowNode } from '../../consts'; import { inject, ref } from 'vue'; +import { useVbenModal } from '@vben/common-ui'; import { IconifyIcon } from '@vben/icons'; import { Input } from 'ant-design-vue'; @@ -15,6 +16,7 @@ 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 TaskListModal from './modules/task-list-modal.vue'; import NodeHandler from './node-handler.vue'; defineOptions({ name: 'StartUserNode' }); @@ -27,7 +29,6 @@ const props = defineProps({ }); // 定义事件,更新父组件。 -// const emits = defineEmits<{ defineEmits<{ 'update:modelValue': [node: SimpleFlowNode | undefined]; }>(); @@ -44,24 +45,25 @@ const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2( const nodeSetting = ref(); -// 任务的弹窗显示,用于只读模式 -const selectTasks = ref([]); // 选中的任务数组 - +const [Modal, modalApi] = useVbenModal({ + connectedComponent: TaskListModal, + destroyOnClose: true, +}); function nodeClick() { if (readonly) { // 只读模式,弹窗显示任务信息 if (tasks && tasks.value) { - console.warn( - 'TODO 只读模式,弹窗显示任务信息', - tasks.value, - selectTasks.value, + // 过滤出当前节点的任务 + const nodeTasks = tasks.value.filter( + (task) => task.taskDefinitionKey === currentNode.value.id, ); + // 弹窗显示任务信息 + modalApi + .setData(nodeTasks) + .setState({ title: currentNode.value.name }) + .open(); } } else { - console.warn( - 'TODO 编辑模式,打开节点配置、把当前节点传递给配置组件', - nodeSetting.value, - ); nodeSetting.value.showStartUserNodeConfig(currentNode.value); } } @@ -122,5 +124,6 @@ function nodeClick() { ref="nodeSetting" :flow-node="currentNode" /> - + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue index 3acb853cacbac24f2badd835bc2f8a83bdc43750..9f7ee6bf1eccd5ce2fa5439493d2a26c54236364 100644 --- a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue @@ -5,6 +5,7 @@ import type { SimpleFlowNode } from '../../consts'; import { inject, ref } from 'vue'; +import { useVbenModal } from '@vben/common-ui'; import { IconifyIcon } from '@vben/icons'; import { Input } from 'ant-design-vue'; @@ -14,6 +15,26 @@ 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 TaskListModal from './modules/task-list-modal.vue'; +// // 使用useVbenVxeGrid +// const [Grid, gridApi] = useVbenVxeGrid({ +// gridOptions: { +// columns: columns.value, +// keepSource: true, +// border: true, +// height: 'auto', +// data: selectTasks.value, +// rowConfig: { +// keyField: 'id', +// }, +// pagerConfig: { +// enabled: false, +// }, +// toolbarConfig: { +// enabled: false, +// }, +// } as VxeTableGridOptions, +// }); import NodeHandler from './node-handler.vue'; defineOptions({ name: 'UserTaskNode' }); @@ -42,11 +63,23 @@ const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2( ); const nodeSetting = ref(); +const [Modal, modalApi] = useVbenModal({ + connectedComponent: TaskListModal, + destroyOnClose: true, +}); + function nodeClick() { if (readonly) { if (tasks && tasks.value) { - // 只读模式,弹窗显示任务信息 TODO 待实现 - console.warn('只读模式,弹窗显示任务信息待实现'); + // 过滤出当前节点的任务 + const nodeTasks = tasks.value.filter( + (task) => task.taskDefinitionKey === currentNode.value.id, + ); + // 弹窗显示任务信息 + modalApi + .setData(nodeTasks) + .setState({ title: currentNode.value.name }) + .open(); } } else { // 编辑模式,打开节点配置、把当前节点传递给配置组件 @@ -64,8 +97,6 @@ function findReturnTaskNodes( // 从父节点查找 emits('findParentNode', matchNodeList, BpmNodeTypeEnum.USER_TASK_NODE); } - -// const selectTasks = ref([]); // 选中的任务数组 diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue index dc2be9d056f79ad2d64d055b0f1cb73e0d7975b7..4beb99b3d9020dacbf52ef2e1107caf50e59d98b 100644 --- a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue +++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue @@ -249,7 +249,7 @@ onMounted(() => { /> - + +import type { SimpleFlowNode } from '../consts'; + +import { provide, ref, watch } from 'vue'; + +import { useWatchNode } from '../helpers'; +import SimpleProcessModel from './simple-process-model.vue'; + +defineOptions({ name: 'SimpleProcessViewer' }); + +const props = withDefaults( + defineProps<{ + flowNode: SimpleFlowNode; + // 流程实例 + processInstance?: any; + // 流程任务 + tasks?: any[]; + }>(), + { + processInstance: undefined, + tasks: () => [] as any[], + }, +); +const approveTasks = ref(props.tasks); +const currentProcessInstance = ref(props.processInstance); +const simpleModel = useWatchNode(props); +watch( + () => props.tasks, + (newValue) => { + approveTasks.value = newValue; + }, +); +watch( + () => props.processInstance, + (newValue) => { + currentProcessInstance.value = newValue; + }, +); +// 提供给后代组件使用 +provide('tasks', approveTasks); +provide('processInstance', currentProcessInstance); + + diff --git a/apps/web-antd/src/components/simple-process-design/index.ts b/apps/web-antd/src/components/simple-process-design/index.ts index ff79ef8cf48b8e4affd673fa1ab67c5a741cfd6e..41269eae8c6ed607dfb1005c6d90d68475c1437f 100644 --- a/apps/web-antd/src/components/simple-process-design/index.ts +++ b/apps/web-antd/src/components/simple-process-design/index.ts @@ -4,4 +4,8 @@ export { default as HttpRequestSetting } from './components/nodes-config/modules export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue'; +export { default as SimpleProcessViewer } from './components/simple-process-viewer.vue'; + +export type { SimpleFlowNode } from './consts'; + export { parseFormFields } from './helpers'; diff --git a/apps/web-antd/src/components/table-action/table-action.vue b/apps/web-antd/src/components/table-action/table-action.vue index 88e47d356f18c8615e08f1e20a79d69aa0a9f3a8..94824eff51017417eaf57dbf6e5905b2f98605d6 100644 --- a/apps/web-antd/src/components/table-action/table-action.vue +++ b/apps/web-antd/src/components/table-action/table-action.vue @@ -41,13 +41,13 @@ const props = defineProps({ const { hasAccessByCodes } = useAccess(); -/** 缓存处理后的actions */ +/** 缓存处理后的 actions */ const processedActions = ref([]); const processedDropdownActions = ref([]); /** 用于比较的字符串化版本 */ -const actionsStringified = ref(''); -const dropdownActionsStringified = ref(''); +const actionsStringField = ref(''); +const dropdownActionsStringField = ref(''); function isIfShow(action: ActionItem): boolean { const ifShow = action.ifShow; @@ -65,7 +65,7 @@ function isIfShow(action: ActionItem): boolean { return isIfShow; } -/** 处理actions的纯函数 */ +/** 处理 actions 的纯函数 */ function processActions(actions: ActionItem[]): any[] { return actions .filter((action: ActionItem) => { @@ -84,7 +84,7 @@ function processActions(actions: ActionItem[]): any[] { }); } -/** 处理下拉菜单actions的纯函数 */ +/** 处理下拉菜单 actions 的纯函数 */ function processDropdownActions( dropDownActions: ActionItem[], divider: boolean, @@ -108,10 +108,10 @@ function processDropdownActions( }); } -/** 监听actions变化并更新缓存 */ +/** 监听 actions 变化并更新缓存 */ watchEffect(() => { const rawActions = toRaw(props.actions) || []; - const currentStringified = JSON.stringify( + const currentStringField = JSON.stringify( rawActions.map((a) => ({ ...a, onClick: undefined, // 排除函数以便比较 @@ -121,16 +121,16 @@ watchEffect(() => { })), ); - if (currentStringified !== actionsStringified.value) { - actionsStringified.value = currentStringified; + if (currentStringField !== actionsStringField.value) { + actionsStringField.value = currentStringField; processedActions.value = processActions(rawActions); } }); -/** 监听dropDownActions变化并更新缓存 */ +/** 监听 dropDownActions 变化并更新缓存 */ watchEffect(() => { const rawDropDownActions = toRaw(props.dropDownActions) || []; - const currentStringified = JSON.stringify({ + const currentStringField = JSON.stringify({ actions: rawDropDownActions.map((a) => ({ ...a, onClick: undefined, // 排除函数以便比较 @@ -141,8 +141,8 @@ watchEffect(() => { divider: props.divider, }); - if (currentStringified !== dropdownActionsStringified.value) { - dropdownActionsStringified.value = currentStringified; + if (currentStringField !== dropdownActionsStringField.value) { + dropdownActionsStringField.value = currentStringField; processedDropdownActions.value = processDropdownActions( rawDropDownActions, props.divider, @@ -154,14 +154,14 @@ const getActions = computed(() => processedActions.value); const getDropdownList = computed(() => processedDropdownActions.value); -/** 缓存Space组件的size计算结果 */ +/** 缓存 Space 组件的 size 计算结果 */ const spaceSize = computed(() => { return unref(getActions)?.some((item: ActionItem) => item.type === 'link') ? 0 : 8; }); -/** 缓存PopConfirm属性 */ +/** 缓存 PopConfirm 属性 */ const popConfirmPropsMap = new Map(); function getPopConfirmProps(attrs: PopConfirm) { @@ -191,7 +191,7 @@ function getPopConfirmProps(attrs: PopConfirm) { return originAttrs; } -/** 缓存Button属性 */ +/** 缓存 Button 属性 */ const buttonPropsMap = new Map(); function getButtonProps(action: ActionItem) { @@ -217,7 +217,7 @@ function getButtonProps(action: ActionItem) { return res; } -/** 缓存Tooltip属性 */ +/** 缓存 Tooltip 属性 */ const tooltipPropsMap = new Map(); function getTooltipProps(tooltip: any | string) { @@ -243,7 +243,7 @@ function handleMenuClick(e: any) { } } -/** 生成稳定的key */ +/** 生成稳定的 key */ function getActionKey(action: ActionItem, index: number) { return `${action.label || ''}-${action.type || ''}-${index}`; } diff --git a/apps/web-antd/src/views/ai/music/index/mode/desc.vue b/apps/web-antd/src/views/ai/music/index/mode/desc.vue index 4c480020bef6f197cef0b4538e4f8b9edca066b3..c57beb4079f274f7f17f72d78012aa4795a2b866 100644 --- a/apps/web-antd/src/views/ai/music/index/mode/desc.vue +++ b/apps/web-antd/src/views/ai/music/index/mode/desc.vue @@ -26,7 +26,7 @@ defineExpose({ >