storevisit-ui-mobile/src/views/week/myHistoricalDaily.vue

<template>
  <div class="bgcolor">
    <!--顶部导航-->
    <van-nav-bar
        class="navBar"
        title="我的历史汇报"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="contentpd16">
      <van-row gutter="20">
        <van-col span="12">
          <van-cell :title="searchForm.startTime" is-link @click="StartTimeClick">
            <template #right-icon>
              <van-icon :name="timeico" class="search-icon"/>
            </template>
          </van-cell>
        </van-col>
        <van-col span="12">
          <van-cell :title="searchForm.endTime" is-link @click="EndTimeClick">
            <template #right-icon>
              <van-icon :name="timeico" class="search-icon"/>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>
    <!--切换tab-->
    <van-tabs v-model="searchForm.status" color="#0057ba" @change="tabChange"  class="tabBR1">
      <van-tab  name="2"   :disabled="disabled">  <template #title><span  class="tabBR">退回待处理</span> </template></van-tab>
      <van-tab  name="1"  :disabled="disabled"> <template #title><span  class="tabBR">待审批</span> </template></van-tab>
      <van-tab name="3"   :disabled="disabled"><template #title><span  class="tabBR">已审批</span> </template></van-tab>
      <van-tab name="-1"  :disabled="disabled"><template #title><span  >过期未汇报</span> </template></van-tab>
    </van-tabs>
    <!--内容-->

    <br>
    <div class="container">
      <van-list v-model="loading" :finished="finished" finished-text="--已经到底了--" @load="onLoad">
      <div class="cellcontent brud listTime" v-for="(item,index) in list" :key="index" style="margin-top:0">
        <van-cell>
          <div class="cardtext" @click="dailyFn(item)">
            <div class="timeTitle" v-if="item.reportType==1&&item.status<3">
              <p class="textLeft" v-if="item.status==-1">创建时间:{{dateFn(item.date)}}</p>
              <p class="textLeft" v-if="item.status==1">提交时间:{{item.commitTime}}</p>
              <p class="textLeft" v-if="item.status==2">提交时间:{{item.commitTime}}</p>
              <p class="textRight"  v-if="item.status==1">待审批</p>
              <p class="textRight" v-if="item.status==2">退回待处理</p>
              <p class="textRight"  v-if="item.status==-1">未汇报</p>
            </div>
            <div class="timeTitle" v-if="item.reportType==2&&item.status<3">
              <p class="textLeft" v-if="item.status==-1">创建时间:{{dateFn(item.date)}}</p>
              <p class="textLeft" v-if="item.status==1">提交时间:{{item.commitTime}}</p>
              <p class="textLeft" v-if="item.status==2">提交时间:{{item.commitTime}}</p>
              <p class="textRight"  v-if="item.status==1">待审批</p>
              <p class="textRight" v-if="item.status==2">退回待处理</p>
              <p class="textRight"  v-if="item.status==-1">未汇报</p>
            </div>
            <div class="timeTitle" v-if="item.reportType>2&&item.status<3">
              <p class="textLeft" v-if="item.status==-1">创建时间:{{dateFn(item.date)}}</p>
              <p class="textLeft" v-if="item.status==1">提交时间:{{item.commitTime}}</p>
              <p class="textLeft" v-if="item.status==2">提交时间:{{item.commitTime}}</p>
              <p class="textRight" v-if="item.status==1">待审批</p>
              <p class="textRight"  v-if="item.status==2">退回待处理</p>
              <p class="textRight"  v-if="item.status==-1">未汇报</p>
            </div>
            <div class="timeTitle" v-if="item.reportType==1&&item.status==3">
              <p class="textLeft">审批时间:{{item.approvalTime}}</p>
              <p class="textRight">
                <van-rate
                    v-model="item.number"
                    :size="18"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    readonly
                />
              </p>
            </div>
            <div class="timeTitle" v-if="item.reportType==2&&item.status==3">
              <p class="textLeft">审批时间:{{item.approvalTime}}</p>
              <p class="textRight">
                <van-rate v-model="item.number" :size="18" color="#ffd21e" void-icon="star" void-color="#eee"/>
              </p>
            </div>
            <div class="timeTitle" v-if="item.reportType>2&&item.status==3">
              <p class="textLeft">审批时间:{{item.approvalTime}}</p>
              <p class="textRight">
                <van-rate v-model="item.number" :size="18" color="#ffd21e" void-icon="star" void-color="#eee"/>
              </p>
            </div>
          </div>
        </van-cell>
        <div class="lineGrey"></div>
      </div>
      <van-empty  v-if="list.length==0"/>
      <br>
      </van-list>
    </div>
    <van-popup v-model="StartTimeShow" capture position="bottom">
      <van-datetime-picker
          v-model="strtcurrentDate"
          type="date"
          title="选择查找开始时间"
          :min-date="strtminDate"
          :max-date="strtmaxDate"
          @confirm="onStartTimeConfirm"
          @cancel="StartTimeShow = false"
      />
    </van-popup>
    <van-popup v-model="EndTimeShow" capture position="bottom">
      <van-datetime-picker
          v-model="endcurrentDate"
          type="date"
          title="选择查找结束时间"
          :min-date="endminDate"
          :max-date="endmaxDate"
          @confirm="onEndTimeConfirm"
          @cancel="EndTimeShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import timeico from "@/assets/Icon/datatims.png";
import {queryHistoryList} from "@/api/index";

export default {
  name: "MyHistoricalWeekly",
  data() {
    return {
      timeico:timeico,
      searchForm: {
        startTime:"2022-07-04", // 开始时间，String类型 yyyy-MM-dd格式 必传
        endTime:"2022-07-04", //结束时间，String类型 yyyy-MM-dd格式 必传
        pageNum:1,//当前页码
        status:"2",
        pageSize:10 // 每页条数
      },
      list:[],
      loading: false,
      finished: false,
      StartTimeShow: false,
      EndTimeShow: false,
      PhotoTypeList: [{text: "009", value: "09"}],
      strtminDate: new Date(2022, 0, 1),
      endminDate: new Date(2022, 0, 1),
      strtmaxDate: new Date(),
      endmaxDate: new Date(),
      strtcurrentDate: new Date(),
      endcurrentDate: new Date(),
      disabled:false,
   }
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem("powerGrade")
      if(to.path=="/myHistoricalDaily"&&from.path=="/dailyDetails"){
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/weeklyApprovalDetils"){
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/doubleWeeklyDetils"){
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/doubleWeekly"){
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/daily"){
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/My/index"){
        var nowDate = new Date();
        nowDate.setDate(nowDate.getDate() -30);
        this.strtcurrentDate=new Date(nowDate)
        this.endminDate=new Date(nowDate)
        this.searchForm.startTime =this.parseTime(new Date(nowDate) , '{y}-{m}-{d}')
        this.searchForm.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + ""
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/home"){
        this.searchForm.pageNum=1;
        this.list=[];
        this.getList()
      }
      if(to.path=="/myHistoricalDaily"&&from.path=="/weekly"){
        this.list=[];
        this.searchForm.pageNum=1;
        this.getList()
      }
    }
  },
  created() {
    var nowDate = new Date();
    nowDate.setDate(nowDate.getDate() -30);
    this.strtcurrentDate=new Date(nowDate)
    this.endminDate=new Date(nowDate)
    this.searchForm.startTime =this.parseTime(new Date(nowDate) , '{y}-{m}-{d}')
    this.searchForm.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + ""
  },
  methods: {
    dateFn(val){
      return val.slice(0,4)+"-"+val.slice(4,6)+"-"+val.slice(6,8)
    },
    onLoad(){
      this.getList()
    },
    tabChange() {
      this.disabled = true;
      this.list=[];
      this.searchForm.pageNum=1;
      this.getList()
    },
    SalesRegionClick() {
      this.SalesRegionShow = true;
    },
    SalesDepartmentClick() {
      this.SalesDepartmentShow = true;
    },
    StaffClick() {
      this.StaffShow = true;
    },
    StartTimeClick() {
      this.StartTimeShow = true;
    },
    EndTimeClick() {
      this.EndTimeShow = true;
    },
    onregionConfirm() {
      this.RegionShow = false;
    },
    onSalesRegionConfirm() {
      this.SalesRegionShow = false;
    },
    onSalesDepartmentConfirm() {
      this.SalesDepartmentShow = false;
    },
    onStaffConfirm() {
      this.StaffShow = false;
    },
    onStartTimeConfirm(val) {
      this.searchForm.startTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + ""
      this.StartTimeShow = false;
      this.endminDate = new Date(val)
      this.list=[];
      this.searchForm.pageNum=1;
      this.getList()
    },
    onEndTimeConfirm(val) {
      this.searchForm.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + ""
      this.EndTimeShow = false;
      this.strtmaxDate = new Date(val)
      this.list=[];
      this.searchForm.pageNum=1;
      this.getList()
    },
    getList() {
      let loading1=this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      queryHistoryList(this.searchForm).then(res => {
        loading1.clear()
        this.disabled = false;
        this.loading = false;
        this.list = this.list.concat(res.data)
        if(this.list.length >=res.total) {
          this.finished = true;
        }else{
          this.finished = false;
        }
        this.searchForm.pageNum=this.searchForm.pageNum+1
      })
    },
    dailyFn(row) {
      if(row.reportType=="1"){
        if(row.status!=-1){
        this.$router.push({
          path: "/dailyDetails",
          query: {reportId: row.id,}
        })
        }
      }else if(row.reportType=="2"){
        if(row.status!=-1){
        this.$router.push({
          path: "/weeklyApprovalDetils",
          query: {reportId: row.id,}
        })}
      }else{
        if(row.status!=-1){
        this.$router.push({
          path: "/doubleWeeklyDetils",
          query: {reportId: row.id,}
        })
        }
      }
    },
    onClickLeft() {
      this.$router.push({
        path: "/My/index"
      })
    }
  }
}
</script>
<style>
.contentpd16 {
  padding: 16px;
  background-color: white;
}
.cardtext {
  margin-bottom: 10px;
  box-sizing: border-box;
}

.cardtext .timeTitle {
  font-size: 15px;
  color: #333;
  line-height: 22px;
}

.cardtext .info {
  font-size: 14px;
  color: #333;
  line-height: 26px;
}

.lineGrey {
  height: 10px;
}

.cardtext .timeTitle p {
  padding: 0;
  margin: 0
}

.cardtext .timeTitle .textLeft {
  display: inline-block;
}

.cardtext .timeTitle .textRight {
  float: right;
  color: #0057ba;
}

.van-tab--active {
  color: #0057ba;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
  margin-top: 4px;
}
.brud {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.contentpd16 .van-cell {
  background-color: #EBF4FF;
  margin: 8px 0;
  border-radius: 5px;
  padding: 4px 16px;
}
.listTime .cardtext{margin-bottom: 0;    padding: 10px 0px; }
.listTime .cardtext .title .textLeft{padding-bottom: 0}
.listTime .van-cell{padding: 10px 16px;border-radius: 6px;}
.tabBR1 .van-tabs__nav .van-tab .van-tab__text{
  width: 100%;
  text-align: center;
  padding: 4px 0px;
}
 .van-tabs__nav .van-tab .van-tab__text .tabBR{
  border-right: 1px solid #f5f5f5;
  width: 100%;
  text-align: center;
  padding: 4px 0px;
   display: block;
}

</style>