storevisit-ui-mobile/src/views/historicalVisit/index.vue

<template>
  <div class="bgcolor">
    <div class="navBarTOP">
      <!--        顶部条-->
      <van-nav-bar
          class="navBar"
          title="历史拜访"
          left-arrow
          @click-left="onClickLeft"
      />
      <div class="searcTime">
        <van-row class="serchInput">
          <van-col span="12">
            <div class="monthNow" @click="startTimeshow = true">
              <span class="month">{{ startTime }}</span>
              <van-icon class="CalendarIcon" :name="timeico"/>
            </div>
          </van-col>
          <van-col span="12">
            <div class="monthNow" @click="endTimeshow = true">
              <span class="month">{{ endTime }}</span>
              <van-icon class="CalendarIcon" :name="timeico"/>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="searchDiv">
        <van-search
            v-model="storeName"
            show-action
            placeholder="搜索名称/编号/地址"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="lineGrey"></div>
    </div>
    <!--        主体内容-->
    <div class="container" style="margin-top: 162px;">
<!--      <van-list-->
<!--      class="myList"-->
<!--      v-model="loading"-->
<!--      :finished="finished"-->
<!--      finished-text="没有更多了"-->
<!--      @load="onLoad"-->
<!--      >-->
      <div class="cellcontent" v-for="(item,index) in list" :key="index">
        <van-cell @click="detilsFn(item)">
          <div class="card" style="position: relative;">
            <span v-if="item.visitSource==2" class="stateAbnormal">异常拜访</span>
            <!--<span v-if="item.visitModel==5" class="state">偏差过大</span>-->
            <span v-if="item.visitSource==1" class="state">正常拜访</span>
            <div class="title btn" :data-clipboard-text="item.storeCode"><span>{{ item.storeName }}</span>
              (<span style="color:#0057ba">{{
                  item.storeCode
                }}</span>)
            </div>
            <div class="info">拜访人：{{ item.nickName }}</div>
            <div class="info">拜访时间：{{ item.visitsTime }}</div>
            <div class="info" v-if="item.dwellTime">拜访时长：{{ item.dwellTime }}</div>
            <div class="info">地址：{{ item.addressLine }}</div>
            <div class="info">经销商：{{ item.chainName }}</div>
          </div>
        </van-cell>
        <div class="lineGrey"></div>
      </div>
<!--      </van-list>-->
      <p style="text-align: center;color: #ccc;font-size: 12px;" v-if="list.length!=0">--已经到底了--</p>
      <van-empty description="--已经到底了--" v-if="list.length==0"/>
    </div>
    <van-popup v-model="startTimeshow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
          v-model="startcurrentDate"
          type="date"
          title="开始日期"
          :min-date="minDate"
          :max-date="startmaxDate"
          @confirm="dateeconfirm"
          @cancel="startTimeshow=false"
      />
    </van-popup>
    <van-popup v-model="endTimeshow" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="开始日期"
          :min-date="endminDate"
          :max-date="maxDate"
          @confirm="endTimeconfirm"
          @cancel="endTimeshow=false"
      />
    </van-popup>
    <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>
  </div>
</template>

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

export default {
  name: "index.vue",
  data() {
    return {
      timeico: timeico,
      defaultDate: new Date(),
      searchValue: '',
      calendarShow: '',
      monthNames: ['-01', '-02', '-03', '-04', '-05', '-06', '-07', '-08', '-09', '-10', '-11', '-12',],
      calendarIsshow: false,
      tabVal: 'insidePlan',
      list: [],
      loading: false,
      finished: true,
      listActive: null,
      query: "",
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      startcurrentDate: new Date(),
      endminDate: new Date(),
      startmaxDate: new Date(),
      endTime: "",
      startTime: "",
      endTimeshow: false,
      startTimeshow: false,
      storeName: "",
      companyName:"全部公司",
      deptName:"全部销售部",
      regionName:"全部大区",
      userName:"全部业务员",
      companyCode:"",
      deptCode:"",
      regionCode:"",
      userCode:"",
      companyList:[],
      deptList:[],
      regionList:[],
      userList:[],
      RegionShow: false,
      SalesRegionShow: false,
      SalesDepartmentShow: false,
      StaffShow: false,
      deptForm:{type:"",parentId:""},
      pageNum:1 , // 当前页码  int类型
      pageSize:10, // 当前每页条数  int类型
      formData:{
        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类型
      },
    }
  },
  watch: {
    $route(to, from) {

      if (from.path == "/My/index" && to.path == "/historicalVisit/index") {
        this.info();
        this.onSearch();
      }
    }
  },
  created() {
    this.info();
    this.powerGrade = localStorage.getItem("powerGrade")
      this.onSearch();
  },
  methods: {
    info(){
      this.query = this.$route.query;
      this.startTime = this.getDay(-7)
      this.startcurrentDate = new Date(this.getDay(-7))
      this.endTime = this.parseTime(new Date(), '{y}-{m}-{d}')
      this.endminDate = new Date(this.getDay(-7))
    },
    detilsFn(val) {
      this.$router.push({
        path: "/historicalDetails",
        query: {visitId: val.id,storeId:val.storeId}
      })
    },
    timeBefore7(date) {
      if (!date) {
        date = new Date();
      }
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate() - 6;
      if (d < 0) {
        m = date.getMonth();
        var d1 = new Date(y, m, 0);
        var d2 = d1.getDate();
        return y + '/' + (m < 10 ? ('0' + m) : m) + '/' + (d2 + d);
      } else {
        return y + '/' + (m < 10 ? ('0' + m) : m) + '/' + (d < 10 ? ('0' + d) : d);
      }
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    dateeconfirm() {
      this.startTimeshow = false
      this.startTime = this.parseTime(this.startcurrentDate, '{yy}-{mm}-{dd}')
      this.endminDate = new Date(this.startcurrentDate)
      this.getVisitsListFn()
    },
    endTimeconfirm() {
      this.endTimeshow = false
      this.endTime = this.parseTime(this.currentDate, '{yy}-{mm}-{dd}')
      this.startmaxDate = new Date(this.currentDate)
      this.getVisitsListFn()
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
      this.pageNum=1;
      this.list=[];
      this.getVisitsListFn();
    },
    getVisitsListFn() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据获取中...',
        forbidClick: true,
      });
      getVisitsList({
        startTime: this.startTime + " 00:00:00",
        stopTime: this.endTime + " 24:00:00",
        storeRequest: this.storeName.trim(),
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        companyCode: this.companyCode, regionCode: this.regionCode, userCode: this.userCode, deptCode: this.deptCode

      }).then(res => {
        loading1.clear()
        if (res.code == 200) {
          this.list = res.rows
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    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;
    },
    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;
      this.deptCode=val.deptId;
      if(val.deptId!=""){

        this.getDeptInfo("user")
      }
      this.userName="全部业务员";
      this.userCode="";
    },
    onStaffConfirm(val) {
      this.StaffShow = false;
      this.userName=val.nickName;
      this.userCode=val.userId;
    },
    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
      }
      getvisitDeptInfo(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.userCode==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)
          }
        }
      })
    },
  }
}
</script>
<style lang="scss">
.searchDiv {
  .van-search {
    background: #fff;
  }
  .van-search__action {
    font-size: 14px;
    color: #0057ba;
    font-weight: bold;
    background: #f5f5f5;
    border-bottom-right-radius: 60px;
    border-top-right-radius: 60px;
    border: 1px solid #ccc;
    padding: 0 20px;
  }

  .van-search--show-action {
    padding-right: 12px
  }

  .van-search__content {
    border: 1px solid #ccc;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background: #f5f5f5;
    border-right: 0;
  }
}

.myList {
  .van-cell {
    padding: 10px 16px;

    &:after {
      border-bottom: none;
    }
  }
}
</style>
<style lang="scss" scoped>
.bgcolor {
  background-color: #f5f5f5;
}

.container {
  padding-bottom: 50px;
}

.monthNow {
  height: 34px;
  line-height: 34px;
  text-align: left;
  font-weight: bold;
  padding: 0 16px;
  box-sizing: border-box;
  background-color: #f1f1f1;
  border-radius: 20px;
  margin:8px;
  border: 1px solid #ccc;
  position: relative;
  color: #333;
  font-size: 14px;
  .van-cell__left-icon, .van-cell__right-icon{
    line-height: 34px;
  }
  .CalendarIcon {
    float: right;
    font-size: 24px;
    color: #1989fa;
    margin-top: 6px;
    position: absolute;
    right: 12px;
    img {
      height: 0.8em;
    }
  }
}
.serchInput{
  padding: 0 4px ;
}
.selectcell{width: 92%}
.card {
  box-sizing: border-box;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 30px;
    width: 78%;
  }

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

/**/
.searcTime {
  background-color: white;
}
.btnbox {
  padding: 0 16px
}
.cellcontent .centerBtn {
  margin: 0 auto 10px;
  display: block;
  width: 92%;
  border-radius: 5px;
}

.statstext {
  background-color: #1c84c6;
  position: absolute;
  right: 0;
  top: 16px;
  padding: 2px 6px 2px 12px;
  border-bottom-left-radius: 60px;
  border-top-left-radius: 60px;
  color: #fff;
}

.stateAbnormal {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  background-color: red;
  border-radius: 5px;
  display: inline-block;
  padding: 0 5px;
}

.state {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  background-color: #1c84c6;
  border-radius: 5px;
  display: inline-block;
  padding: 0 5px;
}

.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}
</style>