fix(审批): 审批摘要, 文案过长时候要换行 (#1587)

Reviewed-on: daoyoucloud/tachybase#1587
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/collection/approvalCarbonCopy.collection.ts

@@ -1,4 +1,4 @@
-import { approvalNoticeStatusOptions, ApprovalStatusEnums, COLLECTION_NAME_APPROVAL_CARBON_COPY } from '../constants';
+import { ApprovalNoticeStatusOptions, ApprovalStatusEnums, COLLECTION_NAME_APPROVAL_CARBON_COPY } from '../constants';
 import { NAMESPACE, tval } from '../locale';
 
 export const CollectionApprovalCarbonCopy = {
@@ -114,7 +114,7 @@ export const CollectionApprovalCarbonCopy = {
         type: 'number',
         title: '{{t("Status", { ns: "workflow" })}}',
         'x-component': 'Select',
-        enum: approvalNoticeStatusOptions,
+        enum: ApprovalNoticeStatusOptions,
       },
     },
     {

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/initiations/component/ApprovalItem.tsx

@@ -65,7 +65,12 @@ export const ApprovalItem = observer((props) => {
                 </Space>
                 {/* </Badge> */}
                 {item.reason?.map((reasonItem, index) => {
-                  return <Space block key={index}>{`${reasonItem.label}:${reasonItem.value}`}</Space>;
+                  return (
+                    <div className="approvalsSummaryStyle-item" key={index}>
+                      <div className="approvalsSummaryStyle-label">{`${reasonItem.label}:`}&nbsp;&nbsp;</div>
+                      <div className="approvalsSummaryStyle-value">{`${reasonItem.value}`}</div>
+                    </div>
+                  );
                 })}
               </List.Item>
             );

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/style/style.css

@@ -52,3 +52,25 @@
   overflow: hidden;
   background-color: #f3f3f3;
 }
+
+.approvalsSummaryStyle-item {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  overflow: hidden;
+}
+
+.approvalsSummaryStyle-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #aaa;
+}
+
+.approvalsSummaryStyle-value {
+  white-space: pre-wrap;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/todos/component/TabApprovalItem.tsx

@@ -67,7 +67,12 @@ export const TabApprovalItem = observer((props) => {
                 </Space>
                 {/* </Badge> */}
                 {item.reason?.map((reasonItem, index) => {
-                  return <Space block key={index}>{`${reasonItem.label}:${reasonItem.value}`}</Space>;
+                  return (
+                    <div className="approvalsSummaryStyle-item" key={index}>
+                      <div className="approvalsSummaryStyle-label">{`${reasonItem.label}:`}&nbsp;&nbsp;</div>
+                      <div className="approvalsSummaryStyle-value">{`${reasonItem.value}`}</div>
+                    </div>
+                  );
                 })}
               </List.Item>
             );

packages/plugins/@tachybase/plugin-workflow/src/client/features/approval/usage/approval-block/launch/Sm.ApprovalBlockLaunch.tsx

@@ -102,6 +102,7 @@ export const SchemaApprovalBlockLaunch = {
           type: 'void',
           'x-decorator': 'TableV2.Column.Decorator',
           'x-component': 'TableV2.Column',
+          'x-component-props': { width: 350 },
           title: tval('Approval Summary'),
           properties: {
             summary: {

packages/plugins/@tachybase/plugin-workflow/src/client/features/approval/usage/approval-block/todos/Sm.ApprovalBlockTodos.tsx

@@ -92,6 +92,7 @@ export const SchemaApprovalBlockTodos = {
           type: 'void',
           'x-decorator': 'TableV2.Column.Decorator',
           'x-component': 'TableV2.Column',
+          'x-component-props': { width: 350 },
           title: tval('Approval Summary'),
           properties: {
             summary: {

packages/plugins/@tachybase/plugin-workflow/src/client/features/approval/usage/approval-common/style.ts

@@ -16,8 +16,12 @@ const useStyles = createStyles(({ css }) => {
           color: #aaa;
         }
         &-value {
+          white-space: pre-wrap;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
           text-overflow: ellipsis;
-          white-space: nowrap;
         }
       }
     `,