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

<template>
  <div class="bgcolor VisitSummary">
    <!--        顶部条-->
    <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="companyName" 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="24">
          <van-cell
            :title="deptName"
            is-link
            @click="SalesDepartmentClick"
            arrow-direction="down" />
        </van-col>
        <!--        <van-col span="12">-->
        <!--          <van-cell :title="userName" is-link @click="StaffClick" 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-col span="24">
          <van-cell class="inputSearch">
            <van-field v-model="formData.summaryTaskName" placeholder="请输入任务名称" />
          </van-cell>
        </van-col>
        <van-col span="12">
          <van-cell
            :title="approvalStatus.text"
            is-link
            @click="approvalStatusShow = true"
            arrow-direction="down" />
        </van-col>
        <van-col span="12">
          <van-cell
            :title="storageStatus.text"
            is-link
            @click="storageStatusShow = true"
            arrow-direction="down" />
        </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" border lazy  :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.nickName }}的{{ item.summaryTaskName }}</p>
                <div class="approvalStatusBtn" v-if="item.approvalStatus">
                  <span class="approvalStatusBtn1" v-if="item.approvalStatus == '2'">审批通过</span>
                  <span class="approvalStatusBtn2" v-if="item.approvalStatus == '1'">
                    提交待审批
                  </span>
                  <span class="approvalStatusBtn3" v-if="item.approvalStatus == '3'">
                    拒绝待提交
                  </span>
                </div>
                <div class="approvalStatusBtn" v-if="item.status == '0'">
                  <span class="status0">暂存</span>
                </div>
              </div>
              <div class="info">
                部门：{{ item.deptName || item.regionName || item.companyName }}
              </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="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>
    <!-- approvalStatus：审批状态：1-待审批 2-审批通过 3-拒绝待提交 -->
    <van-popup v-model="approvalStatusShow" capture position="bottom">
      <van-picker
        show-toolbar
        :columns="approvalStatusList"
        @confirm="onSalesApprovalStatus"
        @cancel="approvalStatusShow = false" />
    </van-popup>
    <!-- status：状态：1-待审批 2-审批通过 3-拒绝待提交 -->
    <van-popup v-model="storageStatusShow" capture position="bottom">
      <van-picker
        show-toolbar
        :columns="storageStatusList"
        @confirm="onStorageStatus"
        @cancel="storageStatusShow = 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,
      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: '1', // 汇报类型或入口 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: [],
      approvalStatusShow: false,
      approvalStatusList: [
        //1-待审批 2-审批通过 3-拒绝待提交
        { text: '审批状态（全部）', value: '' },
        { text: '待审批', value: '1' },
        { text: '审批通过', value: '2' },
        { text: '拒绝待提交', value: '3' },
      ],
      approvalStatus: { text: '审批状态（全部）', value: '' },
      storageStatus: { text: '提交状态（全部）', value: '' },
      storageStatusList: [
        // 0-暂存，1-已提交
        { text: '提交状态（全部）', value: '' },
        { text: '已提交', value: '1' },
        { text: '暂存', value: '0' },
      ],
      storageStatusShow: false,
    };
  },
  activated() {
    this.userList = [];
    this.formData.startTime = this.getThreeDaysAgo();
    // this.formData.startTime = this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'),2)
    // 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');
    // 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);
    }
    if (this.$route.query.userCode != 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.userCode = this.$route.query.userCode;
      this.userName = this.$route.query.userName;
      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);
      this.getDeptInfo('user');
    } else {
      setTimeout(() => {
        this.searchBtn();
      }, 1000);
    }
  },
  watch: {
    $route(to, from) {
      if (from.path == '/My/index') {
        this.approvalStatus = this.approvalStatusList[0];
        this.storageStatus = this.storageStatusList[0];
      }
    },
  },
  methods: {
    dateFn(val) {
      return val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8);
    },
    onLoad() {
      this.querySubReport();
    },
    searchBtn() {
      // if(this.userCode==""){
      //   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类型
      this.formData.approvalStatus = this.approvalStatus.value;
      this.formData.status = this.storageStatus.value;
      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;
          // this.tableList=res.data.rates
        }
      });
    },
    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;
    },
    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;
      }
      getSummaryMobileDeptInfo(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);
          }
        }
      });
    },
    dailyFn(row) {
      // 暂存
      if (row.status == '0') {
        this.$router.push({
          path: '/VisitSummaryStorageDetail',
          query: { userSummaryId: row.userSummaryId, source: '/VisitSummary' },
        });
      } else {
        this.$router.push({
          path: '/VisitSummaryDetail',
          query: { userSummaryId: row.userSummaryId, source: '/VisitSummary' },
        });
      }
    },
    onClickLeft() {
      this.$router.replace({
        path: '/My/index',
      });
    },
    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;
      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;
    },
    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;
    },
    onSalesApprovalStatus(val) {
      this.approvalStatus = val;
      this.approvalStatusShow = false;
    },
    onStorageStatus(val) {
      this.storageStatus = val;
      this.storageStatusShow = false;
    },
  },
};
</script>
<style lang="scss">
.VisitSummary {
  .cardContent {
    padding: 0;
    box-sizing: border-box;
  }

  .cardContent .title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
  }

  .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>
<style lang="scss">
.VisitSummary {
  .brud {
    position: relative;
  }
  .approvalStatusBtn {
    span {
      color: #fff;
      border-radius: 5px;
      display: inline-block;
      padding: 3px 5px;
      font-size: 14px;
      width: 80px;
      text-align: center;
    }
    .approvalStatusBtn1 {
      background-color: #12ea7a;
    }
    .approvalStatusBtn2 {
      background-color: rgb(112, 33, 239);
    }
    .approvalStatusBtn3 {
      background-color: red;
    }
    .status1 {
      background-color: #07c160;
    }
    .status0 {
      background-color: #ff976a;
    }
  }
  .van-cell__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>