vue前端流程设计器集成了bpmn-process-designer在线流程设计器。

bpmnjs项目下载

项目下载后的目录结构：
image.png

项目代码集成

1、将package整体拷贝到项目中。
2、将src下的内容拷贝到src目录下。
3、加入bpmnjs引入的依赖，将额外的依赖加入到package.json中。
4、将代码vue.config.js中的内容集成到项目的vue.config.js中。
image.png

1、将package整体拷贝到项目中

将整个package拷贝过来。
image.png

2、将src下的内容拷贝到src目录下

image.png

3、加入bpmnjs引入的依赖

将额外的依赖加入到package.json中
对照下源码下的依赖，将引用的依赖加入到项目中。
image.png
image.png

4、将代码vue.config.js中的内容集成到项目的vue.config.js中

image.png

5、bpmn页面代码

  1. <template>
  2.   <div id="app">
  3.     <my-process-designer
  4.       :key="`designer-${reloadIndex}`"
  5.       v-model="xmlString"
  6.       v-bind="controlForm"
  7.       keyboard
  8.       ref="processDesigner"
  9.       @element-click="elementClick"
  10.       @init-finished="initModeler"
  11.     />
  12.     <!-- 右侧侧栏-->
  13.     <div>
  14.       <div style="font-size: 18px">
  15.         <i
  16.           @click="setShowPanel()"
  17.           class="el-icon-s-fold"
  18.           v-show="!showPanel"
  19.         ></i>
  20.         <i
  21.           @click="setShowPanel()"
  22.           class="el-icon-s-unfold"
  23.           v-show="showPanel"
  24.         ></i>
  25.       </div>
  26.       <div v-show="showPanel">
  27.         <my-properties-panel
  28.           :key="`penal-${reloadIndex}`"
  29.           :bpmn-modeler="modeler"
  30.           :prefix="controlForm.prefix"
  31.           class="process-panel"
  32.         />
  33.       </div>
  34.     </div>
  36.     <!-- demo config -->
  37.     <div class="demo-control-bar">
  38.       <div class="open-control-dialog" @click="controlDrawerVisible = true">
  39.         <i class="el-icon-setting"></i>
  40.       </div>
  41.     </div>
  42.     <el-drawer
  43.       :visible.sync="controlDrawerVisible"
  44.       size="400px"
  45.       title="偏好设置"
  46.       append-to-body
  47.       destroy-on-close
  48.     >
  49.       <el-form
  50.         :model="controlForm"
  51.         size="small"
  52.         label-width="100px"
  53.         class="control-form"
  54.         @submit.native.prevent
  55.       >
  56.         <el-form-item label="流程ID">
  57.           <el-input
  58.             v-model="controlForm.processId"
  59.             @change="reloadProcessDesigner"
  60.           />
  61.         </el-form-item>
  62.         <el-form-item label="流程名称">
  63.           <el-input
  64.             v-model="controlForm.processName"
  65.             @change="reloadProcessDesigner"
  66.           />
  67.         </el-form-item>
  68.         <el-form-item label="流转模拟">
  69.           <el-switch
  70.             v-model="controlForm.simulation"
  71.             inactive-text="停用"
  72.             active-text="启用"
  73.             @change="reloadProcessDesigner"
  74.           />
  75.         </el-form-item>
  76.         <el-form-item label="禁用双击">
  77.           <el-switch
  78.             v-model="controlForm.labelEditing"
  79.             inactive-text="停用"
  80.             active-text="启用"
  81.             @change="changeLabelEditingStatus"
  82.           />
  83.         </el-form-item>
  84.         <el-form-item label="隐藏label">
  85.           <el-switch
  86.             v-model="controlForm.labelVisible"
  87.             inactive-text="停用"
  88.             active-text="启用"
  89.             @change="changeLabelVisibleStatus"
  90.           />
  91.         </el-form-item>
  92.         <el-form-item label="流程引擎">
  93.           <el-radio-group
  94.             v-model="controlForm.prefix"
  95.             @change="reloadProcessDesigner"
  96.           >
  97.             <el-radio label="activiti">activiti</el-radio>
  98.             <!-- <el-radio label="camunda">camunda</el-radio>
  99.             <el-radio label="flowable">flowable</el-radio> -->
  100.           </el-radio-group>
  101.         </el-form-item>
  102.         <el-form-item label="工具栏">
  103.           <el-radio-group v-model="controlForm.headerButtonSize">
  104.             <el-radio label="mini">mini</el-radio>
  105.             <el-radio label="small">small</el-radio>
  106.             <el-radio label="medium">medium</el-radio>
  107.           </el-radio-group>
  108.         </el-form-item>
  109.       </el-form>
  110.       <br />
  111.       <p style="color: #999999">
  112.         注：activiti 好像不支持表单配置，控制台可能会报错
  113.       </p>
  114.       保存
  115.     </el-drawer>
  116.   </div>
  117. </template>
  119. <script>
  120. import translations from "@/translations";
  121. // 自定义渲染（隐藏了 label 标签）
  122. import CustomRenderer from "@/modules/custom-renderer";
  123. // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
  124. import CustomContentPadProvider from "../../../../package/process-designer/plugins/content-pad";
  125. // 自定义左侧菜单（修改 默认任务 为 用户任务）
  126. import CustomPaletteProvider from "../../../../package/process-designer/plugins/palette";
  127. // 自定义侧边栏
  128. import MyProcessPanel from "../../../../package/process-panel/ProcessPanel";
  130. export default {
  131.     // 声明当前子组件接收父组件传递的属性
  132.   props: {
  133.     record: {
  134.       type: Object,
  135.       default: null,
  136.     },
  137.   },
  138.   name: "App",
  139.   components: {},
  140.   data() {
  141.     return {
  142.       xmlString: "",
  143.       modeler: null,
  144.       reloadIndex: 0,
  145.       controlDrawerVisible: false,
  146.       translationsSelf: translations,
  147.       controlForm: {
  148.         processId: "",
  149.         processName: "",
  150.         simulation: true,
  151.         labelEditing: false,
  152.         labelVisible: false,
  153.         prefix: "activiti",
  154.         headerButtonSize: "mini",
  155.         additionalModel: [
  156.           CustomContentPadProvider,
  157.           CustomPaletteProvider,
  158.           MyProcessPanel,
  159.         ],
  160.       },
  161.       addis: {},
  162.       showPanel: true,
  163.     };
  164.   },
  165.   created() {
  166.     if(this.record.id!=''&&this.record.id!=undefined){
  167.       this.controlForm.processId=this.record.processId;
  168.       this.controlForm.processName=this.record.processName;
  169.       this.xmlString = this.record.xmlString;
  170.     }
  171.     // console.log(this.translationsSelf);
  172.   },
  173.   methods: {
  174.     setShowPanel() {
  175.       console.log(!this.showPanel)
  176.       this.showPanel = !this.showPanel;
  177.     },
  178.     initModeler(modeler) {
  179.       setTimeout(() => {
  180.         console.log(modeler);
  181.         this.modeler = modeler;
  182.       }, 10);
  183.     },
  184.     reloadProcessDesigner() {
  185.       this.controlForm.additionalModel = [];
  186.       for (let key in this.addis) {
  187.         if (this.addis[key]) {
  188.           this.controlForm.additionalModel.push(this.addis[key]);
  189.         }
  190.       }
  191.       this.reloadIndex += 1;
  192.       this.modeler = null; // 避免 panel 异常
  193.     },
  194.     changeLabelEditingStatus(status) {
  195.       this.addis.labelEditing = status
  196.         ? { labelEditingProvider: ["value", ""] }
  197.         : false;
  198.       this.reloadProcessDesigner();
  199.     },
  200.     changeLabelVisibleStatus(status) {
  201.       this.addis.customRenderer = status ? CustomRenderer : false;
  202.       this.reloadProcessDesigner();
  203.     },
  204.     elementClick(element) {
  205.       this.element = element;
  206.     },
  207.   },
  208. };
  209. </script>
  210. <style scoped>
  211. .ant-modal-footer .ant-btn-primary{
  212.   display: none;
  213. }
  214. </style>
  215. <style lang="scss">
  216. //屏蔽掉右下角bpmn.io
  217. .bjs-powered-by {
  218.   display: none;
  219. }
  220. body {
  221.   overflow: hidden;
  222.   margin: 0;
  223.   box-sizing: border-box;
  224. }
  225. #app {
  226.   width: 100%;
  227.   height: 540px;
  228.   box-sizing: border-box;
  229.   display: inline-grid;
  230.   grid-template-columns: auto max-content;
  231. }
  232. .demo-control-bar {
  233.   position: fixed;
  234.   right: 8px;
  235.   bottom: 8px;
  236.   z-index: 1;
  237.   .open-control-dialog {
  238.     width: 48px;
  239.     height: 48px;
  240.     display: flex;
  241.     align-items: center;
  242.     justify-content: center;
  243.     border-radius: 4px;
  244.     font-size: 32px;
  245.     background: rgba(64, 158, 255, 1);
  246.     color: #ffffff;
  247.     cursor: pointer;
  248.   }
  249. }
  250. .control-form {
  251.   .el-radio {
  252.     width: 100%;
  253.     line-height: 32px;
  254.   }
  255. }
  256. body,
  257. body * {
  258.   /* 滚动条 */
  259.   &::-webkit-scrollbar-track-piece {
  260.     background-color: #fff; /*滚动条的背景颜色*/
  261.     -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  262.   }
  263.   &::-webkit-scrollbar {
  264.     width: 10px; /*滚动条的宽度*/
  265.     height: 8px; /*滚动条的高度*/
  266.   }
  267.   &::-webkit-scrollbar-thumb:vertical {
  268.     /*垂直滚动条的样式*/
  269.     height: 50px;
  270.     background-color: rgba(153, 153, 153, 0.5);
  271.     -webkit-border-radius: 4px;
  272.     outline: 2px solid #fff;
  273.     outline-offset: -2px;
  274.     border: 2px solid #fff;
  275.   }
  276.   &::-webkit-scrollbar-thumb {
  277.     /*滚动条的hover样式*/
  278.     background-color: rgba(159, 159, 159, 0.3);
  279.     -webkit-border-radius: 4px;
  280.   }
  281.   &::-webkit-scrollbar-thumb:hover {
  282.     /*滚动条的hover样式*/
  283.     background-color: rgba(159, 159, 159, 0.5);
  284.     -webkit-border-radius: 4px;
  285.   }
  286. }
  287. </style>

bpmn功能改造

1、隐藏右下角logo标志

image.png
2、隐藏代码位置
image.png

2、用户任务动态指定

image.png

改造位置

image.png

改造代码

<template>
  <div style="margin-top: 16px">
    <el-form-item label="分配类型">
      <el-radio-group v-model="userTaskForm.type">
        <el-tooltip
          class="item"
          effect="dark"
          content="流程设计器指定"
          placement="right-start"
        >
          <el-radio label="0">静态分配</el-radio>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="程序动态指定"
          placement="right-start"
        >
          <el-radio label="1">动态分配</el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="处理用户" v-show="userTaskForm.type == '0'">
      <el-input v-model="userTaskForm.assigneeName" clearable disabled />
      <el-button
        @click="selectAssignee()"
        type="primary"
        style="margin-top: 8px"
        >选择</el-button
      >
      <el-button @click="clearAssignee()" type="primary" style="margin-top: 8px"
        >清空</el-button
      >
    </el-form-item>
    <el-form-item label="候选用户" v-show="userTaskForm.type == '0'">
      <el-input
        type="textarea"
        v-model="userTaskForm.candidateUsersName"
        clearable
        disabled
      />
      <el-button
        @click="selectCandidateUsers()"
        type="primary"
        style="margin-top: 8px"
        >选择</el-button
      >
      <el-button
        @click="clearCandidateUsers()"
        type="primary"
        style="margin-top: 8px"
        >清空</el-button
      >
    </el-form-item>
    <el-form-item label="候选分组" v-show="userTaskForm.type == '0'">
      <el-input
        type="textarea"
        v-model="userTaskForm.candidateGroupsName"
        clearable
        disabled
      />
      <el-button
        @click="selectCandidateGroups()"
        type="primary"
        style="margin-top: 8px"
        >选择</el-button
      >
      <el-button
        @click="selectCandidateGroups()"
        type="primary"
        style="margin-top: 8px"
        >清空</el-button
      >
    </el-form-item>

    <el-form-item label="指定类型" v-show="userTaskForm.type == '1'">
      <el-select
        v-model="userTaskForm.assign_mode"
        placeholder="请选择指定类型"
        @change="selectAssignMode()"
      >
        <el-option label="所有人员中选择（根据组织选择）" value="0"></el-option>
        <el-option label="组织选择（指定组织父节点）" value="1"></el-option>
        <el-option label="用户组选择（选择指定组内成员）" value="2"></el-option>
        <el-option label="发起人本组织选择" value="3"></el-option>
        <el-option label="部门经理" value="4"></el-option>
        <el-option label="上级领导" value="5"></el-option>
        <el-option label="分管领导" value="6"></el-option>
        <el-option label="流程发起人" value="7"></el-option>
        <el-option label="指定范围选择" value="8"></el-option>
        <el-option label="代理人（选择单用户）" value="9"></el-option>
        <el-option label=" 候选人（选择多用户）" value="10"></el-option>
        <el-option label="候选组（选择多组织）" value="11"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="用户组选择"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '2'"
    >
      <el-select
        v-model="userTaskForm.assign_content"
        placeholder="请选择用户组"
        @change="selectAssignMode()"
      >
        <el-option
          v-for="item in groupList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="选择组织信息"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '1'"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.organize_name"
        clearable
        disabled
      />
      <el-button
        @click="selectOneOrganize()"
        type="primary"
        style="margin-top: 8px"
        >选择</el-button
      >
    </el-form-item>
    <el-form-item
      label="选择用户信息"
      v-show="
        userTaskForm.type == '1' &&
        (userTaskForm.assign_mode == '8' || userTaskForm.assign_mode == '10')
      "
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.user_names"
        clearable
        disabled
      />
      <el-button
        @click="selectMoreUser()"
        type="primary"
        style="margin-top: 8px"
        >选择</el-button
      >
    </el-form-item>
    <el-form-item
      label="选择用户信息"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '9'"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.user_name"
        clearable
        disabled
      />
      <el-button @click="selectOneUser()" type="primary" style="margin-top: 8px"
        >选择</el-button
      >
    </el-form-item>
    <el-form-item
      label="选择组织信息"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '11'"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.organize_names"
        clearable
        disabled
      />
      <el-button
        @click="selectMoreOrganize()"
        type="primary"
        style="margin-top: 8px"
        >选择</el-button
      >
    </el-form-item>

    <!-- <el-form-item label="处理用户"> -->
    <!-- <el-select>  -->
    <!-- <el-select v-model="userTaskForm.assignee"> 
          <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" /> 
      </el-select>
      <el-input
        v-model="userTaskForm.assignee"
        clearable
        disabled
        @click="updateElementTask('assignee')"
      />
      <el-button @click="updateElementTask('assignee')" type="primary"
        >选择</el-button
      >
      <el-button @click="clearAssignee('assignee')" type="primary">清空</el-button>
    </el-form-item>
    <el-form-item label="候选用户">
      <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">
        <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />
      </el-select>
    </el-form-item>
    <el-form-item label="候选分组">

      <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">
        <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />
      </el-select>
    </el-form-item>
    <el-form-item label="到期时间">
      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
    </el-form-item>
    <el-form-item label="跟踪时间">
      <el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
    </el-form-item>
    <el-form-item label="优先级">
      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
    </el-form-item>  -->
    <!-- 弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-table :data="tableData" @row-click="cellclick" style="width: 100%">
        <el-table-column prop="id" label="id" width="180"> </el-table-column>
        <el-table-column prop="user_name" label="姓名" width="180">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import SelectOneUser from "@/views/system/User/SelectOneUser";
import SelectMoreUser from "@/views/system/User/SelectMoreUser";
import SelectOneOrganize from "@/views/system/Organize/SelectOneOrganize";
import SelectMoreOrganize from "@/views/system/Organize/SelectMoreOrganize";
import {
  findUserOrOrganizeNames,
  findAssignment,
  saveAssignment,
  findGroupList,
} from "@/api/activiti/modeler";
export default {
  name: "UserTask",
  props: {
    id: String,
    type: String,
  },
  data() {
    return {
      defaultTaskForm: {
        type: "0",
        assign_mode: "",
        assignee: "",
        candidateUsers: [],
        candidateGroups: [],
        dueDate: "",
        followUpDate: "",
        priority: "",
        propertyForm: [],
      },
      checktype: "",
      dialogVisible: false,
      tableData: [],
      groupList: [],
      userTaskForm: {
        type: "0",
      },
      mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.bpmnInstances = window.bpmnInstances;
        this.$nextTick(() => this.resetTaskForm());
      },
    },
  },
  mounted() {
    this.initGroup();
  },
  methods: {
    resetTaskForm() {
      this.$set(this.userTaskForm, "model_id", this.bpmnElement.parent.id);
      this.$set(this.userTaskForm, "node_key", this.bpmnElement?.id);
      for (let key in this.defaultTaskForm) {
        let value;
        if (key === "candidateUsers" || key === "candidateGroups") {
          value = this.bpmnElement?.businessObject[key]
            ? this.bpmnElement.businessObject[key].split(",")
            : [];
          if (value != "") {
            findUserOrOrganizeNames({ type: key, ids: value.join(",") }).then(
              (response) => {
                console.log(response);
                if (key === "candidateUsers") {
                  this.$set(
                    this.userTaskForm,
                    "candidateUsers",
                    response.data.data.myIds
                  );
                  this.$set(
                    this.userTaskForm,
                    "candidateUsersName",
                    response.data.data.myNames
                  );
                } else if (key === "candidateGroups") {
                  this.$set(
                    this.userTaskForm,
                    "candidateGroups",
                    response.data.data.myIds
                  );
                  this.$set(
                    this.userTaskForm,
                    "candidateGroupsName",
                    response.data.data.myNames
                  );
                }
              }
            );
          } else {
            if (key === "candidateUsers") {
              this.$set(this.userTaskForm, "candidateUsers", "");
              this.$set(this.userTaskForm, "candidateUsersName", "");
            } else if (key === "candidateGroups") {
              this.$set(this.userTaskForm, "candidateGroups", "");
              this.$set(this.userTaskForm, "candidateGroupsName", "");
            }
          }
        } else if (key === "assignee") {
          value =
            this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
          if (value != "") {
            findUserOrOrganizeNames({ type: key, ids: value }).then(
              (response) => {
                this.$set(
                  this.userTaskForm,
                  "assignee",
                  response.data.data.myIds
                );
                this.$set(
                  this.userTaskForm,
                  "assigneeName",
                  response.data.data.myNames
                );
              }
            );
          } else {
            this.$set(this.userTaskForm, "assignee", "");
            this.$set(this.userTaskForm, "assigneeName", "");
          }
        } else {
          value =
            this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
          this.$set(this.userTaskForm, key, value);
        }
        console.log(key + "|" + value);
      }
      //查询节点设置信息
      findAssignment({ model_id: this.userTaskForm.model_id, node_key: this.userTaskForm.node_key }).then((response) => {
       this.$set(this.userTaskForm, "node_id", response.data.data.id);
       this.$set(this.userTaskForm, "assign_mode", response.data.data.assign_mode);
       this.$set(this.userTaskForm, "assign_content", response.data.data.assign_content);
       this.$set(this.userTaskForm, "type", response.data.data.type);
       this.$set(this.userTaskForm, "node_id", response.data.data.id);
       if(response.data.data.assign_mode=='1'){
        this.$set(this.userTaskForm, "organize_id", response.data.data.organize_id);
        this.$set(this.userTaskForm, "organize_name", response.data.data.organize_name);
       }else if(response.data.data.assign_mode=='8'||response.data.data.assign_mode=='10'){
         this.$set(this.userTaskForm, "user_ids", response.data.data.user_ids);
        this.$set(this.userTaskForm, "user_names", response.data.data.user_names);
       }else if(response.data.data.assign_mode=='9'){
        this.$set(this.userTaskForm, "user_id", response.data.data.user_id);
        this.$set(this.userTaskForm, "user_name", response.data.data.user_name);
       }else if(response.data.data.assign_mode=='11'){
        this.$set(this.userTaskForm, "organize_ids", response.data.data.organize_ids);
        this.$set(this.userTaskForm, "organize_names", response.data.data.organize_names);
       }
      });
    },
    async updateElementTask(key) {
      await axios
        .get("http://127.0.0.1:8090/getOrgUser?pageSize=10&pageNum=1")
        .then((res) => {
          this.tableData = res.data;
          console.log("设置完");
        });
      this.checktype = key;
      this.dialogVisible = true;
      let taskAttr = Object.create(null);
      if (key === "candidateUsers" || key === "candidateGroups") {
        taskAttr[key] =
          this.userTaskForm[key] && this.userTaskForm[key].length
            ? this.userTaskForm[key].join()
            : null;
      } else {
        taskAttr[key] = this.userTaskForm[key] || null;
        console.log(taskAttr[key]);
      }
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr
      );
    },
    cellclick(row) {
      var key = this.checktype;
      let taskAttr = Object.create(null);
      this.userTaskForm.assignee = row.id;
      this.dialogVisible = false;
      if (key === "candidateUsers" || key === "candidateGroups") {
        taskAttr[key] =
          this.userTaskForm[key] && this.userTaskForm[key].length
            ? this.userTaskForm[key].join()
            : null;
      } else {
        taskAttr[key] = this.userTaskForm[key] || null;
        console.log(taskAttr[key]);
      }
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr
      );
    },
    clearAssignee(key) {
      let value;
      let taskAttr = Object.create(null);
      if (key === "candidateUsers" || key === "candidateGroups") {
        console.log(key);
      } else {
        taskAttr[key] = ""; //this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
      }
      this.$set(this.userTaskForm, key, "");
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr
      );
    },

    //初始化initGroup
    initGroup() {
      findGroupList({}).then((response) => {
        this.groupList = response.data.data;
      });
    },

    //选择办理人
    selectAssignee() {
      this.dialog(SelectOneUser, "assignee", {
        user_id: this.userTaskForm.assignee,
        user_name: this.userTaskForm.assigneeName,
      });
    },
    //选择候选人
    selectCandidateUsers() {
      this.dialog(SelectMoreUser, "candidateUsers", {
        user_ids: this.userTaskForm.candidateUsers,
        user_names: this.userTaskForm.candidateUsersName,
      });
    },
    //选择候选组
    selectCandidateGroups() {
      this.dialog(SelectMoreOrganize, "candidateGroups", {
        organize_ids: this.userTaskForm.candidateGroups,
        organize_names: this.userTaskForm.candidateGroupsName,
      });
    },

    //选择单组织
    selectOneOrganize() {
      this.dialog(SelectOneOrganize, "oneOrganize", {
        organize_id: this.userTaskForm.organize_id,
        organize_name: this.userTaskForm.organize_name,
      });
    },
    //选择多用户
    selectMoreUser() {
      this.dialog(SelectMoreUser, "moreUser", {
        user_ids: this.userTaskForm.user_ids,
        user_names: this.userTaskForm.user_names,
      });
    },
    //选择单用户
    selectOneUser() {
      this.dialog(SelectOneUser, "oneUser", {
        user_id: this.userTaskForm.user_id,
        user_name: this.userTaskForm.user_name,
      });
    },
    //选择多组织
    selectMoreOrganize() {
      this.dialog(SelectMoreOrganize, "moreOrganize", {
        organize_ids: this.userTaskForm.organize_ids,
        organize_names: this.userTaskForm.organize_names,
      });
    },

    //选择用户组织弹框
    dialog(component, fileType, record) {
      console.log(component, fileType, record);
      const that = this;
      this.$dialog(
        component,
        // component props
        {
          record,
          on: {
            ok() {
              console.log("ok 回调");
            },
            cancel() {
              console.log("cancel 回调");
            },
            close() {
              console.log("modal close 回调");
            },
            initValue(value, type) {
              if (type == "1") {
                if (fileType == "assignee") {
                  that.userTaskForm.assignee = value.split(":")[0];
                  that.userTaskForm.assigneeName = value.split(":")[1];
                  //更新文档参数
                  that.updateActivitiProperties(
                    "assignee",
                    value.split(":")[0]
                  );
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                } else if (fileType == "oneUser") {
                  that.userTaskForm.user_id = value.split(":")[0];
                  that.userTaskForm.user_name = value.split(":")[1];
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                }
              } else if (type == "2") {
                if (fileType == "candidateUsers") {
                  that.userTaskForm.candidateUsers = value.split(":")[0];
                  that.userTaskForm.candidateUsersName = value.split(":")[1];
                  //更新文档参数
                  that.updateActivitiProperties(
                    "candidateUsers",
                    value.split(":")[0]
                  );
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                } else if (fileType == "moreUser") {
                  that.userTaskForm.user_ids = value.split(":")[0];
                  that.userTaskForm.user_names = value.split(":")[1];
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                }
              } else if (type == "3") {
                if (fileType == "oneOrganize") {
                  that.userTaskForm.organize_id = value.split(":")[0];
                  that.userTaskForm.organize_name = value.split(":")[1];
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                }
              } else if (type == "4") {
                if (fileType == "candidateGroups") {
                  that.userTaskForm.candidateGroups = value.split(":")[0];
                  that.userTaskForm.candidateGroupsName = value.split(":")[1];
                  //更新文档参数
                  that.updateActivitiProperties(
                    "candidateGroups",
                    value.split(":")[0]
                  );
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                } else if (fileType == "moreOrganize") {
                  that.userTaskForm.organize_ids = value.split(":")[0];
                  that.userTaskForm.organize_names = value.split(":")[1];
                  that.saveAssignMode(
                    value.split(":")[0] + "#" + value.split(":")[1]
                  );
                }
              }
              that.$forceUpdate();
            },
          },
        },
        // modal props
        {
          title: "操作",
          width: 800,
          height: 500,
          centered: true,
          maskClosable: false,
          okText: "确认",
          cancelText: "取消",
        }
      );
    },
    updateActivitiProperties(key, value) {
      let taskAttr = {};
      taskAttr[key] = value;
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr
      );
    },
    selectAssignMode() {
      let assign_mode = this.userTaskForm.assign_mode;
      let assign_content = this.userTaskForm.assign_content;
      if (
        assign_mode == "0" ||
        assign_mode == "3" ||
        assign_mode == "4" ||
        assign_mode == "5" ||
        assign_mode == "6" ||
        assign_mode == "7" ||
        (assign_mode == "2" &&
          assign_content != "" &&
          assign_content != undefined)
      ) {
        saveAssignment({
          id: this.userTaskForm.node_id,
          type: this.userTaskForm.type,
          assign_mode: this.userTaskForm.assign_mode,
          assign_content: this.userTaskForm.assign_content,
          model_id: this.userTaskForm.model_id,
          node_key: this.userTaskForm.node_key,
        }).then((response) => {
          console.log(response);
        });
      }
    },
    saveAssignMode(assign_content) {
      saveAssignment({
        id: this.userTaskForm.node_id,
        type: this.userTaskForm.type,
        assign_mode: this.userTaskForm.assign_mode,
        model_id: this.userTaskForm.model_id,
        node_key: this.userTaskForm.node_key,
        assign_content: assign_content,
      }).then((response) => {
        console.log(response);
      });
    },
  },

  beforeDestroy() {
    this.bpmnElement = null;
  },
};
</script>