shalu-system-designer/apps/er-designer/src/components/LangInput.tsx

import React, { useEffect } from "react";
import { ListLangBySearchKey } from "@/api";
import { useRequest } from "umi";
import { AutoComplete } from "antd";

interface LanItem {
  en: string;
  key: string;
  ["zh-CN"]: string;
}
export default function LangInput({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: any) => void;
}) {
  const [lanOptions, setLanOptions] = React.useState<any[]>([]);
  const [formModel, setFormModel] = React.useState({
    langText: "",
    en: "",
    ["zh-CN"]: "",
  });
  const { run } = useRequest(ListLangBySearchKey, {
    manual: true,
    onSuccess(data, params) {
      setLanOptions(
        (data.result || []).map((item: LanItem) => ({
          ...item,
          label: `${item.en || ""}[zh-CN:${item["zh-CN"]}]`,
          value: item[params[0].searchLan],
        }))
      );
    },
  });

  const handleSearch = (serchKey: string, searchLan: "en" | "zh-CN") => {
    run({
      maxCount: 10,
      searchKey: serchKey,
      searchLan,
    });
  };

  const handleSelectLang = (option: LanItem) => {
    setFormModel(() => {
      return {
        ...formModel,
        langText: option.key,
        en: option?.en,
        ["zh-CN"]: option?.["zh-CN"],
      };
    });
  };

  const handleChange = (key: "en" | "zh-CN", val: string) => {
    setFormModel(() => {
      return {
        ...formModel,
        langText: "",
        [key]: val,
      };
    });
  };

  useEffect(() => {
    onChange(formModel);
  }, [formModel]);

  return (
    <div>
      <div>
        <AutoComplete
          allowClear
          placeholder="中文"
          options={lanOptions}
          onSearch={(val) => handleSearch(val, "zh-CN")}
          value={formModel["zh-CN"]}
          onChange={(val) => handleChange("zh-CN", val)}
          onSelect={(_val, opt) => handleSelectLang(opt)}
        />
      </div>
      <div>
        <AutoComplete
          allowClear
          style={{ width: "100%" }}
          placeholder="英文"
          options={lanOptions}
          onSearch={(val) => handleSearch(val, "en")}
          value={formModel.en}
          onChange={(val) => handleChange("en", val)}
          onSelect={(_val, opt) => handleSelectLang(opt)}
        />
      </div>
    </div>
  );
}