支持弹窗和内联两种模式

dashboard/src/components/studio/term/TermCreate.tsx

@@ -1,17 +1,12 @@
 import { useIntl } from "react-intl";
 import { Button, Form, message } from "antd";
-import {
-  ModalForm,
-  ProForm,
-  ProFormText,
-  ProFormTextArea,
-} from "@ant-design/pro-components";
+import { ModalForm, ProForm } from "@ant-design/pro-components";
 import { PlusOutlined } from "@ant-design/icons";
 
 import { ITermResponse } from "../../api/Term";
 import { get } from "../../../request";
 
-import LangSelect from "../LangSelect";
+import TermEditInner from "./TermEditInner";
 
 interface IFormData {
   word: string;
@@ -29,6 +24,7 @@ type IWidgetDictCreate = {
   wordId?: string;
   word?: string;
   channel?: string;
+  type?: "inline" | "modal";
 };
 const Widget = ({
   studio,
@@ -36,6 +32,7 @@ const Widget = ({
   wordId,
   word,
   channel,
+  type = "modal",
 }: IWidgetDictCreate) => {
   const intl = useIntl();
   const [form] = Form.useForm<IFormData>();
@@ -61,139 +58,92 @@ const Widget = ({
       })}
     </Button>
   );
-  return (
-    <>
-      <ModalForm<IFormData>
-        title={intl.formatMessage({
-          id: isCreate ? "buttons.create" : "buttons.edit",
-        })}
-        trigger={isCreate ? createTrigger : editTrigger}
-        form={form}
-        autoFocusFirstInput
-        modalProps={{
-          destroyOnClose: true,
-          onCancel: () => console.log("run"),
-        }}
-        submitTimeout={2000}
-        onFinish={async (values) => {
-          await waitTime(2000);
-          console.log(values.word);
-          message.success("提交成功");
-          return true;
-        }}
-        request={async () => {
-          let url: string;
 
-          if (typeof isCreate !== "undefined" && isCreate === false) {
-            // 如果是编辑，就从服务器拉取数据。
-            url = "/v2/terms/" + (isCreate ? "" : wordId);
-          } else if (typeof channel !== "undefined") {
-            //在channel新建
-            url = `/v2/terms?view=createByChannel&channel=${channel}&word=${word}`;
-          } else if (typeof studio !== "undefined") {
-            //在studio新建
-            url = `/v2/terms?view=createByStudio&studio=${studio}&word=${word}`;
-          } else {
-            return {
-              word: "",
-              tag: "",
-              meaning: "",
-              meaning2: "",
-              note: "",
-              lang: "",
-              channel: "",
-            };
-          }
-          console.log(url);
-          const res = await get<ITermResponse>(url);
-          console.log(res);
-          return {
-            word: res.data.word,
-            tag: res.data.tag,
-            meaning: res.data.meaning,
-            meaning2: res.data.other_meaning,
-            note: res.data.note,
-            lang: res.data.language,
-            channel: res.data.channal,
-          };
-        }}
-      >
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="word"
-            required
-            label={intl.formatMessage({
-              id: "dict.fields.word.label",
-            })}
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage({
-                  id: "channel.create.message.noname",
-                }),
-              },
-            ]}
-          />
-          <ProFormText
-            width="md"
-            name="tag"
-            tooltip={intl.formatMessage({
-              id: "term.fields.description.tooltip",
-            })}
-            label={intl.formatMessage({
-              id: "term.fields.description.label",
-            })}
-          />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="meaning"
-            tooltip={intl.formatMessage({
-              id: "term.fields.meaning.tooltip",
-            })}
-            label={intl.formatMessage({
-              id: "term.fields.meaning.label",
-            })}
-          />
-          <ProFormText
-            width="md"
-            name="meaning2"
-            tooltip={intl.formatMessage({
-              id: "term.fields.meaning2.tooltip",
-            })}
-            label={intl.formatMessage({
-              id: "term.fields.meaning2.label",
-            })}
-          />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="channel"
-            tooltip={intl.formatMessage({
-              id: "term.fields.channel.tooltip",
-            })}
-            label={intl.formatMessage({
-              id: "term.fields.channel.label",
-            })}
-          />
+  const onFinish = async (values: IFormData) => {
+    await waitTime(2000);
+    console.log(values.word);
+    message.success("提交成功");
+    return true;
+  };
+  const request = async () => {
+    let url: string;
 
-          <LangSelect />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormTextArea
-            name="note"
-            width="xl"
-            label={intl.formatMessage({
-              id: "forms.fields.note.label",
+    if (typeof isCreate !== "undefined" && isCreate === false) {
+      // 如果是编辑，就从服务器拉取数据。
+      url = "/v2/terms/" + (isCreate ? "" : wordId);
+    } else if (typeof channel !== "undefined") {
+      //在channel新建
+      url = `/v2/terms?view=createByChannel&channel=${channel}&word=${word}`;
+    } else if (typeof studio !== "undefined") {
+      //在studio新建
+      url = `/v2/terms?view=createByStudio&studio=${studio}&word=${word}`;
+    } else {
+      return {
+        word: "",
+        tag: "",
+        meaning: "",
+        meaning2: "",
+        note: "",
+        lang: "",
+        channel: "",
+      };
+    }
+    console.log(url);
+    const res = await get<ITermResponse>(url);
+    console.log(res);
+    return {
+      word: res.data.word,
+      tag: res.data.tag,
+      meaning: res.data.meaning,
+      meaning2: res.data.other_meaning,
+      note: res.data.note,
+      lang: res.data.language,
+      channel: res.data.channal,
+    };
+  };
+  const formProps = {
+    form: form,
+    autoFocusFirstInput: true,
+    submitTimeout: 2000,
+    onFinish: onFinish,
+    request: request,
+  };
+
+  let formTerm: JSX.Element;
+  switch (type) {
+    case "inline":
+      formTerm = (
+        <>
+          <ProForm<IFormData> {...formProps}>
+            <TermEditInner />
+          </ProForm>
+        </>
+      );
+      break;
+    case "modal":
+      formTerm = (
+        <>
+          <ModalForm<IFormData>
+            title={intl.formatMessage({
+              id: isCreate ? "buttons.create" : "buttons.edit",
             })}
-          />
-        </ProForm.Group>
-      </ModalForm>
-    </>
-  );
+            trigger={isCreate ? createTrigger : editTrigger}
+            modalProps={{
+              destroyOnClose: true,
+              onCancel: () => console.log("run"),
+            }}
+            {...formProps}
+          >
+            <TermEditInner />
+          </ModalForm>
+        </>
+      );
+      break;
+    default:
+      formTerm = <></>;
+      break;
+  }
+  return formTerm;
 };
 
 export default Widget;