优化人事通用组件-可编辑表格，展示交互；

王强
1 parent e10685e9
Showing 1 changed file with 30 additions and 8 deletions
src/pages/ehr/components/EditTable.tsx
@@ -5,10 +5,11 @@ import {
   FormInstance,
   Input,
   InputRef,
+  Popover,
   Table,
   TableProps,
 } from "antd";
-import { EditOutlined } from "@ant-design/icons";
+import { EditOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Rule, RuleObject } from "antd/lib/form";
 import { StoreValue } from "antd/lib/form/interface";
@@ -122,7 +123,7 @@ export default function EditTable&lt;T&gt;({
     useEffect(() => {
       if (edit) {
         form.setFieldsValue({
-          [dataIndex]: record?.[dataIndex] ?? '',
+          [dataIndex]: record?.[dataIndex] ?? "",
         });
       }
     }, []);
@@ -147,10 +148,12 @@ export default function EditTable&lt;T&gt;({
  
     const save = async (e: any) => {
       try {
-        e.preventDefault();
-        const values = await form.validateFields();
-        toggleEdit();
-        handleSave({ ...record, ...values });
+        if (!e.shiftKey) {
+          e.preventDefault();
+          const values = await form.validateFields();
+          toggleEdit();
+          handleSave({ ...record, [dataIndex]: (values?.[dataIndex] as string)?.trim() });
+        }
       } catch (errInfo) {
         console.log("Save failed:", errInfo);
       }
@@ -207,6 +210,7 @@ export default function EditTable&lt;T&gt;({
               ref={inputRef}
               allowClear
               maxLength={maxLength}
+              autoSize={{ minRows: 2 }}
               // showCount={!!maxLength}
               onPressEnter={save}
               onBlur={save}
@@ -222,7 +226,7 @@ export default function EditTable&lt;T&gt;({
               onFocus={() => {
                 inputType === "number" &&
                   form.setFieldsValue({
-                    [dataIndex]: `${record?.[dataIndex] ?? ''}`?.replace(
+                    [dataIndex]: `${record?.[dataIndex] ?? ""}`?.replace(
                       /^0+/g,
                       ""
                     ),
@@ -250,7 +254,11 @@ export default function EditTable&lt;T&gt;({
       ) : (
         <div
           className="editable-cell-value-wrap"
-          style={{ paddingRight: 24, cursor: "pointer" }}
+          style={{
+            paddingRight: 24,
+            cursor: "pointer",
+            whiteSpace: "pre-wrap",
+          }}
           onClick={(e) => {
             e.stopPropagation();
             toggleEdit();
@@ -297,6 +305,20 @@ export default function EditTable&lt;T&gt;({
       }
       return {
         ...col,
+        title:
+          col.editable && col.inputType === "text" ? (
+            <>
+              {col.title}&nbsp;&nbsp;
+              <Popover
+                // trigger=""
+                content="在输入时，如需输入回车换行，请同时按下(Shfit + Enter)键进行换行输入"
+              >
+                <ExclamationCircleFilled />
+              </Popover>
+            </>
+          ) : (
+            col.title
+          ),
         onCell: (record: T) => ({
           record,
           ...col,