15.0.2 设置模板后，关联模板数据，点报表，加载不出来spread报表界面

Derrick.Jiao

模板js（sgrz.js)

Reporter.vue

<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<div id="report"></div>
</j-modal>
</template>
<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import '@grapecity/spread-sheets-vue';
import GC from "@grapecity/spread-sheets";
import '@grapecity/spread-sheets-charts';
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-barcode";
GC.Spread.Common.CultureManager.culture("zh-cn");
GC.Spread.Sheets.LicenseKey='xxxxx';
export default {
name: "reporter",
data(){
return {
dataurl:'', //请求后的数据
path:'', // 模板路径
title:'',
width:896,
visible: false,
disableSubmit: false
};
}, //请求后封装的数据
/*----------------初始化工作簿----------------*/
methods:{
workbookInitialized() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("report"));
spread.fromJSON(this.path);
// this.spread.options.tabStripRatio = 0.7;
var sheet = spread.getActiveSheet();
this.dataurl='';
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.dataurl);
sheet.setDataSource(source);
},
show(){
this.visible = true
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.close()
},
// submitCallback(){
// this.$emit('ok');
// this.visible = false;
// },
handleCancel () {
this.close()
}
},
// mounted(){
// this.workbookInitialized();
// }
}
</script>
<style scoped>
</style>

复制代码

报表列表

<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button @click="showreport(selectionRows)" type="primary">报表</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('施工日志')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{x:true}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button
v-else
:ghost="true"
type="primary"
icon="download"
size="small"
@click="downloadFile(text)">
下载
</a-button>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<construction-log-modal ref="modalForm" @ok="modalFormOk"></construction-log-modal>
<reporter ref="gpreporter"></reporter>
</a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ConstructionLogModal from './modules/ConstructionLogModal'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import {getAction} from "../../api/manage";
import Reporter from './modules/Reporter'
export default {
name: 'ConstructionLogList',
mixins:[JeecgListMixin, mixinDevice],
components: {
ConstructionLogModal,
Reporter
},
data () {
return {
description: '施工日志管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title:'单位',
align:"center",
dataIndex: 'unit'
},
{
title:'日期',
align:"center",
dataIndex: 'time',
customRender:function (text) {
return !text?"":(text.length>10?text.substr(0,10):text)
}
},
{
title:'星期',
align:"center",
dataIndex: 'week_dictText'
},
{
title:'天气',
align:"center",
dataIndex: 'weather'
},
/* {
title:'最高气温（℃）',
align:"center",
dataIndex: 'tmax'
},
{
title:'最低气温（℃）',
align:"center",
dataIndex: 'tmin'
},*/
{
title:'养护航道',
align:"center",
dataIndex: 'yhhd'
},
{
title:'桩号',
align:"center",
dataIndex: 'zh'
},
{
title:'施工人数',
align:"center",
dataIndex: 'sgrs'
},
{
title:'施工班组',
align:"center",
dataIndex: 'sgbz'
},
/*{
title:'养护内容',
align:"center",
dataIndex: 'content'
},
{
title:'养护情况（包括质量、安全）',
align:"center",
dataIndex: 'situation'
},
{
title:'完成后情况',
align:"center",
dataIndex: 'situationFinish'
},*/
{
title:'负责人',
align:"center",
dataIndex: 'chargePerson'
},
{
title:'记录',
align:"center",
dataIndex: 'recorder'
},
{
title: '操作',
dataIndex: 'action',
align:"center",
fixed:"right",
width:147,
scopedSlots: { customRender: 'action' }
}
],
url: {
// report:"/report/constructionLog/report",
list: "/report/constructionLog/list",
delete: "/report/constructionLog/delete",
deleteBatch: "/report/constructionLog/deleteBatch",
exportXlsUrl: "/report/constructionLog/exportXls",
importExcelUrl: "report/constructionLog/importExcel",
},
path:"./modules/sgrz.js",
dictOptions:{},
superFieldList:[],
}
},
created() {
this.getSuperFieldList();
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
},
},
methods: {
initDictConfig(){
},
//@TODO 获取选中行的数据
getSelectdata(row){
return Selecteddata
},
//@TODO 报表功能待实现
showreport(record){
console.log(record)
// data=getAction(this.url.report,)
this.$refs.gpreporter.path=this.path;
this.$refs.gpreporter.dataurl=record;//改成所选id
this.$refs.gpreporter.workbookInitialized();
this.$refs.gpreporter.show();
},
getSuperFieldList(){
let fieldList=[];
fieldList.push({type:'string',value:'unit',text:'单位',dictCode:''})
fieldList.push({type:'date',value:'time',text:'日期'})
fieldList.push({type:'string',value:'week',text:'星期',dictCode:'week'})
fieldList.push({type:'string',value:'weather',text:'天气',dictCode:''})
fieldList.push({type:'double',value:'tmax',text:'最高气温（℃）',dictCode:''})
fieldList.push({type:'double',value:'tmin',text:'最低气温（℃）',dictCode:''})
fieldList.push({type:'string',value:'yhhd',text:'养护航道',dictCode:''})
fieldList.push({type:'string',value:'zh',text:'桩号',dictCode:''})
fieldList.push({type:'int',value:'sgrs',text:'施工人数',dictCode:''})
fieldList.push({type:'string',value:'sgbz',text:'施工班组',dictCode:''})
fieldList.push({type:'string',value:'content',text:'养护内容',dictCode:''})
fieldList.push({type:'string',value:'situation',text:'养护情况（包括质量、安全）',dictCode:''})
fieldList.push({type:'string',value:'situationFinish',text:'完成后情况',dictCode:''})
fieldList.push({type:'string',value:'chargePerson',text:'负责人',dictCode:''})
fieldList.push({type:'string',value:'recorder',text:'记录',dictCode:''})
this.superFieldList = fieldList
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

复制代码

加载的record

点击报表后，加载出来的界面不出现spread

Derrick.Jiao · Derrick.Jiao

zjk 发表于 2022-6-1 10:56
虽然还是报fromJSON的错

请参考这个最新的demo去调，在调用workbookInitialized的时候需要传参，否则再次调用之后上面定义的workbookInitialized接不到参数就会找不到spread对象。
image.png690534362.png

Derrick.Jiao · Derrick.Jiao

你好，这边测试了提供的表单，表单是正常的，附件是我测试的demo，点击"绑定数据源"即可看到绑定效果。出现”加载不出来spread报表界面“可能是其他原因造成，但但从上面提供的代码这边无法复现，请移除多余的业务逻辑。直接通过上传附件的方式提供一个可直接运行的demo。这边来调查原因。

zjk · zjk

Derrick.Jiao 发表于 2022-5-30 17:33
你好，这边测试了提供的表单，表单是正常的，附件是我测试的demo，点击"绑定数据源"即可看到绑定效果。出现 ...

我这个是界面初始化不出来，并不是数据没关联上。我看你们都是用<div>套</gc-spread-sheets>套</gc-worksheet>，而我这边是采用的一个div，然后自己用一个方法，去new的

<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<div id="spread"></div>
</j-modal>
</template>
<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-vue'
import * as GC from "@grapecity/spread-sheets"
import * as ExcelIO from "@grapecity/spread-excelio"
import '@grapecity/spread-sheets-charts'
import "@grapecity/spread-sheets-resources-zh"
import "@grapecity/spread-sheets-barcode"
import "@grapecity/spread-sheets-barcode"
import '@grapecity/spread-sheets-print'
GC.Spread.Common.CultureManager.culture("zh-cn");
GC.Spread.Sheets.LicenseKey=ExcelIO.LicenseKey='mykeys';
export default{
name:'Reporter',
data(){
return {
dataurl:'', //请求后的数据
path:'', // 模板路径
title:'',
width:900,
visible: false,
disableSubmit: false
}
},//请求后封装的数据
/*----------------初始化工作簿----------------*/
methods:{
workbookInitialize(){
var spread=new GC.Spread.Sheets.Workbook(document.getElementById("spread"));
spread.fromJSON(this.path)
// this.spread.options.tabStripRatio = 0.7;
var sheet = spread.getActiveSheet();
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.dataurl);
sheet.setDataSource(source);
},
show(){
this.visible = true
this.workbookInitialize()
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.close()
},
// submitCallback(){
// this.$emit('ok');
// this.visible = false;
// },
handleCancel () {
this.close()
}
}
}
// mounted(){
// this.workbookInitialized();
// }
</script>

复制代码

zjk · zjk

zjk 发表于 2022-5-31 10:35
我这个是界面初始化不出来，并不是数据没关联上。我看你们都是用套套，而我这边是采用的一个div，然后自 ...

引用界面

<template>
<div class="table-operator">
<a-button @click="showreport(selectionRows)" type="primary">报表</a-button>
</div>

复制代码

zjk · zjk

zjk 发表于 2022-5-31 10:42
引用界面

现在是将标签改为

，然后用你们的方法初始模板，然后数据无法加载到模板里去，首先是没加下标无法加载，现在在数组里加了下标，还是加载不进来
数据：
image.png561527404.png

而且还一直报fromJSON的出报警
image.png489078063.png

Derrick.Jiao · Derrick.Jiao

zjk 发表于 2022-5-31 11:39
现在是将标签改为
，然后用你们的方法初始模板，然后数据无法加载到模板里去，首先是没加下标无法加 ...

出现上面的报错是因为初始化不正确，导致找不到spread对象，因此也就找不到spread下的fromJSON方法。两个建议：1、使用我们封装好的的标签，就像前面提供的demo那样；2、如果仍是需要使用原生的方式去初始化，可以参考附件的demo。

另外，若上述方案仍未解决你的问题，请移除其余的业务逻辑，提供一个可直接运行的demo，我们这边直接在这个demo上调试，处理效率会更高。光提供截图以及代码片段，这边无法进行复现。

zjk · zjk

Derrick.Jiao 发表于 2022-5-31 12:26
出现上面的报错是因为初始化不正确，导致找不到spread对象，因此也就找不到spread下的fromJSON方法。两个 ...

Derrick.Jiao · Derrick.Jiao

zjk 发表于 2022-5-31 14:50

老哥，请提供一个可直接运行的demo吧，我这只能从提供的代码片段去猜是猜不到准确原因的。

在你提供的附件中，这个path我没看到哪里可以传过来
image.png52387999.png

然后在父页面中，我只看到定义了一个按钮，按钮中也使用了子页面的一个方法，这个方法我也没看出来是从哪里给到父页面的
image.png256351927.png

上面都是vue的用法上的问题，也有可能是我对vue理解的不正确。

另外，还有一个最直观的办法就是在你的代码中加上这句console把spread对象打印一下，如果返回的是undefined，说明你的spread对象就没有获取对。
image.png921931152.png

建议可以看下我们如何在vue中引入SpreadJS的教程。
https://www.bilibili.com/video/B ... id_from=333.999.0.0

最后，最最最关键的是，还是建议你提供一个可运行的demo，请勿再提供代码片段，这样问题还是无法得到解决。

Derrick.Jiao · Derrick.Jiao

另外，凭借我对上面提供附件的理解，我做了一个demo
image.png559080199.png

可以再看下，点击按钮即可弹出Spread。

		自动登录	找回密码
密码			立即注册

[已处理] 15.0.2 设置模板后，关联模板数据，点报表，加载不出来spread报表界面

最佳答案

20 个回复

15.0.2 vue用SPREADfromJSON BAO

浏览过的版块

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证