Skip to content

phsl / admin

Go to a project
Commit 40c2cb72 by GoldenZqqq
Options

feat: 优化保存/提交按钮样式与完善保存/提交后的确认逻辑

parent 6cf3de01
Showing with 112 additions and 49 deletions
src/views/bpm/model/form/index.vue
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
<!-- 右侧按钮 --> <!-- 右侧按钮 -->
<div class="w-200px flex items-center justify-end gap-2"> <div class="w-200px flex items-center justify-end gap-2">
<el-button @click="handleSave">保 存</el-button> <el-button v-if="route.params.id" type="success" @click="handleDeploy">发 布</el-button>
<el-button type="primary" @click="handleDeploy">发 布</el-button> <el-button type="primary" @click="handleSave">保 存</el-button>
</div> </div>
</div> </div>
...@@ -90,8 +90,10 @@ import { BpmModelType, BpmModelFormType } from '@/utils/constants' ...@@ -90,8 +90,10 @@ import { BpmModelType, BpmModelFormType } from '@/utils/constants'
import BasicInfo from './BasicInfo.vue' import BasicInfo from './BasicInfo.vue'
import FormDesign from './FormDesign.vue' import FormDesign from './FormDesign.vue'
import ProcessDesign from './ProcessDesign.vue' import ProcessDesign from './ProcessDesign.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
const router = useRouter() const router = useRouter()
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute() const route = useRoute()
const message = useMessage() const message = useMessage()
const userStore = useUserStoreWithOut() const userStore = useUserStoreWithOut()
...@@ -102,24 +104,24 @@ const formDesignRef = ref() ...@@ -102,24 +104,24 @@ const formDesignRef = ref()
const processDesignRef = ref() const processDesignRef = ref()
/** 步骤校验函数 */ /** 步骤校验函数 */
const validateStep1 = async () => { const validateBasic = async () => {
await basicInfoRef.value?.validate() await basicInfoRef.value?.validate()
} }
const validateStep2 = async () => { const validateForm = async () => {
await formDesignRef.value?.validate() await formDesignRef.value?.validate()
} }
const validateStep3 = async () => { const validateProcess = async () => {
await processDesignRef.value?.validate() await processDesignRef.value?.validate()
} }
// 步骤控制 // 步骤控制
const currentStep = ref(0) const currentStep = ref(0)
const steps = [ const steps = [
{ title: '基本信息', validator: validateStep1 }, { title: '基本信息', validator: validateBasic },
{ title: '表单设计', validator: validateStep2 }, { title: '表单设计', validator: validateForm },
{ title: '流程设计', validator: validateStep3 } { title: '流程设计', validator: validateProcess }
] ]
// 表单数据 // 表单数据
...@@ -166,71 +168,124 @@ const initData = async () => { ...@@ -166,71 +168,124 @@ const initData = async () => {
userList.value = await UserApi.getSimpleUserList() userList.value = await UserApi.getSimpleUserList()
} }
/** 保存操作 */ /** 校验所有步骤数据是否完整 */
const handleSave = async () => { const validateAllSteps = async () => {
try { try {
// 保存前确保所有步骤的数据都已经验证通过 // 基本信息校验
for (const step of steps) { await basicInfoRef.value?.validate()
if (step.validator) { if (!formData.value.key || !formData.value.name || !formData.value.category) {
await step.validator() currentStep.value = 0
} throw new Error('请完善基本信息')
} }
// 如果是在第三步，需要先获取最新的流程设计数据 // 表单设计校验
if (currentStep.value === 2) { await formDesignRef.value?.validate()
await nextTick() if (formData.value.formType === 10 && !formData.value.formId) {
const bpmnXml = processDesignRef.value?.getXmlString() currentStep.value = 1
// 确保有XML数据 throw new Error('请选择流程表单')
if (!bpmnXml) { }
throw new Error('请设计流程') if (
} formData.value.formType === 20 &&
formData.value.bpmnXml = bpmnXml (!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 {
// 保存前校验所有步骤的数据
await validateAllSteps()
// 获取最新的流程设计数据
const bpmnXml = processDesignRef.value?.getXmlString()
formData.value.bpmnXml = bpmnXml
if (formData.value.id) { if (formData.value.id) {
// 修改场景
await ModelApi.updateModel(formData.value) await ModelApi.updateModel(formData.value)
message.success('修改成功') message.success('修改成功')
// 询问是否发布流程
try {
await message.confirm('修改流程成功，是否发布流程？')
// 用户点击确认，执行发布
await handleDeploy()
} catch {
// 用户点击取消，停留在当前页面
}
} else { } else {
// 新增场景
const result = await ModelApi.createModel(formData.value) const result = await ModelApi.createModel(formData.value)
formData.value.id = result.id formData.value.id = result
message.success('新增成功') 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) console.error('保存失败:', error)
message.error(error.message || '保存失败') message.warning(error.message || '请完善所有步骤的必填信息')
throw error
} }
} }
/** 发布操作 */ /** 发布操作 */
const handleDeploy = async () => { const handleDeploy = async () => {
try { 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) await ModelApi.deployModel(formData.value.id)
message.success('发布成功') message.success('发布成功')
// 返回列表页
router.push({ name: 'BpmModel' }) router.push({ name: 'BpmModel' })
} catch (error) { } catch (error: any) {
console.error('发布失败:', error) console.error('发布失败:', error)
if (error instanceof Error) { message.warning(error.message || '发布失败')
// 校验失败时,跳转到对应步骤
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 || '发布失败')
}
}
} }
} }
...@@ -243,7 +298,7 @@ const handleStepClick = async (index: number) => { ...@@ -243,7 +298,7 @@ const handleStepClick = async (index: number) => {
return return
} }
} }
// 只有在向后切换时才进行校验 // 只有在向后切换时才进行校验
if (index > currentStep.value) { if (index > currentStep.value) {
try { try {
...@@ -271,6 +326,14 @@ const handleDesignSuccess = (bpmnXml?: string) => { ...@@ -271,6 +326,14 @@ const handleDesignSuccess = (bpmnXml?: string) => {
onMounted(async () => { onMounted(async () => {
await initData() await initData()
}) })
// 添加组件卸载前的清理代码
onBeforeUnmount(() => {
// 清理所有的引用
basicInfoRef.value = null
formDesignRef.value = null
processDesignRef.value = null
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment