Question

我有以下情况：用户单击设置中的按钮此按钮将执行调用API的资源调用这个API除了一些处理之外什么都不做它将调用ERP系统，然后将结果处理到数据库中。

现在我已经成功实现了以上所有目标但是，我希望有一个实时进度条，它将显示处理状态现在我已经搜索了很多关于如何实现这一点但很遗憾我还没有找到任何东西。

有人能以正确的方式帮助我吗？

****编辑****

我会尝试提供更多细节。

我在Vue中有一个按钮

<button type="button" class="btn btn-space btn-primary md-trigger" v-on:click="syncItemGroups();">{{ $t('titles.erp.sync_item_groups') }}</button>

onclick事件调用Vue方法syncItemGroups（），其中包含以下代码：

syncItemGroups() {
    var _this = this;
    this.$dispatch('add-global-loader');
    _this.erpItemGroups = [];
    this.syncItemGroupsDataSource.get().then(function (response) {
        _this.erpItemGroups = response.data.erpItemGroups;
        _this.erpItemGroupsCount = _this.erpItemGroups.length;
        _this.$dispatch('remove-global-loader');
    });
}

正在调用的API包含以下代码：

public function itemGroups()
{
    $tenantId    = $this->getCurrentTenant()->id;
    $integration = TenantIntegration::where('type', '=', 'erp')->where('tenant_id', '=', $tenantId)->get()->first();

    $this->getErpProvider()->syncItemGroups($integration->id, $tenantId);

    $itemGroups = ErpItemGroup::whereTenantId($tenantId)->get();

    return [
        'success'       => true,
        'erpItemGroups' => $itemGroups
    ];
}

在此方法中，正在调用syncItemGroups。这包含一个执行处理的foreach循环。现在我想要实现的是，在这个foreach循环中，这个循环的进度被报告回网站以填充进度条。

public function syncItemGroups($integrationId, $tenantId)
{

    $connection = $this->connect($integrationId);
    $connection->setDivision(1617429);
    $itemGroups = new ItemGroup($connection);
    $result     = $itemGroups->get();



    foreach ($result as $itemGroup) {
        $existingErpItemGroup = ErpItemGroup::where([
            ['tenant_id', $tenantId],
            ['item_group_id', $itemGroup->Code],
        ])->get()->first();
        if (is_null($existingErpItemGroup) ||
            $existingErpItemGroup->item_group_id !== $itemGroup->Code ||
            $existingErpItemGroup->description !== $itemGroup->Description) {
            $erpItemGroup                =
                is_null($existingErpItemGroup) ? new ErpItemGroup() : $existingErpItemGroup;
            $erpItemGroup->tenant_id     = $tenantId;
            $erpItemGroup->item_group_id = $itemGroup->Code;
            $erpItemGroup->description   = $itemGroup->Description;
            $erpItemGroup->save();
        }
    }
}

希望现在很清楚我希望实现的目标。

提前致谢。

亲切的问候， PimDröge

Vue JS直播进度条

0 个答案: