From 5e386336b91f7be7c6bf4c26b0cf3fd64ff5b865 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sun, 15 Dec 2024 17:08:02 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84=E5=AE=A1?= =?UTF-8?q?=E3=80=91Bpm=EF=BC=9A=E6=96=B0=E7=9A=84=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/modules/remaining.ts | 4 +- .../bpm/model/CategoryDraggableModel.vue | 17 +---- src/views/bpm/model/CreateUpdate.vue | 66 ++++++++++--------- src/views/bpm/model/ModelForm.vue | 29 ++++---- src/views/bpm/model/editor/index.vue | 21 +++--- 5 files changed, 68 insertions(+), 69 deletions(-) diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 22a0c3e5..3537a59c 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -332,8 +332,8 @@ const remainingRouter: AppRouteRecordRaw[] = [ } }, { - path: 'manager/model/create-update', - component: () => import('@/views/bpm/model/CreateUpdate.vue'), + path: 'manager/model/create-update', // TODO @goldenzqqq：是不是拆分成两个，一个 create 创建流程；一个 update 修改流程？ + component: () => import('@/views/bpm/model/CreateUpdate.vue'), // TODO @goldenzqqq：是不是放到 '@/views/bpm/model/form/index.vue'。然后，原本的 editor/index.vue 是不是可以清理了呀？ name: 'BpmModelCreateUpdate', meta: { noCache: true, diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue index e5765864..8009e693 100644 --- a/src/views/bpm/model/CategoryDraggableModel.vue +++ b/src/views/bpm/model/CategoryDraggableModel.vue @@ -339,21 +339,7 @@ const handleChangeState = async (row: any) => { /** 设计流程 */ const handleDesign = (row: any) => { - // if (row.type == BpmModelType.BPMN) { - // push({ - // name: 'BpmModelEditor', - // query: { - // modelId: row.id - // } - // }) - // } else { - // push({ - // name: 'SimpleModelDesign', - // query: { - // modelId: row.id - // } - // }) - // } + // TODO @goldenzqqq：最好使用 name 哈 push(`/bpm/manager/model/create-update?id=${row.id}`) } @@ -497,6 +483,7 @@ const handleDeleteCategory = async () => { /** 添加流程模型弹窗 */ const modelFormRef = ref() const openModelForm = (type: string, id?: number) => { + // TODO @goldenzqqq：最好使用 name 哈 if (type === 'create') { push('/bpm/manager/model/create-update') } else { diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue index 9dc4e6a0..adbe8324 100644 --- a/src/views/bpm/model/CreateUpdate.vue +++ b/src/views/bpm/model/CreateUpdate.vue @@ -50,6 +50,8 @@ + +
+ ([]) const userSelectFormRef = ref() const currentSelectType = ref<'start' | 'manager'>('start') -// 打开发起人选择 +/** 打开发起人选择 */ const openStartUserSelect = () => { currentSelectType.value = 'start' userSelectFormRef.value.open(0, selectedStartUsers.value) } -// 打开管理员选择 +/** 打开管理员选择 */ const openManagerUserSelect = () => { currentSelectType.value = 'manager' userSelectFormRef.value.open(0, selectedManagerUsers.value) } -// 处理用户选择确认 +/** 处理用户选择确认 */ const handleUserSelectConfirm = (_, users: UserVO[]) => { if (currentSelectType.value === 'start') { selectedStartUsers.value = users @@ -391,7 +390,7 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => { } } -// 处理发起人类型变化 +/** 处理发起人类型变化 */ const handleStartUserTypeChange = (value: number) => { if (value !== 1) { selectedStartUsers.value = [] @@ -399,7 +398,7 @@ const handleStartUserTypeChange = (value: number) => { } } -// 处理管理员类型变化 +/** 处理管理员类型变化 */ const handleManagerUserTypeChange = (value: number) => { if (value !== 1) { selectedManagerUsers.value = [] @@ -407,19 +406,21 @@ const handleManagerUserTypeChange = (value: number) => { } } -// 移除发起人 +/** 移除发起人 */ const handleRemoveStartUser = (user: UserVO) => { selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id) - formData.value.startUserIds = formData.value.startUserIds.filter((id) => id !== user.id) + formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id) } -// 移除管理员 +/** 移除管理员 */ const handleRemoveManagerUser = (user: UserVO) => { selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id) - formData.value.managerUserIds = formData.value.managerUserIds.filter((id) => id !== user.id) + formData.value.managerUserIds = formData.value.managerUserIds.filter( + (id: number) => id !== user.id + ) } -// 保存操作 +/** 保存操作 */ const handleSave = async () => { try { if (formData.value.id) { @@ -436,7 +437,7 @@ const handleSave = async () => { } } -// 发布操作 +/** 发布操作 */ const handleDeploy = async () => { try { await message.confirm('是否确认发布该流程？') @@ -445,7 +446,8 @@ const handleDeploy = async () => { await handleSave() await ModelApi.deployModel(formData.value.id) message.success('发布成功') - router.push({ path: '/bpm/manager/model' }) + // TODO @goldenzqqq：最好使用 name 哈 + await router.push({ path: '/bpm/manager/model' }) } catch (error) { if (error instanceof Error) { // 校验失败时,跳转到对应步骤 @@ -465,7 +467,7 @@ const handleDeploy = async () => { } } -// 初始化数据 +/** 初始化数据 */ const initData = async () => { const modelId = route.query.id as unknown as string if (modelId) { @@ -497,16 +499,12 @@ const initData = async () => { userList.value = await UserApi.getSimpleUserList() } -onMounted(async () => { - await initData() -}) - -// 第一步校验 +/** 第一步校验 */ const validateStep1 = async () => { await formRef.value?.validate(['name', 'key', 'category', 'icon', 'type', 'visible']) } -// 第二步校验 +/** 第二步校验 */ const validateStep2 = async () => { await formRef.value?.validate([ 'formType', @@ -516,13 +514,14 @@ const validateStep2 = async () => { ]) } -// 第三步校验 +/** 第三步校验 */ const validateStep3 = async () => { if (!xmlString.value) { throw new Error('请设计流程') } } +/** 校验全部 */ const validateAllSteps = async () => { for (const step of steps) { if (step.validator) { @@ -531,13 +530,14 @@ const validateAllSteps = async () => { } } +// TODO @goldenzqqq：是不是可以把 step1、step2、step3，改成 basic、form、designer。这样，可读性会好点。 const steps = [ { title: '基本信息', validator: validateStep1 }, { title: '表单设计', validator: validateStep2 }, { title: '流程设计', validator: validateStep3 } ] -// 处理设计器保存成功 +/** 处理设计器保存成功 */ const handleDesignSuccess = (bpmnXml?: string) => { if (bpmnXml) { // 新建时，保存设计器生成的XML @@ -546,7 +546,7 @@ const handleDesignSuccess = (bpmnXml?: string) => { message.success('保存成功') } -// 步骤切换处理 +/** 步骤切换处理 */ const handleStepClick = async (index: number) => { // 如果是切换到第三步（流程设计），需要校验key和name if (index === 2) { @@ -555,11 +555,12 @@ const handleStepClick = async (index: number) => { return } } + // TODO @goldenzqqq：感觉这里可以优化下，切换的时候，必须当前表单填写正确，不然不允许切换。 currentStep.value = index } -// 添加一个计算属性来判断是否显示设计器 +/** 添加一个计算属性来判断是否显示设计器 */ const showDesigner = computed(() => { return ( currentStep.value === 2 && @@ -585,6 +586,11 @@ onBeforeUnmount(() => { w.bpmnInstances = null } }) + +/** 初始化 */ +onMounted(async () => { + await initData() +})