init

src/components/Stars/StarTable/component/TableForm.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import Form from 'antd/es/form';
+
+import { ElementType } from '../../StarElement/type';
+import StarForm from '../../StarForm';
+import { StarFormField } from '../../StarForm/type';
+import { StarTableProps, TableFormMode } from '../interface';
+import StarModal from '../../StarModal';
+
+const TableForm: React.FC<StarTableProps & {
+  show: boolean;
+  entity: any;
+  mode: TableFormMode;
+  close: () => void;
+  destroy?: () => void;
+}> = (props) => {
+  const { columns, show, mode, entity, close, destroy, onSaveClick, format } = props;
+
+  const fields: StarFormField[] = [];
+  columns.forEach((col) => {
+    const label = typeof col.title === 'function' ? col.title({}) : col.title;
+    if (col.form) {
+      if (col.form === true) {
+        fields.push({
+          element: ElementType.Input,
+          label,
+          name: col.dataIndex?.toString(),
+        });
+      } else {
+        fields.push({
+          label,
+          name: col.dataIndex?.toString(),
+          ...col.form,
+        });
+      }
+    }
+  });
+
+  const [form] = Form.useForm();
+
+  let title = '';
+  if (format) title = format({ id: mode });
+  else {
+    switch (mode) {
+      case 'add':
+        title = '增加';
+        break;
+      case 'edit':
+        title = '编辑';
+        break;
+      default:
+        title = '查看';
+        break;
+    }
+  }
+  return (
+    <StarModal
+      title={title}
+      open={show}
+      onOk={async () => {
+        try {
+          let values = await form.validateFields();
+          values = { ...entity, ...values };
+          onSaveClick && onSaveClick(values, mode);
+          close();
+        } catch (error) {
+          console.error('form fields validate error! ', error);
+        }
+      }}
+      onCancel={() => close()}
+      afterClose={() => destroy && destroy()}
+      okButtonProps={{ hidden: mode === 'view' }}
+      width={800}
+      destroyOnClose
+    >
+      <StarForm
+        style={{ padding: '20px 40px' }}
+        form={form}
+        fields={fields}
+        entity={entity}
+        readonly={mode === 'view'}
+      />
+    </StarModal>
+  );
+};
+
+export default TableForm;