资源库

src/forge/Source/AddTag.jsx

@@ -0,0 +1,47 @@
+import React , { forwardRef, useEffect } from 'react';
+import { Modal , Form , Input } from 'antd';
+
+function AddTag({form , visible , onCancel ,onOk}){
+  const { getFieldDecorator, validateFields , setFieldsValue } = form;
+
+  useEffect(()=>{
+    setFieldsValue({tagName:undefined})
+  },[visible])
+
+  function submit(){
+    validateFields((error,values)=>{
+      if(!error){
+        onOk(values);
+      }
+    })
+  }
+  const layout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 18 },
+  };
+  return(
+    <Modal 
+      title={"新增标签"}
+      closable={false}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={submit}
+      cancelText="取消"
+      okText="确定"
+      width="400px"
+      centered
+    >
+      <Form {...layout}>
+        <Form.Item label="标签名">
+          {getFieldDecorator("tagName",{
+            rules:[{required:true,message:"请输入标签名"}]
+          })(
+            <Input placeholder="请输入标签名" width="200px" autoComplete="off" />
+          )}
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+  
+}
+export default Form.create()(forwardRef(AddTag));

src/forge/Source/Index.scss

@@ -21,6 +21,7 @@
   }
   .bodycontent{
     padding:0px 20px;
+    min-height: 500px;
     & > ul.bodycontentul > li{
       display: flex;
       border-bottom: 1px solid #eee;
@@ -40,6 +41,16 @@
       .infoname{
         font-size: 16px;
       }
+      .privateTip{
+        display: block;
+        font-size: 12px;
+        margin-left: 10px;
+        background-color: orange;
+        height: 18px;
+        line-height: 18px;
+        padding:0px 3px;
+        color: #fff;
+      }
       .infos{
         & > span{
           margin-right: 20px;
@@ -74,3 +85,25 @@
     }
   }
 }
+.versionTable{
+  .currentTip{
+    display: block;
+    padding:0px 3px;
+    border-radius: 2px;
+    border:1px solid #68c7ec;
+    font-size: 12px;
+    color: #68c7ec;
+    height: 18px;
+    line-height: 18px;
+    margin-left: 5px;
+  }
+  .ant-table-body{
+    margin:0px!important;
+    thead{
+      background-color: #eee;
+    }
+    thead >tr >th,tbody > tr > td{
+      padding:4px 5px!important;
+    }
+  }
+}

src/forge/Source/Upload.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { Upload, Button } from 'antd';
+import { appendFileSizeToUploadFileAll } from 'educoder';
+
+import axios from 'axios';
+function Uploads({ className , size , actionUrl,fileList,showNotification , load}) {
+  const [ files , setFiles ] = useState(undefined);
+
+  useEffect(()=>{
+    if(fileList){
+      init();
+    }
+  },[fileList]);
+
+  function init(){
+    let f = appendFileSizeToUploadFileAll(fileList);
+    setFiles(f);
+  }
+  function onAttachmentRemove(file){
+    if (!file.percent || file.percent === 100) {
+      deleteAttachment(file);
+      return false;
+    }
+  }
+  function deleteAttachment(file){
+    let id = file.response && file.response.data && file.response.data.id;
+    const url = actionUrl + `/busiAttachments/${id}`;
+    axios.delete(url).then((response) => {
+      if (response.data) {
+        if (response.data.code === "1") {
+          let nf = files.filter(item=>item.response.data.id !== id);
+          setFiles(nf);
+          fileIdList(nf);
+        } else {
+          showNotification(response.data.message)
+        }
+      }
+    }).catch(function (error) {
+      console.log(error);
+    });
+  }
+
+
+  function handleChange (info) {
+    if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
+      let fileList = info.fileList;
+      let len = info.fileList && info.fileList.length;
+      setFiles(appendFileSizeToUploadFileAll([fileList[len-1]]));
+      fileIdList(fileList[len-1]);
+    }
+  }
+
+  function fileIdList (fileList) {
+    let data = fileList.response && fileList.response.data;
+    fileList && load && load(data && data.id,data && data.fileName);
+  }
+
+  function beforeUpload(file){
+    const isLt100M = file.size / 1024 / 1024 < size;
+    if (!isLt100M) {
+      showNotification(`文件大小必须小于${size}MB!`);
+    }
+    return isLt100M;
+  }
+
+  const upload = {
+    name: 'file',
+    fileList: files,
+    action: actionUrl+`/busiAttachments/upload`,
+    onChange:handleChange,
+    onRemove:onAttachmentRemove,
+    beforeUpload:beforeUpload,
+    maxCount:1
+  };
+  return (
+    <Upload {...upload} className={className}>
+      <Button type={"default"}>上传文件</Button>
+      <span className="ml10 color-grey-9">(你可以上传小于<span className="color-red">{size}MB</span>的文件)</span>
+    </Upload>
+  )
+}
+export default Uploads;

src/forge/Source/UploadSource.jsx

@@ -1,22 +1,150 @@
-import React from 'react';
+import React , { forwardRef, useEffect, useState } from 'react';
-import { Modal } from 'antd';
+import { Modal , Form , Checkbox , Input , Table } from 'antd';
+import Upload from './Upload';
+import { AlignCenter } from '../Component/layout';
+import axios from 'axios';
+const { TextArea } = Input;
 
+const https = 'https://testfiles.trustie.net';
+function UploadSource({ form , visible , onCancel , onOk , showNotification , attachments , id ,owner,projectsId}){
+  const [ tableData , setTableData ] = useState(undefined);
+  const [ fileId , setFilesId ] = useState(undefined);
+  const [ fileName , setFileName ] = useState(undefined);
+  const { getFieldDecorator, validateFields , setFieldsValue } = form;
 
-function UploadSource({ visible , onCancel , onOk }){
+  useEffect(()=>{
+    if(id && attachments){
+      setTableData(attachments);
+    }
+  },[id,attachments])
+  // 上传附件后得到的文件id数组
+  function UploadFunc(id,name){
+    setFilesId(id);
+    setFileName(name);
+  }
+
+  const columns = [
+    {
+      dataIndex:"fileName",
+      key:"fileName",
+      title:"资源名称",
+      width:"42%",
+      ellipsis:true,
+      render:(value,item,key)=>{
+        return <AlignCenter>
+          <div className="task-hide" style={{maxWidth:key===0 ? "240px":"100%"}}>{value}</div>
+          { key === 0 && <span className="currentTip">当前版本</span> }
+        </AlignCenter>
+      }
+    },
+    {
+      dataIndex:"downloads",
+      key:"downloads",
+      title:"下载数",
+      width:"14%",
+      className:"edu-txt-center"
+    },
+    {
+      dataIndex:"fileSizeString",
+      key:"fileSizeString",
+      title:"文件大小",
+      width:"16%",
+      className:"edu-txt-center"
+    },
+    {
+      dataIndex:"createdAt",
+      key:"createdAt",
+      title:"上传时间",
+    }
+  ]
+
+  // 确定
+  function submit(){
+    if(fileId){
+      validateFields((error,values)=>{
+        if(!error){
+          postInfo(values);
+        }
+      })
+    }else{
+      showNotification("请先上传文件！");
+    }
+  }
+
+  function postInfo(values){
+    const url = https+`/api/project/achievement/`;
+    if(id){
+      // 修改
+      axios.put(url,{
+        id,fileName,fileId:`${fileId}`,
+        remark:values.remark
+      }).then(result=>{
+        if(result && result.data){
+          onOk();
+        }
+      }).catch(error=>{})
+    }else{
+      // 上传
+      axios.post(url,{
+        fileId:`${fileId}`,
+        fileName,
+        login:owner,
+        projectId:projectsId,
+        ...values
+      }).then(result=>{
+        if(result && result.data){
+          onOk();
+        }
+      }).catch(error=>{})
+    }
+    
+  }
   return(
     <Modal 
-      title={"上传资源"}
+      title={id?"更新资源版本":"上传资源"}
       closable={false}
       visible={visible}
       onCancel={onCancel}
-      onOk={onOk}
+      onOk={submit}
       cancelText="取消"
       okText="确定"
       width="600px"
       centered
     >
-      <div></div>
+      <div>
+        <Form>
+          {id && <Table className="versionTable mb20" columns={columns} dataSource={tableData} pagination={false} size={"small"}/> }
+          <Form.Item style={{display:id?"none":"block"}}>
+            {getFieldDecorator("tagNames",{
+              rules:[]
+            })(
+              <Checkbox.Group>
+                <Checkbox value="软件版本">软件版本</Checkbox>
+                <Checkbox value="文档">文档</Checkbox>
+                <Checkbox value="代码">代码</Checkbox>
+                <Checkbox value="媒体">媒体</Checkbox>
+                <Checkbox value="论文">论文</Checkbox>
+                <Checkbox value="其它">其它</Checkbox>
+              </Checkbox.Group>
+            )}
+          </Form.Item>
+          <Upload 
+            className="commentStyle"
+            load={UploadFunc}
+            size={100}
+            showNotification={showNotification}
+            actionUrl= {https}
+          />
+          <Form.Item className="mt20">
+            {getFieldDecorator("remark",{
+              rules:[]
+            })(
+              <TextArea rows={4} placeholder="请输入资源描述" />
+            )}
+          </Form.Item>
+        </Form>
+      </div>
     </Modal>
   )
 }
-export default UploadSource;
+export default Form.create()(forwardRef(UploadSource));;