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

import React,{ useState , useEffect } from 'react';
import { Breadcrumb, Button, Form, Input, message, Select } from 'antd';
import { getZoneUrl } from 'educoder';
import MdEditor from '../../../modules/tpm/challengesnew/tpm-md-editor';
import RichEditor from '../../Component/RichEditor';
import UploadImage from '../../Team/Component/UploadImage';
import { tempConfig } from '../tempInfo';
import '../index.scss';
import { Base64 } from 'js-base64';
import { addNewsByDirId, getDirListById, getNewsDetailByAu, updateDoc } from '../api';
import { httpUrl } from '../fetch';

function NewsCreate(props){
  const {history, id} = props;
  const temp = props.temp;
  const { getFieldDecorator, validateFields , setFieldsValue, setFields } = props.form;
  const { deptId, id: newsId } = props.match.params;
  const pathname = props.location.pathname;
  const [type, setType] = useState(new URLSearchParams(props.location.search.substring(1)).get('type'));
  const [value, setValue] = useState(undefined);
  const [imageUrl, setImageUrl] = useState(undefined)
  const [dirList, setDirList] = useState(undefined);
  const [loading, setLoading] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 14 },
  };

  useEffect(()=>{
    id && getDircList();
  },[id])

  useEffect(()=>{
    if(pathname){
      if(pathname.endsWith("/edit")){
        setIsEdit(true);
        getNewsDetail();
      }else{
        setIsEdit(false);
      }
    }
  },[pathname])

  function getDircList(){
    getDirListById(id).then(res=>{
      if(res){
        setDirList(res.data.rows);
      }
    })
  }

  function getNewsDetail() {
    getNewsDetailByAu(newsId).then(res=>{
      if(res && res.data){
        const {name, summary, cmsDir, content, headImg, editorType} = res.data.data;
        setType(editorType === "rich_editor" ? 'richEditor' : 'mdEditor')
        setFieldsValue({
          name,
          summary,
          dirId: cmsDir && cmsDir.id,
          content: Base64.decode(content),
          headImg
        });
        setImageUrl(headImg);
        setValue(Base64.decode(content));
      }
    })
  }

  // 新建文章
  function submit(e){
    e.preventDefault();
    validateFields((err, fieldsValue)=>{
      const hasContent = type === "richEditor" && fieldsValue.content === "<p><br></p>"
      if(err || hasContent){
        hasContent && setFields({content: {value:fieldsValue.content,errors:[new Error('请输入内容！')]}});
        return;
      }
      setLoading(true);
      const params = {
        ...fieldsValue,
        editorType: type === "richEditor" ? "rich_editor" : "markdown_editor",
        headImg: imageUrl,
        content: Base64.encode(fieldsValue.content)
      }
      if(isEdit){
        delete params.editorType;
        return updateDoc(newsId, params).then(res=>{
          const {data:{code, msg}} = res;
          setLoading(false);
          if(code === 200){
            message.success("更新成功");
            history.push(`/zone/${deptId}/news/self`);
          }else{
            message.error(msg || '更新失败，请联系管理员！')
          }
        })
      }
      addNewsByDirId(fieldsValue.dirId, params).then(res=>{
        const {data:{code, msg}} = res;
        setLoading(false);
        if(code === 200){
          message.success("新增成功");
          history.push(`/zone/${deptId}/news/self`);
        }else{
          message.error(msg || '新增失败，请联系管理员！')
        }
      })
    })
  }

  return(
    <div className='boxmain pt30 newsCreateBox pb100'>
      <Breadcrumb separator=">">
        <Breadcrumb.Item href={`/zone/${deptId}/news`}>{tempConfig[temp].mainTitle}</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"},
              {pattern: /^[^<>[\]/\\]+$/, message: "不能输入特殊字符：< > [ ] / \\"}]
            })(
              <Input placeholder="请输入文章标题" maxLength={ 200 } width="220px"/>
            )}
          </Form.Item>
          <Form.Item label="概览">
            {getFieldDecorator("summary", {
              rules:[{ required:true,message:"请输入概览！" },
              {type: 'string', max: 200, message: "最大长度200"}]
            })(
              <Input.TextArea placeholder="请输入概览" maxLength={ 200 } width="220px"/>
            )}
          </Form.Item>
          <Form.Item label="栏目">
            {getFieldDecorator("dirId", {
              rules:[{ required:true,message:"请选择文章所属栏目！" }]
            })(
              <Select placeholder="请选择文章所属栏目">
                {dirList && dirList.map(item=>{
                  return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                })}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="内容" wrapperCol={{span: 21}}>
            {getFieldDecorator("content",{
              rules:[{required:true,message:"请输入内容！"}],
            })(
              type === "richEditor" ? <RichEditor uploadUrl={`${httpUrl}/file/common/upload`} videoUploadUrl={`${httpUrl}/file/common/upload?type=cms`} setValue={(value)=>{setFieldsValue({"content": value})}}/> : <MdEditor
                placeholder={"请输入详细介绍"}
                height={500}
                mdID={"order-new-description"}
                initValue={value}
                onChange={(value)=>{setFieldsValue({"content": value})}}
                imageExpand={false}
              ></MdEditor>
            )}
          </Form.Item>
          <Form.Item label="首图" extra="建议图片比例，长：宽为3：2，上传jpg、jpeg、webp、png、svg、gif、bmp格式的图片">
            <UploadImage maxSize={ 5 } getImageUrl={ (url) => setImageUrl(url) } url={ imageUrl ? imageUrl : undefined} action={ getZoneUrl(`/api/cms/common/upload`) } />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Button className='mr20 themeBut' onClick={()=>{history.go(-1)}}>取消</Button>
            <Button type="primary" htmlType="submit" loading={loading} className='themeBut'>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Form.create()(NewsCreate);