加入审查详情页面转换

2025-04-11 15:29:18 +08:00
parent 71c70696a7
commit 26fa33dbfd
11 changed files with 2725 additions and 42 deletions
@@ -0,0 +1,150 @@
+/**
+ * 文件详情组件
+ * 显示文件基本信息、合同信息和评查信息
+ */
+import { ReactNode } from 'react';
+
+// 文件基本信息
+interface FileInfo {
+  fileName: string;
+  contractNumber: string;
+  fileSize: string;
+  fileFormat: string;
+  pageCount: number;
+  uploadTime: string;
+  uploadUser: string;
+}
+
+// 合同信息
+interface ContractInfo {
+  contractType: string;
+  signDate: string;
+  parties: {
+    partyA: string;
+    partyB: string;
+  };
+  amount: string;
+  period: string;
+}
+
+// 评查信息
+interface ReviewInfo {
+  reviewTime: string;
+  reviewModel: string;
+  ruleGroup: string;
+  result: string;
+  issueCount: number;
+}
+
+interface FileDetailsProps {
+  fileInfo: FileInfo;
+  contractInfo: ContractInfo;
+  reviewInfo: ReviewInfo;
+}
+
+export function FileDetails({ fileInfo, contractInfo, reviewInfo }: FileDetailsProps) {
+  // 情况状态对应的标签
+  const renderResultBadge = (result: string) => {
+    switch (result) {
+      case 'success':
+        return (
+          <span className="status-badge status-success">
+            <i className="ri-checkbox-circle-line mr-1"></i>通过
+          </span>
+        );
+      case 'warning':
+        return (
+          <span className="status-badge status-warning">
+            <i className="ri-alert-line mr-1"></i>警告
+          </span>
+        );
+      case 'error':
+        return (
+          <span className="status-badge status-error">
+            <i className="ri-close-circle-line mr-1"></i>不通过
+          </span>
+        );
+      default:
+        return (
+          <span className="status-badge status-warning">
+            <i className="ri-alert-line mr-1"></i>警告
+          </span>
+        );
+    }
+  };
+  
+  // 渲染信息区块
+  const renderInfoSection = (title: string, icon: string, color: string, children: ReactNode) => {
+    return (
+      <div className="info-section">
+        <div className={`info-header bg-${color}-50`}>
+          <i className={`${icon} text-${color}-500 text-lg mr-2`}></i>
+          <h3 className={`font-medium text-${color}-700`}>{title}</h3>
+        </div>
+        <div className="info-content">
+          {children}
+        </div>
+      </div>
+    );
+  };
+  
+  // 渲染信息行
+  const renderInfoRow = (label: string, value: string | ReactNode) => {
+    return (
+      <div className="info-row">
+        <div className="info-label">{label}：</div>
+        <div className="info-value">{value}</div>
+      </div>
+    );
+  };
+  
+  return (
+    <div className="bg-white rounded-lg shadow-sm overflow-hidden">
+      {/* 文件基本信息 */}
+      {renderInfoSection('文件基本信息', 'ri-file-info-line', 'blue', (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {renderInfoRow('文件名称', fileInfo.fileName)}
+          {renderInfoRow('合同编号', fileInfo.contractNumber)}
+          {renderInfoRow('文件大小', fileInfo.fileSize)}
+          {renderInfoRow('文件格式', fileInfo.fileFormat)}
+          {renderInfoRow('页数', `${fileInfo.pageCount}页`)}
+          {renderInfoRow('上传时间', fileInfo.uploadTime)}
+          {renderInfoRow('上传用户', fileInfo.uploadUser)}
+        </div>
+      ))}
+      
+      {/* 合同信息 */}
+      {renderInfoSection('合同信息', 'ri-file-paper-2-line', 'green', (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {renderInfoRow('合同类型', contractInfo.contractType)}
+          {renderInfoRow('签约日期', contractInfo.signDate)}
+          {renderInfoRow('合同当事人', (
+            <div>
+              <div>甲方：{contractInfo.parties.partyA}</div>
+              <div>乙方：{contractInfo.parties.partyB}</div>
+            </div>
+          ))}
+          {renderInfoRow('合同金额', contractInfo.amount)}
+          {renderInfoRow('履行期限', contractInfo.period)}
+        </div>
+      ))}
+      
+      {/* 评查信息 */}
+      {renderInfoSection('评查信息', 'ri-search-eye-line', 'purple', (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {renderInfoRow('评查时间', reviewInfo.reviewTime)}
+            {renderInfoRow('评查模型', reviewInfo.reviewModel)}
+            {renderInfoRow('评查规则组', reviewInfo.ruleGroup)}
+            {renderInfoRow('评查结果', (
+              <div className="flex items-center">
+                {renderResultBadge(reviewInfo.result)}
+                <span className="text-sm ml-2">（共发现{reviewInfo.issueCount}个问题）</span>
+              </div>
+            ))}
+          </div>
+        </>
+      ))}
+    </div>
+  );
+}