feat(P21PWA2-1,P21PWA2-2,P21PWA2-3): 深链路由守卫/离线审批队列/SW缓存策略升级
这个提交包含在：
+132
-13
@@ -11,6 +11,7 @@ import {
|
||||
import { configureHttpAuth } from "../api/http";
|
||||
import type { AuthState, MeResponse } from "../api/types";
|
||||
import { changePassword as changePasswordApi } from "../api/auth";
|
||||
import { clearPwaRuntimeCaches } from "../pwa";
|
||||
import {
|
||||
fetchCurrentEmployee,
|
||||
loginWithPassword,
|
||||
@@ -19,12 +20,20 @@ import {
|
||||
} from "./authService";
|
||||
import { resolvePermissionsForRoles } from "./permissions";
|
||||
|
||||
type OfflineAuthSnapshot = {
|
||||
version: 1;
|
||||
me: MeResponse;
|
||||
permissions: string[];
|
||||
savedAt: string;
|
||||
};
|
||||
|
||||
type AuthContextValue = AuthState & {
|
||||
login: (identifier: string, password: string) => Promise<{ mustChangePassword: boolean }>;
|
||||
changePassword: (oldPassword: string, newPassword: string) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
bootstrapByRefresh: () => Promise<void>;
|
||||
clearSession: () => void;
|
||||
offlineAccessMode: boolean;
|
||||
};
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
@@ -38,13 +47,23 @@ const EMPTY_STATE: AuthState = {
|
||||
};
|
||||
|
||||
const MUST_CHANGE_PASSWORD_STORAGE_KEY = "hyb-oa.must_change_password";
|
||||
const OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY = "hyb-oa.auth_snapshot";
|
||||
const OFFLINE_AUTH_SNAPSHOT_VERSION = 1;
|
||||
const OFFLINE_AUTH_SNAPSHOT_TTL_MS = 24 * 60 * 60 * 1000;
|
||||
|
||||
function isWindowAvailable() {
|
||||
return typeof window !== "undefined";
|
||||
}
|
||||
|
||||
function readMustChangePasswordFromStorage() {
|
||||
return typeof window !== "undefined" && window.localStorage.getItem(MUST_CHANGE_PASSWORD_STORAGE_KEY) === "1";
|
||||
return isWindowAvailable() && window.localStorage.getItem(MUST_CHANGE_PASSWORD_STORAGE_KEY) === "1";
|
||||
}
|
||||
|
||||
function writeMustChangePasswordToStorage(value: boolean) {
|
||||
if (typeof window === "undefined") return;
|
||||
if (!isWindowAvailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value) {
|
||||
window.localStorage.setItem(MUST_CHANGE_PASSWORD_STORAGE_KEY, "1");
|
||||
} else {
|
||||
@@ -52,22 +71,77 @@ function writeMustChangePasswordToStorage(value: boolean) {
|
||||
}
|
||||
}
|
||||
|
||||
function buildStateWithUser(
|
||||
accessToken: string,
|
||||
me: MeResponse,
|
||||
mustChangePassword: boolean,
|
||||
): AuthState {
|
||||
function readOfflineAuthSnapshot() {
|
||||
if (!isWindowAvailable()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const rawValue = window.localStorage.getItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
|
||||
if (!rawValue) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const parsed = JSON.parse(rawValue) as Partial<OfflineAuthSnapshot> | null;
|
||||
if (!parsed || parsed.version !== OFFLINE_AUTH_SNAPSHOT_VERSION || !parsed.me || !Array.isArray(parsed.permissions) || typeof parsed.savedAt !== "string") {
|
||||
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
|
||||
return null;
|
||||
}
|
||||
|
||||
const savedAt = new Date(parsed.savedAt);
|
||||
if (Number.isNaN(savedAt.getTime()) || Date.now() - savedAt.getTime() > OFFLINE_AUTH_SNAPSHOT_TTL_MS) {
|
||||
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
accessToken,
|
||||
version: OFFLINE_AUTH_SNAPSHOT_VERSION,
|
||||
me: parsed.me,
|
||||
permissions: parsed.permissions.map((item) => String(item)),
|
||||
savedAt: savedAt.toISOString(),
|
||||
} satisfies OfflineAuthSnapshot;
|
||||
} catch {
|
||||
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeOfflineAuthSnapshot(me: MeResponse, permissions: string[]) {
|
||||
if (!isWindowAvailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const snapshot: OfflineAuthSnapshot = {
|
||||
version: OFFLINE_AUTH_SNAPSHOT_VERSION,
|
||||
me,
|
||||
permissions: resolvePermissionsForRoles(me.roleCodes ?? []),
|
||||
mustChangePassword,
|
||||
permissions,
|
||||
savedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
window.localStorage.setItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY, JSON.stringify(snapshot));
|
||||
}
|
||||
|
||||
function clearOfflineAuthSnapshot() {
|
||||
if (!isWindowAvailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.localStorage.removeItem(OFFLINE_AUTH_SNAPSHOT_STORAGE_KEY);
|
||||
}
|
||||
|
||||
function buildStateWithOfflineSnapshot(snapshot: OfflineAuthSnapshot): AuthState {
|
||||
return {
|
||||
accessToken: null,
|
||||
me: snapshot.me,
|
||||
permissions: snapshot.permissions,
|
||||
mustChangePassword: false,
|
||||
ready: true,
|
||||
};
|
||||
}
|
||||
|
||||
export function AuthProvider({ children }: PropsWithChildren) {
|
||||
const [state, setState] = useState<AuthState>(EMPTY_STATE);
|
||||
const [offlineAccessMode, setOfflineAccessMode] = useState(false);
|
||||
const tokenRef = useRef<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -76,7 +150,10 @@ export function AuthProvider({ children }: PropsWithChildren) {
|
||||
|
||||
const clearSession = useCallback(() => {
|
||||
tokenRef.current = null;
|
||||
setOfflineAccessMode(false);
|
||||
writeMustChangePasswordToStorage(false);
|
||||
clearOfflineAuthSnapshot();
|
||||
void clearPwaRuntimeCaches();
|
||||
setState((previous) => ({
|
||||
...previous,
|
||||
accessToken: null,
|
||||
@@ -89,23 +166,48 @@ export function AuthProvider({ children }: PropsWithChildren) {
|
||||
|
||||
const commitAuthenticatedUser = useCallback(
|
||||
(accessToken: string, me: MeResponse, mustChangePassword: boolean) => {
|
||||
const permissions = resolvePermissionsForRoles(me.roleCodes ?? []);
|
||||
tokenRef.current = accessToken;
|
||||
setOfflineAccessMode(false);
|
||||
writeMustChangePasswordToStorage(mustChangePassword);
|
||||
setState(buildStateWithUser(accessToken, me, mustChangePassword));
|
||||
writeOfflineAuthSnapshot(me, permissions);
|
||||
setState({
|
||||
accessToken,
|
||||
me,
|
||||
permissions,
|
||||
mustChangePassword,
|
||||
ready: true,
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const activateOfflineSnapshot = useCallback((snapshot: OfflineAuthSnapshot) => {
|
||||
tokenRef.current = null;
|
||||
setOfflineAccessMode(true);
|
||||
setState(buildStateWithOfflineSnapshot(snapshot));
|
||||
}, []);
|
||||
|
||||
const bootstrapByRefresh = useCallback(async () => {
|
||||
const offlineSnapshot = readOfflineAuthSnapshot();
|
||||
if (isWindowAvailable() && window.navigator.onLine === false && offlineSnapshot) {
|
||||
activateOfflineSnapshot(offlineSnapshot);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const refreshed = await refreshSession();
|
||||
const me = await fetchCurrentEmployee(refreshed.accessToken);
|
||||
const mustChangePassword = readMustChangePasswordFromStorage();
|
||||
commitAuthenticatedUser(refreshed.accessToken, me, mustChangePassword);
|
||||
} catch {
|
||||
if (isWindowAvailable() && window.navigator.onLine === false && offlineSnapshot) {
|
||||
activateOfflineSnapshot(offlineSnapshot);
|
||||
return;
|
||||
}
|
||||
clearSession();
|
||||
}
|
||||
}, [clearSession, commitAuthenticatedUser]);
|
||||
}, [activateOfflineSnapshot, clearSession, commitAuthenticatedUser]);
|
||||
|
||||
const login = useCallback(
|
||||
async (identifier: string, password: string) => {
|
||||
@@ -142,6 +244,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
|
||||
try {
|
||||
const refreshed = await refreshSession();
|
||||
tokenRef.current = refreshed.accessToken;
|
||||
setOfflineAccessMode(false);
|
||||
setState((previous) => ({
|
||||
...previous,
|
||||
accessToken: refreshed.accessToken,
|
||||
@@ -161,6 +264,21 @@ export function AuthProvider({ children }: PropsWithChildren) {
|
||||
void bootstrapByRefresh();
|
||||
}, [bootstrapByRefresh]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!offlineAccessMode) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const handleOnline = () => {
|
||||
void bootstrapByRefresh();
|
||||
};
|
||||
|
||||
window.addEventListener("online", handleOnline);
|
||||
return () => {
|
||||
window.removeEventListener("online", handleOnline);
|
||||
};
|
||||
}, [bootstrapByRefresh, offlineAccessMode]);
|
||||
|
||||
const value = useMemo<AuthContextValue>(
|
||||
() => ({
|
||||
...state,
|
||||
@@ -169,8 +287,9 @@ export function AuthProvider({ children }: PropsWithChildren) {
|
||||
logout,
|
||||
bootstrapByRefresh,
|
||||
clearSession,
|
||||
offlineAccessMode,
|
||||
}),
|
||||
[bootstrapByRefresh, changePassword, clearSession, login, logout, state],
|
||||
[bootstrapByRefresh, changePassword, clearSession, login, logout, offlineAccessMode, state],
|
||||
);
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
export function requestPromise<T>(request: IDBRequest<T>) {
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
|
||||
});
|
||||
}
|
||||
|
||||
type IndexedDbStoreOptions = {
|
||||
dbName: string;
|
||||
dbVersion: number;
|
||||
upgrade: (db: IDBDatabase, request: IDBOpenDBRequest) => void;
|
||||
};
|
||||
|
||||
export function createIndexedDbStore(options: IndexedDbStoreOptions) {
|
||||
let dbPromise: Promise<IDBDatabase> | null = null;
|
||||
|
||||
function getDatabase() {
|
||||
if (!dbPromise) {
|
||||
dbPromise = new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(options.dbName, options.dbVersion);
|
||||
|
||||
request.onupgradeneeded = () => {
|
||||
options.upgrade(request.result, request);
|
||||
};
|
||||
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
|
||||
});
|
||||
}
|
||||
|
||||
return dbPromise;
|
||||
}
|
||||
|
||||
async function withStore<T>(
|
||||
storeName: string,
|
||||
mode: IDBTransactionMode,
|
||||
executor: (store: IDBObjectStore) => Promise<T> | T,
|
||||
) {
|
||||
const db = await getDatabase();
|
||||
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
const tx = db.transaction(storeName, mode);
|
||||
const store = tx.objectStore(storeName);
|
||||
|
||||
Promise.resolve(executor(store))
|
||||
.then((result) => {
|
||||
tx.oncomplete = () => resolve(result);
|
||||
tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
|
||||
tx.onabort = () => reject(tx.error ?? new Error("indexeddb_tx_aborted"));
|
||||
})
|
||||
.catch((error) => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
getDatabase,
|
||||
withStore,
|
||||
};
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { InventoryCheckResult } from "../api/inventoryChecks";
|
||||
import { createIndexedDbStore, requestPromise } from "./indexedDbStore";
|
||||
|
||||
export type QueuedInventoryScanItem = {
|
||||
id: string;
|
||||
@@ -11,54 +12,16 @@ export type QueuedInventoryScanItem = {
|
||||
lastError: string | null;
|
||||
};
|
||||
|
||||
const DB_NAME = "hyb-oa-mobile-inventory";
|
||||
const DB_VERSION = 1;
|
||||
const STORE_NAME = "inventory_scan_queue";
|
||||
|
||||
let dbPromise: Promise<IDBDatabase> | null = null;
|
||||
|
||||
function getDatabase() {
|
||||
if (!dbPromise) {
|
||||
dbPromise = new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(DB_NAME, DB_VERSION);
|
||||
|
||||
request.onupgradeneeded = () => {
|
||||
const db = request.result;
|
||||
const database = createIndexedDbStore({
|
||||
dbName: "hyb-oa-mobile-inventory",
|
||||
dbVersion: 1,
|
||||
upgrade(db) {
|
||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
||||
db.createObjectStore(STORE_NAME, { keyPath: "id" });
|
||||
}
|
||||
};
|
||||
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
|
||||
});
|
||||
}
|
||||
|
||||
return dbPromise;
|
||||
}
|
||||
|
||||
function requestPromise<T>(request: IDBRequest<T>) {
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
|
||||
});
|
||||
}
|
||||
|
||||
async function withStore<T>(mode: IDBTransactionMode, executor: (store: IDBObjectStore) => Promise<T>) {
|
||||
const db = await getDatabase();
|
||||
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
const tx = db.transaction(STORE_NAME, mode);
|
||||
const store = tx.objectStore(STORE_NAME);
|
||||
|
||||
executor(store)
|
||||
.then((result) => {
|
||||
tx.oncomplete = () => resolve(result);
|
||||
tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
|
||||
})
|
||||
.catch((error) => reject(error));
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export async function enqueueInventoryScan(input: {
|
||||
inventoryCheckId: string;
|
||||
@@ -79,7 +42,7 @@ export async function enqueueInventoryScan(input: {
|
||||
lastError: null,
|
||||
};
|
||||
|
||||
await withStore("readwrite", async (store) => {
|
||||
await database.withStore(STORE_NAME, "readwrite", async (store) => {
|
||||
await requestPromise(store.put(item));
|
||||
return true;
|
||||
});
|
||||
@@ -88,21 +51,21 @@ export async function enqueueInventoryScan(input: {
|
||||
}
|
||||
|
||||
export async function listQueuedInventoryScans() {
|
||||
return withStore("readonly", async (store) => {
|
||||
return database.withStore(STORE_NAME, "readonly", async (store) => {
|
||||
const records = (await requestPromise(store.getAll())) as QueuedInventoryScanItem[];
|
||||
return records.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
|
||||
});
|
||||
}
|
||||
|
||||
export async function removeQueuedInventoryScan(id: string) {
|
||||
await withStore("readwrite", async (store) => {
|
||||
await database.withStore(STORE_NAME, "readwrite", async (store) => {
|
||||
await requestPromise(store.delete(id));
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateQueuedInventoryScanError(id: string, lastError: string | null) {
|
||||
await withStore("readwrite", async (store) => {
|
||||
await database.withStore(STORE_NAME, "readwrite", async (store) => {
|
||||
const existing = (await requestPromise(store.get(id))) as QueuedInventoryScanItem | undefined;
|
||||
if (!existing) {
|
||||
return false;
|
||||
|
||||
+11
-47
@@ -1,3 +1,5 @@
|
||||
import { createIndexedDbStore, requestPromise } from "./indexedDbStore";
|
||||
|
||||
export type MobileUploadQueueItem = {
|
||||
id: string;
|
||||
fileName: string;
|
||||
@@ -7,31 +9,16 @@ export type MobileUploadQueueItem = {
|
||||
ownerEmployeeId: string | null;
|
||||
};
|
||||
|
||||
const DB_NAME = "hyb-oa-mobile";
|
||||
const DB_VERSION = 1;
|
||||
const STORE_NAME = "invoice_upload_queue";
|
||||
|
||||
let dbPromise: Promise<IDBDatabase> | null = null;
|
||||
|
||||
function getDatabase() {
|
||||
if (!dbPromise) {
|
||||
dbPromise = new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(DB_NAME, DB_VERSION);
|
||||
|
||||
request.onupgradeneeded = () => {
|
||||
const db = request.result;
|
||||
const database = createIndexedDbStore({
|
||||
dbName: "hyb-oa-mobile",
|
||||
dbVersion: 1,
|
||||
upgrade(db) {
|
||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
||||
db.createObjectStore(STORE_NAME, { keyPath: "id" });
|
||||
}
|
||||
};
|
||||
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
|
||||
});
|
||||
}
|
||||
|
||||
return dbPromise;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function toDataUrl(file: File) {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
@@ -65,29 +52,6 @@ function fromDataUrl(dataUrl: string, fallbackFileName: string, fallbackMimeType
|
||||
return new File([bytes], fallbackFileName, { type: mimeType });
|
||||
}
|
||||
|
||||
async function withStore<T>(mode: IDBTransactionMode, executor: (store: IDBObjectStore) => Promise<T>) {
|
||||
const db = await getDatabase();
|
||||
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
const tx = db.transaction(STORE_NAME, mode);
|
||||
const store = tx.objectStore(STORE_NAME);
|
||||
|
||||
executor(store)
|
||||
.then((result) => {
|
||||
tx.oncomplete = () => resolve(result);
|
||||
tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
|
||||
})
|
||||
.catch((error) => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
function requestPromise<T>(request: IDBRequest<T>) {
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
|
||||
});
|
||||
}
|
||||
|
||||
export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string | null = null) {
|
||||
const dataUrl = await toDataUrl(file);
|
||||
const item: MobileUploadQueueItem = {
|
||||
@@ -99,7 +63,7 @@ export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string |
|
||||
ownerEmployeeId,
|
||||
};
|
||||
|
||||
await withStore("readwrite", async (store) => {
|
||||
await database.withStore(STORE_NAME, "readwrite", async (store) => {
|
||||
await requestPromise(store.put(item));
|
||||
return true;
|
||||
});
|
||||
@@ -108,14 +72,14 @@ export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string |
|
||||
}
|
||||
|
||||
export async function listQueuedInvoiceUploads() {
|
||||
return withStore("readonly", async (store) => {
|
||||
return database.withStore(STORE_NAME, "readonly", async (store) => {
|
||||
const records = (await requestPromise(store.getAll())) as MobileUploadQueueItem[];
|
||||
return records.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
|
||||
});
|
||||
}
|
||||
|
||||
export async function removeQueuedInvoiceUpload(id: string) {
|
||||
await withStore("readwrite", async (store) => {
|
||||
await database.withStore(STORE_NAME, "readwrite", async (store) => {
|
||||
await requestPromise(store.delete(id));
|
||||
return true;
|
||||
});
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
import type { WorkflowTaskDetail } from "../api/workflow";
|
||||
import { createIndexedDbStore, requestPromise } from "./indexedDbStore";
|
||||
|
||||
export type WorkflowDraftAction = "approve" | "reject";
|
||||
export type WorkflowDraftQueueStatus = "queued" | "failed" | "conflicted";
|
||||
|
||||
export type WorkflowTaskReferenceSnapshot = {
|
||||
stepName: string | null;
|
||||
entityType: string | null;
|
||||
entityId: string | null;
|
||||
reference: string | null;
|
||||
};
|
||||
|
||||
export type WorkflowDraftQueueItem = {
|
||||
id: string;
|
||||
taskId: string;
|
||||
action: WorkflowDraftAction;
|
||||
comment: string | null;
|
||||
status: WorkflowDraftQueueStatus;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lastError: string | null;
|
||||
ownerEmployeeId: string | null;
|
||||
taskSnapshot: WorkflowTaskReferenceSnapshot;
|
||||
};
|
||||
|
||||
type CachedWorkflowTaskDetail = {
|
||||
id: string;
|
||||
ownerEmployeeId: string | null;
|
||||
savedAt: string;
|
||||
taskSnapshot: WorkflowTaskReferenceSnapshot;
|
||||
detail: WorkflowTaskDetail;
|
||||
};
|
||||
|
||||
const QUEUE_STORE_NAME = "workflow_action_queue";
|
||||
const DETAIL_CACHE_STORE_NAME = "workflow_task_cache";
|
||||
const database = createIndexedDbStore({
|
||||
dbName: "hyb-oa-mobile-workflow",
|
||||
dbVersion: 1,
|
||||
upgrade(db) {
|
||||
if (!db.objectStoreNames.contains(QUEUE_STORE_NAME)) {
|
||||
db.createObjectStore(QUEUE_STORE_NAME, { keyPath: "id" });
|
||||
}
|
||||
if (!db.objectStoreNames.contains(DETAIL_CACHE_STORE_NAME)) {
|
||||
db.createObjectStore(DETAIL_CACHE_STORE_NAME, { keyPath: "id" });
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function matchesOwner(recordOwnerId: string | null | undefined, ownerEmployeeId: string | null) {
|
||||
return (recordOwnerId ?? null) === (ownerEmployeeId ?? null);
|
||||
}
|
||||
|
||||
export function resolveWorkflowTaskReferenceSnapshot(detail: WorkflowTaskDetail): WorkflowTaskReferenceSnapshot {
|
||||
const entityType = detail.workflowInstance?.entityType ?? null;
|
||||
const entityId =
|
||||
detail.reimbursement?.id ?? detail.leaveRequest?.id ?? detail.purchaseRequest?.id ?? detail.travelRequest?.id ?? detail.workflowInstance?.id ?? null;
|
||||
|
||||
const reference =
|
||||
detail.reimbursement?.formNumber ??
|
||||
detail.purchaseRequest?.requestNo ??
|
||||
detail.travelRequest?.requestNo ??
|
||||
detail.leaveRequest?.id ??
|
||||
detail.task.id;
|
||||
|
||||
return {
|
||||
stepName: detail.task.stepName ?? null,
|
||||
entityType,
|
||||
entityId,
|
||||
reference,
|
||||
};
|
||||
}
|
||||
|
||||
export async function cacheWorkflowTaskDetail(detail: WorkflowTaskDetail, ownerEmployeeId: string | null) {
|
||||
const item: CachedWorkflowTaskDetail = {
|
||||
id: detail.task.id,
|
||||
ownerEmployeeId,
|
||||
savedAt: new Date().toISOString(),
|
||||
taskSnapshot: resolveWorkflowTaskReferenceSnapshot(detail),
|
||||
detail,
|
||||
};
|
||||
|
||||
await database.withStore(DETAIL_CACHE_STORE_NAME, "readwrite", async (store) => {
|
||||
await requestPromise(store.put(item));
|
||||
return true;
|
||||
});
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
export async function getCachedWorkflowTaskDetail(taskId: string, ownerEmployeeId: string | null) {
|
||||
return database.withStore(DETAIL_CACHE_STORE_NAME, "readonly", async (store) => {
|
||||
const item = (await requestPromise(store.get(taskId))) as CachedWorkflowTaskDetail | undefined;
|
||||
if (!item || !matchesOwner(item.ownerEmployeeId, ownerEmployeeId)) {
|
||||
return null;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
export async function listCachedWorkflowTaskDetails(ownerEmployeeId: string | null) {
|
||||
return database.withStore(DETAIL_CACHE_STORE_NAME, "readonly", async (store) => {
|
||||
const records = (await requestPromise(store.getAll())) as CachedWorkflowTaskDetail[];
|
||||
return records
|
||||
.filter((item) => matchesOwner(item.ownerEmployeeId, ownerEmployeeId))
|
||||
.sort((a, b) => b.savedAt.localeCompare(a.savedAt));
|
||||
});
|
||||
}
|
||||
|
||||
export async function enqueueWorkflowActionDraft(input: {
|
||||
taskId: string;
|
||||
action: WorkflowDraftAction;
|
||||
comment?: string | null;
|
||||
ownerEmployeeId: string | null;
|
||||
detail?: WorkflowTaskDetail | null;
|
||||
taskSnapshot?: WorkflowTaskReferenceSnapshot | null;
|
||||
}) {
|
||||
const id = input.taskId;
|
||||
const now = new Date().toISOString();
|
||||
const nextSnapshot = input.detail
|
||||
? resolveWorkflowTaskReferenceSnapshot(input.detail)
|
||||
: input.taskSnapshot ?? {
|
||||
stepName: null,
|
||||
entityType: null,
|
||||
entityId: null,
|
||||
reference: input.taskId,
|
||||
};
|
||||
|
||||
await database.withStore(QUEUE_STORE_NAME, "readwrite", async (store) => {
|
||||
const existing = (await requestPromise(store.get(id))) as WorkflowDraftQueueItem | undefined;
|
||||
const item: WorkflowDraftQueueItem = {
|
||||
id,
|
||||
taskId: input.taskId,
|
||||
action: input.action,
|
||||
comment: input.comment?.trim() ? input.comment.trim() : null,
|
||||
status: "queued",
|
||||
createdAt: existing && matchesOwner(existing.ownerEmployeeId, input.ownerEmployeeId) ? existing.createdAt : now,
|
||||
updatedAt: now,
|
||||
lastError: null,
|
||||
ownerEmployeeId: input.ownerEmployeeId,
|
||||
taskSnapshot: nextSnapshot,
|
||||
};
|
||||
|
||||
await requestPromise(store.put(item));
|
||||
return true;
|
||||
});
|
||||
|
||||
if (input.detail) {
|
||||
await cacheWorkflowTaskDetail(input.detail, input.ownerEmployeeId);
|
||||
}
|
||||
|
||||
return getWorkflowActionDraft(input.taskId, input.ownerEmployeeId);
|
||||
}
|
||||
|
||||
export async function listWorkflowActionDrafts(ownerEmployeeId: string | null) {
|
||||
return database.withStore(QUEUE_STORE_NAME, "readonly", async (store) => {
|
||||
const records = (await requestPromise(store.getAll())) as WorkflowDraftQueueItem[];
|
||||
return records
|
||||
.filter((item) => matchesOwner(item.ownerEmployeeId, ownerEmployeeId))
|
||||
.sort((a, b) => a.updatedAt.localeCompare(b.updatedAt));
|
||||
});
|
||||
}
|
||||
|
||||
export async function getWorkflowActionDraft(taskId: string, ownerEmployeeId: string | null) {
|
||||
return database.withStore(QUEUE_STORE_NAME, "readonly", async (store) => {
|
||||
const item = (await requestPromise(store.get(taskId))) as WorkflowDraftQueueItem | undefined;
|
||||
if (!item || !matchesOwner(item.ownerEmployeeId, ownerEmployeeId)) {
|
||||
return null;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
export async function removeWorkflowActionDraft(taskId: string, ownerEmployeeId: string | null) {
|
||||
await database.withStore(QUEUE_STORE_NAME, "readwrite", async (store) => {
|
||||
const existing = (await requestPromise(store.get(taskId))) as WorkflowDraftQueueItem | undefined;
|
||||
if (!existing || !matchesOwner(existing.ownerEmployeeId, ownerEmployeeId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await requestPromise(store.delete(taskId));
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateWorkflowActionDraftStatus(input: {
|
||||
taskId: string;
|
||||
ownerEmployeeId: string | null;
|
||||
status: WorkflowDraftQueueStatus;
|
||||
lastError: string | null;
|
||||
}) {
|
||||
return database.withStore(QUEUE_STORE_NAME, "readwrite", async (store) => {
|
||||
const existing = (await requestPromise(store.get(input.taskId))) as WorkflowDraftQueueItem | undefined;
|
||||
if (!existing || !matchesOwner(existing.ownerEmployeeId, input.ownerEmployeeId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await requestPromise(
|
||||
store.put({
|
||||
...existing,
|
||||
status: input.status,
|
||||
lastError: input.lastError,
|
||||
updatedAt: new Date().toISOString(),
|
||||
}),
|
||||
);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { isApiError } from "../api/types";
|
||||
@@ -11,14 +12,29 @@ import {
|
||||
rejectWorkflowTask,
|
||||
returnWorkflowTask,
|
||||
transferWorkflowTask,
|
||||
type WorkflowTaskDetail,
|
||||
} from "../api/workflow";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Spinner } from "../components/ui/spinner";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
import {
|
||||
cacheWorkflowTaskDetail,
|
||||
enqueueWorkflowActionDraft,
|
||||
getCachedWorkflowTaskDetail,
|
||||
listCachedWorkflowTaskDetails,
|
||||
listWorkflowActionDrafts,
|
||||
removeWorkflowActionDraft,
|
||||
resolveWorkflowTaskReferenceSnapshot,
|
||||
updateWorkflowActionDraftStatus,
|
||||
type WorkflowDraftQueueItem,
|
||||
} from "../mobile/workflowActionQueue";
|
||||
|
||||
type MobileAction = "approve" | "reject" | "return" | "transfer";
|
||||
|
||||
type ReplayClassification = "failed" | "conflicted";
|
||||
|
||||
function entityLabel(entityType: string | undefined) {
|
||||
if (entityType === "leave") {
|
||||
return "请假";
|
||||
@@ -35,53 +51,203 @@ function entityLabel(entityType: string | undefined) {
|
||||
return entityType || "未知";
|
||||
}
|
||||
|
||||
function resolveErrorMessage(error: unknown) {
|
||||
if (isApiError(error)) {
|
||||
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
||||
}
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return "动作执行失败";
|
||||
}
|
||||
|
||||
function classifyReplayError(error: unknown): ReplayClassification {
|
||||
if (!isApiError(error)) {
|
||||
return "failed";
|
||||
}
|
||||
|
||||
if (
|
||||
(error.status === 409 && error.details?.task === "already_processed") ||
|
||||
error.status === 403 ||
|
||||
error.status === 404
|
||||
) {
|
||||
return "conflicted";
|
||||
}
|
||||
|
||||
return "failed";
|
||||
}
|
||||
|
||||
function queueStatusLabel(status: WorkflowDraftQueueItem["status"]) {
|
||||
if (status === "queued") {
|
||||
return "待同步";
|
||||
}
|
||||
if (status === "failed") {
|
||||
return "同步失败";
|
||||
}
|
||||
return "存在冲突";
|
||||
}
|
||||
|
||||
function formatDateTime(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString("zh-CN");
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
export function MobileApprovalsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedTaskId, setSelectedTaskId] = useState("");
|
||||
const { me, accessToken, offlineAccessMode } = useAuth();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const deepLinkTaskId = searchParams.get("taskId")?.trim() ?? "";
|
||||
|
||||
const [selectedTaskId, setSelectedTaskId] = useState(deepLinkTaskId);
|
||||
const [error, setError] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [comment, setComment] = useState("");
|
||||
const [transferToApproverId, setTransferToApproverId] = useState("");
|
||||
const [transferReason, setTransferReason] = useState("");
|
||||
const [isOnline, setIsOnline] = useState<boolean>(typeof navigator === "undefined" ? true : navigator.onLine);
|
||||
const autoSyncRequestedRef = useRef(false);
|
||||
|
||||
const ownerEmployeeId = me?.id ?? null;
|
||||
const canUseRemote = isOnline && Boolean(accessToken);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedTaskId(deepLinkTaskId);
|
||||
}, [deepLinkTaskId]);
|
||||
|
||||
function updateTaskSelection(taskId: string) {
|
||||
setSelectedTaskId(taskId);
|
||||
const nextParams = new URLSearchParams(searchParams);
|
||||
if (taskId) {
|
||||
nextParams.set("taskId", taskId);
|
||||
} else {
|
||||
nextParams.delete("taskId");
|
||||
}
|
||||
setSearchParams(nextParams, { replace: true });
|
||||
}
|
||||
|
||||
const tasksQuery = useQuery({
|
||||
enabled: canUseRemote,
|
||||
queryKey: ["mobile", "workflow", "tasks"],
|
||||
queryFn: () => fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 30 }),
|
||||
});
|
||||
|
||||
const detailQuery = useQuery({
|
||||
enabled: Boolean(selectedTaskId),
|
||||
enabled: Boolean(selectedTaskId) && canUseRemote,
|
||||
queryKey: ["mobile", "workflow", "task-detail", selectedTaskId],
|
||||
queryFn: () => fetchWorkflowTaskDetail(selectedTaskId),
|
||||
});
|
||||
|
||||
const cachedTasksQuery = useQuery({
|
||||
enabled: Boolean(ownerEmployeeId),
|
||||
queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId],
|
||||
queryFn: () => listCachedWorkflowTaskDetails(ownerEmployeeId),
|
||||
});
|
||||
|
||||
const cachedDetailQuery = useQuery({
|
||||
enabled: Boolean(selectedTaskId) && Boolean(ownerEmployeeId),
|
||||
queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId, selectedTaskId],
|
||||
queryFn: () => getCachedWorkflowTaskDetail(selectedTaskId, ownerEmployeeId),
|
||||
});
|
||||
|
||||
const queueQuery = useQuery({
|
||||
enabled: Boolean(ownerEmployeeId),
|
||||
queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId],
|
||||
queryFn: () => listWorkflowActionDrafts(ownerEmployeeId),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!detailQuery.data || !ownerEmployeeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
void cacheWorkflowTaskDetail(detailQuery.data, ownerEmployeeId).then(async () => {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId, detailQuery.data?.task.id] }),
|
||||
]);
|
||||
});
|
||||
}, [detailQuery.data, ownerEmployeeId, queryClient]);
|
||||
|
||||
const selectedTask = useMemo<WorkflowTaskDetail | null>(() => {
|
||||
if (detailQuery.data) {
|
||||
return detailQuery.data;
|
||||
}
|
||||
if (!canUseRemote) {
|
||||
return cachedDetailQuery.data?.detail ?? null;
|
||||
}
|
||||
return null;
|
||||
}, [cachedDetailQuery.data?.detail, canUseRemote, detailQuery.data]);
|
||||
|
||||
const canTransfer =
|
||||
canUseRemote &&
|
||||
selectedTask?.workflowInstance?.entityType === "reimbursement" &&
|
||||
selectedTask.allowedActions.includes("transfer");
|
||||
|
||||
const approversQuery = useQuery({
|
||||
enabled: detailQuery.data?.allowedActions?.includes("transfer") ?? false,
|
||||
enabled: Boolean(canTransfer),
|
||||
queryKey: ["mobile", "workflow", "approvers"],
|
||||
queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
|
||||
});
|
||||
|
||||
const currentQueueItems = queueQuery.data ?? [];
|
||||
const retryableQueueItems = useMemo(
|
||||
() => currentQueueItems.filter((item) => item.status !== "conflicted"),
|
||||
[currentQueueItems],
|
||||
);
|
||||
|
||||
const actionMutation = useMutation({
|
||||
mutationFn: async (action: MobileAction) => {
|
||||
if (!selectedTaskId) {
|
||||
throw new Error("请选择任务");
|
||||
}
|
||||
if (!selectedTask) {
|
||||
throw new Error("当前待办尚未缓存，请联网加载后再操作");
|
||||
}
|
||||
if (!selectedTask.allowedActions.includes(action)) {
|
||||
throw new Error("当前待办不允许该动作");
|
||||
}
|
||||
|
||||
if (!canUseRemote) {
|
||||
if (action === "return" || action === "transfer") {
|
||||
throw new Error("离线仅支持通过 / 驳回草稿，退回与转审需联网执行");
|
||||
}
|
||||
if (action === "reject" && !comment.trim()) {
|
||||
throw new Error("驳回必须填写意见");
|
||||
}
|
||||
|
||||
await enqueueWorkflowActionDraft({
|
||||
taskId: selectedTaskId,
|
||||
action,
|
||||
comment: action === "reject" ? comment.trim() : null,
|
||||
ownerEmployeeId,
|
||||
detail: selectedTask,
|
||||
});
|
||||
|
||||
return { mode: "queued" as const, action };
|
||||
}
|
||||
|
||||
if (action === "approve") {
|
||||
return approveWorkflowTask(selectedTaskId);
|
||||
await approveWorkflowTask(selectedTaskId);
|
||||
return { mode: "submitted" as const, action };
|
||||
}
|
||||
|
||||
if (action === "reject") {
|
||||
if (!comment.trim()) {
|
||||
throw new Error("驳回必须填写意见");
|
||||
}
|
||||
return rejectWorkflowTask(selectedTaskId, comment.trim());
|
||||
await rejectWorkflowTask(selectedTaskId, comment.trim());
|
||||
return { mode: "submitted" as const, action };
|
||||
}
|
||||
|
||||
if (action === "return") {
|
||||
if (!comment.trim()) {
|
||||
throw new Error("退回必须填写意见");
|
||||
}
|
||||
return returnWorkflowTask(selectedTaskId, comment.trim());
|
||||
await returnWorkflowTask(selectedTaskId, comment.trim());
|
||||
return { mode: "submitted" as const, action };
|
||||
}
|
||||
|
||||
if (!transferToApproverId) {
|
||||
@@ -91,65 +257,195 @@ export function MobileApprovalsPage() {
|
||||
throw new Error("转审理由至少 10 个字");
|
||||
}
|
||||
|
||||
return transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
|
||||
await transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
|
||||
return { mode: "submitted" as const, action };
|
||||
},
|
||||
onSuccess: async () => {
|
||||
onSuccess: async (result) => {
|
||||
if (result.mode === "queued") {
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] });
|
||||
setError("");
|
||||
setMessage(result.action === "approve" ? "当前离线，通过草稿已加入待同步队列。" : "当前离线，驳回草稿已加入待同步队列。");
|
||||
toast.success(result.action === "approve" ? "已加入通过草稿队列" : "已加入驳回草稿队列");
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-cache", ownerEmployeeId] }),
|
||||
]);
|
||||
setComment("");
|
||||
setTransferReason("");
|
||||
setTransferToApproverId("");
|
||||
setError("");
|
||||
setMessage("");
|
||||
toast.success("操作成功");
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "动作执行失败";
|
||||
setError(msg);
|
||||
toast.error(msg);
|
||||
onError: (actionError) => {
|
||||
const nextError = resolveErrorMessage(actionError);
|
||||
setError(nextError);
|
||||
setMessage("");
|
||||
toast.error(nextError);
|
||||
},
|
||||
});
|
||||
|
||||
const syncMutation = useMutation({
|
||||
mutationFn: async (items: WorkflowDraftQueueItem[]) => {
|
||||
let succeeded = 0;
|
||||
let failed = 0;
|
||||
let conflicted = 0;
|
||||
|
||||
for (const item of items.sort((a, b) => a.updatedAt.localeCompare(b.updatedAt))) {
|
||||
try {
|
||||
if (item.action === "approve") {
|
||||
await approveWorkflowTask(item.taskId);
|
||||
} else {
|
||||
await rejectWorkflowTask(item.taskId, item.comment ?? "");
|
||||
}
|
||||
await removeWorkflowActionDraft(item.taskId, ownerEmployeeId);
|
||||
succeeded += 1;
|
||||
} catch (syncError) {
|
||||
const classification = classifyReplayError(syncError);
|
||||
const lastError = resolveErrorMessage(syncError);
|
||||
await updateWorkflowActionDraftStatus({
|
||||
taskId: item.taskId,
|
||||
ownerEmployeeId,
|
||||
status: classification,
|
||||
lastError,
|
||||
});
|
||||
|
||||
if (classification === "conflicted") {
|
||||
conflicted += 1;
|
||||
} else {
|
||||
failed += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { succeeded, failed, conflicted };
|
||||
},
|
||||
onSuccess: async (result) => {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
|
||||
]);
|
||||
setError("");
|
||||
setMessage(`草稿同步完成：成功 ${result.succeeded}，失败 ${result.failed}，冲突 ${result.conflicted}`);
|
||||
if (result.succeeded || result.failed || result.conflicted) {
|
||||
toast.success(`草稿同步完成：成功 ${result.succeeded}，失败 ${result.failed}，冲突 ${result.conflicted}`);
|
||||
}
|
||||
},
|
||||
onError: (syncError) => {
|
||||
const nextError = resolveErrorMessage(syncError);
|
||||
setError(nextError);
|
||||
setMessage("");
|
||||
toast.error(nextError);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const onOnline = () => {
|
||||
setIsOnline(true);
|
||||
autoSyncRequestedRef.current = true;
|
||||
};
|
||||
const onOffline = () => {
|
||||
setIsOnline(false);
|
||||
};
|
||||
|
||||
window.addEventListener("online", onOnline);
|
||||
window.addEventListener("offline", onOffline);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("online", onOnline);
|
||||
window.removeEventListener("offline", onOffline);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoSyncRequestedRef.current || !canUseRemote || syncMutation.isPending) {
|
||||
return;
|
||||
}
|
||||
|
||||
autoSyncRequestedRef.current = false;
|
||||
if (retryableQueueItems.length) {
|
||||
syncMutation.mutate(retryableQueueItems);
|
||||
}
|
||||
}, [canUseRemote, retryableQueueItems, syncMutation]);
|
||||
|
||||
const pendingTasks = tasksQuery.data?.items ?? [];
|
||||
const selectedTask = detailQuery.data;
|
||||
const canTransfer =
|
||||
selectedTask?.workflowInstance?.entityType === "reimbursement" &&
|
||||
selectedTask.allowedActions.includes("transfer");
|
||||
const cachedTasks = cachedTasksQuery.data ?? [];
|
||||
const visibleTaskCards = canUseRemote
|
||||
? pendingTasks.map((task) => ({
|
||||
id: task.id,
|
||||
title: task.stepName,
|
||||
subtitle: `业务：${entityLabel(task.workflowInstance?.entityType)}`,
|
||||
status: task.status,
|
||||
}))
|
||||
: cachedTasks.map((item) => ({
|
||||
id: item.detail.task.id,
|
||||
title: item.taskSnapshot.stepName ?? item.detail.task.stepName,
|
||||
subtitle: `业务：${entityLabel(item.taskSnapshot.entityType ?? item.detail.workflowInstance?.entityType)} · 缓存于 ${formatDateTime(item.savedAt)}`,
|
||||
status: item.detail.task.status,
|
||||
}));
|
||||
|
||||
const selectedReference = selectedTask ? resolveWorkflowTaskReferenceSnapshot(selectedTask) : null;
|
||||
const isOfflineUncachedDeepLink = Boolean(selectedTaskId) && !selectedTask && !canUseRemote;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<PageHeader title="移动审批" subtitle="小屏快速处理待办任务。" />
|
||||
<PageHeader
|
||||
title="移动审批"
|
||||
subtitle={deepLinkTaskId ? `深链待办：${deepLinkTaskId}` : "小屏快速处理待办任务，支持离线草稿与联网重放。"}
|
||||
/>
|
||||
|
||||
{!isOnline ? (
|
||||
<p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">
|
||||
当前离线{offlineAccessMode ? "，已使用本地会话快照进入移动审批壳。" : "。"}仅支持查看已缓存待办，并起草通过 / 驳回草稿。
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
||||
) : null}
|
||||
|
||||
{message ? (
|
||||
<p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
|
||||
) : null}
|
||||
|
||||
<div className="card-std space-y-3 p-4" data-testid="mobile-approvals-list">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className="text-base font-semibold text-zinc-900">待办任务</h3>
|
||||
<span className={`text-sm ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
|
||||
</div>
|
||||
|
||||
{tasksQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}
|
||||
{canUseRemote && tasksQuery.isLoading ? (
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div>
|
||||
) : null}
|
||||
|
||||
{!tasksQuery.isLoading && pendingTasks.length === 0 ? (
|
||||
<p className="text-sm text-zinc-500">暂无待办任务。</p>
|
||||
{!canUseRemote ? (
|
||||
<p className="text-sm text-zinc-500">离线状态下展示已缓存待办；若未缓存任务详情，可通过深链任务号联网后重试。</p>
|
||||
) : null}
|
||||
|
||||
{!visibleTaskCards.length ? (
|
||||
<p className="text-sm text-zinc-500">{canUseRemote ? "暂无待办任务。" : "暂无已缓存待办。"}</p>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-2">
|
||||
{pendingTasks.map((task) => (
|
||||
{visibleTaskCards.map((task) => (
|
||||
<button
|
||||
key={task.id}
|
||||
className={`w-full rounded-lg border px-3 py-2 text-left text-sm ${
|
||||
selectedTaskId === task.id
|
||||
? "border-primary bg-primary-50 text-primary"
|
||||
: "border-zinc-200 bg-white text-zinc-800"
|
||||
selectedTaskId === task.id ? "border-primary bg-primary-50 text-primary" : "border-zinc-200 bg-white text-zinc-800"
|
||||
}`}
|
||||
data-testid={`mobile-approvals-task-${task.id}`}
|
||||
onClick={() => setSelectedTaskId(task.id)}
|
||||
onClick={() => updateTaskSelection(task.id)}
|
||||
type="button"
|
||||
>
|
||||
<div className="font-medium">{task.stepName}</div>
|
||||
<div className="font-medium">{task.title}</div>
|
||||
<div className="text-xs text-zinc-500">任务ID: {task.id}</div>
|
||||
<div className="text-xs text-zinc-500">业务: {entityLabel(task.workflowInstance?.entityType)}</div>
|
||||
<div className="text-xs text-zinc-500">{task.subtitle}</div>
|
||||
<div className="text-xs text-zinc-500">状态：{task.status}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -160,16 +456,27 @@ export function MobileApprovalsPage() {
|
||||
|
||||
{!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}
|
||||
|
||||
{selectedTaskId && detailQuery.isLoading ? (
|
||||
{selectedTaskId && canUseRemote && detailQuery.isLoading ? (
|
||||
<p className="text-sm text-zinc-500">加载任务详情中...</p>
|
||||
) : null}
|
||||
|
||||
{selectedTask && (
|
||||
{selectedTaskId && canUseRemote && detailQuery.isError ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveErrorMessage(detailQuery.error)}</p>
|
||||
) : null}
|
||||
|
||||
{isOfflineUncachedDeepLink ? (
|
||||
<p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">
|
||||
离线未缓存该待办，请联网后重试。任务号：{selectedTaskId}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{selectedTask ? (
|
||||
<>
|
||||
<div className="rounded-lg border border-zinc-200 p-3 text-sm">
|
||||
<div>任务状态：{selectedTask.task.status}</div>
|
||||
<div>步骤：{selectedTask.task.stepName}</div>
|
||||
<div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
|
||||
<div>业务参考：{selectedReference?.reference ?? "-"}</div>
|
||||
{selectedTask.reimbursement ? (
|
||||
<>
|
||||
<div>报销单号：{selectedTask.reimbursement.formNumber ?? "-"}</div>
|
||||
@@ -205,11 +512,15 @@ export function MobileApprovalsPage() {
|
||||
<Textarea
|
||||
data-testid="mobile-approvals-comment"
|
||||
onChange={(event) => setComment(event.target.value)}
|
||||
placeholder="驳回/退回意见"
|
||||
placeholder="驳回 / 退回意见；离线仅支持驳回意见入队。"
|
||||
rows={3}
|
||||
value={comment}
|
||||
/>
|
||||
|
||||
{!canUseRemote ? (
|
||||
<p className="text-xs text-zinc-500">离线状态下仅支持通过 / 驳回草稿，退回与转审需联网执行。</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="mobile-approvals-approve"
|
||||
@@ -217,7 +528,7 @@ export function MobileApprovalsPage() {
|
||||
onClick={() => actionMutation.mutate("approve")}
|
||||
type="button"
|
||||
>
|
||||
通过
|
||||
{canUseRemote ? "通过" : "离线加入通过草稿"}
|
||||
</Button>
|
||||
<Button
|
||||
data-testid="mobile-approvals-reject"
|
||||
@@ -226,11 +537,11 @@ export function MobileApprovalsPage() {
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
驳回
|
||||
{canUseRemote ? "驳回" : "离线加入驳回草稿"}
|
||||
</Button>
|
||||
<Button
|
||||
data-testid="mobile-approvals-return"
|
||||
disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("return")}
|
||||
disabled={actionMutation.isPending || !canUseRemote || !selectedTask.allowedActions.includes("return")}
|
||||
onClick={() => actionMutation.mutate("return")}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@@ -276,7 +587,85 @@ export function MobileApprovalsPage() {
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-3 p-4" data-testid="mobile-approvals-queue">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className="text-base font-semibold text-zinc-900">离线审批草稿队列</h3>
|
||||
<span className="text-sm text-zinc-500">{currentQueueItems.length ? `待处理 ${currentQueueItems.length} 项` : "无待处理项"}</span>
|
||||
</div>
|
||||
|
||||
{currentQueueItems.length ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="mobile-approvals-sync-queue"
|
||||
disabled={!canUseRemote || syncMutation.isPending || !retryableQueueItems.length}
|
||||
onClick={() => syncMutation.mutate(retryableQueueItems)}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
{syncMutation.isPending ? "同步中..." : `同步草稿队列 (${retryableQueueItems.length})`}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!currentQueueItems.length ? <p className="text-sm text-zinc-500">暂无待同步审批草稿。</p> : null}
|
||||
|
||||
{currentQueueItems.map((item) => (
|
||||
<div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3 text-sm">
|
||||
<div className="font-medium text-zinc-900">
|
||||
{item.taskSnapshot.reference ?? item.taskId} · {item.action === "approve" ? "通过" : "驳回"}
|
||||
</div>
|
||||
<div className="text-zinc-500">业务：{entityLabel(item.taskSnapshot.entityType ?? undefined)} · 步骤：{item.taskSnapshot.stepName ?? "-"}</div>
|
||||
<div className="text-zinc-500">状态：{queueStatusLabel(item.status)} · 更新时间：{formatDateTime(item.updatedAt)}</div>
|
||||
<div className="text-zinc-500">意见：{item.comment ?? "-"}</div>
|
||||
<div className="text-zinc-500">最近错误：{item.lastError ?? "-"}</div>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => updateTaskSelection(item.taskId)}
|
||||
>
|
||||
查看任务
|
||||
</Button>
|
||||
{item.status === "failed" ? (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={syncMutation.isPending}
|
||||
onClick={async () => {
|
||||
await updateWorkflowActionDraftStatus({
|
||||
taskId: item.taskId,
|
||||
ownerEmployeeId,
|
||||
status: "queued",
|
||||
lastError: null,
|
||||
});
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] });
|
||||
if (canUseRemote) {
|
||||
syncMutation.mutate([{ ...item, status: "queued", lastError: null }]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
重试
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={async () => {
|
||||
await removeWorkflowActionDraft(item.taskId, ownerEmployeeId);
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "draft-queue", ownerEmployeeId] });
|
||||
}}
|
||||
>
|
||||
丢弃草稿
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { Link, Navigate, useNavigate, useParams } from "react-router-dom";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { isApiError } from "../api/types";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
import { toast } from "sonner";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { hasPermission } from "../auth/permissions";
|
||||
import { buildMobileApprovalsPath, shouldPreferMobileApprovalExperience } from "../pwa";
|
||||
import { CardSkeleton } from "../components/common/CardSkeleton";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { StatusBadge } from "../components/common/StatusBadge";
|
||||
@@ -119,6 +120,10 @@ export function WorkflowTaskDetailPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldPreferMobileApprovalExperience()) {
|
||||
return <Navigate replace to={buildMobileApprovalsPath(taskId)} />;
|
||||
}
|
||||
|
||||
if (detailQuery.isLoading) {
|
||||
return <CardSkeleton lines={8} />;
|
||||
}
|
||||
|
||||
+64
-1
@@ -1,5 +1,17 @@
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
|
||||
const MOBILE_APPROVAL_TASK_PATH = /^\/workflow\/tasks\/([^/]+)$/i;
|
||||
const OFFLINE_ALLOWED_PATHS = ["/mobile/approvals"];
|
||||
const RUNTIME_CACHE_NAMES = ["app-api-runtime"];
|
||||
|
||||
function canUseWindow() {
|
||||
return typeof window !== "undefined";
|
||||
}
|
||||
|
||||
function matchesMedia(query: string) {
|
||||
return canUseWindow() && typeof window.matchMedia === "function" && window.matchMedia(query).matches;
|
||||
}
|
||||
|
||||
export function registerPwaIfEnabled() {
|
||||
if (import.meta.env.DEV) {
|
||||
return;
|
||||
@@ -12,9 +24,60 @@ export function registerPwaIfEnabled() {
|
||||
registerSW({
|
||||
immediate: true,
|
||||
onOfflineReady() {
|
||||
if (typeof window !== "undefined") {
|
||||
if (canUseWindow()) {
|
||||
window.dispatchEvent(new CustomEvent("hyb-oa:pwa-offline-ready"));
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function buildMobileApprovalsPath(taskId?: string | null) {
|
||||
const normalizedTaskId = String(taskId ?? "").trim();
|
||||
if (!normalizedTaskId) {
|
||||
return "/mobile/approvals";
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({ taskId: normalizedTaskId });
|
||||
return `/mobile/approvals?${params.toString()}`;
|
||||
}
|
||||
|
||||
export function extractWorkflowTaskId(pathname: string) {
|
||||
const match = pathname.match(MOBILE_APPROVAL_TASK_PATH);
|
||||
return match?.[1] ?? null;
|
||||
}
|
||||
|
||||
export function isOfflineSnapshotAllowedPath(pathname: string) {
|
||||
if (OFFLINE_ALLOWED_PATHS.includes(pathname)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return Boolean(extractWorkflowTaskId(pathname));
|
||||
}
|
||||
|
||||
export function shouldPreferMobileApprovalExperience() {
|
||||
if (!canUseWindow()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const userAgent = window.navigator.userAgent.toLowerCase();
|
||||
const isStandalone = matchesMedia("(display-mode: standalone)") || (window.navigator as Navigator & { standalone?: boolean }).standalone === true;
|
||||
const isImContainer = /(wxwork|wecom|wechatwork|dingtalk|aliapp\(dingtalk\))/i.test(userAgent);
|
||||
const isTouchSmallScreen = window.navigator.maxTouchPoints > 0 && matchesMedia("(max-width: 1024px)");
|
||||
|
||||
return isStandalone || isImContainer || isTouchSmallScreen;
|
||||
}
|
||||
|
||||
export async function clearPwaRuntimeCaches() {
|
||||
if (!canUseWindow() || !("caches" in window)) {
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all(
|
||||
RUNTIME_CACHE_NAMES.map(async (cacheName) => {
|
||||
try {
|
||||
await window.caches.delete(cacheName);
|
||||
} catch {
|
||||
}
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
+12
-8
@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
|
||||
import { Navigate, useLocation } from "react-router-dom";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { hasAnyPermission } from "../auth/permissions";
|
||||
import { isOfflineSnapshotAllowedPath } from "../pwa";
|
||||
|
||||
function FullPageLoading() {
|
||||
return (
|
||||
@@ -18,19 +19,22 @@ function toLoginRedirect(pathname: string, search: string, hash: string) {
|
||||
|
||||
export function RequireAuth({ children }: PropsWithChildren) {
|
||||
const location = useLocation();
|
||||
const { accessToken, me, ready, mustChangePassword } = useAuth();
|
||||
const { accessToken, me, ready, mustChangePassword, offlineAccessMode } = useAuth();
|
||||
|
||||
if (!ready) {
|
||||
return <FullPageLoading />;
|
||||
}
|
||||
|
||||
if (!accessToken || !me) {
|
||||
return (
|
||||
<Navigate
|
||||
to={toLoginRedirect(location.pathname, location.search, location.hash)}
|
||||
replace
|
||||
/>
|
||||
);
|
||||
if (!me) {
|
||||
return <Navigate to={toLoginRedirect(location.pathname, location.search, location.hash)} replace />;
|
||||
}
|
||||
|
||||
if (!accessToken) {
|
||||
if (offlineAccessMode && isOfflineSnapshotAllowedPath(location.pathname)) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return <Navigate to={toLoginRedirect(location.pathname, location.search, location.hash)} replace />;
|
||||
}
|
||||
|
||||
if (mustChangePassword && location.pathname !== "/change-password") {
|
||||
|
||||
+40
-2
@@ -38,11 +38,49 @@ export default defineConfig({
|
||||
},
|
||||
workbox: {
|
||||
navigateFallback: "/index.html",
|
||||
navigateFallbackDenylist: [/^\/api\//],
|
||||
globPatterns: ["**/*.{js,css,html,ico,png,svg,webmanifest}"],
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: ({ url }) => url.pathname.startsWith("/api/"),
|
||||
handler: "NetworkOnly",
|
||||
urlPattern: ({ request, url }) =>
|
||||
["script", "style", "font", "image"].includes(request.destination) || url.pathname.endsWith(".webmanifest"),
|
||||
handler: "StaleWhileRevalidate",
|
||||
options: {
|
||||
cacheName: "app-static-runtime",
|
||||
cacheableResponse: {
|
||||
statuses: [0, 200],
|
||||
},
|
||||
expiration: {
|
||||
maxEntries: 120,
|
||||
maxAgeSeconds: 7 * 24 * 60 * 60,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
urlPattern: ({ request, url }) => {
|
||||
if (request.method !== "GET") {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
url.pathname === "/api/me" ||
|
||||
url.pathname.startsWith("/api/workflow/tasks") ||
|
||||
url.pathname.startsWith("/api/workflow/approvers") ||
|
||||
url.pathname.startsWith("/api/notifications")
|
||||
);
|
||||
},
|
||||
handler: "NetworkFirst",
|
||||
options: {
|
||||
cacheName: "app-api-runtime",
|
||||
networkTimeoutSeconds: 3,
|
||||
cacheableResponse: {
|
||||
statuses: [200],
|
||||
},
|
||||
expiration: {
|
||||
maxEntries: 80,
|
||||
maxAgeSeconds: 30 * 60,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
在新工单中引用
屏蔽一个用户