shalu-system-designer/apps/er-designer/src/pages/detail/components/AddTable.tsx

import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import { Col, Form, Input, Modal, Row, Select, Tabs, TabsProps } from "antd";
import LangInput from "@/components/LangInput";
import LangInputTextarea from "@/components/LangInputTextarea";
import { TableType } from "@/enum";
import { createTable } from "@/utils";
import { TableItemType, ViewTable } from "@/type";
import { useSearchParams } from "umi";

export default forwardRef(function AddTable(
  props: {
    onChange: (value: TableItemType) => void;
  },
  ref
) {
  const [open, setOpen] = useState(false);
  const tableItemRef = useRef<TableItemType>();
  const [searchParams] = useSearchParams();
  const [tabActiveKey, setTabActiveKey] = useState("1");
  useImperativeHandle(ref, () => ({
    open: () => {
      // 获取当前模型类型
      tableItemRef.current = createTable(
        searchParams.get("type") as unknown as TableType
      );
      setFormModel(tableItemRef.current.table);
      setOpen(true);
    },
    close: () => {
      setOpen(false);
    },
  }));

  const [form] = Form.useForm();
  const [formModel, setFormModel] = useState<TableItemType['table']>();

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: `新建`,
      children: (
        <div>
          <Form labelCol={{ span: 8 }} form={form}>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="表类型">
                  <Input
                    placeholder="请输入"
                    value={
                      formModel?.type == TableType.BusinessTable
                        ? "业务表"
                        : "视图表"
                    }
                    disabled
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="编码">
                  <Input
                    placeholder="请输入"
                    value={formModel?.schemaName}
                    onChange={(e) => handleChange("schemaName", e.target.value)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="表名">
                  <LangInput
                    value={formModel?.langNameList}
                    onChange={(lang) => handleChange("langNameList", lang)}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="别名">
                  <Input
                    placeholder="请输入"
                    value={formModel?.aliasName}
                    onChange={(e) => handleChange("aliasName", e.target.value)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item label="描述" labelCol={{ span: 4 }}>
                  <LangInputTextarea
                    value={formModel?.langDescriptionList}
                    onChange={(lang) =>
                      handleChange("langDescriptionList", lang)
                    }
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      ),
    },
    {
      key: "2",
      label: `引入`,
      children: (
        <div>
          <Form.Item label="选择主表">
            <Select placeholder="请选择" />
          </Form.Item>
        </div>
      ),
    },
  ];

  const handleChange = (key: string, value: any) => {
    formModel && setFormModel({
      ...formModel,
      [key]: value
    });
  };
  const handleOk = () => {
    form.validateFields().then((values) => {
      if(tableItemRef.current && formModel) {
        props.onChange({
          ...tableItemRef.current,
          table: formModel
        })
      }
      setOpen(false);
    });
  };

  return (
    <Modal
      open={open}
      title="添加表"
      okText="确定"
      cancelText="取消"
      onCancel={() => setOpen(false)}
      onOk={handleOk}
    >
      <Tabs items={items} activeKey={tabActiveKey} onChange={setTabActiveKey} />
    </Modal>
  );
});