我正在使用Laravel作为API和Vue作为前端通过数据库从JSON加载报告。
使用Stimulsoft JS生成报告。
我试图将数据集从运行时参数组件传递到edit和show组件,但是我似乎对Edit组件有疑问。
我将数据传递到名为getRuntimeParameters的vuex存储中,然后在组件中使用mapGetters加载它。
数据/报告在Show组件上完美显示,但是我得到了一个无法访问的属性“ toString”,Date.parse(...)为null,并且JSON.parse:第1行的数据意外结束在“编辑”组件上加载JSON数据时发生错误之一。
RuntimeParameters.vue
this.setRuntimeParameters(this.running_report_datasources);
将以下内容保存在商店中
[{
"bespoke_report_datasource_id": 94,
"datasource_id": 1,
"datasource_runtime_params_array": [{
"name": "parent.name",
"friendly_name": "Home Name",
"data_type": "list-single-homes",
"operator": "in",
"friendly_operator": "Is In",
"value": "Any",
"default": "Any"
}, {
"name": "fv_tasks.override_date",
"friendly_name": "Log Date",
"data_type": "date-range",
"operator": "between",
"friendly_operator": "Is Between",
"value": "17 Aug 2020 - 24 Aug 2020",
"default": "7,0"
}]
}]
Show.vue
import { mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
report_id: this.$route.params.bespoke_report_id,
report_name: '',
report_description: '',
definition: '',
instance_name: '',
instance_id: null,
datasources: [],
dataSets: [],
loaded: false
}
},
mounted() {
this.fetchReportDetails();
},
computed: {
...mapGetters({
getRuntimeParameters: 'Reporting/getRuntimeParameters'
}),
viewer() {
let options = new Stimulsoft.Viewer.StiViewerOptions();
return new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false);
},
report() {
return new Stimulsoft.Report.StiReport();
},
},
methods: {
...mapActions({
loadReport: 'Reporting/loadReport',
loadDatasets: 'Reporting/loadDatasets',
publishReport: 'Reporting/publishReport'
}),
fetchReportDetails() {
this.loadReport(this.report_id)
.then(response => {
this.report_name = response.report.bespoke_report_name;
this.report_description = response.report.bespoke_report_description;
this.definition = response.report.bespoke_report_definition;
this.datasources = response.report.datasources;
})
.catch(error => {
this.buildErrorMessages(error)
this.$router.replace('/reporting')
})
.then(() => {
this.$nextTick(() => {
this.setupReport();
});
})
},
setupReport() {
this.report.load(this.definition);
this.report.dictionary.databases.clear();
this.populateReport();
},
async populateReport() {
for (const datasource of this.datasources) {
this.instance_id = datasource.pivot.bespoke_report_datasource_id;
this.instance_name = datasource.pivot.datasource_instance_name;
this.grouping_name = datasource.pivot.datasource_instance_grouping;
await this.loadDatasets({ id: this.instance_id, runtime_parameters: JSON.stringify(this.getRuntimeParameters) })
.then(response => {
let dataSet = new Stimulsoft.System.Data.DataSet(this.grouping_name);
this.dataSets = response;
dataSet.readJson(response)
this.report.regData(dataSet.dataSetName, "", dataSet)
})
.catch(error => this.$router.replace('/reporting'))
}
this.renderViewer()
},
renderViewer() {
this.report.dictionary.synchronize();
this.viewer.report = this.report;
this.viewer.renderHtml('viewer');
this.loaded = true;
},
}
}
Edit.vue组件是上述内容的精确副本,用设计器替换了查看器的计算属性,并实例化了Stimulsoft设计器,但是它抛出了上述错误。
有人知道为什么会发生这种情况吗?
将数据从商店传递给运行时参数时,会从loadDatasets()响应正确返回数据,尽管将其加载到Show组件上,我也看不到为什么它不加载数据... < / p>
如果我使用window.location.href并通过URL传递参数,则可以。
但是,如果我使用this。$ router.push()并推送到编辑组件并从存储中访问参数,则此操作无效。