fix: 1.将主页和法务助手对话设置成手机也能够正确加载的响应式布局。
2. 修改合同重新上传模板的可接受文件类型,修改对接的上传模板对应的接口。 3. 交叉评查任务列表去除任务名称的点击效果。 4. 交叉评查文件预览在点击完成评查的按钮后会返回任务列表并打开任务的文档列表。 5.修复点击完成评查按钮造成页面刷新。 6. 修复创建任务的第3步无法返回列表。
This commit is contained in:
@@ -23,7 +23,7 @@
|
||||
*/
|
||||
|
||||
import { type MetaFunction, type LoaderFunctionArgs, type ActionFunctionArgs } from "@remix-run/node";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
||||
import { useNavigate, useLoaderData } from "@remix-run/react";
|
||||
import crossCheckingStyles from "~/styles/cross-checking-result.css?url";
|
||||
import { getReviewPoints, updateReviewResult} from "~/api/evaluation_points/reviews";
|
||||
@@ -185,6 +185,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const url = new URL(request.url);
|
||||
const id = url.searchParams.get('id') || undefined;
|
||||
const taskId = url.searchParams.get('tId') || undefined;
|
||||
const taskName = url.searchParams.get('tName') || undefined;
|
||||
const previousRoute = url.searchParams.get('previousRoute') || '';
|
||||
// console.log("id-------",id);
|
||||
if (!id) {
|
||||
@@ -225,7 +226,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
scoring_proposals: reviewData.scoring_proposals || [],
|
||||
userInfo: userInfo,
|
||||
jwtToken: frontendJWT, // 传递JWT token
|
||||
isProposer: isProposer
|
||||
isProposer: isProposer,
|
||||
taskId: taskId, // 传递任务ID
|
||||
taskName: taskName // 传递任务名称
|
||||
});
|
||||
} else {
|
||||
console.error("返回的评查数据格式不正确",JSON.stringify(reviewData,null,2));
|
||||
@@ -294,14 +297,27 @@ export async function action({ request }: ActionFunctionArgs) {
|
||||
}
|
||||
|
||||
export default function CrossCheckingResult() {
|
||||
console.log('[组件] CrossCheckingResult 渲染');
|
||||
|
||||
const navigate = useNavigate();
|
||||
const loaderData = useLoaderData<typeof loader>();
|
||||
const { document, reviewPoints, statistics, reviewInfo, scoring_proposals, jwtToken, userInfo, isProposer } = loaderData;
|
||||
const { document, reviewPoints, statistics, reviewInfo, scoring_proposals, jwtToken, userInfo, isProposer, taskId, taskName } = loaderData;
|
||||
const [isLoading, setIsLoading] = useState(false); // 已经通过loader加载了数据,不需要再显示加载状态
|
||||
const [reviewData, setReviewData] = useState<ReviewData | null>(null);
|
||||
const [activeReviewPointResultId, setActiveReviewPointResultId] = useState<string | null>(null);
|
||||
const [targetPage, setTargetPage] = useState<number | undefined>(undefined);
|
||||
const [localScoringProposals, setLocalScoringProposals] = useState<ScoringProposal[]>(scoring_proposals || []); // 本地状态管理scoringProposals
|
||||
|
||||
// 使用ref来跟踪loading状态,避免不必要的重新渲染
|
||||
const isProcessingRef = useRef(false);
|
||||
|
||||
// 添加组件挂载/卸载日志
|
||||
useEffect(() => {
|
||||
console.log('[组件] CrossCheckingResult 挂载');
|
||||
return () => {
|
||||
console.log('[组件] CrossCheckingResult 卸载');
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 同步外部scoring_proposals到本地状态
|
||||
useEffect(() => {
|
||||
@@ -309,9 +325,9 @@ export default function CrossCheckingResult() {
|
||||
}, [scoring_proposals]);
|
||||
|
||||
// 处理意见提交成功的回调
|
||||
const handleOpinionSubmitted = (newProposal: ScoringProposal) => {
|
||||
const handleOpinionSubmitted = useCallback((newProposal: ScoringProposal) => {
|
||||
setLocalScoringProposals(prev => [...prev, newProposal]);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// loader 数据加载出错
|
||||
useEffect(()=>{
|
||||
@@ -371,7 +387,7 @@ export default function CrossCheckingResult() {
|
||||
}, [document, reviewPoints, statistics, reviewInfo]);
|
||||
|
||||
|
||||
const handleReviewPointSelect = (reviewPointId: string, page?: number) => {
|
||||
const handleReviewPointSelect = useCallback((reviewPointId: string, page?: number) => {
|
||||
// 如果点击的是相同的评查点,但有page参数,先重置targetPage以确保useEffect能够触发
|
||||
if (reviewPointId === activeReviewPointResultId && page) {
|
||||
setTargetPage(undefined);
|
||||
@@ -385,7 +401,7 @@ export default function CrossCheckingResult() {
|
||||
setActiveReviewPointResultId(reviewPointId);
|
||||
setTargetPage(page);
|
||||
}
|
||||
};
|
||||
}, [activeReviewPointResultId]);
|
||||
|
||||
|
||||
// 处理评审点状态变更
|
||||
@@ -500,28 +516,38 @@ export default function CrossCheckingResult() {
|
||||
* 2. 根据结果弹出确认模态框
|
||||
* 3. 用户确认后更新文档状态并跳转
|
||||
*/
|
||||
const handleConfirmResults = async (event?: React.MouseEvent) => {
|
||||
// 阻止默认行为,防止页面刷新
|
||||
const handleConfirmResults = useCallback(async (event?: React.MouseEvent) => {
|
||||
console.log('[完成评查] 开始处理');
|
||||
|
||||
// 首先阻止默认行为和事件冒泡,防止页面刷新
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
if (!document || !document.id) {
|
||||
toastService.error('文档数据不完整,无法确认评查结果');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 使用ref防止重复点击,避免触发状态更新
|
||||
if (isProcessingRef.current) {
|
||||
console.log('[完成评查] 正在处理中,跳过');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
// 1. 先检查未投票
|
||||
console.log('[完成评查] 标记为处理中');
|
||||
isProcessingRef.current = true;
|
||||
|
||||
// 1. 先检查未投票(不触发loading状态更新,避免重新渲染)
|
||||
console.log('[完成评查] 开始检查未投票提案');
|
||||
const checkRes = await checkProposalVotes(document.id, jwtToken);
|
||||
console.log("checkRes", checkRes);
|
||||
|
||||
console.log("[完成评查] 检查结果:", checkRes);
|
||||
|
||||
if (checkRes.error) {
|
||||
toastService.error(checkRes.error);
|
||||
setIsLoading(false);
|
||||
isProcessingRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -551,7 +577,12 @@ export default function CrossCheckingResult() {
|
||||
modalMessage = '是否完成评查?';
|
||||
}
|
||||
|
||||
// 4. 弹出模态框
|
||||
// 4. 重置处理状态标记,准备显示模态框(不触发状态更新)
|
||||
console.log('[完成评查] 重置处理标记,准备显示模态框');
|
||||
isProcessingRef.current = false;
|
||||
|
||||
// 5. 弹出模态框
|
||||
console.log('[完成评查] 显示确认模态框');
|
||||
messageService.show({
|
||||
title: '提示',
|
||||
message: modalMessage,
|
||||
@@ -559,43 +590,58 @@ export default function CrossCheckingResult() {
|
||||
confirmText: '确认',
|
||||
cancelText: '取消',
|
||||
onConfirm: async () => {
|
||||
// 用户点击确认后才开始处理,此时才显示loading
|
||||
console.log('[完成评查] 用户点击确认,开始更新状态');
|
||||
setIsLoading(true);
|
||||
const res = await confirmReviewResults(document.id, jwtToken);
|
||||
setIsLoading(false);
|
||||
try {
|
||||
const res = await confirmReviewResults(document.id, jwtToken);
|
||||
|
||||
if (res.error) {
|
||||
toastService.error(res.error);
|
||||
return;
|
||||
if (res.error) {
|
||||
toastService.error(res.error);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
toastService.success('评查结果已确认,文档审核状态已更新');
|
||||
// 跳转到交叉评查列表页,并带上任务信息以自动打开模态框
|
||||
const params = new URLSearchParams({
|
||||
openModal: 'true',
|
||||
taskId: taskId || '',
|
||||
taskName: taskName || '任务详情'
|
||||
});
|
||||
navigate(`/cross-checking?${params.toString()}`);
|
||||
} catch (error) {
|
||||
console.error('确认评查结果失败:', error);
|
||||
toastService.error('确认评查结果失败,请重试');
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
toastService.success('评查结果已确认,文档审核状态已更新');
|
||||
// 注释掉自动跳转,让用户停留在当前页面
|
||||
navigate('/cross-checking');
|
||||
},
|
||||
onCancel: () => {
|
||||
// 用户取消时不需要做任何处理
|
||||
console.log('[完成评查] 用户取消了确认操作');
|
||||
}
|
||||
});
|
||||
|
||||
setIsLoading(false);
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
isProcessingRef.current = false;
|
||||
toastService.error(`确认评查结果失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
||||
}
|
||||
};
|
||||
}, [document, jwtToken, navigate]);
|
||||
|
||||
// 构建自定义面包屑项
|
||||
const getBreadcrumbItems = () => {
|
||||
// 构建自定义面包屑项 - 使用 useMemo 缓存
|
||||
const breadcrumbItems = useMemo(() => {
|
||||
const items = [
|
||||
{ title: "交叉评查详情", to: `/cross-checking/result?id=${document?.id}` }
|
||||
];
|
||||
|
||||
|
||||
// 添加前置路由
|
||||
if (loaderData.previousRoute) {
|
||||
if (loaderData.previousRoute === 'crossChecking') {
|
||||
items.unshift({ title: "交叉评查", to: "/cross-checking" });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return items;
|
||||
};
|
||||
}, [document?.id, loaderData.previousRoute]);
|
||||
|
||||
return (
|
||||
<div className="cross-checking-result-container">
|
||||
@@ -608,8 +654,8 @@ export default function CrossCheckingResult() {
|
||||
<>
|
||||
{/* 自定义面包屑 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Breadcrumb
|
||||
items={getBreadcrumbItems()}
|
||||
<Breadcrumb
|
||||
items={breadcrumbItems}
|
||||
className="items-center flex !mb-0"
|
||||
/>
|
||||
|
||||
@@ -638,17 +684,29 @@ export default function CrossCheckingResult() {
|
||||
|
||||
{/* 完成评查按钮 */}
|
||||
{isProposer && (
|
||||
<button
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
// 立即阻止所有默认行为
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
handleConfirmResults(event);
|
||||
// 异步调用处理函数
|
||||
void handleConfirmResults(event);
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-green-800 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-800"
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-green-800 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-800 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i className="ri-check-double-line mr-1.5"></i>
|
||||
完成评查
|
||||
{isLoading ? (
|
||||
<>
|
||||
<i className="ri-loader-4-line ri-spin animate-spin mr-1.5"></i>
|
||||
处理中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="ri-check-double-line mr-1.5"></i>
|
||||
完成评查
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user