create

dashboard/src/components/channel/ChannelSelect.tsx

@@ -0,0 +1,73 @@
+import { ProFormCascader } from "@ant-design/pro-components";
+import { message, Select } from "antd";
+import { useEffect, useState } from "react";
+import { get } from "../../request";
+import { IApiResponseChannelList } from "../api/Channel";
+import { IStudio } from "../auth/StudioName";
+
+interface IOption {
+  value: string;
+  label: string;
+}
+
+interface IWidget {
+  width?: number | "md" | "sm" | "xl" | "xs" | "lg";
+  channelId?: string;
+  name?: string;
+  tooltip?: string;
+  label?: string;
+  onSelect?: Function;
+}
+const Widget = ({
+  width = "md",
+  channelId,
+  name = "channel",
+  tooltip,
+  label,
+  onSelect,
+}: IWidget) => {
+  return (
+    <ProFormCascader
+      width={width}
+      name={name}
+      tooltip={tooltip}
+      label={label}
+      request={async ({ keyWords }) => {
+        console.log("keyWord", keyWords);
+        const json = await get<IApiResponseChannelList>(
+          `/v2/channel?view=user-edit&key=${keyWords}`
+        );
+        if (json.ok) {
+          //获取studio list
+          let studio = new Map<string, string>();
+          for (const iterator of json.data.rows) {
+            studio.set(iterator.studio.id, iterator.studio.nickName);
+          }
+          let channels: IOption[] = [];
+
+          studio.forEach((value, key, map) => {
+            const node = {
+              value: key,
+              label: value,
+              children: json.data.rows
+                .filter((value) => value.studio.id === key)
+                .map((item) => {
+                  return { value: item.uid, label: item.name };
+                }),
+            };
+            channels.push(node);
+          });
+
+          console.log("json", channels);
+          return channels;
+        } else {
+          message.error(json.message);
+          return [];
+        }
+      }}
+      fieldProps={{}}
+    />
+  );
+};
+
+export default Widget;

dashboard/src/components/term/TermEdit.tsx

@@ -0,0 +1,250 @@
+import { useIntl } from "react-intl";
+
+import {
+  ProForm,
+  ProFormInstance,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+} from "@ant-design/pro-components";
+
+import LangSelect from "../general/LangSelect";
+import ChannelSelect from "../channel/ChannelSelect";
+import { Form, message } from "antd";
+import { useRef } from "react";
+import {
+  ITermCreateResponse,
+  ITermDataRequest,
+  ITermResponse,
+} from "../api/Term";
+import { get, post, put } from "../../request";
+
+interface ITerm {
+  id?: string;
+  word: string;
+  tag: string;
+  meaning: string;
+  meaning2?: string[];
+  note?: string;
+  channel?: string[];
+  lang?: string;
+}
+
+interface IWidget {
+  id?: string;
+  word?: string;
+  studioName?: string;
+  channelId?: string;
+  onUpdate?: Function;
+}
+const Widget = ({ id, word, channelId, studioName, onUpdate }: IWidget) => {
+  const intl = useIntl();
+  const [form] = Form.useForm<ITerm>();
+  const formRef = useRef<ProFormInstance>();
+  return (
+    <ProForm<ITerm>
+      form={form}
+      formRef={formRef}
+      autoFocusFirstInput={true}
+      onFinish={async (values: ITerm) => {
+        console.log(values.word);
+        const newValue = {
+          id: values.id,
+          word: values.word,
+          tag: values.tag,
+          meaning: values.meaning,
+          other_meaning: values.meaning2?.join(),
+          note: values.note,
+          channal: values.channel
+            ? values.channel[values.channel.length - 1]
+            : undefined,
+          studioName: studioName,
+          language: values.lang,
+        };
+        let res: ITermResponse;
+        if (typeof values.id === "undefined") {
+          res = await post<ITermDataRequest, ITermResponse>(
+            `/v2/terms`,
+            newValue
+          );
+        } else {
+          res = await put<ITermDataRequest, ITermResponse>(
+            `/v2/terms/${values.id}`,
+            newValue
+          );
+        }
+        console.log(res);
+        if (res.ok) {
+          message.success("提交成功");
+          if (typeof onUpdate !== "undefined") {
+            onUpdate();
+          }
+        } else {
+          message.error(res.message);
+        }
+
+        return true;
+      }}
+      request={async () => {
+        let url: string;
+        let data: ITerm = {
+          word: "",
+          tag: "",
+          meaning: "",
+          meaning2: [],
+          note: "",
+          lang: "",
+          channel: [],
+        };
+        if (typeof id !== "undefined") {
+          // 如果是编辑，就从服务器拉取数据。
+          url = "/v2/terms/" + id;
+          console.log("url", url);
+          const res = await get<ITermResponse>(url);
+          console.log("request", res);
+          let meaning2: string[] = [];
+          if (res.data.other_meaning) {
+            meaning2 = res.data.other_meaning.split(",");
+          }
+
+          return {
+            id: res.data.guid,
+            word: res.data.word,
+            tag: res.data.tag,
+            meaning: res.data.meaning,
+            meaning2: meaning2,
+            note: res.data.note,
+            lang: res.data.language,
+          };
+        } else if (typeof channelId !== "undefined") {
+          //在channel新建
+          url = `/v2/terms?view=create-by-channel&channel=${channelId}&word=${word}`;
+          const res = await get<ITermCreateResponse>(url);
+          console.log(res);
+          data = {
+            word: word ? word : "",
+            tag: "",
+            meaning: "",
+            meaning2: [],
+            note: "",
+            lang: res.data.language,
+            channel: [res.data.studio.id, channelId],
+          };
+          return data;
+        } else if (typeof studioName !== "undefined") {
+          //在studio新建
+          url = `/v2/terms?view=create-by-studio&studio=${studioName}&word=${word}`;
+        } else {
+          return {
+            word: "",
+            tag: "",
+            meaning: "",
+            meaning2: [],
+            note: "",
+            lang: "",
+            channel: [],
+          };
+        }
+        return data;
+      }}
+    >
+      <ProForm.Group>
+        <ProFormText width="md" name="id" hidden />
+        <ProFormText
+          width="md"
+          name="word"
+          initialValue={word}
+          required
+          label={intl.formatMessage({
+            id: "term.fields.word.label",
+          })}
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+          fieldProps={{
+            showCount: true,
+            maxLength: 128,
+          }}
+        />
+        <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: "forms.fields.meaning.label",
+          })}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: "forms.message.meaning.required",
+              }),
+            },
+          ]}
+          fieldProps={{
+            showCount: true,
+            maxLength: 128,
+          }}
+        />
+        <ProFormSelect
+          width="md"
+          name="meaning2"
+          label={intl.formatMessage({
+            id: "term.fields.meaning2.label",
+          })}
+          fieldProps={{
+            mode: "tags",
+            tokenSeparators: [",", "，"],
+          }}
+          placeholder="Please select other meanings"
+          rules={[
+            {
+              type: "array",
+            },
+          ]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ChannelSelect
+          channelId={channelId}
+          width="md"
+          name="channel"
+          tooltip={intl.formatMessage({
+            id: "term.fields.channel.tooltip",
+          })}
+          label={intl.formatMessage({
+            id: "term.fields.channel.label",
+          })}
+        />
+        <LangSelect />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormTextArea
+          name="note"
+          width="xl"
+          label={intl.formatMessage({
+            id: "forms.fields.note.label",
+          })}
+        />
+      </ProForm.Group>
+    </ProForm>
+  );
+};
+
+export default Widget;