无法访问属性“ toString”,Date.parse为null并解析错误?

时间:2020-08-24 19:03:48

标签: json vue.js vuex vue-router stimulsoft

我正在使用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()并推送到编辑组件并从存储中访问参数,则此操作无效。

0 个答案:

没有答案