qgb-process 0.2.3 → 0.2.7

package/src/components/feiyCommon.vue

@@ -1,713 +1,713 @@
-<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'"
-                        >{{optData[0].approverName ? optData[0].approverName : '发起人'}}</p>
-                        <p
-                          v-else-if="item.nodeType == 'USER_EVENT'"
-                        >{{(item.approvers.map(item=>(item.userName))).join('，')}}</p>
-                        <p v-else></p>
-                      </div>
-                    </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>
-                </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"
-              ></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" @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
-} from "@/api/apiProcess";
-import cookie from "@/storage/cookies";
-import MemberSelection from "./public/MemberSelection";
-import apiEvection from "@/api/evection.js";
-import api from "@/api/apiProjectProcurement/apiProjectProcurement";
-export default {
-  name: "AuditDetail",
-  components: {
-    MemberSelection
-  },
-  data() {
-    return {
-      deliverForm: {
-        deliverRemark: ""
-      },
-      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
-    };
-  },
-  props: {
-    auditData: {
-      type: Object
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    }
-  },
-  filters: {
-    leaseDataFn(val) {
-      console.log(val);
-      return val;
-    },
-    telEllipsis(val) {
-      return val;
-    }
-  },
-  watch: {
-    auditData(val) {
-      this.initData(val);
-    }
-  },
-  mounted() {
-    this.id = this.$route.query.auditId
-      ? this.$route.query.auditId
-      : this.$route.query._id;
-    this.applyId = this.$route.query.applyId || "";
-    // 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 {
-            // 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;
-    },
-    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) {
-          let res;
-          if (this.form.result == 1) {
-            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") {
-            let reslove;
-            if (this.$route.query.approve == "comFeePlan") {
-              // 公司费用计划
-              reslove = await api.updateApproveStateById(this.id);
-            } else if (this.$route.query.approve == "comFeeApplication") {
-              // 公司费用申请
-              reslove = await api.squpdateApproveStateById(this.id);
-            } else if (this.$route.query.approve == "comFeeCredit") {
-              // 公司费用挂账
-              reslove = await api.gzupdateApproveStateById(this.id);
-            } else if (this.$route.query.approve == "comFeePay") {
-              // 公司费用支付
-              reslove = await api.zfupdateApproveStateById(this.id);
-            }
-            if (reslove.data.code == 200) {
-              this.$message.success(res.data.msg);
-              this.$removeTag("/");
-              this.complete = false;
-            } else {
-              this.$message.error(res.data.msg);
-            }
-          } else {
-            this.$message.error(res.data.msg);
-          }
-        }
-      });
-    },
-    // 获取审批日志
-    async getApprovalOpt() {
-      const res = await queryOptLog({ id: this.id });
-      console.log(res);
-      if (res.data.state == "ok") {
-        this.optData = res.data.data;
-      }
-    }
-  }
-};
-</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;
-}
-</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'"
+                        >{{optData[0].approverName ? optData[0].approverName : '发起人'}}</p>
+                        <p
+                          v-else-if="item.nodeType == 'USER_EVENT'"
+                        >{{(item.approvers.map(item=>(item.userName))).join('，')}}</p>
+                        <p v-else></p>
+                      </div>
+                    </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>
+                </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"
+              ></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" @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
+} from "@/api/apiProcess";
+import cookie from "@/storage/cookies";
+import MemberSelection from "./public/MemberSelection";
+import apiEvection from "@/api/evection.js";
+import api from "@/api/apiProjectProcurement/apiProjectProcurement";
+export default {
+  name: "AuditDetail",
+  components: {
+    MemberSelection
+  },
+  data() {
+    return {
+      deliverForm: {
+        deliverRemark: ""
+      },
+      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
+    };
+  },
+  props: {
+    auditData: {
+      type: Object
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  filters: {
+    leaseDataFn(val) {
+      console.log(val);
+      return val;
+    },
+    telEllipsis(val) {
+      return val;
+    }
+  },
+  watch: {
+    auditData(val) {
+      this.initData(val);
+    }
+  },
+  mounted() {
+    this.id = this.$route.query.auditId
+      ? this.$route.query.auditId
+      : this.$route.query._id;
+    this.applyId = this.$route.query.applyId || "";
+    // 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 {
+            // 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;
+    },
+    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) {
+          let res;
+          if (this.form.result == 1) {
+            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") {
+            let reslove;
+            if (this.$route.query.approve == "comFeePlan") {
+              // 公司费用计划
+              reslove = await api.updateApproveStateById(this.id);
+            } else if (this.$route.query.approve == "comFeeApplication") {
+              // 公司费用申请
+              reslove = await api.squpdateApproveStateById(this.id);
+            } else if (this.$route.query.approve == "comFeeCredit") {
+              // 公司费用挂账
+              reslove = await api.gzupdateApproveStateById(this.id);
+            } else if (this.$route.query.approve == "comFeePay") {
+              // 公司费用支付
+              reslove = await api.zfupdateApproveStateById(this.id);
+            }
+            if (reslove.data.code == 200) {
+              this.$message.success(res.data.msg);
+              this.$removeTag("/");
+              this.complete = false;
+            } else {
+              this.$message.error(res.data.msg);
+            }
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        }
+      });
+    },
+    // 获取审批日志
+    async getApprovalOpt() {
+      const res = await queryOptLog({ id: this.id });
+      console.log(res);
+      if (res.data.state == "ok") {
+        this.optData = res.data.data;
+      }
+    }
+  }
+};
+</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;
+}
+</style>