支持 先选relation

dashboard/src/components/template/Wbw/WbwDetailRelation.tsx

@@ -1,6 +1,10 @@
 import { Button, List, Select, Space } from "antd";
 import { useEffect, useState } from "react";
-import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import {
+  DeleteOutlined,
+  PlusOutlined,
+  InfoCircleOutlined,
+} from "@ant-design/icons";
 
 import { useAppSelector } from "../../../hooks";
 import { getRelation } from "../../../reducers/relation";
@@ -9,13 +13,14 @@ import { IWbw } from "./WbwWord";
 import { useIntl } from "react-intl";
 import store from "../../../store";
 import { add, relationAddParam } from "../../../reducers/relation-add";
+import { IRelation } from "../../../pages/admin/relation/list";
 
 interface IOptions {
   value: string;
   label: JSX.Element;
 }
 
-export interface IRelation {
+export interface IWbwRelation {
   sour_id: string;
   sour_spell: string;
   dest_id: string;
@@ -32,9 +37,18 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
   const getSourId = () => `${data.book}-${data.para}-` + data.sn.join("-");
 
   const intl = useIntl();
-  const [relation, setRelation] = useState<IRelation[]>([]);
+  const [relation, setRelation] = useState<IWbwRelation[]>([]);
+  const [currRelation, setCurrRelation] = useState<IRelation[]>();
+  const [relationOptions, setRelationOptions] = useState<IRelation[]>();
   const [newRelationName, setNewRelationName] = useState<string>();
-  const newRelationRow: IRelation = {
+
+  const [options, setOptions] = useState<IOptions[]>();
+  const terms = useAppSelector(getTerm);
+  const relations = useAppSelector(getRelation);
+
+  const addParam = useAppSelector(relationAddParam);
+
+  const newRelationRow: IWbwRelation = {
     sour_id: getSourId(),
     sour_spell: data.word.value,
     dest_id: "",
@@ -42,25 +56,29 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
     relation: undefined,
     is_new: true,
   };
-  const [options, setOptions] = useState<IOptions[]>();
-  const terms = useAppSelector(getTerm);
-  const relations = useAppSelector(getRelation);
-
-  const addParam = useAppSelector(relationAddParam);
   useEffect(() => {
     if (
       addParam?.command === "apply" &&
       addParam.src_sn === data.sn.join("-") &&
       addParam.target_spell
     ) {
-      const newRelation: IRelation = {
+      const newRelation: IWbwRelation = {
         sour_id: getSourId(),
         sour_spell: data.word.value,
         dest_id: addParam.target_id ? addParam.target_id : "",
         dest_spell: addParam.target_spell,
         relation: newRelationName,
       };
-      setRelation([...relation, newRelation]);
+      setRelation((origin) => {
+        origin.push(newRelation);
+        if (typeof onChange !== "undefined") {
+          onChange({
+            field: "relation",
+            value: JSON.stringify(origin),
+          });
+        }
+        return origin;
+      });
       setNewRelationName(undefined);
     }
   }, [addParam?.command]);
@@ -69,7 +87,7 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
     if (typeof data.relation === "undefined") {
       return;
     }
-    const arrRelation: IRelation[] = JSON.parse(
+    const arrRelation: IWbwRelation[] = JSON.parse(
       data.relation?.value ? data.relation?.value : "[]"
     );
     setRelation(arrRelation);
@@ -91,47 +109,52 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
     if (typeof grammar === "undefined") {
       return;
     }
-    const mRelation = relations
-      ?.filter((value) => {
-        let caseMatch = true;
-        let spellMatch = true;
-        if (!value.from) {
-          return false;
-        }
-        if (value.from?.case) {
-          let matchCount = 0;
-          if (grammar) {
-            for (const iterator of value.from.case) {
-              if (grammar?.includes(iterator)) {
-                matchCount++;
-              }
+
+    //找出符合条件的relation
+    const filteredRelation = relations?.filter((value) => {
+      let caseMatch = true;
+      let spellMatch = true;
+      if (!value.from) {
+        return false;
+      }
+      if (value.from?.case) {
+        let matchCount = 0;
+        if (grammar) {
+          for (const iterator of value.from.case) {
+            if (grammar?.includes(iterator)) {
+              matchCount++;
             }
           }
-          if (matchCount !== value.from.case.length) {
-            caseMatch = false;
-          }
         }
-        if (value.from?.spell) {
-          if (data.real.value !== value.from?.spell) {
-            spellMatch = false;
-          }
+        if (matchCount !== value.from.case.length) {
+          caseMatch = false;
         }
-        return caseMatch && spellMatch;
-      })
-      .map((item) => {
-        const localName = terms?.find(
-          (term) => term.word === item.name
-        )?.meaning;
-        return {
-          value: item.name,
-          label: (
-            <Space>
-              {item.name}
-              {localName}
-            </Space>
-          ),
-        };
-      });
+      }
+      if (value.from?.spell) {
+        if (data.real.value !== value.from?.spell) {
+          spellMatch = false;
+        }
+      }
+      return caseMatch && spellMatch;
+    });
+    setCurrRelation(filteredRelation);
+    setRelationOptions(filteredRelation);
+    let relationName = new Map<string, string>();
+    filteredRelation?.forEach((value) => {
+      relationName.set(value.name, value.name);
+    });
+    const mRelation = Array.from(relationName.keys()).map((item) => {
+      const localName = terms?.find((term) => term.word === item)?.meaning;
+      return {
+        value: item,
+        label: (
+          <Space>
+            {item}
+            {localName}
+          </Space>
+        ),
+      };
+    });
     setOptions(mRelation);
   }, [
     data.case?.value,
@@ -154,6 +177,7 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
             para: data.para,
             src_sn: data.sn.join("-"),
             command: "add",
+            relations: currRelation,
           })
         );
       }}
@@ -174,7 +198,7 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
                 type="text"
                 icon={<DeleteOutlined />}
                 onClick={() => {
-                  let arrRelation: IRelation[] = [...relation];
+                  let arrRelation: IWbwRelation[] = [...relation];
                   arrRelation.splice(index, 1);
                   setRelation(arrRelation);
                   if (typeof onChange !== "undefined") {
@@ -186,28 +210,37 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
                 }}
               />
             )}
-            {item.dest_spell ? item.dest_spell : addButton}
+
             <Select
               defaultValue={item.relation}
+              placeholder={"请选择关系"}
+              clearIcon={true}
               style={{ width: 180 }}
               onChange={(value: string) => {
                 if (item.is_new) {
                   setNewRelationName(value);
                   return;
                 }
+                const currSelect = relationOptions?.filter(
+                  (rl) => rl.name === value
+                );
+                setCurrRelation(currSelect);
                 console.log(`selected ${value}`);
-                let arrRelation: IRelation[] = [...relation];
-                arrRelation[index].relation = value;
-                setRelation(arrRelation);
-                if (typeof onChange !== "undefined") {
-                  onChange({
-                    field: "relation",
-                    value: JSON.stringify(arrRelation),
-                  });
-                }
+                setRelation((origin) => {
+                  origin[index].relation = value;
+                  if (typeof onChange !== "undefined") {
+                    onChange({
+                      field: "relation",
+                      value: JSON.stringify(origin),
+                    });
+                  }
+                  return origin;
+                });
               }}
               options={options}
             />
+            <Button type="link" icon={<InfoCircleOutlined />} />
+            {item.dest_spell ? item.dest_spell : addButton}
           </Space>
         </List.Item>
       )}