[STYLE] 優化機台設定頁面載入提示與 AJAX 互動體驗
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 2m44s

1. 新增全站頂部進度條觸發機制,在搜尋或分頁時提供視覺反饋。
2. 為機台設定頁面新增奢華風 Spinner 載入遮罩,替代原本抖動的骨架屏。
3. 優化分頁與搜尋的 AJAX 回傳邏輯,載入時降低背景透明度以維持版面穩定。
4. 新增多語系翻譯字串:Failed to load tab content。
This commit is contained in:
2026-04-15 11:51:23 +08:00
parent 376f43fa3a
commit ee985abb2e
8 changed files with 648 additions and 419 deletions

View File

@@ -22,51 +22,83 @@ class MachineSettingController extends AdminController
/**
* 顯示機台與型號設定列表 (採用標籤頁整合)
*/
public function index(Request $request): View
public function index(Request $request): View|\Illuminate\Http\Response
{
$tab = $request->input('tab', 'machines');
$per_page = $request->input('per_page', 10);
$search = $request->input('search');
$isAjax = $request->boolean('_ajax');
// 1. 處理機台清單 (Machines Tab)
$machineQuery = Machine::query()->with(['machineModel', 'paymentConfig', 'company']);
if ($tab === 'machines' && $search) {
$machineQuery->where(function ($q) use ($search) {
$q->where('name', 'like', "%{$search}%")
->orWhere('serial_no', 'like', "%{$search}%");
});
}
$machines = $machineQuery->latest()->paginate($per_page)->withQueryString();
// AJAX 模式:只查當前 Tab 的搜尋/分頁結果
if ($isAjax) {
$machines = null;
$models_list = null;
$users_list = null;
// 2. 處理型號清單 (Models Tab)
$modelQuery = MachineModel::query()->withCount('machines');
if ($tab === 'models' && $search) {
$modelQuery->where('name', 'like', "%{$search}%");
}
$models_list = $modelQuery->latest()->paginate($per_page)->withQueryString();
switch ($tab) {
case 'machines':
$machineQuery = Machine::query()->with(['machineModel', 'paymentConfig', 'company']);
if ($search) {
$machineQuery->where(function ($q) use ($search) {
$q->where('name', 'like', "%{$search}%")
->orWhere('serial_no', 'like', "%{$search}%");
});
}
$machines = $machineQuery->latest()->paginate($per_page)->withQueryString();
break;
// 3. 處理機台權限 (Permissions Tab) - 僅顯示 is_admin 帳號
$users_list = null;
if ($tab === 'permissions') {
$userQuery = \App\Models\System\User::query()
->where('is_admin', true)
->with(['company', 'machines']);
if ($search) {
$userQuery->where(function($q) use ($search) {
$q->where('name', 'like', "%{$search}%")
->orWhere('username', 'like', "%{$search}%");
});
case 'models':
$modelQuery = MachineModel::query()->withCount('machines');
if ($search) {
$modelQuery->where('name', 'like', "%{$search}%");
}
$models_list = $modelQuery->latest()->paginate($per_page)->withQueryString();
break;
case 'permissions':
$userQuery = \App\Models\System\User::query()
->where('is_admin', true)
->with(['company', 'machines']);
if ($search) {
$userQuery->where(function($q) use ($search) {
$q->where('name', 'like', "%{$search}%")
->orWhere('username', 'like', "%{$search}%");
});
}
if ($request->filled('company_id')) {
$userQuery->where('company_id', $request->company_id);
}
$users_list = $userQuery->latest()->paginate($per_page)->withQueryString();
break;
}
if ($request->filled('company_id')) {
$userQuery->where('company_id', $request->company_id);
}
$companies = \App\Models\System\Company::select('id', 'name', 'code')->get();
$users_list = $userQuery->latest()->paginate($per_page)->withQueryString();
$tabView = match($tab) {
'models' => 'admin.basic-settings.machines.partials.tab-models',
'permissions' => 'admin.basic-settings.machines.partials.tab-permissions',
default => 'admin.basic-settings.machines.partials.tab-machines',
};
return response()->view($tabView, compact(
'machines', 'models_list', 'users_list', 'companies', 'tab'
));
}
// 4. 基礎下拉資料 (用於新增/編輯機台的彈窗)
// SSR 模式:一次查好全部三個 Tab 的首頁資料(供 x-show 即時切換)
$machines = Machine::query()
->with(['machineModel', 'paymentConfig', 'company'])
->latest()->paginate($per_page)->withQueryString();
$models_list = MachineModel::query()
->withCount('machines')
->latest()->paginate($per_page)->withQueryString();
$userQuery = \App\Models\System\User::query()
->where('is_admin', true)
->with(['company', 'machines']);
$users_list = $userQuery->latest()->paginate($per_page)->withQueryString();
// 基礎下拉資料 (用於新增/編輯機台的彈窗)
$models = MachineModel::select('id', 'name')->get();
$paymentConfigs = PaymentConfig::select('id', 'name')->get();
$companies = \App\Models\System\Company::select('id', 'name', 'code')->get();