联调 自定义报表

src/views/system/reportForms/luckysheet.vue

@@ -0,0 +1,144 @@
+<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-Check" @click="preservation">保存</el-button>
+            <el-button type="primary" icon="el-icon-Close" @click="emit('shutDown')">返回</el-button>
+        </div>
+
+        <div style="display: flex">
+            <div id="luckysheet" :style="{ height: height, flex: 1 }"></div>
+            <bind style="width: 500px" class="ml10" @setValue="setValue" />
+        </div>
+        <!-- 信息框 -->
+        <addForm ref="formFer" @submitForm="submitForm" />
+    </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 { addTemplate, dateTemplateup, viewCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
+import bind from './bind.vue'
+import addForm from './form.vue'
+const emit = defineEmits(['shutDown'])
+const formFer = ref()
+const title = ref('')
+const list = ref({})
+const height = mainHeight(65).height
+const options: any = ref({
+    container: 'luckysheet',
+    title: '', // 表 头名
+    lang: 'zh', // 中文
+    showtoolbar: true, // 是否显示工具栏
+    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 preservation = () => {
+    formFer.value.open(title.value, list.value)
+}
+// 新增
+const submitForm = (formdata: any, text: string) => {
+    console.log('🚀 ~ submitForm ~ text:', text)
+    let userStr = JSON.stringify(luckysheet.getAllSheets())
+    let blob = new Blob([userStr], {
+        type: 'application/json;charset=UTF-8'
+    })
+    let files = new window.File([blob], 'content.json', {
+        type: 'application/json;charset=UTF-8'
+    })
+    let params = new FormData()
+
+    params.append('fileContent', files)
+    params.append('deptId', formdata.deptId)
+    params.append('valueTitle', formdata.deptId)
+    params.append('name', formdata.name)
+    params.append('reportType', formdata.reportType)
+    params.append('reportForm', formdata.reportForm)
+    if (text == '新增报表模板') {
+        addTemplate(params).then(res => {
+            ElMessage.success('新增成功!')
+            emit('shutDown')
+        })
+    } else if (text == '编辑报表模板') {
+        params.append('id', list.value.id)
+        dateTemplateup(params).then(res => {
+            ElMessage.success('编辑成功!')
+            emit('shutDown')
+        })
+    }
+}
+const open = async (text: string, row?: any) => {
+    title.value = text
+    if (row) {
+        list.value = row
+        await viewCustomReportTemplateById({ id: row.id }).then(Response => {
+            options.value.data = Response
+        })
+    }
+    info()
+}
+defineExpose({ open })
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+:deep(.el-tab-pane) {
+    padding: 10px;
+}
+</style>