jhprjv2/ruoyi-ui/src/views/flowable/task/myProcess/editTaskDrawer.vue

<template>
    <div class="app-container">
      <el-drawer
        v-if="onOpen"
        :visible.sync="onOpen"
        ref="drawer"
        direction="rtl"
        size="60%"
        @close="closeCallBack"
      >
        <template slot="title">
          <div>工程管理 【{{ title }}】</div>
        </template>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          v-loading="loading"
          label-width="120px"
          style="padding-right: 35px"
        >
          <div class="block containers">
            <div class="canvas" ref="flowCanvas"></div>
            <div class="maskLayer" />
          </div>
          <el-form-item label="所属项目" prop="businessKey">
            <el-select
              v-model="form.businessKey"
              placeholder="请选择所属项目"
              style="width: 100%"
              filterable
              :disabled="disPro"
              @change="projectChage"
            >
            <el-option
                v-for="(item,index) in projectOptions"
                :key="index"
                :label="item.projectName"
                :value="item.id"
            >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发起单位">
            {{ deptName }}
          </el-form-item>
          <el-form-item label="发起人">
            {{ nickName }}
          </el-form-item>
          <el-form-item label="审批事项">
            {{ title }}
          </el-form-item>
          <el-form-item label="审批内容" prop="files">
            <FileUpload
              @input="fileInput"
              :limit="9"
              v-model="form.files"
              :fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
            />
          </el-form-item>
          <el-form-item label="申请说明" prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              placeholder="请输入申请说明"
              rows="5"
            />
          </el-form-item>
          <div style="text-align: center">
            <el-button type="primary" @click="submitForm">提交流程</el-button>
            <el-button @click="doCanel">取 消</el-button>
          </div>
        </el-form>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import store from "@/store";
  import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
  import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
  import { findFormDatasByProcInsId } from "@/api/flowable/businessKey";
  import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo";
  
  export default {
    components: {},
    props: {
      closeCallBack: {
        type: Function,
      },
    },
    data() {
      return {
        // 抽屉层
        onOpen: false,
        // 遮罩层
        loading: false,
        // 标题
        title: "",
        // 表单参数
        form: {
          businessKey: "",
          projectName: "",
          files: "",
          remark: "",
        },
        // 表单校验
        rules: {
          businessKey: [{ required: true, message: "请选择所属项目", trigger: "blur" }],
          files: [{ required: true, message: "请上传申请内容", trigger: "blur" }],
          remark: [
            { required: false, message: "请输入申请说明", trigger: "blur" },
            {
              max: 500,
              message: "申请说明最多输入500字",
              trigger: "blur",
            },
          ],
        },
        projectOptions: null,
        deptName: null,
        nickName: null,
        disPro: false,
        bpmnViewer: null,
        options: {},
        taskTitle: null,
        taskOpen: false,
        daterangeMarksTime: [],
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    beforeDestroy() {},
    methods: {
      // 项目选择
      projectChage(val) {
        let projectName = "";
        this.projectOptions.forEach((item) => {
          if ((item.id = val)) {
            projectName = item.projectName;
            return;
          }
        });
        this.form.projectName = projectName;
      },  
      doCanel() {
        this.onOpen = false;
      },
      show(options) {
        this.options = options;
        this.onOpen = true;
        this.title = options.procDefName;
        this.initFormDate(options.procInsId);
        flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => {
            this.initFlowImage(res.data);
        });
      },
      async initFlowImage(data) {
        const self = this;
        try {
          self.bpmnViewer = new BpmnViewer({
            container: this.$refs.flowCanvas,
            height: "150px",
          });
          await self.bpmnViewer.importXML(data.xmlData);
          // 自适应
          self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
          if (data.nodeData !==undefined && data.nodeData.length > 0 ) {
            self.fillColor(data.nodeData)
          }
        } catch (err) {
          console.error(err.message, err.warnings);
        }
      },
      /** 流程表单数据 */
      initFormDate(procInsId, deployId) {
        this.projectOptions=[{id:this.options.businessKey,projectName:this.options.businessKeyName}];
        const params = {procInsId: procInsId}
        findFormDatasByProcInsId(params).then(res => {
          this.form = res.data;
          this.deptName = this.options.startDeptName;
          this.nickName = this.options.startUserName;
          this.form.taskId = this.options.taskId;
          this.form.taskName = this.options.taskName;
          this.form.userId = store.getters.userId;
          this.form.assignee = store.getters.name;
          this.form.procInsId = this.options.procInsId;
          this.form.instanceId = this.options.procInsId;
        }).catch(res => {
          this.$message.error("数据异常，请联系管理员...");
        })
      },
      fileInput(files) {
        let fileUrls = "";
        if (files.length > 0) {
          fileUrls = "";
          files.forEach((item) => {
            fileUrls += "," + item.url;
          });
          fileUrls = fileUrls.substring(1);
        }
        this.form.files = fileUrls;
      },
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.form.variables={
               businessKey:this.form.businessKey,
               projectName:this.form.projectName,
               files:this.form.files,
               remark:this.form.remark,
               INITIATOR:this.form.INITIATOR
            }
            complete(this.form).then(res => {
               this.$store.dispatch('settingAwaitNum');
               this.$modal.msgSuccess("任务提交成功");
               this.loading = false;
               //关闭并刷新列表
               this.$refs.drawer.closeDrawer();
            });
          }
        });
      },
      // 设置高亮颜色的
      fillColor(nodeData) {
        const canvas = this.bpmnViewer.get('canvas')
        this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
          const completeTask = nodeData.find(m => m.key === n.id)
          const todoTask = nodeData.find(m => !m.completed)
          const endTask = nodeData[nodeData.length - 1]
          if (n.$type === 'bpmn:UserTask') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              n.outgoing?.forEach(nn => {
                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  }else {
                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  }
                }
              })
            }
          }
          // 排他网关
          else if (n.$type === 'bpmn:ExclusiveGateway') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              n.outgoing?.forEach(nn => {
                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
  
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
  
              })
            }
  
          }
          // 并行网关
          else if (n.$type === 'bpmn:ParallelGateway') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              n.outgoing?.forEach(nn => {
                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              })
            }
          }
          else if (n.$type === 'bpmn:StartEvent') {
            n.outgoing.forEach(nn => {
              const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (completeTask) {
                canvas.addMarker(nn.id, 'highlight')
                canvas.addMarker(n.id, 'highlight')
                return
              }
            })
          }
          else if (n.$type === 'bpmn:EndEvent') {
            if (endTask.key === n.id && endTask.completed) {
              canvas.addMarker(n.id, 'highlight')
              return
            }
          }
        })
      },
    },
  };
  </script>
  <style lang="scss">
  .bjs-powered-by {
    display: none !important;
  }
  .maskLayer {
    width: 100%;
    height: 150px;
    position: absolute;
    z-index: 9999;
    top: 66px;
  }
  .app-container{
    .containers {
      .canvas {
        width: 100%;
        height: 150px;
      }
      .panel {
        position: absolute;
        right: 0;
        top: 50px;
        width: 300px;
      }
      .load {
        margin-right: 10px;
      }
      .el-form-item__label{
        font-size: 13px;
      }
  
      .djs-palette{
        left: 0px!important;
        top: 0px;
        border-top: none;
      }
  
      .djs-container svg {
        min-height: 150px;
      }
  
      .highlight.djs-shape .djs-visual > :nth-child(1) {
        fill: green !important;
        stroke: green !important;
        fill-opacity: 0.2 !important;
      }
      .highlight.djs-shape .djs-visual > :nth-child(2) {
        fill: green !important;
      }
      .highlight.djs-shape .djs-visual > path {
        fill: green !important;
        fill-opacity: 0.2 !important;
        stroke: green !important;
      }
      .highlight.djs-connection > .djs-visual > path {
        stroke: green !important;
      }
      .highlight-todo.djs-connection > .djs-visual > path {
        stroke: orange !important;
        stroke-dasharray: 4px !important;
        fill-opacity: 0.2 !important;
      }
      .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
        fill: orange !important;
        stroke: orange !important;
        stroke-dasharray: 4px !important;
        fill-opacity: 0.2 !important;
      }
      .overlays-div {
        font-size: 10px;
        color: red;
        width: 100px;
        top: -20px !important;
      }
    }
  }
  </style>