storevisit-ui-mobile/src/views/home/reportingRate.vue

<template>
  <div>
    <div class="navBarTOP">
      <van-nav-bar
        class="navBar"
        left-arrow
        title="下属汇报率审批率统计"
        @click-left="onClickLeft" />
    </div>
    <!--        主体内容-->
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="container contentpd16 containers">
      <van-row gutter="20">
        <van-col span="12">
          <van-cell
            :disabled="powerGrade < 5"
            :title="companyName"
            arrow-direction="down"
            is-link
            @click="regionClick" />
        </van-col>
        <van-col span="12">
          <van-cell :title="regionName" arrow-direction="down" is-link @click="SalesRegionClick" />
        </van-col>
        <van-col span="12">
          <van-cell :title="seacherForm.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="seacherForm.endTime" is-link @click="EndTimeClick">
            <template #right-icon>
              <van-icon :name="timeico" class="search-icon" />
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>
    <el-table
      :data="tableList"
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      class="elTreeTable"
      lazy
      row-key="id">
      <el-table-column class="firstName" label="组织名称/业务员(单位%)" prop="deptName" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.reportType == 1">{{ scope.row.userName }}</span>
          <span v-if="scope.row.reportType != 1">{{ scope.row.deptName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="半月报" width="46">
        <el-table-column label="提交率%" prop="name" width="46">
          <template slot-scope="scope">
            <span v-if="scope.row.reportType != 3" class="spanNum"
              >{{ scope.row.doubleWeekCommitRate }}
            </span>
            <div v-if="scope.row.reportType == 3 && scope.row.doubleWeekCommitRate != null">
              <span
                v-if="scope.row.doubleWeekCommitRate != '-'"
                class="linkSpan"
                @click="linKReportHistory(scope.row, 3)"
                >{{ scope.row.doubleWeekCommitRate }}</span
              >
              <span
                v-if="scope.row.doubleWeekCommitRate == '-'"
                style="text-align: center; display: block"
                >{{ scope.row.doubleWeekCommitRate }}</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="周报" width="46">
        <el-table-column label="提交率%" prop="address" width="46">
          <template slot-scope="scope">
            <span v-if="scope.row.reportType != 2" class="spanNum"
              >{{ scope.row.weekCommitRate }}
            </span>
            <div v-if="scope.row.reportType == 2 && scope.row.weekCommitRate != null">
              <span
                v-if="scope.row.weekCommitRate != '-'"
                class="linkSpan"
                @click="linKReportHistory(scope.row, 2)"
                >{{ scope.row.weekCommitRate }}</span
              >
              <span
                v-if="scope.row.weekCommitRate == '-'"
                style="text-align: right; display: block"
                >{{ scope.row.weekCommitRate }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批率%" prop="weekApprovalRate" width="46">
          <template slot-scope="scope">
            <span v-if="scope.row.reportType != 2" class="spanNum"
              >{{ scope.row.weekApprovalRate }}
            </span>
            <div v-if="scope.row.reportType == 2 && scope.row.weekApprovalRate !== null">
              <span
                v-if="scope.row.weekApprovalRate != '-'"
                class="linkSpan"
                @click="linKReportHistory(scope.row, 2)"
                >{{ scope.row.weekApprovalRate }}</span
              >
              <span
                v-if="scope.row.weekApprovalRate == '-'"
                style="text-align: right; display: block"
                >{{ scope.row.weekApprovalRate }}</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="日报" width="46">
        <el-table-column label="提交率%" prop="address" width="46">
          <template slot-scope="scope">
            <span v-if="scope.row.reportType != 1" class="spanNum"
              >{{ scope.row.dayCommitRate }}
            </span>
            <div v-if="scope.row.reportType == 1 && scope.row.dayCommitRate != null">
              <span
                v-if="scope.row.dayCommitRate != '-'"
                class="linkSpan"
                @click="linKReportHistory(scope.row, 1)"
                >{{ scope.row.dayCommitRate }}</span
              >
              <span
                v-if="scope.row.dayCommitRate == '-'"
                style="text-align: right; display: block"
                >{{ scope.row.dayCommitRate }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批率%" prop="address" width="46">
          <template slot-scope="scope">
            <span v-if="scope.row.reportType != 1" class="spanNum"
              >{{ scope.row.dayApprovalRate }}
            </span>
            <div v-if="scope.row.reportType == 1 && scope.row.dayApprovalRate != null">
              <span
                v-if="scope.row.dayApprovalRate != '-'"
                class="linkSpan"
                @click="linKReportHistory(scope.row, 1)"
                >{{ scope.row.dayApprovalRate }}</span
              >
              <span
                v-if="scope.row.dayApprovalRate == '-'"
                style="text-align: right; display: block"
                >{{ scope.row.dayApprovalRate }}</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <van-popup v-model="RegionShow" capture position="bottom">
      <van-picker
        :columns="companyList"
        show-toolbar
        value-key="deptName"
        @cancel="RegionShow = false"
        @confirm="onregionConfirm" />
    </van-popup>
    <van-popup v-model="SalesRegionShow" capture position="bottom">
      <van-picker
        :columns="regionList"
        show-toolbar
        value-key="deptName"
        @cancel="SalesRegionShow = false"
        @confirm="onSalesRegionConfirm" />
    </van-popup>
    <van-popup v-model="SalesDepartmentShow" capture position="bottom">
      <van-picker
        :columns="deptList"
        show-toolbar
        value-key="deptName"
        @cancel="SalesDepartmentShow = false"
        @confirm="onSalesDepartmentConfirm" />
    </van-popup>
    <van-popup v-model="StaffShow" capture position="bottom">
      <van-picker
        :columns="userList"
        show-toolbar
        value-key="nickName"
        @cancel="StaffShow = false"
        @confirm="onStaffConfirm" />
    </van-popup>

    <van-popup v-model="StartTimeShow" capture position="bottom">
      <van-datetime-picker
        v-model="strtcurrentDate"
        :max-date="strtmaxDate"
        :min-date="strtminDate"
        title="选择查找开始时间"
        type="date"
        @cancel="StartTimeShow = false"
        @confirm="onStartTimeConfirm" />
    </van-popup>
    <van-popup v-model="EndTimeShow" capture position="bottom">
      <van-datetime-picker
        v-model="endcurrentDate"
        :max-date="endmaxDate"
        :min-date="endminDate"
        title="选择查找结束时间"
        type="date"
        @cancel="EndTimeShow = false"
        @confirm="onEndTimeConfirm" />
    </van-popup>
  </div>
</template>
<script>
import request from '@/utils/request';
import { queryRates, getDeptInfo } from '@/api/index';
import timeico from '@/assets/Icon/datatims.png';

export default {
  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: [],
      tableList: [],
      seacherFormload: {
        companyId: '',
        regionId: '',
        parentId: '',
        startTime: '',
        endTime: '',
      },

      seacherForm: {
        companyId: '',
        regionId: '',
        parentId: '',
        startTime: '',
        endTime: '',
      },
    };
  },
  created() {
    this.seacherForm.startTime = this.parseTime(new Date(), '{y}-{m}-{d}');
    this.seacherFormload.startTime = this.parseTime(new Date(), '{y}-{m}-{d}');
    this.strtcurrentDate = new Date(this.parseTime(new Date(), '{y}-{m}-{d}'));
    this.seacherForm.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + '';
    this.seacherFormload.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 > 3) {
      setTimeout(() => {
        this.getDeptInfo('dept', 1);
      }, 1000);
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == '/reportingRate' && from.path == '/My/index') {
        this.seacherForm.startTime = this.parseTime(new Date(), '{y}-{m}-{d}');
        this.seacherFormload.startTime = this.parseTime(new Date(), '{y}-{m}-{d}');
        this.strtcurrentDate = new Date(this.parseTime(new Date(), '{y}-{m}-{d}'));
        this.seacherForm.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + '';
        this.seacherFormload.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + '';
        this.endminDate = new Date(
          this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'), 2)
        );
        this.deptCode = '';
        this.userCode = '';
        this.regionCode = '';
        this.seacherForm.parentId = '';
        this.seacherFormload.parentId = '';
        this.regionName = '全部';
        this.powerGrade = localStorage.getItem('powerGrade');
        this.getDeptInfo('dept');
        if (this.powerGrade > 3) {
          setTimeout(() => {
            this.getDeptInfo('dept', 1);
          }, 1000);
        }
      }
    },
  },
  methods: {
    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 (parseInt(month2) >= new Date().getMonth() + 1) {
            t2 = year2 + '-' + Months + '-' + days111;
          } 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;
            this.companyName = res.data.company[0].deptName;
            this.companyCode = res.data.company[0].deptId;
            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 = '';
            }
            this.queryRates();
          }
        } else if (type == 'user') {
          if (res.data.user != null) {
            this.userList = [{ nickName: '全部', userId: '' }].concat(res.data.user);
          }
        }
      });
    },
    dailyFn() {
      this.$router.push('/dailyDetails');
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    regionClick() {
      this.RegionShow = true;
    },
    SalesRegionClick(val) {
      this.SalesRegionShow = true;
    },
    SalesDepartmentClick() {
      this.SalesDepartmentShow = true;
    },
    StaffClick() {
      this.StaffShow = true;
    },
    StartTimeClick() {
      this.StartTimeShow = true;
    },
    EndTimeClick() {
      this.EndTimeShow = true;
    },
    onregionConfirm(val) {
      this.tableList = [];
      this.RegionShow = false;
      this.companyName = val.deptName;
      this.companyCode = val.deptId;
      this.regionName = '全部';
      this.regionCode = '';
      this.deptName = '全部';
      this.deptCode = '';
      this.userName = '全部';
      this.userCode = '';
      this.seacherForm.parentId = '';
      this.seacherFormload.parentId = '';
      this.getDeptInfo('dept', 1);
      this.queryRates();
    },
    onSalesRegionConfirm(val) {
      this.tableList = [];
      this.SalesRegionShow = false;
      this.regionName = val.deptName;
      this.seacherForm.parentId = '';
      this.seacherFormload.parentId = '';

      if (val.deptId != '') {
        this.regionCode = val.deptId;
        this.getDeptInfo('dept', 2);
        this.deptName = '全部';
        this.deptCode = '';
      } else {
        this.regionCode = '';
        this.deptName = '全部';
        this.deptCode = '';
        this.userName = '全部';
        this.userCode = '';
      }
      this.queryRates();
    },
    onSalesDepartmentConfirm(val) {
      this.tableList = [];
      this.SalesDepartmentShow = false;
      this.deptName = val.deptName;
      if (val.deptId != '') {
        this.deptCode = val.deptId;
        this.getDeptInfo('user');
      } else {
        this.userName = '全部';
        this.userCode = '';
      }
    },
    onStaffConfirm(val) {
      this.StaffShow = false;
      this.userName = val.nickName;
      this.userCode = val.userId;
    },
    onStartTimeConfirm(val) {
      this.seacherForm.startTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + '';
      this.seacherForm.parentId = '';
      this.seacherFormload.startTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + '';
      this.seacherFormload.parentId = '';
      this.tableList = [];
      this.StartTimeShow = false;
      if (
        new Date(val).getTime() <
        new Date(this.GetPreMonthDay(this.seacherForm.startTime, -2, 'end')).getTime()
      ) {
        this.endminDate = new Date(this.GetPreMonthDay(this.seacherForm.startTime, -2, 'end'));
        this.endmaxDate = new Date(this.GetPreMonthDay(this.seacherForm.startTime, -2, 'end'));
      } else {
        this.endminDate = new Date(val);
        this.endmaxDate = new Date(this.GetPreMonthDay(this.seacherForm.startTime, -2, 'end'));
      }
      if (
        new Date(this.seacherForm.startTime).getTime() >
          new Date(this.seacherForm.endTime).getTime() ||
        new Date(this.endmaxDate).getTime() < new Date(this.seacherForm.endTime).getTime()
      ) {
        // this.seacherForm.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + '';
        this.seacherFormload.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + '';

        this.endcurrentDate = this.GetPreMonthDay(this.seacherForm.startTime, -2);
      }
      this.queryRates();
    },
    onEndTimeConfirm(val) {
      this.tableList = [];
      this.seacherForm.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}');
      this.seacherForm.parentId = '';
      this.seacherFormload.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}');
      this.seacherFormload.parentId = '';
      this.strtmaxDate = new Date(val);
      if (
        new Date(this.seacherForm.startTime).getTime() >
        new Date(this.seacherForm.endTime).getTime()
      ) {
        this.seacherForm.startTime = this.seacherForm.endTime;
        this.seacherFormload.startTime = this.seacherForm.endTime;
      }
      this.queryRates();
      this.EndTimeShow = false;
    },
    queryRates() {
      this.toastLoading(0, '加载中...', true);
      this.seacherForm.companyId = this.companyCode;
      this.seacherFormload.companyId = this.companyCode;
      this.seacherForm.regionId = this.regionCode;
      this.seacherFormload.regionId = this.regionCode;
      queryRates(this.seacherForm).then((res) => {
        if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].reportType > 1) {
              res.data[i].hasChildren = true;
            }
          }
          this.tableList = res.data;
        } else {
          this.$toast.fail('数据获取失败');
        }
        this.toastLoading().clear();
      });
    },
    linKReportHistory(row, type) {
      if (type == 1) {
        var userId = '';
        var userName = '全部';
        if (row.userId == 'null') {
          userId = '';
          userName = '全部';
        } else {
          userId = row.userId;
          userName = row.userName;
        }
        this.$router.push({
          path: '/subordinateHistoricalDaily',
          query: {
            companyCode: this.companyCode,
            companyName: this.companyName,
            regionCode: row.regionId,
            regionName: row.regionName,
            deptCode: row.deptId,
            deptName: row.deptName + '销售部',
            userCode: userId,
            userName: userName,
            startTime: this.seacherForm.startTime,
            endTime: this.seacherForm.endTime,
          },
        });
      } else if (type == 2) {
        this.$router.push({
          path: '/subordinateHistoricalWeekly',
          query: {
            companyCode: this.companyCode,
            companyName: this.companyName,
            regionCode: row.regionId,
            regionName: row.regionName,
            deptCode: row.deptId,
            deptName: row.deptName + '销售部',
            startTime: this.seacherForm.startTime,
            endTime: this.seacherForm.endTime,
          },
        });
      } else {
        this.$router.push({
          path: '/doubleWeeklyHistorical',
          query: {
            companyCode: this.companyCode,
            companyName: this.companyName,
            regionCode: row.deptId,
            regionName: row.deptName + '销售大区',
            startTime: this.seacherForm.startTime,
            endTime: this.seacherForm.endTime,
          },
        });
      }
    },
    load(tree, treeNode, resolve) {
      this.toastLoading(0, '加载中...', true);
      if (tree.reportType == 2) {
        this.seacherFormload.parentId = tree.deptId;
      } else if (tree.reportType == 3) {
        // this.regionCode=tree.deptId
        // this.regionName=tree.deptName+"销售大区"
        this.seacherFormload.parentId = '';
        this.seacherFormload.regionId = tree.deptId;
      } else {
        this.seacherFormload.parentId = '';
      }
      request({
        url: 'mobile/reportMobile/queryRates',
        method: 'get',
        params: this.seacherFormload,
      }).then((res) => {
        if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].reportType > 1) {
              res.data[i].hasChildren = true;
            } else {
              res.data[i].hasChildren = false;
            }
          }
          resolve(res.data);
        } else {
          this.$toast.fail('数据获取失败');
        }
        this.toastLoading().clear();
      });
    },
  },
};
</script>
<style>
body {
  margin: 0;
}

.elTreeTable table {
  width: 100% !important;
}

.elTreeTable .el-table__cell:first-child .cell {
  padding-left: 2px !important;
}

.elTreeTable .el-table__cell {
  padding: 0px;
}

.elTreeTable .el-table__body td.el-table__cell {
  padding: 2px;
}

.elTreeTable table col {
  text-align: center;
}

.elTreeTable th.el-table__cell > .cell {
  padding: 1px !important;
}

.elTreeTable {
  font-size: 12px !important;
}

.elTreeTable th.el-table__cell {
  padding: 1px !important;
}

.elTreeTable th.el-table__cell > .cell {
  text-align: center;
}

.elTreeTable .el-table__header tr:first-child th.el-table__cell:first-child .cell {
  width: 98px;
}

.elTreeTable .linkSpan {
  text-decoration: underline;
  color: #0057ba;
  display: block;
  text-align: right;
  padding: 6px 10px;
}

.elTreeTable td.el-table__cell div {
  padding: 0px;
}

.elTreeTable .cell .spanNum {
  display: block;
  text-align: right;
  padding: 6px 10px;
}

.elTreeTable .el-table__expand-icon {
  float: right;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
  margin-top: 4px;
}
.contentpd16 {
  padding: 16px;
  background-color: white;
}
.contentpd16 .van-cell {
  background-color: #ebf4ff;
  margin: 8px 0;
  border-radius: 5px;
  padding: 4px 16px;
}
</style>