106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div class="default-main">
|
||
|
|
<div class="mb10" style="display: flex; justify-content: flex-end">
|
||
|
|
<el-upload
|
||
|
|
ref="upload"
|
||
|
|
action=""
|
||
|
|
:auto-upload="false"
|
||
|
|
:show-file-list="false"
|
||
|
|
:limit="1"
|
||
|
|
:on-change="beforeUpload"
|
||
|
|
>
|
||
|
|
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||
|
|
</el-upload>
|
||
|
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||
|
|
<el-button type="primary" icon="el-icon-ArrowLeftBold" @click="emit('shutDown')">返回</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="display: flex">
|
||
|
|
<div id="luckysheet" :style="{ height: height, flex: 1 }"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { exportExcel } from './export.js'
|
||
|
|
import { mainHeight } from '@/utils/layout'
|
||
|
|
import LuckyExcel from 'luckyexcel'
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import { viewCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
|
||
|
|
const emit = defineEmits(['shutDown'])
|
||
|
|
|
||
|
|
const height = mainHeight(65).height
|
||
|
|
const options: any = ref({
|
||
|
|
container: 'luckysheet',
|
||
|
|
title: '', // 表 头名
|
||
|
|
lang: 'zh', // 中文
|
||
|
|
showtoolbar: false, // 是否显示工具栏
|
||
|
|
showinfobar: false, // 是否显示顶部信息栏
|
||
|
|
showsheetbar: true, // 是否显示底部sheet按钮
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
name: 'Cell',
|
||
|
|
index: 0,
|
||
|
|
defaultRowHeight: 27,
|
||
|
|
defaultColWidth: 105,
|
||
|
|
chart: [] //图表配置
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
// 加载luckysheet
|
||
|
|
const info = () => {
|
||
|
|
luckysheet.create(options.value)
|
||
|
|
}
|
||
|
|
//绑定value
|
||
|
|
const setValue = (e: any) => {
|
||
|
|
let data = luckysheet.getRange()
|
||
|
|
luckysheet.setCellValue(
|
||
|
|
data[0].row[0],
|
||
|
|
data[0].column[0],
|
||
|
|
{
|
||
|
|
v: e[e.length - 1],
|
||
|
|
tr: e
|
||
|
|
}
|
||
|
|
// checkedNodes[0].data.label
|
||
|
|
)
|
||
|
|
}
|
||
|
|
// 下载表格
|
||
|
|
const downloadExcel = () => {
|
||
|
|
exportExcel(luckysheet.getAllSheets(), '报表模板')
|
||
|
|
}
|
||
|
|
// 导入
|
||
|
|
const beforeUpload = (file: any) => {
|
||
|
|
LuckyExcel.transformExcelToLucky(file.raw, function (exportJson: any) {
|
||
|
|
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
|
||
|
|
ElMessage.warning('读取excel文件内容失败,目前只能上传xlsx文件!')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
luckysheet.destroy()
|
||
|
|
options.value.title = exportJson.info.name
|
||
|
|
options.value.data = exportJson.sheets
|
||
|
|
luckysheet.create(options.value)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const open = async (row: any) => {
|
||
|
|
|
||
|
|
await viewCustomReportTemplateById({ id: row.id }).then((Response:any) => {
|
||
|
|
Response.forEach((item: any) => {
|
||
|
|
item.celldata.forEach((k: any) => {
|
||
|
|
item.data[k.r][k.c].v = k.v
|
||
|
|
})
|
||
|
|
})
|
||
|
|
options.value.data = Response
|
||
|
|
})
|
||
|
|
|
||
|
|
info()
|
||
|
|
}
|
||
|
|
defineExpose({ open })
|
||
|
|
onMounted(() => {})
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:deep(.el-tab-pane) {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
</style>
|