【代码评审】Bpm：新的编辑界面

6f724d9d · YunaiV · 6791de9d · 6f724d9d · 6f724d9d · 6f724d9d
Commit 6f724d9d authored Dec 27, 2024 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 35 additions and 81 deletions

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+19 -64

src/views/bpm/model/editor/index.vue
+3 -3

src/views/bpm/model/form/index.vue
+13 -14

No files found.
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -309,18 +309,26 @@ const props = defineProps({
 })
 // 监听value变化,重新加载流程图
-watch(() => props.value, (newValue) => {
+watch(
-  if (newValue && bpmnModeler) {
+  () => props.value,
-    createNewDiagram(newValue)
+  (newValue) => {
-  }
+    if (newValue && bpmnModeler) {
-}, { immediate: true })
+      createNewDiagram(newValue)
+    }
+  },
+  { immediate: true }
+)
 // 监听processId和processName变化
-watch([() => props.processId, () => props.processName], ([newId, newName]) => {
+watch(
-  if (newId && newName && !props.value) {
+  [() => props.processId, () => props.processName],
-    createNewDiagram(null)
+  ([newId, newName]) => {
-  }
+    if (newId && newName && !props.value) {
-}, { immediate: true })
+      createNewDiagram(null)
+    }
+  },
+  { immediate: true }
+)
 provide('configGlobal', props)
 let bpmnModeler: any = null
@@ -599,16 +607,6 @@ const processZoomOut = (zoomStep = 0.1) => {
  defaultZoom.value = newZoom
  bpmnModeler.get('canvas').zoom(defaultZoom.value)
 }
-// const processZoomTo = (newZoom = 1) => {
-//   if (newZoom < 0.2) {
-//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
-//   }
-//   if (newZoom > 4) {
-//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
-//   }
-//   defaultZoom = newZoom
-//   bpmnModeler.get('canvas').zoom(newZoom)
-// }
 const processReZoom = () => {
  defaultZoom.value = 1
  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
@@ -647,62 +645,19 @@ const previewProcessXML = () => {
 }
 const previewProcessJson = () => {
  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-    // console.log(xml, 'xml')
-    // const rootNode = parseXmlString(xml)
-    // console.log(rootNode, 'rootNoderootNode')
    const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
-    // console.log(rootNodes, 'rootNodesrootNodesrootNodes')
-    // console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()')
-    // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
-    // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
-    // const parser = new xml2js.XMLParser()
-    // let jObj = parser.parse(xml)
-    // console.log(jObj, 'jObjjObjjObjjObjjObj')
-    // const builder = new xml2js.XMLBuilder(xml)
-    // const xmlContent = builder
-    // console.log(xmlContent, 'xmlContent')
-    // console.log(xml2js, 'convertconvertconvert')
    previewResult.value = rootNodes.parent?.toJSON() as unknown as string
-    // previewResult.value = jObj
-    // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
    previewType.value = 'json'
    previewModelVisible.value = true
  })
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
-const processSave = async () => {
-  try {
-    const { err, xml } = await bpmnModeler.saveXML()
-    if (err) {
-      ElMessage.error('保存流程设计失败，请重试！')
-      return
-    }
-    emit('save', xml)
-  } catch (error) {
-    console.error(error)
-    ElMessage.error('保存流程设计失败，请重试！')
-  }
-}
-/** 高亮显示 */
-// const highlightedCode = (previewType, previewResult) => {
-//   console.log(previewType, 'previewType, previewResult')
-//   console.log(previewResult, 'previewType, previewResult')
-//   console.log(hljs.highlight, 'hljs.highlight')
-//   const result = hljs.highlight(previewType, previewResult.value || '', true)
-//   return result.value || '&nbsp;'
-// }
-onBeforeMount(() => {
-  console.log(props, 'propspropspropsprops')
-})
 onMounted(() => {
  initBpmnModeler()
  createNewDiagram(props.value)
 })
 onBeforeUnmount(() => {
-  // this.$once('hook:beforeDestroy', () => {
-  // })
  if (bpmnModeler) bpmnModeler.destroy()
  emit('destroy', bpmnModeler)
  bpmnModeler = null

--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -206,7 +206,7 @@ onBeforeUnmount(() => {
  }
 })
-/** 获取XML字符串 */
+/** 获取 XML 字符串 */
 const saveXML = async () => {
  if (!modeler.value) {
    return { xml: undefined }
@@ -251,7 +251,7 @@ defineExpose({
 <style lang="scss">
 .process-panel__container {
  position: absolute;
-  top: 180px;
+  top: 172px;
-  right: 60px;
+  right: 70px;
 }
 </style>
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -79,14 +79,14 @@
 </template>
 <script lang="ts" setup>
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from '@/hooks/web/useMessage'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { CategoryApi } from '@/api/bpm/category'
 import * as UserApi from '@/api/system/user'
 import { useUserStoreWithOut } from '@/store/modules/user'
-import { BpmModelType, BpmModelFormType } from '@/utils/constants'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
 import BasicInfo from './BasicInfo.vue'
 import FormDesign from './FormDesign.vue'
 import ProcessDesign from './ProcessDesign.vue'
@@ -108,16 +108,17 @@ const validateBasic = async () => {
  await basicInfoRef.value?.validate()
 }
+/** 表单设计校验 */
 const validateForm = async () => {
  await formDesignRef.value?.validate()
 }
+/** 流程设计校验 */
 const validateProcess = async () => {
  await processDesignRef.value?.validate()
 }
-// 步骤控制
+const currentStep = ref(0) // 步骤控制
-const currentStep = ref(0)
 const steps = [
  { title: '基本信息', validator: validateBasic },
  { title: '表单设计', validator: validateForm },
@@ -177,7 +178,7 @@ const validateAllSteps = async () => {
      currentStep.value = 0
      throw new Error('请完善基本信息')
    }
    // 表单设计校验
    await formDesignRef.value?.validate()
    if (formData.value.formType === 10 && !formData.value.formId) {
@@ -191,7 +192,7 @@ const validateAllSteps = async () => {
      currentStep.value = 1
      throw new Error('请完善自定义表单信息')
    }
    // 流程设计校验
    await processDesignRef.value?.validate()
    const processData = await processDesignRef.value?.getProcessData()
@@ -199,7 +200,7 @@ const validateAllSteps = async () => {
      currentStep.value = 2
      throw new Error('请设计流程')
    }
    return true
  } catch (error) {
    throw error
@@ -211,7 +212,7 @@ const handleSave = async () => {
  try {
    // 保存前校验所有步骤的数据
    await validateAllSteps()
    // 获取最新的流程设计数据
    const processData = await processDesignRef.value?.getProcessData()
    if (!processData) {
@@ -229,11 +230,10 @@ const handleSave = async () => {
      modelData.bpmnXml = null
      modelData.simpleModel = processData // 直接使用流程数据对象
    }
    if (formData.value.id) {
      // 修改场景
      await ModelApi.updateModel(modelData)
-      message.success('修改成功')
      // 询问是否发布流程
      try {
        await message.confirm('修改流程成功，是否发布流程？')
@@ -244,8 +244,7 @@ const handleSave = async () => {
      }
    } else {
      // 新增场景
-      const result = await ModelApi.createModel(modelData)
+      formData.value.id = await ModelApi.createModel(modelData)
-      formData.value.id = result
      message.success('新增成功')
      try {
        await message.confirm('创建流程成功，是否继续编辑？')
@@ -281,7 +280,7 @@ const handleDeploy = async () => {
    // 校验所有步骤
    await validateAllSteps()
    // 获取最新的流程设计数据
    const processData = await processDesignRef.value?.getProcessData()
    if (!processData) {
@@ -312,7 +311,7 @@ const handleDeploy = async () => {
    await ModelApi.deployModel(formData.value.id)
    message.success('发布成功')
    // 返回列表页
-    router.push({ name: 'BpmModel' })
+    await router.push({ name: 'BpmModel' })
  } catch (error: any) {
    console.error('发布失败:', error)
    message.warning(error.message || '发布失败')