修改报表设计导入导出功能

industry-admin/src/views/report/tableTemplate/detail.vue

@@ -1,15 +1,13 @@
 <template>
-    <div>
-        <iframe @load="sendToken" id="myIframe" :src="iframeSrc"
-            :style="{ 'height': '90vh', 'width': '100%', 'border': 'none', 'display': 'block' }"></iframe>
-    </div>
-
+    <iframe @load="load" id="myIframe" :src="iframeSrc"
+        :style="{ 'height': '90vh', 'width': '100%', 'border': 'none', 'display': 'block' }"></iframe>
 </template>
 
 <script>
 import { getToken } from '@/utils/auth'
 
 export default {
+    /** 路由的钩子函数 */
     watch: {
         '$route.query.t': {
             handler(now, old) {
@@ -25,18 +23,22 @@ export default {
     data() {
         return {
             reportId: this.$route.query.id,
+            type: this.$route.query.type,
+            files: this.$route.query.files,
             iframeSrc: process.env.VUE_APP_BASE_API + '/reportSheet/index.html',
         }
     },
     methods: {
-        sendToken() {
+        load() {
             const _this = this
             _this.sendMsg({
                 cmd: 'init',
                 data: {
                     token: getToken(),
                     url: process.env.VUE_APP_BASE_API,
-                    reportId: this.reportId
+                    reportId: this.reportId,
+                    type: this.type,
+                    files: this.files
                 }
             })
             window.addEventListener('message', function (event) {

industry-admin/src/views/report/tableTemplate/index copy.vue

@@ -1,399 +0,0 @@
-<template>
-    <div>
-        <div class="sy-content" v-if="!isShowDesign">
-            <el-row>
-                <el-col>
-                    <!-- 搜索信息 -->
-                    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="80px">
-                        <el-form-item label="报表名称" prop="templateName">
-                            <el-input v-model="queryParams.templateName" placeholder="请输入报表名称" maxlength="10">
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="报表类型" prop="templateType">
-                            <el-select v-model="queryParams.templateType" clearable placeholder="请选择类型">
-                                <el-option v-for="tableType in reportTableTypeList" :key="tableType.value"
-                                    :label="tableType.label" :value="tableType.value">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" icon="el-icon-search" size="mini"
-                                @click="getAllTableTemplate">查询</el-button>
-                            <!-- <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
-                        </el-form-item>
-                    </el-form>
-                    <!-- 操作按钮 -->
-                    <el-row class="czBtns">
-                        <el-col :span="1.5">
-                            <el-button type="primary" plain icon="el-icon-circle-plus-outline" size="mini"
-                                @click="addTableTemplateEvent">新增</el-button>
-                        </el-col>
-                        <el-col :span="1.5">
-                            <el-button type="primary" plain icon="el-icon-folder-add" size="mini" style="margin-left: 15px;"
-                                @click="importTableTemplateEvent">导入报表</el-button>
-                        </el-col>
-						<input ref="importFileNode" class="import-file-node" type="file" @change="loadExcel" accept=".xlsx"
-						       style="display: none;"></input>
-                    </el-row>
-                    <!-- 数据组表格信息 -->
-                    <CommonTable ref="tableTemplateTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
-                        :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
-                        :tableOperate="tableOperate" @templateNameClick="templateNameClick"
-                        @exportTableTemplateEvent="exportTableTemplateEvent"
-                        @updateTableTemplateEvent="updateTableTemplateEvent"
-                        @delTableTemplateEvent="delTableTemplateEvent">
-                    </CommonTable>
-                    <!-- 分页信息 -->
-                    <pagination v-show="tableTotal > 0" small :total="tableTotal" :page.sync="queryParams.page"
-                        :limit.sync="queryParams.limit" align="right" @pagination="getAllTableTemplate" />
-                </el-col>
-            </el-row>
-        </div>
-        <iframe @load="sendToken" id="myIframe" :src="iframeSrc" :style="{'height': '90vh','width': '100%','border': 'none','display': isShowDesign ? 'block' : 'none'}"></iframe>
-    </div>
-</template>
-
-<script>
-import CommonTable from '@/components/CommonTable/index.vue'
-
-import { getAllTableTemplate } from '@/api/report/tableTemplate'
-import { showConfirmWin, showAlertMsgWin, showLoading } from "@/utils/cqcy"
-import { getToken } from '@/utils/auth'
-import LuckyExcel from 'luckyexcel'
-import ExcelJS from 'exceljs';
-
-export default {
-    created() {
-        this.getAllTableTemplate()
-		const loading = showLoading(this, '加载中，请稍候···')
-		const _this = this
-		const task = setInterval(() => {
-			if (_this.isLoadingStatus) {
-				loading.close()
-			}
-		}, 200)
-    },
-    components: {
-        CommonTable
-    },
-    watch: {
-        '$route.query.t': {
-            handler(now, old) {
-                this.sendMsg({
-                    cmd: 'show',
-                    data: {
-                        reportId: this.$route.query.id
-                    }
-                })
-            }
-        },
-    },
-    data() {
-        return {
-			isLoadingStatus: false,
-            //是否展示报表设计
-            isShowDesign: false,
-            reportId: null,
-            iframeSrc: process.env.VUE_APP_BASE_API + '/reportSheet/index.html',
-			// iframeSrc: 'http://127.0.0.1:8848/reportSheet/index.html',
-            //表格参数
-            isShowCheckbox: false,
-            isShowIndex: true,
-            tableHight: '63vh',
-            tableHeaderTitle: [
-                {
-                    propName: "templateName",
-                    labelName: "报表名称",
-                    type: "html",
-                    formatter: (row, column, cellValue, index) => {
-                        let html = `<span style="color: #409eff; cursor: pointer"`
-                        html += ` :title="scope.row.templateName">`
-                        html += row.templateName
-                        html += `</span>`
-                        return html
-                    },
-                    methodName: "templateNameClick",
-                    align: "center"
-                },
-                {
-                    propName: "templateType",
-                    labelName: "报表类型",
-                    formatter: (row, column, cellValue, index) => {
-                        if (row.templateType == 0) {
-                            return '手动报表'
-                        } else if (row.templateType == 1 || row.templateType == 3) {
-                            return '周期报表'
-                        } else if (row.templateType == 2 || row.templateType == 4) {
-                            return '事件驱动报表'
-                        } else if (row.templateType == 5 || row.templateType == 6) {
-                            return '设备报表'
-                        }
-                    },
-                    align: "center"
-                },
-                {
-                    propName: "createTime",
-                    labelName: "创建时间",
-                    align: "center"
-                }
-            ],
-            tableData: [],
-            tableOperate: [
-                {
-                    btnName: '导出',
-                    size: "mini",
-                    style: '',
-                    icon: 'el-icon-folder-opened',
-                    methodName: "exportTableTemplateEvent",
-                },
-                {
-                    btnName: '编辑',
-                    size: "mini",
-                    style: '',
-                    icon: 'el-icon-edit',
-                    methodName: "updateTableTemplateEvent",
-                },
-                {
-                    btnName: '删除',
-                    size: "mini",
-                    style: 'color: red;',
-                    icon: 'el-icon-delete',
-                    methodName: "delTableTemplateEvent",
-                }
-            ],
-            queryParams: {
-                page: 1,
-                limit: 10,
-                templateName: null,
-                templateType: null
-            },
-            tableTotal: 0,
-            //报表类型
-            reportTableTypeList: [
-                {
-                    value: 0,
-                    label: '手动报表'
-                }, {
-                    value: 1,
-                    label: '周期报表'
-                }, {
-                    value: 2,
-                    label: '事件驱动报表'
-                }, {
-                    value: 3,
-                    label: '设备报表'
-                }
-            ]
-        }
-    },
-    methods: {
-        /** 如果userId为空，则获取当前登录人的所有报表模板；不为空，则查询对应的参数的报表模板 */
-        getAllTableTemplate() {
-            getAllTableTemplate(this.queryParams).then(res => {
-                if (!res || !res.data) {
-                    this.$message({
-                        message: '数据查询失败！',
-                        type: 'warning'
-                    })
-                    return
-                }
-                this.tableTotal = res.data.count
-                this.tableData = res.data.tableTemplateList
-            })
-        },
-        /** 报表名称点击事件 */
-        templateNameClick(data) {
-            this.reportId = data.id
-			this.sendMsg({
-				cmd: 'show',
-				data: {
-					reportId: data.id,
-				}
-			})
-            this.isShowDesign = true
-        },
-        /** 新增报表设计 */
-        addTableTemplateEvent() {
-			this.sendMsg({
-				cmd: 'show',
-				data: {
-					reportId: -999,
-				}
-			})
-            this.isShowDesign = true
-        },
-        /** 导入报表设计 */
-        importTableTemplateEvent() {
-			this.$refs.importFileNode.dispatchEvent(new MouseEvent('click'))
-        },
-        /** 导出报表设计 */
-        exportTableTemplateEvent(row) {
-			this.sendMsg({
-				cmd: 'show',
-				data: {
-					reportId: row.id,
-					type: 'export'
-				}
-			})
-			this.reportId = row.id
-			this.isShowDesign = true
-        },
-        /** 编辑报表设计 */
-        updateTableTemplateEvent(row) {
-            this.sendMsg({
-            	cmd: 'show',
-            	data: {
-            		reportId: row.id,
-            	}
-            })
-            this.reportId = row.id
-            this.isShowDesign = true
-        },
-        /** 删除报表 */
-        delTableTemplateEvent(row) {
-            showConfirmWin(this, null, '您确定要删除该报表设计吗？', () => {
-                delReportDataPolicyById(row.id).then(res => {
-                    this.$message({
-                        message: '删除报表设计成功！',
-                        type: 'success'
-                    })
-                    this.getAllTableTemplate()
-                })
-                delTableTemplateById(row.id, 0).then((res) => {
-                    if (res.msg == "fail") {
-                        this.delById(res.data, row.id)
-                        return
-                    }
-                    if (res.data) {
-                        this.$message({
-                            message: '删除成功！',
-                            type: 'success'
-                        })
-                    } else {
-                        this.$message({
-                            message: '删除失败！',
-                            type: 'warning'
-                        })
-                        return
-                    }
-                    this.getAllTableTemplate()
-                })
-            })
-        },
-        /** 删除报表模板 */
-        delById(tips, id) {
-            showConfirmWin(this, null, tips, () => {
-                delTableTemplateById(id, 1).then((res) => {
-                    if (res.data) {
-                        this.$message({
-                            message: '删除成功！',
-                            type: 'success'
-                        })
-                    } else {
-                        this.$message({
-                            message: '删除失败！',
-                            type: 'warning'
-                        })
-                        return
-                    }
-                    this.getAllTableTemplate()
-                })
-            });
-        },
-        sendToken() {
-            const _this = this
-            _this.sendMsg({
-                cmd: 'init',
-                data: {
-                    token: getToken(),
-                    url: process.env.VUE_APP_BASE_API,
-                    reportId: this.reportId
-                }
-            })
-            window.addEventListener('message', function (event) {
-                const json = event.data
-                if (json.cmd === 'close') {
-                    _this.isShowDesign = false
-                }
-            })
-			_this.isLoadingStatus = true
-        },
-        sendMsg(msg) {
-            document.getElementById('myIframe').contentWindow.postMessage(msg, '*')
-        },
-		loadExcel(evt) {
-			let _this = this
-			const files = evt.target.files
-			if (files == null || files.length == 0) {
-				return
-			}
-			if (!files[0].name.endsWith('.xlsx')) {
-				showAlertMsgWin(_this, null, '只能导入xlsx格式文件！')
-				return
-			}
-			const loading = showLoading(this, '文件导入中，请稍候···')
-			let status = true
-			const reader = new FileReader();
-			reader.onload = function(event) {
-				const data = new Uint8Array(event.target.result);
-				const workbook = new ExcelJS.Workbook();
-				workbook.xlsx.load(data).then(function(workbook) {
-					workbook.eachSheet(function(worksheet, sheetId) {
-						if (status) {
-							status = false
-							let hyperlink = {}
-							worksheet.eachRow(function(row, rowNumber) {
-								row.eachCell(function(cell, colNumber) {
-									 if (cell.type === ExcelJS.ValueType.Hyperlink) {
-										hyperlink[(parseInt(rowNumber) - 1) + '_' + (parseInt(colNumber) - 1)] = {
-											linkAddress: cell.value.hyperlink,
-											linkTooltip: cell.value.text,
-											linkType: 'external'
-										}
-									 } else if (cell.type === ExcelJS.ValueType.String) {
-										 if (/![A-Z]+\d+/g.test(cell.value) && cell.value.startsWith(worksheet.name + '!')) {
-											hyperlink[(parseInt(rowNumber) - 1) + '_' + (parseInt(colNumber) - 1)] = {
-												linkAddress: cell.value,
-												linkTooltip: cell.value,
-												linkType: 'internal'
-											}
-										 }
-									 }
-								});
-							});
-							LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
-							   _this.isShowDesign = true
-								  loading.close()
-								  _this.sendMsg({
-								  	cmd: 'show',
-								  	data: {
-								  		reportId: -999,
-								  		type: 'import',
-								  		files: JSON.stringify({
-											  luckysheetfile,
-											  hyperlink
-										  }),
-								  	}
-								  })
-							  document.getElementsByClassName('import-file-node')[0].value = ''
-							})
-						}
-					});
-				});
-			};
-			reader.onerror = function(event) {
-			  document.getElementsByClassName('import-file-node')[0].value = ''
-			  showAlertMsgWin(_this, null, '读取文件失败，请稍后再试！')
-			  return
-			};
-			reader.readAsArrayBuffer(files[0]);
-		},
-    },
-    destroyed() {
-        window.removeEventListener('message', function (e) {
-            console.log(e)
-        });
-    },
-	
-}
-</script>

industry-admin/src/views/report/tableTemplate/index.vue

@@ -44,8 +44,8 @@
                         @delTableTemplateEvent="delTableTemplateEvent">
                     </CommonTable>
                     <!-- 分页信息 -->
-                    <pagination small :total="tableTotal" :page.sync="queryParams.page"
-                        :limit.sync="queryParams.limit" align="right" @pagination="getAllTableTemplate" />
+                    <pagination small :total="tableTotal" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
+                        align="right" @pagination="getAllTableTemplate" />
                 </el-col>
             </el-row>
         </div>
@@ -213,15 +213,13 @@ export default {
         },
         /** 导出报表设计 */
         exportTableTemplateEvent(row) {
-            this.sendMsg({
-                cmd: 'show',
-                data: {
-                    reportId: row.id,
+            this.$router.push({
+                path: '/tableTemplate/templateDetail'
+                , query: {
+                    id: row.id,
                     type: 'export'
                 }
             })
-            this.reportId = row.id
-            this.isShowDesign = true
         },
         /** 编辑报表设计 */
         updateTableTemplateEvent(row) {
@@ -322,17 +320,16 @@ export default {
                                 });
                             });
                             LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
-                                _this.isShowDesign = true
                                 loading.close()
-                                _this.sendMsg({
-                                    cmd: 'show',
-                                    data: {
-                                        reportId: -999,
+                                _this.$router.push({
+                                    path: '/tableTemplate/templateDetail'
+                                    , query: {
+                                        id: -999,
                                         type: 'import',
                                         files: JSON.stringify({
                                             luckysheetfile,
                                             hyperlink
-                                        }),
+                                        })
                                     }
                                 })
                                 document.getElementsByClassName('import-file-node')[0].value = ''

industry-system/industry-da/src/main/resources/static/page/static/js/chunk-2d0bd283.508f2501.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0bd283"],{"2b96":function(e,t,n){"use strict";n.r(t);var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("iframe",{style:{height:"90vh",width:"100%",border:"none",display:"block"},attrs:{id:"myIframe",src:e.iframeSrc},on:{load:e.load}})},o=[],s=n("5f87"),i={watch:{"$route.query.t":{handler:function(e,t){this.sendMsg({cmd:"show",data:{reportId:this.$route.query.id}})}}},data:function(){return{reportId:this.$route.query.id,type:this.$route.query.type,files:this.$route.query.files,iframeSrc:"/reportSheet/index.html"}},methods:{load:function(){var e=this;e.sendMsg({cmd:"init",data:{token:Object(s["b"])(),url:"",reportId:this.reportId,type:this.type,files:this.files}}),window.addEventListener("message",(function(t){var n=t.data;"close"===n.cmd&&e.$router.go(-1)}))},sendMsg:function(e){document.getElementById("myIframe").contentWindow.postMessage(e,"*")}},destroyed:function(){window.removeEventListener("message",(function(e){console.log(e)}))}},d=i,a=n("2877"),u=Object(a["a"])(d,r,o,!1,null,null,null);t["default"]=u.exports}}]);

industry-system/industry-da/src/main/resources/static/page/static/js/chunk-2d0bd283.5f4a130a.js

@@ -1 +0,0 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0bd283"],{"2b96":function(e,t,n){"use strict";n.r(t);var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("iframe",{style:{height:"90vh",width:"100%",border:"none",display:"block"},attrs:{id:"myIframe",src:e.iframeSrc},on:{load:e.sendToken}})])},o=[],d=n("5f87"),s={watch:{"$route.query.t":{handler:function(e,t){this.sendMsg({cmd:"show",data:{reportId:this.$route.query.id}})}}},data:function(){return{reportId:this.$route.query.id,iframeSrc:"/reportSheet/index.html"}},methods:{sendToken:function(){var e=this;e.sendMsg({cmd:"init",data:{token:Object(d["b"])(),url:"",reportId:this.reportId}}),window.addEventListener("message",(function(t){var n=t.data;"close"===n.cmd&&e.$router.go(-1)}))},sendMsg:function(e){document.getElementById("myIframe").contentWindow.postMessage(e,"*")}},destroyed:function(){window.removeEventListener("message",(function(e){console.log(e)}))}},i=s,a=n("2877"),c=Object(a["a"])(i,r,o,!1,null,null,null);t["default"]=c.exports}}]);