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>审批状态： {{ auditingType(item) }}</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="styleByType(item, index)">
              {{ item.checkPerson }} (
              {{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
              <span style="margin-left: 15px; font-size: 20px; font-weight: bold">
                <!-- {{ index < currentCheckIndex && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }} -->
                {{ iconByType(item, index) }}
              </span>
            </div>
            <!-- <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 && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }}
              </span>
            </div> -->

            <!-- <div :class="styleByType(item)">
              {{ item.name }} ( {{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
              <span style="margin-left: 15px; font-size: 20px; font-weight: bold">
                {{ index < currentCheckIndex && item.isResult ? '√' : 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,
    },

    // 审批信息
    opinionValueOther: {
      type: String,
      default: () => '',
    },
  },
  computed: {
    store() {
      return store
    },
    isUserIncluded(index) {
      console.log('index=========', index)
      if (this.auditPersonArr[index].checkPerson.includes(this.userName)) {
        return true
      } else {
        return false
      }
    },
    // 根据审核状态以及审核结果添加样式
    styleByType() {
      return (item, index) => {
        if (this.items[index].status == '审核通过') return 'highlight'
        if (this.items[index].status == '审核驳回') return 'rejectHighlight'
        if (item.isActive != 1) return 'normal'
        if (item.isActive == 1) return 'currentLight'
      }
    },
    // 根据审核状态以及审核结果添加符号
    iconByType() {
      return (item, index) => {
        if (this.items[index].status == '审核通过') return '√'
        if (this.items[index].status == '审核驳回') return 'X'
        if (this.items[index].status == '撤回' || (this.items[index].status == '' && item.isActive != 1)) return ''
        if (this.items[index].status == '' && item.isActive == 1) return '?'
      }
    },
  },
  watch: {
    items: {
      handler: function (val) {
        console.log('=----------------', val)
      },
      deep: true,
    },

    opinionValueOther: {
      handler(newValue) {
        if (newValue && this.isExamine) {
          this.reason = newValue
        }
      },
      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
          console.log('this.auditPersonArr审核流程', this.auditPersonArr)
          //获取isActive为1的下标
          this.currentCheckIndex = this.auditPersonArr.findIndex(item => item.isActive == '1')

          if (this.auditPersonArr[0].isActive == '10') {
            this.currentCheckIndex = this.auditPersonArr.length
          }

          this.auditPersonArr.forEach(e => {
            if (e.isActive == 10) {
              e.isResult = true
            } else {
              e.isResult = false
            }
          })
          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
    },

    // 审批状态
    auditingType(item) {
      if (item.status === '未审核' || item.status == '') return '未审核'
      if (item.status === '已审核' && (item.agree == 1 || item.agree == 3)) return '审核通过'
      if (item.status === '已审核' && item.agree == 2) return '审核驳回'
      if (item.status === '已审核' && (item.agree == 4 || item.agree == null)) return '撤回'
    },
  },
}
</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;
}
.rejectHighlight {
  /* 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: #f56c6c;
}
.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>