aiot-app/pages/home/wt/components/materialRequisition/processTask.vue

<template>
  <view class="havedone-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="uniNavBarTitle"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>
    <!-- <iframe src="http://aiot.zoomwin.com.cn:51001/test/a.html" style="width: 200px;height: 600px" frameborder="0"></iframe> -->
    <view v-if="processInstance.processDefinition">
      <taskForm
        id="async-biz-form-component"
        :taskId="listData.taskId"
        :businessId="listData.businessId"
        :id="listData.id"
        :taskDefinitionKey="listData.taskDefinitionKey"
        ref="bziRef"
      ></taskForm>
    </view>
    <view v-if="listData.type !='view'">
      <view v-for="(item, index) in runningTasks" :key="index">
        <div v-if="processInstance.processDefinition">
          <taskSubmit
            id="async-sub-form-component"
            :taskId="listData.taskId"
            :businessId="listData.businessId"
            :id="listData.id"
            :taskDefinitionKey="listData.taskDefinitionKey"
            @handleAudit="handleAudit"
            @getTableValue="getTableValue"
            @handleUpdateAssignee="handleUpdateAssignee(item)"
            @handleBackList="handleBackList(item)"
            ref="subForm"
          >
          </taskSubmit>
        </div>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {
  getProcessInstance,
  getTaskListByProcessInstanceId,
} from "@/api/wt/index.js";
import Vue from "vue";
import taskForm from "./taskForm.vue";
import taskSubmit from "./taskSubmit.vue";

export default {
  name: "processTask",
  components: { taskForm, taskSubmit },
  data() {
    return {
      uniNavBarTitle: "",
      processInstanceLoading: false,
      listData: {},
      processInstance: {},
      runningTasks: [],
      auditForms: [],
      activeComp: null,
    };
  },

  onLoad(option) {
    this.listData = option;
    this.getDetail();
    this.activeComp = "tab1";
  },
  methods: {
    /** 获得流程实例 */
    async getDetail() {
      // 获得流程实例相关
      this.processInstanceLoading = true;
      getProcessInstance({
        id: this.listData.id,
      }).then(async (response) => {
        if (!response) {
          this.$message.error("查询不到流程信息！");
          return;
        }
        // 设置流程信息
        this.processInstance = response;
        this.uniNavBarTitle = `${response.name}`;

        this.processInstanceLoading = false;
      });

      this.runningTasks = [];
      this.auditForms = [];
      getTaskListByProcessInstanceId({
        processInstanceId: this.listData.id,
      }).then((response) => {
        console.log(response, "response");
        // 审批记录
        this.tasks = [];
        // 移除已取消的审批
        response.forEach((task) => {
          if (task.result !== 4) {
            this.tasks.push(task);
          }
        });
        // 排序，将未完成的排在前面，已完成的排在后面；
        this.tasks.sort((a, b) => {
          // 有已完成的情况，按照完成时间倒序
          if (a.endTime && b.endTime) {
            return b.endTime - a.endTime;
          } else if (a.endTime) {
            return 1;
          } else if (b.endTime) {
            return -1;
            // 都是未完成，按照创建时间倒序
          } else {
            return b.createTime - a.createTime;
          }
        });

        // 需要审核的记录
        let userInfo = wx.getStorageSync("userInfo");
        this.tasks.forEach((task) => {
          if (task.result !== 1 && task.result !== 6) {
            // 只有待处理才需要
            return;
          }
          if (!task.assigneeUser || task.assigneeUser.id !== userInfo.userId) {
            // 自己不是处理人
            return;
          }
          if (task.taskDefinitionKey !== this.listData.taskDefinitionKey) {
            // 不是当前流程的
            return;
          }
          this.runningTasks.push({
            ...task,
          });
          console.log(this.runningTasks, " this.runningTasks");
          this.auditForms.push({
            reason: "",
          });
        });
      });
    },

    /** 处理审批通过和不通过的操作 */
    handleAudit(data) {
      let text = data.status === 1 ? "通过" : "不通过";
      this.$refs.uToast.show({
        type: "success",
        message: `审批${data.title || text}成功！`,
        iconUrl: "https://cdn.uviewui.com/uview/demo/toast/success.png",
      });
      // 获得最新详情
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);

      // const index = this.runningTasks.indexOf(task);
      // this.$refs['form' + index][0].validate((valid) => {
      //   if (!valid) {
      //     return;
      //   }
      //   const data = {
      //     id: task.id,
      //     reason: this.auditForms[index].reason
      //   };
      //   if (pass) {
      //     approveTask(data).then((response) => {
      //       this.$message.success('审批通过成功！');
      //       this.handleClose(); // 获得最新详情
      //     });
      //   } else {
      //     rejectTask(data).then((response) => {
      //       this.$message.success('审批不通过成功！');
      //       this.handleClose(); // 获得最新详情
      //     });
      //   }
      // });
    },
    getTableValue(fn) {
      fn(this.$refs.bziRef.getTableValue());
    },
  },
};
</script>

<style></style>