|
@@ -0,0 +1,412 @@
|
|
|
+<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> -->
|
|
|
+
|
|
|
+ <el-form :inline="true" :model="sourceList.pagination">
|
|
|
+ <el-form-item label="月份">
|
|
|
+ <el-date-picker v-model="sourceList.pagination.beginTime" type="month" placeholder="开始日期" value-format="YYYY-MM" @change="handleChangeDate"
|
|
|
+ :clearable="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onQuery" class="query">搜索</el-button>
|
|
|
+ <el-button @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 :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;
|
|
|
+};
|
|
|
+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) => {
|
|
|
+ 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 = () => {
|
|
|
+ sourceList.value.pagination.beginTime = beginTime.value;
|
|
|
+ sourceList.value.pagination.endTime = endTime.value;
|
|
|
+ onQuery();
|
|
|
+};
|
|
|
+onReset();
|
|
|
+
|
|
|
+const handleChangeDate = (val) => {
|
|
|
+ sourceList.value.pagination.beginTime =
|
|
|
+ moment(val).startOf("month").format("yyyy-MM-DD") + " 00:00:00";
|
|
|
+ sourceList.value.pagination.endTime =
|
|
|
+ moment(val).endOf("month").format("YYYY-MM-DD") + " 23:59:59";
|
|
|
+ onQuery();
|
|
|
+};
|
|
|
+
|
|
|
+// 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>
|