修改技术监督bug

src/views/system/bpm/model/editor/index.vue

@@ -1,32 +1,32 @@
 <template>
-  <div class='default-main'>
-    <ContentWrap>
-      <!-- 流程设计器，负责绘制流程等 -->
-      <MyProcessDesigner
-          key='designer'
-          v-if='xmlString !== undefined'
-          v-model='xmlString'
-          :value='xmlString'
-          v-bind='controlForm'
-          keyboard
-          ref='processDesigner'
-          @init-finished='initModeler'
-          :additionalModel='controlForm.additionalModel'
-          @save='save'
-      />
-      <!-- 流程属性器，负责编辑每个流程节点的属性 -->
-      <MyProcessPenal
-          key='penal'
-          :bpmnModeler='modeler as any'
-          :prefix='controlForm.prefix'
-          class='process-panel'
-          :model='model'
-      />
-    </ContentWrap>
-  </div>
+    <div class="default-main" >
+        <ContentWrap style="height: calc(100vh - 135px)">
+            <!-- 流程设计器，负责绘制流程等 -->
+            <MyProcessDesigner
+                key="designer"
+                v-if="xmlString !== undefined"
+                v-model="xmlString"
+                :value="xmlString"
+                v-bind="controlForm"
+                keyboard
+                ref="processDesigner"
+                @init-finished="initModeler"
+                :additionalModel="controlForm.additionalModel"
+                @save="save"
+            />
+            <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+            <MyProcessPenal
+                key="penal"
+                :bpmnModeler="modeler as any"
+                :prefix="controlForm.prefix"
+                class="process-panel"
+                :model="model"
+            />
+        </ContentWrap>
+    </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
 import { onMounted, provide, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -43,109 +43,107 @@ defineOptions({ name: 'BpmModelEditor' })
 const { push, currentRoute, go } = useRouter() // 路由
 const { query } = useRoute() // 路由信息
 
-
 const xmlString = ref(undefined) // BPMN XML
 const modeler = ref(null) // BPMN Modeler
 const controlForm = ref({
-  simulation: true,
-  labelEditing: false,
-  labelVisible: false,
-  prefix: 'flowable',
-  headerButtonSize: 'mini',
-  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+    simulation: true,
+    labelEditing: false,
+    labelVisible: false,
+    prefix: 'flowable',
+    headerButtonSize: 'mini',
+    additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
 })
 
 type ProcessDefinitionVO = {
-  id: string
-  version: number
-  deploymentTIme: string
-  suspensionState: number
+    id: string
+    version: number
+    deploymentTIme: string
+    suspensionState: number
 }
 
 type ModelVO = {
-  id: number
-  formName: string
-  key: string
-  name: string
-  description: string
-  category: string
-  formType: number
-  formId: number
-  formCustomCreatePath: string
-  formCustomViewPath: string
-  processDefinition: ProcessDefinitionVO
-  status: number
-  remark: string
-  createTime: string
-  bpmnXml: string
+    id: number
+    formName: string
+    key: string
+    name: string
+    description: string
+    category: string
+    formType: number
+    formId: number
+    formCustomCreatePath: string
+    formCustomViewPath: string
+    processDefinition: ProcessDefinitionVO
+    status: number
+    remark: string
+    createTime: string
+    bpmnXml: string
 }
 
-
 const model = ref<ModelVO>() // 流程模型的信息
 
 /** 初始化 modeler */
 const initModeler = (item: any) => {
-  setTimeout(() => {
-    modeler.value = item
-  }, 10)
+    setTimeout(() => {
+        modeler.value = item
+    }, 10)
 }
 
 /** 添加/修改模型 */
 const save = async (bpmnXml: any) => {
-  const data = {
-    ...model.value,
-    bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
-  } as unknown as ModelVO
-  // 提交
-  if (data.id) {
-    await updateModel(data)
-    ElMessage.success('修改成功')
-  } else {
-    await addModel(data)
-    ElMessage.success('新增成功')
-  }
-  // 跳转回去
-  go(-1)
+    const data = {
+        ...model.value,
+        bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
+    } as unknown as ModelVO
+    // 提交
+    if (data.id) {
+        await updateModel(data)
+        ElMessage.success('修改成功')
+    } else {
+        await addModel(data)
+        ElMessage.success('新增成功')
+    }
+    // 跳转回去
+    go(-1)
 }
 
-
 /** 初始化 */
 onMounted(async () => {
-  const modelId = query.modelId as unknown as string
-  if (!modelId) {
-    ElMessage.error('缺少模型 modelId 编号')
-    return
-  }
-  // 查询模型
-  let data = {
-    bpmnXml: '',
-    key: '',
-    name: ''
-  }
-  await getById(modelId).then(res => {
-    data = res.data
-  })
-  if (!data.bpmnXml) {
-    // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
-    data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
+    const modelId = query.modelId as unknown as string
+    if (!modelId) {
+        ElMessage.error('缺少模型 modelId 编号')
+        return
+    }
+    // 查询模型
+    let data = {
+        bpmnXml: '',
+        key: '',
+        name: ''
+    }
+    await getById(modelId).then(res => {
+        data = res.data
+    })
+    if (!data.bpmnXml) {
+        // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
+        data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
 <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
   <process id="${data.key}" name="${data.name}" isExecutable="true" />
   <bpmndi:BPMNDiagram id="BPMNDiagram">
     <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" />
   </bpmndi:BPMNDiagram>
 </definitions>`
-  }
-  model.value = {
-    ...data,
-    bpmnXml: undefined // 清空 bpmnXml 属性
-  }
-  xmlString.value = data.bpmnXml
+    }
+    model.value = {
+        ...data,
+        bpmnXml: undefined // 清空 bpmnXml 属性
+    }
+    xmlString.value = data.bpmnXml
 })
 </script>
-<style lang='scss'>
+<style lang="scss">
 .process-panel__container {
-  position: absolute;
-  top: 190px;
-  right: 20px;
+    position: absolute;
+    top: 62px;
+    right: 20px;
+    background-color: #fff;
 }
 </style>