erp_fans/src/views/EHSD/saleContract/dailyReport/index.vue

<template>
  <div class="pageIndexClass">
    <div style="background-color: #fff; padding: 15px 15px 0">

      <el-tabs v-model="sourceList.pagination.current" type="card" class="demo-tabs" @tab-change="changeCurrent">
        <el-tab-pane label="日报表" name="日报表"></el-tab-pane>
        <el-tab-pane label="月报表" name="月报表"></el-tab-pane>
        <el-tab-pane label="其他" name="其他"></el-tab-pane>
      </el-tabs>
      <el-form :inline="true" :model="sourceList.pagination">
        <el-form-item label="其他" v-if="sourceList.pagination.current == '其他'">
          <el-date-picker v-model="sourceList.pagination.beginTime" type="date" placeholder="开始日期" value-format="YYYY-MM-DD 00:00:00"
                          :disabled-date="disabledFn" />
          <div style="padding:0 10px">
            -
          </div>
          <el-date-picker v-model="sourceList.pagination.endTime" type="date" placeholder="结束日期" value-format="YYYY-MM-DD 23:59:59"
                          :disabled-date="disabledFn" />
        </el-form-item>
        <el-form-item>
          <el-button  v-if="sourceList.pagination.current == '其他'" type="primary" @click="onQuery" class="query">搜索</el-button>
          <el-button  v-if="sourceList.pagination.current == '其他'" @click="onReset()">重置</el-button>
          <el-button type="primary" @click="exportExcel">导出Excel</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="background:#fff;padding:15px;margin-top:10px">
      <!-- 如果是日报表，则所有列宽度平均 -->
      <el-table v-if="sourceList.pagination.current == '日报表'" :data="sourceList.data" :height="tableHeight" style="width: 100%" v-loading="loading" border id="my-table">
        <el-table-column prop="groupName" label="组别" fixed="left" />
        <el-table-column prop="saleUserName" label="业务员" fixed="left" />

        <template v-if="dayList && dayList.length>0">
          <el-table-column v-for="col in dayList" :key="col" :label="col" align="center">
            <el-table-column prop="address" label="系统" min-width="" align="right">
              <template #default="{ row, $index }">
                <div style="width: 100%" :class="today==col?'isToday':''" v-if="row[col] && row[col].sumContractAmount">
                  {{moneyFormat(row[col].sumContractAmount,2)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="聚水潭" min-width="" align="right">
              <template #default="{ row, $index }">
                <div style="width: 100%" :class="today==col?'isToday':''" v-if="row[col] && row[col].sumJstAmount">
                  {{moneyFormat(row[col].sumJstAmount,2)}}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </template>

        <el-table-column align="right" fixed="right">
          <template #header>
            <div>
              系统
              <br>
              月累计
            </div>
          </template>
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.sumContractAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="right" fixed="right">
          <template #header>
            <div>
              聚水潭
              <br>
              月累计
            </div>
          </template>
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.sumJstAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="right" fixed="right">
          <template #header>
            <div>
              合计
              <br>
              月累计
            </div>
          </template>
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.sumAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="月目标" align="right" fixed="right">
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.targetAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="月达成率" align="right" fixed="right">
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.finishRate,2)}} %
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ranking" label="排名" align="center" fixed="right" />
      </el-table>
      <!-- 否则，使用固定值 -->
      <el-table v-else :data="sourceList.data" :height="tableHeight" style="width: 100%" v-loading="loading" border id="my-table">
        <el-table-column prop="groupName" label="组别" width="110" fixed="left" />
        <el-table-column prop="saleUserName" label="业务员" width="80" fixed="left" />

        <template v-if="dayList && dayList.length>0">
          <el-table-column v-for="col in dayList" :key="col" :label="col" align="center">
            <el-table-column prop="address" label="系统" min-width="100" align="right">
              <template #default="{ row, $index }">
                <div style="width: 100%" :class="today==col?'isToday':''" v-if="row[col] && row[col].sumContractAmount">
                  {{moneyFormat(row[col].sumContractAmount,2)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="聚水潭" min-width="100" align="right">
              <template #default="{ row, $index }">
                <div style="width: 100%" :class="today==col?'isToday':''" v-if="row[col] && row[col].sumJstAmount">
                  {{moneyFormat(row[col].sumJstAmount,2)}}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </template>

        <el-table-column width="columnWithWidth" align="right" fixed="right">
          <template #header>
            <div>
              系统
              <br>
              月累计
            </div>
          </template>
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.sumContractAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="95" align="right" fixed="right">
          <template #header>
            <div>
              聚水潭
              <br>
              月累计
            </div>
          </template>
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.sumJstAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="95" align="right" fixed="right">
          <template #header>
            <div>
              合计
              <br>
              月累计
            </div>
          </template>
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.sumAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="月目标" width="90" align="right" fixed="right">
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.targetAmount,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="月达成率" width="90" align="right" fixed="right">
          <template #default="{ row, $index }">
            <div style="width: 100%">
              {{moneyFormat(row.finishRate,2)}} %
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ranking" label="排名" width="60" align="center" fixed="right" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import { getMonthBetween } from "@/utils/date.js";
import moment from "moment";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const tableHeight = ref(0);
const getTableHeight = () => {
  tableHeight.value = window.innerHeight - 150 - 79 - 55;
};
getTableHeight();
window.addEventListener("resize", () => {
  getTableHeight();
});
const today = ref(moment().format("yyyy-MM-DD"));
const beginTime = ref(
  moment().startOf("month").format("yyyy-MM-DD") + " 00:00:00"
);
const endTime = ref(moment().endOf("month").format("YYYY-MM-DD") + " 23:59:59");
const weekBegin = ref(
  moment().startOf("week").format("yyyy-MM-DD") + " 00:00:00"
);
const weekEnd = ref(moment().endOf("week").format("yyyy-MM-DD") + " 23:59:59");
const sourceList = ref({
  data: [],
  pagination: {
    pageNum: 1,
    pageSize: 10,
    beginTime: "",
    endTime: "",
    // current: "本月",
    current: "月报表",
  },
});

const columnWithWidth = undefined;
const loading = ref(false);
const getList = (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  console.log(sourceList.value.pagination, "123123");
  loading.value = true;
  proxy
    .post("/deptPerf/monthlyReporting", sourceList.value.pagination)
    .then((res) => {
      sourceList.value.data = res;
      setTimeout(() => {
        loading.value = false;
      }, 500);
    });
};

const dayList = ref([]);
const onQuery = () => {
  loading.value = true;
  if (
    sourceList.value.pagination.beginTime &&
    sourceList.value.pagination.endTime
  ) {
    dayList.value = getMonthBetween(
      sourceList.value.pagination.beginTime.slice(0, 10),
      sourceList.value.pagination.endTime.slice(0, 10)
    );
    nextTick(() => {
      setTimeout(() => scrollIntoEle(), 1000);
    });
  }
  getList();
};

const changeCurrent = (val) => {
  console.log(val);
  switch (val) {
    // case "本周":
    //   sourceList.value.pagination.beginTime = weekBegin.value;
    //   sourceList.value.pagination.endTime = weekEnd.value;
    //   break;
    case "日报表":
      sourceList.value.pagination.beginTime = today.value + " 00:00:00";
      sourceList.value.pagination.endTime = today.value + " 23:59:59";
      break;
    case "月报表":
      sourceList.value.pagination.beginTime = beginTime.value;
      sourceList.value.pagination.endTime = endTime.value;
      break;
    case "其他":
      sourceList.value.pagination.beginTime = beginTime.value;
      sourceList.value.pagination.endTime = endTime.value;
      break;
  }
  onQuery();
};

const onReset = (val='其他') => {
  sourceList.value.pagination.current = val;
  sourceList.value.pagination.beginTime = beginTime.value;
  sourceList.value.pagination.endTime = endTime.value;
  onQuery();
};
onReset('月报表');

// const nowYearMonth = ref(moment().format("YYYY-MM"));
const disabledFn = (date) => {
  if (
    moment(date).isBefore(beginTime.value) ||
    moment(date).isAfter(endTime.value)
  ) {
    return true;
  } else {
    return false;
  }
};

const scrollIntoEle = () => {
  let eles = document.querySelectorAll(".isToday");
  if (eles && eles[0]) {
    eles[0].scrollIntoView({
      // behavior: "smooth",
      block: "start",
      inline: "start",
    });
  }
};

const exportExcel = () => {
  proxy.msgTip("正在导出，请稍后", 2);
  const wb = XLSX.utils.table_to_book(document.querySelector("#my-table")); // 关联dom节点
  // 设置百分比列的单元格样式
  const percentStyle = {
    font: { bold: true },
    fill: { fgColor: { rgb: "FFFF00" } },
    border: { top: { style: "thin" }, bottom: { style: "thin" } },
  };

  if (wb.Sheets.Sheet1) {
    // 达成率单元格的key开头
    let cellKey = "";
    for (const key in wb.Sheets.Sheet1) {
      let value = wb.Sheets.Sheet1[key];
      if (value && value.v == "月达成率") {
        cellKey = key.match(/[a-zA-Z]+/g)[0];
      }
      // key有包含cellKey的
      if (cellKey && key.includes(cellKey)) {
        // 单元格的样式
        wb.Sheets.Sheet1[key].s = percentStyle;
        // 用于指定单元格中显示值的格式，例如日期格式、百分比格式等
        wb.Sheets.Sheet1[key].z = "0.00%";
      }
    }
  }
  const wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], {
        type: "application/octet-stream",
      }),
      "销售报表.xlsx"
    );
  } catch (e) {
    console.log(e, wbout);
  }
  return wbout;
};
</script>

<style lang="scss" scoped>
:deep(
    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th
  ) {
  height: auto !important;
}
:deep(.el-table th.el-table__cell) {
  background: #fff !important;
}
:deep(.el-table .el-table__cell) {
  padding: 0 !important;
}
:deep(.el-table .cell) {
  padding: 0 6px !important;
  font-size: 12px !important;
}
.query {
  background: #20b2aa;
  color: #fff;
  border: 1px solid #20b2aa;
}
.isToday {
  // background: red !important;
  // color: #fff !important;
  color: #409eff;
}
</style>