联调流程定义 流程图

src/views/pqs/process/definition/allocation.vue

@@ -0,0 +1,46 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="挂载表单" width="700" :before-close="handleClose">
+        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="400" :data="equipmentList">
+            <vxe-column field="formId" title="序号"></vxe-column>
+            <vxe-column field="formName" title="功能名称"></vxe-column>
+            <vxe-column title="操作">
+                <template #default="{ row }">
+                        <el-button type="primary" size="small" link @click="mount(row)">挂载</el-button>
+                       
+                    </template>
+            </vxe-column>
+        </vxe-table>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary">确定</el-button>
+                <el-button @click="handleClose">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const dialogVisible = ref(false)
+const List = ref({})
+const equipmentList = ref([
+    { formId: '1', formName: '谐波普测计划' },
+    { formId: '2', formName: '干扰源用户管理' },
+    { formId: '3', formName: '电能质量问题管理' }
+])
+
+const handleClose = () => {
+    dialogVisible.value = false
+}
+// 挂载
+const mount = (row: any) => {
+    
+}
+const open = (row: any) => {
+    dialogVisible.value = true
+    List.value = row
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

src/views/pqs/process/definition/editor/index.vue

@@ -61,42 +61,38 @@ const initModeler = item => {
 }
 
 /** 添加/修改模型 */
-const save = async bpmnXml => {
+const save = async (bpmnXml: any, form: any) => {
     const data = {
         // name
         // flowableXml
         // category
         ...model.value,
         flowableXml: bpmnXml, // bpmnXml 只是初始化流程图，后续修改无法通过它获得
-        category: '',
-        name: ''
+        category: form.category,
+        name: form.name
     } as unknown as ModelApi.ModelVO
     // 提交
     if (data.id) {
-        await ModelApi.updateModel(data)
         ElMessage.success('修改成功')
     } else {
-        await ModelApi.createModel(data)
+        await ModelApi.save(data)
         ElMessage.success('新增成功')
     }
     // 跳转回去
-    close()
+    emit('quit')
 }
 
-/** 关闭按钮 */
-const close = () => {}
-const randomStr = () => {
-    return Math.random().toString(36).slice(-8)
-}
 /** 初始化 */
 onMounted(async () => {
     const data: any = {}
     if (prop.model?.deploymentId === undefined) {
         if (!data.bpmnXml) {
             // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
+            data.key = Math.random().toString(36).slice(-8)
+            console.log('🚀 ~ onMounted ~ data.key:', data.key)
             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}"  />
+    <process id="flow_${data.key}" name="${data.name || ''}"  />
     <bpmndi:BPMNDiagram id="BPMNDiagram">
       <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" />
     </bpmndi:BPMNDiagram>
@@ -110,11 +106,13 @@ onMounted(async () => {
     }
     // 查询模型
 
-    model.value = {
-        ...data,
-        bpmnXml: undefined // 清空 bpmnXml 属性
-    }
-    xmlString.value = data.bpmnXml
+    setTimeout(() => {
+        model.value = {
+            ...data,
+            bpmnXml: undefined // 清空 bpmnXml 属性
+        }
+        xmlString.value = data.bpmnXml
+    }, 0)
 })
 </script>
 <style lang="scss">

src/views/pqs/process/definition/index.vue

@@ -17,7 +17,10 @@
             <Table ref="tableRef"></Table>
         </div>
         <!-- 设计流程 -->
-        <editor v-if="!addedShow" :model="model" @quit="addedShow = true"/>
+        <editor v-if="!addedShow" :model="model" @quit="quit" />
+        <!-- 配置表单 -->
+        <Allocation ref="allocationRef" />
+
     </div>
 </template>
 
@@ -25,15 +28,17 @@
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
+import Allocation from './allocation.vue'
 import { onMounted, provide, ref } from 'vue'
 
-import editor from './editor/index.vue';
+import editor from './editor/index.vue'
 
 defineOptions({
-    name: 'harmonic-boot/reate/word'
+    name: '/flowable/definition/index'
 })
 
 const tableRef = ref()
+const allocationRef = ref()
 const model = ref({})
 const addedShow = ref(true)
 
@@ -99,7 +104,9 @@ const tableStore = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-Plus',
                     render: 'basicButton',
-                    click: async row => {}
+                    click: async row => {
+                        allocationRef.value.open(row)
+                    }
                 },
                 {
                     name: 'edit',
@@ -150,6 +157,10 @@ onMounted(() => {
     // 加载数据
     tableStore.index()
 })
+const quit = () => {
+    addedShow.value = true
+    tableStore.index()
+}
 tableStore.table.params.name = ''
 provide('tableStore', tableStore)
 </script>