renli-pc/src/pages/storeManage/managers/index.vue

<template>
  <div>
    <div class="flex justify-start align-start">
      <el-form inline>
        <el-form-item label="门店编码" v-if="headOffice==1">
          <el-input class="form-width" style="padding-left:0px;" ref="" oninput="this.value=this.value.replace(/\D/g,'')" pattern="[0-9]*" maxlength="11" v-model="queryForm.storeNum">
            <el-button size="mini" slot="append" icon="el-icon-search" @click="openStore"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="门店名称" v-if="headOffice==1">
          <div class="form-width">
            {{queryForm.storeName}}
          </div>
        </el-form-item><br>
        <el-form-item label="高管编码">
          <el-input class="form-width" style="padding-left:0px;" ref="" oninput="this.value=this.value.replace(/\D/g,'')" pattern="[0-9]*" maxlength="11" v-model="queryForm.brandNumber">
            <el-button size="mini" slot="append" icon="el-icon-search" @click="openStaff"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="高管名称">
          <div class="form-width" style="width: 100px;">
            {{queryForm.staffName}}
          </div>
        </el-form-item>
        <el-form-item label="选择日">
          <el-date-picker v-model="days" :picker-options="pickerOptions" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" type="primary" @click="changeMonth">查询</el-button>
        <el-button size="mini" type="success" @click="exit()">导出</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="block">
        <span class="demonstration padding-left-xs">选择日</span>
        <el-date-picker v-model="days" :picker-options="pickerOptions" @change="changeMonth" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" type="success" @click="exit()">导出</el-button>
        <el-button size="mini" type="success" v-role="40012002" @click="exits()">全部明细</el-button>
      </div> -->
    </div>
    <el-table border v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @row-dblclick="rowdbClick" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}">
      <el-table-column show-overflow-tooltip align="center" min-width="120" prop="startDate" label="开始时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="120" prop="endDate" label="结束时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="storeNum" label="门店编码"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="120" prop="storeName" label="门店名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="brandNumber" label="水牌号"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="staffName" label="员工名称"></el-table-column>
      <!-- <el-table-column show-overflow-tooltip align="center" min-width="100" prop="chia" label="成交业绩"></el-table-column> -->
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="cooperationAchi" label="虚业绩">
        <template slot-scope="scope">
          {{ ( scope.row.cooperationAchi ).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="chia" label="实业绩">
        <template slot-scope="scope">
          {{ ( scope.row.chia ).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100"  label="成交业绩">
        <template slot-scope="scope">
          {{ (scope.row.chia + scope.row.cooperationAchi).toFixed(2) }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block margin-top-xs">
      <!-- 分页组件 -->
      <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.pageNum" :page-sizes="[10,20,30,40,50]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <store ref="store" @storeData="storeData"></store>
    <manager ref="manager" @managerData="managerData"></manager>
    <detail ref="detail" @detailData="detailData"></detail>
    <staff ref="staff" @staffData="staffData"></staff>
  </div>
</template>

<script>
import {
  salesman,
  salesmanExportachi,
  exportachiMXwhole,
} from "@/api/storeManage.js";
import store from "@/components/store/radio/index";
import manager from "@/components/manager/index";
import detail from "./detail/index";
import staff from "@/components/staff/index";
export default {
  components: { store, manager, detail, staff },
  data() {
    return {
      days: [], //日期数组
      form: {}, //主对象
      list: [], //主数组
      total: 0, //分页总条数
      headOffice: sessionStorage.getItem("headOffice") * 1, //是否总店
      storeId: sessionStorage.getItem("storeId"), //当前门店id
      storeName: sessionStorage.getItem("storeName"), //当前门店名称
      listLoading: false, //list加载提示开启动画
      elementLoadingText: "加载中...", //list加载提示文字
      queryForm: {
        //查询对象
        pageNum: 1,
        pageSize: 10,
      },
      pickerOptions: {
        //组件限制方法
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          const self = this;
          if (!!self.choiceDate) {
            const startDay =
              (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
            const endDay =
              (new Date(
                new Date(self.choiceDate).getFullYear(),
                new Date(self.choiceDate).getMonth() + 1,
                0
              ).getDate() -
                new Date(self.choiceDate).getDate()) *
              24 *
              3600 *
              1000;
            let minTime = self.choiceDate - startDay;
            let maxTime = self.choiceDate + endDay;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
    };
  },
  methods: {
    //导出方法
    exit() {
      salesmanExportachi(this.queryForm).then((res) => {
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "高管业绩导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    //导出全部明细
    exits() {
      exportachiMXwhole(this.queryForm).then((res) => {
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "高管业绩全部明细导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    //打开选择门店弹窗
    openStore() {
      this.$refs.store.show();
    },
    //打开选择员工弹窗
    openStaff() {
      this.$refs.manager.show();
    },
    detailData() {},
    //选中门店返回方法
    storeData(v) {
      // console.log(v);
      // this.queryForm.storeId = v.id;
      // this.queryForm.storeNum = v.storeNum;
      // this.queryForm.storeName = v.storeName;
      this.$set(this.queryForm,'storeId',v.id)
      this.$set(this.queryForm,'storeNum',v.storeNum)
      this.$set(this.queryForm,'storeName',v.storeName)

      // this.getData();
    },
    //高管占比返回方法
    managerData(v) {
      // this.queryForm.staffName = v.staffName;
      // this.queryForm.brandNumber = v.brandNumber;
      this.$set(this.queryForm,'staffName',v.staffName)
      this.$set(this.queryForm,'brandNumber',v.brandNumber)
      // this.getData();
    },
    //选中员工返回方法
    staffData(v) {
      this.queryForm.staffName = v.staffName;
      this.queryForm.brandNumber = v.brandNumber;
      // this.getData();
    },
    //时间组件时间改变方法
    changeMonth() {
      let date = this.formatTime(this.days[1], "YYYY-MM-DD 23:59:59");
      this.days = [this.days[0], date];
      this.queryForm.startDate = this.days[0];
      this.queryForm.endDate = date;
      this.getData();
    },
    //列表数组双击方法
    rowdbClick(row) {
      row.staffType = 0;
      row.startDate = this.queryForm.startDate;
      row.endDate = this.queryForm.endDate;
      this.$refs.detail.show(row);
    },
    //分页方法
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.getData();
      //console.log(val);
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getData();
      //console.log(val);
    },
    //获取数据
    async getData() {
      if (this.headOffice == 0) {
        this.queryForm.storeId = this.storeId;
        this.queryForm.storeName = this.storeName;
      }
      this.queryForm.staffType = 0;
      salesman(this.queryForm).then((res) => {
        if (res.code == "000000") {
          this.list = res.rows;
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
  created() {
    let sDate = this.formatTime(new Date(), "YYYY-MM-DD 00:00:00");
    let eDate = this.formatTime(new Date(), "YYYY-MM-DD 23:59:59");
    this.days = [sDate, eDate];
    this.queryForm.startDate = sDate;
    this.queryForm.endDate = eDate;
    this.getData();
  },
};
</script>

<style>
</style>