diff --git a/src/utils/export.js b/src/utils/export.js
new file mode 100644
index 00000000..c5390f0e
--- /dev/null
+++ b/src/utils/export.js
@@ -0,0 +1,180 @@
+import * as XLSX from 'xlsx';
+import FileSaver from 'file-saver';
+import XLSXS from 'xlsx-style-vite';
+import { getObjType, isNumber } from '@/utils/util';
+
+/**
+ * 根据DOM进行导出
+ * @param {Element} dom
+ * @param {String} fileName
+ */
+export function exportExcelByDom(dom, fileName) {
+ const book = XLSX.utils.book_new();
+ const sheet = XLSX.utils.table_to_sheet(dom);
+
+ XLSX.utils.book_append_sheet(book, sheet, 'Sheet1');
+ addRangeBorder(sheet['!merges'], sheet); // 给合并行列赋值样式
+ setExcelStyle(sheet); // 设置样式
+ let wbout = XLSXS.write(book, {
+ bookType: 'xlsx',
+ bookSST: false,
+ type: 'binary',
+ });
+ try {
+ FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), fileName);
+ } catch (e) {
+ console.error(e, wbout, '----->>>');
+ }
+}
+
+// 设置导出Excel样式（统一样式）
+function setExcelStyle(data, wpx = 80) {
+ data['!cols'] = [];
+ const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows'];
+ console.log('data :>> ', data);
+ for (let key in data) {
+ if (data.hasOwnProperty(key)) {
+ if (!excludes.includes(key)) {
+ data[key].s = {
+ alignment: {
+ horizontal: 'center', //水平居中对齐
+ vertical: 'center', // 垂直居中
+ wrapText: true,
+ },
+ border: {
+ top: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ bottom: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ left: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ right: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ },
+ // fill: {
+ // fgColor: { rgb: "00a2ff" },
+ // },
+ font: {
+ sz: 11,
+ color: {
+ rgb: '000000',
+ },
+ },
+ bold: true,
+ numFmt: 0,
+ };
+ const _text = data[key].v;
+ getObjType(_text) === 'string' && (data[key].v = _text.replace('-->', ''));
+ // 单元格宽度
+ data['!cols'].push({ wpx });
+ // 根据不同行添加单元格背景颜色
+ let color = 'ffffff';
+ // 文字颜色
+ let textColor = '000000';
+ let num = Number(key.slice(1));
+ num = isNumber(num) ? num : Number(key.slice(2));
+ if (num === 1) {
+ color = '172e60';
+ textColor = 'ffffff';
+ data[key].s.font.sz = 16;
+ } else {
+ }
+ data[key].s.fill = {
+ fgColor: { rgb: color, patternType: 'solid' },
+ };
+
+ data[key].s.font.color.rgb = textColor;
+ }
+ }
+ }
+}
+
+//给合并行列赋值样式
+function addRangeBorder(range, ws) {
+ let cols = [
+ 'A',
+ 'B',
+ 'C',
+ 'D',
+ 'E',
+ 'F',
+ 'G',
+ 'H',
+ 'I',
+ 'J',
+ 'K',
+ 'L',
+ 'M',
+ 'N',
+ 'O',
+ 'P',
+ 'Q',
+ 'R',
+ 'S',
+ 'T',
+ 'U',
+ 'V',
+ 'W',
+ 'X',
+ 'Y',
+ 'Z',
+ 'AA',
+ 'AB',
+ 'AC',
+ 'AD',
+ 'AE',
+ 'AF',
+ 'AG',
+ ];
+ console.log('range :>> ', range);
+ range.forEach(item => {
+ console.log('item :>> ', item);
+ let style = {
+ s: {
+ border: {
+ top: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ bottom: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ left: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ right: {
+ style: 'thin',
+ color: { rgb: '000000' },
+ },
+ },
+ },
+ };
+ // 处理合并行
+ for (let i = item.s.c; i <= item.e.c; i++) {
+ ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style;
+ // 处理合并列
+ for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
+ // console.log(' ws[cols[k] + item.e.r] :>> ', ws[cols[k] + item.e.r]);
+ ws[cols[i] + k] = ws[cols[i] + k] || style;
+ }
+ }
+ });
+ return ws;
+}
+
+function s2ab(s) {
+ var buf = new ArrayBuffer(s.length);
+ var view = new Uint8Array(buf);
+ for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+ return buf;
+}
diff --git a/src/views/distribution/artery/TripartiteTransfer.vue b/src/views/distribution/artery/TripartiteTransfer.vue
index ea3cdfc5..e4011a9e 100644
--- a/src/views/distribution/artery/TripartiteTransfer.vue
+++ b/src/views/distribution/artery/TripartiteTransfer.vue
@@ -116,14 +116,14 @@
-
装载卸车清单(财务)
-
+ -->
@@ -433,6 +434,9 @@
取 消
+
+ 导 出
+
打 印
@@ -535,6 +539,8 @@ import { useRouter } from 'vue-router';
import type { UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
+import { dateNow } from '@/utils/date';
+import { exportExcelByDom } from '@/utils/export';
import print from '@/utils/print';
// 获取路由实例
@@ -692,6 +698,7 @@ const details = reactive
({
/** 表格实例 */
const tableNode = ref();
+const truckLoadingDetailNodeRef = ref();
// details.columnList.payMethodName.checkArr = details.payMethodOptions;
const { search, query, shortcuts, data, loadingObj, selectionList, drawerShow, page, popUpShow } =
@@ -1486,6 +1493,14 @@ const handlePrint = () => {
print(nodeList);
};
+
+/** 装车清单导出 */
+const handleExportTruckLoadingDetail = () => {
+ exportExcelByDom(
+ truckLoadingDetailNodeRef.value.$el,
+ details.selectionList[0].carsNo + '' + dateNow() + '.xlsx'
+ );
+};