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

<template>
  <div class="bgcolor">
    <!--        顶部条-->
    <van-nav-bar
        class="navBar"
        title="家装推广会历史提报查询"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="container contentpd16">
      <van-row gutter="20">
        <van-col span="12">
          <van-cell :title="formData.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="formData.endTime" is-link @click="EndTimeClick">
            <template #right-icon>
              <van-icon :name="timeico" class="search-icon"/>
            </template>
          </van-cell>
        </van-col>
        <van-col span="24">
          <van-cell class="inputSearch">
            <van-field  v-model="formData.summaryTaskName" placeholder="请输入任务名称" />
          </van-cell>
        </van-col>
      </van-row>
      <br>
      <van-button type="info" size="small" plain class="Btn100" @click="searchBtn">查找</van-button>
    </div>
    <div class="container">
      <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="--已经到底了--">
        <div class="cellcontent brud" v-for="(item,index) in list" :key="index">
          <van-cell>
            <div class="cardContent" @click="dailyFn(item)">
              <div class="title"  >
                <p class="textLeft">{{item.nickName}}的{{item.summaryTaskName}}</p>
              </div>
              <div class="info">提交时间：{{item.createTime}}</div>
            </div>
          </van-cell>
        </div>
        <van-empty  v-if="list.length==0"/>
      </van-list>
    </div>
    <br>
    <br>
    <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 {getDeptInfo,getSummaryMobileDeptInfo,queryHistorySummaryList} from "@/api/index";
export default {
  name: "MyHistoricalWeekly",
  data() {
    return {
      timeico: timeico,
      StartTimeShow: false,
      EndTimeShow: false,
      strtminDate: new Date(2022, 0, 1),
      endminDate: new Date(2022, 0, 1),
      strtmaxDate: new Date(),
      endmaxDate: new Date(),
      strtcurrentDate: new Date(),
      endcurrentDate: new Date(),
      list:[],
      loading: false,
      finished: true,
      formData:{
        type:"1", // 汇报类型或入口 1-下属业务员日报 2-下属销售部主管周报 3-下属大区主管半月报
        startTime:"", // 开始时间，必传  格式：yyyy-MM-dd  String类型
        endTime:"", // 结束时间，必传  格式：yyyy-MM-dd  String类型
        pageNum:1 , // 当前页码  int类型
        pageSize:10, // 当前每页条数  int类型
      },
      tableList:[]
    }
  },

  created() {
    this.userList=[]
    this.formData.startTime =this.getThreeDaysAgo()
    this.strtcurrentDate=new Date(this.getThreeDaysAgo())
    this.formData.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + ""
    this.endminDate=new Date(this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'),2))
    this.searchBtn()
  },
  watch: {
    $route(to, from) {
    }
  },
  methods: {
    dateFn(val){
      return val.slice(0,4)+"-"+val.slice(4,6)+"-"+val.slice(6,8)
    },
    onLoad(){
      this.querySubReport()
    },
    searchBtn(){
      this.formData.pageNum=1
      this.list = [];
      this.querySubReport()
    },
    querySubReport(){
      let loading1=this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      queryHistorySummaryList(this.formData).then(res=>{
        loading1.clear()
        if(res.code==200){
          this.loading=false
          this.list = this.list.concat(res.data)
          if (this.list.length >=res.total) {
            this.finished = true;
          }else{
            this.finished = false;
          }
          this.formData.pageNum=this.formData.pageNum+1
        }
      })
    },
    getThreeDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 7); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
          lastY +
          "-" +
          (lastM < 10 ? "0" + lastM : lastM) +
          "-" +
          (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return startData;
    },
    GetPreMonthDay(date, monthNum,type) {
      var dateArr = date.split('-');
      var year = dateArr[0]; //获取当前日期的年份
      var month = dateArr[1]; //获取当前日期的月份
      var day = dateArr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - monthNum;
      if (month2 <= 0) {
        var absM = Math.abs(month2);
        year2 = parseInt(year2) - Math.ceil(absM / 12 == 0 ? 1 : parseInt(absM) / 12);
        month2 = 12 - (absM % 12);
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = '0' + month2;
      }
      var t2 =""
      if(monthNum>0){
        t2= year2 + '-' + month2 + '-01';
      }else{
        if(type=="end"){
          var Months=new Date().getMonth()+1
          var days111=new Date().getDate()
          if (Months < 10) {
            Months = '0' + Months;
          }
          if (days111 < 10) {
            days111 = '0' + days111;
          }
          if(new Date().getFullYear()==year){
            if(parseInt(month2)>=new Date().getMonth()+1){
              t2= year2 + '-' + Months + '-' + days111;
            }else{
              var daysd=this.getMonthDays(year2,month2)
              t2= year2 + '-' + month2 + '-' + daysd;
            }
          }else{
            var daysd=this.getMonthDays(year2,month2)
            t2= year2 + '-' + month2 + '-' + daysd;
          }
        }else{
          t2= year2 + '-' + month2 + '-' + day2;
        }
      }
      return t2;
    },
    getMonthDays(year,month){
      var stratDate = new Date(year,month-1,1),
          endData = new Date(year,month,1);
      var days = (endData -stratDate)/(1000*60*60*24);
      return days;
    },
    dailyFn(row) {
      this.$router.push({
        path: "/VisitSummaryDetail",
        query: {userSummaryId: row.userSummaryId,}
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    StartTimeClick() {
      this.StartTimeShow = true;
    },
    EndTimeClick() {
      this.EndTimeShow = true;
    },
    onStartTimeConfirm(val) {
      this.formData.startTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + ""
      this.StartTimeShow = false;
      this.endminDate = new Date(val)
      this.endmaxDate=new Date(this.GetPreMonthDay(this.formData.startTime,-2,"end"))
      if((new Date(this.formData.startTime).getTime()>new Date(this.formData.endTime).getTime())||(new Date(this.endmaxDate).getTime()<new Date(this.formData.endTime).getTime())) {
        this.formData.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + ""
        this.endcurrentDate=  this.GetPreMonthDay(this.formData.startTime,-2)
      }

    },
    onEndTimeConfirm(val) {
      this.formData.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}')
      this.strtmaxDate = new Date(val)
      if(new Date(this.formData.startTime).getTime()>new Date(this.formData.endTime).getTime()){
        this.formData.startTime=this.formData.endTime
      }
      this.EndTimeShow = false;
    },
  }
}
</script>
<style>
.cardContent {
  padding: 0;
  box-sizing: border-box;
}

.cardContent .title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  line-height: 22px;
}

.cardContent .title p {
  padding: 0;
  margin: 0
}

.cardContent .title .textLeft {
  display: inline-block;
  padding-bottom: 10px;
}

.cardContent .title .textRight {
  float: right;
  color: #0057ba;
}

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

.search-icon {
  font-size: 16px;
  line-height: inherit;
  margin-top: 4px;
}

.brud {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.contentpd16 {
  padding: 16px;
  background-color: white;
}

.Btn100 {
  margin: 0 auto 10px;
  display: block;
  width: 100%;
  border-radius: 5px;
  color: #fff !important;
  background-color: #0057ba;
  border: 1px solid #0057ba;
  height: 36px
}

.contentpd16 .van-cell {
  background-color: #EBF4FF;
  margin: 8px 0;
  border-radius: 5px;
  padding: 4px 16px;
}
.elTreeTableLsiy  th.el-table__cell>.cell{text-align: center;}
.elTreeTableLsiy td.el-table__cell div{
  text-align: right;
}
.elTreeTableLsiy .el-table__cell{
  padding: 2px 0;
}
.elTreeTableLsiy .el-table__cell:first-child .cell{
  text-align: center;
}
.contentpd16 .inputSearch .van-cell{
  padding: 0;
  margin: 4px 0;
}
</style>