nsgk_mobile/src/views/lawEnforcement/programme/programmeApproval.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="审批历史"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main_box2">
      <van-row v-for="(item,index) in historyList" :key="index">
        <van-col :span="4">
          <p class="index">{{index+1}}</p>
          <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
            <p class="ssT" v-if="index>0"></p>
            <p class="yq"></p>
            <p class="ss" v-if="historyList.length != index+1"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell :title="item.activityName" center :to="{name:'programmeDetail'}">
            <template #label>
              <p>{{ item.endTime }}</p>
            </template>
            <template #default>
              <p style="color: #666666;">{{ item.assigneeName }}
                <span
                  class="bq"
                  :style="{
                        background:item.comment.substr(item.comment.length-2,2) == '申请' ? 'rgba(29,111,233,0.2)' : item.comment.substr(item.comment.length-2,2) == '同意' ? 'rgba(29,204,128,0.2)' :  item.comment.substr(item.comment.length-2,2) == '结束' ? 'rgba(255,166,62,0.2)' : item.comment.substr(item.comment.length-2,2) == '驳回' ? 'rgba(254,19,19,0.2)' : '',
                        color:item.comment.substr(item.comment.length-2,2) == '申请' ? '#1D6FE9' : item.comment.substr(item.comment.length-2,2) == '同意' ? '#1DCC80' :  item.comment.substr(item.comment.length-2,2) == '结束' ? '#FFA63E' : item.comment.substr(item.comment.length-2,2) == '驳回' ? '#FE1313' : ''
                      }"
                >{{ item.comment.substr(item.comment.length-2,2) }}</span>
              </p>
              <p style="color: #999999;">{{ item.durationInMillis }}</p>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import request from "@/utils/request";
  export default {
    name: "programmeDetail",
    data() {
      return {
        showBankType:false,
        showPayeeType:false,
        showPicker:false,
        form:{},

        bankType:'',
        payeeType:'',
        value:'',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 999,
          processInstanceId: null,
          activityName: null,
          assignee: null,
        },
        bankTypeOptions:[],
        payeeTypeOptions:[],
        historyList: [],
      };
    },
    created() {
      this.handleViewHistoryList()
    },
    methods: {
      handleViewHistoryList() {
        this.queryParams.processInstanceId = this.$route.query.id;
        this.getHistoryList();
      },
      getHistoryList: function () {
        this.loading = true;
        return request({
          url: "/activiti/process/listHistory",
          method: "post",
          data: this.queryParams,
        })
          .then((response) => {
            this.historyList = response.rows;
            this.historyList.forEach((row) => {
              row.startTime = this.format(row.startTime, "yyyy-MM-dd HH:mm:ss");
              row.endTime = this.format(row.endTime, "yyyy-MM-dd HH:mm:ss");
              row.durationInMillis = this.formatTotalDateSub(
                row.durationInMillis / 1000
              );
            });
            this.total = response.total;
            this.loading = false;
          })
          .then(() => {});
      },
      format(time, format) {
        var t = new Date(time);
        var tf = function (i) { return (i < 10 ? '0' : '') + i };
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
          switch (a) {
            case 'yyyy':
              return tf(t.getFullYear());
              break;
            case 'MM':
              return tf(t.getMonth() + 1);
              break;
            case 'mm':
              return tf(t.getMinutes());
              break;
            case 'dd':
              return tf(t.getDate());
              break;
            case 'HH':
              return tf(t.getHours());
              break;
            case 'ss':
              return tf(t.getSeconds());
              break;
          }
        })
      },
      /**
       * 计算出相差天数
       * @param secondSub
       */
      formatTotalDateSub (secondSub) {
        var days = Math.floor(secondSub / (24 * 3600));     // 计算出小时数
        var leave1 = secondSub % (24*3600) ;                // 计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / 3600);              // 计算相差分钟数
        var leave2 = leave1 % (3600);                       // 计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / 60);              // 计算相差秒数
        var leave3 = leave2 % 60;                           // 计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3);
        return days + "天" + hours + "时" + minutes + "分" + seconds + '秒';
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 2%;
  }
  .main_box2{
    width: 96%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 6PX;
    overflow: hidden;
    margin-top: 10PX;
    margin-bottom: 20PX;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    .van-col{
      height: 76PX;
      position: relative;
    }
    .van-row:nth-child(2n){
      background: rgba(29,111,233,0.1);
    }
    /deep/ .van-cell{
      background: transparent;
      padding: 10Px;
    }
    .bq{
      display: inline-block;
      padding: 4PX 8PX;
      border-radius: 5PX;
      font-size: 12Px;
    }
    .index{
      background: #1D6FE9;
      color: #ffffff;
      text-align: center;
      width: 20PX;
      height: 20PX;
      line-height: 20PX;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .indexCenter{
      top: 0!important;
    }
    .indexBorder{
      width: 10PX;
      position: absolute;
      right: 0;
      top: calc(50% - 5PX);
      .yq{
        height: 10PX;
        width: 10PX;
        background: #C9C9C9;
        border-radius: 50%;
      }
      .ss{
        height: 33PX;
        width: 2PX;
        background: #C9C9C9;
        position: relative;
        left: 4PX;
      }
      .ssT{
        height: 33PX;
        width: 2PX;
        background: #C9C9C9;
        position: relative;
        left: 4PX;
      }
    }
  }
</style>