使用attachment 组件获取附件

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

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl";
 import { Dropdown, Tabs, Divider, Button, Switch, Rate } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
 
-import { IWbw, IWbwField, TFieldName } from "./WbwWord";
+import { IWbw, IWbwAttachment, IWbwField, TFieldName } from "./WbwWord";
 import WbwDetailBasic from "./WbwDetailBasic";
 import WbwDetailBookMark from "./WbwDetailBookMark";
 import WbwDetailNote from "./WbwDetailNote";
@@ -14,7 +14,7 @@ import {
   UnLockIcon,
 } from "../../../assets/icon";
 import { UploadFile } from "antd/es/upload/interface";
-import { IAttachmentResponse } from "../../api/Attachments";
+import { IAttachmentRequest, IAttachmentResponse } from "../../api/Attachments";
 import WbwDetailAttachment from "./WbwDetailAttachment";
 import CommentBox from "../../discussion/DiscussionDrawer";
 
@@ -23,12 +23,14 @@ interface IWidget {
   onClose?: Function;
   onSave?: Function;
   onCommentCountChange?: Function;
+  onAttachmentSelectOpen?: Function;
 }
 const WbwDetailWidget = ({
   data,
   onClose,
   onSave,
   onCommentCountChange,
+  onAttachmentSelectOpen,
 }: IWidget) => {
   const intl = useIntl();
   const [currWbwData, setCurrWbwData] = useState<IWbw>(
@@ -193,23 +195,29 @@ const WbwDetailWidget = ({
               <div style={{ minHeight: 270 }}>
                 <WbwDetailAttachment
                   data={currWbwData}
-                  onChange={(e: IWbwField) => {
-                    fieldChanged(e.field, e.value);
-                  }}
-                  onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
+                  onUpload={(fileList: IAttachmentRequest[]) => {
                     let mData = JSON.parse(JSON.stringify(currWbwData));
                     mData.attachments = fileList.map((item) => {
                       return {
-                        id: item.response ? item.response?.data.id : item.uid,
-                        title: item.name,
+                        id: item.id,
+                        title: item.title,
                         size: item.size ? item.size : 0,
-                        content_type: item.response
-                          ? item.response?.data.content_type
-                          : "",
+                        content_type: item.content_type,
                       };
                     });
                     setCurrWbwData(mData);
                   }}
+                  onDialogOpen={(open: boolean) => {
+                    if (typeof onAttachmentSelectOpen !== "undefined") {
+                      onAttachmentSelectOpen(open);
+                    }
+                  }}
+                  onChange={(value: IWbwAttachment[]) => {
+                    let mData = JSON.parse(JSON.stringify(currWbwData));
+                    mData.attachments = value;
+                    setCurrWbwData(mData);
+                    //fieldChanged(e.field, e.value);
+                  }}
                 />
               </div>
             ),

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

@@ -1,24 +1,40 @@
 import { UploadFile } from "antd/es/upload/interface";
-import { IAttachmentResponse } from "../../api/Attachments";
+import { IAttachmentRequest, IAttachmentResponse } from "../../api/Attachments";
 import WbwDetailUpload from "./WbwDetailUpload";
 
-import { IWbw } from "./WbwWord";
+import { IWbw, IWbwAttachment } from "./WbwWord";
 
 interface IWidget {
   data: IWbw;
   onChange?: Function;
   onUpload?: Function;
+  onDialogOpen?: Function;
 }
-const WbwDetailAttachmentWidget = ({ data, onChange, onUpload }: IWidget) => {
+const WbwDetailAttachmentWidget = ({
+  data,
+  onChange,
+  onUpload,
+  onDialogOpen,
+}: IWidget) => {
   return (
     <div>
       <WbwDetailUpload
         data={data}
-        onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
+        onUpload={(fileList: IAttachmentRequest[]) => {
           if (typeof onUpload !== "undefined") {
             onUpload(fileList);
           }
         }}
+        onDialogOpen={(open: boolean) => {
+          if (typeof onDialogOpen !== "undefined") {
+            onDialogOpen(open);
+          }
+        }}
+        onChange={(value: IWbwAttachment[]) => {
+          if (typeof onChange !== "undefined") {
+            onChange(value);
+          }
+        }}
       />
     </div>
   );

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

@@ -1,18 +1,31 @@
 import { useIntl } from "react-intl";
-import { UploadOutlined } from "@ant-design/icons";
+import { DeleteOutlined } from "@ant-design/icons";
 import type { UploadProps } from "antd";
-import { Button, message, Upload } from "antd";
+import { Button, List, message, Upload } from "antd";
 
 import { API_HOST } from "../../../request";
-import { get as getToken } from "../../../reducers/current-user";
-import { IWbw } from "./WbwWord";
+import { currentUser, get as getToken } from "../../../reducers/current-user";
+import { IWbw, IWbwAttachment } from "./WbwWord";
+import AttachmentDialog from "../../attachment/AttachmentDialog";
+import { useAppSelector } from "../../../hooks";
+import { useState } from "react";
+import { IAttachmentRequest } from "../../api/Attachments";
 
 interface IWidget {
   data: IWbw;
   onUpload?: Function;
+  onChange?: Function;
+  onDialogOpen?: Function;
 }
-const WbwDetailUploadWidget = ({ data, onUpload }: IWidget) => {
+const WbwDetailUploadWidget = ({
+  data,
+  onUpload,
+  onChange,
+  onDialogOpen,
+}: IWidget) => {
   const intl = useIntl();
+  const user = useAppSelector(currentUser);
+  const attachments = data.attachments;
 
   const props: UploadProps = {
     name: "file",
@@ -46,12 +59,61 @@ const WbwDetailUploadWidget = ({ data, onUpload }: IWidget) => {
     },
   };
 
+  /**
+   *       <Upload {...props}>
+        <Button icon={<UploadOutlined />}>
+          {intl.formatMessage({ id: "buttons.click.upload" })}
+        </Button>
+      </Upload>
+   */
   return (
-    <Upload {...props}>
-      <Button icon={<UploadOutlined />}>
-        {intl.formatMessage({ id: "buttons.click.upload" })}
-      </Button>
-    </Upload>
+    <>
+      <List
+        itemLayout="vertical"
+        size="small"
+        header={
+          <AttachmentDialog
+            trigger={<Button>上传</Button>}
+            studioName={user?.realName}
+            onOpenChange={(open: boolean) => {
+              if (typeof onDialogOpen !== "undefined") {
+                onDialogOpen(open);
+              }
+            }}
+            onSelect={(value: IAttachmentRequest) => {
+              if (typeof onUpload !== "undefined") {
+                onUpload([value]);
+              }
+            }}
+          />
+        }
+        dataSource={attachments}
+        renderItem={(item, id) => (
+          <List.Item>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <div style={{ maxWidth: 400, overflowX: "hidden" }}>
+                {item.title}
+              </div>
+              <div style={{ marginLeft: 20 }}>
+                <Button
+                  type="link"
+                  size="small"
+                  icon={<DeleteOutlined />}
+                  onClick={() => {
+                    const output = data.attachments?.filter(
+                      (value: IWbwAttachment, index: number) => index !== id
+                    );
+                    if (typeof onChange !== "undefined") {
+                      onChange(output);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          </List.Item>
+        )}
+      />
+    </>
   );
 };