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

收藏

模板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-7 15:51
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=148331&extra=
问题已在此贴中解决

解决了就好，有新问题欢迎开新帖交流~

zjk · zjk

https://gcdn.grapecity.com.cn/fo ... d=148331&extra=
问题已在此贴中解决

zjk · zjk

zjk 发表于 2022-6-1 10:42
去掉一个标签

然后直接用spread

虽然还是报fromJSON的错 image.png484697265.png

zjk · zjk

zjk 发表于 2022-6-1 09:42
原生的方法显示不出来

去掉一个标签

然后直接用spread
image.png370585021.png

然后就可以了

zjk · zjk

Derrick.Jiao 发表于 2022-5-31 18:23
从上面的截图来看，主要原因还是在于Spread对象没有获取对，基于前面描述的需求，建议还是使用原生的方法 ...

原生的方法显示不出来

Derrick.Jiao · Derrick.Jiao

zjk 发表于 2022-5-31 16:48
现在是可以加载模板，但是绑定的数据不显示，spread会打印两次，一次undefined一次为a

从上面的截图来看，主要原因还是在于Spread对象没有获取对，基于前面描述的需求，建议还是使用原生的方法来进行使用。
例如下图，下图就是9楼提供的demo。

下图用的是new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });方法来初始化工作簿，
然后在需要使用工作簿示例的时候通过GC.Spread.Sheets.findControl(document.getElementById('ss'));获取Spread对象
image.png23172606.png