php - vue-json-excel 包含多个 excel 下载的数据问题

Question

我有下表vue component。

当单击下载按钮时，我需要下载一个包含多个备件数据的 excel 文件。所以excel文件如下所示：

<download-excel v-if="spare_parts.length"
                class="btn btn-view"
                :data="json_data"
                :fields="json_fields"
                :title="['Equipments - Spare Part - '+ spare_part.name,'' ]"
                worksheet="My Worksheet"
                :name="'Equipments - Spare Part - '+spare_part.name+'.xls'">

    <i class="fa fa-download sky-fa" title="Download Report" @click="getReportDetails(spare_part.sap)"></i>
</download-excel>

json_fields: {
    'Equipment - Serial Number': {
        callback: (value) => {
            return `${value.maintenance.equipment.serial_number}`;
        }
    },
    'Customer Name': {
        callback: (value) => {
            return `${value.maintenance.equipment.technical_customer.name}`;
        }
    },
    'Unit Price (LKR) - Without VAT': {
        callback: (value) => {
            let final = '';
            let VAT = '';

            let decimalCount = 2;
            let decimal = ".";
            let thousands = ",";
            let amount = `${value.cost}`;

            try {
                let decimalCount = Math.abs(decimalCount);
                decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

                const negativeSign = amount < 0 ? "-" : "";

                let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
                let j = (i.length > 3) ? i.length % 3 : 0;

                final = negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "")
                // return final;
            } catch (e) {
                console.log("Errors " + e);
            }

            return final;
        }
    },
    'Unit Price (LKR) - With VAT': {
        callback: (value) => {
            let final = '';
            let VAT = '';
            VAT = (`${value.vat}` == 1) ? `${value.cost + (value.cost * (value.vat_percentage / 100))}` : '-';

            if (`${value.vat}` == 1) {
                let decimalCount = 2;
                let decimal = ".";
                let thousands = ",";
                let amount = VAT;

                try {
                    let decimalCount = Math.abs(decimalCount);
                    decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

                    const negativeSign = amount < 0 ? "-" : "";

                    let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
                    let j = (i.length > 3) ? i.length % 3 : 0;

                    final = negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "")
                } catch (e) {
                    console.log("Errors " + e);
                }
            } else {
                final = '-';
            }

            return final;

        }
    },
},
json_data: [],
json_meta: [
    [
        {
            'key': 'charset',
            'value': 'utf-8'
        }
    ]
],

单击图标时会触发该getReportDetails(spare_part.sap)功能。

getReportDetails(name){
    axios.get('/technical/sparepart/get-report/'+name)
        .then(function (response) {
            this.json_data = response.data;
            if (this.json_data.length == 0) {
                alert('No Data in this Spare Part');
            }
        }.bind(this))
        .catch(error => {
            console.log("Errors : " + error);
        });
},

所以需要在excel表格中显示的数据是通过调用以下方法从这个函数中获取的SparePartController：

public function getReportDetails($name)
{
    $maintenance_spare_parts = MaintenanceSparePart::with('maintenance.equipment.technicalCustomer')->where('spare_part', $name)->get();
    return $maintenance_spare_parts;
}

我这里有 2 个问题。

1. 当我单击第二次单击时开始下载的下载图标时。但在那之后，每次点击下载都会发生。为什么总是第二次？
2. 下载后，我可以在 Excel 表中看到正确的数据。但是，当我单击另一行中的下载图标而不刷新页面时，我会在我的 excel 文件中获取以前的数据。这是什么原因？

谁能指出我在这种情况下做错了什么？

标签： phpexcellaravelvue.js