如何基于Freshdesk API实现工单分页加载与假数据填充？

问题背景 #

需要筛选系统中未关联采购的工单，调试确认符合条件的工单总计187条，但前端数据网格仅能显示前30条（每页默认展示5条）。由于Freshdesk API不支持一次性获取全部187条数据，计划采用以下方案：

• 每次仅获取30条真实数据
• 用户当前所在页面展示真实数据，其余页面用假数据填充
• 用户翻页时自动加载下一批30条真实数据
  目前不清楚如何正确实现该方案。

相关代码 #

控制器：获取无关联采购的工单方法 #

public function getTicketsWithoutPurchase(Request $request)
{
    $this->checkPermissions("index");

    $groupIds = [77000033482, 77000271931, 77000008014, 77000008015, 77000269172, 77000017316, 77000008013, 77000008012];

    $groupQuery = implode(' OR ', array_map(function ($id) {
        return "group_id:$id";
    }, $groupIds));

    $statusQuery = "status:2 OR status:3";

    $query = "\"(" . $groupQuery . ") AND (" . $statusQuery . ")\"";

    $page = $request->input('page', 1);

    $response = FreshdeskService::filterTickets($query, 'lp', $page);

    if ($response['success']) {
        $tickets = $response['response']['results'] ?? [];
        $totalTickets = $response['response']['total'] ?? 0;
        $perPage = 30;
        $start = ($page - 1) * $perPage;
        dd($start);

        $totalPages = ceil($totalTickets / $perPage);

        if ($page > $totalPages) {
            $data = collect()->pad($perPage, [
                'id' => null,
                'subject' => 'Fake Ticket',
                'updated_at' => null,
                'to_emails' => 'No Email provided',
                'status' => null,
                'group' => null
            ]);
        } else {
            $ticketCollection = collect($tickets);

            $data = $ticketCollection->map(function ($ticket) {
                return [
                    'id' => $ticket['id'] ?? null,
                    'subject' => $ticket['subject'] ?? '-',
                    'updated_at' => $ticket['updated_at'] ?? '-',
                    'to_emails' => $ticket['to_emails'] ?? 'No Email provided',
                    'status' => $ticket['status'],
                    'group' => $ticket['group_id']
                ];
            });
        }

        return self::watchDataTable($data, $request);
    }

    return response()->json(['message' => 'Could not retrieve tickets'], 500);
}

Freshdesk服务：筛选工单方法 #

public static function filterTickets(string $query, $alias): array
{
    return self::simpleRequest("search/tickets?query=" . urlencode($query), [], "GET", $alias);
}

前端组件代码 #

<template>
  <div>
    <div class="row">
      <div class="col-lg-12">

        <div class="box box-info" style="min-height: 400px;">
          <div class="box-header">
            <h4 class="box-title">
              <i class="fa fa-chain-broken"></i>
              {{ this.$t('purchases.select_ticket_for_purchase') }}
            </h4>
          </div>
          <div class="box-body">
            <div class="col-lg-12">
              <data-table :settings="freshdeskGridTableSettings" ref="uploadTable"></data-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      freshdeskGridTableSettings: {
        fetchUrl: "/data/no-purchase",
        columns: [
          {
            key: "id",
            label: "purchases.ticket_id",
            hidden: false,
          },
      
          {
            key: "subject",
            label: "purchases.subject",
            searchable: false,
            sortable: false
          },
          {
            key: "updated_at",
            label: "purchases.updated_at",
            searchable: false,
            sortable: false
          },
          {
            key: "to_emails",
            label: "purchases.to_emails",
            searchable: false,
            sortable: false
          },
          {
            key: "status",
            label: "purchases.status",
            searchable: false,
            sortable: false
          },
          {
            key: "group",
            label: "purchases.group",
            searchable: true,
            sortable: false
          },
          {
            type: "event",
            key: "add",
            permissions: ["manage purchases"],
            icon: "fa-plus",
            label: "purchases.add_ticket",
            classes: "btn btn-success",
          }
        ],
        defaultSearchParams: {},
        showSearch: true,
        showSearchColumn: true,
        showPageLength: true,
        defaultSortBy: "id",
        defaultOrder: "desc",
        defaultPerPage: 5,
        pageLengths: [5, 10, 25, 50, 100],
        columnId: "id",

      },
    };
  },
  methods: {
    addTicket(){
      this.axios.post()
    }
  },
};
</script>

API说明 #

使用的Freshdesk工单筛选接口，该接口支持分页查询，但单页最多返回30条数据，无法一次性获取所有符合条件的工单结果。

内容的提问来源于stack exchange，提问作者JayVch