forked from Gitlink/forgeplus-react
241 lines
8.4 KiB
JavaScript
241 lines
8.4 KiB
JavaScript
import React,{ useState , useEffect } from 'react';
|
||
import { Breadcrumb, Button, Form, Icon, Input, message, Select, Upload } from 'antd';
|
||
import { getZoneUrl } from 'educoder';
|
||
import '../index.scss';
|
||
import { Link } from 'react-router-dom';
|
||
import { getTypeByFileId, getSourceZoneList, addResource, getSourceDetailByAu, updateMyResource } from '../api';
|
||
|
||
function SourceCreate(props){
|
||
const {history, id, role} = props;
|
||
const { getFieldDecorator, validateFields , setFieldsValue, setFields } = props.form;
|
||
const { deptId, sourceid} = props.match.params;
|
||
const pathname = props.location.pathname;
|
||
const [ zoneList , setZoneList ] = useState(undefined);
|
||
const [files, setFiles] = useState([]);
|
||
const [loadingBut, setLoadingBut] = useState(false);
|
||
const [isEdit, setIsEdit] = useState(false);
|
||
|
||
const layout = {
|
||
labelCol: { span: 2 },
|
||
wrapperCol: { span: 14 },
|
||
};
|
||
|
||
useEffect(()=>{
|
||
if(role && role.role === "None"){
|
||
history.push(`/zone/${deptId}`);
|
||
}
|
||
}, [role])
|
||
|
||
useEffect(()=>{
|
||
id && getZoneList();
|
||
},[id])
|
||
|
||
useEffect(()=>{
|
||
if(pathname){
|
||
if(pathname.endsWith("/edit")){
|
||
setIsEdit(true);
|
||
getSourceDetail();
|
||
}else{
|
||
setIsEdit(false);
|
||
}
|
||
}
|
||
},[pathname])
|
||
|
||
function getSourceDetail() {
|
||
getSourceDetailByAu(sourceid).then(res=>{
|
||
if(res && res.data){
|
||
const {name, domainId, summary, fileList} = res.data.data;
|
||
const fileMap = fileList.map(item=>{
|
||
const {fileId, fileSizeInfo, fileOriginName, zoneResourceType: {id, name}} = item;
|
||
return {
|
||
uid: fileId,
|
||
status: "done",
|
||
response: {fileId: fileId, fileSize: fileSizeInfo},
|
||
name: fileOriginName,
|
||
zoneResourceType:{id, name}
|
||
}
|
||
})
|
||
setFiles(fileMap);
|
||
setFieldsValue({
|
||
name,
|
||
domainId,
|
||
summary,
|
||
fileList: fileMap
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
function getZoneList(){
|
||
getSourceZoneList(id).then(response=>{
|
||
if(response && response.data){
|
||
setZoneList(response.data.rows);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
// 新建/编辑资源
|
||
function submit(e){
|
||
e.preventDefault();
|
||
validateFields((err, fieldsValue)=>{
|
||
if(err || !files.length){
|
||
!files.length && setFields({fileList: {value:undefined,errors:[new Error('请上传资源附件！')]}});
|
||
return;
|
||
}
|
||
const fileIds = files.map(item=>{return item.response.fileId}).toString();
|
||
const params = {
|
||
...fieldsValue,
|
||
zoneId: id,
|
||
fileIds
|
||
}
|
||
delete params.fileList;
|
||
if(isEdit){
|
||
delete params.zoneId;
|
||
params.id= parseInt(sourceid, 10);
|
||
updateMyResource(params).then((res)=>{
|
||
const {data:{code, msg}} = res;
|
||
if(code === 200){
|
||
message.success("提交成功");
|
||
history.push(`/zone/${deptId}/source/${sourceid}`);
|
||
}else{
|
||
message.error(msg || '提交失败，请联系管理员！')
|
||
}
|
||
})
|
||
return;
|
||
}
|
||
addResource(params).then((res)=>{
|
||
const {data:{code, msg, data}} = res;
|
||
if(code === 200){
|
||
message.success("提交成功");
|
||
history.push(`/zone/${deptId}/source/${data.id}`);
|
||
}else{
|
||
message.error(msg || '提交失败，请联系管理员！')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
function beforeUpload(file){
|
||
if (file.size > 200 * 1024 * 1024) {
|
||
message.error('单个文件限制200MB以内');
|
||
return false;
|
||
}
|
||
if(files){
|
||
const sameNameFIles = files.filter(item=>item.name === file.name);
|
||
if(sameNameFIles.length >= 1){
|
||
message.error("请不要重复上传同名文件!");
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
async function onChange({file, fileList: fileListByUpload}){
|
||
if(file && (file.status === "done" || file.status === 'uploading' || file.status === 'removed')){
|
||
setLoadingBut(true);
|
||
const fileList = [...files];
|
||
const index = fileList.findIndex(item=>item.uid === file.uid);
|
||
if(index !== -1){
|
||
fileList[index] = file;
|
||
}else{
|
||
fileList.push(file);
|
||
}
|
||
setFiles(fileList);
|
||
if(!file.response) return
|
||
if(file.response.code !== 200){
|
||
message.error(file.response.msg || '上传失败，请联系管理员！')
|
||
fileList.pop()
|
||
setFiles([...fileList]);
|
||
setLoadingBut(false);
|
||
}else{
|
||
// 获取此附件的资源类别
|
||
await getTypeByFileId(id, file.response.fileId).then((res)=>{
|
||
const {data:{code, data: data1, msg}} = res;
|
||
if(code !== 200){
|
||
return message.error(msg);
|
||
}
|
||
fileList[fileList.length-1].zoneResourceType = {
|
||
id: data1.id,
|
||
name: data1.name
|
||
}
|
||
})
|
||
setFiles([...fileList]);
|
||
setLoadingBut(false);
|
||
}
|
||
}
|
||
}
|
||
|
||
function deleteFile(uid){
|
||
const fileList = files.filter(item=>item.uid !== uid);
|
||
setFiles(fileList);
|
||
}
|
||
|
||
return(
|
||
<div className='boxmain pt30 newsCreateBox pb100 sourceCreateBox'>
|
||
<Breadcrumb separator=">">
|
||
<Breadcrumb.Item><Link className="primaryColor" to={`/zone/${deptId}/source`}>资源列表</Link></Breadcrumb.Item>
|
||
<Breadcrumb.Item>{isEdit ? '编辑' : '新建'}资源</Breadcrumb.Item>
|
||
</Breadcrumb>
|
||
<div className='formBox'>
|
||
<Form {...layout} onSubmit={submit}>
|
||
<Form.Item label="资源名称">
|
||
{getFieldDecorator("name", {
|
||
rules:[{ required:true,message:"请输入资源名称！" },
|
||
{type: 'string', max: 200, message: "最大长度200"}]
|
||
})(
|
||
<Input placeholder="请输入资源名称" maxLength={ 200 } width="220px"/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="资源领域">
|
||
{getFieldDecorator("domainId", {
|
||
rules:[{ required:true,message:"请选择资源领域！" }]
|
||
})(
|
||
<Select placeholder="请选择资源领域">
|
||
{zoneList && zoneList.map(item =>{
|
||
return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
|
||
})}
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="资源简介">
|
||
{getFieldDecorator("summary", {
|
||
rules:[{ required:true,message:"请输入资源简介！" },
|
||
{type: 'string', max: 300, message: "最大长度300"}]
|
||
})(
|
||
<Input.TextArea placeholder="请输入资源简介" maxLength={ 200 } width="220px"/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="资源附件" extra={ <span >可上传多个资源文件，单个文件限制200MB以内</span> }>
|
||
{getFieldDecorator("fileList", {
|
||
rules:[{ required:true,message:"请上传资源附件！" }]
|
||
})(
|
||
<Upload action={getZoneUrl(`/api/file/common/upload?type=resource`)} showUploadList={false} beforeUpload={beforeUpload} onChange={onChange} withCredentials={true} headers={{Authorization: "3e33a5b0a35824f93666b1084488f0bd5f010025"}}>
|
||
<Button className='hoverThemeColorBut'>
|
||
<Icon type="upload" />单击上传
|
||
</Button>
|
||
</Upload>
|
||
)}
|
||
</Form.Item>
|
||
{/* 附件展示 */}
|
||
<div className="sourceFilesBox">
|
||
{files && files.map((item, index)=>{
|
||
const {uid, status, response, name, zoneResourceType} = item;
|
||
return <div key={index} className="sourseFileItem mb15">
|
||
{status === "uploading" ? <Icon type="loading" className='mr10'/> : <Icon type="file" className='mr10'/>}
|
||
<span className="fileName task-hide">{name}</span>
|
||
<span className='mr20 ml20' style={{width: '100px'}}>{response && response.fileSize}</span>
|
||
<span className='mr50'>{zoneResourceType && zoneResourceType.name}</span>
|
||
<Icon type="delete" onClick={()=>{deleteFile(uid)}}/>
|
||
</div>
|
||
})}
|
||
</div>
|
||
<Form.Item wrapperCol={{ offset: 2 }}>
|
||
<Button className='mr20 themeBut' onClick={()=>{history.go(-1)}}>取消</Button>
|
||
<Button type="primary" htmlType="submit" loading={loadingBut} className='themeBut'>提交</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
export default Form.create()(SourceCreate); |