forgeplus-react/src/forge/Wiki/EditWiki.jsx

import React, { useEffect, useCallback, useState } from 'react';
import { Button, Checkbox, Form, Icon, Radio, Input, message } from 'antd';
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import DelModal from './components/ModalFun';
import { weekModal, monthModal } from './components/config';
import { getWiki, wikiPages, addWiki, updateWiki } from './api';
import './Index.scss';


export default Form.create()(({ form, history, showNotification, projectDetail, match, project }) => {
  // const permission = projectDetail && projectDetail.permission !== "Reporter";
  const permission = projectDetail && projectDetail.permission && projectDetail.permission !== "Reporter";

  const { getFieldDecorator, validateFields, setFieldsValue } = form;
  const [fileArrInit, setFileArrInit] = useState(null);
  let projectsId = match.params.projectsId;
  let owner = match.params.owner;

  let wikiName = history.location.pathname.split('/').pop();
  if (wikiName === 'add') {
    wikiName = '';
  }

  const [content, setContent] = useState(undefined);
  const [modal, setModal] = useState(false);
  const [modalType, setModalType] = useState();


  useEffect(() => {
    wikiName && project && getWiki({
      owner,
      repo: projectsId,
      pagename: wikiName,
      projectId: project.id
    }).then(res => {
      if (res && res.data) {
        setContent(res.data.md_content);
        setFieldsValue({
          name: res.data.name,
          content: res.data.md_content,
        });
      }
    });
  }, [owner, wikiName]);

  // 加载wiki列表
  useEffect(() => {
    project && wikiPages({
      owner: owner,
      repo: projectsId,
      projectId: project.id
    }).then(res => {
      if (res && res.message === "200" && Array.isArray(res.data)) {
        setFileArrInit(res.data);
      } else {
        setFileArrInit([]);
      }
    });
  }, [project]);

  const helper = useCallback(
    (label, name, rules, widget, initialValue, rightComponent) => (
      <Form.Item label={label} className="mb0">
        {getFieldDecorator(name, { rules, initialValue, validateFirst: true, })(widget)}
        {rightComponent}
      </Form.Item>
    ), []);


  function onContentChange(value) {
    setContent(value);
    setFieldsValue({
      content: value
    });
  };

  // 保存wiki文件，包括新增和修改
  function saveFile() {
    validateFields((err, values) => {
      if (!err) {
        let regEn = /[\[\]`\/:*?''<>|%-+_]/g;
        if (regEn.test(values.name)) {
          message.error('文件名不能有特殊字符');
          return;
        }
        if (wikiName) {
          updateWiki({
            owner,
            repo: projectsId,
            projectId: project.id,
            pagename: wikiName,
            ...values,
            commit_message: '',
          }).then(res => dealRes(res));
        } else {
          if (Array.isArray(fileArrInit)) {
            for (const item of fileArrInit) {
              if (item.name === values.name) {
                message.error('不能与已有文件标题相同');
                return false;
              }
            }
          }
          addWiki({
            owner,
            repo: projectsId,
            projectId: project.id,
            pagename: values.name,
            ...values,
            commit_message: '',
          }).then(res => dealRes(res));
        }
      }
    })
  }

  function dealRes(res) {
    if (res && res.message === "200") {
      showNotification("操作成功");
      goBack();
    } else if (res && res.message === "500") {
      message.error('请检查格式是否正确或文件名是否重复');
    } else {
      showNotification(res.message || "操作失败");
    }
  }

  function goBack() {
    history.push(`/${owner}/${projectsId}/wiki`);
  }

  function changeModal(e) {
    setModal(e.target.checked);
    if (!e.target.checked) {
      setModalType();
    }
  }

  function changeModalType(e) {
    let value = e.target.value;
    if (!content) {
      setModalContent(value);
      return;
    }
    DelModal({
      title: '添加模版',
      contentTitle: `您确定要添加“${value}”模板吗`,
      content: `此操作会将“${value}”模板替换编辑栏内所有内容，请确认以防文件的丢失`,
      okText: '确认添加',
      onOk: () => {
        setModalType(value);
        setModal(true);
        setModalContent(value);
      }
    });
  }

  function setModalContent(value) {
    if (value === '周报') {
      setContent(weekModal);
      setFieldsValue({
        content: weekModal
      });
    } else if (value === '月报') {
      setContent(monthModal);
      setFieldsValue({
        content: monthModal
      });
    }
  }


  return (
    <div className="wiki-main">
      <div className="wiki-head">
        <span className="head-title"><span className="back-wiki" onClick={goBack}>Wiki</span> <Icon type="right" /> 编辑页面</span>
      </div>

      <div >
        <h4 className="mt20 mb0">标题</h4>
        {helper(
          "",
          "name",
          [
            { required: true, message: "请输入标题" },
            // { pattern: /[^`\[\]\/:*?''<>|%-+_]/g, message: '不允许部分特殊字符' }
          ],
          <Input
            placeholder={"请输入标题"}
            className="contact-input"
            maxLength={50}
          />
        )}

        <Form.Item className="mb0">
          <MDEditor
            placeholder={"请输入wiki内容"}
            height={500}
            mdID={"order-new-description"}
            initValue={content}
            onChange={onContentChange}
            className="mt20"
          ></MDEditor>
          {getFieldDecorator('content', {
            rules: [{ required: true, message: "请输入wiki内容" }],
            validateFirst: true
          })(<Input style={{ display: 'none' }} />)}
        </Form.Item>

        <Checkbox checked={modal} onChange={changeModal}>添加模版</Checkbox>

        <Radio.Group onChange={changeModalType} value={modalType}>
          <Radio value='周报'>周报</Radio>
          <Radio value='月报'>月报</Radio>
        </Radio.Group>

      </div>

      {permission && <Button className="mt25" type="primary" onClick={saveFile}>保存</Button>}
    </div>

  )
})