联调流程定义 流程图

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -19,21 +19,6 @@
                         </template>
                         <el-button icon="el-icon-Download">下载文件</el-button>
                     </el-tooltip>
-                    <el-tooltip effect="light">
-                        <el-button icon="el-icon-View">浏览</el-button>
-                        <template #content>
-                            <el-button link @click="previewProcessXML">预览XML</el-button>
-                            <br />
-                            <el-button link @click="previewProcessJson">预览JSON</el-button>
-                        </template>
-                    </el-tooltip>
-                    <!-- <el-tooltip
-                        v-if="props.simulation"
-                        effect="light"
-                        :content="simulationStatus ? '退出模拟' : '开启模拟'"
-                    >
-                        <el-button icon="el-icon-Cpu" @click="processSimulation">模拟</el-button>
-                    </el-tooltip> -->
                 </ElButtonGroup>
                 <ElButtonGroup key="align-control">
                     <el-tooltip effect="light" content="向左对齐">
@@ -81,7 +66,7 @@
                 <el-button
                     icon="el-icon-Plus"
                     title="保存模型"
-                    @click="processSave"
+                    @click="preservation"
                     :type="props.headerButtonType"
                     :disabled="simulationStatus"
                 >
@@ -109,13 +94,25 @@
             <!-- <div id="js-properties-panel" class="panel"></div> -->
             <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
         </div>
-        <!-- <Dialog title="预览" v-model="previewModelVisible" width="80%" :scroll="true" max-height="600px">
-            <div v-highlight>
-                <code class="hljs">
-                    {{ previewResult }}
-                </code>
-            </div>
-        </Dialog> -->
+        <el-dialog title="保存流程" v-model="previewModelVisible" width="500px" :scroll="true" max-height="600px">
+            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto">
+                <el-form-item label="流程名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入流程名称" />
+                </el-form-item>
+                <el-form-item label="流程分类" prop="category">
+                    <el-select v-model="form.category" placeholder="请输入流程流程名分类">
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="previewModelVisible = false">取消</el-button>
+                    <el-button type="primary" @click="processSave">保存</el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -238,9 +235,28 @@ const defaultZoom = ref(1)
 const previewModelVisible = ref(false)
 const simulationStatus = ref(false)
 const previewResult = ref('')
+const ruleFormRef = ref()
 const previewType = ref('xml')
 const recoverable = ref(false)
 const revocable = ref(false)
+const rules = {
+    name: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
+    category: [{ required: true, message: '请输入流程分类', trigger: 'blur' }]
+}
+const options = [
+    {
+        name: '默认分类',
+        id: '默认分类'
+    },
+    {
+        name: '业务分类',
+        id: '业务分类'
+    }
+]
+const form = ref({
+    name: '',
+    category: ''
+})
 const additionalModules = computed(() => {
     console.log(props.additionalModel, 'additionalModel')
     const Modules: any[] = []
@@ -543,56 +559,26 @@ const elementsAlign = align => {
         Align.trigger(SelectedElements, align)
     })
 }
-/*-----------------------------    方法结束     ---------------------------------*/
-const previewProcessXML = () => {
-    console.log(bpmnModeler.saveXML, 'bpmnModeler')
-    bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-        // console.log(xml, 'xml111111')
-        previewResult.value = xml
-        previewType.value = 'xml'
-        previewModelVisible.value = true
-    })
-}
-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
-    })
+// 保存
+const preservation = () => {
+    previewModelVisible.value = true
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-    // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
-    const { err, xml } = await bpmnModeler.saveXML()
-    // console.log(err, 'errerrerrerrerr')
-    // console.log(xml, 'xmlxmlxmlxmlxml')
-    // 读取异常时抛出异常
-    if (err) {
-        // this.$modal.msgError('保存模型失败，请重试！')
-        alert('保存模型失败，请重试！')
-        return
-    }
-    // 触发 save 事件
-    emit('save', xml)
+    ruleFormRef.value.validate(async valid => {
+        if (valid) {
+            const { err, xml } = await bpmnModeler.saveXML()
+
+            // 读取异常时抛出异常
+            if (err) {
+                // this.$modal.msgError('保存模型失败，请重试！')
+                alert('保存模型失败，请重试！')
+                return
+            }
+            // 触发 save 事件
+            emit('save', xml, form.value)
+        }
+    })
 }
 /** 高亮显示 */
 // const highlightedCode = (previewType, previewResult) => {