diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1081f23..8ad1100 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -184,5 +184,8 @@
     ".eslintrc.cjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,.stylelintrc.*"
   },
   "terminal.integrated.scrollback": 10000,
-  "nuxt.isNuxtApp": false
+  "nuxt.isNuxtApp": false,
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }
diff --git a/package.json b/package.json
index e429ec1..eff83b9 100644
--- a/package.json
+++ b/package.json
@@ -79,17 +79,23 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "ant-design-vue": "^4.0.8",
     "axios": "^1.6.4",
+    "bpmn-js": "^17.0.2",
+    "bpmn-js-properties-panel": "^5.13.0",
+    "bpmn-js-token-simulation": "^0.33.1",
     "codemirror": "^5.65.16",
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
+    "diagram-js": "^14.1.0",
     "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "exceljs": "^4.4.0",
+    "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mars3d": "^3.7.0",
     "mars3d-cesium": "^1.113.0",
+    "min-dash": "^4.2.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
@@ -116,7 +122,8 @@
     "vxe-table": "^4.5.17",
     "vxe-table-plugin-export-xlsx": "^3.1.0",
     "xe-utils": "^3.5.14",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",
diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts
index e012d85..4a6253f 100644
--- a/src/api/sys/user.ts
+++ b/src/api/sys/user.ts
@@ -3,7 +3,6 @@
  * @Date: 2024-01-13 13:04:15
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-02-05 16:06:58
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\api\sys\user.ts
  * @Description: 
  */
 import { defHttp } from '@/utils/http/axios';
diff --git a/src/components/Bwflow/index.ts b/src/components/Bwflow/index.ts
new file mode 100644
index 0000000..4d6ee65
--- /dev/null
+++ b/src/components/Bwflow/index.ts
@@ -0,0 +1,13 @@
+/*
+ * @Author: 刘妍
+ * @Date: 2024-03-01 15:55:24
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-02 16:08:00
+ * @Description: 
+ */
+import { withInstall } from '@/utils';
+
+import bWflowViewer from './src/bWflowViewer.vue'
+
+export const BWflowViewer = withInstall(bWflowViewer);
+
diff --git a/src/components/Bwflow/src/bWflowViewer.vue b/src/components/Bwflow/src/bWflowViewer.vue
new file mode 100644
index 0000000..7bb1375
--- /dev/null
+++ b/src/components/Bwflow/src/bWflowViewer.vue
@@ -0,0 +1,130 @@
+<template>
+  <div id="app">
+    <a-button class="ml-2" title="撤销" :icon="h(RedoOutlined)" @click="handleUndo"> </a-button>
+    <a-button title="复原" :icon="h(UndoOutlined)"  @click="handleRedo"> </a-button>
+    <a-button class="ml-2" title=" 重做" :icon="h(StopOutlined)"> </a-button>
+    <a-button title="放大" :icon="h(PlusCircleOutlined)"> </a-button>
+    <a-button title="缩小" :icon="h(MinusCircleOutlined)"> </a-button>
+    <a-button title="下载" :icon="h(SearchOutlined)" @click="handleDownload"> </a-button>
+    
+    <div id="container"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, ref, onMounted, reactive } from 'vue';
+  import { RedoOutlined, UndoOutlined, StopOutlined, PlusCircleOutlined, MinusCircleOutlined, SearchOutlined } from '@ant-design/icons-vue';
+  import { Button } from 'ant-design-vue';
+
+  import BpmnModeler from 'bpmn-js/lib/Modeler';
+  import camundaExtension from './js/camunda.json'; //定义各个元素拥有的属性配置
+  import customTranslate from "./js/customTranslate.js";//汉化
+  import EventEmitter from './utils/EventEmitter'
+  const state = reactive({
+    containerEl: null,
+    bpmnModeler: null,
+    fileList: [],
+  });
+  EventEmitter.instance.on('modeler-init', (modeler) => {
+        modeler.on('element.click', (element) => {
+          console.log(element)
+          currentElement.value = element
+        })
+      })
+  function create() {
+    state.bpmnModeler.createDiagram(() => {
+      state.bpmnModeler.get('canvas').zoom('fit-viewport');
+    });
+  }
+  function handleRemove(file) {
+    for (let i = 0; i < state.fileList.length; i++) {
+      if (file.name === state.fileList[i].name) {
+        state.fileList.splice(i, 1);
+      }
+    }
+  }
+  function beforeRemove(file) {
+    return this.$confirm(`确定移除 ${file.name}？`);
+  }
+  // 后退
+  function handleUndo() {
+    state.bpmnModeler.get('commandStack').undo();
+  }
+  // 前进
+  function handleRedo() {
+    state.bpmnModeler.get('commandStack').redo();
+  }
+  function handleDownload() {
+    console.log(state.bpmnModeler)
+
+    state.bpmnModeler.saveXML({ format: true }, (err, data) => {
+      console.log(data)
+      // const dataTrack = 'bpmn';
+      // const a = document.createElement('a');
+      // const name = `diagram.${dataTrack}`;
+      // a.setAttribute(
+      //     'href',
+      //     `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
+      // );
+      // a.setAttribute('target', '_blank');
+      // a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
+      // a.setAttribute('download', name);
+      // document.body.appendChild(a);
+      // a.click();
+      // document.body.removeChild(a);
+    });
+  }
+  function handleOnchangeFile(file) {
+    const reader = new FileReader();
+    let data = '';
+    reader.readAsText(file.raw);
+    reader.onload = (event) => {
+      data = event.target.result;
+      state.bpmnModeler.importXML(data, (err) => {
+        if (err) {
+          this.$message.info('导入失败');
+        } else {
+          this.$message.success('导入成功');
+        }
+      });
+    };
+  }
+
+  onMounted(() => {
+    let customTranslateModule = {
+      translate: ["value", customTranslate]
+    };
+    state.containerEl = document.querySelector('#container');
+    state.bpmnModeler = new BpmnModeler({
+      container: state.containerEl,
+      moddleExtensions: { camunda: camundaExtension },
+      additionalModules: [
+        // 汉化
+        customTranslateModule,
+      ],
+    });
+    create();
+  })
+</script>
+
+<style>
+  #app {
+    width: 100%;
+    height: 100%;
+  }
+
+  body,
+  html {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  #container {
+    height: calc(100% - 50px);
+    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
+    background-image: linear-gradient(to right, #dfdfdf 1px, transparent 1px), linear-gradient(to bottom, #dfdfdf 1px, transparent 1px), linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
+    background-position: left -1px top -1px, left -1px top -1px, left -1px top -1px, left -1px top -1px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Bwflow/src/js/camunda.json b/src/components/Bwflow/src/js/camunda.json
new file mode 100644
index 0000000..9c98363
--- /dev/null
+++ b/src/components/Bwflow/src/js/camunda.json
@@ -0,0 +1,1121 @@
+{
+  "name":"Camunda",
+  "uri": "http://camunda.org/schema/1.0/bpmn",
+  "prefix": "camunda",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Definitions"
+      ],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": [
+        "Element"
+      ],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Activity",
+        "bpmn:Gateway",
+        "bpmn:Event"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "camunda:AsyncCapable"
+      ],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:SignalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ErrorEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Error"
+      ],
+      "properties": [
+        {
+          "name": "camunda:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:StartEvent",
+        "bpmn:UserTask"
+      ],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "bpmn:FlowElement"
+      ],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:StartEvent"
+      ],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ScriptTask"
+      ],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process"
+      ],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:EscalationEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:FormalExpression"
+      ],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": [
+        "bpmn:UserTask"
+      ],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": [
+        "bpmn:CallActivity"
+      ],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": [
+        "bpmn:BusinessRuleTask"
+      ],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": [
+        "camunda:ServiceTaskLike"
+      ],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": [
+        "bpmn:Process",
+        "camunda:ExternalCapable"
+      ],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "*"
+        ]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:FlowNode",
+          "camunda:Connector"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike",
+          "camunda:ExecutionListener",
+          "camunda:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": [
+        "InputOutputParameter"
+      ]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": [
+        "InputOutputParameter"
+      ]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:MultiInstanceLoopCharacteristics"
+      ],
+      "superClass": [
+        "camunda:AsyncCapable"
+      ],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "camunda:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ConditionalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/src/components/Bwflow/src/js/customTranslate.js b/src/components/Bwflow/src/js/customTranslate.js
new file mode 100644
index 0000000..e268404
--- /dev/null
+++ b/src/components/Bwflow/src/js/customTranslate.js
@@ -0,0 +1,14 @@
+import translations from './translations';
+
+
+export default function customTranslate(template, replacements) {
+    replacements = replacements || {};
+
+    // Translate
+    template = translations[template] || template;
+
+    // Replace
+    return template.replace(/{([^}]+)}/g, function(_, key) {
+        return replacements[key] || '{' + key + '}';
+    });
+}
diff --git a/src/components/Bwflow/src/js/translations.js b/src/components/Bwflow/src/js/translations.js
new file mode 100644
index 0000000..70f4d93
--- /dev/null
+++ b/src/components/Bwflow/src/js/translations.js
@@ -0,0 +1,240 @@
+export default {
+  // hong
+  // Labels
+  'Activate the global connect tool' : '激活全局连接工具',
+  'Append {type}': '追加 {type}',
+  'Append EndEvent': '追加 结束事件 ',
+  'Append Task':'追加 任务',
+  'Append Gateway':'追加 网关',
+  'Append Intermediate/Boundary Event':'追加 中间/边界 事件',
+  'Add Lane above': '在上面添加道',
+  'Divide into two Lanes': '分割成两个道',
+  'Divide into three Lanes': '分割成三个道',
+  'Add Lane below': '在下面添加道',
+  'Append compensation activity': '追加补偿活动',
+  'Change type': '修改类型',
+  'Connect using Association': '使用关联连接',
+  'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
+  'Connect using DataInputAssociation': '使用数据输入关联连接',
+  'Remove': '移除',
+  'Activate the hand tool': '激活抓手工具',
+  'Activate the lasso tool': '激活套索工具',
+  'Activate the create/remove space tool': '激活创建/删除空间工具',
+  'Create expanded SubProcess': '创建扩展子过程',
+  'Create IntermediateThrowEvent/BoundaryEvent' : '创建中间抛出事件/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Parallel Multi Instance': '并行多重事件',
+  'Sequential Multi Instance': '时序多重事件',
+  'DataObjectReference':'数据对象参考',
+  'DataStoreReference':'数据存储参考',
+  'Loop': '循环',
+  'Ad-hoc': '即席',
+  'Create {type}': '创建 {type}',
+  'Create Task':'创建任务',
+  'Create StartEvent':'创建开始事件',
+  'Create EndEvent':'创建结束事件',
+  'Create Group':'创建组',
+  'Task': '任务',
+  'Send Task': '发送任务',
+  'Receive Task': '接收任务',
+  'User Task': '用户任务',
+  'Manual Task': '手工任务',
+  'Business Rule Task': '业务规则任务',
+  'Service Task': '服务任务',
+  'Script Task': '脚本任务',
+  'Call Activity': '调用活动',
+  'Sub Process (collapsed)': '子流程（折叠的）',
+  'Sub Process (expanded)': '子流程（展开的）',
+  'Start Event': '开始事件',
+  'StartEvent': '开始事件',
+  'Intermediate Throw Event': '中间事件',
+  'End Event': '结束事件',
+  'EndEvent': '结束事件',
+  'Create Gateway': '创建网关',
+  'GateWay':'网关',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  'Message Start Event': '消息开始事件',
+  'Timer Start Event': '定时开始事件',
+  'Conditional Start Event': '条件开始事件',
+  'Signal Start Event': '信号开始事件',
+  'Error Start Event': '错误开始事件',
+  'Escalation Start Event': '升级开始事件',
+  'Compensation Start Event': '补偿开始事件',
+  'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
+  'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
+  'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
+  'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
+  'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
+  'Message Intermediate Catch Event': '消息中间捕获事件',
+  'Message Intermediate Throw Event': '消息中间抛出事件',
+  'Timer Intermediate Catch Event': '定时中间捕获事件',
+  'Escalation Intermediate Throw Event': '升级中间抛出事件',
+  'Conditional Intermediate Catch Event': '条件中间捕获事件',
+  'Link Intermediate Catch Event': '链接中间捕获事件',
+  'Link Intermediate Throw Event': '链接中间抛出事件',
+  'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+  'Signal Intermediate Catch Event': '信号中间捕获事件',
+  'Signal Intermediate Throw Event': '信号中间抛出事件',
+  'Message End Event': '消息结束事件',
+  'Escalation End Event': '定时结束事件',
+  'Error End Event': '错误结束事件',
+  'Cancel End Event': '取消结束事件',
+  'Compensation End Event': '补偿结束事件',
+  'Signal End Event': '信号结束事件',
+  'Terminate End Event': '终止结束事件',
+  'Message Boundary Event': '消息边界事件',
+  'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+  'Error Boundary Event': '错误边界事件',
+  'Cancel Boundary Event': '取消边界事件',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Exclusive Gateway': '互斥网关',
+  'Parallel Gateway': '并行网关',
+  'Inclusive Gateway': '相容网关',
+  'Complex Gateway': '复杂网关',
+  'Event based Gateway': '事件网关',
+  'Transaction': '转运',
+  'Sub Process': '子流程',
+  'Event Sub Process': '事件子流程',
+  'Collapsed Pool': '折叠池',
+  'Expanded Pool': '展开池',
+  // Errors
+  'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+  'no shape type specified': '没有指定的形状类型',
+  'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
+  'out of bounds release': 'out of bounds release',
+  'more than {count} child lanes': '子道大于{count} ',
+  'element required': '元素不能为空',
+  'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+  'no diagram to display': '没有可展示的流程图',
+  'no process or collaboration to display': '没有可展示的流程/协作',
+  'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
+  'already rendered {element}': '{element} 已被渲染',
+  'failed to import {element}': '导入{element}失败',
+  //属性面板的参数
+  'Id':'编号',
+  'Name':'名称',
+  'General':'常规',
+  'Details':'详情',
+  'Message Name':'消息名称',
+  'Message':'消息',
+  'Initiator':'创建者',
+  'Asynchronous Continuations':'持续异步',
+  'Asynchronous Before':'异步前',
+  'Asynchronous After':'异步后',
+  'Job Configuration':'工作配置',
+  'Exclusive':'排除',
+  'Job Priority':'工作优先级',
+  'Retry Time Cycle':'重试时间周期',
+  'Documentation':'文档',
+  'Element Documentation':'元素文档',
+  'History Configuration':'历史配置',
+  'History Time To Live':'历史的生存时间',
+  'Forms':'表单',
+  'Form Key':'表单key',
+  'Form Fields':'表单字段',
+  'Business Key':'业务key',
+  'Form Field':'表单字段',
+  'ID':'编号',
+  'Type':'类型',
+  'Label':'名称',
+  'Default Value':'默认值',
+  'Validation':'校验',
+  'Add Constraint':'添加约束',
+  'Config':'配置',
+  'Properties':'属性',
+  'Add Property':'添加属性',
+  'Value':'值',
+  'Add':'添加',
+  'Values':'值',
+  'Add Value':'添加值',
+  'Listeners':'监听器',
+  'Execution Listener':'执行监听',
+  'Event Type':'事件类型',
+  'Listener Type':'监听器类型',
+  'Java Class':'Java类',
+  'Expression':'表达式',
+  'Must provide a value':'必须提供一个值',
+  'Delegate Expression':'代理表达式',
+  'Script':'脚本',
+  'Script Format':'脚本格式',
+  'Script Type':'脚本类型',
+  'Inline Script':'内联脚本',
+  'External Script':'外部脚本',
+  'Resource':'资源',
+  'Field Injection':'字段注入',
+  'Extensions':'扩展',
+  'Input/Output':'输入/输出',
+  'Input Parameters':'输入参数',
+  'Output Parameters':'输出参数',
+  'Parameters':'参数',
+  'Output Parameter':'输出参数',
+  'Timer Definition Type':'定时器定义类型',
+  'Timer Definition':'定时器定义',
+  'Date':'日期',
+  'Duration':'持续',
+  'Cycle':'循环',
+  'Signal':'信号',
+  'Signal Name':'信号名称',
+  'Escalation':'升级',
+  'Error':'错误',
+  'Link Name':'链接名称',
+  'Condition':'条件名称',
+  'Variable Name':'变量名称',
+  'Variable Event':'变量事件',
+  'Specify more than one variable change event as a comma separated list.':'多个变量事件以逗号隔开',
+  'Wait for Completion':'等待完成',
+  'Activity Ref':'活动参考',
+  'Version Tag':'版本标签',
+  'Executable':'可执行文件',
+  'External Task Configuration':'扩展任务配置',
+  'Task Priority':'任务优先级',
+  'External':'外部',
+  'Connector':'连接器',
+  'Must configure Connector':'必须配置连接器',
+  'Connector Id':'连接器编号',
+  'Implementation':'实现方式',
+  'Field Injections':'字段注入',
+  'Fields':'字段',
+  'Result Variable':'结果变量',
+  'Topic':'主题',
+  'Configure Connector':'配置连接器',
+  'Input Parameter':'输入参数',
+  'Assignee':'代理人',
+  'Candidate Users':'候选用户',
+  'Candidate Groups':'候选组',
+  'Due Date':'到期时间',
+  'Follow Up Date':'跟踪日期',
+  'Priority':'优先级',
+  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'Variables':'变量',
+  'Candidate Starter Configuration':'候选开始配置',
+  'Task Listener':'任务监听器',
+  'Candidate Starter Groups':'候选开始组',
+  'Candidate Starter Users':'候选开始用户',
+  'Tasklist Configuration':'任务列表配置',
+  'Startable':'启动',
+  'Specify more than one group as a comma separated list.':'指定多个组,用逗号分隔',
+  'Specify more than one user as a comma separated list.':'指定多个用户,用逗号分隔',
+  'This maps to the process definition key.':'这会映射为流程定义的键',
+  'CallActivity Type':'调用活动类型',
+  'Condition Type':'条件类型',
+  'Create UserTask':'创建用户任务',
+  'Create CallActivity':'创建调用活动',
+  'Called Element':'调用元素',
+  'Create DataObjectReference':'创建数据对象引用',
+  'Create DataStoreReference':'创建数据存储引用',
+  'Multi Instance':'多实例',
+  'Loop Cardinality':'实例数量',
+  'Collection':'任务参与人列表',
+  'Element Variable':'元素变量',
+  'Completion Condition':'完成条件'
+};
diff --git a/src/components/Bwflow/src/utils/EventEmitter.d.ts b/src/components/Bwflow/src/utils/EventEmitter.d.ts
new file mode 100644
index 0000000..d2101f7
--- /dev/null
+++ b/src/components/Bwflow/src/utils/EventEmitter.d.ts
@@ -0,0 +1,21 @@
+declare class EventEmitter {
+    private _events;
+    private static _instance;
+    static instance(): EventEmitter;
+    constructor();
+    private _addListener;
+    addListener(type: string, fn: any, context?: any): this;
+    on(type: string, fn: any, context?: any): this;
+    once(type: string, fn: any, context?: any): this;
+    emit(type: any, ...rest: any[]): boolean;
+    removeListener(type: any, fn: any): this;
+    removeAllListeners(type: any): this;
+    listeners(type: any): Function[];
+    listenerCount(type: any): number;
+    eventNames(): string[];
+}
+declare const _default: {
+    EventEmitter: typeof EventEmitter;
+    instance: EventEmitter;
+};
+export default _default;
diff --git a/src/components/Bwflow/src/utils/EventEmitter.js b/src/components/Bwflow/src/utils/EventEmitter.js
new file mode 100644
index 0000000..c6bfe1a
--- /dev/null
+++ b/src/components/Bwflow/src/utils/EventEmitter.js
@@ -0,0 +1,141 @@
+import { getRawType, notNull } from './tools';
+const isArray = (obj) => getRawType(obj) === 'array';
+const isNullOrUndefined = (obj) => !notNull(obj);
+class EventEmitter {
+    _events = {};
+    static _instance = null;
+    static instance() {
+        // 单例模式
+        if (!this._instance) {
+            this._instance = new EventEmitter();
+        }
+        return this._instance;
+    }
+    constructor() {
+        if (this._events === undefined) {
+            this._events = Object.create(null);
+        }
+    }
+    _addListener(type, fn, context, once) {
+        if (typeof fn !== 'function') {
+            throw new TypeError('fn must be a function');
+        }
+        fn.context = context;
+        fn.once = !!once;
+        const event = this._events[type];
+        // only one, let `this._events[type]` to be a function
+        if (isNullOrUndefined(event)) {
+            this._events[type] = fn;
+        }
+        else if (typeof event === 'function') {
+            // already has one function, `this._events[type]` must be a function before
+            this._events[type] = [event, fn];
+        }
+        else if (isArray(event)) {
+            // already has more than one function, just push
+            this._events[type].push(fn);
+        }
+        return this;
+    }
+    addListener(type, fn, context) {
+        return this._addListener(type, fn, context);
+    }
+    on(type, fn, context) {
+        return this.addListener(type, fn, context);
+    }
+    once(type, fn, context) {
+        return this._addListener(type, fn, context, true);
+    }
+    emit(type, ...rest) {
+        if (isNullOrUndefined(type)) {
+            throw new Error('emit must receive at lease one argument');
+        }
+        const event = this._events[type];
+        if (isNullOrUndefined(event))
+            return false;
+        if (typeof event === 'function') {
+            event.call(event.context || null, ...rest);
+            if (event.once) {
+                this.removeListener(type, event);
+            }
+        }
+        else if (isArray(event)) {
+            event.map((e) => {
+                e.call(e.context || null, ...rest);
+                if (e.once) {
+                    this.removeListener(type, e);
+                }
+            });
+        }
+        return true;
+    }
+    removeListener(type, fn) {
+        if (isNullOrUndefined(this._events))
+            return this;
+        // if type is undefined or null, nothing to do, just return this
+        if (isNullOrUndefined(type))
+            return this;
+        if (typeof fn !== 'function') {
+            throw new Error('fn must be a function');
+        }
+        const events = this._events[type];
+        if (typeof events === 'function') {
+            events === fn && delete this._events[type];
+        }
+        else {
+            const findIndex = events.findIndex((e) => e === fn);
+            if (findIndex === -1)
+                return this;
+            // match the first one, shift faster than splice
+            if (findIndex === 0) {
+                events.shift();
+            }
+            else {
+                events.splice(findIndex, 1);
+            }
+            // just left one listener, change Array to Function
+            if (events.length === 1) {
+                // @ts-ignore
+                this._events[type] = events[0];
+            }
+        }
+        return this;
+    }
+    removeAllListeners(type) {
+        if (isNullOrUndefined(this._events))
+            return this;
+        // if not provide type, remove all
+        if (isNullOrUndefined(type))
+            this._events = Object.create(null);
+        const events = this._events[type];
+        if (!isNullOrUndefined(events)) {
+            // check if `type` is the last one
+            if (Object.keys(this._events).length === 1) {
+                this._events = Object.create(null);
+            }
+            else {
+                delete this._events[type];
+            }
+        }
+        return this;
+    }
+    listeners(type) {
+        if (isNullOrUndefined(this._events))
+            return [];
+        const events = this._events[type];
+        // use `map` because we need to return a new array
+        return isNullOrUndefined(events) ? [] : typeof events === 'function' ? [events] : events.map((o) => o);
+    }
+    listenerCount(type) {
+        if (isNullOrUndefined(this._events))
+            return 0;
+        const events = this._events[type];
+        return isNullOrUndefined(events) ? 0 : typeof events === 'function' ? 1 : events.length;
+    }
+    eventNames() {
+        if (isNullOrUndefined(this._events))
+            return [];
+        return Object.keys(this._events);
+    }
+}
+export default { EventEmitter, instance: EventEmitter.instance() };
diff --git a/src/components/Bwflow/src/utils/EventEmitter.ts b/src/components/Bwflow/src/utils/EventEmitter.ts
new file mode 100644
index 0000000..f5b1097
--- /dev/null
+++ b/src/components/Bwflow/src/utils/EventEmitter.ts
@@ -0,0 +1,163 @@
+import { getRawType, notNull } from './tools'
+
+const isArray = (obj) => getRawType(obj) === 'array'
+const isNullOrUndefined = (obj) => !notNull(obj)
+
+class EventEmitter {
+  private _events: { [key: string]: Function[] } = {}
+  private static _instance: null | EventEmitter = null
+
+  static instance(): EventEmitter {
+    // 单例模式
+    if (!this._instance) {
+      this._instance = new EventEmitter()
+    }
+    return this._instance
+  }
+
+  constructor() {
+    if (this._events === undefined) {
+      this._events = Object.create(null)
+    }
+  }
+
+  private _addListener(type: string, fn: any, context?: any, once?) {
+    if (typeof fn !== 'function') {
+      throw new TypeError('fn must be a function')
+    }
+
+    fn.context = context
+    fn.once = !!once
+
+    const event = this._events[type]
+    // only one, let `this._events[type]` to be a function
+    if (isNullOrUndefined(event)) {
+      this._events[type] = fn
+    } else if (typeof event === 'function') {
+      // already has one function, `this._events[type]` must be a function before
+      this._events[type] = [event, fn]
+    } else if (isArray(event)) {
+      // already has more than one function, just push
+      this._events[type].push(fn)
+    }
+
+    return this
+  }
+
+  addListener(type: string, fn: any, context?: any) {
+    return this._addListener(type, fn, context)
+  }
+
+  on(type: string, fn: any, context?: any) {
+    return this.addListener(type, fn, context)
+  }
+
+  once(type: string, fn: any, context?: any) {
+    return this._addListener(type, fn, context, true)
+  }
+
+  emit(type, ...rest) {
+    if (isNullOrUndefined(type)) {
+      throw new Error('emit must receive at lease one argument')
+    }
+
+    const event: any = this._events[type]
+
+    if (isNullOrUndefined(event)) return false
+
+    if (typeof event === 'function') {
+      event.call(event.context || null, ...rest)
+      if (event.once) {
+        this.removeListener(type, event)
+      }
+    } else if (isArray(event)) {
+      event.map((e) => {
+        e.call(e.context || null, ...rest)
+        if (e.once) {
+          this.removeListener(type, e)
+        }
+      })
+    }
+
+    return true
+  }
+
+  removeListener(type, fn) {
+    if (isNullOrUndefined(this._events)) return this
+
+    // if type is undefined or null, nothing to do, just return this
+    if (isNullOrUndefined(type)) return this
+
+    if (typeof fn !== 'function') {
+      throw new Error('fn must be a function')
+    }
+
+    const events = this._events[type]
+
+    if (typeof events === 'function') {
+      events === fn && delete this._events[type]
+    } else {
+      const findIndex = events.findIndex((e) => e === fn)
+
+      if (findIndex === -1) return this
+
+      // match the first one, shift faster than splice
+      if (findIndex === 0) {
+        events.shift()
+      } else {
+        events.splice(findIndex, 1)
+      }
+
+      // just left one listener, change Array to Function
+      if (events.length === 1) {
+        // @ts-ignore
+        this._events[type] = events[0]
+      }
+    }
+
+    return this
+  }
+
+  removeAllListeners(type) {
+    if (isNullOrUndefined(this._events)) return this
+
+    // if not provide type, remove all
+    if (isNullOrUndefined(type)) this._events = Object.create(null)
+
+    const events = this._events[type]
+    if (!isNullOrUndefined(events)) {
+      // check if `type` is the last one
+      if (Object.keys(this._events).length === 1) {
+        this._events = Object.create(null)
+      } else {
+        delete this._events[type]
+      }
+    }
+
+    return this
+  }
+
+  listeners(type) {
+    if (isNullOrUndefined(this._events)) return []
+
+    const events = this._events[type]
+    // use `map` because we need to return a new array
+    return isNullOrUndefined(events) ? [] : typeof events === 'function' ? [events] : events.map((o) => o)
+  }
+
+  listenerCount(type) {
+    if (isNullOrUndefined(this._events)) return 0
+
+    const events = this._events[type]
+
+    return isNullOrUndefined(events) ? 0 : typeof events === 'function' ? 1 : events.length
+  }
+
+  eventNames() {
+    if (isNullOrUndefined(this._events)) return []
+
+    return Object.keys(this._events)
+  }
+}
+
+export default { EventEmitter, instance: EventEmitter.instance() }
diff --git a/src/components/Bwflow/src/utils/emptyXML.d.ts b/src/components/Bwflow/src/utils/emptyXML.d.ts
new file mode 100644
index 0000000..1a6b80b
--- /dev/null
+++ b/src/components/Bwflow/src/utils/emptyXML.d.ts
@@ -0,0 +1,2 @@
+declare const _default: (key: string, name: string, type?: string | undefined) => string;
+export default _default;
diff --git a/src/components/Bwflow/src/utils/emptyXML.js b/src/components/Bwflow/src/utils/emptyXML.js
new file mode 100644
index 0000000..3dee2d4
--- /dev/null
+++ b/src/components/Bwflow/src/utils/emptyXML.js
@@ -0,0 +1,25 @@
+export default (key, name, type) => {
+    if (!type)
+        type = 'camunda';
+    const TYPE_TARGET = {
+        activiti: 'http://activiti.org/bpmn',
+        camunda: 'http://bpmn.io/schema/bpmn',
+        flowable: 'http://flowable.org/bpmn'
+    };
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions 
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`;
+};
diff --git a/src/components/Bwflow/src/utils/emptyXML.ts b/src/components/Bwflow/src/utils/emptyXML.ts
new file mode 100644
index 0000000..847ea3c
--- /dev/null
+++ b/src/components/Bwflow/src/utils/emptyXML.ts
@@ -0,0 +1,24 @@
+export default (key: string, name: string, type?: string): string => {
+  if (!type) type = 'camunda'
+  const TYPE_TARGET = {
+    activiti: 'http://activiti.org/bpmn',
+    camunda: 'http://bpmn.io/schema/bpmn',
+    flowable: 'http://flowable.org/bpmn'
+  }
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions 
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`
+}
diff --git a/src/components/Bwflow/src/utils/storage.d.ts b/src/components/Bwflow/src/utils/storage.d.ts
new file mode 100644
index 0000000..a7dd4af
--- /dev/null
+++ b/src/components/Bwflow/src/utils/storage.d.ts
@@ -0,0 +1,7 @@
+declare function setLocal(key: string, value: any): void;
+declare function getLocal(key: string): any;
+declare const _default: {
+    setLocal: typeof setLocal;
+    getLocal: typeof getLocal;
+};
+export default _default;
diff --git a/src/components/Bwflow/src/utils/storage.js b/src/components/Bwflow/src/utils/storage.js
new file mode 100644
index 0000000..26a64be
--- /dev/null
+++ b/src/components/Bwflow/src/utils/storage.js
@@ -0,0 +1,10 @@
+function setLocal(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+}
+function getLocal(key) {
+    return JSON.parse(localStorage.getItem(key) || '');
+}
+export default {
+    setLocal,
+    getLocal
+};
diff --git a/src/components/Bwflow/src/utils/storage.ts b/src/components/Bwflow/src/utils/storage.ts
new file mode 100644
index 0000000..508af19
--- /dev/null
+++ b/src/components/Bwflow/src/utils/storage.ts
@@ -0,0 +1,12 @@
+function setLocal(key: string, value: any) {
+  localStorage.setItem(key, JSON.stringify(value))
+}
+
+function getLocal(key: string) {
+  return JSON.parse(localStorage.getItem(key) || '')
+}
+
+export default {
+  setLocal,
+  getLocal
+}
diff --git a/src/components/Bwflow/src/utils/tools.d.ts b/src/components/Bwflow/src/utils/tools.d.ts
new file mode 100644
index 0000000..d31839c
--- /dev/null
+++ b/src/components/Bwflow/src/utils/tools.d.ts
@@ -0,0 +1,14 @@
+export declare function noop(): void;
+/**
+ * 校验非空
+ * @param {*} val
+ * @return boolean
+ */
+export declare function notEmpty(val: any): any;
+export declare function notNull(val: any): boolean;
+/**
+ * 返回数据原始类型
+ * @param value
+ * @return { 'string' | 'array' | 'boolean' | 'number' | 'object' | 'function' } type
+ */
+export declare function getRawType(value: any): string;
diff --git a/src/components/Bwflow/src/utils/tools.js b/src/components/Bwflow/src/utils/tools.js
new file mode 100644
index 0000000..1b9eb29
--- /dev/null
+++ b/src/components/Bwflow/src/utils/tools.js
@@ -0,0 +1,30 @@
+/* 空函数 */
+export function noop() { }
+/**
+ * 校验非空
+ * @param {*} val
+ * @return boolean
+ */
+export function notEmpty(val) {
+    if (!notNull(val)) {
+        return false;
+    }
+    if (getRawType(val) === 'array') {
+        return val.length;
+    }
+    if (getRawType(val) === 'object') {
+        return Reflect.ownKeys(val).length;
+    }
+    return true;
+}
+export function notNull(val) {
+    return val !== undefined && val !== null;
+}
+/**
+ * 返回数据原始类型
+ * @param value
+ * @return { 'string' | 'array' | 'boolean' | 'number' | 'object' | 'function' } type
+ */
+export function getRawType(value) {
+    return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+}
diff --git a/src/components/Bwflow/src/utils/tools.ts b/src/components/Bwflow/src/utils/tools.ts
new file mode 100644
index 0000000..0004ee8
--- /dev/null
+++ b/src/components/Bwflow/src/utils/tools.ts
@@ -0,0 +1,32 @@
+/* 空函数 */
+export function noop() {}
+
+/**
+ * 校验非空
+ * @param {*} val
+ * @return boolean
+ */
+export function notEmpty(val) {
+  if (!notNull(val)) {
+    return false
+  }
+  if (getRawType(val) === 'array') {
+    return val.length
+  }
+  if (getRawType(val) === 'object') {
+    return Reflect.ownKeys(val).length
+  }
+  return true
+}
+export function notNull(val) {
+  return val !== undefined && val !== null
+}
+
+/**
+ * 返回数据原始类型
+ * @param value
+ * @return { 'string' | 'array' | 'boolean' | 'number' | 'object' | 'function' } type
+ */
+export function getRawType(value) {
+  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
+}
diff --git a/src/components/PermissionBtn/index.vue b/src/components/PermissionBtn/index.vue
index d6ccc57..257c0a6 100644
--- a/src/components/PermissionBtn/index.vue
+++ b/src/components/PermissionBtn/index.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-25 10:05:50
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-26 09:52:37
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\components\PermissionBtn\index.vue
  * @Description: 
 -->
 <template>
@@ -18,7 +17,6 @@
   import { router } from '@/router';
   import { defineEmits } from 'vue'
   const btnList = router.currentRoute.value.meta.elements ?router.currentRoute.value.meta.elements :[]
-  console.log(btnList)
   btnList.sort((a, b) => {
     return (a.sort || 0) - (b.sort || 0);
   });
diff --git a/src/components/ProcessDesigner/index.vue b/src/components/ProcessDesigner/index.vue
new file mode 100644
index 0000000..bf76a3a
--- /dev/null
+++ b/src/components/ProcessDesigner/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="process-design" :style="'display: flex; height:' + data.height">
+    <bpmn-process-designer v-model="data.xmlString" v-bind="data.controlForm" keyboard ref="processDesigner" :events="[
+        'element.click',
+        'connection.added',
+        'connection.removed',
+        'connection.changed'
+      ]" @element-click="elementClick" @init-finished="initModeler" @event="handlerEvent" @save="onSaveProcess" />
+    <!-- 属性面板 -->
+      <bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
+  import './package/theme/index.scss';
+  // 流程面板和属性面板
+  import { BpmnProcessDesigner, BmpnProcessPenal } from './package/index';
+  import 'highlight.js/styles/atom-one-dark-reasonable.css';
+  const emit = defineEmits(['save']);
+
+  // Vue.use(vuePlugin);
+  const props = defineProps({
+    bpmnXml: {
+      type: String,
+      required: true
+    },
+    designerForm: {
+      type: Object,
+      required: true
+    }
+  })
+  const data = reactive({
+    height: document.documentElement.clientHeight - 94.5 + "px;",
+    xmlString: props.bpmnXml,
+    modeler: null,
+    controlForm: {
+      processId: props.designerForm.processKey || '',
+      processName: props.designerForm.processName || '',
+      simulation: false,
+      labelEditing: false,
+      labelVisible: false,
+      prefix: 'flowable',
+      headerButtonSize: 'small',
+      // additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+    },
+    element:null,
+  })
+  function elementClick(element) {
+    data.element = element;
+  }
+  function initModeler(modeler) {
+    setTimeout(() => {
+      data.modeler = modeler;
+    }, 10);
+  }
+  function handlerEvent(eventName, element) {
+  }
+  function onSaveProcess(saveData) {
+    emit('save', saveData);
+  }
+</script>
+
+<style lang="scss" scoped>
+  body {
+    overflow: auto !important;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  body,
+  body * {
+
+    /* 滚动条 */
+    &::-webkit-scrollbar-track-piece {
+      background-color: #fff;
+      /*滚动条的背景颜色*/
+      -webkit-border-radius: 0;
+      /*滚动条的圆角宽度*/
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      /*滚动条的宽度*/
+      height: 8px;
+      /*滚动条的高度*/
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+      /*垂直滚动条的样式*/
+      height: 50px;
+      background-color: rgba(153, 153, 153, 0.5);
+      -webkit-border-radius: 4px;
+      outline: 2px solid #fff;
+      outline-offset: -2px;
+      border: 2px solid #fff;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      /*滚动条的hover样式*/
+      background-color: rgba(159, 159, 159, 0.3);
+      -webkit-border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      /*滚动条的hover样式*/
+      background-color: rgba(159, 159, 159, 0.5);
+      -webkit-border-radius: 4px;
+    }
+  }
+  .process-panel{
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
new file mode 100644
index 0000000..35c81e0
--- /dev/null
+++ b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__header">
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+
+        <div slot="content">
+          <a-button :type="headerButtonType" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程
+          </a-button>
+          <a-button :type="headerButtonType" @click="previewProcessXML" class="ml-2">预览XML</a-button>
+          <a-button :type="headerButtonType" @click="previewProcessJson" class="ml-2">预览JSON</a-button>
+          <a-space>
+            <a-tooltip placement="bottom" class="ml-2" title="缩小视图">
+              <a-button :disabled="defaultZoom <= 0.3" :icon="h(ZoomOutOutlined)" @click="processZoomOut()"></a-button>
+            </a-tooltip>
+            <a-button>{{ Math.floor(process.defaultZoom * 10 * 10) + "%" }}</a-button>
+            <a-tooltip placement="bottom" title="放大视图">
+              <a-button :disabled="defaultZoom >= 3.9" :icon="h(ZoomInOutlined)" @click="processZoomIn()"></a-button>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="撤销" class="ml-2">
+              <a-button :icon="h(RotateLeftOutlined)" @click="processUndo()"></a-button>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="恢复">
+              <a-button :icon="h(RotateRightOutlined)" @click="processRedo()"></a-button>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="重新绘制">
+              <a-button :icon="h(ClearOutlined)" @click="processRestart()"></a-button>
+            </a-tooltip>
+          </a-space>
+        </div>
+
+      </template>
+      <div>
+      </div>
+    </div>
+    <div class="my-process-designer__container">
+      <div class="my-process-designer__canvas" ref="bpmn-canvas" id="bpmn-canvas"></div>
+    </div>
+    <a-modal v-model:open="process.previewModelVisible" width="60%" title="预览">
+      <highlightjs :language="process.previewType" :code="process.previewResult" style="height: 60vh" />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h,provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
+  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
+  // 生产环境时优化
+  import BpmnModeler from "bpmn-js/lib/Modeler";
+  import DefaultEmptyXML from "./plugins/defaultEmpty.ts";
+  // 翻译方法(汉化)
+  import customTranslate from "./plugins/translate/customTranslate.ts";
+
+  import MoveModule from 'diagram-js/lib/features/move'
+  import ModelingModule from 'bpmn-js/lib/features/modeling'
+  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
+
+  const emit = defineEmits(['init-finished', 'event', 'commandStack-changed', 'input', 'change', 'canvas-viewbox-changed', 'destroy', 'save', 'element-click', 'connection-added', 'connection-removed', 'connection-changed']);
+
+  // 引入json转换与高亮
+  import convert from "xml-js";
+  const process = reactive({
+    defaultZoom: 1,
+    previewModelVisible: false,
+    simulationStatus: false,
+    previewResult: "",
+    previewType: "xml",
+    recoverable: false,
+    revocable: false,
+    bpmnModeler: null
+  })
+  const props = defineProps({
+    value: String, // xml 字符串
+    processId: String,
+    processName: String,
+    translations: Object, // 自定义的翻译文件
+    additionalModel: [Object, Array], // 自定义model
+    moddleExtension: Object, // 自定义moddle
+    onlyCustomizeAddi: {
+      type: Boolean,
+      default: false
+    },
+    onlyCustomizeModdle: {
+      type: Boolean,
+      default: false
+    },
+    simulation: {
+      type: Boolean,
+      default: true
+    },
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    prefix: {
+      type: String,
+      default: "flowable"
+    },
+    events: {
+      type: Array,
+      default: () => ["element.click"]
+    },
+    headerButtonSize: {
+      type: String,
+      default: "small",
+      validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
+    },
+    headerButtonType: {
+      type: String,
+      default: "primary",
+      validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
+    }
+  })
+
+  onMounted(() => {
+    initBpmnModeler();
+    console.log(props.value)
+    createNewDiagram(props.value);
+  })
+  function onSave() {
+    return new Promise((resolve, reject) => {
+      console.log(process.bpmnModeler)
+      if (process.bpmnModeler == null) {
+        reject();
+      }
+      process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+        emit('save', xml);
+        resolve(xml);
+      });
+    })
+  }
+  function initBpmnModeler() {
+    if (process.bpmnModeler) return;
+    const containerEl = document.querySelector('#bpmn-canvas');
+    process.bpmnModeler = new BpmnModeler({
+      container: '#bpmn-canvas',
+      additionalModules: [
+        {
+          translate: ['value', customTranslate]
+        },
+      ],
+    });
+    console.log(process.bpmnModeler)
+    emit("init-finished", process.bpmnModeler);
+    initModelListeners();
+  }
+  function initModelListeners() {
+    const EventBus = process.bpmnModeler.get("eventBus");
+    const that = this;
+    // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+    props.events.forEach(event => {
+      EventBus.on(event, function (eventObj) {
+        console.log(eventObj)
+        provide('wfdesign',eventObj)
+        let eventName = event.replace(/\./g, "-");
+        let element = eventObj ? eventObj.element : null;
+        emit(eventName, element, eventObj);
+        emit('event', eventName, element, eventObj);
+      });
+    });
+    // 监听图形改变返回xml
+    EventBus.on("commandStack.changed", async event => {
+      try {
+        process.recoverable = process.bpmnModeler.get("commandStack").canRedo();
+        process.revocable = process.bpmnModeler.get("commandStack").canUndo();
+        let { xml } = await process.bpmnModeler.saveXML({ format: true });
+        emit("commandStack-changed", event);
+        emit("input", xml);
+        emit("change", xml);
+      } catch (e) {
+        console.error(`[Process Designer Warn]: ${e.message || e}`);
+      }
+    });
+    // 监听视图缩放变化
+    process.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
+      emit("canvas-viewbox-changed", { viewbox });
+      const { scale } = viewbox;
+      process.defaultZoom = Math.floor(scale * 100) / 100;
+    });
+  }
+  /* 创建新的流程图 */
+  async function createNewDiagram(xml) {
+    // 将字符串转换成图显示出来
+    let newId = props.processId || `Process_${new Date().getTime()}`;
+    let newName = props.processName || `业务流程_${new Date().getTime()}`;
+    let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix);
+    try {
+      let { warnings } = await process.bpmnModeler.importXML(xmlString);
+      if (warnings && warnings.length) {
+        warnings.forEach(warn => console.warn(warn));
+      }
+    } catch (e) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`);
+    }
+  }
+
+  // 下载流程图到本地
+  async function downloadProcess(type, name) {
+    try {
+      const _this = this;
+      // 按需要类型创建文件并下载
+      if (type === "xml" || type === "bpmn") {
+        const { err, xml } = await process.bpmnModeler.saveXML();
+        // 读取异常时抛出异常
+        if (err) {
+          console.error(`[Process Designer Warn ]: ${err.message || err}`);
+        }
+        let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
+        downloadFunc(href, filename);
+      } else {
+        const { err, svg } = await process.bpmnModeler.saveSVG();
+        // 读取异常时抛出异常
+        if (err) {
+          return console.error(err);
+        }
+        let { href, filename } = setEncoded("SVG", name, svg);
+        downloadFunc(href, filename);
+      }
+    } catch (e) {
+      console.error(`[Process Designer Warn ]: ${e.message || e}`);
+    }
+    // 文件下载方法
+    function downloadFunc(href, filename) {
+      if (href && filename) {
+        let a = document.createElement("a");
+        a.download = filename; //指定下载的文件名
+        a.href = href; //  URL对象
+        a.click(); // 模拟点击
+        URL.revokeObjectURL(a.href); // 释放URL 对象
+      }
+    }
+  }
+
+  // 根据所需类型进行转码并返回下载地址
+  function setEncoded(type, filename = "diagram", data) {
+    const encodedData = encodeURIComponent(data);
+    return {
+      filename: `${filename}.${type}`,
+      href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
+      data: data
+    };
+  }
+
+  // 加载本地文件
+  function importLocalFile() {
+    const that = this;
+    const file = this.$refs.refFile.files[0];
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = function () {
+      let xmlStr = this.result;
+      createNewDiagram(xmlStr);
+    };
+  }
+  /* ------------------------------------------------ refs methods ------------------------------------------------------ */
+  function downloadProcessAsXml() {
+    downloadProcess("xml");
+  }
+  function downloadProcessAsBpmn() {
+    downloadProcess("bpmn");
+  }
+  function downloadProcessAsSvg() {
+    downloadProcess("svg");
+  }
+  function processSimulation() {
+    process.simulationStatus = !process.simulationStatus;
+    props.simulation && process.bpmnModeler.get("toggleMode").toggleMode();
+  }
+  function processRedo() {
+    process.bpmnModeler.get("commandStack").redo();
+  }
+  function processUndo() {
+    process.bpmnModeler.get("commandStack").undo();
+  }
+  function processZoomIn(zoomStep = 0.1) {
+    let newZoom = Math.floor(process.defaultZoom * 100 + zoomStep * 100) / 100;
+    if (newZoom > 4) {
+      throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
+    }
+    process.defaultZoom = newZoom;
+    process.bpmnModeler.get("canvas").zoom(process.defaultZoom);
+  }
+  function processZoomOut(zoomStep = 0.1) {
+    let newZoom = Math.floor(process.defaultZoom * 100 - zoomStep * 100) / 100;
+    if (newZoom < 0.2) {
+      throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
+    }
+    process.defaultZoom = newZoom;
+    process.bpmnModeler.get("canvas").zoom(process.defaultZoom);
+  }
+  function 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");
+    }
+    process.defaultZoom = newZoom;
+    process.bpmnModeler.get("canvas").zoom(newZoom);
+  }
+  function processReZoom() {
+    process.defaultZoom = 1;
+    process.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
+  }
+  function processRestart() {
+    process.recoverable = false;
+    process.revocable = false;
+    createNewDiagram(null).then(() => process.bpmnModeler.get("canvas").zoom(1, "auto"));
+  }
+  function elementsAlign(align) {
+    const Align = process.bpmnModeler.get("alignElements");
+    const Selection = process.bpmnModeler.get("selection");
+    const SelectedElements = Selection.get();
+    if (!SelectedElements || SelectedElements.length <= 1) {
+      this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
+      return;
+    }
+    this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }).then(() => Align.trigger(SelectedElements, align));
+  }
+  /*-----------------------------    方法结束     ---------------------------------*/
+  function previewProcessXML() {
+    process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+      process.previewResult = xml;
+      process.previewType = "xml";
+      process.previewModelVisible = true;
+    });
+  }
+  function previewProcessJson() {
+    process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+      console.log(convert.xml2json(xml, { spaces: 2 }))
+      process.previewResult = convert.xml2json(xml, { spaces: 2 });
+      process.previewType = "json";
+      process.previewModelVisible = true;
+    });
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/designer/index.ts b/src/components/ProcessDesigner/package/designer/index.ts
new file mode 100644
index 0000000..0566ee9
--- /dev/null
+++ b/src/components/ProcessDesigner/package/designer/index.ts
@@ -0,0 +1,7 @@
+import BpmnProcessDesigner from "./ProcessDesigner.vue";
+
+BpmnProcessDesigner.install = function(Vue) {
+  Vue.component(BpmnProcessDesigner.name, BpmnProcessDesigner);
+};
+
+export default BpmnProcessDesigner;
diff --git a/src/components/ProcessDesigner/package/designer/plugins/defaultEmpty.ts b/src/components/ProcessDesigner/package/designer/plugins/defaultEmpty.ts
new file mode 100644
index 0000000..9ec1df1
--- /dev/null
+++ b/src/components/ProcessDesigner/package/designer/plugins/defaultEmpty.ts
@@ -0,0 +1,27 @@
+export default (key, name, type) => {
+  if (!type) type = "camunda";
+  const TYPE_TARGET = {
+    activiti: "http://activiti.org/bpmn",
+    camunda: "http://bpmn.io/schema/bpmn",
+    flowable: "http://flowable.org/bpmn"
+  };
+  return `
+    <?xml version="1.0" encoding="UTF-8"?>
+    <bpmn2:definitions 
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+      xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+      xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+      xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+      xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
+      id="diagram_${key}"
+      targetNamespace="${TYPE_TARGET[type]}">
+      <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+      </bpmn2:process>
+      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+        </bpmndi:BPMNPlane>
+      </bpmndi:BPMNDiagram>
+    </bpmn2:definitions>
+  `;
+};
diff --git a/src/components/ProcessDesigner/package/designer/plugins/translate/customTranslate.ts b/src/components/ProcessDesigner/package/designer/plugins/translate/customTranslate.ts
new file mode 100644
index 0000000..5ed03d5
--- /dev/null
+++ b/src/components/ProcessDesigner/package/designer/plugins/translate/customTranslate.ts
@@ -0,0 +1,9 @@
+import translations from './zh.ts'
+
+export default function customTranslate(template, replacements) {
+  replacements = replacements || {}
+  template = translations[template] || template
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}'
+  })
+}
diff --git a/src/components/ProcessDesigner/package/designer/plugins/translate/zh.ts b/src/components/ProcessDesigner/package/designer/plugins/translate/zh.ts
new file mode 100644
index 0000000..74b3061
--- /dev/null
+++ b/src/components/ProcessDesigner/package/designer/plugins/translate/zh.ts
@@ -0,0 +1,252 @@
+export default {
+  "Activate hand tool": "激活抓手工具",
+  "Activate lasso tool": "激活套索工具",
+  "Activate create/remove space tool": "激活创建/删除空间工具",
+  "Activate global connect tool": "激活全局连接工具",
+  "Create start event": "创建开始事件",
+  "Create end event": "创建结束事件",
+  "Create task": "创建任务",
+  "Create user task": "创建用户任务",
+  "Create gateway": "创建网关",
+  "Create data object reference": "创建数据对象",
+  "Create data store reference": "创建数据存储",
+  "Create group": "创建分组",
+  "Create intermediate/boundary event": "创建中间/边界事件",
+  "Create expanded sub-process": "创建扩展子过程",
+  "Create pool/participant": "创建池/参与者",
+  "Change element": "修改类型",
+  "Delete": "移除",
+  "Append end event": "追加结束事件",
+  "Append gateway": "追加网关",
+  "Append task": "追加任务",
+  "Append intermediate/boundary event": "追加中间抛出事件/边界事件",
+  "Add text annotation": "添加 text annotation",
+  "Connect using association": "使用关联连接",
+  "Connect to other element": "消息关联",
+  "Start event": "开始事件",
+  "End event": "结束事件",
+  "Message intermediate catch event": "消息中间捕获事件",
+  "Message intermediate throw event": "消息中间抛出事件",
+  "Timer intermediate catch event": "定时中间捕获事件",
+  "Escalation intermediate throw event": "升级中间抛出事件",
+  "Conditional intermediate catch event": "条件中间捕获事件",
+  "Link intermediate catch event": "链接中间捕获事件",
+  "Link intermediate throw event": "链接中间抛出事件",
+  "Compensation intermediate throw event": "补偿中间抛出事件",
+  "Signal intermediate catch event": "信号中间捕获事件",
+  "Signal intermediate throw event": "信号中间抛出事件",
+  "User task": "用户任务",
+  "Service task": "服务任务",
+  "Send task": "发送任务",
+  "Receive task": "、接收任务",
+  "Manual task": "手动任务",
+  "Business rule task": "业务规则任务",
+  "Script task": "脚本任务",
+  "Call activity": "调用活动",
+  "Sub-process (collapsed)": "子流程(已折叠)",
+  "Sub-process (expanded)": "子流程(扩大)",
+  "Intermediate throw event": "中间抛出事件",
+  "Message start event": "消息开始事件",
+  "Timer start event": "定时开始事件",
+  "Conditional start event": "条件开始事件",
+  "Signal start event": "信号开始事件",
+  "Parallel gateway":"并行网关",
+  "Inclusive gateway":"包容网关",
+  "Complex gateway":"复杂网关",
+  "Event-based gateway":"事件网关",
+  "Message end event":"消息结束事件",
+  "Escalation end event":"升级结束事件",
+  "Error end event":"错误结束事件",
+  "Compensation end event":"补偿结束事件",
+  "Signal end event":"信号结束事件",
+  "Terminate end event":"终止结束事件",
+
+       
+    
+
+
+  "Process": "业务流程",
+  "Append EndEvent": "追加结束事件",
+  "Append Gateway": "追加网关",
+  "Append Task": "追加任务",
+  "Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
+  "Activate the global connect tool": "激活全局连接工具",
+  "Append {type}": "添加 {type}",
+  "Add Lane above": "在上面添加道",
+  "Divide into two Lanes": "分割成两个道",
+  "Divide into three Lanes": "分割成三个道",
+  "Add Lane below": "在下面添加道",
+  "Append compensation activity": "追加补偿活动",
+  "Change type": "修改类型",
+  "Connect using Association": "使用关联连接",
+  "Connect using Sequence/MessageFlow or Association": "使用顺序/消息流或者关联连接",
+  "Connect using DataInputAssociation": "使用数据输入关联连接",
+  "Remove": "移除",
+  "Activate the hand tool": "激活抓手工具",
+  "Activate the lasso tool": "激活套索工具",
+  "Activate the create/remove space tool": "激活创建/删除空间工具",
+  "Create expanded SubProcess": "创建扩展子过程",
+  "Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出事件/边界事件",
+  "Create Pool/Participant": "创建池/参与者",
+  "Parallel Multi Instance": "并行多重事件",
+  "Sequential Multi Instance": "时序多重事件",
+  "DataObjectReference": "数据对象参考",
+  "DataStoreReference": "数据存储参考",
+  "Loop": "循环",
+  "Ad-hoc": "即席",
+  "Create {type}": "创建 {type}",
+  "Create StartEvent": "创建开始事件",
+  "Create EndEvent": "创建结束事件",
+  "Create Task": "创建任务",
+  "Create User Task": "创建用户任务",
+  "Create Gateway": "创建网关",
+  "Create DataObjectReference": "创建数据对象",
+  "Create DataStoreReference": "创建数据存储",
+  "Create Group": "创建分组",
+  "Create Intermediate/Boundary Event": "创建中间/边界事件",
+  "Message Start Event": "消息开始事件",
+  "Timer Start Event": "定时开始事件",
+  "Conditional Start Event": "条件开始事件",
+  "Signal Start Event": "信号开始事件",
+  "Error Start Event": "错误开始事件",
+  "Escalation Start Event": "升级开始事件",
+  "Compensation Start Event": "补偿开始事件",
+  "Message Start Event (non-interrupting)": "消息开始事件（非中断）",
+  "Timer Start Event (non-interrupting)": "定时开始事件（非中断）",
+  "Conditional Start Event (non-interrupting)": "条件开始事件（非中断）",
+  "Signal Start Event (non-interrupting)": "信号开始事件（非中断）",
+  "Escalation Start Event (non-interrupting)": "升级开始事件（非中断）",
+  "Message Intermediate Catch Event": "消息中间捕获事件",
+  "Message Intermediate Throw Event": "消息中间抛出事件",
+  "Timer Intermediate Catch Event": "定时中间捕获事件",
+  "Escalation Intermediate Throw Event": "升级中间抛出事件",
+  "Conditional Intermediate Catch Event": "条件中间捕获事件",
+  "Link Intermediate Catch Event": "链接中间捕获事件",
+  "Link Intermediate Throw Event": "链接中间抛出事件",
+  "Compensation Intermediate Throw Event": "补偿中间抛出事件",
+  "Signal Intermediate Catch Event": "信号中间捕获事件",
+  "Signal Intermediate Throw Event": "信号中间抛出事件",
+  "Collapsed Pool": "折叠池",
+  "Expanded Pool": "展开池",
+  "no parent for {element} in {parent}": "在{parent}里，{element}没有父类",
+  "no shape type specified": "没有指定的形状类型",
+  "flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
+  "out of bounds release": "out of bounds release",
+  "more than {count} child lanes": "子道大于{count} ",
+  "element required": "元素不能为空",
+  "diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
+  "no diagram to display": "没有可展示的流程图",
+  "no process or collaboration to display": "没有可展示的流程/协作",
+  "element {element} referenced by {referenced}#{property} not yet drawn":
+    "由{referenced}#{property}引用的{element}元素仍未绘制",
+  "already rendered {element}": "{element} 已被渲染",
+  "failed to import {element}": "导入{element}失败",
+  "Id": "编号",
+  "Name": "名称",
+  "General": "常规",
+  "Details": "详情",
+  "Message Name": "消息名称",
+  "Message": "消息",
+  "Initiator": "创建者",
+  "Asynchronous Continuations": "持续异步",
+  "Asynchronous Before": "异步前",
+  "Asynchronous After": "异步后",
+  "Job Configuration": "工作配置",
+  "Exclusive": "排除",
+  "Job Priority": "工作优先级",
+  "Retry Time Cycle": "重试时间周期",
+  "Documentation": "文档",
+  "Element Documentation": "元素文档",
+  "History Configuration": "历史配置",
+  "History Time To Live": "历史的生存时间",
+  "Forms": "表单",
+  "Form Key": "表单key",
+  "Form Fields": "表单字段",
+  "Business Key": "业务key",
+  "Form Field": "表单字段",
+  "ID": "编号",
+  "Type": "类型",
+  "Label": "名称",
+  "Default Value": "默认值",
+  "Default Flow": "默认流转路径",
+  "Conditional Flow": "条件流转路径",
+  "Sequence Flow": "普通流转路径",
+  "Validation": "校验",
+  "Add Constraint": "添加约束",
+  "Config": "配置",
+  "Properties": "属性",
+  "Add Property": "添加属性",
+  "Value": "值",
+  "Listeners": "监听器",
+  "Execution Listener": "执行监听",
+  "Event Type": "事件类型",
+  "Listener Type": "监听器类型",
+  "Java Class": "Java类",
+  "Expression": "表达式",
+  "Must provide a value": "必须提供一个值",
+  "Delegate Expression": "代理表达式",
+  "Script": "脚本",
+  "Script Format": "脚本格式",
+  "Script Type": "脚本类型",
+  "Inline Script": "内联脚本",
+  "External Script": "外部脚本",
+  "Resource": "资源",
+  "Field Injection": "字段注入",
+  "Extensions": "扩展",
+  "Input/Output": "输入/输出",
+  "Input Parameters": "输入参数",
+  "Output Parameters": "输出参数",
+  "Parameters": "参数",
+  "Output Parameter": "输出参数",
+  "Timer Definition Type": "定时器定义类型",
+  "Timer Definition": "定时器定义",
+  "Date": "日期",
+  "Duration": "持续",
+  "Cycle": "循环",
+  "Signal": "信号",
+  "Signal Name": "信号名称",
+  "Escalation": "升级",
+  "Error": "错误",
+  "Link Name": "链接名称",
+  "Condition": "条件名称",
+  "Variable Name": "变量名称",
+  "Variable Event": "变量事件",
+  "Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
+  "Wait for Completion": "等待完成",
+  "Activity Ref": "活动参考",
+  "Version Tag": "版本标签",
+  "Executable": "可执行文件",
+  "External Task Configuration": "扩展任务配置",
+  "Task Priority": "任务优先级",
+  "External": "外部",
+  "Connector": "连接器",
+  "Must configure Connector": "必须配置连接器",
+  "Connector Id": "连接器编号",
+  "Implementation": "实现方式",
+  "Field Injections": "字段注入",
+  "Fields": "字段",
+  "Result Variable": "结果变量",
+  "Topic": "主题",
+  "Configure Connector": "配置连接器",
+  "Input Parameter": "输入参数",
+  "Assignee": "代理人",
+  "Candidate Users": "候选用户",
+  "Candidate Groups": "候选组",
+  "Due Date": "到期时间",
+  "Follow Up Date": "跟踪日期",
+  "Priority": "优先级",
+  "The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
+    "跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
+  "The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
+    "跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
+  "Variables": "变量",
+  "Candidate Starter Configuration": "候选人起动器配置",
+  "Candidate Starter Groups": "候选人起动器组",
+  "This maps to the process definition key.": "这映射到流程定义键。",
+  "Candidate Starter Users": "候选人起动器的用户",
+  "Specify more than one user as a comma separated list.": "指定多个用户作为逗号分隔的列表。",
+  "Tasklist Configuration": "Tasklist配置",
+  "Startable": "启动",
+  "Specify more than one group as a comma separated list.": "指定多个组作为逗号分隔的列表。",
+  "Execution listeners": "执行监听器"
+};
diff --git a/src/components/ProcessDesigner/package/highlight/index.ts b/src/components/ProcessDesigner/package/highlight/index.ts
new file mode 100644
index 0000000..45253e8
--- /dev/null
+++ b/src/components/ProcessDesigner/package/highlight/index.ts
@@ -0,0 +1,12 @@
+/*
+ * @Author: 刘妍
+ * @Date: 2024-03-04 13:39:52
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-05 16:07:51
+ * @Description: 
+ */
+const hljs = require("highlight.js/lib/core");
+hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
+
+export default hljs;
diff --git a/src/components/ProcessDesigner/package/index.ts b/src/components/ProcessDesigner/package/index.ts
new file mode 100644
index 0000000..cb36639
--- /dev/null
+++ b/src/components/ProcessDesigner/package/index.ts
@@ -0,0 +1,7 @@
+import BpmnProcessDesigner from "./designer/index.ts";
+import BmpnProcessPenal from "./penal";
+
+export {
+  BpmnProcessDesigner,
+  BmpnProcessPenal
+}
diff --git a/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
new file mode 100644
index 0000000..09daf6c
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
@@ -0,0 +1,150 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-05 17:09:44
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 14:52:13
+ * @Description: 
+-->
+<template>
+  <div :class="prefixCls" :style="{ width: `${props.width}px` }">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="流程属性">
+        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="发起权限" force-render>
+        <auth-config ref="auth"></auth-config>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="开始节点">
+        <start-event-option ref="start" :element="data.elementData"></start-event-option>
+      </a-tab-pane>
+      <a-tab-pane key="4" tab="审核节点">
+        <user-task-option ref="task"></user-task-option>
+      </a-tab-pane>
+    </a-tabs>
+    <!-- <el-tabs v-model="configActiveName" :stretch="true">
+      <el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
+        <component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
+      </el-tab-pane>
+      <el-tab-pane label="流程属性" name="tab02">
+        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
+      </el-tab-pane>
+    </el-tabs> -->
+    <!-- <Tabs v-model:activeKey="configActiveName">
+      <Tabs.TabPane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
+        <component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
+      </Tabs.TabPane>
+      <Tabs.TabPane label="流程属性" name="tab02">
+        <shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
+      </Tabs.TabPane>
+    </Tabs> -->
+  </div>
+</template>
+<script lang="ts" setup>
+  import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref } from 'vue';
+  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
+  import { Tabs } from 'ant-design-vue';
+  import { PageWrapper } from '@/components/Page';
+  import { useDesign } from '@/hooks/web/useDesign';
+  const { prefixCls } = useDesign('process-property');
+
+
+  // 流程属性
+  import shcemeinfoConfig from './shcemeInfo/index.vue'
+  // 发起权限
+  import authConfig from './auth/index.vue'
+  // 开始节点
+  import startEventOption from './startEvent/index.vue'
+  // 审核节点
+  import userTaskOption from './userTask/index.vue'
+  // 结束节点
+  import endEventOption from './config/endEvent.vue'
+  import gatewayAndOption from './config/gatewayAnd.vue'
+  import gatewayInclusiveOption from './config/gatewayInclusive.vue'
+  import gatewayXorOption from './config/gatewayXor.vue'
+  import scriptTaskOption from './config/scriptTask.vue'
+  import subprocessOption from './config/subprocess.vue'
+  import mylineOption from './config/myline.vue'
+  /**
+   * 侧边栏
+   * @Author MiyueFE
+   * @Home https://github.com/miyuesc
+   * @Date 2021年3月31日18:57:51
+   */
+  const props = defineProps({
+    bpmnModeler: Object,
+    prefix: {
+      type: String,
+      default: "camunda"
+    },
+    width: {
+      type: Number,
+      default: 520
+    },
+    idEditDisabled: {
+      type: Boolean,
+      default: false
+    },
+    element: Object
+  })
+ 
+  provide('prefix', props.prefix)
+  provide('width', props.width)
+  const activeKey = ref("4")
+  const data = reactive({
+    configActiveName: 'tab02',
+    currentWfNode: undefined,
+    wfNodeName: {
+      startEvent: '开始节点',
+      endEvent: '结束节点',
+      gatewayAnd: '并行网关',
+      gatewayInclusive: '包含网关',
+      gatewayXor: '排他网关',
+      scriptTask: '脚本节点',
+      userTask: '审核节点',
+      subprocess: '子流程',
+      myline: '线条'
+    },
+    elementData:{}
+  })
+  watch(
+    () => props.element,
+    (newVal, oldVal) => {
+      data.elementData = newVal
+    }
+  )
+  const achieveList = ref([
+    {
+      key: '1',
+      name: '文章',
+      component: 'startEventOption',
+    },
+    {
+      key: '2',
+      name: '应用',
+      component: 'startEventOption',
+    },
+  ])
+  const tabs = {
+    startEventOption,
+    startEventOption,
+  };
+
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-process-property';
+
+  .@{prefix-cls} {
+    background-color: @component-background;
+  }
+
+  ::v-deep .ant-tabs {
+    height: 100%;
+    width: 100%;
+    padding: 0 20px;
+
+  }
+
+  ::v-deep .ant-tabs-content-holder {
+    overflow-y: auto;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/auth/index.vue b/src/components/ProcessDesigner/package/penal/auth/index.vue
new file mode 100644
index 0000000..4882375
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/auth/index.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-05 17:09:44
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 15:37:16
+ * @Description: 
+-->
+<template>
+    <div class="auth-config">
+        <a-tabs v-model:activeKey="f_AuthType" type="card" size="small">
+            <a-tab-pane key="1" tab="所有成员">
+                <a-alert message="权限说明" description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。" type="info" show-icon />
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="指定成员">
+                <a-space>
+                    <a-radio-group>
+                        <a-radio-button value="1" @click="handlePostClick">岗位</a-radio-button>
+                        <a-radio-button value="2" @click="handleRoleClick">角色</a-radio-button>
+                        <a-radio-button value="3" @click="handleAccountClick">用户</a-radio-button>
+                    </a-radio-group>
+                    <a-button danger :size="size">清空</a-button>
+                </a-space>
+                <a-table size="small" :columns="columns" :data-source="dataSource" bordered :pagination="false">
+                    <template #bodyCell="{ column, text, record }">
+                        <template v-if="['name', 'type'].includes(column.dataIndex)">
+                            <div>
+                                {{ text }}
+                            </div>
+                        </template>
+                        <template v-else-if="column.dataIndex === 'operation'">
+                            <a-popconfirm v-if="dataSource.length" title="Sure to delete?"
+                                @confirm="onDelete(record.key)">
+                                <a>Delete</a>
+                            </a-popconfirm>
+                        </template>
+                    </template>
+                </a-table>
+            </a-tab-pane>
+        </a-tabs>
+        <a-modal width="60%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
+            <SelectPos ref="posRef"></SelectPos>
+        </a-modal>
+        <a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
+            <SelectRole ref="roleRef"></SelectRole>
+        </a-modal>
+        <a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
+            <SelectAccount ref="accountRef"></SelectAccount>
+        </a-modal>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { reactive, ref, onMounted, nextTick, unref } from 'vue';
+    const f_AuthType = ref("1")
+    import { cloneDeep } from 'lodash-es';
+    import type { UnwrapRef } from 'vue';
+    import SelectPos from '@/components/SelectPos/index.vue';
+    import SelectRole from '@/components/SelectRole/index.vue';
+    import SelectAccount from '@/components/SelectAccount/index.vue';
+    const columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+        },
+        {
+            title: '操作',
+            dataIndex: 'operation',
+        },
+
+    ];
+    const dataSource = [
+        {
+            id: 0,
+            name: "王五",
+            type: "管理员",
+        },
+        {
+            id: 1,
+            name: "王五",
+            type: "管理员",
+        },
+    ]
+    const data = reactive({
+        postOpen: false,
+        roleOpen: false,
+        accountOpen: false,
+    })
+    // 岗位
+    const posRef = ref < any > ()
+
+    function handlePostClick() {
+        data.postOpen = true;
+    }
+    function postHandleOk() {
+        console.log(roleRef.value.getRow())
+    }
+    // 角色
+    const roleRef = ref < any > ()
+
+    function handleRoleClick() {
+        data.roleOpen = true;
+    }
+    function roleHandleOk() {
+        console.log(roleRef.value.getRow())
+    }
+    // 用户
+    const accountRef = ref < any > ()
+
+    function handleAccountClick() {
+        data.accountOpen = true;
+    }
+    function accountHandleOk() {
+        console.log(accountRef.value.getRow())
+    }
+
+</script>
+<style lang="less" scoped>
+    .site-space-compact-wrapper {
+        width: 100%;
+
+        .ant-select {
+            width: 100%;
+        }
+    }
+
+    ::v-deep .ant-tabs {
+        padding: 0 !important;
+    }
+
+    ::v-deep .ant-table-content {
+        margin-top: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/conditionFormula.vue b/src/components/ProcessDesigner/package/penal/config/conditionFormula.vue
new file mode 100644
index 0000000..c67f73d
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/conditionFormula.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="l-from-body" >
+        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="120px" >
+            <el-col :span="24">
+                <el-form-item label="条件名称" prop="name">
+                    <el-input  v-model="formData.name" >
+                    </el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="数据库" prop="dbCode">
+                    <el-select v-model="formData.dbCode" placeholder="请选择">
+                        <el-option-group
+                        v-for="group in lr_dblinkTree"
+                        :key="group.id"
+                        :label="group.label">
+                        <el-option
+                            v-for="item in group.children"
+                            :key="item.id"
+                            :label="item.label"
+                            :value="item.id">
+                        </el-option>
+                        </el-option-group>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="数据表" prop="table">
+                    <l-codetable-select
+                    @change="handleTableChange"
+                    :dbCode="formData.dbCode" 
+                    v-model="formData.table"></l-codetable-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="关联流程字段" prop="rfield">
+                    <l-select :options="formData.columns" valueKey="name" labelKey="coment" v-model="formData.rfield" >
+                    </l-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="比较字段" prop="cfield">
+                    <l-select :options="formData.columns"  valueKey="name" labelKey="coment" v-model="formData.cfield" >
+                    </l-select>
+                </el-form-item>
+            </el-col>
+           <el-col :span="24">
+                <el-form-item label="比较类型" prop="compareType">
+                    <l-select :options="options"  v-model="formData.compareType" >
+                    </l-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="数据值" prop="value">
+                    <el-input  v-model="formData.value" >
+                    </el-input>
+                </el-form-item>
+            </el-col>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name:'condition-formula',
+    props:{
+    },
+    data(){
+        return {
+            formData:{
+                dbCode:'',
+                table:'',
+                columns:[],
+                rfield:'',
+                cfield:'',
+                compareType:'',
+                value:'',
+                name:''
+            },
+            rules: {
+                dbCode: [
+                    { required: true, message: '请选择数据库' }
+                ],
+                table: [
+                    { required: true, message: '请选择数据表' }
+                ],
+                rfield: [
+                    { required: true, message: '请选择关联字段' }
+                ],
+                cfield: [
+                    { required: true, message: '请选择比较字段' }
+                ],
+                compareType: [
+                    { required: true, message: '请选择比较类型' }
+                ],
+                value: [
+                    { required: true, message: '请填写值' }
+                ],
+                name: [
+                    { required: true, message: '请填写条件名称' }
+                ]
+            },
+            options:[
+                { value: '1', label: '等于' }, 
+                { value: '2', label: '不等于' },
+                { value: '3', label: '大于' }, 
+                { value: '4', label: '大于等于' }, 
+                { value: '5', label: '小于' }, 
+                { value: '6', label: '小于等于' }, 
+                { value: '7', label: '包含' }, 
+                { value: '8', label: '不包含' }, 
+                { value: '9', label: '包含于' },
+                { value: '10', label: '不包含于' }]
+        };
+    },
+    computed:{
+    },
+    created () {
+    },
+    methods:{
+        handleTableChange(table){
+            this.formData.columns = table.columns;
+            console.log(table);
+        },
+        resetForm(){
+            this.formData.columns = [];
+            this.$refs.form && this.$refs.form.resetFields();
+        },
+        // 校验表单
+        validateForm(callback){
+            this.$refs.form.validate((valid) => {
+                if(valid){
+                    callback();
+                }
+            });
+        },
+        setForm(data){
+            this.formData = this.$deepClone(data);
+        },
+        getForm(){
+            let formData = this.$deepClone(this.formData);
+            return formData;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/conditionSql.vue b/src/components/ProcessDesigner/package/penal/config/conditionSql.vue
new file mode 100644
index 0000000..5b812f5
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/conditionSql.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="l-from-body" >
+        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="120px" >
+            <el-col :span="24">
+                <el-form-item label="条件名称" prop="name">
+                    <el-input  v-model="formData.name" >
+                    </el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="数据库" prop="dbCode">
+                    <el-select v-model="formData.dbCode" placeholder="请选择">
+                        <el-option-group
+                        v-for="group in lr_dblinkTree"
+                        :key="group.id"
+                        :label="group.label">
+                        <el-option
+                            v-for="item in group.children"
+                            :key="item.id"
+                            :label="item.label"
+                            :value="item.id">
+                        </el-option>
+                        </el-option-group>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+             <div style="padding:0 0 16px 120px;">
+                <el-alert
+                    title="sql语句说明"
+                    type="warning"
+                    description="请在开发人员指导下进行配置SQL语句（{processId}流程发起实例主键{userId}流程发起用户Id{userAccount}流程发起用户账号{companyId}流程发起用户公司{departmentId}流程发起用户部门）！"
+                    show-icon
+                    :closable="false"
+                    >
+                </el-alert>
+            </div>
+            <el-col :span="24">
+                <el-form-item label="SQL语句" prop="sql">
+                    <el-input  v-model="formData.sql" type="textarea"
+                        :autosize="{ minRows: 8}" >
+                    </el-input>
+                </el-form-item>
+            </el-col>
+           
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name:'condition-sql',
+    props:{
+    },
+    data(){
+        return {
+            formData:{
+                dbCode:'',
+                sql:'',
+                name:''
+            },
+            rules: {
+                dbCode: [
+                    { required: true, message: '请选择数据库' }
+                ],
+                sql: [
+                    { required: true, message: '请填写sql语句' }
+                ],
+                name: [
+                    { required: true, message: '请填写条件名称' }
+                ]
+            },
+        };
+    },
+    computed:{
+    },
+    created () {
+    },
+    methods:{
+        resetForm(){
+            this.$refs.form && this.$refs.form.resetFields();
+        },
+        // 校验表单
+        validateForm(callback){
+            this.$refs.form.validate((valid) => {
+                if(valid){
+                    callback();
+                }
+            });
+        },
+        setForm(data){
+            this.formData = this.$deepClone(data);
+        },
+        getForm(){
+            let formData = this.$deepClone(this.formData);
+            return formData;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/endEvent.vue b/src/components/ProcessDesigner/package/penal/config/endEvent.vue
new file mode 100644
index 0000000..ae8150d
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/endEvent.vue
@@ -0,0 +1,32 @@
+<!-- 开始节点配置 -->
+<template>
+   <el-form
+        class="l-form-config"
+        label-width="88px"
+        label-position="left"
+        size="mini"
+    >
+    <el-form-item label="节点标识">
+      <el-input v-model="node.id" readonly ></el-input>
+    </el-form-item>
+   </el-form>
+</template>
+
+<script>
+export default {
+    name:'end-event-option',
+    data () {
+        return {
+        }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        }
+    },
+    inject: ["wfdesign"]
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/gatewayAnd.vue b/src/components/ProcessDesigner/package/penal/config/gatewayAnd.vue
new file mode 100644
index 0000000..80a70ed
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/gatewayAnd.vue
@@ -0,0 +1,42 @@
+<!-- 开始节点配置 -->
+<template>
+  <el-form
+        class="l-form-config"
+        label-width="88px"
+        label-position="left"
+        size="mini"
+    >
+    <el-form-item label="节点标识">
+      <el-input v-model="node.id" readonly ></el-input>
+    </el-form-item>
+    <div style="padding:0 16px;">
+        <el-alert
+            title="并行网关说明"
+            type="info"
+            description="并行网关会等待所有分支汇入才往下执行，所有出口分支都会被执行"
+            show-icon
+            :closable="false"
+            >
+        </el-alert>
+    </div>
+  </el-form>
+</template>
+
+<script>
+export default {
+    name:'gateway-and-option',
+    data () {
+        return {
+        }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        }
+    },
+    inject: ["wfdesign"]
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/gatewayInclusive.vue b/src/components/ProcessDesigner/package/penal/config/gatewayInclusive.vue
new file mode 100644
index 0000000..59967a4
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/gatewayInclusive.vue
@@ -0,0 +1,211 @@
+<template>
+    <l-layout :top="180" >
+        <template #top>
+            <el-form
+                class="l-form-config"
+                label-width="88px"
+                label-position="left"
+                size="mini"
+            >
+                <el-form-item label="节点标识">
+                    <el-input v-model="node.id" readonly ></el-input>
+                </el-form-item>
+                <div style="padding:0 16px;">
+                    <el-alert
+                        title="包容网关说明"
+                        type="info"
+                        description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）"
+                        show-icon
+                        :closable="false"
+                        >
+                    </el-alert>
+                </div>
+            </el-form>
+        </template>
+        <l-layout :top="40">
+            <template #top v-if="!disabled">
+                <div style="padding-left:8px;float:left;" >
+                    <el-button-group>
+                        <el-button size="mini" icon="el-icon-plus" @click="handleFormulaClick">{{$t('公式')}}</el-button>
+                        <el-button size="mini" icon="el-icon-plus" @click="handleSQlClick">{{$t('sql语句')}}</el-button>
+                    </el-button-group>
+                </div>
+                <div style="padding-right:8px;float:right;">
+                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{$t('清空')}}</el-button>
+                </div>
+            </template>
+            <l-table :columns="columns" :dataSource="node.conditions" >
+                <template v-slot:type="scope" >
+                    {{typeFormat(scope.row.type)}}
+                </template>
+                <l-table-btns v-if="!disabled" :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
+            </l-table>
+        </l-layout>
+
+
+        <l-dialog
+            :title="$t('添加公式条件')"
+            :visible.sync="formulaVisible"
+            :height="480"
+
+            @ok="handleFormulaOk"
+            @closed="handleFormulaClosed"
+            @opened="handleFormulaOpened"
+        >
+            <condition-formula ref="conditionFormula" ></condition-formula>
+        </l-dialog>
+
+        <l-dialog
+            :title="$t('添加sql条件')"
+            :visible.sync="sqlVisible"
+            :height="480"
+
+            @ok="handleSqlOk"
+            @closed="handleSqlClosed"
+            @opened="handleSqlOpened"
+        >
+            <condition-sql ref="conditionSql" ></condition-sql>
+        </l-dialog>
+           
+        
+    </l-layout>
+</template>
+
+<script>
+import conditionFormula from './conditionFormula.vue'
+import conditionSql from './conditionSql.vue'
+
+export default {
+    name:'gateway-inclusive-option',
+    props:{
+      disabled:{
+          type:Boolean,
+          default:false
+      }
+    },
+    components: {
+        conditionFormula,
+        conditionSql
+    },
+    data () {
+        return {
+            tableBtns:[
+                {prop:'Edit',label:'编辑'},
+                {prop:'Delete',label:'删除'}
+            ],
+            columns:[
+                {label:'类型',prop:'type',width:'80', align: 'center'},
+                {label:'名称',prop:'name',minWidth:'100'},
+            ],
+            tableData:[],
+
+            formulaVisible:false,
+            sqlVisible:false,
+
+            editRow:null,
+            isEdit:false,
+            rowIndex:0,
+        }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        }
+    },
+    inject: ["wfdesign"],
+    methods:{
+        typeFormat(type){
+            switch(type){
+                case '1':
+                    return '表达式'
+                case '2':
+                    return 'sql语句'
+            }
+        },
+        handleTableBtnClick(btn){
+            switch(btn.type){
+                case 'Edit':
+                    this.isEdit = true;
+                    this.editRow = btn.row;
+                    this.rowIndex = btn.rowIndex;
+                    if(this.editRow.type == '1'){
+                        this.formulaVisible = true;
+                    }
+                    else{
+                        this.sqlVisible = true;
+                    }
+                    break;
+                case 'Delete':
+                    this.node.conditions.splice(btn.rowIndex,1);
+                    break;
+            }
+            console.log(btn);
+            //this.tableData.splice(btn.rowIndex,1);
+        },
+        handleFormulaClick(){
+            this.isEdit = false;
+            this.formulaVisible = true;
+        },
+        handleSQlClick(){
+            this.isEdit = false;
+            this.sqlVisible = true;
+        },
+        handleClearClick(){
+            this.node.conditions = [];
+        },
+        handleFormulaOk(){
+            this.$refs.conditionFormula.validateForm(()=>{
+                let formData = this.$refs.conditionFormula.getForm();
+                formData.type = '1';
+
+                if(this.isEdit){
+                    this.node.conditions[this.rowIndex] = formData;
+                }
+                else{
+                    formData.code = this.$uuid();
+                    this.node.conditions.push(formData);
+                }
+                
+
+                this.formulaVisible = false;
+            })
+        },
+        handleFormulaOpened(){
+            if(this.isEdit){
+                this.$refs.conditionFormula.setForm(this.editRow);
+            }
+            
+        },
+        handleFormulaClosed(){
+            this.$refs.conditionFormula.resetForm();
+        },
+        handleSqlOk(){
+            this.$refs.conditionSql.validateForm(()=>{
+                let formData = this.$refs.conditionSql.getForm();
+                formData.type = '2';
+
+                if(this.isEdit){
+                    this.node.conditions[this.rowIndex] = formData;
+                }
+                else{
+                    formData.code = this.$uuid();
+                    this.node.conditions.push(formData);
+                }
+                
+                this.sqlVisible = false;
+            })
+        },
+        handleSqlOpened(){
+            if(this.isEdit){
+                this.$refs.conditionSql.setForm(this.editRow);
+            }
+        },
+        handleSqlClosed(){
+            this.$refs.conditionSql.resetForm();
+        },
+    }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/gatewayXor.vue b/src/components/ProcessDesigner/package/penal/config/gatewayXor.vue
new file mode 100644
index 0000000..c088ad5
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/gatewayXor.vue
@@ -0,0 +1,212 @@
+<!-- 开始节点配置 -->
+<template>
+    <l-layout :top="180" >
+        <template #top>
+            <el-form
+                class="l-form-config"
+                label-width="88px"
+                label-position="left"
+                size="mini"
+            >
+                <el-form-item label="节点标识">
+                    <el-input v-model="node.id" readonly ></el-input>
+                </el-form-item>
+                <div style="padding:0 16px;">
+                    <el-alert
+                        title="排他网关说明"
+                        type="info"
+                        description="排他网关不会等待所有分支汇入才往下执行，只要有分支汇入就会往下执行，出口分支只会执行一条（条件为true，如果多条出口分支条件为true也执行一条）"
+                        show-icon
+                        :closable="false"
+                        >
+                    </el-alert>
+                </div>
+            </el-form>
+        </template>
+         <l-layout :top="40">
+            <template #top v-if="!disabled">
+                <div style="padding-left:8px;float:left;" >
+                    <el-button-group>
+                        <el-button size="mini" icon="el-icon-plus" @click="handleFormulaClick">{{$t('公式')}}</el-button>
+                        <el-button size="mini" icon="el-icon-plus" @click="handleSQlClick">{{$t('sql语句')}}</el-button>
+                    </el-button-group>
+                </div>
+                <div style="padding-right:8px;float:right;">
+                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{$t('清空')}}</el-button>
+                </div>
+            </template>
+            <l-table :columns="columns" :dataSource="node.conditions" >
+                <template v-slot:type="scope" >
+                    {{typeFormat(scope.row.type)}}
+                </template>
+                <l-table-btns v-if="!disabled" :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
+            </l-table>
+        </l-layout>
+
+
+        <l-dialog
+            :title="$t('添加公式条件')"
+            :visible.sync="formulaVisible"
+            :height="480"
+
+            @ok="handleFormulaOk"
+            @closed="handleFormulaClosed"
+            @opened="handleFormulaOpened"
+        >
+            <condition-formula ref="conditionFormula" ></condition-formula>
+        </l-dialog>
+
+        <l-dialog
+            :title="$t('添加sql条件')"
+            :visible.sync="sqlVisible"
+            :height="480"
+
+            @ok="handleSqlOk"
+            @closed="handleSqlClosed"
+            @opened="handleSqlOpened"
+        >
+            <condition-sql ref="conditionSql" ></condition-sql>
+        </l-dialog>
+           
+        
+    </l-layout>
+</template>
+
+<script>
+import conditionFormula from './conditionFormula.vue'
+import conditionSql from './conditionSql.vue'
+
+export default {
+    name:'gateway-xor-option',
+     props:{
+      disabled:{
+          type:Boolean,
+          default:false
+      }
+    },
+    components: {
+        conditionFormula,
+        conditionSql
+    },
+    data () {
+        return {
+            tableBtns:[
+                {prop:'Edit',label:'编辑'},
+                {prop:'Delete',label:'删除'}
+            ],
+            columns:[
+                {label:'类型',prop:'type',width:'80', align: 'center'},
+                {label:'名称',prop:'name',minWidth:'100'},
+            ],
+            tableData:[],
+
+            formulaVisible:false,
+            sqlVisible:false,
+
+            editRow:null,
+            isEdit:false,
+            rowIndex:0,
+        }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        }
+    },
+    inject: ["wfdesign"],
+    methods:{
+        typeFormat(type){
+            switch(type){
+                case '1':
+                    return '表达式'
+                case '2':
+                    return 'sql语句'
+            }
+        },
+        handleTableBtnClick(btn){
+            switch(btn.type){
+                case 'Edit':
+                    this.isEdit = true;
+                    this.editRow = btn.row;
+                    this.rowIndex = btn.rowIndex;
+                    if(this.editRow.type == '1'){
+                        this.formulaVisible = true;
+                    }
+                    else{
+                        this.sqlVisible = true;
+                    }
+                    break;
+                case 'Delete':
+                    this.node.conditions.splice(btn.rowIndex,1);
+                    break;
+            }
+            console.log(btn);
+            //this.tableData.splice(btn.rowIndex,1);
+        },
+        handleFormulaClick(){
+            this.isEdit = false;
+            this.formulaVisible = true;
+        },
+        handleSQlClick(){
+            this.isEdit = false;
+            this.sqlVisible = true;
+        },
+        handleClearClick(){
+            this.node.conditions = [];
+        },
+        handleFormulaOk(){
+            this.$refs.conditionFormula.validateForm(()=>{
+                let formData = this.$refs.conditionFormula.getForm();
+                formData.type = '1';
+
+                if(this.isEdit){
+                    this.node.conditions[this.rowIndex] = formData;
+                }
+                else{
+                    formData.code = this.$uuid();
+                    this.node.conditions.push(formData);
+                }
+                
+
+                this.formulaVisible = false;
+            })
+        },
+        handleFormulaOpened(){
+            if(this.isEdit){
+                this.$refs.conditionFormula.setForm(this.editRow);
+            }
+            
+        },
+        handleFormulaClosed(){
+            this.$refs.conditionFormula.resetForm();
+        },
+        handleSqlOk(){
+            this.$refs.conditionSql.validateForm(()=>{
+                let formData = this.$refs.conditionSql.getForm();
+                formData.type = '2';
+
+                if(this.isEdit){
+                    this.node.conditions[this.rowIndex] = formData;
+                }
+                else{
+                    formData.code = this.$uuid();
+                    this.node.conditions.push(formData);
+                }
+                
+                this.sqlVisible = false;
+            })
+        },
+        handleSqlOpened(){
+            if(this.isEdit){
+                this.$refs.conditionSql.setForm(this.editRow);
+            }
+        },
+        handleSqlClosed(){
+            this.$refs.conditionSql.resetForm();
+        },
+    }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/myline.vue b/src/components/ProcessDesigner/package/penal/config/myline.vue
new file mode 100644
index 0000000..bb33521
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/myline.vue
@@ -0,0 +1,120 @@
+<!-- 开始节点配置 -->
+<template>
+  <el-form
+        class="l-form-config"
+        label-width="88px"
+        label-position="left"
+        size="mini">
+    <el-form-item label="节点标识">
+      <el-input v-model="node.id" readonly ></el-input>
+    </el-form-item>
+    <el-form-item v-if="conditionsOptions && conditionsOptions.length >0" label="流转条件">
+      <l-select 
+        :disabled="disabled"
+
+        v-model="value" 
+        :options="conditionsOptions"
+        
+        labelKey="name"
+        valueKey="code"
+        :multiple="true"
+        placeholder="不选择,默认流转条件为true"
+         ></l-select>
+    </el-form-item>
+
+    
+  </el-form>
+</template>
+
+<script>
+export default {
+    name:'line-option',
+    props:{
+      disabled:{
+          type:Boolean,
+          default:false
+      }
+    },
+    data () {
+        return {
+          conditionsOptions:[],
+          value2:''
+        }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        },
+        value:{
+          get(){
+            return this.value2;
+          },
+          set(val){
+            this.value2 = val;
+            this.node.lineConditions = val;
+          }
+        }
+    },
+    inject: ["wfdesign"],
+    created(){   
+      this.getConditions()
+    },
+    methods:{
+      getConditions(){
+        let wfdata = this.wfdesign.handleGetWFData();
+        let fromNode = wfdata.find(t=>t.id == this.node.from);
+        /**
+         *  startEvent:'开始节点',
+            endEvent:'结束节点',
+            gatewayAnd:'并行网关',
+            gatewayInclusive:'包含网关',
+            gatewayXor:'排他网关',
+            scriptTask:'脚本节点',
+            userTask:'审核节点',
+            subprocess:'子流程',
+         */
+        switch(fromNode.type){
+          case 'startEvent':
+          case 'endEvent':
+          case 'gatewayAnd':
+          case 'scriptTask':
+          case 'subprocess':
+            this.node.lineConditions = ''
+            this.conditionsOptions = []
+            break
+          case 'gatewayInclusive':
+          case 'gatewayXor':
+            this.conditionsOptions = fromNode.conditions
+            // 过滤掉没有的值
+            this.filterValue()
+            break
+          case 'userTask':
+            this.conditionsOptions = fromNode.btnlist.filter(t=>!t.hidden)
+            
+            
+
+            // 过滤掉没有的值
+            this.filterValue()
+            break
+        }
+
+
+
+        this.value2 = this.node.lineConditions
+      },
+      filterValue(){
+        const vlist = this.node.lineConditions.split(',')
+        const res = []
+        vlist.forEach(item => {
+          if(this.conditionsOptions.findIndex(t=>t.code == item) != -1){
+            res.push(item)
+          }
+        })
+        this.node.lineConditions = String(res)
+      }
+    }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/scriptTask.vue b/src/components/ProcessDesigner/package/penal/config/scriptTask.vue
new file mode 100644
index 0000000..88bc73d
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/scriptTask.vue
@@ -0,0 +1,124 @@
+<!-- 开始节点配置 -->
+<template>
+  <el-form
+        class="l-form-config"
+        label-width="88px"
+        label-position="left"
+        size="mini">
+    <el-form-item label="节点标识">
+      <el-input v-model="node.id" readonly ></el-input>
+    </el-form-item>
+    <el-divider>执行操作</el-divider>
+    <div style="text-align: center;margin-bottom:16px;" >
+        <el-radio-group v-model="node.executeType" size="mini" :disabled="disabled">
+            <el-radio-button label="1">执行SQL</el-radio-button>
+            <el-radio-button label="2">.NET方法</el-radio-button>
+            <el-radio-button label="3">第三方接口</el-radio-button>
+        </el-radio-group>
+    </div>
+    <template v-if="node.executeType == '1'" >
+      <div style="padding:0 0 16px 0;">
+          <el-alert
+              title="sql参数说明"
+              type="info"
+              description="参数有 @processId流程进程主键 @code上一步执行码 @userId流程发起人Id @userAccount流程发起人账号 @companyId流程发起人公司 @departmentId流程发起人部门;
+              @userId2上一步审核人Id @userAccount2上一步审核人账号 @companyId2上一步审核人公司 @departmentId2上一步审核人部门;
+              "
+              show-icon
+              :closable="false"
+              >
+          </el-alert>
+      </div>
+      <el-form-item label-width="0">
+          <el-select v-model="node.sqlDb" placeholder="请选择执行SQL数据库" :disabled="disabled">
+              <el-option-group
+              v-for="group in lr_dblinkTree"
+              :key="group.id"
+              :label="group.label">
+                  <el-option
+                      v-for="item in group.children"
+                      :key="item.id"
+                      :label="item.label"
+                      :value="item.id">
+                  </el-option>
+              </el-option-group>
+          </el-select>
+      </el-form-item>
+      <el-form-item label-width="0">
+          <el-input :readonly="disabled" type="textarea" v-model="node.sqlStr" rows="8" placeholder="请填写SQL语句" ></el-input>
+      </el-form-item>
+      <el-form-item label-width="0">
+          <el-input :readonly="disabled" type="textarea" v-model="node.sqlStrRevoke" rows="8" placeholder="请填写SQL语句（撤销）" ></el-input>
+      </el-form-item>
+    </template>
+    <template v-if="node.executeType == '2'" >
+      <div style="padding:0 0 16px 0;">
+          <el-alert
+              title="IOC说明"
+              type="info"
+              description="注意：编写一个继承IWorkFlowMethod的类
+              "
+              show-icon
+              :closable="false"
+              >
+          </el-alert>
+      </div>
+      <el-form-item label-width="0">
+          <el-input :readonly="disabled" type="textarea" v-model="node.ioc" rows="4" placeholder="ioc名称" ></el-input>
+      </el-form-item>
+      <el-form-item label-width="0">
+          <el-input :readonly="disabled" type="textarea" v-model="node.iocRevoke" rows="4" placeholder="ioc名称（撤销）" ></el-input>
+      </el-form-item>
+    </template>
+    <template v-if="node.executeType == '3'" >
+      <div style="padding:0 0 16px 0;">
+          <el-alert
+              title="接口参数说明"
+              type="info"
+              description="注意：配置支持Post方法的接口,json数据格式。{
+                processId:'流程发起实例主键',userId:'流程发起人Id',userAccount:'流程发起人账号',companyId:'流程发起人公司',departmentId:'流程发起人部门',code:'上一步执行码',
+                userId2:'上一步审核人Id',userAccount2:'上一步审核人账号',companyId2:'上一步审核人公司',departmentId2:'上一步审核人部门'
+                }
+              "
+              show-icon
+              :closable="false"
+              >
+          </el-alert>
+      </div>
+      <el-form-item label-width="0">
+          <el-input :readonly="disabled" type="textarea" v-model="node.apiUrl" rows="4" placeholder="接口地址" ></el-input>
+      </el-form-item>
+      <el-form-item label-width="0">
+          <el-input :readonly="disabled" type="textarea" v-model="node.apiUrlRevoke" rows="4" placeholder="接口地址（撤销）" ></el-input>
+      </el-form-item>
+    </template>
+
+    
+    
+  </el-form>
+</template>
+
+<script>
+export default {
+    name:'script-task-option',
+    props:{
+      disabled:{
+          type:Boolean,
+          default:false
+      }
+    },
+    data () {
+        return {
+        }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        }
+    },
+    inject: ["wfdesign"]
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/config/subprocess.vue b/src/components/ProcessDesigner/package/penal/config/subprocess.vue
new file mode 100644
index 0000000..f377baa
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/config/subprocess.vue
@@ -0,0 +1,77 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-02-29 13:56:45
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-02-29 14:34:53
+ * @Description: 
+-->
+<!-- 开始节点配置 -->
+<template>
+  <el-form
+        class="l-form-config"
+        label-width="88px"
+        label-position="left"
+        size="mini">
+    <el-form-item label="节点标识">
+      <el-input  v-model="node.id" readonly ></el-input>
+    </el-form-item>
+    <el-form-item label="是否异步">
+      <el-switch :disabled="disabled" v-model="node.isAsync">
+      </el-switch>
+    </el-form-item>
+    <el-form-item label="流程模版">
+      <l-select :disabled="disabled"   v-model="node.wfschemeId" :options="list">
+      </l-select>
+    </el-form-item>
+    <el-form-item label="流程版本">
+      <l-select :disabled="disabled"   v-model="node.wfVersionId" :options="verisons">
+      </l-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+// const api = window.$api.workflow.scheme
+
+export default {
+    name:'subprocess-option',
+    props:{
+      disabled:{
+          type:Boolean,
+          default:false
+      }
+    },
+    data () {
+        return {
+        }
+    },
+    asyncComputed:{
+      list:{
+        async get(){
+          const data = []
+          // const data = await this.$awaitWraper(api.getList())
+          const res = data || []
+          return res.filter(t=>t.f_Id != this.wfdesign.schemeinfoId).map(t=>{return {label:t.f_Name,value:t.f_Id}})
+        }
+      },
+      verisons:{
+        async get(){
+            let res = []
+            if(!this.$validatenull(this.node.wfschemeId)){
+              // res = await this.$awaitWraper(api.getHistoryList(this.node.wfschemeId))
+            }
+            return (res || []).map(t=>{return { label:this.lr_dateFormat(t.f_CreateDate),value:t.f_Id }})
+        }
+      }
+    },
+    computed: {
+        node(){
+          return this.wfdesign.currentWfNode;
+        }
+    },
+    inject: ["wfdesign"]
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/index.js b/src/components/ProcessDesigner/package/penal/index.js
new file mode 100644
index 0000000..9b398b2
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/index.js
@@ -0,0 +1,7 @@
+import BpmnPropertiesPanel from "./PropertiesPanel.vue";
+
+BpmnPropertiesPanel.install = function(Vue) {
+  Vue.component(BpmnPropertiesPanel.name, BpmnPropertiesPanel);
+};
+
+export default BpmnPropertiesPanel;
diff --git a/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue b/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue
new file mode 100644
index 0000000..2199a96
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="shceme-info">
+        <a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-form-item label="模板编号" name="f_Code">
+                <a-input v-model:value="formState.f_Code" placeholder="请输入" />
+            </a-form-item>
+            <a-form-item label="模板名称" name="f_Name">
+                <a-input v-model:value="formState.f_Name" placeholder="请输入" />
+            </a-form-item>
+            <a-form-item label="模板图标" name="f_Icon">
+                <IconPicker :value="formState.f_Icon" />
+            </a-form-item>
+            <a-form-item label="图标颜色" name="f_Color">
+                <a-input type="color" v-model="formState.f_Color" placeholder="请输入"></a-input>
+            </a-form-item>
+            <a-form-item label="模板分类" name="f_Category">
+                <a-select v-model:value="formState.f_Category" placeholder="please select your zone">
+                    <a-select-option value="shanghai">Zone one</a-select-option>
+                    <a-select-option value="beijing">Zone two</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="我的任务创建">
+                <a-radio-group v-model:value="formState.f_Mark" name="radioGroup">
+                    <a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item label="移动端创建">
+                <a-radio-group v-model:value="formState.f_IsInApp" name="radioGroup">
+                    <a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
+                </a-radio-group>
+            </a-form-item>
+            <a-textarea v-model:value="formState.f_Description" placeholder="请填写备注"
+                :auto-size="{ minRows: 5, maxRows: 8 }" />
+
+
+            <a-divider plain="true">撤销操作</a-divider>
+            <a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
+                <a-tab-pane key="1" tab="执行SQL">
+                    <a-space  direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
+                                <a-select-option value="shanghai">Zone one</a-select-option>
+                                <a-select-option value="beijing">Zone two</a-select-option>
+                            </a-select>
+                        </a-space-compact>
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.undoDbSQL"
+                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab=".NET方法">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.undoIOCName" placeholder="请填写.NET方法IOC别名"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+                <a-tab-pane key="3" tab="第三方接口">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.undoUrl"
+                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+            </a-tabs>
+
+            <a-divider plain="true">作废操作</a-divider>
+            <a-tabs v-model:activeKey="formState.deleteType" type="card" size="small" centered="true">
+                <a-tab-pane key="1" tab="执行SQL">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库">
+                                <a-select-option value="shanghai">Zone one</a-select-option>
+                                <a-select-option value="beijing">Zone two</a-select-option>
+                            </a-select>
+                        </a-space-compact>
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.deleteDbSQL"
+                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab=".NET方法">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.deleteIOCName" placeholder="请填写.NET方法IOC别名"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+                <a-tab-pane key="3" tab="第三方接口">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.undoUrl"
+                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+            </a-tabs>
+
+            <a-divider plain="true">删除草稿</a-divider>
+            <a-tabs v-model:activeKey="formState.deleteDraftType" type="card" size="small" centered="true">
+                <a-tab-pane key="1" tab="执行SQL">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库">
+                                <a-select-option value="shanghai">Zone one</a-select-option>
+                                <a-select-option value="beijing">Zone two</a-select-option>
+                            </a-select>
+                        </a-space-compact>
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.deleteDraftDbSQL"
+                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab=".NET方法">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+                <a-tab-pane key="3" tab="第三方接口">
+                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+                        <a-space-compact block>
+                            <a-textarea v-model:value="formState.undoUrl"
+                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
+                                :auto-size="{ minRows: 5, maxRows: 8 }" />
+                        </a-space-compact>
+                    </a-space>
+                </a-tab-pane>
+            </a-tabs>
+        </a-form>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { Dayjs } from 'dayjs';
+    import { reactive, ref, toRaw } from 'vue';
+    import type { UnwrapRef } from 'vue';
+    import type { Rule } from 'ant-design-vue/es/form';
+    import { IconPicker } from '/@/components/Icon';
+    const formRef = ref();
+    const labelCol = { span: 7 };
+    const wrapperCol = { span: 17 };
+    const activeKey = ref('1')
+    const data = reactive({
+        optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
+
+    })
+    const formState = reactive({
+        f_Code: '',
+        f_Name: '',
+        f_Category: '',
+        f_Mark: 1,
+        f_IsInApp: 2,
+        f_Description: '',
+
+        titleRules: '',
+
+        undoType: "1",
+        undoDbCode: '',
+        undoDbSQL: '',
+        undoIOCName: '',
+        undoUrl: '',
+
+        deleteType: "1",
+        deleteDbCode: '',
+        deleteDbSQL: '',
+        deleteIOCName: '',
+        deleteUrl: '',
+
+        deleteDraftType: "1",
+        deleteDraftDbCode: '',
+        deleteDraftDbSQL: '',
+        deleteDraftIOCName: '',
+        deleteDraftUrl: '',
+        f_Icon: '',
+        f_Color: '#409EFF',
+    });
+    const rules: Record<string, Rule[]> = {
+        f_Code: [
+            { required: true, message: '请输入模板编号' },
+            // { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
+        ],
+        f_Name: [
+            { required: true, message: '请输入模板名称' }
+        ],
+        f_Category: [
+            { required: true, message: '请选择模板分类' }
+        ],
+        f_Icon: [
+            { required: true, message: '请选择图标' }
+        ],
+        f_Color: [
+            { required: true, message: '请选择颜色' }
+        ],
+    };
+   
+</script>
+<style lang="less" scoped>
+    .site-space-compact-wrapper {
+        width: 100%;
+        .ant-select {
+            width: 100%;
+        }
+    }
+    ::v-deep .ant-tabs {
+        padding: 0!important;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/startEvent/index.vue b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
new file mode 100644
index 0000000..cda058b
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
@@ -0,0 +1,351 @@
+<!-- 开始节点配置 -->
+<template>
+  <div class="start-event">
+
+    <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
+      :wrapper-col="wrapperCol">
+      <a-form-item label="节点标识">
+        <a-input v-model:value="node.id" placeholder="请输入" readonly />
+      </a-form-item>
+      <a-form-item label="下一审核人">
+        <a-switch v-model:checked="node.isNextAuditor" />
+      </a-form-item>
+      <a-form-item label="自定义标题">
+        <a-switch v-model:checked="node.isCustmerTitle" />
+      </a-form-item>
+      <a-form-item label="通知策略" name="f_Color">
+        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
+          :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
+      </a-form-item>
+
+      <a-divider plain="true">表单添加</a-divider>
+      <a-tabs v-model:activeKey="node.formType" type="card" size="small" centered="true">
+        <a-tab-pane key="1" tab="自定义表单">
+          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+            <a-space-compact block>
+              <a-select v-model:value="node.formVerison" placeholder="请选择表单版本">
+                <a-select-option value="shanghai">Zone one</a-select-option>
+                <a-select-option value="beijing">Zone two</a-select-option>
+              </a-select>
+            </a-space-compact>
+            <a-space-compact block>
+              <a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段">
+                <a-select-option value="shanghai">Zone one</a-select-option>
+                <a-select-option value="beijing">Zone two</a-select-option>
+              </a-select>
+            </a-space-compact>
+          </a-space>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="系统表单">
+          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
+            <a-space-compact block>
+              <a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" />
+            </a-space-compact>
+            <a-space-compact block>
+              <a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" />
+            </a-space-compact>
+          </a-space>
+        </a-tab-pane>
+      </a-tabs>
+
+      <a-divider plain="true">表单字段权限</a-divider>
+      <a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false"
+        v-if="node.formType == 1">
+        <template #bodyCell="{ column, text, record }">
+          <template v-if="['label', 'field'].includes(column.dataIndex)">
+            <div>
+              {{ text }}
+            </div>
+          </template>
+          <template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
+            <div>
+              <a-switch v-model:checked="record[column.dataIndex]" />
+            </div>
+          </template>
+        </template>
+      </a-table>
+      <a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false" v-else>
+        <template #bodyCell="{ column, text, record }">
+          <template v-if="['label', 'field'].includes(column.dataIndex)">
+            <div>
+              {{ text }}
+            </div>
+          </template>
+          <template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
+            <div>
+              <a-switch v-model:checked="record[column.dataIndex]" />
+            </div>
+          </template>
+          <template v-else-if="column.dataIndex === 'operation'">
+            <delete-outlined two-tone-color='#eb2f96' @click='handleDeleteAuthField(record.field)' />
+          </template>
+        </template>
+      </a-table>
+
+      <a-divider plain="true"></a-divider>
+      <a-space v-if="node.formType!=1">
+        <a-button @click="handleAddAuthField" width="100%" type="dashed" danger :icon="h(PlusOutlined)">添加字段</a-button>
+      </a-space>
+      <!-- <a-table :columns="data.columns" :data-source="node.authField" bordered :pagination="false">
+        <template #bodyCell="{ column, text, record }">
+          <template v-if="['name', 'type'].includes(column.dataIndex)">
+            <div>
+              <a-input
+            v-model:value="text"
+            style="margin: -5px 0"
+          />
+            </div>
+          </template>
+          <template v-else-if="column.dataIndex === 'operation'">
+            <a>删除</a>
+          </template>
+        </template>
+      </a-table> -->
+
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
+  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
+  const labelCol = { span: 7 };
+    const wrapperCol = { span: 17 };
+  const props = defineProps({
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    element: Object
+  })
+  const data = reactive({
+    columns: [
+      {
+        title: '名称',
+        dataIndex: 'label',
+      },
+      {
+        title: '字段',
+        dataIndex: 'field',
+      },
+      {
+        title: '必填',
+        dataIndex: 'required',
+      },
+      {
+        title: '编辑',
+        dataIndex: 'isEdit',
+      },
+      {
+        title: '查看',
+        dataIndex: 'isLook',
+      },
+
+
+    ],
+    formRelations: [],
+    elementData: props.element
+  })
+  const node = reactive({
+    id: data.elementData.id,
+    type: data.elementData.type,
+    isNextAuditor: false,
+    isCustmerTitle: false,
+    formRelations: [],
+    formType: "1",
+    formCode: "",
+    formVerison: "",
+    formRelationId: "",
+    formUrl: "",
+    formAppUrl: "",
+    authFields: [
+      {
+        label: '测试',
+        field: 'ceshi',
+        required: true,
+        isEdit: true,
+        isLook: true,
+      }
+    ],
+    messageType: "",
+    isInit: true
+  })
+  watch(
+    () => props.element,
+    (newVal, oldVal) => {
+      data.elementData = newVal
+      node.id = data.elementData.id
+      node.type = data.elementData.type
+    }
+  )
+  watch(
+    () => node.formType,
+    (newVal, oldVal) => {
+      if (newVal == 1) {
+        data.columns = data.columns.filter(item => item.dataIndex !== 'operation');
+      } else {
+        data.columns.push({
+          title: '',
+          dataIndex: 'operation',
+        })
+      }
+    }
+  )
+
+  
+  async function custmerformChange(val) {
+    this.$set(this.node, 'formRelationId', '')
+    if (val == null) {
+      this.node.authFields = [];
+      this.node.formVerison = ''
+      return;
+    }
+    if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
+      // const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
+      this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
+      if (this.node.formCode == f_SchemeInfoId) {
+        this.loadFormScheme(f_Scheme)
+      }
+    }
+    else {
+      this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
+    }
+    this.node.formVerison = val.f_SchemeId
+  }
+  async function custmerformVerisonChange(val) {
+    this.$set(this.node, 'formRelationId', '')
+    if (this.$validatenull(val)) {
+      this.node.authFields = []
+      return
+    }
+    if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
+      // const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
+      this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
+      if (this.node.formVerison == f_Id) {
+
+        this.loadFormScheme(f_Scheme)
+      }
+    }
+    else {
+      this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
+    }
+  }
+  function loadFormScheme(strScheme) {
+    const scheme = JSON.parse(strScheme)
+    const fields = []
+    const rfields = []
+    scheme.formInfo.tabList.forEach(tab => {
+      tab.components.forEach(component => {
+        if (['guid'].includes(component.type)) {
+          rfields.push({ label: component.label, value: component.prop })
+        }
+
+        if (!['gridtable', 'divider'].includes(component.type) && component.display) {
+          fields.push({
+            prop: component.prop,
+            field: component.field,
+            label: component.label,
+            table: component.table,
+            required: component.required,
+            isEdit: true,
+            isLook: true
+          })
+        }
+        else if (['gridtable'].includes(component.type)) {
+          fields.push({
+            prop: `${component.prop}_add`,
+            label: `${component.label || '表格'}-添加按钮`,
+            required: false,
+            isEdit: true,
+            isLook: false,
+            type: 'grid'
+          })
+          fields.push({
+            prop: `${component.prop}_remove`,
+            label: `${component.label || '表格'}-删除按钮`,
+            required: false,
+            isEdit: true,
+            isLook: false,
+            type: 'grid'
+          })
+
+          fields.push({
+            prop: `${component.prop}_required`,
+            label: `${component.label || '表格'}-数据`,
+            required: component.required,
+            isEdit: false,
+            isLook: false,
+            type: 'gridrequired'
+          })
+          fields.push(...component.children.filter(t => t.display).map(t => {
+            return {
+              gridprop: component.prop,
+              prop: t.prop,
+              field: t.field,
+              label: `${component.label || '表格'}-${t.label}`,
+              table: component.table,
+              required: t.required,
+              isEdit: true,
+              isLook: true
+            }
+          }))
+        }
+      })
+    })
+
+
+
+    this.node.formRelations = rfields
+    this.node.authFields = fields
+
+  }
+  function handleFormTypeChange() {
+    this.node.formCode = ''
+    this.node.formUrl = ''
+    this.node.formAppUrl = ''
+    this.node.authFields = []
+    this.node.formRelations = []
+
+    this.$set(this.node, 'formRelationId', '')
+
+  }
+  function handleAddAuthField() {
+    node.authFields.push({
+      field: '',
+      label: '',
+      required: true,
+      isEdit: true,
+      isLook: true
+    })
+  }
+  function handleDeleteAuthField(key) {
+    node.authFields = node.authFields.filter(item => item.field !== key);
+  }
+
+</script>
+<style lang="less" scoped>
+  .site-space-compact-wrapper {
+    width: 100%;
+
+    .ant-select {
+      width: 100%;
+    }
+  }
+
+  ::v-deep .ant-tabs {
+    padding: 0 !important;
+  }
+
+  ::v-deep .ant-space {
+    width: 90%;
+    margin-left: 5%;
+
+    .ant-space-item {
+      width: 100%;
+
+      button {
+        width: 100%;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/index copy.vue b/src/components/ProcessDesigner/package/penal/userTask/index copy.vue
new file mode 100644
index 0000000..f6074fb
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/userTask/index copy.vue	
@@ -0,0 +1,673 @@
+<!-- 开始节点配置 -->
+<template>
+    <el-form label-width="96px" label-position="left" size="mini">
+        <el-collapse v-model="activeNames" accordion>
+            <el-collapse-item :title="$t('基础配置')" name="1">
+                <div style="padding:0 16px;">
+                    <el-form-item label="节点标识">
+                        <el-input v-model="node.id" readonly></el-input>
+                    </el-form-item>
+                    <el-form-item label="继承表单">
+                        <el-switch :disabled="disabled" v-model="node.isInherit">
+                        </el-switch>
+                    </el-form-item>
+                    <el-form-item label="允许加签">
+                        <el-switch :disabled="disabled" v-model="node.isAddSign">
+                        </el-switch>
+                    </el-form-item>
+                    <el-form-item label="允许转移">
+                        <el-switch :disabled="disabled" v-model="node.isTransfer">
+                        </el-switch>
+                    </el-form-item>
+                    <el-form-item label="允许批量审核">
+                        <el-switch :disabled="disabled" v-model="node.isBatchAudit">
+                        </el-switch>
+                    </el-form-item>
+                    <el-form-item label="自动同意规则">
+                        <l-select multiple :disabled="disabled" v-model="node.autoAgree" :options="atuoAgreeOptions">
+                        </l-select>
+                    </el-form-item>
+                    <el-form-item label="无对应处理人">
+                        <l-select :disabled="disabled" v-model="node.noAuditor" :options="noAuditorOptions">
+                        </l-select>
+                    </el-form-item>
+                    <el-form-item label="驳回策略">
+                        <l-radio :disabled="disabled" v-model="node.rejectType"
+                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]">
+                        </l-radio>
+                    </el-form-item>
+
+                    <el-form-item label="通知策略">
+                        <l-checkbox :disabled="disabled" v-model="node.messageType"
+                            :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]">
+                        </l-checkbox>
+                    </el-form-item>
+                </div>
+
+            </el-collapse-item>
+            <el-collapse-item :title="$t('审核人员设置')" name="2">
+                <el-button-group style="padding:0 0 8px 8px" v-if="!disabled">
+                    <el-button size="mini" @click="handlePostClick(false)">{{$t('岗位')}}</el-button>
+                    <el-button size="mini" @click="handleRoleClick(false)">{{$t('角色')}}</el-button>
+                    <el-button size="mini" @click="handleUserClick(false)">{{$t('用户')}}</el-button>
+                    <el-button size="mini" @click="handleLevelClick(false)">{{$t('上下级')}}</el-button>
+                    <el-button size="mini" @click="handleNodeAuditorClick(false)">{{$t('节点执行人')}}</el-button>
+                    <el-button size="mini" @click="handleAuditorSqlClick(false)">{{$t('表字段')}}</el-button>
+                </el-button-group>
+                <l-table height="notset" :isShowNum="false" :columns="userColumns" :dataSource="node.auditUsers">
+                    <template v-slot:type="scope">
+                        {{typeFormat(scope.row.type)}}
+                    </template>
+                    <template v-slot:condition="scope">
+                        <l-select :disabled="disabled" size="mini" v-if="scope.row.type == '2'"
+                            :options="conditionOptions" v-model="scope.row.condition"></l-select>
+                    </template>
+                    <l-table-btns v-if="!disabled" :isFixed="false" :btns="tableBtns" @click="handleTableBtnClick">
+                    </l-table-btns>
+                </l-table>
+            </el-collapse-item>
+            <el-collapse-item :title="$t('传阅人员设置')" name="3">
+                <el-button-group style="padding:0 0 8px 8px" v-if="!disabled">
+                    <el-button size="mini" @click="handlePostClick(true)">{{$t('岗位')}}</el-button>
+                    <el-button size="mini" @click="handleRoleClick(true)">{{$t('角色')}}</el-button>
+                    <el-button size="mini" @click="handleUserClick(true)">{{$t('用户')}}</el-button>
+                    <el-button size="mini" @click="handleLevelClick(true)">{{$t('上下级')}}</el-button>
+                    <el-button size="mini" @click="handleNodeAuditorClick(true)">{{$t('节点执行人')}}</el-button>
+                    <el-button size="mini" @click="handleAuditorSqlClick(true)">{{$t('表字段')}}</el-button>
+                </el-button-group>
+                <l-table height="notset" :isShowNum="false" :columns="userColumns" :dataSource="node.lookUsers">
+                    <template v-slot:type="scope">
+                        {{typeFormat(scope.row.type)}}
+                    </template>
+                    <template v-slot:condition="scope">
+                        <l-select :disabled="disabled" size="mini" v-if="scope.row.type == '2'"
+                            :options="conditionOptions" v-model="scope.row.condition"></l-select>
+                    </template>
+                    <l-table-btns v-if="!disabled" :isFixed="false" :btns="tableBtns" @click="handleTableBtnClick2">
+                    </l-table-btns>
+                </l-table>
+            </el-collapse-item>
+            <el-collapse-item v-if="!node.isInherit" :title="$t('表单设置')" name="4">
+                <div style="padding:0 16px;">
+                    <div style="text-align: center;margin-bottom:16px;">
+                        <el-radio-group :disabled="disabled" v-model="node.formType" size="mini"
+                            @change="handleFormTypeChange">
+                            <el-radio-button label="1">自定义表单</el-radio-button>
+                            <el-radio-button label="2">系统表单</el-radio-button>
+                        </el-radio-group>
+                    </div>
+                    <div v-show="node.formType === '1'">
+                        <el-form-item label-width="0px">
+                            <l-custmerform-select v-model="node.formCode" @change="custmerformChange"
+                                :disabled="disabled">
+                            </l-custmerform-select>
+                        </el-form-item>
+                        <el-form-item label-width="0px">
+                            <l-select v-model="node.formVerison" :disabled="disabled" :options="formVerisons"
+                                @change="custmerformVerisonChange" placeholder="请选择表单版本">
+                            </l-select>
+                        </el-form-item>
+                        <el-form-item label-width="0px">
+                            <l-select v-model="node.formRelationId" :disabled="disabled" :options="node.formRelations"
+                                placeholder="请选择流程关联字段">
+                            </l-select>
+                        </el-form-item>
+
+                    </div>
+                    <div v-show="node.formType === '2'">
+                        <el-form-item label-width="0px">
+                            <el-input v-model="node.formUrl" placeholder="请输入PC端表单地址" :readonly="disabled">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label-width="0px">
+                            <el-input v-model="node.formAppUrl" placeholder="请输入APP端表单地址" :readonly="disabled">
+                            </el-input>
+                        </el-form-item>
+                    </div>
+                    <el-divider>表单字段权限</el-divider>
+                    <template v-if="node.formType === '1'">
+                        <l-table height="notset" :isShowNum="false" :columns="columns" :dataSource="node.authFields"
+                            ref="authField">
+                            <template v-slot:required="scope">
+                                <el-switch v-model="scope.row.required"
+                                    :disabled="disabled || scope.row.type == 'grid'">
+                                </el-switch>
+                            </template>
+                            <template v-slot:isEdit="scope">
+                                <el-switch v-model="scope.row.isEdit"
+                                    :disabled="disabled || scope.row.type == 'gridrequired'">
+                                </el-switch>
+                            </template>
+                            <template v-slot:isLook="scope">
+                                <el-switch v-model="scope.row.isLook"
+                                    :disabled="disabled || scope.row.type == 'grid' || scope.row.type == 'gridrequired'">
+                                </el-switch>
+                            </template>
+                        </l-table>
+                    </template>
+                    <template v-else>
+                        <l-edit-table addBtnText="添加字段" :dataSource="node.authFields" :isShowNum="false"
+                            :isAddBtn="!disabled" :isRemoveBtn="!disabled" @addRow="handleAddAuthField"
+                            @deleteRow="handleDeleteAuthField">
+                            <el-table-column prop="label" label="名称" minWidth="100">
+                                <template slot-scope="scope">
+                                    <el-input :readonly="disabled" size="mini" v-model="scope.row.label"
+                                        placeholder="请输入名称"></el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="field" label="字段" minWidth="100">
+                                <template slot-scope="scope">
+                                    <el-input :readonly="disabled" size="mini" v-model="scope.row.field"
+                                        placeholder="请输入字段"></el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="required" label="必填" width="64">
+                                <template slot-scope="scope">
+                                    <el-switch v-model="scope.row.required" :disabled="disabled">
+                                    </el-switch>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="isEdit" label="编辑" width="64">
+                                <template slot-scope="scope">
+                                    <el-switch v-model="scope.row.isEdit" :disabled="disabled">
+                                    </el-switch>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="isLook" label="查看" width="64">
+                                <template slot-scope="scope">
+                                    <el-switch v-model="scope.row.isLook" :disabled="disabled">
+                                    </el-switch>
+                                </template>
+                            </el-table-column>
+                        </l-edit-table>
+                    </template>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item :title="$t('按钮设置')" name="5">
+                <l-edit-table addBtnText="添加按钮" :dataSource="node.btnlist" :isShowNum="false"
+                    :hasDeleteBtn="hasBtnsDeleteBtn" :isAddBtn="!disabled" :isRemoveBtn="!disabled"
+                    @addRow="handleAddBtns" @deleteRow="handleDeleteBtns">
+                    <el-table-column prop="name" label="名称" minWidth="100">
+                        <template slot-scope="scope">
+                            <el-input :readonly="disabled" v-if="!scope.row.isSys" size="mini" v-model="scope.row.name"
+                                placeholder="请输入名称"></el-input>
+                            <span v-else>{{scope.row.name}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="code" label="编码" minWidth="100">
+                        <template slot-scope="scope">
+                            <el-input :readonly="disabled" v-if="!scope.row.isSys" size="mini" v-model="scope.row.code"
+                                placeholder="请输入编码"></el-input>
+                            <span v-else>{{scope.row.code}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="center" prop="hidden" label="隐藏" width="64">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.hidden" :disabled="disabled">
+                            </el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="center" prop="isSign" label="签章" width="64">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.isSign" :disabled="disabled">
+                            </el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="center" prop="isNextAuditor" label="下一审核人" width="80">
+                        <template slot-scope="scope">
+                            <el-switch v-if="scope.row.code != 'disagree'" v-model="scope.row.isNextAuditor"
+                                :disabled="disabled">
+                            </el-switch>
+                        </template>
+                    </el-table-column>
+                </l-edit-table>
+            </el-collapse-item>
+            <el-collapse-item :title="$t('会签设置')" name="6">
+                <div style="padding:0 16px">
+                    <el-form-item label="是否会签">
+                        <el-switch v-model="node.isCountersign" :disabled="disabled">
+                        </el-switch>
+                    </el-form-item>
+                    <template v-if="node.isCountersign">
+                        <el-form-item label="审核方式">
+                            <l-radio :disabled="disabled" v-model="node.countersignType"
+                                :options="[{value:'1',label:'并行'},{value:'2',label:'串行'}]">
+                            </l-radio>
+                        </el-form-item>
+                        <el-form-item v-if="node.countersignType == '1'" label="是否等待">
+                            <!--并行才有这个设置-->
+                            <el-switch v-model="node.isCountersignAll" :disabled="disabled">
+                            </el-switch>
+                        </el-form-item>
+                        <el-form-item v-if="node.countersignType == '1'" label="通过百分比">
+                            <el-input-number :disabled="disabled" :min="1" :max="100" v-model="node.countersignAllType">
+                            </el-input-number>
+                        </el-form-item>
+
+                        <el-form-item label="再次审核">
+                            <l-radio :disabled="disabled" v-model="node.countersignAgian"
+                                :options="[{value:'1',label:'已同意不需要审核'},{value:'2',label:'已同意需要审核'}]">
+                            </l-radio>
+                        </el-form-item>
+                    </template>
+
+                </div>
+            </el-collapse-item>
+            <el-collapse-item :title="$t('超时设置')" name="7">
+                <div style="padding:0 16px">
+                    <el-form-item label="超时通知">
+                        <el-switch :disabled="disabled" v-model="node.isOvertimeMessage">
+                        </el-switch>
+                    </el-form-item>
+                    <template v-if="node.isOvertimeMessage">
+
+                        <el-form-item label="第一次通知(时)">
+                            <el-input-number :disabled="disabled" :min="1" v-model="node.overtimeMessageStart">
+                            </el-input-number>
+                        </el-form-item>
+                        <el-form-item label="通知间隔(时)">
+                            <el-input-number :disabled="disabled" :min="1" v-model="node.overtimeMessageInterval">
+                            </el-input-number>
+                        </el-form-item>
+                        <el-form-item label="超时流转时间(时)">
+                            <el-input-number :disabled="disabled" :min="1" v-model="node.overtimeGo">
+                            </el-input-number>
+                        </el-form-item>
+                        <el-form-item label="超时通知策略">
+                            <l-checkbox :disabled="disabled" v-model="node.overtimeMessageType"
+                                :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]">
+                            </l-checkbox>
+                        </el-form-item>
+                    </template>
+
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+
+
+        <l-dialog :title="$t('添加岗位')" :visible.sync="selectPostVisible" :height="480" width="1024px"
+            @ok="handlePostSelectOk" @closed="handlePostSelectClosed">
+            <l-post-select-panel ref="postSelectPanel"></l-post-select-panel>
+        </l-dialog>
+
+        <l-dialog :title="$t('添加角色')" :visible.sync="selectRoleVisible" :height="480" width="800px"
+            @ok="handleRoleSelectOk" @closed="handleRoleSelectClosed">
+            <l-role-select-panel ref="roleSelectPanel"></l-role-select-panel>
+        </l-dialog>
+
+
+        <l-dialog :title="$t('添加用户')" :visible.sync="selectUserVisible" :height="480" width="1024px"
+            @ok="handleUserSelectOk" @closed="handleUserSelectClosed">
+            <l-user-select-panel ref="userSelectPanel"></l-user-select-panel>
+        </l-dialog>
+
+        <!--上下级选择-->
+        <l-dialog :title="$t('上下级选择')" :visible.sync="levelVisible" :height="200" width="500px" @ok="handleLevelOk"
+            @closed="handleLevelClosed">
+            <!-- <auditor-level-form ref="auditorLevelForm"></auditor-level-form> -->
+        </l-dialog>
+
+        <!--流程节点选择-->
+        <l-dialog :title="$t('流程节点选择')" :visible.sync="nodeAuditorVisible" :height="200" width="500px"
+            @ok="handleNodeAuditorOk" @closed="handleNodeAuditorClosed" @opened="handleNodeAuditorOpened">
+            <!-- <node-auditor-form ref="nodeAuditorForm"></node-auditor-form> -->
+        </l-dialog>
+
+        <!--流程节点选择-->
+        <l-dialog :title="$t('数据表字段选择')" :visible.sync="auditorSqlVisible" width="500px" :height="300"
+            @ok="handleAuditorSqlOk" @closed="handleAuditorSqlClosed">
+            <!-- <auditor-sql-form ref="auditorSqlForm"></auditor-sql-form> -->
+        </l-dialog>
+
+    </el-form>
+</template>
+
+<script>
+
+    // const apiForm = window.$api.custmerForm.scheme
+
+    // import auditorLevelForm from './auditorLevel.vue'
+    // import nodeAuditorForm from './auditorNode.vue'
+    // import auditorSqlForm from './auditorSql.vue'
+
+    export default {
+        name: 'user-task-option',
+        props: {
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        components: {
+            // auditorLevelForm,
+            // nodeAuditorForm,
+            // auditorSqlForm
+        },
+        data() {
+            return {
+                activeNames: ['1'],
+                columns: [
+                    { label: '名称', prop: 'label', minWidth: '100' },
+                    { label: '字段', prop: 'field', minWidth: '100' },
+                    { label: '必填', prop: 'required', width: '64', align: 'center' },
+                    { label: '编辑', prop: 'isEdit', width: '64', align: 'center' },
+                    { label: '查看', prop: 'isLook', width: '64', align: 'center' },
+                ],
+                tableBtns: [
+                    { prop: 'Delete', label: '删除' }
+                ],
+                atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
+                noAuditorOptions: [{ value: '1', label: '超级管理员处理' }, { value: '2', label: '跳过此步骤' }, { value: '3', label: '不能提交' }],
+                userColumns: [
+                    { label: '类型', prop: 'type', width: '64' },
+                    { label: '名称', prop: 'name', minWidth: '100' },
+                    { label: '附加条件', prop: 'condition', minWidth: '100' }
+                ],
+
+                conditionOptions: [{ value: '1', label: '同一个部门' }, { value: '2', label: '同一个公司' }, { value: '3', label: '发起人上级' }, { value: '4', label: '发起人下级' }],
+
+                selectPostVisible: false,
+                selectRoleVisible: false,
+                selectUserVisible: false,
+                levelVisible: false,
+                nodeAuditorVisible: false,
+                auditorSqlVisible: false,
+
+                isLooker: false,
+
+            }
+        },
+        asyncComputed: {
+            formVerisons: {
+                async get() {
+                    let res = []
+                    if (!this.$validatenull(this.node.formCode) && this.node.formType == '1') {
+                        //   res = await this.$awaitWraper(apiForm.getHistoryList(this.node.formCode))
+                    }
+                    return (res || []).map(t => { return { label: this.lr_dateFormat(t.f_CreateDate), value: t.f_Id } })
+                }
+            }
+        },
+        computed: {
+            node() {
+                return this.wfdesign.currentWfNode;
+            }
+        },
+        inject: ["wfdesign"],
+        methods: {
+            async custmerformChange(val) {
+                this.$set(this.node, 'formRelationId', '')
+                if (val == null) {
+                    this.node.authFields = [];
+                    this.node.formVerison = ''
+                    return;
+                }
+                if (this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])) {
+                    // const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
+                    const { f_SchemeInfoId, f_Scheme, f_Id } = {}
+                    this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
+                    if (this.node.formCode == f_SchemeInfoId) {
+                        this.loadFormScheme(f_Scheme)
+                    }
+                }
+                else {
+                    this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
+                }
+                this.node.formVerison = val.f_SchemeId
+            },
+            async custmerformVerisonChange(val) {
+                this.$set(this.node, 'formRelationId', '')
+                if (this.$validatenull(val)) {
+                    this.node.authFields = []
+                    return
+                }
+                if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
+                    // const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
+                    const { f_Scheme, f_Id } = {}
+                    this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme }
+                    if (this.node.formVerison == f_Id) {
+                        this.loadFormScheme(f_Scheme)
+                    }
+                }
+                else {
+                    this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
+                }
+            },
+            loadFormScheme(strScheme) {
+                const scheme = JSON.parse(strScheme)
+                const fields = []
+                const rfields = []
+                scheme.formInfo.tabList.forEach(tab => {
+                    tab.components.forEach(component => {
+                        if (['guid'].includes(component.type)) {
+                            rfields.push({ label: component.label, value: component.prop })
+                        }
+
+                        if (!['gridtable', 'divider'].includes(component.type) && component.display) {
+                            fields.push({
+                                prop: component.prop,
+                                field: component.field,
+                                label: component.label,
+                                table: component.table,
+                                required: component.required,
+                                isEdit: true,
+                                isLook: true
+                            })
+                        }
+                        else if (['gridtable'].includes(component.type)) {
+                            fields.push({
+                                prop: `${component.prop}_add`,
+                                label: `${component.label || '表格'}-添加按钮`,
+                                required: false,
+                                isEdit: true,
+                                isLook: false,
+                                type: 'grid'
+                            })
+                            fields.push({
+                                prop: `${component.prop}_remove`,
+                                label: `${component.label || '表格'}-删除按钮`,
+                                required: false,
+                                isEdit: true,
+                                isLook: false,
+                                type: 'grid'
+                            })
+
+                            fields.push({
+                                prop: `${component.prop}_required`,
+                                label: `${component.label || '表格'}-数据`,
+                                required: component.required,
+                                isEdit: false,
+                                isLook: false,
+                                type: 'gridrequired'
+                            })
+                            fields.push(...component.children.filter(t => t.display).map(t => {
+                                return {
+                                    gridprop: component.prop,
+                                    prop: t.prop,
+                                    field: t.field,
+                                    label: `${component.label || '表格'}-${t.label}`,
+                                    table: component.table,
+                                    required: t.required,
+                                    isEdit: true,
+                                    isLook: true
+                                }
+                            }))
+                        }
+                    })
+                })
+                this.node.formRelations = rfields
+                this.node.authFields = fields
+
+            },
+            handleFormTypeChange() {
+                this.node.formCode = ''
+                this.node.formUrl = ''
+                this.node.formAppUrl = ''
+                this.node.authFields = []
+                this.node.formRelations = []
+
+                this.$set(this.node, 'formRelationId', '')
+
+            },
+            handleAddAuthField() {
+                this.node.authFields.push({
+                    field: '',
+                    label: '',
+                    required: true,
+                    isEdit: true,
+                    isLook: true
+                })
+            },
+            handleDeleteAuthField(row) {
+                this.node.authFields.splice(row.index, 1);
+            },
+
+            handleTableBtnClick(btn) {
+                this.node.auditUsers.splice(btn.rowIndex, 1);
+            },
+            handleTableBtnClick2(btn) {
+                this.node.lookUsers.splice(btn.rowIndex, 1);
+            },
+
+            typeFormat(type) {
+                switch (type) {
+                    case '1':
+                        return '岗位'
+                    case '2':
+                        return '角色'
+                    case '3':
+                        return '用户'
+                    case '4':
+                        return '上下级'
+                    case '5':
+                        return '节点'
+                    case '6':
+                        return '表字段'
+                }
+            },
+            addTableData(selectData) {
+                if (this.isLooker) {
+                    let addData2 = selectData.filter(t => this.node.lookUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
+                    this.node.lookUsers = this.node.lookUsers.concat(addData2);
+                }
+                else {
+                    let addData = selectData.filter(t => this.node.auditUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
+                    this.node.auditUsers = this.node.auditUsers.concat(addData);
+                }
+
+            },
+
+            handlePostClick(isLooker) {
+                this.selectPostVisible = true;
+                this.isLooker = isLooker;
+            },
+            handlePostSelectClosed() {
+                this.$refs.postSelectPanel.resetForm();
+            },
+            handlePostSelectOk() {
+                let selectData = this.$refs.postSelectPanel.getForm().map(t => { return { type: '1', id: t.f_PostId, name: t.name } });
+                this.addTableData(selectData);
+                this.selectPostVisible = false;
+            },
+
+            handleRoleClick(isLooker) {
+                this.selectRoleVisible = true;
+                this.isLooker = isLooker;
+            },
+            handleRoleSelectClosed() {
+                this.$refs.roleSelectPanel.resetForm();
+            },
+            handleRoleSelectOk() {
+                let selectData = this.$refs.roleSelectPanel.getForm().map(t => { return { type: '2', id: t.f_RoleId, name: t.f_FullName, condition: '' } });
+                this.addTableData(selectData);
+                this.selectRoleVisible = false;
+            },
+
+            handleUserClick(isLooker) {
+                this.selectUserVisible = true;
+                this.isLooker = isLooker;
+            },
+            handleUserSelectClosed() {
+                this.$refs.userSelectPanel.resetForm();
+            },
+            handleUserSelectOk() {
+                let selectData = this.$refs.userSelectPanel.getForm().map(t => { return { type: '3', id: t.f_UserId, name: t.name } });
+                this.addTableData(selectData);
+                this.selectUserVisible = false;
+            },
+
+
+            handleLevelClick(isLooker) {
+                this.levelVisible = true;
+                this.isLooker = isLooker;
+            },
+            handleLevelClosed() {
+                this.$refs.auditorLevelForm.resetForm();
+            },
+            handleLevelOk() {
+                this.$refs.auditorLevelForm.validateForm(() => {
+                    let data = this.$refs.auditorLevelForm.getForm();
+                    this.addTableData([data]);
+                    this.levelVisible = false;
+                });
+            },
+
+
+            handleNodeAuditorClick(isLooker) {
+                this.nodeAuditorVisible = true;
+                this.isLooker = isLooker;
+            },
+            handleNodeAuditorOk() {
+                this.$refs.nodeAuditorForm.validateForm(() => {
+                    let data = this.$refs.nodeAuditorForm.getForm();
+                    this.addTableData([data]);
+                    this.nodeAuditorVisible = false;
+                });
+            },
+            handleNodeAuditorClosed() {
+                this.$refs.nodeAuditorForm.resetForm();
+            },
+            handleNodeAuditorOpened() {
+                let wfdata = this.wfdesign.handleGetWFData();
+                this.$refs.nodeAuditorForm.setForm(wfdata.filter(t => t.type = 'userTask' && t.id != this.node.id));
+            },
+
+
+            handleAuditorSqlClick(isLooker) {
+                this.auditorSqlVisible = true;
+                this.isLooker = isLooker;
+            },
+            handleAuditorSqlOk() {
+                this.$refs.auditorSqlForm.validateForm(() => {
+                    let data = this.$refs.auditorSqlForm.getForm();
+                    data.name = `${data.table}【${data.auditorField}】`
+                    this.addTableData([data]);
+                    this.auditorSqlVisible = false;
+                });
+            },
+            handleAuditorSqlClosed() {
+                this.$refs.auditorSqlForm.resetForm();
+            },
+
+            hasBtnsDeleteBtn(row) {
+                if (row.isSys) {
+                    return false;
+                }
+                else {
+                    return true;
+                }
+            },
+            handleAddBtns() {
+                this.node.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
+            },
+            handleDeleteBtns(row) {
+                this.node.btnlist.splice(row.index, 1);
+            }
+
+        }
+
+    }
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/index.vue b/src/components/ProcessDesigner/package/penal/userTask/index.vue
new file mode 100644
index 0000000..e1b177c
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/userTask/index.vue
@@ -0,0 +1,275 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-05 17:09:44
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 16:14:52
+ * @Description: 
+-->
+<!-- 开始节点配置 -->
+<template>
+    <div class="user-task">
+        <a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
+            :wrapper-col="wrapperCol">
+            <a-collapse v-model:activeKey="activeKey" accordion ghost>
+                <a-collapse-panel key="1" header="基础配置">
+                    <a-form-item label="节点标识">
+                        <a-input v-model:value="node.id" placeholder="请输入" readonly />
+                    </a-form-item>
+                    <a-form-item label="继承表单">
+                        <a-switch v-model:checked="node.isInherit" />
+                    </a-form-item>
+                    <a-form-item label="允许加签">
+                        <a-switch v-model:checked="node.isAddSign" />
+                    </a-form-item>
+                    <a-form-item label="允许转移">
+                        <a-switch v-model:checked="node.isBatchAudit" />
+                    </a-form-item>
+                    <a-form-item label="允许批量审核">
+                        <a-switch v-model:checked="node.isBatchAudit" />
+                    </a-form-item>
+                    <a-form-item label="自动同意规则">
+                        <a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions">
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="无对应处理人">
+                        <a-select v-model:value="node.rejectType"
+                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]">
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="驳回策略">
+                        <a-radio-group v-model:value="node.rejectType" name="checkboxgroup"
+                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]" />
+                    </a-form-item>
+                    <a-form-item label="通知策略">
+                        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
+                            :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
+                    </a-form-item>
+                </a-collapse-panel>
+                <a-collapse-panel key="2" header="审核人员设置">
+                    <a-space>
+                        <a-radio-group size="small">
+                            <a-radio-button value="1" @click="handlePostClick">岗位</a-radio-button>
+                            <a-radio-button value="2" @click="handleRoleClick">角色</a-radio-button>
+                            <a-radio-button value="3" @click="handleAccountClick">用户</a-radio-button>
+                            <a-radio-button value="3" @click="handleLevelClick">上下级</a-radio-button>
+                            <a-radio-button value="3" @click="handleNodeAuditorClick">节点执行人</a-radio-button>
+                            <a-radio-button value="3" @click="handleAuditorSqlClick">表字段</a-radio-button>
+                        </a-radio-group>
+                    </a-space>
+                    <a-table size="small" :columns="columns" :data-source="dataSource" bordered :pagination="false">
+                        <template #bodyCell="{ column, text, record }">
+                            <template v-if="['name', 'type'].includes(column.dataIndex)">
+                                <div>
+                                    {{ text }}
+                                </div>
+                            </template>
+                            <template v-else-if="column.dataIndex === 'operation'">
+                                <a-popconfirm v-if="dataSource.length" title="Sure to delete?"
+                                    @confirm="onDelete(record.key)">
+                                    <a>Delete</a>
+                                </a-popconfirm>
+                            </template>
+                        </template>
+                    </a-table>
+                </a-collapse-panel>
+                <a-collapse-panel key="3" header="This is panel header 3">
+                    <p>{{ text }}</p>
+                </a-collapse-panel>
+                <a-collapse-panel key="4" header="This is panel header 3">
+                    <p>{{ text }}</p>
+                </a-collapse-panel>
+                <a-collapse-panel key="5" header="This is panel header 3">
+                    <p>{{ text }}</p>
+                </a-collapse-panel>
+                <a-collapse-panel key="6" header="This is panel header 3">
+                    <p>{{ text }}</p>
+                </a-collapse-panel>
+            </a-collapse>
+
+        </a-form>
+        <a-modal width="60%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
+            <SelectPos ref="posRef"></SelectPos>
+        </a-modal>
+        <a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
+            <SelectRole ref="roleRef"></SelectRole>
+        </a-modal>
+        <a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
+            <SelectAccount ref="accountRef"></SelectAccount>
+        </a-modal>
+        <a-modal width="60%" v-model:open="data.levelOpen" title="添加角色" @ok="accountHandleOk">
+            <AuditorLevel ref="levelRef"></AuditorLevel>
+        </a-modal>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { reactive, ref, onMounted, nextTick, unref } from 'vue';
+    import { BasicTree, TreeItem } from '@/components/Tree';
+    import SelectPos from '@/components/SelectPos/index.vue';
+    import SelectRole from '@/components/SelectRole/index.vue';
+    import SelectAccount from '@/components/SelectAccount/index.vue';
+    import AuditorLevel from './src/auditorLevel.vue'
+    import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
+    const labelCol = { span: 7 };
+    const wrapperCol = { span: 17 };
+    const data = reactive({
+        activeKey: '1',
+        atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
+        postOpen: false,
+        roleOpen: false,
+        accountOpen: false,
+        levelOpen:false,
+
+    })
+    const node = reactive({
+        id: "edb713be-7a25-44a2-8048-1f9abc638680",
+        type: "userTask",
+        isAddSign: false,
+        isTransfer: false,
+        isBatchAudit: false,
+        autoAgree: "",
+        noAuditor: "1",
+        rejectType: "1",
+        messageType: "",
+        auditUsers: [],
+        lookUsers: [],
+        formRelations: [],
+        formType: "1",
+        formCode: "",
+        formVerison: "",
+        formRelationId: "",
+        formUrl: "",
+        formAppUrl: "",
+        authFields: [],
+        name: "审核节点",
+        btnlist: [
+            {
+                code: "agree",
+                name: "同意",
+                hidden: false,
+                isNextAuditor: false,
+                isSign: false,
+                isSys: true
+            },
+            {
+                code: "disagree",
+                name: "驳回",
+                hidden: false,
+                isNextAuditor: false,
+                isSign: false,
+                isSys: true
+            }
+        ],
+        isCountersign: false,
+        isCountersignAll: false,
+        countersignAgian: "1",
+        countersignType: "1",
+        countersignAllType: 100,
+        isOvertimeMessage: false,
+        overtimeMessageType: "",
+        overtimeMessageStart: 1,
+        overtimeMessageInterval: 1,
+        overtimeGo: 12,
+        isInherit: true,
+        isInit: true
+    })
+
+    const columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+        },
+        {
+            title: '操作',
+            dataIndex: 'operation',
+        },
+
+    ];
+    const dataSource = [
+        {
+            id: 0,
+            name: "王五",
+            type: "管理员",
+        },
+        {
+            id: 1,
+            name: "王五",
+            type: "管理员",
+        },
+    ]
+  
+
+    // 岗位
+    const posRef = ref < any > ()
+
+    function handlePostClick() {
+        data.postOpen = true;
+    }
+    function postHandleOk() {
+        console.log(posRef.value.getRow())
+
+    }
+    // 角色
+    const roleRef = ref < any > ()
+
+    function handleRoleClick() {
+        data.roleOpen = true;
+    }
+    function roleHandleOk() {
+        console.log(roleRef.value.getRow())
+    }
+    // 用户
+    const accountRef = ref < any > ()
+
+    function handleAccountClick() {
+        data.accountOpen = true;
+    }
+    function accountHandleOk() {
+        console.log(accountRef.value.getRow())
+    }
+    // 上下级
+    const levelRef = ref < any > ()
+    function handleLevelClick() {
+        data.levelOpen = true;
+    }
+    function levelHandleOk() {
+        console.log(levelRef.value.getRow())
+    }
+
+
+</script>
+
+<style lang="less" scoped>
+    .site-space-compact-wrapper {
+        width: 100%;
+
+        .ant-select {
+            width: 100%;
+        }
+    }
+
+    ::v-deep .ant-tabs {
+        padding: 0 !important;
+    }
+
+    ::v-deep .ant-space {
+        width: 90%;
+        margin-left: 5%;
+
+        .ant-space-item {
+            width: 100%;
+
+            button {
+                width: 100%;
+            }
+        }
+    }
+
+    ::v-deep .ant-table-content {
+        margin-top: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue b/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue
new file mode 100644
index 0000000..ad43670
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="l-from-body">
+        <a-form ref="formRef" :rules="data.rules" :model="data.formData" labelAlign="left" :label-col="labelCol"
+            :wrapper-col="wrapperCol">
+            <a-form-item label="上下级" name="id">
+                <a-select v-model:value="data.formData.id" placeholder="请选择上下级" :options="data.options">
+                </a-select>
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+<script lang="ts" setup>
+    import {reactive} from 'vue'
+    const data = reactive({
+        formData: {
+            name: '',
+            type: '4',
+            id: '',
+        },
+        rules: {
+            id: [
+                { required: true, message: '请选择上下级' }
+            ]
+        },
+        options: [
+            { value: '1', label: '上一级' },
+            { value: '2', label: '上二级' },
+            { value: '3', label: '上三级' },
+            { value: '4', label: '上四级' },
+            { value: '5', label: '上五级' },
+            { value: '6', label: '下一级' },
+            { value: '7', label: '下二级' },
+            { value: '8', label: '下三级' },
+            { value: '9', label: '下四级' },
+            { value: '10', label: '下五级' }
+        ]
+    })
+    function getRow() {
+        let rows = data.value.formData
+        return rows
+    }
+    defineExpose({
+        getRow
+    })
+</script>
+<style scoped>
+    .l-from-body{
+        padding: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue b/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue
new file mode 100644
index 0000000..45a21fe
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="l-from-body" >
+        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="80px" >
+            <el-col :span="24">
+                <el-form-item label="节点" prop="id">
+                    <l-select v-model="formData.id" placeholder="请选择节点" valueKey="id" labelKey="name" :options="options" @change="handleChange" ></l-select>
+                </el-form-item>
+            </el-col>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name:'node-auditor-form',
+    data(){
+        return {
+            formData:{
+                name:'',
+                type:'5',
+                id:'',
+            },
+            rules: {
+                id: [
+                    { required: true, message: '请选择节点' }
+                ]
+            },
+            options: []
+        };
+    },
+    created () {
+    },
+    methods:{
+        resetForm(){
+            this.$refs.form && this.$refs.form.resetFields();
+        },
+        // 校验表单
+        validateForm(callback){
+            this.$refs.form.validate((valid) => {
+                if(valid){
+                    callback();
+                }
+            });
+        },
+        setForm(wfdata){
+            //console.log(wfdata,'节点选择')
+            this.options = wfdata.filter(t=>t.name);
+        },
+        getForm(){
+            return this.$deepClone(this.formData);
+        },
+        handleChange(val){
+            this.formData.name = this.options.find(t=>t.id == val).name;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue b/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue
new file mode 100644
index 0000000..65ff680
--- /dev/null
+++ b/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="l-from-body" >
+        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="120px" >
+            <el-col :span="24">
+                <el-form-item label="数据库" prop="dbCode">
+                    <el-select v-model="formData.dbCode" placeholder="请选择">
+                        <el-option-group
+                        v-for="group in lr_dblinkTree"
+                        :key="group.id"
+                        :label="group.label">
+                        <el-option
+                            v-for="item in group.children"
+                            :key="item.id"
+                            :label="item.label"
+                            :value="item.id">
+                        </el-option>
+                        </el-option-group>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="数据表" prop="table">
+                    <l-codetable-select
+                    @change="handleTableChange"
+                    :dbCode="formData.dbCode" 
+                    v-model="formData.table"></l-codetable-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="关联流程字段" prop="rfield">
+                    <l-select :options="columns" valueKey="name" labelKey="coment" v-model="formData.rfield" >
+                    </l-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="审核人字段" prop="auditorField">
+                    <l-select :options="columns"  valueKey="name" labelKey="coment" v-model="formData.auditorField" >
+                    </l-select>
+                </el-form-item>
+            </el-col>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name:'auditor-sql-form',
+    props:{
+    },
+    data(){
+        return {
+            formData:{
+                dbCode:'',
+                table:'',
+                rfield:'',
+                auditorField:'',
+                type:'6'
+            },
+            rules: {
+                dbCode: [
+                    { required: true, message: '请选择数据库' }
+                ],
+                table: [
+                    { required: true, message: '请选择数据表' }
+                ],
+                rfield: [
+                    { required: true, message: '请选择关联字段' }
+                ],
+                auditorField: [
+                    { required: true, message: '请选择审核人字段' }
+                ]
+            },
+            columns:[],
+        };
+    },
+    computed:{
+    },
+    created () {
+    },
+    methods:{
+        handleTableChange(table){
+            this.columns = table.columns
+        },
+        resetForm(){
+            this.columns = [];
+            this.$refs.form && this.$refs.form.resetFields()
+        },
+        // 校验表单
+        validateForm(callback){
+            this.$refs.form.validate((valid) => {
+                if(valid){
+                    callback()
+                }
+            });
+        },
+        setForm(data){
+            this.formData = this.$deepClone(data)
+        },
+        getForm(){
+            let formData = this.$deepClone(this.formData)
+            return formData
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/theme/flow-element-variables.scss b/src/components/ProcessDesigner/package/theme/flow-element-variables.scss
new file mode 100644
index 0000000..a54b6e0
--- /dev/null
+++ b/src/components/ProcessDesigner/package/theme/flow-element-variables.scss
@@ -0,0 +1,63 @@
+/* 改变主题色变量 */
+// $--color-primary: #1890ff;
+// $--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+
+.process-drawer .el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+div[class^="el-drawer"]:focus,
+span:focus {
+  outline: none;
+}
+
+.process-drawer .el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.process-design {
+  .el-table td,
+  .el-table th {
+    color: #333;
+  }
+
+  .el-dialog__header {
+    padding: 16px 16px 8px 16px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .el-dialog__body {
+    padding: 16px;
+    max-height: 80vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+  .el-dialog__footer {
+    padding: 16px;
+    box-sizing: border-box;
+    border-top: 1px solid #e8e8e8;
+  }
+  .el-dialog__close {
+    font-weight: 600;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-divider:not(.el-divider--horizontal) {
+    margin: 0 8px ;
+  }
+  .el-divider.el-divider--horizontal {
+    margin: 16px 0;
+  }
+}
diff --git a/src/components/ProcessDesigner/package/theme/index.scss b/src/components/ProcessDesigner/package/theme/index.scss
new file mode 100644
index 0000000..571f07b
--- /dev/null
+++ b/src/components/ProcessDesigner/package/theme/index.scss
@@ -0,0 +1,171 @@
+@import "./flow-element-variables.scss";
+@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
+// @import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
+// @import "bpmn-js-token-simulation/assets/css/normalize.css";
+@import "bpmn-js/dist/assets/diagram-js.css";
+@import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+@import "./process-designer.scss";
+@import "./process-panel.scss";
+
+$success-color: #4eb819;
+$primary-color: #409EFF;
+$warning-color: #E6A23C;
+$danger-color: #F56C6C;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  border: 1px solid #EFEFEF;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .fail-arrow {
+    fill: $warning-color;
+    stroke: $warning-color;
+  }
+
+  .fail-conditional {
+    fill: white;
+    stroke: $warning-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color!important;
+      marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .warning.djs-connection {
+    .djs-visual path {
+      stroke: $warning-color!important;
+      marker-end: url(#sequenceflow-end-white-fail)!important;
+    }
+  }
+
+  .warning.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-fail)!important;
+    }
+  }
+
+  .warning.djs-shape {
+    .djs-visual rect {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $warning-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
+  display: none;
+}
diff --git a/src/components/ProcessDesigner/package/theme/process-designer.scss b/src/components/ProcessDesigner/package/theme/process-designer.scss
new file mode 100644
index 0000000..bfd13ee
--- /dev/null
+++ b/src/components/ProcessDesigner/package/theme/process-designer.scss
@@ -0,0 +1,153 @@
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  padding: 5px 0 10px 10px;
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: "|";
+          position: absolute;
+          transform: rotate(90deg) translate(200%, 60%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(90deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(0deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
+      repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+//侧边栏配置
+.djs-palette.open {
+  .djs-palette-entries {
+    div[class^="bpmn-icon-"]:before,
+    div[class*="bpmn-icon-"]:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}
diff --git a/src/components/ProcessDesigner/package/theme/process-panel.scss b/src/components/ProcessDesigner/package/theme/process-panel.scss
new file mode 100644
index 0000000..5c7c3df
--- /dev/null
+++ b/src/components/ProcessDesigner/package/theme/process-panel.scss
@@ -0,0 +1,110 @@
+.process-design {
+  .process-panel__container {
+    box-sizing: border-box;
+    padding: 0 8px;
+    border-left: 1px solid #eeeeee;
+    box-shadow: 0 0 8px #cccccc;
+    max-height: 100%;
+    overflow-y: scroll;
+  }
+  .panel-tab__title {
+    font-weight: 600;
+    padding: 0 8px;
+    font-size: 1.1em;
+    line-height: 1.2em;
+    i {
+      margin-right: 8px;
+      font-size: 1.2em;
+    }
+  }
+  .panel-tab__content {
+    width: 100%;
+    box-sizing: border-box;
+    border-top: 1px solid #eeeeee;
+    padding: 8px 16px;
+    .panel-tab__content--title {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      span {
+        flex: 1;
+        text-align: left;
+      }
+    }
+  }
+  .element-property {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    margin: 8px 0;
+    .element-property__label {
+      display: block;
+      width: 90px;
+      text-align: right;
+      overflow: hidden;
+      padding-right: 12px;
+      line-height: 32px;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    .element-property__value {
+      flex: 1;
+      line-height: 32px;
+    }
+    .el-form-item {
+      width: 100%;
+      margin-bottom: 0;
+      padding-bottom: 18px;
+    }
+  }
+  .list-property {
+    flex-direction: column;
+    .element-listener-item {
+      width: 100%;
+      display: inline-grid;
+      grid-template-columns: 16px auto 32px 32px;
+      grid-column-gap: 8px;
+    }
+    .element-listener-item + .element-listener-item {
+      margin-top: 8px;
+    }
+  }
+  .listener-filed__title {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0;
+    span {
+      width: 200px;
+      text-align: left;
+      font-size: 14px;
+    }
+    i {
+      margin-right: 8px;
+    }
+  }
+  .element-drawer__button {
+    margin-top: 8px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+  }
+  .element-drawer__button > .el-button {
+    width: 100%;
+  }
+  
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  .el-input.is-disabled .el-input__inner {
+    color: #999999;
+  }
+  .el-form-item.el-form-item--mini {
+    margin-bottom: 0;
+    & + .el-form-item {
+      margin-top: 16px;
+    }
+  }
+}
+
diff --git a/src/components/ProcessDesigner/package/utils.ts b/src/components/ProcessDesigner/package/utils.ts
new file mode 100644
index 0000000..1f1926d
--- /dev/null
+++ b/src/components/ProcessDesigner/package/utils.ts
@@ -0,0 +1,69 @@
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  const listenerObj = Object.create(null);
+  listenerObj.event = options.event;
+  // isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case "scriptListener":
+      listenerObj.script = createScriptObject(options, prefix);
+      break;
+    case "expressionListener":
+      listenerObj.expression = options.expression;
+      break;
+    case "delegateExpressionListener":
+      listenerObj.delegateExpression = options.delegateExpression;
+      break;
+    default:
+      listenerObj.class = options.class;
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map(field => {
+      return createFieldObject(field, prefix);
+    });
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
+    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
+    const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
+      id: `TimerEventDefinition_${uuid(8)}`,
+      [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
+    });
+    listenerObj.eventDefinitions = [TimerEventDefinition];
+  }
+  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option;
+  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
+  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options;
+  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
+  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+    values: extensionList
+  });
+  window.bpmnInstances.modeling.updateProperties(element, {
+    extensionElements: extensions
+  });
+}
+
+// 创建一个id
+export function uuid(length = 8, chars) {
+  let result = "";
+  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)];
+  }
+  return result;
+}
diff --git a/src/components/SelectAccount/DeptTree.vue b/src/components/SelectAccount/DeptTree.vue
new file mode 100644
index 0000000..fb75ad8
--- /dev/null
+++ b/src/components/SelectAccount/DeptTree.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-07 10:43:34
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 10:49:15
+ * @Description: 
+-->
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree title="部门列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
+      :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
+      @select="handleSelect" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+
+  import { BasicTree, TreeItem } from '@/components/Tree';
+  import { getDeptList } from '@/api/demo/system';
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref < TreeItem[] > ([]);
+
+  async function fetch() {
+    treeData.value = (await getDeptList()) as unknown as TreeItem[];
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>
\ No newline at end of file
diff --git a/src/components/SelectAccount/account.data.ts b/src/components/SelectAccount/account.data.ts
new file mode 100644
index 0000000..bd2e325
--- /dev/null
+++ b/src/components/SelectAccount/account.data.ts
@@ -0,0 +1,55 @@
+/*
+ * @Author: 刘妍
+ * @Date: 2024-03-07 10:43:34
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 10:48:39
+ * @Description: 
+ */
+import { getAllRoleList, isAccountExist } from '@/api/demo/system';
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+/**
+ * transform mock data
+ * {
+ *  0: '华东分部',
+ * '0-0': '华东分部-研发部'
+ * '0-1': '华东分部-市场部',
+ *  ...
+ * }
+ */
+export const columns: BasicColumn[] = [
+  {
+    title: '用户名',
+    dataIndex: 'account',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'organizations',
+    // customRender: ({ value }) => {
+    //   return deptMap[value];
+    // },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'account',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'nickname',
+    label: '昵称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+
diff --git a/src/components/SelectAccount/index.vue b/src/components/SelectAccount/index.vue
new file mode 100644
index 0000000..19a8d34
--- /dev/null
+++ b/src/components/SelectAccount/index.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-07 10:43:34
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 10:56:46
+ * @Description: 
+-->
+<template>
+  <!-- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> -->
+    <div class="select-account">
+      <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+      <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo"> </BasicTable>
+    </div>
+  <!-- </PageWrapper> -->
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getAccountList, deleteAccount } from '@/api/demo/system';
+  import { PageWrapper } from '@/components/Page';
+  import DeptTree from './DeptTree.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+
+  import { columns, searchFormSchema } from './account.data';
+
+  defineOptions({ name: 'AccountManagement' });
+
+  const searchInfo = reactive < Recordable > ({});
+  const [registerTable, { reload, updateTableDataRecord, getSelectRows, clearSelectedRowKeys }] = useTable({
+    title: '账号列表',
+    api: getAccountList,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    rowSelection: {//多选框
+      type: 'checkbox',
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    tableSetting: { fullScreen: true },
+    isCanResizeParent: true,
+    handleSearchInfoFn(info) {
+      console.log('handleSearchInfoFn', info);
+      return info;
+    },
+  });
+  function getRow() {
+    let rows = getSelectRows();
+    return rows
+  }
+  defineExpose({
+    getRow
+  })
+</script>
+<style scoped>
+  .select-account{
+    display: flex;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/SelectPos/index.vue b/src/components/SelectPos/index.vue
new file mode 100644
index 0000000..5da5719
--- /dev/null
+++ b/src/components/SelectPos/index.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-07 10:00:26
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 15:37:30
+ * @Description: 
+-->
+<template>
+  <div>
+    <BasicTree ref="asyncExpandTreeRef" title="部门和职级列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      loadData :clickRowToExpand="false" :treeData="treeData"
+      :fieldNames="{ key: 'id', title: 'name' ,disabled:'disabled'}" :defaultExpandAll="true" :checkable="true"
+      :checkStrictly="true" @check="handleSelect" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, onMounted, nextTick, unref } from 'vue';
+
+  import { BasicTree, TreeItem } from '@/components/Tree';
+
+  import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
+
+  defineOptions({ name: 'RoleManagement' });
+  const treeData = ref < TreeItem[] > ([]);
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
+  const posData = ref([])
+  function treeIterator(tree) {
+    tree.forEach((node) => {
+      if (node.key == 0) {
+        node.name = "部门--" + node.name
+        node.disableCheckbox = true
+      } else {
+        node.name = "职级--" + node.name
+        // 需要拼接parentName
+        posData.value.push(node)
+      }
+      node.children && treeIterator(node.children)
+    })
+  }
+  async function fetch() {
+    const data = (await getOrgPositonTree()) as unknown as TreeItem[];
+    treeIterator(data)
+    treeData.value = await data
+    // 展开全部
+    nextTick(() => {
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
+  }
+  onMounted(() => {
+    fetch();
+  });
+  let orgList = ref([])
+  let posList = ref([])
+  function handleSelect(checkedKeys, e: { checked: bool, checkedNodes, node, event }) {
+    const list = e.checkedNodes
+    console.log(e.node)
+    console.log(checkedKeys)
+    orgList.value = []
+    posList.value = []
+    list.forEach(element => {
+      if (element.key > 0) {
+        posList.value.push({
+          orgId: Number(element.tag),
+          posId: element.id,
+        })
+      } else {
+        orgList.value.push({
+          orgId: element.id,
+          posId: 0,
+        })
+      }
+    });
+  }
+  function getRow() {
+    let rows = getSelectRows();
+    return rows
+  }
+  defineExpose({
+    getRow
+  })
+
+</script>
\ No newline at end of file
diff --git a/src/components/SelectRole/index.vue b/src/components/SelectRole/index.vue
new file mode 100644
index 0000000..45067d0
--- /dev/null
+++ b/src/components/SelectRole/index.vue
@@ -0,0 +1,79 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-07 10:00:26
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-07 10:50:39
+ * @Description: 
+-->
+<template>
+  <div>
+    <BasicTable @register="registerTable" :searchInfo="searchInfo"> </BasicTable>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive,  } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getRoleListByPage, deleteRole } from '@/api/demo/system';
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const searchInfo = reactive < Recordable > ({});
+
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+    // 表格名称
+    title: '角色列表',
+    // 获取数据的接口
+    api: getRoleListByPage,
+    // 表单列信息 BasicColumn[]
+    columns: [
+      {
+        title: '角色名称',
+        dataIndex: 'name',
+        width: 200,
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        width: 180,
+      },
+    ],
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: [{
+        field: 'key',
+        label: '关键字',
+        component: 'Input',
+        colProps: { span: 8 },
+      }],
+    },
+    // 使用搜索表单
+    useSearchForm: true,
+    // 显示表格设置工具
+    showTableSetting: false,
+    // 是否显示表格边框
+    bordered: true,
+    // 序号列
+    showIndexColumn: false,
+    // 勾选列
+    rowSelection: {//多选框
+      type: 'checkbox',
+    },
+    tableSetting: { fullScreen: true },
+    isCanResizeParent: true,
+    // 搜索
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  function getRow() {
+    let rows = getSelectRows();
+    return rows
+  }
+  defineExpose({
+    getRow
+  })
+
+</script>
\ No newline at end of file
diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts
index aca2d36..b3a0224 100644
--- a/src/enums/httpEnum.ts
+++ b/src/enums/httpEnum.ts
@@ -3,7 +3,6 @@
  * @Date: 2024-01-13 13:04:15
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-19 14:50:22
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\enums\httpEnum.ts
  * @Description: 
  */
 /**
diff --git a/src/locales/lang/zh-CN/routes/demo.json b/src/locales/lang/zh-CN/routes/demo.json
index 73129dd..e6ef77e 100644
--- a/src/locales/lang/zh-CN/routes/demo.json
+++ b/src/locales/lang/zh-CN/routes/demo.json
@@ -176,5 +176,8 @@
     "authColumn": "权限列",
     "resizeParentHeightTable": "继承父元素高度",
     "vxeTable": "VxeTable"
+  },
+  "workflow":{
+    "scheme_preview":"流程模板设计"
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 1c8a8ee..d591198 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,8 +2,7 @@
  * @Author: 刘妍
  * @Date: 2024-01-13 13:04:15
  * @LastEditors: Do not edit
- * @LastEditTime: 2024-01-25 13:24:08
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\main.ts
+ * @LastEditTime: 2024-03-06 10:56:44
  * @Description: 
  */
 import 'uno.css';
@@ -24,17 +23,24 @@ import { router, setupRouter } from '@/router';
 import { setupRouterGuard } from '@/router/guard';
 import { setupStore } from '@/store';
 
+
 import App from './App.vue';
 
 import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
 import "mars3d/dist/mars3d.css"
 
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+
+import Antd from "ant-design-vue"
 async function bootstrap() {
   const app = createApp(App);
+  app.use(Antd)
 
   // Configure store
   // 配置 store
   setupStore(app);
+  
   // Initialize internal system configuration
   // 初始化内部系统配置
   initAppConfigStore();
diff --git a/src/mars/components/mars-work/main-view.vue b/src/mars/components/mars-work/main-view.vue
index cdbb821..f2abbab 100644
--- a/src/mars/components/mars-work/main-view.vue
+++ b/src/mars/components/mars-work/main-view.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-17 15:24:04
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-18 08:41:32
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\mars\components\mars-work\main-view.vue
  * @Description:
 -->
 <!--
diff --git a/src/mars/views/index.vue b/src/mars/views/index.vue
index f57572a..d34e9ca 100644
--- a/src/mars/views/index.vue
+++ b/src/mars/views/index.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-17 15:24:04
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-18 08:40:39
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\mars\views\index.vue
  * @Description: 
 -->
 <template>
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index 6987fed..6fcbb5a 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -3,7 +3,6 @@
  * @Date: 2024-01-13 13:04:15
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-25 09:30:23
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\router\routes\index.ts
  * @Description: 
  */
 import type { AppRouteRecordRaw, AppRouteModule } from '@/router/types';
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
index d9c8ee1..7d678ed 100644
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
@@ -1,3 +1,10 @@
+/*
+ * @Author: 刘妍
+ * @Date: 2024-01-13 13:04:15
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-01 14:24:28
+ * @Description: 
+ */
 import type { AppRouteModule } from '@/router/types';
 
 import { LAYOUT } from '@/router/constant';
@@ -23,6 +30,18 @@ const dashboard: AppRouteModule = {
         title: t('routes.dashboard.analysis'),
       },
     },
+    {
+      path: 'scheme_preview/:id',
+      name: 'AccountDetail',
+      meta: {
+        hideMenu: true,
+        title: t('routes.demo.workflow.scheme_preview'),
+        ignoreKeepAlive: true,
+        showMenu: false,
+        currentActiveMenu: '/workflow/scheme',
+      },
+      component: () => import('@/views/demo/workflow/scheme/preview.vue'),
+    },
   ],
 };
 
diff --git a/src/utils/http/axios/helper.ts b/src/utils/http/axios/helper.ts
index f2e05f1..2d5033a 100644
--- a/src/utils/http/axios/helper.ts
+++ b/src/utils/http/axios/helper.ts
@@ -3,7 +3,6 @@
  * @Date: 2024-01-13 13:04:15
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-22 08:55:09
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\utils\http\axios\helper.ts
  * @Description: 
  */
 import { isObject, isString } from '@/utils/is';
diff --git a/src/views/demo/charts/mars3d/index.vue b/src/views/demo/charts/mars3d/index.vue
index 5a5bfb7..0a6233d 100644
--- a/src/views/demo/charts/mars3d/index.vue
+++ b/src/views/demo/charts/mars3d/index.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-16 13:48:53
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-17 16:53:26
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\views\demo\charts\mars3d\index.vue
  * @Description: 
 -->
 <template>
diff --git a/src/views/demo/system/account/AssignRoleModal.vue b/src/views/demo/system/account/AssignRoleModal.vue
index 8db9d77..84440f1 100644
--- a/src/views/demo/system/account/AssignRoleModal.vue
+++ b/src/views/demo/system/account/AssignRoleModal.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-27 10:58:29
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-27 14:15:31
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\views\demo\system\account\AssignRoleModal.vue
  * @Description: 
 -->
 <template>
diff --git a/src/views/demo/system/account/OrgPositonModal.vue b/src/views/demo/system/account/OrgPositonModal.vue
index c77a4d1..4b96e42 100644
--- a/src/views/demo/system/account/OrgPositonModal.vue
+++ b/src/views/demo/system/account/OrgPositonModal.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-29 08:58:01
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-30 08:44:07
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\views\demo\system\account\OrgPositonModal.vue
  * @Description: 
 -->
 <template>
diff --git a/src/views/demo/system/coverage/MenuDrawer.vue b/src/views/demo/system/coverage/MenuDrawer.vue
new file mode 100644
index 0000000..2ac72f0
--- /dev/null
+++ b/src/views/demo/system/coverage/MenuDrawer.vue
@@ -0,0 +1,84 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="50%" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './menu.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+
+  import { getMenuList, addMenu, editMenu, addButton, editButton } from '@/api/demo/system';
+
+  defineOptions({ name: 'MenuDrawer' });
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 12, md: 24 },
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    const treeData = await getMenuList();
+    updateSchema({
+      field: 'parentId',
+      componentProps: { treeData },
+    });
+    updateSchema({
+      field: 'moduleId',
+      componentProps: { treeData },
+    });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      // TODO custom api
+      console.log(values)
+      if (values.type == '1') {
+        console.log("新增菜单")
+        delete values.type
+        // 新增菜单
+        if (!unref(isUpdate)) {
+          const data = await addMenu(values);
+        } else {
+          const data = await editMenu(values);
+        }
+        closeDrawer();
+        emit('success');
+      } else {
+        console.log("新增按钮")
+        // 新增按钮
+        delete values.type
+        if (!unref(isUpdate)) {
+          const data = await addButton(values);
+        } else {
+          const data = await editButton(values);
+        }
+        closeDrawer();
+        emit('success');
+      }
+
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/demo/system/coverage/MenuTree.vue b/src/views/demo/system/coverage/MenuTree.vue
new file mode 100644
index 0000000..8538e7b
--- /dev/null
+++ b/src/views/demo/system/coverage/MenuTree.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree ref="asyncExpandTreeRef" title="菜单列表" toolbar search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
+      :renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
+      :defaultExpandAll="true" @select="handleSelect" />
+    <BasicModal @register="register" title="删除" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
+      确认要删除菜单吗？
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, h, nextTick, unref } from 'vue';
+  import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
+  import { getMenuList, deleteMenu } from '@/api/demo/system';
+  import { FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { BasicModal, useModal } from '@/components/Modal';
+  import { router } from '@/router';
+  const [register, { closeModal, openModal }] = useModal();
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select', 'edit']);
+
+  const treeData = ref < TreeItem[] > ([]);
+  let selectItemId = ref('')
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
+
+  async function handleSubmit() {
+    var query = [selectItemId.value]
+    const data = await deleteMenu(query);
+    closeModal();
+
+  }
+
+  async function fetch() {
+    treeData.value = (await getMenuList()) as unknown as TreeItem[];
+    // 展开全部
+    nextTick(() => {
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+  const btnList = router.currentRoute.value.meta.elements
+  const actionList: TreeActionItem[] = []
+  btnList.forEach(element => {
+    if (element.domId == 'btnEdit') {
+      actionList.push({
+        render: (node) => {
+          return h(FormOutlined, {
+            class: 'ml-2',
+            onClick: () => {
+              emit('edit', node);
+            },
+          });
+        },
+      })
+    } else if (element.domId == 'btnDelete') {
+      actionList.push({
+        render: (node) => {
+          return h(DeleteOutlined, {
+            class: 'ml-2',
+            onClick: () => {
+              selectItemId.value = node.id
+              openModal(true, {
+                isUpdate: false,
+              });
+            },
+          });
+        },
+      })
+    }
+  });
+
+  function createIcon({ level }) {
+    if (level === 1) {
+      return 'ion:git-compare-outline';
+    }
+    if (level === 2) {
+      return 'ion:home';
+    }
+    if (level === 3) {
+      return 'ion:airplane';
+    }
+    return '';
+  }
+  onMounted(() => {
+    fetch();
+  });
+  defineExpose({
+    fetch
+  })
+</script>
\ No newline at end of file
diff --git a/src/views/demo/system/coverage/index.vue b/src/views/demo/system/coverage/index.vue
new file mode 100644
index 0000000..0e7996d
--- /dev/null
+++ b/src/views/demo/system/coverage/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <MenuTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="editMenu" />
+    <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" @fetch-success="onFetchSuccess"
+      :searchInfo="searchInfo">
+      <template #toolbar>
+        <!-- <a-button type="primary" @click="handleCreate"> 新增 </a-button> -->
+        <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
+      </template>
+    </BasicTable>
+    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
+  </PageWrapper>
+
+</template>
+<script lang="ts" setup>
+  import { reactive, nextTick, ref } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getMenuList, getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
+  import { PageWrapper } from '@/components/Page';
+  import MenuTree from './MenuTree.vue';
+
+  import { useDrawer } from '@/components/Drawer';
+  import MenuDrawer from './MenuDrawer.vue';
+
+  import { columns, searchFormSchema } from './menu.data';
+  import PermissionBtn from '@/components/PermissionBtn/index.vue'
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createConfirm,createMessage } = useMessage();
+  defineOptions({ name: 'MenuManagement' });
+  const searchInfo = reactive < Recordable > ({});
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, expandAll, getSelectRows,clearSelectedRowKeys }] = useTable({
+    title: '按钮列表',
+    api: getButtonList,
+    columns,
+    rowKey:'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    isTreeTable: true,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    rowSelection: {//多选框
+      // type: 'checkbox',
+      type: 'radio',
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  const childRef = ref < any > ()
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit() {
+    let rows = getSelectRows();
+    if(rows.length == 0){
+      return createMessage.warn('请选择一个按钮进行编辑');
+    }
+    const record = rows[0]
+    record.type = '2'
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  async function editMenu(node: Recordable) {
+    var query = {
+      id: node.id
+    }
+    const record = await getMenuDetail(query);
+    record.type = '1'
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  function handleSelect(ModuleId = '') {
+    searchInfo.ModuleId = ModuleId;
+    clearSelectedRowKeys()
+    reload();
+  }
+  async function handleDelete(record: Recordable) {
+    let rows = getSelectRows();
+    if(rows.length == 0){
+      return createMessage.warn('请选择一个按钮进行删除');
+    }
+    const query = [rows[0].id]
+    createConfirm({
+      iconType: 'info',
+      title: '删除',
+      content: '确定要删除当前按钮吗',
+      onOk: async () => {
+        const data = await deleteButton(query);
+        reload();
+      },
+    });
+  }
+
+  function handleSuccess() {
+    childRef.value.fetch();
+    clearSelectedRowKeys()
+    reload();
+  }
+
+  function onFetchSuccess() {
+    // 演示默认展开所有表项
+    nextTick(expandAll);
+  }
+  function onBtnClicked(domId) {
+    console.log(domId)
+    switch (domId) {
+      case 'btnAdd':
+        handleCreate()
+        break;
+      case 'btnEdit':
+        handleEdit()
+        break;
+      case 'btnDelete':
+        handleDelete()
+        break;
+      default:
+        break;
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/demo/system/coverage/menu.data.ts b/src/views/demo/system/coverage/menu.data.ts
new file mode 100644
index 0000000..0e7026d
--- /dev/null
+++ b/src/views/demo/system/coverage/menu.data.ts
@@ -0,0 +1,198 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '按钮名称',
+    dataIndex: 'name',
+  },
+  {
+    title: 'DOMID',
+    dataIndex: 'domId',
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+  },
+
+];
+
+const isDir = (type: string) => type === '0';
+const isMenu = (type: string) => type === '1';
+const isButton = (type: string) => type === '2';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'type',
+    label: '类型',
+    component: 'RadioButtonGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        // { label: '目录', value: '0' },
+        { label: '菜单', value: '1' },
+        { label: '按钮', value: '2' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'id',
+    label: '名称',
+    component: 'Input',
+    ifShow:false
+  },
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    required: true,
+  },
+
+  {
+    field: 'parentId',
+    label: '上级',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ values }) => !isButton(values.type),
+  },
+  {
+    field: 'moduleId',
+    label: '菜单',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ values }) => isButton(values.type),
+    required: true,
+  },
+  {
+    field: 'domId',
+    label: 'DMOID',
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => isButton(values.type),
+  },
+  {
+    field: 'sortNo',
+    label: '排序',
+    component: 'InputNumber',
+    ifShow: ({ values }) => !isButton(values.type),
+  },
+  {
+    field: 'sort',
+    label: '排序',
+    component: 'InputNumber',
+    ifShow: ({ values }) => isButton(values.type),
+  },
+  {
+    field: 'class',
+    helpMessage: ['参考参数值', 'success、warning、error'],
+    label: '样式',
+    component: 'Input',
+    ifShow: ({ values }) => isButton(values.type),
+  },
+  {
+    field: 'iconName',
+    label: '图标',
+    component: 'IconPicker',
+    ifShow: ({ values }) => !isButton(values.type),
+  },
+
+  {
+    field: 'url',
+    label: '路由地址',
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => !isButton(values.type),
+  },
+  // {
+  //   field: 'component',
+  //   label: '组件路径',
+  //   component: 'Input',
+  //   ifShow: ({ values }) => isMenu(values.type),
+  // },
+  {
+    field: 'code',
+    label: '权限标识',
+    component: 'Input',
+    ifShow: ({ values }) => !isButton(values.type),
+  },
+  {
+    field: 'status',
+    label: '是否系统',
+    component: 'RadioButtonGroup',
+    defaultValue: 1,
+    componentProps: {
+      options: [
+        { label: '是', value: 0 },
+        { label: '否', value: 1 },
+      ],
+    },
+    ifShow: ({ values }) => !isButton(values.type),
+  },
+  // {
+  //   field: 'isExt',
+  //   label: '是否外链',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: '0' },
+  //       { label: '是', value: '1' },
+  //     ],
+  //   },
+  //   ifShow: ({ values }) => !isButton(values.type),
+  // },
+
+  // {
+  //   field: 'keepalive',
+  //   label: '是否缓存',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: '0' },
+  //       { label: '是', value: '1' },
+  //     ],
+  //   },
+  //   ifShow: ({ values }) => isMenu(values.type),
+  // },
+
+  // {
+  //   field: 'show',
+  //   label: '是否显示',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '是', value: '0' },
+  //       { label: '否', value: '1' },
+  //     ],
+  //   },
+  //   ifShow: ({ values }) => !isButton(values.type),
+  // },
+];
diff --git a/src/views/demo/system/role/AccountModal.vue b/src/views/demo/system/role/AccountModal.vue
index ce1aa2d..356cbdf 100644
--- a/src/views/demo/system/role/AccountModal.vue
+++ b/src/views/demo/system/role/AccountModal.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-02-01 09:07:48
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-02-01 16:55:15
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\views\demo\system\role\AccountModal.vue
  * @Description: 
 -->
 <template>
diff --git a/src/views/demo/system/role/ModulesModal.vue b/src/views/demo/system/role/ModulesModal.vue
index dfff9d2..b75d530 100644
--- a/src/views/demo/system/role/ModulesModal.vue
+++ b/src/views/demo/system/role/ModulesModal.vue
@@ -3,7 +3,6 @@
  * @Date: 2024-01-29 08:58:01
  * @LastEditors: Do not edit
  * @LastEditTime: 2024-01-30 13:39:08
- * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\views\demo\system\role\ModulesModal.vue
  * @Description: 
 -->
 <template>
diff --git a/src/views/demo/workflow/create/index.vue b/src/views/demo/workflow/create/index.vue
new file mode 100644
index 0000000..6f30aff
--- /dev/null
+++ b/src/views/demo/workflow/create/index.vue
@@ -0,0 +1,10 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-02-26 13:22:28
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-02-26 13:23:09
+ * @Description: 
+-->
+<template>
+  流程发起
+</template>
\ No newline at end of file
diff --git a/src/views/demo/workflow/scheme/SchemeDrawer.vue b/src/views/demo/workflow/scheme/SchemeDrawer.vue
new file mode 100644
index 0000000..1b02821
--- /dev/null
+++ b/src/views/demo/workflow/scheme/SchemeDrawer.vue
@@ -0,0 +1,91 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-02-27 09:06:43
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-02-27 10:49:01
+ * @Description: 
+-->
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="500px" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './scheme.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+
+  import { getMenuList, addMenu, editMenu, addButton, editButton } from '@/api/demo/system';
+
+  defineOptions({ name: 'SchemeDrawer' });
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    const treeData = await getMenuList();
+    updateSchema({
+      field: 'parentId',
+      componentProps: { treeData },
+    });
+    updateSchema({
+      field: 'moduleId',
+      componentProps: { treeData },
+    });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      // TODO custom api
+      console.log(values)
+      if (values.type == '1') {
+        console.log("新增菜单")
+        delete values.type
+        // 新增菜单
+        if (!unref(isUpdate)) {
+          const data = await addMenu(values);
+        } else {
+          const data = await editMenu(values);
+        }
+        closeDrawer();
+        emit('success');
+      } else {
+        console.log("新增按钮")
+        // 新增按钮
+        delete values.type
+        if (!unref(isUpdate)) {
+          const data = await addButton(values);
+        } else {
+          const data = await editButton(values);
+        }
+        closeDrawer();
+        emit('success');
+      }
+
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/demo/workflow/scheme/SchemeTree.vue b/src/views/demo/workflow/scheme/SchemeTree.vue
new file mode 100644
index 0000000..f9026f4
--- /dev/null
+++ b/src/views/demo/workflow/scheme/SchemeTree.vue
@@ -0,0 +1,116 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-02-27 09:06:43
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-05 16:00:45
+ * @Description: 
+-->
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree ref="asyncExpandTreeRef" title="流程分类" toolbar search
+    treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
+    :renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
+    :defaultExpandAll="true" @select="handleSelect" />
+    <BasicModal @register="register" title="删除" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
+      确认要删除流程分类吗？
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, h, nextTick, unref } from 'vue';
+  import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
+  import { getMenuList, deleteMenu } from '@/api/demo/system';
+  import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { Card, Row, Col, Spin } from 'ant-design-vue';
+  import { BasicModal, useModal } from '@/components/Modal';
+  import { router } from '@/router';
+  const [register, { closeModal, openModal }] = useModal();
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select', 'edit']);
+
+  const treeData = ref < TreeItem[] > ([]);
+  let selectItemId = ref('')
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
+  const treeLoading = ref(false);
+  async function handleSubmit() {
+    var query = [selectItemId.value]
+    const data = await deleteMenu(query);
+    closeModal();
+
+  }
+
+  async function fetch() {
+    treeLoading.value = true;
+    treeData.value = (await getMenuList()) as unknown as TreeItem[];
+    // 展开全部
+    nextTick(() => {
+      treeLoading.value = false;
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+  const btnList = router.currentRoute.value.meta.elements
+  const actionList: TreeActionItem[] = []
+  btnList.forEach(element => {
+    if(element.domId=='btnAdd'){
+      actionList.push({
+        render: (node) => {
+          return h(PlusOutlined, {
+            class: 'ml-2',
+            onClick: () => {
+              emit('add', node);
+            },
+          });
+        },
+      })
+    }else if (element.domId == 'btnEdit') {
+      actionList.push({
+        render: (node) => {
+          return h(FormOutlined, {
+            class: 'ml-2',
+            onClick: () => {
+              emit('edit', node);
+            },
+          });
+        },
+      })
+    } else if (element.domId == 'btnDelete') {
+      actionList.push({
+        render: (node) => {
+          return h(DeleteOutlined, {
+            class: 'ml-2',
+            onClick: () => {
+              selectItemId.value = node.id
+              openModal(true, {
+                isUpdate: false,
+              });
+            },
+          });
+        },
+      })
+    }
+  });
+
+  function createIcon({ level }) {
+    if (level === 1) {
+      return 'ion:git-compare-outline';
+    }
+    if (level === 2) {
+      return 'ion:home';
+    }
+    if (level === 3) {
+      return 'ion:airplane';
+    }
+    return '';
+  }
+  onMounted(() => {
+    fetch();
+  });
+  defineExpose({
+    fetch
+  })
+</script>
\ No newline at end of file
diff --git a/src/views/demo/workflow/scheme/index.vue b/src/views/demo/workflow/scheme/index.vue
new file mode 100644
index 0000000..0833b3c
--- /dev/null
+++ b/src/views/demo/workflow/scheme/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="editMenu" @add='handleCreate'/>
+    <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" @fetch-success="onFetchSuccess"
+      :searchInfo="searchInfo">
+      <template #toolbar>
+        <!-- <a-button type="primary" @click="handleCreate"> 新增 </a-button> -->
+        <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:info-standard-line',
+                tooltip: '查看历史记录',
+                onClick: handleView.bind(null, record),
+              }
+            ]"
+          />
+        </template>
+      </template>
+    
+    </BasicTable>
+    <SchemeDrawer @register="registerDrawer" @success="handleSuccess" />
+  </PageWrapper>
+
+</template>
+<script lang="ts" setup>
+  import { reactive, nextTick, ref } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getMenuList, getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
+  import { PageWrapper } from '@/components/Page';
+  import SchemeTree from './SchemeTree.vue';
+
+  import { useDrawer } from '@/components/Drawer';
+  import SchemeDrawer from './SchemeDrawer.vue';
+
+  import { columns, searchFormSchema } from './scheme.data';
+  import PermissionBtn from '@/components/PermissionBtn/index.vue'
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createConfirm,createMessage } = useMessage();
+
+  import { useGo } from '@/hooks/web/usePage';
+  const go = useGo();
+
+  defineOptions({ name: 'SchemeManagement' });
+  const searchInfo = reactive < Recordable > ({});
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, expandAll, getSelectRows,clearSelectedRowKeys }] = useTable({
+    title: '模板列表',
+    api: getButtonList,
+    columns,
+    rowKey:'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    isTreeTable: true,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    rowSelection: {//多选框
+      // type: 'checkbox',
+      type: 'radio',
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  const childRef = ref < any > ()
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+  function handleView(record: Recordable) {
+    go('/dashboard/scheme_preview/' + record.id);
+  }
+  function handleEdit() {
+    let rows = getSelectRows();
+    if(rows.length == 0){
+      return createMessage.warn('请选择一个按钮进行编辑');
+    }
+    const record = rows[0]
+    record.type = '2'
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  async function editMenu(node: Recordable) {
+    var query = {
+      id: node.id
+    }
+    const record = await getMenuDetail(query);
+    record.type = '1'
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  function handleSelect(ModuleId = '') {
+    searchInfo.ModuleId = ModuleId;
+    clearSelectedRowKeys()
+    reload();
+  }
+  async function handleDelete(record: Recordable) {
+    let rows = getSelectRows();
+    if(rows.length == 0){
+      return createMessage.warn('请选择一个按钮进行删除');
+    }
+    const query = [rows[0].id]
+    createConfirm({
+      iconType: 'info',
+      title: '删除',
+      content: '确定要删除当前按钮吗',
+      onOk: async () => {
+        const data = await deleteButton(query);
+        reload();
+      },
+    });
+  }
+
+  function handleSuccess() {
+    childRef.value.fetch();
+    clearSelectedRowKeys()
+    reload();
+  }
+
+  function onFetchSuccess() {
+    // 演示默认展开所有表项
+    nextTick(expandAll);
+  }
+  function onBtnClicked(domId) {
+    console.log(domId)
+    switch (domId) {
+      case 'btnAdd':
+      go('/dashboard/scheme_preview/add');
+        break;
+      case 'btnEdit':
+        handleEdit()
+        break;
+      case 'btnDelete':
+        handleDelete()
+        break;
+      default:
+        break;
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/demo/workflow/scheme/preview.vue b/src/views/demo/workflow/scheme/preview.vue
new file mode 100644
index 0000000..8ed13b4
--- /dev/null
+++ b/src/views/demo/workflow/scheme/preview.vue
@@ -0,0 +1,104 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-03-01 14:18:39
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-05 10:18:49
+ * @Description: 
+-->
+<template>
+  <!-- <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" /> -->
+  <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
+    v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form"
+    @save="onSaveDesigner" />
+
+</template>
+
+<script>
+  import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
+  // import ProcessViewer from '@/components/ProcessViewer/index.vue'
+
+  export default {
+    name: "Model",
+    components: {
+      ProcessDesigner,
+      // ProcessViewer,
+    },
+    data() {
+      return {
+       
+        designerOpen: false,
+        designerData: {
+          loading: false,
+          bpmnXml: '',
+          modelId: null,
+          form: {
+            processName: null,
+            processKey: null
+          }
+        },
+        designerModelId: null,
+        processView: {
+          title: '',
+          open: false,
+          index: undefined,
+          xmlData: "",
+        },
+        
+        
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      /** 查看流程图 */
+      handleProcessView(row) {
+        let modelId = row.modelId;
+        this.processView.title = "流程图";
+        this.processView.index = modelId;
+        // 发送请求，获取xml
+        getBpmnXml(modelId).then(response => {
+          this.processView.xmlData = response.data;
+        })
+        this.processView.open = true;
+      },
+      /** 设计按钮操作 */
+      handleDesigner(row) {
+        this.designerData.bpmnXml =  '';
+        this.designerData.title = "流程设计 - " + row.modelName;
+        // this.designerData.modelId = row.modelId;
+        // this.designerData.form = {
+        //   processName: row.modelName,
+        //   processKey: row.modelKey
+        // }
+        // if (row.modelId) {
+        //   this.designerData.loading = true;
+        //   getBpmnXml(row.modelId).then(response => {
+        //     this.designerData.bpmnXml = response.data || '';
+        //     this.designerData.loading = false;
+        //     this.designerOpen = true;
+        //   })
+        // }
+      },
+      onSaveDesigner(bpmnXml) {
+        console.log(bpmnXml)
+        // this.bpmnXml = bpmnXml;
+        // let dataBody = {
+        //   modelId: this.designerData.modelId,
+        //   bpmnXml: this.bpmnXml
+        // }
+        // this.$confirm("是否将此模型保存为新版本？", "提示", {
+        //   distinguishCancelAndClose: true,
+        //   confirmButtonText: '是',
+        //   cancelButtonText: '否'
+        // }).then(() => {
+        //   this.confirmSave(dataBody, true)
+        // }).catch(action => {
+        //   if (action === 'cancel') {
+        //     this.confirmSave(dataBody, false)
+        //   }
+        // })
+      },
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/src/views/demo/workflow/scheme/scheme.data.ts b/src/views/demo/workflow/scheme/scheme.data.ts
new file mode 100644
index 0000000..09c567a
--- /dev/null
+++ b/src/views/demo/workflow/scheme/scheme.data.ts
@@ -0,0 +1,80 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '编号',
+    dataIndex: 'domId',
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '分类',
+    dataIndex: 'name',
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+  },
+
+];
+
+const isDir = (type: string) => type === '0';
+const isMenu = (type: string) => type === '1';
+const isButton = (type: string) => type === '2';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '名称',
+    component: 'Input',
+    ifShow:false
+  },
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'value',
+    label: '值',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'sortNo',
+    label: '排序',
+    component: 'InputNumber',
+  },
+  {
+    field: 'status',
+    label: '是否有效',
+    component: 'RadioButtonGroup',
+    defaultValue: 1,
+    componentProps: {
+      options: [
+        { label: '是', value: 0 },
+        { label: '否', value: 1 },
+      ],
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+  },
+];
diff --git a/src/views/demo/workflow/task/index.vue b/src/views/demo/workflow/task/index.vue
new file mode 100644
index 0000000..1f2f889
--- /dev/null
+++ b/src/views/demo/workflow/task/index.vue
@@ -0,0 +1,10 @@
+<!--
+ * @Author: 刘妍
+ * @Date: 2024-02-26 13:22:28
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-05 15:59:12
+ * @Description: 
+-->
+<template>
+  流程任务
+</template>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 0dfbab5..2a0e9e4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,11 @@
  * @Author: 刘妍
  * @Date: 2024-01-13 13:04:15
  * @LastEditors: Do not edit
+<<<<<<< HEAD
  * @LastEditTime: 2024-03-08 09:17:00
+=======
+ * @LastEditTime: 2024-03-05 15:57:29
+>>>>>>> ly
  * @Description:
  */
 import { defineApplicationConfig } from '@vben/vite-config';