qgb-process 0.2.3 → 0.2.7

package/src/components/CommonAduitNew.vue

@@ -1,906 +1,906 @@
-<template>
-  <div class="exam-add-edit">
-    <div class="exam-detail">
-      <div class="detail-left">
-        <!-- 审批流程 -->
-        <div class="exmAndapproInfo">
-          <p class="title">审批流程</p>
-          <div class="box">
-            <div class="dw">
-              <ul>
-                <li
-                  v-for="(item,index) in processList"
-                  :key="index+'process'"
-                  :class="!item.isComplete ? 'no-approva' : ''"
-                >
-                  <div
-                    v-if="index != 0"
-                    class="line"
-                  ></div>
-                  <div class="node">
-                    <div class="node-info">
-                      <div>
-                        <!-- <p v-if="item.nodeType == 'START'">发起流程</p>
-                        <p v-else-if="item.nodeType == 'END'">完成</p>
-                        <p v-else>审批</p> -->
-                        <p>{{item.nodeName}}</p>
-                      </div>
-                      <div>
-                        <p v-if="item.nodeType == 'START' || (item.nodeType == 'END' && item.nodeName == '开始')">{{optData[0] && optData[0].approverName ? optData[0].approverName : '发起人'}}</p>
-                        <p v-else-if="item.nodeType == 'USER_EVENT'">
-                          <!-- {{(item.approvers.map(item=>(item.userName))).join('，')}} -->
-                          {{getUserName(item)}}
-                        </p>
-                        <p v-else></p>
-                      </div>
-                      <!-- <p>2020-03-01 12:00</p> -->
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div class="exmAndapproInfo">
-          <p class="title">审批日志</p>
-          <div class="audit-log">
-            <el-table
-              :data="optData"
-              border
-              :header-cell-style="$TableCell.setHeaderCellStyle"
-              :cell-style="$TableCell.setCellStyle"
-              tooltip-effect="dark"
-              style="width: 100%;"
-            >
-              <el-table-column
-                show-overflow-tooltip
-                :resizable="false"
-                prop="approverName"
-                label="操作人员"
-                align="left"
-              ></el-table-column>
-              <el-table-column
-                show-overflow-tooltip
-                :resizable="false"
-                prop="result"
-                label="操作结果"
-                align="left"
-              >
-                <template slot-scope="scope">
-                  <span
-                    class="unpass"
-                    v-if="scope.row.status == 0"
-                  >审批不通过</span>
-                  <span
-                    class="pass"
-                    v-if="(scope.row.status == 1 || scope.row.status == 3)"
-                  >审批通过</span>
-                  <span v-if="scope.row.status == -1">发起流程</span>
-                  <span v-if="scope.row.status == 2">流程转交</span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                show-overflow-tooltip
-                :resizable="false"
-                prop="audit_time"
-                label="操作时间"
-                align="left"
-              >
-                <template slot-scope="scope">
-                  <span>{{scope.row.create_time}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                show-overflow-tooltip
-                :resizable="false"
-                prop="useTime"
-                label="共计用时"
-                align="left"
-              >
-                <template slot-scope="scope">
-                  <span>{{scope.row.take_time}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                show-overflow-tooltip
-                :resizable="false"
-                prop="reason"
-                label="操作备注"
-                align="left"
-              >
-                <template slot-scope="scope">
-                  <span>{{scope.row.reason | formatReason}}</span>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </div>
-        <div
-          class="exmAndapproInfo"
-          v-if="false"
-        >
-          <p class="title">询问详情</p>
-          <div class="inquiry">
-            <div>
-              <span>部门负责人：张三</span>
-              <!-- <span>2020-03-07 13:00</span> -->
-            </div>
-            <div>
-              <span>同意</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="exmAndapproInfo"
-      style="padding: 20px 0"
-      v-if="complete && $route.query.approve"
-    >
-      <el-form
-        ref="form"
-        :rules="rules"
-        :model="form"
-        label-width="80px"
-      >
-        <el-form-item
-          label="审批操作"
-          prop="result"
-          :rules="[{ required: true, message: '请选择审批操作', trigger: 'blur' }]"
-        >
-          <el-radio-group
-            v-model="form.result"
-            @change="changeHarld"
-          >
-            <el-radio :label="1">通过</el-radio>
-            <el-radio :label="2">不通过</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          style="width: 50%"
-          label="审批意见"
-          prop="reason"
-          :rules="form.result == '2' ? [{ required: true, message: '请输入审批意见', trigger: 'blur' }] : []"
-        >
-          <el-input
-            type="textarea"
-            :rows="4"
-            maxlength="300"
-            show-word-limit
-            v-model="form.reason"
-            placeholder="请填写300字以内的审批意见"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <div class="save">
-        <el-button @click="showSection = true; optType=1">转交</el-button>
-        <el-button
-          type="primary"
-          :disabled="loading"
-          @click="marking"
-        >批阅</el-button>
-        <!-- <el-button type="primary" @click="showSection = true; optType=2">询问</el-button> -->
-      </div>
-    </div>
-    <!-- 督办 -->
-    <div
-      class="exmAndapproInfo"
-      v-if="false"
-    >
-      <div class="supervise">
-        <span>督办说明：</span>
-        <el-input
-          type="textarea"
-          :rows="4"
-          maxlength="300"
-          show-word-limit
-          v-model="supervise"
-          placeholder="请输入督办说明，最多可输入300字"
-        ></el-input>
-      </div>
-      <div class="supervise-btn">
-        <el-button
-          type="primary"
-          @click="toUrge"
-        >督办</el-button>
-      </div>
-    </div>
-    <!-- 撤销 -->
-    <div
-      class="supervise-btn"
-      v-if="!$route.query.approve && false"
-    >
-      <el-button @click="revoke">撤销</el-button>
-    </div>
-    <MemberSelection
-      ref="selection"
-      v-if="showSection"
-      title="选择转交人"
-      isRadio
-      :directClose="false"
-      @close="showSection = false; deliverForm.deliverRemark = ''"
-      :formData="selectData"
-      @save="checkMenber"
-    >
-      <div class="remark">
-        <el-form
-          :model="deliverForm"
-          ref="deliver"
-          inline
-        >
-          <el-form-item
-            label="转交理由："
-            prop="deliverRemark"
-            :rules="[{ required: true, message: '请输入转交理由', trigger: 'change' }]"
-          >
-            <el-input
-              style="width:440px"
-              type="textarea"
-              :autosize="{ minRows: 2, maxRows: 4}"
-              v-model="deliverForm.deliverRemark"
-              placeholder="请输入转交理由"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-      </div>
-    </MemberSelection>
-  </div>
-</template>
-
-<script>
-import apiApprove from "@/api/ApiExAndapp";
-import { approvalAudit } from "@/api/apiAudit/apiAudit";
-import apiBudget from "@/api/apiBudget/apiBudget.js"; // 预算
-import { leaseRentInfoApprove } from "@/api/apiMachine/apiLease"; // 机械
-import apiEquipmentRental from "@/api/apiEquipmentRental"; // 设备
-import apiEmployeeRegularization from "@/api/apiEmployeeRegularization"; // 员工
-import { sealApprove } from "@/api/apiSealRecord"; // 印章
-import { carApplyApprove } from "@/api/apiCarRecord"; // 车辆
-import apiCheckingIn from "@/api/apiCheckingIn";
-import {
-  queryProcessList,
-  approverMakerAsPass,
-  approverMakerAsRefuse,
-  queryOptLog,
-  deliverProcess,
-  approvalOption,
-  updateProcessToNew,
-  getProcessDetail
-} from "@/api/apiProcess";
-import cookie from "@/storage/cookies";
-import MemberSelection from "./public/MemberSelection";
-import * as ProcessBuilder from "@/views/formBuilder/service/ProcessBuilder.js";
-export default {
-  name: "AuditDetail",
-  components: {
-    MemberSelection
-  },
-  data() {
-    return {
-      total: null,
-      activeName: "first",
-      form: {
-        no: "",
-        result: 1,
-        reason: ""
-      },
-      rules: {
-        resource: [
-          { required: true, message: "请选择审批操作", trigger: "change" }
-        ]
-      },
-      dataInfo: { no: "" },
-      dataContent: {},
-      flowData: [],
-      logData: [],
-      log: {
-        id: this.$route.params.id,
-        limit: 20,
-        page: 1
-      },
-      logoData: [],
-      auditType: 0,
-      processList: [],
-      supervise: "",
-      showSection: false,
-      selectData: {
-        roleList: [],
-        userList: []
-      },
-      optType: "1",
-      id: "",
-      applyId: "",
-      optData: [],
-      complete: true,
-      deliverForm: {
-        deliverRemark: ""
-      },
-      deliver: {},
-      loading: false,
-      root: null
-    };
-  },
-  props: {
-    auditData: {
-      type: Object
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    }
-  },
-  filters: {
-    leaseDataFn(val) {
-      console.log(val);
-      return val;
-    },
-    telEllipsis(val) {
-      return val;
-    },
-    formatReason(val) {
-      if (!val) return "";
-      const isHas = val.indexOf("|");
-      if (isHas > -1) {
-        const str = val.substring(isHas + 1)
-          ? " 转交原因：" + val.substring(isHas + 1)
-          : "";
-        return "转交给" + val.substring(0, isHas) + str;
-      } else {
-        return val;
-      }
-    }
-  },
-  watch: {
-    auditData(val) {
-      this.initData(val);
-    }
-  },
-  mounted() {
-    this.applyId = this.$route.query.applyId || "";
-    this.id = this.$route.query.auditId
-      ? this.$route.query.auditId
-      : this.$route.query.id;
-    // this.initData(this.auditData)
-    this.getProcessList();
-    this.getApprovalOpt();
-  },
-  methods: {
-    initData(val) {
-      if (val.auditRecord) {
-        this.dataInfo = val.auditDetail;
-        this.flowData = val.auditRecord;
-
-        /* 流程目前进行到哪一步日志显示到那一条 */
-        let ind = 0;
-        val.auditRecord.forEach((v, i) => {
-          if (ind < 1 && !v.audit_time) {
-            ind = i;
-          }
-        });
-        if (ind) {
-          this.logData = val.auditRecord.slice(0, ind);
-        } else {
-          this.logData = val.auditRecord;
-        }
-        this.form.no = val.auditDetail.no;
-        this.form.billNo = val.auditDetail.bill_no;
-
-        this.auditType = val.auditDetail.type;
-      }
-    },
-    // 分页
-    operationPageChange(page) {
-      this.log.page = page;
-      this.handleClick();
-    },
-    async handleClick() {
-      if (this.activeName == "second") {
-        const res = await apiApprove.postExAndapplog(this.log);
-        if (res.data.code == 200) {
-          this.logoData = res.data.data.records;
-          this.total = Number(res.data.data.total);
-        }
-        console.log(res);
-      }
-    },
-    save() {
-      this.$refs["form"].validate(async valid => {
-        if (valid) {
-          if (this.auditType === 2) {
-            var { data } = await apiEmployeeRegularization.employeeApprove(
-              this.form
-            );
-          } else if (this.auditType === 5) {
-            var { data } = await apiBudget.budgetApprove(this.form);
-          } else if (this.auditType === 6) {
-            var { data } = await leaseRentInfoApprove(this.form);
-          } else if (this.auditType === 7) {
-            var { data } = await apiEquipmentRental.rentInfoApprove(this.form);
-          } else if (this.auditType === "subcontract") {
-            alert(1);
-          } else {
-            // var {data} = await approvalAudit(this.form)
-            var token = cookie.cookieRead("token");
-            const params = {
-              resourceToken: token,
-              userNo: this.$store.state.user.no,
-              reason: this.form.reason,
-              result: this.form.result,
-              applyNo: this.form.billNo
-            };
-            var { data } = await apiCheckingIn.approvalAudit(params);
-          }
-          if (data.code === 200 || data.code === 0) {
-            const msg = data.msg || "操作成功";
-            this.$message({
-              showClose: true,
-              message: msg,
-              type: "success"
-            });
-            this.$removeTag("/");
-          } else if (data.state == "ok") {
-            const msg = data.data || "操作成功";
-            this.$message({
-              showClose: true,
-              message: msg,
-              type: "success"
-            });
-            this.$removeTag("/");
-          } else {
-            const msg = data.msg || "操作失败";
-            this.$message.error(data.msg);
-          }
-        }
-      });
-    },
-    changeHarld() {
-      this.$refs.form.clearValidate();
-    },
-    time(val) {
-      if (!val) {
-        return "";
-      }
-      var date = new Date(val);
-      var year = date.getFullYear();
-      var month = date.getMonth() + 1; // js从0开始取
-      var date1 = date.getDate();
-      var hour = date.getHours();
-      var minutes = date.getMinutes();
-      var second = date.getSeconds();
-
-      if ((month + "").length === 1) {
-        month = "0" + month;
-      }
-      if ((date1 + "").length === 1) {
-        date1 = "0" + date1;
-      }
-      if ((hour + "").length === 1) {
-        hour = "0" + hour;
-      }
-      if ((minutes + "").length === 1) {
-        minutes = "0" + minutes;
-      }
-      if ((second + "").length === 1) {
-        second = "0" + second;
-      }
-      return year + "-" + month + "-" + date1 + " " + hour + ":" + minutes;
-      //  return year + '年' + month + '月' + date1 + '日' + hour + '时' + minutes + '分' + second + '秒'
-    },
-    async getProcessList() {
-      const res = await queryProcessList({ id: this.id });
-      let flg = true;
-      res.data.data.processList.forEach(item => {
-        item.isComplete = flg;
-        if (item.nodeId == res.data.data.nextNode) {
-          flg = false;
-        }
-      });
-      this.processList = res.data.data.processList;
-      this.deliver = res.data.data.deliver ? res.data.data.deliver : {};
-      if (res.data.data && res.data.data.processId) {
-        this.checkProcessList(res.data.data.processId);
-      }
-    },
-    // 审批转交
-    checkMenber(data) {
-      if (data.userList.length < 1) {
-        this.$message.error("请选择角色或成员");
-        return;
-      }
-      this.selectData.userList = data.userList;
-      if (this.optType == 1) {
-        this.$refs.deliver.validate(async valid => {
-          if (valid) {
-            const parse = {
-              deliverTo: this.selectData.userList[0].memberNo,
-              companyNo: this.user.cno,
-              source: this.user.no,
-              deliverName: this.selectData.userList[0].name,
-              id: this.id,
-              reason: this.deliverForm.deliverRemark
-            };
-            const res = await deliverProcess(parse);
-            if (res.data.state == "ok") {
-              // this.$refs.selection.handleClose()
-              this.showSection = false;
-              this.$message.success(res.data.msg ? res.data.msg : "操作成功");
-              this.$router.go(-1);
-            } else {
-              this.$message.error(
-                res.data.msg ? res.data.msg : "转交失败，请重试"
-              );
-            }
-          }
-        });
-      } else {
-      }
-    },
-    // 督办
-    toUrge() {},
-    // 撤销
-    revoke() {
-      this.$confirm(`撤销审批需审批人统计，确定要撤销吗？`, "撤销审批", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(function() {
-          // 撤销接口
-        })
-        .catch(() => {});
-    },
-    // 批阅
-    async marking() {
-      this.$refs["form"].validate(async valid => {
-        if (valid) {
-          this.loading = true;
-          let res;
-          // 走app接口的审批
-          const appType = [
-            "/leaveDetail",
-            "/evectionDetail",
-            "/reissueCardDetail"
-          ];
-          if (this.form.result == 1) {
-            if (appType.indexOf(this.$route.path) > -1) {
-              res = await approvalOption({
-                id: this.id,
-                reason: this.form.reason,
-                userId: this.$store.state.user.no,
-                companyId: this.$store.state.user.cno
-              });
-            } else {
-              res = await approverMakerAsPass({
-                id: this.id,
-                reason: this.form.reason,
-                userId: this.$store.state.user.no,
-                companyId: this.$store.state.user.cno
-              });
-            }
-          } else if (this.form.result == 2) {
-            res = await approverMakerAsRefuse({
-              id: this.id,
-              reason: this.form.reason,
-              userId: this.$store.state.user.no,
-              companyId: this.$store.state.user.cno
-            });
-          }
-          if (res.data.state == "ok") {
-            this.$message.success(res.data.msg);
-            // this.getApprovalOpt()
-            // this.getProcessList()
-            this.$removeTag("/");
-            this.complete = false;
-          } else {
-            this.loading = true;
-            this.$message.error(res.data.msg);
-          }
-        }
-      });
-    },
-    // 获取审批日志
-    async getApprovalOpt() {
-      const res = await queryOptLog({ id: this.id });
-      if (res.data.state == "ok") {
-        this.optData = res.data.data;
-      }
-    },
-    async checkProcessList(id) {
-      if (!id) return;
-      const res = await getProcessDetail({ id: id });
-      if (res.data.data && res.data.data._id && !res.data.data.gateWays) {
-        const processList = JSON.parse(res.data.data.content);
-        const isflg = this.dataTonewList(processList.nodeList);
-        const nodeList = ProcessBuilder.treeToListLocal(this.root.lists);
-        const gateWayList = [];
-        nodeList.forEach((node, index) => {
-          if (node.lists.length > 0 && node.item.type == "addCondition") {
-            for (let j = 0; j < node.lists.length; j++) {
-              const each = node.lists[j];
-              const gateWayItem = {
-                id: each.item.id,
-                type: "condition",
-                name: "条件分支" + each.item.id,
-                left: each.item.left,
-                top: each.item.top,
-                from: each.item.from,
-                gateWayKey: node.item.id,
-                to: each.item.to,
-                conditions: each.item.conditions,
-                ifNo: 10,
-                desc: each.item.desc,
-                isCondition: each.item.isCondition
-              };
-              gateWayList.push(gateWayItem);
-            }
-          }
-        });
-        const params = {
-          name: processList.name,
-          desc: "",
-          creator: processList.creator,
-          processId: res.data.data._id,
-          startId: "1",
-          endId: "5",
-          companyId: processList.companyId,
-          type: processList.type,
-          switchOn: processList.isFlg ? "1" : "0",
-          gateWayList: gateWayList,
-          nodeList: nodeList,
-          lineList: [],
-          version: res.data.data.rootNode.version
-        };
-        const data1 = { id: this.id + "", content: JSON.stringify(params) };
-        console.log(data1);
-        const resulte = await updateProcessToNew(data1);
-      }
-    },
-    dataTonewList(processList) {
-      this.root = new ProcessBuilder.Node(
-        ProcessBuilder.createItem(
-          "0",
-          "根节点",
-          "root",
-          "320px",
-          "20px",
-          "1",
-          "2"
-        )
-      );
-      let parent = this.root;
-      let currentId = 1;
-      let isflg = true;
-      while (parent.item.type != "end" && isflg) {
-        const currentNode = this.getCurrentNode(processList, currentId);
-        if (!currentNode) {
-          isflg = false;
-          break;
-        }
-        const node = new ProcessBuilder.Node(
-          ProcessBuilder.createItem(
-            currentNode.id,
-            currentNode.name,
-            currentNode.type,
-            currentNode.left,
-            currentNode.top,
-            currentNode.from,
-            currentNode.to
-          )
-        );
-        if (currentNode.type == "userTask") {
-          node.item = Object.assign(node.item, {
-            approverType: currentNode.approverType,
-            approvers: currentNode.approvers,
-            notifiers: currentNode.notifiers
-          });
-        }
-        if (currentNode.type == "condition") {
-          currentId = currentNode.to;
-          parent.item.to = currentNode.to;
-        } else {
-          parent.add(node);
-          currentId = currentNode.to;
-          parent = node;
-        }
-      }
-      return isflg;
-    },
-    getCurrentNode(list, id) {
-      const node = list.filter(item => item.id == id);
-      return node.length > 0 ? node[0] : null;
-    },
-    // 获取节点用户名称
-    getUserName(obj) {
-      const approvers = obj.approvers;
-      const deliver = this.deliver[obj.nodeId];
-      const user = approvers.map(item => item.userName).join(",");
-      const str =
-        deliver && deliver[0]
-          ? `${user}(已转交给${deliver[0].deliverName})`
-          : user;
-      return str;
-    }
-  }
-};
-</script>
-<style lang="scss">
-.exam-add-edit .el-tabs__header {
-  margin: 0;
-}
-</style>
-<style scoped lang="scss" rel="stylesheet/scss">
-.box {
-  margin: 20px 0 0 20px;
-  .dw {
-    ul {
-      padding: 0 60px;
-      display: flex;
-      li {
-        flex: 1;
-        display: flex;
-        height: 100px;
-        min-width: 160px;
-        &:first-child {
-          flex: none;
-          width: 10px;
-          min-width: 10px;
-        }
-        .node {
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          position: relative;
-          background-color: #0286df;
-          .node-info {
-            position: absolute;
-            top: 14px;
-            left: -70px;
-            width: 150px;
-            p {
-              margin: 4px 0;
-              text-align: center;
-              color: #666;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              &:nth-of-type(1) {
-                color: #333;
-              }
-            }
-          }
-        }
-        .line {
-          flex: 1;
-          height: 4px;
-          margin: 3px 0;
-          background-color: #0286df;
-        }
-      }
-      .no-approva {
-        .node {
-          background-color: #ccc;
-        }
-        .line {
-          background-color: #ccc;
-        }
-      }
-    }
-  }
-}
-.save {
-  text-align: center;
-}
-.exam-detail {
-  display: flex;
-  // border: 1px solid #e4e7ed;
-  border-top: 0;
-
-  .exmAndapproInfo {
-    .audit-log {
-      padding: 15px 20px 0 0;
-    }
-    .title {
-      margin: 0;
-      /*padding: 20px 0 20px 20px;*/
-      /*border-bottom: 1px solid #E4E7ED;*/
-      font-size: 16px;
-      color: #333333;
-      color: #0286df;
-      font-size: 18px;
-      border-bottom: 1px dashed #e4e7ed;
-      padding: 0 0 12px 10px;
-      position: relative;
-      &::before {
-        position: absolute;
-        left: 0;
-        top: 2px;
-        content: "";
-        width: 3px;
-        height: 20px;
-        background-color: #409ee9;
-      }
-    }
-    .inquiry {
-      margin: 10px 0 10px 10px;
-      span {
-        font-size: 14px;
-        color: #666666;
-      }
-      div {
-        margin-top: 8px;
-      }
-    }
-    margin: 0;
-    font-size: 14px;
-    color: #666666;
-    padding: 20px 0 0 0;
-    span {
-      color: #333333;
-    }
-    .linbP {
-      font-size: 14px;
-      color: #666666;
-      span {
-        margin-left: 10px;
-        color: #333333;
-      }
-    }
-    .unpass {
-      color: #ff6600;
-    }
-    .pass {
-      color: #78c06e;
-    }
-  }
-  .detail-left {
-    flex: 1;
-    .exmAndapproInfo {
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-  }
-}
-.supervise {
-  display: flex;
-  width: 50%;
-  margin-top: 26px;
-  & > span {
-    font-size: 14px;
-    color: #666;
-    display: block;
-    width: 80px;
-    margin-right: 10px;
-  }
-  /deep/ .el-input__count {
-    bottom: 5px !important;
-  }
-}
-.supervise-btn {
-  text-align: center;
-  margin-top: 20px;
-}
-.headTitle {
-  color: #000000;
-  padding-bottom: 20px;
-  /*padding: 20px 20px 0 20px;*/
-  div {
-    /*border-bottom: 1px solid #0286df;*/
-    /*padding-bottom: 30px;*/
-    span {
-      font-size: 16px;
-    }
-  }
-}
-.pad_10 {
-  padding: 0 10px;
-}
-.remark {
-  display: flex;
-  margin-top: 20px;
-  & > span {
-    padding-top: 6px;
-    width: 80px;
-  }
-}
-</style>
+<template>
+  <div class="exam-add-edit">
+    <div class="exam-detail">
+      <div class="detail-left">
+        <!-- 审批流程 -->
+        <div class="exmAndapproInfo">
+          <p class="title">审批流程</p>
+          <div class="box">
+            <div class="dw">
+              <ul>
+                <li
+                  v-for="(item,index) in processList"
+                  :key="index+'process'"
+                  :class="!item.isComplete ? 'no-approva' : ''"
+                >
+                  <div
+                    v-if="index != 0"
+                    class="line"
+                  ></div>
+                  <div class="node">
+                    <div class="node-info">
+                      <div>
+                        <!-- <p v-if="item.nodeType == 'START'">发起流程</p>
+                        <p v-else-if="item.nodeType == 'END'">完成</p>
+                        <p v-else>审批</p> -->
+                        <p>{{item.nodeName}}</p>
+                      </div>
+                      <div>
+                        <p v-if="item.nodeType == 'START' || (item.nodeType == 'END' && item.nodeName == '开始')">{{optData[0] && optData[0].approverName ? optData[0].approverName : '发起人'}}</p>
+                        <p v-else-if="item.nodeType == 'USER_EVENT'">
+                          <!-- {{(item.approvers.map(item=>(item.userName))).join('，')}} -->
+                          {{getUserName(item)}}
+                        </p>
+                        <p v-else></p>
+                      </div>
+                      <!-- <p>2020-03-01 12:00</p> -->
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="exmAndapproInfo">
+          <p class="title">审批日志</p>
+          <div class="audit-log">
+            <el-table
+              :data="optData"
+              border
+              :header-cell-style="$TableCell.setHeaderCellStyle"
+              :cell-style="$TableCell.setCellStyle"
+              tooltip-effect="dark"
+              style="width: 100%;"
+            >
+              <el-table-column
+                show-overflow-tooltip
+                :resizable="false"
+                prop="approverName"
+                label="操作人员"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                show-overflow-tooltip
+                :resizable="false"
+                prop="result"
+                label="操作结果"
+                align="left"
+              >
+                <template slot-scope="scope">
+                  <span
+                    class="unpass"
+                    v-if="scope.row.status == 0"
+                  >审批不通过</span>
+                  <span
+                    class="pass"
+                    v-if="(scope.row.status == 1 || scope.row.status == 3)"
+                  >审批通过</span>
+                  <span v-if="scope.row.status == -1">发起流程</span>
+                  <span v-if="scope.row.status == 2">流程转交</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                show-overflow-tooltip
+                :resizable="false"
+                prop="audit_time"
+                label="操作时间"
+                align="left"
+              >
+                <template slot-scope="scope">
+                  <span>{{scope.row.create_time}}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                show-overflow-tooltip
+                :resizable="false"
+                prop="useTime"
+                label="共计用时"
+                align="left"
+              >
+                <template slot-scope="scope">
+                  <span>{{scope.row.take_time}}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                show-overflow-tooltip
+                :resizable="false"
+                prop="reason"
+                label="操作备注"
+                align="left"
+              >
+                <template slot-scope="scope">
+                  <span>{{scope.row.reason | formatReason}}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div
+          class="exmAndapproInfo"
+          v-if="false"
+        >
+          <p class="title">询问详情</p>
+          <div class="inquiry">
+            <div>
+              <span>部门负责人：张三</span>
+              <!-- <span>2020-03-07 13:00</span> -->
+            </div>
+            <div>
+              <span>同意</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="exmAndapproInfo"
+      style="padding: 20px 0"
+      v-if="complete && $route.query.approve"
+    >
+      <el-form
+        ref="form"
+        :rules="rules"
+        :model="form"
+        label-width="80px"
+      >
+        <el-form-item
+          label="审批操作"
+          prop="result"
+          :rules="[{ required: true, message: '请选择审批操作', trigger: 'blur' }]"
+        >
+          <el-radio-group
+            v-model="form.result"
+            @change="changeHarld"
+          >
+            <el-radio :label="1">通过</el-radio>
+            <el-radio :label="2">不通过</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          style="width: 50%"
+          label="审批意见"
+          prop="reason"
+          :rules="form.result == '2' ? [{ required: true, message: '请输入审批意见', trigger: 'blur' }] : []"
+        >
+          <el-input
+            type="textarea"
+            :rows="4"
+            maxlength="300"
+            show-word-limit
+            v-model="form.reason"
+            placeholder="请填写300字以内的审批意见"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="save">
+        <el-button @click="showSection = true; optType=1">转交</el-button>
+        <el-button
+          type="primary"
+          :disabled="loading"
+          @click="marking"
+        >批阅</el-button>
+        <!-- <el-button type="primary" @click="showSection = true; optType=2">询问</el-button> -->
+      </div>
+    </div>
+    <!-- 督办 -->
+    <div
+      class="exmAndapproInfo"
+      v-if="false"
+    >
+      <div class="supervise">
+        <span>督办说明：</span>
+        <el-input
+          type="textarea"
+          :rows="4"
+          maxlength="300"
+          show-word-limit
+          v-model="supervise"
+          placeholder="请输入督办说明，最多可输入300字"
+        ></el-input>
+      </div>
+      <div class="supervise-btn">
+        <el-button
+          type="primary"
+          @click="toUrge"
+        >督办</el-button>
+      </div>
+    </div>
+    <!-- 撤销 -->
+    <div
+      class="supervise-btn"
+      v-if="!$route.query.approve && false"
+    >
+      <el-button @click="revoke">撤销</el-button>
+    </div>
+    <MemberSelection
+      ref="selection"
+      v-if="showSection"
+      title="选择转交人"
+      isRadio
+      :directClose="false"
+      @close="showSection = false; deliverForm.deliverRemark = ''"
+      :formData="selectData"
+      @save="checkMenber"
+    >
+      <div class="remark">
+        <el-form
+          :model="deliverForm"
+          ref="deliver"
+          inline
+        >
+          <el-form-item
+            label="转交理由："
+            prop="deliverRemark"
+            :rules="[{ required: true, message: '请输入转交理由', trigger: 'change' }]"
+          >
+            <el-input
+              style="width:440px"
+              type="textarea"
+              :autosize="{ minRows: 2, maxRows: 4}"
+              v-model="deliverForm.deliverRemark"
+              placeholder="请输入转交理由"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </MemberSelection>
+  </div>
+</template>
+
+<script>
+import apiApprove from "@/api/ApiExAndapp";
+import { approvalAudit } from "@/api/apiAudit/apiAudit";
+import apiBudget from "@/api/apiBudget/apiBudget.js"; // 预算
+import { leaseRentInfoApprove } from "@/api/apiMachine/apiLease"; // 机械
+import apiEquipmentRental from "@/api/apiEquipmentRental"; // 设备
+import apiEmployeeRegularization from "@/api/apiEmployeeRegularization"; // 员工
+import { sealApprove } from "@/api/apiSealRecord"; // 印章
+import { carApplyApprove } from "@/api/apiCarRecord"; // 车辆
+import apiCheckingIn from "@/api/apiCheckingIn";
+import {
+  queryProcessList,
+  approverMakerAsPass,
+  approverMakerAsRefuse,
+  queryOptLog,
+  deliverProcess,
+  approvalOption,
+  updateProcessToNew,
+  getProcessDetail
+} from "@/api/apiProcess";
+import cookie from "@/storage/cookies";
+import MemberSelection from "./public/MemberSelection";
+import * as ProcessBuilder from "@/views/formBuilder/service/ProcessBuilder.js";
+export default {
+  name: "AuditDetail",
+  components: {
+    MemberSelection
+  },
+  data() {
+    return {
+      total: null,
+      activeName: "first",
+      form: {
+        no: "",
+        result: 1,
+        reason: ""
+      },
+      rules: {
+        resource: [
+          { required: true, message: "请选择审批操作", trigger: "change" }
+        ]
+      },
+      dataInfo: { no: "" },
+      dataContent: {},
+      flowData: [],
+      logData: [],
+      log: {
+        id: this.$route.params.id,
+        limit: 20,
+        page: 1
+      },
+      logoData: [],
+      auditType: 0,
+      processList: [],
+      supervise: "",
+      showSection: false,
+      selectData: {
+        roleList: [],
+        userList: []
+      },
+      optType: "1",
+      id: "",
+      applyId: "",
+      optData: [],
+      complete: true,
+      deliverForm: {
+        deliverRemark: ""
+      },
+      deliver: {},
+      loading: false,
+      root: null
+    };
+  },
+  props: {
+    auditData: {
+      type: Object
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  filters: {
+    leaseDataFn(val) {
+      console.log(val);
+      return val;
+    },
+    telEllipsis(val) {
+      return val;
+    },
+    formatReason(val) {
+      if (!val) return "";
+      const isHas = val.indexOf("|");
+      if (isHas > -1) {
+        const str = val.substring(isHas + 1)
+          ? " 转交原因：" + val.substring(isHas + 1)
+          : "";
+        return "转交给" + val.substring(0, isHas) + str;
+      } else {
+        return val;
+      }
+    }
+  },
+  watch: {
+    auditData(val) {
+      this.initData(val);
+    }
+  },
+  mounted() {
+    this.applyId = this.$route.query.applyId || "";
+    this.id = this.$route.query.auditId
+      ? this.$route.query.auditId
+      : this.$route.query.id;
+    // this.initData(this.auditData)
+    this.getProcessList();
+    this.getApprovalOpt();
+  },
+  methods: {
+    initData(val) {
+      if (val.auditRecord) {
+        this.dataInfo = val.auditDetail;
+        this.flowData = val.auditRecord;
+
+        /* 流程目前进行到哪一步日志显示到那一条 */
+        let ind = 0;
+        val.auditRecord.forEach((v, i) => {
+          if (ind < 1 && !v.audit_time) {
+            ind = i;
+          }
+        });
+        if (ind) {
+          this.logData = val.auditRecord.slice(0, ind);
+        } else {
+          this.logData = val.auditRecord;
+        }
+        this.form.no = val.auditDetail.no;
+        this.form.billNo = val.auditDetail.bill_no;
+
+        this.auditType = val.auditDetail.type;
+      }
+    },
+    // 分页
+    operationPageChange(page) {
+      this.log.page = page;
+      this.handleClick();
+    },
+    async handleClick() {
+      if (this.activeName == "second") {
+        const res = await apiApprove.postExAndapplog(this.log);
+        if (res.data.code == 200) {
+          this.logoData = res.data.data.records;
+          this.total = Number(res.data.data.total);
+        }
+        console.log(res);
+      }
+    },
+    save() {
+      this.$refs["form"].validate(async valid => {
+        if (valid) {
+          if (this.auditType === 2) {
+            var { data } = await apiEmployeeRegularization.employeeApprove(
+              this.form
+            );
+          } else if (this.auditType === 5) {
+            var { data } = await apiBudget.budgetApprove(this.form);
+          } else if (this.auditType === 6) {
+            var { data } = await leaseRentInfoApprove(this.form);
+          } else if (this.auditType === 7) {
+            var { data } = await apiEquipmentRental.rentInfoApprove(this.form);
+          } else if (this.auditType === "subcontract") {
+            alert(1);
+          } else {
+            // var {data} = await approvalAudit(this.form)
+            var token = cookie.cookieRead("token");
+            const params = {
+              resourceToken: token,
+              userNo: this.$store.state.user.no,
+              reason: this.form.reason,
+              result: this.form.result,
+              applyNo: this.form.billNo
+            };
+            var { data } = await apiCheckingIn.approvalAudit(params);
+          }
+          if (data.code === 200 || data.code === 0) {
+            const msg = data.msg || "操作成功";
+            this.$message({
+              showClose: true,
+              message: msg,
+              type: "success"
+            });
+            this.$removeTag("/");
+          } else if (data.state == "ok") {
+            const msg = data.data || "操作成功";
+            this.$message({
+              showClose: true,
+              message: msg,
+              type: "success"
+            });
+            this.$removeTag("/");
+          } else {
+            const msg = data.msg || "操作失败";
+            this.$message.error(data.msg);
+          }
+        }
+      });
+    },
+    changeHarld() {
+      this.$refs.form.clearValidate();
+    },
+    time(val) {
+      if (!val) {
+        return "";
+      }
+      var date = new Date(val);
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1; // js从0开始取
+      var date1 = date.getDate();
+      var hour = date.getHours();
+      var minutes = date.getMinutes();
+      var second = date.getSeconds();
+
+      if ((month + "").length === 1) {
+        month = "0" + month;
+      }
+      if ((date1 + "").length === 1) {
+        date1 = "0" + date1;
+      }
+      if ((hour + "").length === 1) {
+        hour = "0" + hour;
+      }
+      if ((minutes + "").length === 1) {
+        minutes = "0" + minutes;
+      }
+      if ((second + "").length === 1) {
+        second = "0" + second;
+      }
+      return year + "-" + month + "-" + date1 + " " + hour + ":" + minutes;
+      //  return year + '年' + month + '月' + date1 + '日' + hour + '时' + minutes + '分' + second + '秒'
+    },
+    async getProcessList() {
+      const res = await queryProcessList({ id: this.id });
+      let flg = true;
+      res.data.data.processList.forEach(item => {
+        item.isComplete = flg;
+        if (item.nodeId == res.data.data.nextNode) {
+          flg = false;
+        }
+      });
+      this.processList = res.data.data.processList;
+      this.deliver = res.data.data.deliver ? res.data.data.deliver : {};
+      if (res.data.data && res.data.data.processId) {
+        this.checkProcessList(res.data.data.processId);
+      }
+    },
+    // 审批转交
+    checkMenber(data) {
+      if (data.userList.length < 1) {
+        this.$message.error("请选择角色或成员");
+        return;
+      }
+      this.selectData.userList = data.userList;
+      if (this.optType == 1) {
+        this.$refs.deliver.validate(async valid => {
+          if (valid) {
+            const parse = {
+              deliverTo: this.selectData.userList[0].memberNo,
+              companyNo: this.user.cno,
+              source: this.user.no,
+              deliverName: this.selectData.userList[0].name,
+              id: this.id,
+              reason: this.deliverForm.deliverRemark
+            };
+            const res = await deliverProcess(parse);
+            if (res.data.state == "ok") {
+              // this.$refs.selection.handleClose()
+              this.showSection = false;
+              this.$message.success(res.data.msg ? res.data.msg : "操作成功");
+              this.$router.go(-1);
+            } else {
+              this.$message.error(
+                res.data.msg ? res.data.msg : "转交失败，请重试"
+              );
+            }
+          }
+        });
+      } else {
+      }
+    },
+    // 督办
+    toUrge() {},
+    // 撤销
+    revoke() {
+      this.$confirm(`撤销审批需审批人统计，确定要撤销吗？`, "撤销审批", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          // 撤销接口
+        })
+        .catch(() => {});
+    },
+    // 批阅
+    async marking() {
+      this.$refs["form"].validate(async valid => {
+        if (valid) {
+          this.loading = true;
+          let res;
+          // 走app接口的审批
+          const appType = [
+            "/leaveDetail",
+            "/evectionDetail",
+            "/reissueCardDetail"
+          ];
+          if (this.form.result == 1) {
+            if (appType.indexOf(this.$route.path) > -1) {
+              res = await approvalOption({
+                id: this.id,
+                reason: this.form.reason,
+                userId: this.$store.state.user.no,
+                companyId: this.$store.state.user.cno
+              });
+            } else {
+              res = await approverMakerAsPass({
+                id: this.id,
+                reason: this.form.reason,
+                userId: this.$store.state.user.no,
+                companyId: this.$store.state.user.cno
+              });
+            }
+          } else if (this.form.result == 2) {
+            res = await approverMakerAsRefuse({
+              id: this.id,
+              reason: this.form.reason,
+              userId: this.$store.state.user.no,
+              companyId: this.$store.state.user.cno
+            });
+          }
+          if (res.data.state == "ok") {
+            this.$message.success(res.data.msg);
+            // this.getApprovalOpt()
+            // this.getProcessList()
+            this.$removeTag("/");
+            this.complete = false;
+          } else {
+            this.loading = true;
+            this.$message.error(res.data.msg);
+          }
+        }
+      });
+    },
+    // 获取审批日志
+    async getApprovalOpt() {
+      const res = await queryOptLog({ id: this.id });
+      if (res.data.state == "ok") {
+        this.optData = res.data.data;
+      }
+    },
+    async checkProcessList(id) {
+      if (!id) return;
+      const res = await getProcessDetail({ id: id });
+      if (res.data.data && res.data.data._id && !res.data.data.gateWays) {
+        const processList = JSON.parse(res.data.data.content);
+        const isflg = this.dataTonewList(processList.nodeList);
+        const nodeList = ProcessBuilder.treeToListLocal(this.root.lists);
+        const gateWayList = [];
+        nodeList.forEach((node, index) => {
+          if (node.lists.length > 0 && node.item.type == "addCondition") {
+            for (let j = 0; j < node.lists.length; j++) {
+              const each = node.lists[j];
+              const gateWayItem = {
+                id: each.item.id,
+                type: "condition",
+                name: "条件分支" + each.item.id,
+                left: each.item.left,
+                top: each.item.top,
+                from: each.item.from,
+                gateWayKey: node.item.id,
+                to: each.item.to,
+                conditions: each.item.conditions,
+                ifNo: 10,
+                desc: each.item.desc,
+                isCondition: each.item.isCondition
+              };
+              gateWayList.push(gateWayItem);
+            }
+          }
+        });
+        const params = {
+          name: processList.name,
+          desc: "",
+          creator: processList.creator,
+          processId: res.data.data._id,
+          startId: "1",
+          endId: "5",
+          companyId: processList.companyId,
+          type: processList.type,
+          switchOn: processList.isFlg ? "1" : "0",
+          gateWayList: gateWayList,
+          nodeList: nodeList,
+          lineList: [],
+          version: res.data.data.rootNode.version
+        };
+        const data1 = { id: this.id + "", content: JSON.stringify(params) };
+        console.log(data1);
+        const resulte = await updateProcessToNew(data1);
+      }
+    },
+    dataTonewList(processList) {
+      this.root = new ProcessBuilder.Node(
+        ProcessBuilder.createItem(
+          "0",
+          "根节点",
+          "root",
+          "320px",
+          "20px",
+          "1",
+          "2"
+        )
+      );
+      let parent = this.root;
+      let currentId = 1;
+      let isflg = true;
+      while (parent.item.type != "end" && isflg) {
+        const currentNode = this.getCurrentNode(processList, currentId);
+        if (!currentNode) {
+          isflg = false;
+          break;
+        }
+        const node = new ProcessBuilder.Node(
+          ProcessBuilder.createItem(
+            currentNode.id,
+            currentNode.name,
+            currentNode.type,
+            currentNode.left,
+            currentNode.top,
+            currentNode.from,
+            currentNode.to
+          )
+        );
+        if (currentNode.type == "userTask") {
+          node.item = Object.assign(node.item, {
+            approverType: currentNode.approverType,
+            approvers: currentNode.approvers,
+            notifiers: currentNode.notifiers
+          });
+        }
+        if (currentNode.type == "condition") {
+          currentId = currentNode.to;
+          parent.item.to = currentNode.to;
+        } else {
+          parent.add(node);
+          currentId = currentNode.to;
+          parent = node;
+        }
+      }
+      return isflg;
+    },
+    getCurrentNode(list, id) {
+      const node = list.filter(item => item.id == id);
+      return node.length > 0 ? node[0] : null;
+    },
+    // 获取节点用户名称
+    getUserName(obj) {
+      const approvers = obj.approvers;
+      const deliver = this.deliver[obj.nodeId];
+      const user = approvers.map(item => item.userName).join(",");
+      const str =
+        deliver && deliver[0]
+          ? `${user}(已转交给${deliver[0].deliverName})`
+          : user;
+      return str;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.exam-add-edit .el-tabs__header {
+  margin: 0;
+}
+</style>
+<style scoped lang="scss" rel="stylesheet/scss">
+.box {
+  margin: 20px 0 0 20px;
+  .dw {
+    ul {
+      padding: 0 60px;
+      display: flex;
+      li {
+        flex: 1;
+        display: flex;
+        height: 100px;
+        min-width: 160px;
+        &:first-child {
+          flex: none;
+          width: 10px;
+          min-width: 10px;
+        }
+        .node {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          position: relative;
+          background-color: #0286df;
+          .node-info {
+            position: absolute;
+            top: 14px;
+            left: -70px;
+            width: 150px;
+            p {
+              margin: 4px 0;
+              text-align: center;
+              color: #666;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              &:nth-of-type(1) {
+                color: #333;
+              }
+            }
+          }
+        }
+        .line {
+          flex: 1;
+          height: 4px;
+          margin: 3px 0;
+          background-color: #0286df;
+        }
+      }
+      .no-approva {
+        .node {
+          background-color: #ccc;
+        }
+        .line {
+          background-color: #ccc;
+        }
+      }
+    }
+  }
+}
+.save {
+  text-align: center;
+}
+.exam-detail {
+  display: flex;
+  // border: 1px solid #e4e7ed;
+  border-top: 0;
+
+  .exmAndapproInfo {
+    .audit-log {
+      padding: 15px 20px 0 0;
+    }
+    .title {
+      margin: 0;
+      /*padding: 20px 0 20px 20px;*/
+      /*border-bottom: 1px solid #E4E7ED;*/
+      font-size: 16px;
+      color: #333333;
+      color: #0286df;
+      font-size: 18px;
+      border-bottom: 1px dashed #e4e7ed;
+      padding: 0 0 12px 10px;
+      position: relative;
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: "";
+        width: 3px;
+        height: 20px;
+        background-color: #409ee9;
+      }
+    }
+    .inquiry {
+      margin: 10px 0 10px 10px;
+      span {
+        font-size: 14px;
+        color: #666666;
+      }
+      div {
+        margin-top: 8px;
+      }
+    }
+    margin: 0;
+    font-size: 14px;
+    color: #666666;
+    padding: 20px 0 0 0;
+    span {
+      color: #333333;
+    }
+    .linbP {
+      font-size: 14px;
+      color: #666666;
+      span {
+        margin-left: 10px;
+        color: #333333;
+      }
+    }
+    .unpass {
+      color: #ff6600;
+    }
+    .pass {
+      color: #78c06e;
+    }
+  }
+  .detail-left {
+    flex: 1;
+    .exmAndapproInfo {
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+.supervise {
+  display: flex;
+  width: 50%;
+  margin-top: 26px;
+  & > span {
+    font-size: 14px;
+    color: #666;
+    display: block;
+    width: 80px;
+    margin-right: 10px;
+  }
+  /deep/ .el-input__count {
+    bottom: 5px !important;
+  }
+}
+.supervise-btn {
+  text-align: center;
+  margin-top: 20px;
+}
+.headTitle {
+  color: #000000;
+  padding-bottom: 20px;
+  /*padding: 20px 20px 0 20px;*/
+  div {
+    /*border-bottom: 1px solid #0286df;*/
+    /*padding-bottom: 30px;*/
+    span {
+      font-size: 16px;
+    }
+  }
+}
+.pad_10 {
+  padding: 0 10px;
+}
+.remark {
+  display: flex;
+  margin-top: 20px;
+  & > span {
+    padding-top: 6px;
+    width: 80px;
+  }
+}
+</style>