添加意思选择组件

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

@@ -1,23 +1,15 @@
-import { useRef, useState, useEffect } from "react";
+import { useState } from "react";
 import { useIntl } from "react-intl";
-import {
-  ProForm,
-  ProFormText,
-  ProFormSelect,
-  ProFormInstance,
-} from "@ant-design/pro-components";
-import { Divider, message, Form, Select } from "antd";
-import { Collapse, Tag } from "antd";
+import { Divider, Form, Select, Input } from "antd";
+import { Collapse } from "antd";
 
 import SelectCase from "../../studio/SelectCase";
 import { IWbw } from "./WbwWord";
+import WbwMeaningSelect from "./WbwMeaningSelect";
 
+const { Option } = Select;
 const { Panel } = Collapse;
 
-const handleChange = (value: string | string[]) => {
-  console.log(`Selected: ${value}`);
-};
-
 export interface IWordBasic {
   meaning?: string[];
   case?: string;
@@ -27,169 +19,163 @@ export interface IWordBasic {
 }
 interface IWidget {
   data: IWbw;
-  submit?: boolean;
-  onSubmit?: Function;
+  onChange?: Function;
 }
-const Widget = ({ data, submit = false, onSubmit }: IWidget) => {
-  const formRef = useRef<ProFormInstance>();
+const Widget = ({ data, onChange }: IWidget) => {
+  const [form] = Form.useForm();
   const intl = useIntl();
   const [items, setItems] = useState(["jack", "lucy"]);
+
   const formItemLayout = {
     labelCol: { span: 4 },
-    wrapperCol: { span: 14 },
+    wrapperCol: { span: 20 },
   };
-  useEffect(() => {
-    if (submit) {
-      if (typeof onSubmit !== "undefined") {
-        onSubmit(formRef.current?.getFieldFormatValue?.());
-      }
-    }
-  }, [submit]);
+
   return (
-    <ProForm<IWordBasic>
-      formRef={formRef}
-      {...formItemLayout}
-      layout="horizontal"
-      submitter={{
-        render: (props, doms) => {
-          return <></>;
-        },
-      }}
-      onFinish={async (values) => {
-        console.log(values);
-        message.success("提交成功");
-      }}
-      params={{}}
-      request={async () => {
-        return {
+    <>
+      <Form
+        {...formItemLayout}
+        name="basic"
+        form={form}
+        initialValues={{
           meaning: data.meaning?.value,
           factors: data.factors?.value,
+          factorMeaning: data.factorMeaning?.value,
           parent: data.parent?.value,
-          case: data.type?.value,
-        };
-      }}
-    >
-      <Select
-        mode="tags"
-        placeholder="Please select"
-        defaultValue={data.meaning?.value}
-        onChange={handleChange}
-        style={{ width: "100%" }}
-        options={items.map((item) => ({ label: item, value: item }))}
-      />
-      <ProFormSelect
-        width="md"
-        name="meaning"
-        dependencies={["meaning"]}
-        label={intl.formatMessage({ id: "forms.fields.meaning.label" })}
-        tooltip={intl.formatMessage({ id: "forms.fields.meaning.tooltip" })}
-        placeholder={intl.formatMessage({ id: "forms.fields.meaning.label" })}
-        options={items.map((item) => ({ label: item, value: item }))}
-        fieldProps={{
-          mode: "tags",
-          optionItemRender(item) {
-            return item.label + " - " + item.value;
-          },
-          dropdownRender(menu) {
-            return (
+        }}
+      >
+        <Form.Item
+          name="meaning"
+          label={intl.formatMessage({ id: "forms.fields.meaning.label" })}
+          tooltip={intl.formatMessage({ id: "forms.fields.meaning.tooltip" })}
+        >
+          <Select
+            allowClear
+            mode="tags"
+            onChange={(value: string | string[]) => {
+              console.log(`Selected: ${value}`);
+              if (typeof onChange !== "undefined") {
+                if (typeof value === "string") {
+                  onChange({ field: "meaning", value: value });
+                } else {
+                  onChange({ field: "meaning", value: value.join("$") });
+                }
+              }
+            }}
+            style={{ width: "100%" }}
+            placeholder={intl.formatMessage({
+              id: "forms.fields.meaning.label",
+            })}
+            options={items.map((item) => ({ label: item, value: item }))}
+            dropdownRender={(menu) => (
               <>
+                {" "}
                 {menu}
                 <Divider style={{ margin: "8px 0" }}>更多</Divider>
-                <Collapse defaultActiveKey={["1"]}>
-                  <Panel
-                    header="This is panel header 1"
-                    style={{ padding: 0 }}
-                    key="1"
-                  >
-                    <Tag
-                      onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                        e.preventDefault();
-
-                        const it =
-                          formRef.current?.getFieldValue("meaning") || [];
-                        console.log(it);
-                        if (!items.includes("hello")) {
-                          setItems([...items, "hello"]);
-                        }
-                        if (!it.includes("hello")) {
-                          it.push("hello");
-                          console.log("it push", it);
-                        }
-                        formRef.current?.setFieldsValue({ meaning: it });
-                      }}
-                    >
-                      意思
-                    </Tag>
-                  </Panel>
-                  <Panel header="This is panel header 2" key="2">
-                    <Tag>意思</Tag>
-                  </Panel>
-                  <Panel header="This is panel header 3" key="3">
-                    <Tag>意思</Tag>
-                  </Panel>
-                </Collapse>
+                <WbwMeaningSelect
+                  data={data}
+                  onSelect={(meaning: string) => {
+                    const currMeanings = form.getFieldValue("meaning") || [];
+                    console.log(meaning);
+                    if (!items.includes(meaning)) {
+                      setItems([...items, meaning]);
+                    }
+                    if (!currMeanings.includes(meaning)) {
+                      currMeanings.push(meaning);
+                      console.log("it push", meaning);
+                    }
+                    form.setFieldsValue({
+                      meaning: currMeanings,
+                    });
+                  }}
+                />
               </>
-            );
-          },
-        }}
-      />
-      <ProFormText
-        width="md"
-        name="factors"
-        label={intl.formatMessage({ id: "forms.fields.factors.label" })}
-        tooltip={intl.formatMessage({ id: "forms.fields.factors.tooltip" })}
-        placeholder={intl.formatMessage({ id: "forms.fields.factors.label" })}
-      />
-      <Form.Item
-        label={intl.formatMessage({ id: "forms.fields.case.label" })}
-        tooltip={intl.formatMessage({ id: "forms.fields.case.tooltip" })}
-        name="case"
-      >
-        <SelectCase />
-      </Form.Item>
-      <ProFormText
-        name="parent"
-        width="md"
-        label={intl.formatMessage({ id: "forms.fields.parent.label" })}
-        tooltip={intl.formatMessage({ id: "forms.fields.parent.tooltip" })}
-        placeholder={intl.formatMessage({ id: "forms.fields.parent.label" })}
-      />
-      <Collapse bordered={false}>
-        <Panel header="词源" key="1">
-          <ProFormText
-            name="parent1"
-            width="md"
-            label={intl.formatMessage({ id: "forms.fields.parent.label" })}
-            tooltip={intl.formatMessage({ id: "forms.fields.parent.tooltip" })}
+            )}
+          />
+        </Form.Item>
+        <Form.Item
+          name="factors"
+          label={intl.formatMessage({ id: "forms.fields.factors.label" })}
+          tooltip={intl.formatMessage({ id: "forms.fields.factors.tooltip" })}
+        >
+          <Input
+            allowClear
             placeholder={intl.formatMessage({
-              id: "forms.fields.parent.label",
+              id: "forms.fields.factors.label",
             })}
           />
-          <ProFormSelect
-            width="md"
-            name="grammar"
-            label={intl.formatMessage({ id: "forms.fields.meaning.label" })}
-            tooltip={intl.formatMessage({ id: "forms.fields.meaning.tooltip" })}
+        </Form.Item>
+        <Form.Item
+          label={intl.formatMessage({ id: "forms.fields.case.label" })}
+          tooltip={intl.formatMessage({ id: "forms.fields.case.tooltip" })}
+          name="case"
+        >
+          <SelectCase />
+        </Form.Item>
+        <Form.Item
+          name="factorMeaning"
+          label={intl.formatMessage({
+            id: "forms.fields.factor.meaning.label",
+          })}
+          tooltip={intl.formatMessage({
+            id: "forms.fields.factor.meaning.tooltip",
+          })}
+        >
+          <Input
+            allowClear
             placeholder={intl.formatMessage({
-              id: "forms.fields.meaning.label",
+              id: "forms.fields.factor.meaning.label",
+            })}
+          />
+        </Form.Item>
+        <Form.Item
+          name="parent"
+          label={intl.formatMessage({
+            id: "forms.fields.parent.label",
+          })}
+          tooltip={intl.formatMessage({
+            id: "forms.fields.parent.tooltip",
+          })}
+        >
+          <Input
+            allowClear
+            placeholder={intl.formatMessage({
+              id: "forms.fields.parent.label",
             })}
-            options={[
-              { label: "过去分词", value: "pp" },
-              { label: "现在分词", value: "prp" },
-              { label: "未来分词", value: "fpp" },
-            ]}
-            fieldProps={{
-              optionItemRender(item) {
-                return item.label + " - " + item.value;
-              },
-            }}
           />
-        </Panel>
-        <Panel header="关系" key="2">
-          关系语法
-        </Panel>
-      </Collapse>
-    </ProForm>
+        </Form.Item>
+        <Collapse bordered={false}>
+          <Panel header="词源" key="1">
+            <Form.Item
+              name="parent1"
+              label={intl.formatMessage({ id: "forms.fields.parent.label" })}
+              tooltip={intl.formatMessage({
+                id: "forms.fields.parent.tooltip",
+              })}
+            >
+              <Input
+                allowClear
+                placeholder={intl.formatMessage({
+                  id: "forms.fields.parent.label",
+                })}
+                addonAfter={
+                  <Form.Item name="suffix" noStyle>
+                    <Select style={{ width: 100 }} allowClear>
+                      <Option value="prp">现在分词</Option>
+                      <Option value="pp">过去分词</Option>
+                      <Option value="fpp">未来分词</Option>
+                    </Select>
+                  </Form.Item>
+                }
+              />
+            </Form.Item>
+          </Panel>
+          <Panel header="关系" key="2">
+            关系语法
+          </Panel>
+        </Collapse>
+      </Form>
+    </>
   );
 };
 

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

@@ -0,0 +1,74 @@
+import { Collapse, Tag } from "antd";
+
+import { IWbw } from "./WbwWord";
+
+const { Panel } = Collapse;
+
+interface IMeaning {
+  text: string;
+  count: number;
+}
+interface IDict {
+  name: string;
+  meaning: IMeaning[];
+}
+interface IParent {
+  word: string;
+  dict: IDict[];
+}
+
+interface IWidget {
+  data: IWbw;
+  onSelect?: Function;
+}
+const Widget = ({ data, onSelect }: IWidget) => {
+  const meaning: IMeaning[] = Array.from(Array(10).keys()).map((item) => {
+    return { text: "意思" + item, count: item };
+  });
+  const dict: IDict[] = Array.from(Array(3).keys()).map((item) => {
+    return { name: "字典" + item, meaning: meaning };
+  });
+  const parent: IParent[] = Array.from(Array(3).keys()).map((item) => {
+    return { word: data.word.value + item, dict: dict };
+  });
+  return (
+    <div>
+      <Collapse defaultActiveKey={["0"]}>
+        {parent.map((item, id) => {
+          return (
+            <Panel header={item.word} style={{ padding: 0 }} key={id}>
+              {item.dict.map((itemDict, idDict) => {
+                return (
+                  <div key={idDict}>
+                    <div>{itemDict.name}</div>
+                    <div>
+                      {itemDict.meaning.map((itemMeaning, idMeaning) => {
+                        return (
+                          <Tag
+                            key={idMeaning}
+                            onClick={(
+                              e: React.MouseEvent<HTMLAnchorElement>
+                            ) => {
+                              e.preventDefault();
+                              if (typeof onSelect !== "undefined") {
+                                onSelect(itemMeaning.text);
+                              }
+                            }}
+                          >
+                            {itemMeaning.text}-{itemMeaning.count}
+                          </Tag>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </Panel>
+          );
+        })}
+      </Collapse>
+    </div>
+  );
+};
+
+export default Widget;