前端-编辑界面中上传/删除文件 link #36

frontend/src/components/Plugin/EditForm/VersionControl/FileList.tsx

@@ -1,20 +1,24 @@
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {Space, Table} from "antd";
+import {message, Space, Table} from "antd";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import confirm from "antd/lib/modal/confirm";
 
 export interface VersionFilesProps{
     id:string
     version:string
     refresh?:()=>void
+    refreshFile?:()=>void
 }
 
 interface tableView {
     filename:string
 }
 
+
 export default function(props:VersionFilesProps){
     const [fileList, setFileList] = useState(Array<tableView>())
-    useEffect( ()=>{
+    const refreshList = ()=>{
         axios.get("/v1/plugins/"+props.id+"/"+props.version+"/").then(res=>{
             const arr = []
             for(let i = 0; i < res.data.response.length; i++) {
@@ -24,7 +28,28 @@ export default function(props:VersionFilesProps){
             }
             setFileList(arr)
         })
-    },[])
+    }
+    useEffect( refreshList,[])
+
+
+    const showDeleteConfirm = (filename:string) => confirm({
+        title: '你确认要删除'+filename+'文件吗？',
+        icon: <ExclamationCircleOutlined />,
+        content: '该操作不可复原。',
+        okText: '确认',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: async ()=>{
+            try{
+                await axios.delete("/v1/plugins/"+props.id+"/"+props.version+"/"+filename)
+                message.success("删除成功")
+                refreshList()
+            }catch (e) {
+                message.error(e.response.data.message)
+            }
+        },
+    });
+
     //TODO 在ENV中增加变量用于控制API
     const API_URL = "http://localhost:8080"
     const downloadFile = (filename:string)=>window.open(API_URL+'/v1/plugins/'+props.id+"/"+props.version+"/"+filename, '_blank')
@@ -40,7 +65,7 @@ export default function(props:VersionFilesProps){
             render: (text:any, record:any) => (
                 <Space size="middle">
                     <a onClick={()=>downloadFile(record.filename)}>下载 {record.filename}</a>
-                    <a>删除</a>
+                    <a onClick={()=>showDeleteConfirm(record.filename)}>删除</a>
                 </Space>
             ),
         },

frontend/src/components/Plugin/EditForm/VersionControl/FileUpload.tsx

@@ -0,0 +1,36 @@
+import {useState} from "react";
+import {Button, message, Upload} from "antd";
+import {UploadOutlined} from "@ant-design/icons";
+import {VersionFilesProps} from "./FileList";
+
+
+export default function(props:VersionFilesProps) {
+    const {refresh} = props
+    const doRefresh = ()=>{
+        if(refresh) refresh()
+    }
+    const [urlName, setUrlName] = useState("")
+    const handleChange = (info:any) => {
+        if (info.file.status !== 'uploading') {
+            message.info("正在上传中")
+        }
+        if (info.file.status === 'done') {
+            message.success(`${info.file.name} 上传成功`);
+            doRefresh()
+        } else if (info.file.status === 'error') {
+            message.error(`${info.file.name} 上传失败`);
+        }
+    }
+    const beforeUpload = async(file:any) => {
+        setUrlName(`/v1/plugins/${props.id}/${props.version}/${file.name}`)
+    }
+    const propsUpload = {
+        onChange: handleChange,
+        multiple: false
+    };
+    return (
+        <Upload method={"PUT"} action={()=>urlName} beforeUpload={beforeUpload} {...propsUpload}>
+            <Button icon={<UploadOutlined />}>上传文件</Button>
+        </Upload>
+    );
+}

frontend/src/components/Plugin/EditForm/VersionControl/VersionList.tsx

@@ -16,13 +16,10 @@ export default function(props:PluginInfoFormParams){
         axios.get("/v1/plugins/"+props.info.id+"/versionList").then(res=>setVersionList(res.data.response))
     },[])
 
-    function callback(key:any) {
-        console.log(key);
-    }
-
     return(
-        <Collapse defaultActiveKey={[]} onChange={callback}>
+        <Collapse defaultActiveKey={[]}>
             {versionList.map((item,index)=>{
+                //TODO 完成后进行文件列表局部刷新，而不是整体刷新
                 return <CollapsePanel header={item} key={index}>
                     <FileList refresh={doRefresh} id={props.info.id} version={item}/>
                     <VersionOperation refresh={doRefresh} id={props.info.id} version={item}/>

frontend/src/components/Plugin/EditForm/VersionControl/VersionOperation.tsx

@@ -3,24 +3,18 @@ import {VersionFilesProps} from "./FileList";
 import {Modal, Button, Space, message} from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import axios from "axios";
+import FileUpload from "./FileUpload";
 
 const { confirm } = Modal;
-
-function showConfirm() {
-    confirm({
-        title: 'Do you Want to delete these items?',
-        icon: <ExclamationCircleOutlined />,
-        content: 'Some descriptions',
-        onOk() {
-            console.log('OK');
-        },
-        onCancel() {
-            console.log('Cancel');
-        },
-    });
-}
-
 export default function (props:VersionFilesProps){
+    const {refresh} = props
+    const {refreshFile} = props
+    const doRefresh = ()=>{
+        if(refresh) refresh()
+    }
+    const doRefreshFile = ()=>{
+        if(refreshFile) refreshFile()
+    }
     const showDeleteConfirm = () => confirm({
         title: '你确认要删除'+props.version+'版本吗？',
         icon: <ExclamationCircleOutlined />,
@@ -32,20 +26,15 @@ export default function (props:VersionFilesProps){
             try{
                 await axios.delete("/v1/plugins/"+props.id+"/"+props.version)
                 message.success("删除成功")
-                if(props.refresh) {
-                    props.refresh()
-                }
+                doRefresh()
             }catch (e) {
                 message.error(e.response.data.message)
             }
         },
-        onCancel() {
-            console.log('Cancel');
-        },
     });
     return (
         <Space wrap>
-            <Button onClick={showConfirm}>新增版本文件</Button>
+            <FileUpload {...props} refreshFile={doRefreshFile} refresh={doRefresh}/>
             <Button onClick={showDeleteConfirm} type="dashed">
                 删除版本
             </Button>