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_box">
      <van-row>
        <van-col :span="4">
          <p class="index">1</p>
          <div class="indexBorder">
            <p class="yq"></p>
            <p class="ss"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell title="开始" :value="22222" center :to="{name:'programmeDetail'}">
            <template #label>
              <p>2021.10.01-2021.10.02</p>
            </template>
            <template #default>
              <p style="color: #666666;">李维嘉 <span class="bq" style="background:rgba(29,111,233,0.2);color:#1D6FE9">提交申请</span></p>
              <p style="color: #999999;">1天0时0分0秒</p>
            </template>
          </van-cell>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="4">
          <p class="index">2</p>
          <div class="indexBorder indexCenter">
            <p class="ssT"></p>
            <p class="yq"></p>
            <p class="ss"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell title="执法队长审批" :value="22222" center :to="{name:'programmeDetail'}">
            <template #label>
              <p>2021.10.01-2021.10.02</p>
            </template>
            <template #default>
              <p style="color: #666666;">李维嘉 <span class="bq" style="background:rgba(29,204,128,0.2);color:#1DCC80">同意</span></p>
              <p style="color: #999999;">1天0时0分0秒</p>
            </template>
          </van-cell>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="4">
          <p class="index">3</p>
          <div class="indexBorder indexCenter">
            <p class="ssT"></p>
            <p class="yq"></p>
            <p class="ss"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell title="执法队长负责人审批" :value="22222" center :to="{name:'programmeDetail'}">
            <template #label>
              <p>2021.10.01-2021.10.02</p>
            </template>
            <template #default>
              <p style="color: #666666;">李维嘉 <span class="bq" style="background:rgba(29,204,128,0.2);color:#1DCC80">同意</span></p>
              <p style="color: #999999;">1天0时0分0秒</p>
            </template>
          </van-cell>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="4">
          <p class="index">4</p>
          <div class="indexBorder indexCenter">
            <p class="ssT"></p>
            <p class="yq"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell title="结束" :value="22222" center :to="{name:'programmeDetail'}">
            <template #label>
              <p>2021.10.01-2021.10.02</p>
            </template>
            <template #default>
              <p style="color: #666666;">李维嘉 <span class="bq" style="background:rgba(255,166,62,0.2);color:#FFA63E">自动结束</span></p>
              <p style="color: #999999;">1天0时0分0秒</p>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "programmeDetail",
    data() {
      return {
        showBankType:false,
        showPayeeType:false,
        showPicker:false,
        form:{},

        bankType:'',
        payeeType:'',
        value:'',

        bankTypeOptions:[],
        payeeTypeOptions:[],
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(2021, 0, 17),
      };
    },
    created() {

    },
    methods: {
      getDictionaries(){
        getPayee(this.$route.query.id).then((response) => {
          this.houseGetDicts("bank_type").then((res) => {
            for(var i = 0 ; i < res.data.length ; i++){
              this.bankTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
            }
            this.bankType = this.selectDictLabel(res.data, response.data.bankType);
          });
          this.houseGetDicts("payee_type").then((res) => {
            for(var i = 0 ; i < res.data.length ; i++){
              this.payeeTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
            }
            this.payeeType = this.selectDictLabel(res.data, response.data.payeeType);
          });
          this.form = response.data;
        });
      },
      onConfirmBankType(data){
        this.bankType = data.text;
        this.form.bankType = data.value;
        this.showBankType = false;
      },
      onConfirmPayeeType(data){
        this.payeeType = data.text;
        this.form.payeeType = data.value;
        this.showPayeeType = false;
      },
      goAdd(){
        console.log(this.form)
        updatePayee(this.form).then(response => {
          this.$toast.success('修改成功');
          setTimeout(function(){
            history.go(-1)
          },2000)
        });
      },
      goBack(){
        window.history.go(-1)
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 2%;
  }
  .main_box{
    background: #ffffff;
    border-radius: 8PX;
    overflow: hidden;
    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;
    }
    .bq{
      display: inline-block;
      padding: 4PX 10PX;
      border-radius: 5PX;
    }
    .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>