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

<template>
  <div class="bgcolor">
    <!--        顶部条-->
    <van-nav-bar
        class="navBar"
        title="下属部主管历史周报"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="container contentpd16 containers">
      <van-row gutter="20">
        <van-col span="12">
          <van-cell :title="companyName" :disabled="powerGrade<5" is-link arrow-direction="down" @click="regionClick"/>
        </van-col>
        <van-col span="12">
          <van-cell :title="regionName"  is-link @click="SalesRegionClick" arrow-direction="down"/>
        </van-col>
        <van-col span="12">
          <van-cell :title="deptName" is-link @click="SalesDepartmentClick" arrow-direction="down"/>
        </van-col>
        <van-col span="12">
          <div style="width: 20px;height: 48px"></div>
<!--          <van-cell :title="userName" is-link @click="StaffClick" arrow-direction="down"/>-->
<!--           <van-cell  is-link arrow-direction="down"/>-->
        </van-col>
        <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-row>
      <br>
      <van-button type="info" size="small" plain class="Btn100" @click="searchBtn">查找</van-button>
    </div>
<!--    <div class="container">-->
<!--      <div class="cellcontent brud" style="padding: 16px 16px;background-color: #fff;">-->
<!--        <el-table class="elTreeTableLsiy" style="text-align: center;" :data="tableList" row-key="id"  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">-->
<!--          <el-table-column prop="month"  label="月份" width="60" />-->
<!--          <el-table-column prop="commitRate"  label="提交率%" />-->
<!--          <el-table-column prop="approvalRate"  label="审批率%" />-->
<!--        </el-table>-->
<!--      </div>-->
<!--    </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.pnickName}}的周报({{item.showDate}})</p>
              <p class="textRight" v-if="item.status==3">已审批</p>
              <p class="textRight" v-if="item.status==-1">过期未汇报</p>
              <p class="textRight" v-if="item.status==0">待汇报</p>
              <p class="textRight" v-if="item.status==2">退回待处理</p>
              <p class="textRight" v-if="item.status==1" >待审批</p>
            </div>
            <div class="info" v-if="item.status>0&&item.status<3">提交时间：{{item.commitTime}}</div>
            <div class="info" v-if="item.status<1">创建时间：{{dateFn(item.date)}}</div>
            <div class="info" v-if="item.status==3">提交时间：{{item.commitTime}}</div>
            <div class="info" v-if="item.status==3">审批时间：{{item.approvalTime}}</div>
          </div>
        </van-cell>
      </div>
      <van-empty  v-if="list.length==0"/>
      </van-list>
    </div>
    <br>
    <br>
    <van-popup v-model="RegionShow" capture position="bottom">
      <van-picker
          show-toolbar
          :columns="companyList"
          value-key="deptName"
          @confirm="onregionConfirm"
          @cancel="RegionShow = false"
      />
    </van-popup>
    <van-popup v-model="SalesRegionShow" capture position="bottom">
      <van-picker
          show-toolbar
          :columns="regionList"
          value-key="deptName"
          @confirm="onSalesRegionConfirm"
          @cancel="SalesRegionShow = false"
      />
    </van-popup>
    <van-popup v-model="SalesDepartmentShow" capture position="bottom">
      <van-picker
          show-toolbar
          :columns="deptList"
          value-key="deptName"
          @confirm="onSalesDepartmentConfirm"
          @cancel="SalesDepartmentShow = false"
      />
    </van-popup>
    <van-popup v-model="StaffShow" capture position="bottom">
      <van-picker
          show-toolbar
          :columns="userList"
          @confirm="onStaffConfirm"
          value-key="nickName"
          @cancel="StaffShow = false"
      />
    </van-popup>

    <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,querySubReport} from "@/api/index";
export default {
  name: "MyHistoricalWeekly",
  data() {
    return {
      timeico: timeico,
      RegionShow: false,
      SalesRegionShow: false,
      SalesDepartmentShow: false,
      StaffShow: 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(),
      companyName:"全部公司",
      deptName:"全部销售部",
      regionName:"全部大区",
      userName:"全部",
      companyCode:"",
      deptCode:"",
      regionCode:"",
      userCode:"",
      companyList:[],
      deptList:[],
      regionList:[],
      userList:[],
      deptForm:{type:"",parentId:""},
      list:[],
      loading: false,
      finished: true,
      formData:{
        type:"2", // 汇报类型或入口 1-下属业务员日报 2-下属销售部主管周报 3-下属大区主管半月报
        companyId:"", // 公司id，必传 Long类型
        regionId:"", // 大区id，必传  Long类型
        deptId:"", // 部门id，如果为周报或日报为必传  Long类型
        userId:"", // 业务员id，如果为日报为必传      Long类型
        startTime:"", // 开始时间，必传  格式：yyyy-MM-dd  String类型
        endTime:"", // 结束时间，必传  格式：yyyy-MM-dd  String类型
        pageNum:1 , // 当前页码  int类型
        pageSize:10, // 当前每页条数  int类型
      },
      tableList:[]
    }
  },
  created() {
    // this.formData.startTime = this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'),2)
    this.formData.startTime = this.getThreeDaysAgo()
    // this.strtcurrentDate=new Date(this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'),2))
    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.powerGrade = localStorage.getItem("powerGrade")
    this.getDeptInfo("dept")
    if(this.powerGrade==5){
      setTimeout(()=>{
        if(this.$route.query.deptCode==undefined){
        this.companyName=this.companyList[0].deptName;
        this.companyCode=this.companyList[0].deptId;}
        this.getDeptInfo("dept",1)
      },1000)
    }
    if(this.powerGrade==4){
      setTimeout(()=>{
        this.getDeptInfo("dept",1)
      },1000)
    }
    if(this.powerGrade==3){
      setTimeout(()=>{
        this.getDeptInfo("dept",2)
      },1000)
    }
    if(this.powerGrade==2){
      setTimeout(()=>{
        this.getDeptInfo("user")
      },2000)
    }
    if(this.$route.query.deptCode!=undefined){
      this.companyName=this.$route.query.companyName
      this.companyCode=this.$route.query.companyCode
      this.regionName=this.$route.query.regionName
      this.regionCode=this.$route.query.regionCode
      this.deptName=this.$route.query.deptName
      this.deptCode=this.$route.query.deptCode
      this.formData.startTime=this.$route.query.startTime
      this.formData.endTime=this.$route.query.endTime
        this.searchBtn()
      this.getDeptInfo("dept",2)
    }else{
      setTimeout(()=>{
      this.searchBtn()},1000)
    }
  },
  watch: {
    $route(to, from) {
      if(to.path=="/subordinateHistoricalWeekly"&&from.path!="/weeklyHistoricalDetils"){
        if(this.$route.query.deptCode!=undefined){
          this.companyName=this.$route.query.companyName
          this.companyCode=this.$route.query.companyCode
          this.regionName=this.$route.query.regionName
          this.regionCode=this.$route.query.regionCode
          this.deptName=this.$route.query.deptName
          this.deptCode=this.$route.query.deptCode
          this.formData.startTime=this.$route.query.startTime
          this.formData.endTime=this.$route.query.endTime
          this.searchBtn()
          this.getDeptInfo("dept",2)
        }else{
          this.formData.pageNum=1
          this.list = [];
          this.regionName="全部大区"
          this.regionCode=""
          this.deptName="全部销售部"
          this.deptCode=""
          this.tableList=[];
          this.powerGrade = localStorage.getItem("powerGrade")
          this.getDeptInfo("dept")
          if(this.powerGrade==5){
            setTimeout(()=>{
              if(this.$route.query.deptCode==undefined){
              this.companyName=this.companyList[0].deptName;
              this.companyCode=this.companyList[0].deptId;}
              this.getDeptInfo("dept",1)
            },1000)
          }
          if(this.powerGrade==4){
            setTimeout(()=>{
              this.getDeptInfo("dept",1)
            },1000)
          }
          if(this.powerGrade==3){
            setTimeout(()=>{
              this.getDeptInfo("dept",2)
            },1000)
          }
          if(this.powerGrade==2){
            setTimeout(()=>{
              this.getDeptInfo("user")
            },2000)
          }
          setTimeout(()=>{
            this.searchBtn()},1000)
        }
      }
    }
  },
  methods: {
    dateFn(val){
      return val.slice(0,4)+"-"+val.slice(4,6)+"-"+val.slice(6,8)
    },
    onLoad(){
      this.querySubReport()
    },
    searchBtn(){
      // if(this.deptCode==""){
      //   this.$toast("销售部未选择")
      // }else{
        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;
      }
      this.formData.companyId=this.companyCode; // 公司id，必传 Long类型
      this.formData.regionId=this.regionCode; // 大区id，必传  Long类型
      this.formData.deptId=this.deptCode; // 部门id，如果为周报或日报为必传  Long类型
      this.formData.userId=this.userCode; // 业务员id，如果为日报为必传      Long类型
      querySubReport(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
          // this.tableList=res.data.rates
        }
      })
    },
    getThreeDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 14); //最后一个数字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;
    },
    getDeptInfo(type,grade){
      this.deptForm.type=type
      if(type=="dept"){
        if(grade=="1"){
          this.deptForm.parentId=this.companyCode
        }else if(grade=="2"){
          this.deptForm.parentId=this.regionCode
        }else{
          this.deptForm.type=""
          this.deptForm.parentId=""
        }
      }else if(type=="user"){
        this.deptForm.parentId=this.deptCode
      }
      getDeptInfo(this.deptForm).then(res=>{
        if(type=="dept"){
          if(grade=="1"){
            if(res.data.region!=null){
              this.regionList=[{deptName:"全部大区",deptId:""}].concat(res.data.region)
            }
          }else if(grade=="2"){
            if(res.data.dept!=null){
              this.deptList=[{deptName:"全部销售部",deptId:""}].concat(res.data.dept)
            }
          }else{
            this.companyList=res.data.company
            if(this.$route.query.deptCode==undefined){
            this.companyName=res.data.company[0].deptName
            this.companyCode=res.data.company[0].deptId
            }
            if(res.data.dept!=null){
              this.deptName=res.data.dept[0].deptName
              this.deptCode=res.data.dept[0].deptId
              this.deptList=res.data.dept
            }
            if(res.data.region!=null){
              this.regionName=res.data.region[0].deptName
              this.regionCode=res.data.region[0].deptId
              this.regionList=res.data.region
            }
            if(res.data.user!=null){
              this.userList=res.data.user
              this.userCode=""
            }
          }
        }else if(type=="user"){
          if(res.data.user!=null){
            this.userList=[{nickName:"全部业务员",userId:""}].concat(res.data.user)
          }
        }
      })
    },
    dailyFn(row) {
      if(row.status!='0'){
        if(row.status==-1){
          var dayTime=row.showDate;
          var times=new Date(dayTime.slice(0, 4)+"-"+dayTime.slice(4, 6)+"-"+dayTime.slice(6, 8)).getTime()
          var time=new Date("2022-08-25").getTime()
          if(times<time){
            this.$dialog.alert({
              title: '系统提示',
              message: '非常抱歉，8月25日前历史报告数据不存在',
            })
          }else{
            this.$router.push({
              path: "/weeklyHistoricalDetils",
              query: {reportId: row.id,}
            })
          }
        }else{
          this.$router.push({
            path: "/weeklyHistoricalDetils",
            query: {reportId: row.id,}
          })
        }
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    regionClick() {
      // if(this.powerGrade>4){
        this.RegionShow = true;
      // }
    },
    SalesRegionClick(val) {
      // if(this.powerGrade>3){
        this.SalesRegionShow = true;
      // }
    },
    SalesDepartmentClick() {
      // if(this.powerGrade>2){
        this.SalesDepartmentShow = true;
      // }
    },
    StaffClick() {
      this.StaffShow = true;
    },
    StartTimeClick() {
      this.StartTimeShow = true;
    },
    EndTimeClick() {
      this.EndTimeShow = true;
    },
    onregionConfirm(val) {
      this.RegionShow = false;
      this.companyName=val.deptName;
      this.companyCode=val.deptId;
      this.regionName="全部大区";
      this.regionCode="";
      this.deptName="全部销售部";
      this.deptCode="";
      this.userName="全部业务员";
      this.userCode="";
      this.getDeptInfo("dept",1)
    },
    onSalesRegionConfirm(val) {
      this.SalesRegionShow = false;
      this.regionName=val.deptName;
      this.regionCode=val.deptId;
      if(val.deptId!=""){
        this.getDeptInfo("dept",2)
      }
      this.deptName="全部销售部";
      this.deptCode="";
      this.userName="全部业务员";
      this.userCode="";
      this.userList=[]
    },
    onSalesDepartmentConfirm(val) {
      this.SalesDepartmentShow = false;
      this.deptName=val.deptName;

      if(val.deptId!=""){
        this.deptCode=val.deptId;
        this.getDeptInfo("user")
      }
      this.userName="全部业务员";
      this.userCode="";
    },
    onStaffConfirm(val) {
      this.StaffShow = false;
      this.userName=val.nickName;
      this.userCode=val.userId;
    },
    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)
      }
      this.list=[];
      this.formData.pageNum=1;
      console.log(this.endmaxDate)

    },
    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.list=[];
      this.formData.pageNum=1;
      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;}
</style>