联调流程定义 流程图

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) => {

src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -1,161 +1,168 @@
 <template>
-  <div class="panel-tab__content">
-    <el-form label-width="90px" :model="needProps" :rules="rules">
-      <div v-if="needProps.type == 'bpmn:Process'">
-        <!-- <el-form-item label="流程标识" prop="id">
-          <el-input
-            v-model="needProps.id"
-            placeholder="请输入流标标识"
-            :disabled="needProps.id !== undefined && needProps.id.length > 0"
-            @change="handleKeyUpdate"
-          />
-        </el-form-item>
-        <el-form-item label="流程名称" prop="name">
-          <el-input
-            v-model="needProps.name"
-            placeholder="请输入流程名称"
-            clearable
-            @change="handleNameUpdate"
-          />
-        </el-form-item> -->
-      </div>
-      <div v-else>
-        <el-form-item label="ID">
-          <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
-        </el-form-item>
-        <el-form-item label="名称">
-          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="elementBaseInfo.documentation" clearable @change="updateBaseInfo('documentation')" />
-        </el-form-item>
-      </div>
-    </el-form>
-  </div>
+    <div class="panel-tab__content">
+        <el-form label-width="90px" :model="needProps" :rules="rules">
+            <div v-if="needProps.type == 'bpmn:Process'">
+                <el-form-item label="流程标识" prop="id">
+                    <el-input
+                        v-model="needProps.id"
+                        :disabled="needProps.id !== undefined && needProps.id.length > 0"
+                        placeholder="请输入流标标识"
+                        @change="handleKeyUpdate"
+                    />
+                </el-form-item>
+            </div>
+            <div v-else>
+                <el-form-item label="ID">
+                    <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
+                </el-form-item>
+                <el-form-item label="名称">
+                    <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+                </el-form-item>
+                <el-form-item label="描述">
+                    <el-input
+                        v-model="elementBaseInfo.documentation"
+                        clearable
+                        @change="updateBaseInfo('documentation')"
+                    />
+                </el-form-item>
+            </div>
+        </el-form>
+    </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw } from 'vue'
+import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw } from 'vue'
 defineOptions({ name: 'ElementBaseInfo' })
 
 const props = defineProps({
-  businessObject: {
-    type: Object,
-    default: () => {}
-  },
-  model: {
-    type: Object,
-    default: () => {}
-  }
+    businessObject: {
+        type: Object,
+        default: () => {}
+    },
+    model: {
+        type: Object,
+        default: () => {}
+    }
 })
 const needProps = ref<any>({})
 const bpmnElement = ref()
 const elementBaseInfo = ref<any>({})
+
 // 流程表单的下拉框的数据
 // const forms = ref([])
 // 流程模型的校验
 const rules = reactive({
-  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+    id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+    name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
 })
 
 const bpmnInstances = () => (window as any)?.bpmnInstances
 const resetBaseInfo = () => {
-  console.log(window, 'window')
-  console.log(bpmnElement.value, 'bpmnElement')
+    console.log(window, 'window')
+    console.log(bpmnElement.value, 'bpmnElement')
 
-  bpmnElement.value = bpmnInstances()?.bpmnElement
-  // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
-  elementBaseInfo.value = bpmnElement.value.businessObject
-  needProps.value['type'] = bpmnElement.value.businessObject.$type
-  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
+    bpmnElement.value = bpmnInstances()?.bpmnElement
+    // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+    elementBaseInfo.value = bpmnElement.value.businessObject
+    needProps.value['type'] = bpmnElement.value.businessObject.$type
+    // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
 
-  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
-  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
+    // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
+    // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 }
-const handleKeyUpdate = (value) => {
-  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
-  if (!value) {
-    return
-  }
-  if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
-    console.log('key 不满足 XML NCName 规则，所以不进行赋值')
-    return
-  }
-  console.log('key 满足 XML NCName 规则，所以进行赋值')
+const handleKeyUpdate = value => {
+    // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+    if (!value) {
+        return
+    }
+    if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
+        console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+        return
+    }
+    console.log('key 满足 XML NCName 规则，所以进行赋值')
 
-  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
-  elementBaseInfo.value['id'] = value
+    // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+    elementBaseInfo.value['id'] = value
 
-  setTimeout(() => {
-    updateBaseInfo('id')
-  }, 100)
+    setTimeout(() => {
+        updateBaseInfo('id')
+    }, 100)
 }
-const handleNameUpdate = (value) => {
-  console.log(elementBaseInfo, 'elementBaseInfo')
-  if (!value) {
-    return
-  }
-  elementBaseInfo.value['name'] = value
+const handleNameUpdate = value => {
+    console.log(elementBaseInfo, 'elementBaseInfo')
+    if (!value) {
+        return
+    }
+    elementBaseInfo.value['name'] = value
 
-  setTimeout(() => {
-    updateBaseInfo('name')
-  }, 100)
+    setTimeout(() => {
+        updateBaseInfo('name')
+    }, 100)
+}
+const handleClassifyUpdate = value => {
+    if (!value) {
+        return
+    }
+    elementBaseInfo.value['processCategory'] = value
+
+    setTimeout(() => {
+        updateBaseInfo('processCategory')
+    }, 100)
 }
 // const handleDescriptionUpdate=(value)=> {
 // TODO 芋艿：documentation 暂时无法修改，后续在看看
 // this.elementBaseInfo['documentation'] = value;
 // this.updateBaseInfo('documentation');
 // }
-const updateBaseInfo = (key) => {
-  console.log(key, 'key')
-  // 触发 elementBaseInfo 对应的字段
-  const attrObj = Object.create(null)
-  // console.log(attrObj, 'attrObj')
-  attrObj[key] = elementBaseInfo.value[key]
-  // console.log(attrObj, 'attrObj111')
-  // const attrObj = {
-  //   id: elementBaseInfo.value[key]
-  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
-  // }
-  // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
-  needProps.value = { ...elementBaseInfo.value, ...needProps.value }
+const updateBaseInfo = key => {
+    console.log(key, 'key')
+    // 触发 elementBaseInfo 对应的字段
+    const attrObj = Object.create(null)
+    // console.log(attrObj, 'attrObj')
+    attrObj[key] = elementBaseInfo.value[key]
+    // console.log(attrObj, 'attrObj111')
+    // const attrObj = {
+    //   id: elementBaseInfo.value[key]
+    //   // di: { id: `${elementBaseInfo.value[key]}_di` }
+    // }
+    // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+    needProps.value = { ...elementBaseInfo.value, ...needProps.value }
 
-  if (key === 'id') {
-    // console.log('jinru')
-    console.log(window, 'window')
-    console.log(bpmnElement.value, 'bpmnElement')
-    console.log(toRaw(bpmnElement.value), 'bpmnElement')
-    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
-      id: elementBaseInfo.value[key],
-      di: { id: `${elementBaseInfo.value[key]}_di` }
-    })
-  } else {
-    console.log(attrObj, 'attrObj')
-    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
-  }
+    if (key === 'id') {
+        // console.log('jinru')
+        console.log(window, 'window')
+        console.log(bpmnElement.value, 'bpmnElement')
+        console.log(toRaw(bpmnElement.value), 'bpmnElement')
+        bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+            id: elementBaseInfo.value[key],
+            di: { id: `${elementBaseInfo.value[key]}_di` }
+        })
+    } else {
+        console.log(attrObj, 'attrObj')
+        bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
+    }
 }
 
 watch(
-  () => props.businessObject,
-  (val) => {
-    // console.log(val, 'val11111111111111111111')
-    if (val) {
-      // nextTick(() => {
-      resetBaseInfo()
-      // })
+    () => props.businessObject,
+    val => {
+        // console.log(val, 'val11111111111111111111')
+        if (val) {
+            // nextTick(() => {
+            resetBaseInfo()
+            // })
+        }
     }
-  }
 )
 
 watch(
-  () => props.model?.key,
-  (val) => {
-    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
-    if (val) {
-      handleKeyUpdate(props.model.key)
-      handleNameUpdate(props.model.name)
+    () => props.model?.key,
+    val => {
+        // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
+        if (val) {
+            handleKeyUpdate(props.model.key)
+            handleNameUpdate(props.model.name)
+        }
     }
-  }
 )
 
 // watch(
@@ -178,6 +185,6 @@ watch(
 //   }
 // }
 onBeforeUnmount(() => {
-  bpmnElement.value = null
+    bpmnElement.value = null
 })
 </script>