From 0ae9acdfd6b69247445763f6418af59f7e97bbcb Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 18 Dec 2024 21:18:55 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E3=80=90=E7=BC=BA=E9=99=B7=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91Simple=20=E6=B5=81=E7=A8=8B=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=EF=BC=8C=E5=BD=93=E6=A8=AA=E5=90=91=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E8=BF=87=E5=A4=9A=E6=97=B6=EF=BC=8C=E5=B7=A6=E4=BE=A7=E4=BC=9A?=
 =?UTF-8?q?=E8=A2=AB=E9=A1=B6=E5=87=BA=E5=8E=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/ConditionNodeConfig.vue               | 2 +-
 .../theme/simple-process-designer.scss                     | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 49e5d9f6..ae931724 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -381,7 +381,7 @@ const fieldOptions = computed(() => {
 
 /** 获取字段名称 */
 const getFieldTitle = (field: string) => {
-  const item = fieldsInfo.find((item) => item.field === field)
+  const item = fieldOptions.value.find((item) => item.field === field)
   return item?.title
 }
 
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 516756e2..8cf2681d 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -173,13 +173,16 @@
   height: 100%;
   padding-top: 32px;
   background-color: #fafafa;
+  overflow-x: auto;
+  width: 100%;
+
   .simple-process-model {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     transform-origin: 50% 0 0;
-    overflow: auto;
+    min-width: fit-content;
     transform: scale(1);
     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
@@ -473,6 +476,7 @@
       .branch-node-container {
         position: relative;
         display: flex;
+        min-width: fit-content;
 
         &::before {
           position: absolute;
@@ -548,6 +552,7 @@
           background: transparent;
           border-top: 2px solid #dedede;
           border-bottom: 2px solid #dedede;
+          flex-shrink: 0;
 
           &::before {
             position: absolute;

From ea97abc0afb6145512caaae73c378d9de42fec58 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 18 Dec 2024 23:23:07 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=8F=91=E8=B5=B7=E6=B5=81=E7=A8=8B=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=EF=BC=8C=E8=A1=A8=E5=8D=95=E5=AD=97=E6=AE=B5=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 3800f191..d097d1be 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -75,7 +75,7 @@
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import { BpmModelType } from '@/utils/constants'
-import { CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { CandidateStrategy, NodeId, FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
@@ -129,8 +129,10 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
       }
     }
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    await nextTick()
+    
+    await nextTick();
     fApi.value?.btn.show(false) // 隐藏提交按钮
+     
     // 获取流程审批信息
     await getApprovalDetail(row)
 
@@ -152,7 +154,9 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id })
+    // 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
+    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id, activityId : NodeId.START_USER_NODE_ID })
+
     if (!data) {
       message.error('查询不到审批详情信息！')
       return
@@ -170,10 +174,37 @@ const getApprovalDetail = async (row: any) => {
 
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
+    // 获取表单字段权限
+    const formFieldsPermission =  data.formFieldsPermission
+    // 设置表单字段权限
+    if (formFieldsPermission) {
+      Object.keys(formFieldsPermission).forEach((item) => {
+        setFieldPermission(item, formFieldsPermission[item])
+      })
+    }
   } finally {
   }
 }
 
+/**
+ * 设置表单权限
+ */
+ const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    //@ts-ignore
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    //@ts-ignore
+    fApi.value?.disabled(false, field)
+ 
+  }
+  if (permission === FieldPermissionType.NONE) {
+    //@ts-ignore
+    fApi.value?.hidden(true, field)
+  }
+}
+
 /** 提交按钮 */
 const submitForm = async () => {
   if (!fApi.value || !props.selectProcessDefinition) {

From 5a0bcfe6b5a6e215fb9c9adf9b87f0616f7e0625 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Dec 2024 09:25:13 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91Bpm=EF=BC=9A=E6=96=B0=E7=9A=84=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index d097d1be..64d072ce 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -8,7 +8,7 @@
         <!-- 中间主要内容 tab 栏 -->
         <el-tabs v-model="activeTab">
           <!-- 表单信息 -->
-          <el-tab-pane label="表单填写" name="form" >
+          <el-tab-pane label="表单填写" name="form">
             <div class="form-scroll-area" v-loading="processInstanceStartLoading">
               <el-scrollbar>
                 <el-row>
@@ -75,7 +75,11 @@
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import { BpmModelType } from '@/utils/constants'
-import { CandidateStrategy, NodeId, FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import {
+  CandidateStrategy,
+  NodeId,
+  FieldPermissionType
+} from '@/components/SimpleProcessDesignerV2/src/consts'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
@@ -129,10 +133,10 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
       }
     }
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    
-    await nextTick();
+
+    await nextTick()
     fApi.value?.btn.show(false) // 隐藏提交按钮
-     
+
     // 获取流程审批信息
     await getApprovalDetail(row)
 
@@ -154,8 +158,11 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    // 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
-    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id, activityId : NodeId.START_USER_NODE_ID })
+    // TODO 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
+    const data = await ProcessInstanceApi.getApprovalDetail({
+      processDefinitionId: row.id,
+      activityId: NodeId.START_USER_NODE_ID
+    })
 
     if (!data) {
       message.error('查询不到审批详情信息！')
@@ -175,7 +182,7 @@ const getApprovalDetail = async (row: any) => {
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
     // 获取表单字段权限
-    const formFieldsPermission =  data.formFieldsPermission
+    const formFieldsPermission = data.formFieldsPermission
     // 设置表单字段权限
     if (formFieldsPermission) {
       Object.keys(formFieldsPermission).forEach((item) => {
@@ -189,7 +196,7 @@ const getApprovalDetail = async (row: any) => {
 /**
  * 设置表单权限
  */
- const setFieldPermission = (field: string, permission: string) => {
+const setFieldPermission = (field: string, permission: string) => {
   if (permission === FieldPermissionType.READ) {
     //@ts-ignore
     fApi.value?.disabled(true, field)
@@ -197,7 +204,6 @@ const getApprovalDetail = async (row: any) => {
   if (permission === FieldPermissionType.WRITE) {
     //@ts-ignore
     fApi.value?.disabled(false, field)
- 
   }
   if (permission === FieldPermissionType.NONE) {
     //@ts-ignore

From 6f724d9d52e136679b8fc8989d816ecfbebca723 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 27 Dec 2024 21:28:12 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91Bpm=EF=BC=9A=E6=96=B0=E7=9A=84=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue      | 83 +++++--------------
 src/views/bpm/model/editor/index.vue          |  6 +-
 src/views/bpm/model/form/index.vue            | 27 +++---
 3 files changed, 35 insertions(+), 81 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index e9427292..9d2fa5ba 100644
--- 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) => {
-  if (newValue && bpmnModeler) {
-    createNewDiagram(newValue)
-  }
-}, { immediate: true })
+watch(
+  () => props.value,
+  (newValue) => {
+    if (newValue && bpmnModeler) {
+      createNewDiagram(newValue)
+    }
+  },
+  { immediate: true }
+)
 
 // 监听processId和processName变化
-watch([() => props.processId, () => props.processName], ([newId, newName]) => {
-  if (newId && newName && !props.value) {
-    createNewDiagram(null)
-  }
-}, { immediate: true })
+watch(
+  [() => props.processId, () => props.processName],
+  ([newId, newName]) => {
+    if (newId && newName && !props.value) {
+      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
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 063e5709..6e71d01c 100644
--- 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;
-  right: 60px;
+  top: 172px;
+  right: 70px;
 }
 </style>
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 4e807a26..ac628e0a 100644
--- 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 = result
+      formData.value.id = await ModelApi.createModel(modelData)
       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 || '发布失败')