88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
title="导出预览"
|
||
|
|
width="1400px"
|
||
|
|
:model-value="modelValue"
|
||
|
|
@close="closed"
|
||
|
|
>
|
||
|
|
<el-table :data="data" :id="myId" style="width: 100%" border>
|
||
|
|
<el-table-column label="序号" type="index" align="center" width="80" />
|
||
|
|
<el-table-column
|
||
|
|
v-for="(item, index) in tabOption"
|
||
|
|
:key="index + 'tab'"
|
||
|
|
:prop="item.prop"
|
||
|
|
:label="item.label"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
<template v-if="item.dict" #default="{ row }">
|
||
|
|
<dict-tag :options="item.dict" :value="row[item.prop]" :tag="false" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="closed">取消</el-button>
|
||
|
|
<el-button type="primary" @click="exportExcel">确定</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
|
||
|
|
import FileSaver from "file-saver";
|
||
|
|
import * as XLSX from "xlsx";
|
||
|
|
const tabRef = ref(null);
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
tabOption: {
|
||
|
|
type: Array,
|
||
|
|
require: []
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
required: []
|
||
|
|
},
|
||
|
|
myId: {
|
||
|
|
type: String,
|
||
|
|
require: ""
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
require: ""
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["update:modelValue"]);
|
||
|
|
const closed = () => {
|
||
|
|
emits("update:modelValue", false);
|
||
|
|
};
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
function exportExcel() {
|
||
|
|
let xlsxParam = { raw: true };
|
||
|
|
let wb = XLSX.utils.table_to_book(
|
||
|
|
document.querySelector("#" + props.myId),
|
||
|
|
xlsxParam
|
||
|
|
);
|
||
|
|
let wbout = XLSX.write(wb, {
|
||
|
|
bookType: "xlsx",
|
||
|
|
bookSST: true,
|
||
|
|
type: "array"
|
||
|
|
});
|
||
|
|
closed();
|
||
|
|
try {
|
||
|
|
FileSaver.saveAs(
|
||
|
|
new Blob([wbout], { type: "application/octet-stream" }),
|
||
|
|
`${props.title}.xlsx`
|
||
|
|
);
|
||
|
|
} catch (e) {
|
||
|
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||
|
|
}
|
||
|
|
return wbout;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|