|
|
@@ -2,7 +2,11 @@
|
|
|
<div class="pageIndexClass">
|
|
|
<div class="content">
|
|
|
<byTable :source="sourceList.data" :pagination="sourceList.pagination" :selectConfig="selectConfig" :config="config" highlight-current-row
|
|
|
- :action-list="[
|
|
|
+ :action-list="[{
|
|
|
+ text: '导出Excel',
|
|
|
+ action: () => exportExcel(),
|
|
|
+ disabled: false,
|
|
|
+ }
|
|
|
]" @get-list="getList" :hideTable="true" :hidePagination="true">
|
|
|
<template #code="{item}">
|
|
|
<div style="width:100%">
|
|
|
@@ -12,8 +16,18 @@
|
|
|
</byTable>
|
|
|
|
|
|
<div style="padding:0 15px;background:#fff">
|
|
|
- <el-table :data="sourceList.data" :height="tableHeight" style="width: 100%;margin-top:-10px" v-loading="loading" border id="my-table">
|
|
|
- <el-table-column prop="name" label="快递公司" width="130" fixed="left" />
|
|
|
+ <el-table :data="sourceList.data" :height="tableHeight" style="width: 100%;margin-top:-10px" v-loading="loading" border
|
|
|
+ :span-method="objectSpanMethod" :row-class-name="getRowClass" id="my-table">
|
|
|
+ <el-table-column prop="name" label="快递公司" width="130" fixed="left">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <span v-if="$index < sourceList.data.length - 1"> {{row.name}}</span>
|
|
|
+ <div style="text-align:right" v-else>
|
|
|
+ 合计：
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="yearBeginPayableBalance" label="年初余额" width="80" fixed="left" align="right">
|
|
|
<template #default="{ row, $index }">
|
|
|
<div style="width: 100%">
|
|
|
@@ -40,15 +54,15 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="抵扣充值" width="80" align="right">
|
|
|
<template #default="{ row, $index }">
|
|
|
- <div style="width: 100%" v-if="row[col.key] && row[col.key].deductionAmount">
|
|
|
- {{moneyFormat(row[col.key].deductionAmount,2)}}
|
|
|
+ <div style="width: 100%" v-if="row[col.key] && row[col.key].paymentDeductionAmount">
|
|
|
+ {{moneyFormat(row[col.key].paymentDeductionAmount,2)}}
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="期末余额" width="80" align="right">
|
|
|
<template #default="{ row, $index }">
|
|
|
- <div style="width: 100%" v-if="row[col.key] && row[col.key].endingPayableBalance">
|
|
|
+ <div style="width: 100%">
|
|
|
{{moneyFormat(row[col.key].endingPayableBalance,2)}}
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -77,6 +91,8 @@ import { computed, ref } from "vue";
|
|
|
import byTable from "@/components/byTable/index";
|
|
|
import byForm from "@/components/byForm/index";
|
|
|
import moment from "moment";
|
|
|
+import FileSaver from "file-saver";
|
|
|
+import * as XLSX from "xlsx";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const tableHeight = ref(0);
|
|
|
@@ -665,6 +681,80 @@ const getDtl = (row) => {
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+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;
|
|
|
+};
|
|
|
+
|
|
|
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
+ // 手动配置合计列
|
|
|
+ if (rowIndex == sourceList.value.data.length - 1) {
|
|
|
+ if (columnIndex == 0) {
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 2,
|
|
|
+ };
|
|
|
+ } else if (columnIndex == 1) {
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 0,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 1,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const getRowClass = ({ row, rowIndex }) => {
|
|
|
+ if (rowIndex == sourceList.value.data.length - 1) {
|
|
|
+ return "sumRow";
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -687,4 +777,12 @@ const getDtl = (row) => {
|
|
|
padding: 0 8px !important;
|
|
|
font-size: 12px !important;
|
|
|
}
|
|
|
+
|
|
|
+:deep(.sumRow) {
|
|
|
+ background-color: #f5f7fa !important;
|
|
|
+ .el-table-fixed-column--left,
|
|
|
+ .el-table-fixed-column--right {
|
|
|
+ background-color: #f5f7fa !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
cz