nxdt-web/src/components/pro-tabs/bns-timeline-tabs.vue

<template>
  <div class="container">
     <div :class="{'content1': this.auditType === '审批信息' , 'content2': this.auditType !== '审批信息' }">
     <img src="@/assets/file/no_data.png" alt="暂无数据" v-if="!items" style="position: absolute;top: 30%;left: 43%">
     <div style="height: 90%" v-else>
       <el-timeline :reverse="reverse" >
         <el-timeline-item v-for="(item,index) in items"
                           :key="index" :timestamp="item.time" placement="top" :color="item.name === userName ? color : color1">
           <el-card style="border-radius: 15px">
             <span>审批部门：{{ item.section }}</span> <span style="margin-left: 50px;">审批人：{{ item.name }}</span>
             <p>审批时间： {{ item.time }}</p>
             <p>审批状态： {{ item.status }}</p>
             <p v-if="item.name.indexOf(userName) !=-1  && showType == 2  ">审批意见： <el-input v-model="reason" maxlength="200" show-word-limit placeholder="请输入审批意见" @change="changReason" style="width: 60%"></el-input></p>
             <p v-else>审批意见： {{ item.reason.replaceAll(/@@/g, ' ') }}</p>
             <p v-if="item.turnDownReason !== '' && showPosition === 2">驳回原因： {{ item.turnDownReason }}</p>
             <p v-else-if="item.turnDownReason !== '' && item.name !== userName ">驳回原因： {{ item.turnDownReason }}</p>

           </el-card>
         </el-timeline-item>
       </el-timeline>
       <div slot="footer" class="dialog-footer" v-show="btnShow" style="position: absolute;top: 94%;left: 80%;z-index: 999 !important;width: 250px;">
         <el-button type="warning" @click="finalInstanceBtn" v-if="finalCheck != '0'">终审</el-button>
         <el-button type="primary" @click="passBtn">通过</el-button>
         <el-button type="primary" plain  @click="turnDownBtn">驳回</el-button>
       </div>
     </div>
     <el-dialog title="驳回原因" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
       <el-form :model="form" ref="form" :rules="rules" label-width="80px">
         <el-form-item label="请输入驳回原因" label-width="120px" prop="turnDownReason">
           <el-input type="textarea" v-model="form.turnDownReason" :rows="6" maxlength="200" show-word-limit  placeholder="请输入驳回原因"></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" v-preventReClick="5000">确 定</el-button>
      </span>
     </el-dialog>
   </div>
    <div style="width: 38%;position: absolute;left: 65%;top: 0;height: 70vh;overflow: auto" v-if="this.auditType === '审批信息' && auditPersonArr.length > 0">
      <el-aside width="100%" style="background: transparent;margin-top: 2%;">
        <div style="display: flex;flex-direction: column;align-items: center">
          <div style="border-radius: 10px;padding: 15px;border: 1.5px solid black;width: 50%;text-align: center;font-weight: bold">
            开始
          </div>
          <div class="arrow-container">
            <div class="line"></div>
            <div class="arrow-down"></div>
          </div>

          <div v-for="(item,index) in auditPersonArr" :key="index" style="width: 100%;display: flex;flex-direction: column;align-items: center;">
            <div :class="{'highlight': index < currentCheckIndex, 'normal': index > currentCheckIndex,'currentLight': index === currentCheckIndex }">
              {{ item.checkPerson }} ( {{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})<span style="margin-left: 15px;font-size: 20px;font-weight: bold"> {{index < currentCheckIndex ? '√' : (currentCheckIndex === index ? '?' : '') }}</span>
            </div>

            <div class="arrow-container">
              <div class="line"></div>
              <div class="arrow-down"></div>
            </div>
          </div>
          <div style="border-radius: 10px;padding: 15px;border: 1.5px solid black;width: 50%;text-align: center;font-weight: bold">
            结束
          </div>

        </div>


      </el-aside>
    </div>
  </div>

</template>
<script>

import { getAuditPerson } from '@/api/pro/approval_cons'
import store from '@/store'

export default {
  props: {
    auditReason: {
      type: Array,
      default: []
    },
    showType: Number,// 1 展示审批意见 2 展示填写按钮
    isExamine: false,// 是否为审批页面  true 是 展示审核按钮 false 否
    btnShow: false,// 是否审核按钮
    finalCheck: String,
    ids: Object,  // {proId: '', consId: '', subId: '', supId: '', personId: ''}等等    目前暂定
    auditType:{
     type: String,
      default: '审批信息'
    },// 审批类型 企业资质，安全协议书，四措两案等
    items: {
      type: Array,
      default: [
        {
          section: '',
          name: '',
          time: '',
          status: '',
          reason: '',
          turnDownReason: '',
        }
      ]
    },
    showPosition: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    store() {
      return store
    },
    isUserIncluded(index) {
      console.log("index=========",index)
      if (this.auditPersonArr[index].checkPerson.includes(this.userName)) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    items: {
      handler: function (val) {
        console.log("=----------------",val)
      },
      deep: true
    }
  },
  data() {
    return {
      currentCheckIndex: 0,
      auditPersonArr:[],
      taskId : '',
      reason:'',
      dialogVisible: false,
      height: this.$props.auditType ? 600 : 750,
      form: {
        turnDownReason: ''
      },
      rules:{
        turnDownReason: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' }
        ]
      },
      reverse: false,
      color: '#0bbd87',
      color1: '#ededed',
      userName: this.$store.state.user.userData.nickName,
      code:1,
      num:0,
      assignNum:0
    }
  },
  mounted() {
    this.assign()
  },
  methods: {
    assign() {
      console.log("111auditType==="+this.auditType)
      if (this.assignNum > 5){
        return
      }
      if (this.auditType === '审批信息' ||this.auditRecordType === '全部'){
        if (this.taskId){
          this.getAuditPerson()
        }else{
          if (this.$props.items && this.$props.items.length > 0) {
            this.taskId = this.$props.items[0].taskId
          }
          setTimeout(() => {
            this.assignNum++
            this.assign()
          }, 500)
        }
        this.num++
      }
    },
    getAuditPerson() {
      getAuditPerson({taskId: this.taskId}).then(res => {
        if (res.code === 200) {
          this.auditPersonArr = res.data
          //获取isActive为1的下标
          this.currentCheckIndex = this.auditPersonArr.findIndex(item => item.isActive == '1')
          if (this.auditPersonArr[0].isActive == '10'){
            this.currentCheckIndex = this.auditPersonArr.length
          }
          console.log("this.auditPersonArr.==="+JSON.stringify(this.auditPersonArr))
          console.log("this.currentCheckIndex==="+this.currentCheckIndex)
        }
      })
    },
    changReason(e) {
      console.log("222auditType==="+this.auditType)
      this.$emit('reason', { reason: e, auditType: this.auditType })
    },
    //终审
    finalInstanceBtn() {
      this.$emit('finalInstance', this.reason)
    },
    //通过
    passBtn() {
      if (this.reason === '') {
       this.reason = '@@'
      }
      this.$emit('pass', this.reason)
    },
    //驳回
    turnDownBtn() {
      console.log("333auditType==="+JSON.stringify(this.auditReason))
      console.log("333auditType==="+this.auditReason.toString())
      let reason = ''
      if (this.auditReason && this.auditReason.length > 0){
        this.auditReason.forEach(item => {
          if (item.reason === '' || item.reason === null || item.reason === undefined){
          }else{
            reason += item.reason + "；"
          }
        })
        reason = reason.substring(0, reason.length - 1)
      }else{
        reason = this.reason
      }
      this.form.turnDownReason =reason
      this.dialogVisible = true
    },
    submitForm(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          if (this.reason === '') {
            this.reason = '@@'
          }
          this.$emit('turnDown',{"rejectReason":this.form.turnDownReason,"reason":this.reason})
        } else {
          return false;
        }
      });
    },
    addReason(){
      this.dialogVisible = true
    }

  }

}
</script>
<style scoped>
.container{
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}
.arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.line {
  width: 2px;
  height: 40px;
  background-color: black;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid black;
}

.highlight {
  /* Add any specific styles for the highlighted state */
  padding: 8px;border: 1px solid green;width: 50%;text-align: center;height: 50px;font-size: 14px;margin-top: 2px;border-radius: 5px;
  background: #35c50c;
}
.currentLight {
  /* Add any specific styles for the highlighted state */
  padding: 8px;border: 1px solid green;width: 50%;text-align: center;height: 50px;font-size: 14px;margin-top: 2px;border-radius: 5px;
  background: #e6f511;
}
.normal {
  /* Add any specific styles for the normal state */
  padding: 8px;border: 1px solid black;width: 50%;text-align: center;height: 50px;font-size: 14px;margin-top: 2px;border-radius: 5px;

}
.content1 {
  /* Add any specific styles for the highlighted state */
  width: 70%;overflow-y: auto;height: 700px
}
.content2 {
  /* Add any specific styles for the highlighted state */
  width: 100%;overflow-y: auto;
}
</style>