forgeplus-react/src/forge/Information/Pages/sourceCreate.jsx

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} = 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(()=>{
    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/self`);
          }else{
            message.error(msg || '编辑失败，请联系管理员！')
          }
        })
        return;
      }
      addResource(params).then((res)=>{
        const {data:{code, msg}} = res;
        if(code === 200){
          message.success("新增成功");
          history.push(`/zone/${deptId}/source/self`);
        }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:"请输入资源名称！" }]
            })(
              <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:"请输入资源简介！" }]
            })(
              <Input.TextArea placeholder="请输入资源简介" maxLength={ 200 } width="220px"/>
            )}
          </Form.Item>
          <Form.Item label="资源附件">
            {getFieldDecorator("fileList", {
              rules:[{ required:true,message:"请上传资源附件！" }]
            })(
              <Upload action={getZoneUrl(`/api/file/common/upload?type=resource`)} showUploadList={false} beforeUpload={beforeUpload} onChange={onChange} withCredentials={true}>
                <Button>
                  <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' onClick={()=>{history.go(-1)}}>取消</Button>
            <Button type="primary" htmlType="submit" loading={loadingBut}>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Form.create()(SourceCreate);