把附件分出来单独的tab

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

@@ -12,6 +12,7 @@ import WbwDetailAdvance from "./WbwDetailAdvance";
 import { LockIcon, UnLockIcon } from "../../../assets/icon";
 import { UploadFile } from "antd/es/upload/interface";
 import { IAttachmentResponse } from "../../api/Attachments";
+import WbwDetailAttachment from "./WbwDetailAttachment";
 
 interface IWidget {
   data: IWbw;
@@ -134,6 +135,20 @@ const Widget = ({ data, onClose, onSave }: IWidget) => {
                   onChange={(e: IWbwField) => {
                     fieldChanged(e.field, e.value);
                   }}
+                />
+              </div>
+            ),
+          },
+          {
+            label: `attachments`,
+            key: "attachments",
+            children: (
+              <div>
+                <WbwDetailAttachment
+                  data={currWbwData}
+                  onChange={(e: IWbwField) => {
+                    fieldChanged(e.field, e.value);
+                  }}
                   onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
                     let mData = currWbwData;
                     mData.attachments = fileList.map((item) => {

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

@@ -1,16 +1,12 @@
-import { Input, Divider } from "antd";
-import { UploadFile } from "antd/es/upload/interface";
-import { IAttachmentResponse } from "../../api/Attachments";
-import WbwDetailUpload from "./WbwDetailUpload";
+import { Input } from "antd";
 
 import { IWbw } from "./WbwWord";
 
 interface IWidget {
   data: IWbw;
   onChange?: Function;
-  onUpload?: Function;
 }
-const Widget = ({ data, onChange, onUpload }: IWidget) => {
+const Widget = ({ data, onChange }: IWidget) => {
   const onWordChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -43,18 +39,6 @@ const Widget = ({ data, onChange, onUpload }: IWidget) => {
         defaultValue={data.real?.value}
         onChange={onRealChange}
       />
-      <Divider>附件</Divider>
-      <div></div>
-      <div>
-        <WbwDetailUpload
-          data={data}
-          onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
-            if (typeof onUpload !== "undefined") {
-              onUpload(fileList);
-            }
-          }}
-        />
-      </div>
     </>
   );
 };

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

@@ -0,0 +1,44 @@
+import { Input, Divider } from "antd";
+import { UploadFile } from "antd/es/upload/interface";
+import { IAttachmentResponse } from "../../api/Attachments";
+import WbwDetailUpload from "./WbwDetailUpload";
+
+import { IWbw } from "./WbwWord";
+
+interface IWidget {
+  data: IWbw;
+  onChange?: Function;
+  onUpload?: Function;
+}
+const Widget = ({ data, onChange, onUpload }: IWidget) => {
+  const onWordChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    console.log("onWordChange:", e.target.value);
+    if (typeof onChange !== "undefined") {
+      onChange({ field: "word", value: e.target.value });
+    }
+  };
+  const onRealChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    console.log("onRealChange:", e.target.value);
+    if (typeof onChange !== "undefined") {
+      onChange({ field: "real", value: e.target.value });
+    }
+  };
+  return (
+    <div style={{ minHeight: 270 }}>
+      <WbwDetailUpload
+        data={data}
+        onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
+          if (typeof onUpload !== "undefined") {
+            onUpload(fileList);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default Widget;