Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

资源库模块+合并请求分页

This commit is contained in:
caishi 2021-04-12 17:58:46 +08:00
parent 690def741c
commit f5df464d90
7 changed files with 698 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/forge/Main/Detail.js
View File

@ -104,6 +104,10 @@ const TrendsIndex = Loadable({
loading: Loading,
})
const Source = Loadable({
loader: () => import('../Source/Index'),
loading: Loading,
})
const DevAbout = Loadable({
loader: () => import('../About/Index'),
loading: Loading,
@ -133,6 +137,8 @@ function checkPathname(projectsId,owner,pathname){
name="setting"
}else if(url.indexOf(`/devops`)>-1){
name="devops"
}else if(url.indexOf(`/source`)>-1){
name="source"
}
}
return name;
@ -544,6 +550,13 @@ class Detail extends Component {
</Link>
</li>
}
<li className={pathname==="source" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/source`, state }}>
<i className={pathname==="source" ? "iconfont icon-ziyuanpaihanghetuijian color-blue mr5 font-14":"iconfont icon-ziyuanpaihanghetuijian color-white font-14 mr5"}></i>
<span>资源库</span>
{projectDetail && projectDetail.source_count ? <span className="num">{projectDetail.source_count}</span> :""}
</Link>
</li>
{/* {
platform &&
<li className={pathname==="devops" ? "active" : ""}>
@ -590,6 +603,12 @@ class Detail extends Component {
:
<Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">
<Switch {...this.props}>
{/* 资源 */}
<Route path="/projects/:owner/:projectsId/source"
render={
() => (<Source {...this.props} {...this.state} {...common} />)
}
></Route>
{/* 主页 */}
<Route path="/projects/:owner/:projectsId/about"
render={

6
src/forge/Merge/merge.js
View File

@ -256,13 +256,13 @@ class merge extends Component {
const Paginations = (
<React.Fragment>
{search_count > limit ? (
{search_count > select_params.limit ? (
<div className="mt30 mb50 edu-txt-center">
<Pagination
simple
defaultCurrent={page}
defaultCurrent={select_params.page}
total={search_count}
pageSize={limit}
pageSize={select_params.limit}
onChange={this.ChangePage}
></Pagination>
</div>

47
src/forge/Source/AddTag.jsx Normal file
View File

@ -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));

288
src/forge/Source/Index.jsx Normal file
View File

@ -0,0 +1,288 @@
import React, { useEffect, useState } from 'react';
import './Index.scss';
import { AlignCenter, Blueback , FlexAJ } from '../Component/layout';
import { Dropdown, Input , Menu , Pagination, Spin , Popconfirm, Button } from 'antd';
import { Link } from 'react-router-dom';
import UploadSource from './UploadSource';
import AddTag from './AddTag';
import { getImageUrl } from 'educoder';
import Nodata from '../Nodata';
import axios from 'axios';
const { Search } = Input;
const sort = [
"按上传时间排序",
"按下载次数排序",
"按引用排序"
]
const limit = 15;
const https = 'https://testfiles.trustie.net';
function Index(props){
const [ sortValue , setSortValue ] = useState(0);
const [ page , setPage ] = useState(1);
const [ total , setTotal ] = useState(0);
const [ search , setSearch ] = useState(undefined);
const [ data , setData ] = useState(undefined);
const [ isSpin , setIsSpin ] = useState(true);
const [ error , setError ] = useState(false);
const [ attachments , setAttachments ] = useState(undefined);
const [ id , setId ] = useState(undefined);
const [ visible , setVisible ] = useState(false);
const [ addVisible , setAddVisible ] = useState(false);
const repo_id = props.projectDetail && props.projectDetail.repo_id;
const owner = props.match.params.owner;
const current_user = props.current_user;
useEffect(()=>{
if(owner && repo_id){
setIsSpin(true);
getData();
}
},[repo_id,owner,search,sortValue,page])
function getData(){
const url = https +`/api/project/achievement/`;
axios.get(url,{
params:{
projectId:repo_id,
curPage:page,
pageSize:limit,
name:search,
sort:sortValue+1,
}
}).then(result=>{
if(result && result.data){
setData(result.data.data.rows);
setTotal(result.data.data.total);
setIsSpin(false);
setError(false);
}
}).catch(error=>{setIsSpin(false);setError(true);})
}
// 搜索
function onSearch(value){
setSearch(value);
}
// 切换排序方式
function changeSort(e,index){
setSortValue(index);
}
const menu=(
<Menu>
{
sort && sort.map((item,key)=>{
return(
<Menu.Item onClick={(e)=>changeSort(e,key)} value={key} className={key=== sortValue ?"color-blue":""}>{item}</Menu.Item>
)
})
}
</Menu>
)
function listmenu(id,attachments,isPublic){
return(
<Menu>
<Menu.Item onClick={()=>{setId(id);setVisible(true);setAttachments(attachments)}}>更新版本</Menu.Item>
<Menu.Item onClick={()=>changeStatus(id,isPublic===1?0:1)}>{isPublic === 1 ? "设为私有":"设为公开"}</Menu.Item>
<Menu.Item onClick={()=>deleteSourceFunc(id)}>删除资源</Menu.Item>
</Menu>
)
}
// 更细私有状态
function changeStatus(id,isPublic){
const url = https+`/api/project/achievement/updateStatus`;
axios.put(url,{
id,status:isPublic
}).then(result=>{
if(result && result.data){
props.showNotification(`资源${isPublic === 1 ? "设为公开":"设为私有"}成功！`);
setIsSpin(true);
getData();
}
}).catch({})
}
// 删除资源方法
function deleteSourceFunc(id){
props.confirm({
content: "是否确认删除所选资源文件？",
onOk: () => {
const url = https + `/api/project/achievement/${id}`;
axios.delete(url).then(result=>{
if(result && result.data && result.data.code === "1"){
props.showNotification("资源删除成功");
setIsSpin(true);
getData();
}
})
}
})
}
// 上传资源成功
function onOk(){
setVisible(false);
setIsSpin(true);
getData();
}
// 确认删除标签
function removeTagFunc(id,tag){
const url = https + `/api/project/achievement/deleteTag`;
axios.delete(url,{
params:{id,tagName:tag}
}).then(result=>{
if(result && result.data){
props.showNotification("标签删除成功");
setIsSpin(true);
getData();
}
}).then(error=>{})
}
function addPanel(id){
setAddVisible(true);
setId(id);
}
function onCancelAdd(){
setId(undefined);
setAddVisible(false);
}
// 添加标签
function sureAddTag(values){
const url = https+`/api/project/achievement/addTag?id=`+id+`&tagName=`+values.tagName;
axios.put(url).then(result=>{
if(result){
setId(undefined);
setAddVisible(false);
setIsSpin(true);
getData();
}
})
}
return(
<div className="sourcePanel">
<AddTag
visible={addVisible}
onCancel={onCancelAdd}
onOk={sureAddTag}
/>
<UploadSource
visible={visible}
onCancel={()=>setVisible(false)}
onOk={onOk}
showNotification={props.showNotification}
owner={owner}
projectsId={repo_id}
id={id}
attachments={attachments}
/>
<div className="headtitle">
<FlexAJ>
<span className="font-18">资源库(18)</span>
{ current_user && current_user.login && (props.projectDetail && props.projectDetail.permission) ?
<Blueback onClick={()=>{setId(undefined);setVisible(true);}}>上传资源</Blueback>:""
}
</FlexAJ>
</div>
<FlexAJ className="subHeadtitle">
<Search
placeholder="在项目内搜索资源"
onSearch={onSearch}
allowClear
enterButton="搜索"
width="220px"
/>
<Dropdown overlay={menu} placement="bottomRight">
<span className="color-grey-9">{sort[sortValue]}<i className="iconfont icon-sanjiaoxing-down font-16 color-grey-9 ml3"></i></span>
</Dropdown>
</FlexAJ>
<Spin spinning={isSpin}>
<div className="bodycontent">
{
data && data.length> 0 &&
<ul className="bodycontentul">
{
data.map((item,key)=>{
return(
<li>
<Link to= {`/users/${item.login}`} className="infoImg"><img src={getImageUrl(`${item.imageUrl}`)} alt="" /></Link>
<div style={{flex:'1',width:"0"}}>
<FlexAJ>
<AlignCenter>
<a href={https+`/busiAttachments/download/${item.attachId}`} download className="infoname">{item.fileName}</a>
<a href={https + `/busiAttachments/view/${item.attachId}`}><i className="iconfont icon-shenqinggongkai font-15 ml10 color-grey-9"></i></a>
{item.isPublic === 0 && <span className="privateTip">私有</span>}
</AlignCenter>
{ current_user && current_user.login &&
<Dropdown overlay={()=>listmenu(item.id,item.attachments,item.isPublic)} placement={'bottomRight'}>
<i className="iconfont icon-gengduo1 color-grey-6"></i>
</Dropdown>
}
</FlexAJ>
<p className="infos">
<span>上传时间：<span>{item.uploadTime}</span></span>
<span>文件大小：<span>{item.fileSize}</span></span>
<span>下载：<span>{item.download}</span></span>
</p>
<p className="infodesc task-hide-2">{item.remark}</p>
<div className="infotag">
{
item.tags && item.tags.length>0 && item.tags.map((i,k)=>{
return(
<span>{i}
{
current_user && (current_user.login === item.login) ?
<Popconfirm title="确定要删除当前标签？" onConfirm={()=>removeTagFunc(item.id,i)} okText="是" cancelText="否">
<i className="iconfont icon-guanbi font-12 ml2"></i>
</Popconfirm>:""
}
</span>
)
})
}
{
current_user && (current_user.login === item.login) &&
<a className="color-blue font-12" onClick={()=>addPanel(item.id)} style={{height:"20px",lineHeight:"20px"}}>+新增标签</a>
}
</div>
</div>
</li>
)
})
}
</ul>
}
{
((data && data.length === 0) || error) && <Nodata _html="暂无数据"/>
}
{
total > limit &&
<div className="pt20 pb20 edu-txt-center">
<Pagination
simple
current={page}
pageSize={limit}
total={total}
onChange={(p)=>{setPage(p)}}
/>
</div>
}
</div>
</Spin>
</div>
)
}
export default Index;

109
src/forge/Source/Index.scss Normal file
View File

@ -0,0 +1,109 @@
.sourcePanel{
width: 1200px;
margin: 20px auto;
background: #fff;
border-radius: 2px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
.headtitle{
padding:15px 20px;
border-bottom: 1px solid #eee;
}
.subHeadtitle{
padding:15px 20px;
border-bottom: 1px solid #eee;
.ant-input-group-wrapper{
width:320px;
.ant-btn.ant-input-search-button{
margin: 0px;
margin-top: -1px;
}
}
}
.bodycontent{
padding:0px 20px;
min-height: 500px;
& > ul.bodycontentul > li{
display: flex;
border-bottom: 1px solid #eee;
padding:20px 0px;
align-items: flex-start;
&:last-child{
border-bottom: none;
}
.infoImg{
img{
width: 50px;
height: 50px;
border-radius: 50%;
}
margin-right: 15px;
}
.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;
color: #999;
& >span{
color: #666;
}
}
}
.infodesc{
color: #666;
line-height: 20px;
margin:5px 0px!important;
}
.infotag{
display: flex;
flex-wrap: wrap;
span{
display: block;
padding:0px 4px;
height: 20px;
line-height: 20px;
font-size: 12px;
margin-right: 10px;
border: 1px solid #f8df8c;
background: #fffce6;
color: #0d90c3;
border-radius: 2px;
cursor: pointer;
}
}
}
}
}
.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;
}
}
}

82
src/forge/Source/Upload.jsx Normal file
View File

@ -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;

150
src/forge/Source/UploadSource.jsx Normal file
View File

@ -0,0 +1,150 @@
import React , { forwardRef, useEffect, useState } from 'react';
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;
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={id?"更新资源版本":"上传资源"}
closable={false}
visible={visible}
onCancel={onCancel}
onOk={submit}
cancelText="取消"
okText="确定"
width="600px"
centered
>
<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 Form.create()(forwardRef(UploadSource));;