Merge branch 'feature/bpm' of https://github.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm

feature/bpm
YunaiV 2024-12-27 21:08:48 +08:00
commit 6791de9d7c
8 changed files with 323 additions and 126 deletions

View File

@ -1,6 +1,7 @@
<template> <template>
<div v-loading="loading" class="overflow-auto"> <div v-loading="loading" class="overflow-auto">
<SimpleProcessModel <SimpleProcessModel
ref="simpleProcessModelRef"
v-if="processNodeTree" v-if="processNodeTree"
:flow-node="processNodeTree" :flow-node="processNodeTree"
:readonly="false" :readonly="false"
@ -225,4 +226,19 @@ onMounted(async () => {
loading.value = false loading.value = false
} }
}) })
const simpleProcessModelRef = ref()
/** 获取当前流程数据 */
const getCurrentFlowData = async () => {
if (simpleProcessModelRef.value) {
return await simpleProcessModelRef.value.getCurrentFlowData()
}
return undefined
}
defineExpose({
getCurrentFlowData,
updateModel
})
</script> </script>

View File

@ -8,15 +8,6 @@
<el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button> <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
<el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" /> <el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
</el-button-group> </el-button-group>
<el-button
v-if="!readonly"
size="default"
class="ml-4px"
type="primary"
:icon="Select"
@click="saveSimpleFlowModel"
>保存模型</el-button
>
</el-row> </el-row>
</div> </div>
<div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`"> <div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`">
@ -42,7 +33,8 @@
import ProcessNodeTree from './ProcessNodeTree.vue' import ProcessNodeTree from './ProcessNodeTree.vue'
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts' import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
import { useWatchNode } from './node' import { useWatchNode } from './node'
import { Select, ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue' import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
defineOptions({ defineOptions({
name: 'SimpleProcessModel' name: 'SimpleProcessModel'
}) })
@ -58,6 +50,7 @@ const props = defineProps({
default: true default: true
} }
}) })
const emits = defineEmits<{ const emits = defineEmits<{
'save': [node: SimpleFlowNode | undefined] 'save': [node: SimpleFlowNode | undefined]
}>() }>()
@ -68,6 +61,7 @@ provide('readonly', props.readonly)
let scaleValue = ref(100) let scaleValue = ref(100)
const MAX_SCALE_VALUE = 200 const MAX_SCALE_VALUE = 200
const MIN_SCALE_VALUE = 50 const MIN_SCALE_VALUE = 50
// //
const zoomIn = () => { const zoomIn = () => {
if (scaleValue.value == MAX_SCALE_VALUE) { if (scaleValue.value == MAX_SCALE_VALUE) {
@ -75,6 +69,7 @@ const zoomIn = () => {
} }
scaleValue.value += 10 scaleValue.value += 10
} }
// //
const zoomOut = () => { const zoomOut = () => {
if (scaleValue.value == MIN_SCALE_VALUE) { if (scaleValue.value == MIN_SCALE_VALUE) {
@ -82,21 +77,14 @@ const zoomOut = () => {
} }
scaleValue.value -= 10 scaleValue.value -= 10
} }
const processReZoom = () => { const processReZoom = () => {
scaleValue.value = 100 scaleValue.value = 100
} }
const errorDialogVisible = ref(false) const errorDialogVisible = ref(false)
let errorNodes: SimpleFlowNode[] = [] let errorNodes: SimpleFlowNode[] = []
const saveSimpleFlowModel = async () => {
errorNodes = []
validateNode(processNodeTree.value, errorNodes)
if (errorNodes.length > 0) {
errorDialogVisible.value = true
return
}
emits('save', processNodeTree.value)
}
// showText // showText
const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => { const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
if (node) { if (node) {
@ -135,6 +123,26 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
} }
} }
} }
/** 获取当前流程数据 */
const getCurrentFlowData = async () => {
try {
errorNodes = []
validateNode(processNodeTree.value, errorNodes)
if (errorNodes.length > 0) {
errorDialogVisible.value = true
return undefined
}
return processNodeTree.value
} catch (error) {
console.error('获取流程数据失败:', error)
return undefined
}
}
defineExpose({
getCurrentFlowData
})
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

View File

@ -160,13 +160,6 @@
<XButton preIcon="ep:refresh" @click="processRestart()" /> <XButton preIcon="ep:refresh" @click="processRestart()" />
</el-tooltip> </el-tooltip>
</ElButtonGroup> </ElButtonGroup>
<XButton
preIcon="ep:plus"
title="保存模型"
@click="processSave"
:type="props.headerButtonType"
:disabled="simulationStatus"
/>
</template> </template>
<!-- 用于打开本地文件--> <!-- 用于打开本地文件-->
<input <input

View File

@ -205,11 +205,53 @@ onBeforeUnmount(() => {
w.bpmnInstances = null w.bpmnInstances = null
} }
}) })
/** 获取XML字符串 */
const saveXML = async () => {
if (!modeler.value) {
return { xml: undefined }
}
try {
return await modeler.value.saveXML({ format: true })
} catch (error) {
console.error('获取XML失败:', error)
return { xml: undefined }
}
}
/** 获取SVG字符串 */
const saveSVG = async () => {
if (!modeler.value) {
return { svg: undefined }
}
try {
return await modeler.value.saveSVG()
} catch (error) {
console.error('获取SVG失败:', error)
return { svg: undefined }
}
}
/** 刷新视图 */
const refresh = () => {
if (processDesigner.value?.refresh) {
processDesigner.value.refresh()
}
}
//
defineExpose({
modeler,
isModelerReady,
saveXML,
saveSVG,
refresh
})
</script> </script>
<style lang="scss"> <style lang="scss">
.process-panel__container { .process-panel__container {
position: absolute; position: absolute;
top: 90px; top: 180px;
right: 60px; right: 60px;
} }
</style> </style>

View File

@ -1,15 +1,9 @@
<template> <template>
<el-form <el-form ref="formRef" :model="modelData" :rules="rules" label-width="120px" class="mt-20px">
ref="formRef"
:model="modelData"
:rules="rules"
label-width="120px"
class="mt-20px w-600px"
>
<el-form-item label="流程标识" prop="key" class="mb-20px"> <el-form-item label="流程标识" prop="key" class="mb-20px">
<div class="flex items-center"> <div class="flex items-center">
<el-input <el-input
class="!w-480px" class="!w-440px"
v-model="modelData.key" v-model="modelData.key"
:disabled="!!modelData.id" :disabled="!!modelData.id"
placeholder="请输入流标标识" placeholder="请输入流标标识"

View File

@ -7,6 +7,7 @@
:model-key="modelData.key" :model-key="modelData.key"
:model-name="modelData.name" :model-name="modelData.name"
:value="modelData.bpmnXml" :value="modelData.bpmnXml"
ref="bpmnEditorRef"
@success="handleDesignSuccess" @success="handleDesignSuccess"
/> />
</template> </template>
@ -19,6 +20,7 @@
:model-key="modelData.key" :model-key="modelData.key"
:model-name="modelData.name" :model-name="modelData.name"
:value="modelData.bpmnXml" :value="modelData.bpmnXml"
ref="simpleEditorRef"
@success="handleDesignSuccess" @success="handleDesignSuccess"
/> />
</template> </template>
@ -38,7 +40,8 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue', 'success']) const emit = defineEmits(['update:modelValue', 'success'])
const xmlString = ref<string>() const bpmnEditorRef = ref()
const simpleEditorRef = ref()
// //
const modelData = computed({ const modelData = computed({
@ -46,45 +49,73 @@ const modelData = computed({
set: (val) => emit('update:modelValue', val) set: (val) => emit('update:modelValue', val)
}) })
// modelValue,XML /** 获取当前流程数据 */
watch( const getProcessData = async () => {
() => props.modelValue, try {
(newVal) => { if (modelData.value.type === BpmModelType.BPMN) {
if (newVal?.bpmnXml) { // BPMN
xmlString.value = newVal.bpmnXml if (bpmnEditorRef.value) {
const { xml } = await bpmnEditorRef.value.saveXML()
if (xml) {
return xml
}
}
} else {
// Simple
if (simpleEditorRef.value) {
const flowData = await simpleEditorRef.value.getCurrentFlowData()
if (flowData) {
return flowData //
}
}
} }
}, return undefined
{ immediate: true, deep: true } } catch (error) {
) console.error('获取流程数据失败:', error)
return undefined
/** 处理设计器保存成功 */
const handleDesignSuccess = (bpmnXml?: string) => {
if (bpmnXml) {
xmlString.value = bpmnXml
modelData.value = {
...modelData.value,
bpmnXml
}
emit('success', bpmnXml)
} }
} }
/** 表单校验 */ /** 表单校验 */
const validate = async () => { const validate = async () => {
// XML try {
const currentXml = xmlString.value || modelData.value?.bpmnXml //
const editorRef =
modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value
if (!editorRef) {
throw new Error('流程设计器未初始化')
}
//
const processData = await getProcessData()
if (!processData) {
throw new Error('请设计流程')
}
// XML
if (modelData.value.id && currentXml) {
return true return true
} catch (error) {
throw error
} }
}
// XML /** 处理设计器保存成功 */
if (!currentXml) { const handleDesignSuccess = (data?: any) => {
throw new Error('请设计流程') if (data) {
if (modelData.value.type === BpmModelType.BPMN) {
modelData.value = {
...modelData.value,
bpmnXml: data,
simpleModel: null
}
} else {
modelData.value = {
...modelData.value,
bpmnXml: null,
simpleModel: data
}
}
emit('success', data)
} }
return true
} }
/** 是否显示设计器 */ /** 是否显示设计器 */
@ -92,13 +123,8 @@ const showDesigner = computed(() => {
return Boolean(modelData.value?.key && modelData.value?.name) return Boolean(modelData.value?.key && modelData.value?.name)
}) })
/** 获取当前XML字符串 */
const getXmlString = () => {
return xmlString.value || modelData.value?.bpmnXml || ''
}
defineExpose({ defineExpose({
validate, validate,
getXmlString getProcessData
}) })
</script> </script>

View File

@ -7,7 +7,7 @@
> >
<!-- 左侧标题 --> <!-- 左侧标题 -->
<div class="w-200px flex items-center overflow-hidden"> <div class="w-200px flex items-center overflow-hidden">
<Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" /> <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="handleBack" />
<span class="ml-10px text-16px truncate" :title="formData.name || '创建流程'"> <span class="ml-10px text-16px truncate" :title="formData.name || '创建流程'">
{{ formData.name || '创建流程' }} {{ formData.name || '创建流程' }}
</span> </span>
@ -44,15 +44,15 @@
<!-- 右侧按钮 --> <!-- 右侧按钮 -->
<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>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="mt-50px"> <div class="mt-50px">
<!-- 第一步基本信息 --> <!-- 第一步基本信息 -->
<div v-if="currentStep === 0" class="mx-auto max-w-1024px"> <div v-if="currentStep === 0" class="mx-auto w-560px">
<BasicInfo <BasicInfo
v-model="formData" v-model="formData"
:categoryList="categoryList" :categoryList="categoryList"
@ -62,7 +62,7 @@
</div> </div>
<!-- 第二步表单设计 --> <!-- 第二步表单设计 -->
<div v-if="currentStep === 1" class="mx-auto max-w-1024px"> <div v-if="currentStep === 1" class="mx-auto w-560px">
<FormDesign v-model="formData" :formList="formList" ref="formDesignRef" /> <FormDesign v-model="formData" :formList="formList" ref="formDesignRef" />
</div> </div>
@ -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()
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,154 @@ const initData = async () => {
userList.value = await UserApi.getSimpleUserList() 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 processData = await processDesignRef.value?.getProcessData()
if (!processData) {
currentStep.value = 2
throw new Error('请设计流程')
}
return true
} catch (error) {
throw error
}
}
/** 保存操作 */ /** 保存操作 */
const handleSave = async () => { const handleSave = async () => {
try { try {
// //
for (const step of steps) { await validateAllSteps()
if (step.validator) {
await step.validator() //
} const processData = await processDesignRef.value?.getProcessData()
if (!processData) {
throw new Error('获取流程数据失败')
} }
// //
if (currentStep.value === 2) { const modelData = {
await nextTick() ...formData.value
const bpmnXml = processDesignRef.value?.getXmlString()
// XML
if (!bpmnXml) {
throw new Error('请设计流程')
}
formData.value.bpmnXml = bpmnXml
} }
if (formData.value.type === BpmModelType.BPMN) {
if (formData.value.id) { modelData.bpmnXml = processData
await ModelApi.updateModel(formData.value) modelData.simpleModel = null
message.success('修改成功')
} else { } else {
const result = await ModelApi.createModel(formData.value) modelData.bpmnXml = null
formData.value.id = result.id modelData.simpleModel = processData // 使
message.success('新增成功')
} }
} catch (error) {
if (formData.value.id) {
//
await ModelApi.updateModel(modelData)
message.success('修改成功')
//
try {
await message.confirm('修改流程成功,是否发布流程?')
//
await handleDeploy()
} catch {
//
}
} else {
//
const result = await ModelApi.createModel(modelData)
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 {
//
delView(unref(router.currentRoute))
//
await router.push({ name: 'BpmModel' })
}
}
} 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 processData = await processDesignRef.value?.getProcessData()
if (!processData) {
throw new Error('获取流程数据失败')
}
//
const modelData = {
...formData.value
}
if (formData.value.type === BpmModelType.BPMN) {
modelData.bpmnXml = processData
modelData.simpleModel = null
} else {
modelData.bpmnXml = null
modelData.simpleModel = processData // 使
}
// //
await handleSave() if (formData.value.id) {
await ModelApi.updateModel(modelData)
} else {
const result = await ModelApi.createModel(modelData)
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 +328,7 @@ const handleStepClick = async (index: number) => {
return return
} }
} }
// //
if (index > currentStep.value) { if (index > currentStep.value) {
try { try {
@ -267,10 +352,26 @@ const handleDesignSuccess = (bpmnXml?: string) => {
} }
} }
/** 返回列表页 */
const handleBack = () => {
//
delView(unref(router.currentRoute))
//
router.push({ name: 'BpmModel' })
}
/** 初始化 */ /** 初始化 */
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>

View File

@ -36,5 +36,22 @@ watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
const handleSuccess = (data?: any) => { const handleSuccess = (data?: any) => {
emit('success', data) emit('success', data)
} }
/** 获取当前流程数据 */
const getCurrentFlowData = async () => {
try {
if (designerRef.value) {
return await designerRef.value.getCurrentFlowData()
}
return undefined
} catch (error) {
console.error('获取流程数据失败:', error)
return undefined
}
}
defineExpose({
getCurrentFlowData
})
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>