From 808c9ba3691f49e2d388e0b39584fb250bda38d2 Mon Sep 17 00:00:00 2001
From: tangyin <tangyin@donglan.tech>
Date: Mon, 1 Aug 2022 18:41:16 +0800
Subject: [PATCH] fix: modal box form layout is normal

closes: #22
---
 src/components/ParameterInfo/index.tsx          | 17 ++++++++++-------
 src/global.less                                 |  8 ++++++--
 .../RSUManagement/DeviceDetails/index.tsx       |  2 +-
 .../components/CreateRSUConfigModal/index.less  |  4 ++++
 .../businessConfig/ConfigList/index.tsx         |  5 ++++-
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/ParameterInfo/index.tsx b/src/components/ParameterInfo/index.tsx
index ca2b4e6..9ffc0ef 100644
--- a/src/components/ParameterInfo/index.tsx
+++ b/src/components/ParameterInfo/index.tsx
@@ -81,13 +81,16 @@ const ParameterInfo: React.FC<{ parameterInfo: Config.ParameterInfo | undefined
         <ProCard key={title} colSpan={12} bordered>
           <div className="parameter-title t-center">{title}</div>
           <Row gutter={[16, 14]}>
-            {children.map(({ key, span, label, render, unit }) => (
-              <Col key={key} span={span}>
-                <span>{label}：</span>
-                {render?.(parameterInfo[groupKey]?.[key]) || parameterInfo[groupKey]?.[key]}
-                {unit ?? ` ${t('bars/s')}`}
-              </Col>
-            ))}
+            {children.map(({ key, span, label, render, unit }) => {
+              const value = parameterInfo[groupKey]?.[key];
+              return (
+                <Col key={key} span={span}>
+                  <span>{label}：</span>
+                  {render?.(value) || value || '-'}
+                  {value ? unit ?? ` ${t('bars/s')}` : ''}
+                </Col>
+              );
+            })}
           </Row>
         </ProCard>
       ))}
diff --git a/src/global.less b/src/global.less
index f513633..a9789a6 100644
--- a/src/global.less
+++ b/src/global.less
@@ -253,8 +253,12 @@ body,
       .ant-pro-form-group {
         padding: 0 20px;
 
-        .ant-form-item .ant-form-item-label label {
-          color: #70727a;
+        .ant-pro-form-group-container {
+          flex-wrap: nowrap;
+
+          .ant-form-item .ant-form-item-label label {
+            color: #70727a;
+          }
         }
       }
 
diff --git a/src/pages/deviceManagement/RSUManagement/DeviceDetails/index.tsx b/src/pages/deviceManagement/RSUManagement/DeviceDetails/index.tsx
index c05f805..fd4893b 100644
--- a/src/pages/deviceManagement/RSUManagement/DeviceDetails/index.tsx
+++ b/src/pages/deviceManagement/RSUManagement/DeviceDetails/index.tsx
@@ -165,7 +165,7 @@ const RunningInfo: React.FC<{ runningInfo: Config.QueryStatusDetails | undefined
             {children.map(({ key, span, label }) => (
               <Col key={key} span={span}>
                 <span>{label}：</span>
-                {runningInfo[groupKey]?.[key]}
+                {runningInfo[groupKey]?.[key] || '-'}
               </Col>
             ))}
           </Row>
diff --git a/src/pages/maintenanceManagement/businessConfig/ConfigList/components/CreateRSUConfigModal/index.less b/src/pages/maintenanceManagement/businessConfig/ConfigList/components/CreateRSUConfigModal/index.less
index ef26921..9d30db2 100644
--- a/src/pages/maintenanceManagement/businessConfig/ConfigList/components/CreateRSUConfigModal/index.less
+++ b/src/pages/maintenanceManagement/businessConfig/ConfigList/components/CreateRSUConfigModal/index.less
@@ -35,6 +35,10 @@
     }
   }
 
+  > .ant-space.ant-pro-form-group-container {
+    flex-wrap: wrap !important;
+  }
+
   &:nth-child(3) > .ant-space .ant-space-item {
     width: calc(50% - 16px);
 
diff --git a/src/pages/maintenanceManagement/businessConfig/ConfigList/index.tsx b/src/pages/maintenanceManagement/businessConfig/ConfigList/index.tsx
index ee252ec..56b28d4 100644
--- a/src/pages/maintenanceManagement/businessConfig/ConfigList/index.tsx
+++ b/src/pages/maintenanceManagement/businessConfig/ConfigList/index.tsx
@@ -26,7 +26,10 @@ const ParameterInfo: React.FC<ParameterInfoType> = ({ infoMap, info }) => {
   return (
     <>
       {infoMap.map(({ key, label, unit, render }) => {
-        const text = `${label}：${render?.(info![key]) || info![key] || ''} ${unit ?? t('bars/s')}`;
+        const value = info![key];
+        const text = `${label}：${render?.(value) || value || '-'} ${
+          value ? unit ?? t('bars/s') : ''
+        }`;
         return (
           <div key={key} className="ellipsis">
             <Tooltip title={text}>{text}</Tooltip>