add:引入bpmn

wms_pro/qd/src/views/components/VueBpmn/PropertyPanel.vue

@@ -7,6 +7,9 @@
       <el-form-item label="节点名称">
         <el-input v-model="form.name" @input="nameChange"></el-input>
       </el-form-item>
+      <el-form-item label="表单类型">
+        <el-input v-model="form.type22" @input="nameChange"></el-input>
+      </el-form-item>
       <el-form-item label="节点颜色">
         <el-color-picker v-model="form.color" @active-change="colorChange"></el-color-picker>
       </el-form-item>
@@ -21,7 +24,7 @@
       <!-- 指定人员 -->
       <el-form-item label="指定人员" v-if="userTask && form.userType === 'assignee'">
         <el-select
-          v-model="form.assignee"
+          v-model="form.form_type"
           placeholder="请选择"
           key="1"
           @change="(value) => addUser({assignee: value})"
@@ -83,7 +86,7 @@
 
 <script>
 export default {
-  name: "PropertyPanel",
+  name: 'PropertyPanel',
   props: {
     modeler: {
       type: Object,
@@ -93,7 +96,7 @@ export default {
   computed: {
     userTask() {
       if (!this.element) {
-        return;
+        return
       }
       return this.element.type === 'bpmn:UserTask'
     },
@@ -109,7 +112,8 @@ export default {
       form: {
         id: "",
         name: "",
-        color: null
+        color: null,
+        form_type: null
       },
       element: {},
       users: [
@@ -151,7 +155,6 @@ export default {
       this.modeler.on("selection.changed", e => {
         const element = e.newSelection[0];
         this.element = element;
-        console.log(this.element);
         if (!element) return;
         this.form = {
           ...element.businessObject,
@@ -182,11 +185,16 @@ export default {
     // 属性面板颜色，更新回流程节点
     colorChange(color) {
       const modeling = this.modeler.get("modeling");
+
+
+
       modeling.setColor(this.element, {
         fill: null,
         stroke: color
-      });
+      })
-      modeling.updateProperties(this.element, { color: color });
+      modeling.updateProperties(this.element, { color: color })
+      // 设置扩展属性
+
     },
     // 任务节点配置人员
     addUser(properties) {
@@ -206,11 +214,11 @@ export default {
     },
     // 在这里我们封装一个通用的更新节点属性的方法
     updateProperties(properties) {
-      const modeling = this.modeler.get("modeling");
+      const modeling = this.modeler.get('modeling')
-      modeling.updateProperties(this.element, properties);
+      modeling.updateProperties(this.element, properties)
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>

wms_pro/qd/src/views/components/VueBpmn/index.vue

@@ -29,9 +29,12 @@ export default {
   mounted() {
     const canvas = this.$refs.canvas
     // 生成实例
+    const panel = this.$refs.panel
+
     this.bpmnModeler = new BpmnModeler({
       additionalModules: [customPalette],
       container: canvas
+
     })
 
     // 获取a标签dom节点
@@ -161,7 +164,7 @@ export default {
         if (err) {
           console.error(err)
         } else {
-          this.adjustPalette()
+          // this.adjustPalette()
         }
       })
     },
@@ -235,6 +238,7 @@ export default {
       const encodedData = encodeURIComponent(data)
       // 获取到图的xml，保存就是把这个xml提交给后台
       this.xmlStr = data
+      console.log(data)
       // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
       if (data) {
         link.className = 'active'
@@ -252,6 +256,7 @@ export default {
 @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
 @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
 @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
 
 .containers {
   position: absolute;

wms_pro/qd/src/views/components/VueBpmn/palette/CustomPaletteProvider.js

@@ -105,7 +105,7 @@ PaletteProvider.prototype.getPaletteEntries = function(element) {
       group: 'tools',
       className: 'bpmn-icon-lasso-tool',
       title: translate('Activate the lasso tool'),
-      action: {
+      action: {//时间：点击拖拽等等
         click: function(event) {
           lassoTool.activateSelection(event);
         }
@@ -166,7 +166,7 @@ PaletteProvider.prototype.getPaletteEntries = function(element) {
     'create.subprocess-expanded': {
       group: 'activity',
       className: 'bpmn-icon-subprocess-expanded',
-      title: translate('Create expanded SubProcess'),
+      title: '创建一个样式Create expanded SubProcess',
       action: {
         dragstart: createSubprocess,
         click: createSubprocess