diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index c17bfeb7..b0aef58c 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -44,8 +44,8 @@
- 保 存
- 发 布
+ 发 布
+ 保 存
@@ -90,8 +90,10 @@ import { BpmModelType, BpmModelFormType } from '@/utils/constants'
import BasicInfo from './BasicInfo.vue'
import FormDesign from './FormDesign.vue'
import ProcessDesign from './ProcessDesign.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
const router = useRouter()
+const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const message = useMessage()
const userStore = useUserStoreWithOut()
@@ -102,24 +104,24 @@ const formDesignRef = ref()
const processDesignRef = ref()
/** 步骤校验函数 */
-const validateStep1 = async () => {
+const validateBasic = async () => {
await basicInfoRef.value?.validate()
}
-const validateStep2 = async () => {
+const validateForm = async () => {
await formDesignRef.value?.validate()
}
-const validateStep3 = async () => {
+const validateProcess = async () => {
await processDesignRef.value?.validate()
}
// 步骤控制
const currentStep = ref(0)
const steps = [
- { title: '基本信息', validator: validateStep1 },
- { title: '表单设计', validator: validateStep2 },
- { title: '流程设计', validator: validateStep3 }
+ { title: '基本信息', validator: validateBasic },
+ { title: '表单设计', validator: validateForm },
+ { title: '流程设计', validator: validateProcess }
]
// 表单数据
@@ -166,71 +168,124 @@ const initData = async () => {
userList.value = await UserApi.getSimpleUserList()
}
+/** 校验所有步骤数据是否完整 */
+const validateAllSteps = async () => {
+ try {
+ // 基本信息校验
+ await basicInfoRef.value?.validate()
+ if (!formData.value.key || !formData.value.name || !formData.value.category) {
+ currentStep.value = 0
+ throw new Error('请完善基本信息')
+ }
+
+ // 表单设计校验
+ await formDesignRef.value?.validate()
+ if (formData.value.formType === 10 && !formData.value.formId) {
+ currentStep.value = 1
+ throw new Error('请选择流程表单')
+ }
+ if (
+ formData.value.formType === 20 &&
+ (!formData.value.formCustomCreatePath || !formData.value.formCustomViewPath)
+ ) {
+ currentStep.value = 1
+ throw new Error('请完善自定义表单信息')
+ }
+
+ // 流程设计校验
+ await processDesignRef.value?.validate()
+ const bpmnXml = processDesignRef.value?.getXmlString()
+ if (!bpmnXml) {
+ currentStep.value = 2
+ throw new Error('请设计流程')
+ }
+
+ return true
+ } catch (error) {
+ throw error
+ }
+}
+
/** 保存操作 */
const handleSave = async () => {
try {
- // 保存前确保所有步骤的数据都已经验证通过
- for (const step of steps) {
- if (step.validator) {
- await step.validator()
- }
- }
+ // 保存前校验所有步骤的数据
+ await validateAllSteps()
- // 如果是在第三步,需要先获取最新的流程设计数据
- if (currentStep.value === 2) {
- await nextTick()
- const bpmnXml = processDesignRef.value?.getXmlString()
- // 确保有XML数据
- if (!bpmnXml) {
- throw new Error('请设计流程')
- }
- formData.value.bpmnXml = bpmnXml
- }
+ // 获取最新的流程设计数据
+ const bpmnXml = processDesignRef.value?.getXmlString()
+ formData.value.bpmnXml = bpmnXml
if (formData.value.id) {
+ // 修改场景
await ModelApi.updateModel(formData.value)
message.success('修改成功')
+ // 询问是否发布流程
+ try {
+ await message.confirm('修改流程成功,是否发布流程?')
+ // 用户点击确认,执行发布
+ await handleDeploy()
+ } catch {
+ // 用户点击取消,停留在当前页面
+ }
} else {
+ // 新增场景
const result = await ModelApi.createModel(formData.value)
- formData.value.id = result.id
+ formData.value.id = result
message.success('新增成功')
+ try {
+ await message.confirm('创建流程成功,是否继续编辑?')
+ // 用户点击继续编辑,跳转到编辑页面
+ await nextTick()
+ // 先删除当前页签
+ delView(unref(router.currentRoute))
+ // 跳转到编辑页面
+ await router.push({
+ name: 'BpmModelUpdate',
+ params: { id: formData.value.id }
+ })
+ } catch {
+ // 用户点击返回列表
+ await router.push({ name: 'BpmModel' })
+ }
}
- } catch (error) {
+ } catch (error: any) {
console.error('保存失败:', error)
- message.error(error.message || '保存失败')
- throw error
+ message.warning(error.message || '请完善所有步骤的必填信息')
}
}
/** 发布操作 */
const handleDeploy = async () => {
try {
- await message.confirm('是否确认发布该流程?')
+ // 修改场景下直接发布,新增场景下需要先确认
+ if (!formData.value.id) {
+ await message.confirm('是否确认发布该流程?')
+ }
+
+ // 校验所有步骤
+ await validateAllSteps()
+
+ // 获取最新的流程设计数据
+ const bpmnXml = processDesignRef.value?.getXmlString()
+ formData.value.bpmnXml = bpmnXml
+
// 先保存所有数据
- await handleSave()
+ if (formData.value.id) {
+ await ModelApi.updateModel(formData.value)
+ } else {
+ const result = await ModelApi.createModel(formData.value)
+ formData.value.id = result.id
+ }
+
// 发布
await ModelApi.deployModel(formData.value.id)
message.success('发布成功')
+ // 返回列表页
router.push({ name: 'BpmModel' })
- } catch (error) {
+ } catch (error: any) {
console.error('发布失败:', error)
- if (error instanceof Error) {
- // 校验失败时,跳转到对应步骤
- const failedStep = steps.findIndex((step) => {
- try {
- step.validator && step.validator()
- return false
- } catch {
- return true
- }
- })
- if (failedStep !== -1) {
- currentStep.value = failedStep
- message.warning('请完善必填信息')
- } else {
- message.error(error.message || '发布失败')
- }
- }
+ message.warning(error.message || '发布失败')
}
}
@@ -243,7 +298,7 @@ const handleStepClick = async (index: number) => {
return
}
}
-
+
// 只有在向后切换时才进行校验
if (index > currentStep.value) {
try {
@@ -271,6 +326,14 @@ const handleDesignSuccess = (bpmnXml?: string) => {
onMounted(async () => {
await initData()
})
+
+// 添加组件卸载前的清理代码
+onBeforeUnmount(() => {
+ // 清理所有的引用
+ basicInfoRef.value = null
+ formDesignRef.value = null
+ processDesignRef.value = null
+})