Parcourir la source

任务管理页面当前任务查看弹框中拆分后的上锁 共锁 解除共锁 解锁步骤对应展示的步骤进行修改

wyn il y a 1 semaine
Parent
commit
4d94bf1e08
1 fichiers modifiés avec 58 ajouts et 11 suppressions
  1. 58 11
      src/components/TaskManagement.tsx

+ 58 - 11
src/components/TaskManagement.tsx

@@ -1078,6 +1078,8 @@ export default function TaskManagement() {
         nodeType: data?.nodeType || data?.type || '', // 同时设置 nodeType 作为兼容
         // 使用提取到的 formId
         formId: extractedFormId,
+        // 列表接口「当前任务」名称:用于上锁挂牌弹框内按步骤裁剪展示
+        taskListCurrentNodeName: String(record.currentNodeName || (record as any).currentNode || '').trim(),
       };
       
       console.log('TaskManagement: 合并后的详情数据 - type 和 formId 字段', {
@@ -1997,6 +1999,16 @@ export default function TaskManagement() {
   // 计算分页数据
   const totalPages = Math.ceil(total / queryParams.pageSize) || 1;
 
+  const detailModalListStep = detailData
+    ? String((detailData as any).taskListCurrentNodeName || '').trim()
+    : '';
+  const detailModalWidth =
+    detailModalListStep === '共锁' || detailModalListStep === '解除共锁'
+      ? 560
+      : detailModalListStep === '上锁' || detailModalListStep === '解锁'
+        ? 900
+        : 1000;
+
   return (
     <div className="space-y-6">
       {/* 操作栏和表格容器 */}
@@ -2104,7 +2116,7 @@ export default function TaskManagement() {
           setIsolationFileList([]);
         }}
         footer={null}
-        width={1000}
+        width={detailModalWidth}
         destroyOnClose
         confirmLoading={detailLoading}
         maskClosable={false}
@@ -2537,6 +2549,16 @@ export default function TaskManagement() {
                       return 'unknown';
                     };
 
+                    // 按列表「当前任务」名称裁剪上锁挂牌-隔离方案三步展示
+                    const stepModeIso = String((detailData as any).taskListCurrentNodeName || '').trim();
+                    const isoShowCol1 = stepModeIso !== '共锁';
+                    const isoShowCol2 = stepModeIso !== '共锁';
+                    const isoShowCol3 = stepModeIso !== '上锁';
+                    const isoColCount =
+                      (isoShowCol1 ? 1 : 0) + (isoShowCol2 ? 1 : 0) + (isoShowCol3 ? 1 : 0);
+                    const isoGridColumns =
+                      isoColCount <= 0 ? 'minmax(0, 1fr)' : `repeat(${isoColCount}, minmax(0, 1fr))`;
+
                     return (
                       <div
                         key="isolation-lockout-tabs"
@@ -2551,6 +2573,8 @@ export default function TaskManagement() {
                           <Card
                             style={{
                               width: '100%',
+                              maxWidth: isoColCount === 1 ? 520 : isoColCount === 2 ? 880 : undefined,
+                              margin: isoColCount === 1 || isoColCount === 2 ? '0 auto' : undefined,
                               borderRadius: 16,
                               boxShadow: '0 8px 28px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(0,0,0,0.04)',
                               border: '1px solid #e6e8f0',
@@ -2561,12 +2585,13 @@ export default function TaskManagement() {
                             <div
                               style={{
                                 display: 'grid',
-                                gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                                gridTemplateColumns: isoGridColumns,
                                 gap: 0,
                               }}
                             >
                               {/* 第一步:取挂锁,取钥匙 */}
-                              <div style={{ padding: '0 14px', borderRight: '1px solid #eef0f6', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                              {isoShowCol1 && (
+                              <div style={{ padding: '0 14px', borderRight: isoShowCol2 || isoShowCol3 ? '1px solid #eef0f6' : 'none', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                                 <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>
                                   第一步:取挂锁,取钥匙
                                 </div>
@@ -2713,9 +2738,11 @@ export default function TaskManagement() {
                                   </div>
                                 </div>
                               </div>
+                              )}
 
                               {/* 第二步:上锁后归还钥匙 */}
-                              <div style={{ padding: '0 14px', borderRight: '1px solid #eef0f6', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                              {isoShowCol2 && (
+                              <div style={{ padding: '0 14px', borderRight: isoShowCol3 ? '1px solid #eef0f6' : 'none', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                                 <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>
                                   第二步:上锁后归还钥匙
                                 </div>
@@ -2829,11 +2856,13 @@ export default function TaskManagement() {
                                   </div>
                                 </div>
                               </div>
+                              )}
 
                               {/* 第三步:共锁人共锁 */}
+                              {isoShowCol3 && (
                               <div style={{ padding: '0 14px', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                                 <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>
-                                  第三步:共锁人共锁
+                                  {stepModeIso === '共锁' ? '共锁人共锁' : '第三步:共锁人共锁'}
                                 </div>
                                 <div style={{ padding: '8px 0', flex: 1 }}>
                                   <div style={{ fontSize: 13, color: '#64748b', marginBottom: 10 }}>是否共锁</div>
@@ -2907,6 +2936,7 @@ export default function TaskManagement() {
                                   </div>
                                 </div>
                               </div>
+                              )}
                             </div>
                           </Card>
                         </div>
@@ -2935,12 +2965,23 @@ export default function TaskManagement() {
                       u?.avatar ?? u?.avatarUrl ?? u?.headImg ?? u?.headImage ?? u?.headUrl ?? u?.profilePhoto ?? u?.photo ?? undefined;
                     const getReleaseUserName = (u: any) => u?.nickname ?? u?.nickName ?? u?.name ?? u?.username ?? '-';
 
+                    const stepModeRel = String((detailData as any).taskListCurrentNodeName || '').trim();
+                    const relShowCol1 = stepModeRel !== '解锁';
+                    const relShowCol2 = stepModeRel !== '解除共锁';
+                    const relShowCol3 = stepModeRel !== '解除共锁';
+                    const relColCount =
+                      (relShowCol1 ? 1 : 0) + (relShowCol2 ? 1 : 0) + (relShowCol3 ? 1 : 0);
+                    const relGridColumns =
+                      relColCount <= 0 ? 'minmax(0, 1fr)' : `repeat(${relColCount}, minmax(0, 1fr))`;
+
                     return (
                       <div key="release-isolation-columns" style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                         <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: 24, background: 'transparent' }}>
                           <Card
                             style={{
                               width: '100%',
+                              maxWidth: relColCount === 1 ? 520 : relColCount === 2 ? 880 : undefined,
+                              margin: relColCount === 1 || relColCount === 2 ? '0 auto' : undefined,
                               borderRadius: 16,
                               boxShadow: '0 8px 28px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(0,0,0,0.04)',
                               border: '1px solid #e6e8f0',
@@ -2948,10 +2989,11 @@ export default function TaskManagement() {
                             }}
                             bodyStyle={{ padding: 18 }}
                           >
-                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 0 }}>
+                            <div style={{ display: 'grid', gridTemplateColumns: relGridColumns, gap: 0 }}>
                               {/* 第一步:解除共锁 */}
-                              <div style={{ padding: '0 14px', borderRight: '1px solid #eef0f6', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-                                <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>第一步:解除共锁</div>
+                              {relShowCol1 && (
+                              <div style={{ padding: '0 14px', borderRight: relShowCol2 || relShowCol3 ? '1px solid #eef0f6' : 'none', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                                <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>{stepModeRel === '解除共锁' ? '解除共锁' : '第一步:解除共锁'}</div>
                                 <div style={{ padding: '8px 0', flex: 1 }}>
                                   <div style={{ fontSize: 13, color: '#64748b', marginBottom: 10 }}>是否解除共锁</div>
                                   <div style={{ width: '100%', maxWidth: 320, display: 'grid', gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', gap: 10 }}>
@@ -2983,9 +3025,11 @@ export default function TaskManagement() {
                                   </div>
                                 </div>
                               </div>
+                              )}
                               {/* 第二步:取钥匙(只显示待取出/已取出,接口若为2已归还则视为已取出) */}
-                              <div style={{ padding: '0 14px', borderRight: '1px solid #eef0f6', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-                                <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>第二步:取钥匙</div>
+                              {relShowCol2 && (
+                              <div style={{ padding: '0 14px', borderRight: relShowCol3 ? '1px solid #eef0f6' : 'none', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                                <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>{stepModeRel === '解锁' ? '第一步:取钥匙' : '第二步:取钥匙'}</div>
                                 <div style={{ padding: '8px 0', flex: 1 }}>
                                   <div style={{ fontSize: 13, color: '#64748b', marginBottom: 10 }}>钥匙状态</div>
                                   <div style={{ width: '100%', maxWidth: 320, display: 'grid', gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', gap: 10 }}>
@@ -3019,9 +3063,11 @@ export default function TaskManagement() {
                                   </div>
                                 </div>
                               </div>
+                              )}
                               {/* 第三步:还钥匙 */}
+                              {relShowCol3 && (
                               <div style={{ padding: '0 14px', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-                                <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>第三步:还钥匙</div>
+                                <div style={{ fontSize: 14, fontWeight: 600, color: '#0f172a', marginBottom: 12, minHeight: 22 }}>{stepModeRel === '解锁' ? '第二步:还钥匙' : '第三步:还钥匙'}</div>
                                 <div style={{ padding: '8px 0', flex: 1 }}>
                                   <div style={{ fontSize: 13, color: '#64748b', marginBottom: 10 }}>解锁人</div>
                                   <div style={{ width: '100%', maxWidth: 320, display: 'grid', gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', gap: 10, marginBottom: 14 }}>
@@ -3085,6 +3131,7 @@ export default function TaskManagement() {
                                   </div>
                                 </div>
                               </div>
+                              )}
                             </div>
                           </Card>
                         </div>