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

<template>
  <div class="bgcolor historAllVisit">
    <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">
            <van-cell
              class="monthNow selectcell"
              :title="companyName"
              is-link
              arrow-direction="down"
              @click="regionClick" />
          </van-col>
          <van-col span="12">
            <van-cell
              class="monthNow selectcell"
              :title="regionName"
              is-link
              @click="SalesRegionClick"
              arrow-direction="down" />
          </van-col>
          <van-col span="12">
            <van-cell
              class="monthNow selectcell"
              :title="deptName"
              is-link
              @click="SalesDepartmentClick"
              arrow-direction="down" />
          </van-col>
          <van-col span="12">
            <van-cell
              class="monthNow selectcell"
              :title="userName"
              is-link
              @click="StaffClick"
              arrow-direction="down" />
          </van-col>
          <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 v-if="refreshTotal" class="refreshBtn" @click="refresh">检测到 {{ refreshTotal }} 条更新，点击刷新</div>
      <div v-if="refreshTotal" class="lineGrey"></div>
    </div>
    <!--        主体内容-->
    <div class="container" :style="{ 'margin-top': refreshTotal ? '300px' : '262px' }">
      <van-list
        class="myList1"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <div v-if="list.length > 0">
          <div class="cellcontent" v-for="(item, index) in list" :key="index">
            <van-cell>
              <div class="card" style="position: relative" @click="detilsFn(item)">
                <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">
                  <span>{{ item.storeName }}</span> (<span style="color: #0057ba">{{
                    item.storeCode
                  }}</span
                  >)
                </div>
                <div class="info">拜访人：{{ item.nickName }}</div>
                <div class="info">
                  拜访时间：{{ item.visitsTime }}
                  <span class="textRight" v-if="item.status == '1' && item.taskId == null"
                    >审批中</span
                  >
                  <span
                    class="textRight"
                    v-if="item.status == '1' && item.taskId != null"
                    style="color: red"
                    >退回修改</span
                  >
                  <span class="textRight" style="color: #07c160" v-if="item.status == 2"
                    >审批完成</span
                  >
                  <span class="textRight" v-if="item.status == '3'" style="color: red">拒绝</span>
                </div>
                <div class="info" v-if="item.dwellTime">拜访时长：{{ item.dwellTime }}</div>
                <div class="info">地址：{{ item.addressLine }}</div>
              </div>
              <!-- 潜在店不显示经销商 -->
              <template v-if="item.sfaStoreType.type != 'qzd'">
                <!-- 分销店 -->
                <template
                  v-if="
                    item.sfaStoreType &&
                    item.sfaStoreType.type == 'fxd' &&
                    item.sfaStoreChainsContactList
                  ">
                  <div class="info">
                    经销商：
                    <div
                      class="TCFXListItem"
                      v-for="(item, index) in item.sfaStoreChainsContactList">
                      <el-popover
                        popper-class="zpover zpoverStoreztype"
                        placement="bottom-start"
                        trigger="click">
                        <div>
                          <div>{{ item.chainCode }}</div>
                          <div>{{ item.chainName }}</div>
                        </div>
                        <div slot="reference" :key="index">
                          {{ item.categoryDescribe }}
                        </div>
                      </el-popover>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="info">经销商：{{ item.chainName }}</div>
                </template>
              </template>
            </van-cell>
            <div class="lineGrey"></div>
          </div>
        </div>
      </van-list>
      <!--      <p style="text-align: center;color: #ccc;font-size: 12px;" v-if="list.length!=0">&#45;&#45;已经到底了&#45;&#45;</p>-->
      <!--      <van-empty description="&#45;&#45;已经到底了&#45;&#45;" 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 { getVisits, getvisitDeptInfo, getListTotal } from '@/api/index';
import timeico from '@/assets/Icon/datatims.png';

export default {
  name: 'index.vue',
  data() {
    return {
      latestUpdateTime:null,
      refreshTotal:0,
      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(2022, 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类型
      userDeptLevel: null,
    };
  },
  activated() {
    if(this.latestUpdateTime!=null){ 
       this.getListTotalFn();
    }
    // setTimeout(() => {
    //   this.onSearch();
    // }, 1000);
  },
  created() {
    this.info();
    this.userList = [];
    this.pageNum = 1;
    this.list = [];
    // powerGrade：等级（1-销售员 2-销售部主管 3-大区主管 4-区域公司总经理 5-DIY公司）
    this.powerGrade = localStorage.getItem('powerGrade');
    // userDeptLevel用户部门等级字段，0-总部，1-公司，2-大区，3-销售部，4-业务员
    this.userDeptLevel = localStorage.getItem('userDeptLevel');
    this.getDeptInfo('dept');
    if (this.userDeptLevel == 0) {
      setTimeout(() => {
        if (this.$route.query.userCode == undefined) {
          this.companyName = this.companyList[0].deptName;
          this.companyCode = this.companyList[0].deptId;
        }
        this.getDeptInfo('dept', 1);
      }, 1000);
    }
    if (this.userDeptLevel == 1) {
      setTimeout(() => {
        this.getDeptInfo('dept', 1);
      }, 1000);
    }
    if (this.userDeptLevel == 2) {
      setTimeout(() => {
        this.getDeptInfo('dept', 2);
      }, 1000);
    }
    if (this.userDeptLevel == 3 || this.userDeptLevel == 4) {
      setTimeout(() => {
        this.getDeptInfo('user');
      }, 2000);
    }
    this.onSearch();
  },
  methods: {
    refresh(){
      this.refreshTotal = 0;
      this.onSearch();
    },
    getListTotalFn(){
      getListTotal({
        startTime: this.startTime + ' 00:00:00', 
        stopTime: this.endTime + ' 24:00:00', 
        storeRequest: this.storeName.trim(),
        companyId: this.companyCode,
        regionId: this.regionCode,
        userId: this.userCode,
        deptId: this.deptCode,
        queryStartTime:this.latestUpdateTime
      }).then((res) => {
        if (res.code == 200) {
          this.refreshTotal = res.data;
        }
      });
    },
    onLoad() {
      // this.loading = false;
      this.getVisitsListFn();
    },
    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) {
      console.log(val.id);
      this.$router.push({
        path: '/historicalDetails',
        query: {
          visitId: val.id,
          storeId: val.storeId,
          storeCode: val.storeCode,
          taskId: val.taskId,
          userId: val.userId,
          storeCategory: val.storeCategory,
        },
      });
    },
    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.onSearch();
    },
    endTimeconfirm() {
      this.endTimeshow = false;
      this.endTime = this.parseTime(this.currentDate, '{yy}-{mm}-{dd}');
      this.startmaxDate = new Date(this.currentDate);
      this.onSearch();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {
      this.pageNum = 1;
      this.list = [];
      this.getVisitsListFn();
    },
    getVisitsListFn() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据获取中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      getVisits({
        startTime: this.startTime + ' 00:00:00', //
        stopTime: this.endTime + ' 24:00:00', //
        storeRequest: this.storeName.trim(),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        companyId: this.companyCode,
        regionId: this.regionCode,
        userId: this.userCode,
        deptId: this.deptCode,
      }).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.loading = false;
          this.latestUpdateTime = res.dataTime;
          this.list = this.list.concat(res.data);
          if (this.list.length >= res.total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          this.pageNum = this.pageNum + 1;
        } 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 {
            if (this.userDeptLevel == 0) {
              this.companyList = [{ deptName: '全部公司', deptId: '' }].concat(res.data.company);
            } 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">
.refreshBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100%;
    color: #ff976a;
    padding: 5px;
    font-size: 14px;
    background-color: #fff;
}
.searchDiv {
  .van-search {
    background: #fff;
  }
  .van-search__action {
    font-size: 14px;
    color: #1989fa;
    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;
  }
}

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

    &:after {
      border-bottom: none;
    }
  }
}
.historAllVisit {
  .TCFXListItem {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 3px 5px;
    margin: 0 5px;
    border-radius: 6px;
  }
}
</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;
}
.cellcontent .textRight {
  float: right;
  color: #0057ba;
}
</style>