uniDataCenter/pages/index/planList.vue

<template>
  <view>
    <view class="plan_box">
      <view class="splitLine"></view>
      <view class="bigTitle flex">
        本周直播计划
        <view class="lMarauto">
          <text class="planWeekCss" v-for="p in planWeek" :key="p.id" :class="acweekIdx == p.id ? 'c-446EF6 fWeight600' : ''" @click="switchWeek(p)">{{p.name}}</text>
        </view>
      </view>
      <view class="f26">
        <view v-if="plandataList&&plandataList.length>0">
          <view class="flex dayItem" v-for="(p,pidx) in plandataList" :key="pidx">
            <view class="dayItem_date">{{p.date}}({{p.week_alias}})</view>
            <view class="flex1">
              <view v-for="(acc,accidx) in p.account_list" :key="accidx" class="flex accItem" :class="accidx == p.account_list.length - 1 ? '' : 'accItem_border'">
                <view class="accItem_info">
                  <img class="accImg" :src="acc.account_head" alt="">
                  <text>{{acc.account_name}}</text>
                </view>
                <view class="flex1 text-center" style="padding: 20rpx 0">
                  <view v-for="(ti,tiIdx) in acc.time_list" :key="tiIdx" class="timeItem">{{ti.start_time}} - {{ti.end_time}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <no-data v-else></no-data>
      </view>
    </view>
    <view class="examine_box">
      <view class="splitLine"></view>
      <view class="bigTitle">报销审批情况</view>
      <!-- 审核  别人的报销单  -->
      <view>
        <swiper v-if="baoxiaoList&&baoxiaoList.length>0" class="swiper" :indicator-dots="true" indicator-color="rgba(181, 181, 181, 1)" indicator-active-color="rgba(66, 148, 235, 1)">
          <view v-for="b in baoxiaoList" :key="b.id">
            <swiper-item>
              <view class="unit_pad">
                <view class="smallTitle">{{b.submit_date?b.submit_date:'-'}}报销</view>
                <view v-for="b_info in b.examine_info" :key="b_info.node_idx" class="flex f28 tMar30">
                  <view class="iconfont icon-shenpi_icon"></view>
                  <view>{{b_info.node_idx == 1 ? '一' : (b_info.node_idx == 2 ? '二' : b_info.node_idx == 3 ? '三' : '')}}级审核</view>
                  (<view v-for="(shenName,shenNameidx) in b_info.executors" :key="shenNameidx">{{shenName}} &nbsp;</view>)
                  <view class="lMarauto" :style="[{color : b_info.execute_info.status == 2 ? '#446EF6' : '#B8B8B8'},{fontWeight:b_info.execute_info.status == 2 ? 600 : ''}]">
                    {{b_info.execute_info.status == 1 ? '待审核' :
                      (b_info.execute_info.status == 2 ? '已通过' :
                          (b_info.execute_info.status == 3 ? '驳回' :
                              (b_info.execute_info.status == 0 ? '保存' :
                                  '异常')))}}
                  </view>
                </view>
              </view>
            </swiper-item>
          </view>
        </swiper>
        <no-data v-else></no-data>
      </view>

      <!-- 自己提交的未报销的报销单  -->
      <view v-if="shenhewei&&shenhewei.length>0">
        <view class="splitLine"></view>
        <swiper class="swiper" :indicator-dots="true" indicator-color="rgba(181, 181, 181, 1)" indicator-active-color="rgba(66, 148, 235, 1)">
          <view v-for="(b,index) in shenhewei" :key="index+'b'+b.id">
            <swiper-item>
              <view class="unit_pad">
                <view class="smallTitle">{{b.staff_name?b.staff_name:'-'}}的报销</view>
                <view v-for="b_info in b.examine_detail" :key="b_info.node_idx" class="flex f28 tMar30">
                  <view class="iconfont icon-shenpi_icon"></view>
                  <view>{{b_info.node_idx == 1 ? '一' : (b_info.node_idx == 2 ? '二' : b_info.node_idx == 3 ? '三' : '')}}级审核</view>
                  (<view>{{b_info.executors}}</view>)
                  <view class="lMarauto shenheNow" @click="auditEvent(index)" v-if="b_info.support_opt == 1">立即审核</view>
                  <view class="lMarauto" :style="{color : b_info.status == 2 ? '#589C54' : '#B8B8B8'}" v-if="b_info.support_opt == 0">
                    {{b_info.status == 1 ? '待审核' :
                      (b_info.status == 2 ? '已通过' :
                          (b_info.status == 3 ? '驳回' :
                              (b_info.status == 0 ? '保存' :
                                  '异常')))}}
                  </view>
                </view>
              </view>
            </swiper-item>
          </view>
        </swiper>
      </view>

    </view>
  </view>

</template>
<script>
export default {
  data(){
    return{
      plandataList: [],
      acweekIdx: 0,
      planWeek: [
        {
          id: 0,
          name: '本周',
          st_time: this.getTime(0),
          en_time: this.getTime(-6)
        },
        {
          id: 1,
          name: '上一周',
          st_time: this.getTime(7),
          en_time: this.getTime(1)
        },
        {
          id: 2,
          name: '下一周',
          st_time: this.getTime(-7),
          en_time: this.getTime(-13)
        }
      ],
      shenhewei: [],
      baoxiaoList: [],
    }
  },
  methods:{
    auditEvent (index) {
      let info = this.shenhewei[index]
      uni.navigateTo({
        url: '../reimbursementList/submitApply?p_id=' + info.p_id + '&apply_id=' + info.s_id + '&source=audit'
      })
    },
    init_uType_equal4_1(){
      // this.get_auditList()//审核别人的报销单列表,未审核
      // this.get_personalSubmitList() //个人提交的报销单
      // this.get_planList(this.planWeek[0].st_time, this.planWeek[0].en_time) //直播计划
      let pro1 = new Promise((resolve, reject)=>{
        this.get_auditList(()=>{
          resolve()
        })
      })
      let pro2 = new Promise((resolve, reject)=>{
        this.get_personalSubmitList(()=>{
          resolve()
        })
      })
      let pro3 = new Promise((resolve, reject)=>{
        this.get_planList(()=>{
          resolve()
        })
      })
      Promise.all([pro1,pro2,pro3]).then(()=>{
        this.$hide_init_loading()
        uni.stopPullDownRefresh()
        this.$emit('planTimerEdit',
            setTimeout(()=>{
              this.init_uType_equal4_1()
            },10*1000)
        )
      })
    },
    switchWeek (p) {
      this.acweekIdx = p.id
      this.get_planList('', p.st_time, p.en_time)
    },
    getTime (n) {
      // 0表示本周第一天  -6表示本周最后一天
      var now = new Date();
      var year = now.getFullYear();
      //因为月份是从0开始的,所以获取这个月的月份数要加1才行
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var day = now.getDay();
      //判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
      if (day !== 0) {
        n = n + (day - 1);
      } else {
        n = n + day;
      }
      if (day) {
        //这个判断是为了解决跨年的问题
        if (month > 1) {
          month = month;
        }
        //这个判断是为了解决跨年的问题,月份是从0开始的
        else {
          year = year - 1;
          month = 12;
        }
      }
      now.setDate(now.getDate() - n);
      year = now.getFullYear();
      month = now.getMonth() + 1;
      date = now.getDate();
      var s = year + "-" + (month < 10 ? ('0' + month) : month) + "-" + (date < 10 ? ('0' + date) : date);
      return s;
    },
    get_planList (cb, st, nt) {
      this.$req(this.$api.planListIndex, 'get', {
        start_date: st,
        end_date: nt
      }, (res) => {
        cb ? cb() : ''
        if (res && res.errno == 0) {
          this.plandataList = res.rst
        }
      }, (err)=>{
        cb ? cb() : ''
      })
    },
    get_personalSubmitList (cb) {
      this.$req(this.$api.personalSubmitList, 'get', {}, (res) => {
        cb ? cb() : ''
        if (res && res.errno == 0) {
          this.baoxiaoList = res.rst
        }
      },(err)=>{
        cb ? cb() : ''
      })
    },
    get_auditList (cb) {
      this.$req(this.$api.auditList, 'get', {
        is_examine: 0,
        show_detail: 1,
        page: 1,
        page_size: 6
      }, (res) => {
        cb ? cb() : ''
        if (res && res.errno == 0) {
          this.shenhewei = res.rst.data
        }
      },(err)=>{
        cb ? cb() : ''
      })
    },
  }
}

</script>
<style scoped lang="scss">
.plan_box {
  background: #373E4E;
  .planWeekCss {
    font-size: 26rpx;
    color: #b8b8b8;
    margin-left: 14rpx;
  }
  .dayItem {
    //padding: 20rpx 0;
    border-bottom: 1px solid #585c69;
    .flex1 {
      flex: 1;
      border-left: 1px solid #585c69;
    }
    .dayItem_date {
      width: 27%;
      text-align: center;
    }
    .accItem {
      .accItem_info {
        width: 60%;
        display: flex;
        align-items: center;
        padding: 20rpx;
        .accImg {
          width: 48rpx;
          height: 48rpx;
          margin-right: 10rpx;
          border-radius: 50%;
        }
      }
      .timeItem {
        margin: 8rpx 0;
      }
    }
    .accItem_border {
      border-bottom: 1px solid #585c69;
    }
  }
}
.examine_box {
  background: #373E4E;
  .swiper {
    min-height: 160rpx;
    height: 340rpx;
    .unit_pad {
      padding: 20rpx 32rpx;
    }
  }
  .shenheNow {
    background: #2e67ff;
    border-radius: 6rpx;
    padding: 4rpx 12rpx;
  }
  .icon-shenpi_icon {
    color: #828282;
    font-size: 30rpx;
    margin-right: 10rpx;
  }
}
.splitLine {
  height: 16rpx;
  background-color: #262C38;
}
.bigTitle {
  font-size: 32rpx;
  border-bottom: 2rpx solid #585c69;
  padding: 20rpx 32rpx;
  font-weight: 600;
  background: url("../../static/colorImg/bigTitleImg.png") no-repeat;
  background-size: 7%;
  background-position: 20rpx 10rpx;
}
</style>