优化人事通用组件-可编辑表格；

王强
1 parent e8b0b5d9
Showing 1 changed file with 55 additions and 11 deletions
src/pages/ehr/components/EditTable.tsx
@@ -24,6 +24,7 @@ interface Props&lt;T&gt; extends TableProps&lt;T&gt; {
   onChange?: (value?: T[]) => void;
   disabled?: boolean;
   uniqueKey: string; // 列表唯一字段 key
+  edit?: boolean;
   columns: (ColumnTypes[number] & {
     editable?: boolean;
     inputType?: "input" | "number" | "text";
@@ -41,6 +42,8 @@ interface Props&lt;T&gt; extends TableProps&lt;T&gt; {
       value: StoreValue,
       callback: (error?: string) => void
     ) => Promise<void | any> | void)[];
+    inputSuffix?: React.ReactNode | ((item: T) => React.ReactNode);
+    inputPrefix?: React.ReactNode | ((item: T) => React.ReactNode);
   })[];
 }
  
@@ -50,6 +53,7 @@ export default function EditTable&lt;T&gt;({
   disabled,
   columns,
   uniqueKey,
+  edit,
   ...otherProps
 }: Props<T>) {
   interface EditableRowProps {
@@ -88,6 +92,8 @@ export default function EditTable&lt;T&gt;({
       value: StoreValue,
       callback: (error?: string) => void
     ) => Promise<void | any> | void)[];
+    inputSuffix?: React.ReactNode | ((item: T) => React.ReactNode);
+    inputPrefix?: React.ReactNode | ((item: T) => React.ReactNode);
   }
  
   const EditableCell: React.FC<EditableCellProps> = ({
@@ -105,27 +111,44 @@ export default function EditTable&lt;T&gt;({
     record,
     handleSave,
     validatorList,
+    inputPrefix,
+    inputSuffix,
     ...restProps
   }) => {
-    const [editing, setEditing] = useState(false);
+    const [editing, setEditing] = useState(edit ?? false);
     const inputRef = useRef<InputRef>(null);
     const form = useContext(EditableContext)!;
  
     useEffect(() => {
-      if (editing) {
+      if (edit) {
+        form.setFieldsValue({
+          [dataIndex]: record?.[dataIndex] ?? '',
+        });
+      }
+    }, []);
+
+    useEffect(() => {
+      if (edit ? false : editing) {
         inputRef.current?.focus();
       }
     }, [editing]);
  
     const toggleEdit = () => {
-      setEditing(!editing);
-      form.setFieldsValue({ [dataIndex]: record[dataIndex] });
+      if (!edit) {
+        setEditing(!editing);
+        form.setFieldsValue({
+          [dataIndex]:
+            inputType === "number"
+              ? `${record?.[dataIndex] ?? ""}`?.replace(/^0+/g, "")
+              : record[dataIndex],
+        });
+      }
     };
  
-    const save = async () => {
+    const save = async (e: any) => {
       try {
+        e.preventDefault();
         const values = await form.validateFields();
-
         toggleEdit();
         handleSave({ ...record, ...values });
       } catch (errInfo) {
@@ -148,16 +171,14 @@ export default function EditTable&lt;T&gt;({
         },
         {
           validator(rule, value, callback) {
-            if ((Number.isFinite(min) || minKey) && /^(\d)+$/g.test(value)) {
+            if (Number.isFinite(min) || minKey) {
               // @ts-ignore
               const minVal = min ?? (minKey ? (record[minKey] as number) : 0);
               if (minVal > +value) {
                 return Promise.reject(Error(`输入的值不能小于${minVal}`));
               }
-            } else if (
-              (Number.isFinite(max) || maxKey) &&
-              /^(\d)+$/g.test(value)
-            ) {
+            }
+            if (Number.isFinite(max) || maxKey) {
               // @ts-ignore
               const maxVal = max ?? (maxKey ? (record[maxKey] as number) : 0);
               if (maxVal < +value) {
@@ -198,8 +219,31 @@ export default function EditTable&lt;T&gt;({
               maxLength={maxLength}
               // showCount={!!maxLength}
               onPressEnter={save}
+              onFocus={() => {
+                inputType === "number" &&
+                  form.setFieldsValue({
+                    [dataIndex]: `${record?.[dataIndex] ?? ''}`?.replace(
+                      /^0+/g,
+                      ""
+                    ),
+                  });
+              }}
               onBlur={save}
               onClick={(e) => e.stopPropagation()}
+              prefix={
+                inputPrefix
+                  ? typeof inputPrefix === "function"
+                    ? inputPrefix(record)
+                    : inputPrefix
+                  : null
+              }
+              suffix={
+                inputSuffix
+                  ? typeof inputSuffix === "function"
+                    ? inputSuffix(record)
+                    : inputSuffix
+                  : null
+              }
             />
           )}
         </Form.Item>