app-base-web/src/pages/issue/IssueNews/IssueNewsEdit.js

web development common base package.

import React, { Suspense, lazy } from 'react';
import { Table, Form, Row, Col, DatePicker, Button, Input, message } from 'antd';

import File from '../../../library/file';
import Dic from '../../../library/dic';
import RadioGroup from '../../../library/radio-group';
import Moment from '../../../library/moment';
import api from '../../../library/util-axios';
import ReactUeditor from 'react-ueditor'

// 信息管理-资讯发布
const title = "资讯发布";
const url = "IssueNews/";
export default class FormEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...props.values
    };
    this.formRef = React.createRef();
  }
  onSave = (values) => {
    let me = this;
    values.id = this.state.id;
    api.post(url + "save", values).then(function (rs) {
      if (rs.success) {
        message.info(rs.msg);
        me.props.onSave(values);
      } else { message.error(rs.msg); }
    });
  }

  onChangeUeContent = (value) => {
    this.state.content = value;
  }
  onChangeUeImage = (e) => {
    return new Promise(function (resolve, reject) {
      let file = e.target.files[0]
      // 在这里将你的图片上传到服务器，在上传成功的回调中执行
      const formData = new FormData()
      formData.append('file', file)
      fetch("https://fastdfs.7ipr.com/ipr/fastdfs/upload", {
        method: "POST",
        body: formData,
      }).then(res => res.json()).then(function (response) {
        let url = response.data;
        resolve(url)
      });
    })
  }
  render() {
    return (
      <Form ref={this.formRef} className="form-edit" layout="vertical" onFinish={this.onSave}>
        <div className="form-title">
          <i> {title} - {this.state.id ? "编辑" : "录入"}</i>
          {this.state.id ? <span><Button className="btn-return" onClick={this.props.onEditReturn}><i className="iconfont icon-return"></i>返回</Button></span> : ""}
        </div>
        <div className="form-content" style={{ height: this.props.height }}>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="state"
                label="发布状态"
                initialValue={this.state.state}
              >
                <RadioGroup type="button" dic={{ app: "app", type: "发布状态" }} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={12}>
              <Form.Item
                name="type"
                label="类型"
                initialValue={this.state.type}
                rules={[{
                  required: true,
                  message: '请输入类型'
                }]} >
                <Dic params={{ app: "system", type: "newsType" }} />
              </Form.Item>
            </Col>
            <Col xs={12}>
              <Form.Item
                name="subType"
                label="子类型"
                initialValue={this.state.subType}>
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="title"
                label="标题"
                initialValue={this.state.title}
                rules={[{
                  required: true,
                  message: '请输入标题'
                }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="coverUrl"
                label="封面Url"
                valuePropName="fileList"
                initialValue={this.state.coverUrl}
              >
                <File onChange={(fileList) => { this.setState({ coverUrl: fileList }); }} serverPath={api.serverPath} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="summary"
                label="摘要"
                initialValue={this.state.summary}
              >
                <Input.TextArea />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                label="内容"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
              >
                <ReactUeditor
                  //https://www.npmjs.com/package/react-ueditor
                  ueditorPath="/static/ueditor"
                  config={{ zIndex: 900 }}
                  onChange={this.onChangeUeContent}
                  plugins={['uploadImage', 'insertCode']}
                  uploadImage={this.onChangeUeImage}
                  value={this.state.content}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={12}>
              <Form.Item
                name="newsTime"
                label="新闻时间"
                initialValue={Moment(this.state.newsTime)}>
                <DatePicker format="YYYY-MM-DD" />
              </Form.Item>
            </Col>
            <Col xs={12}>
              <Form.Item
                name="editor"
                label="责任编辑"
                initialValue={this.state.editor}>
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={12}>
              <Form.Item
                name="source"
                label="来源"
                initialValue={this.state.source} >
                <Input />
              </Form.Item>
            </Col>
            <Col xs={12}>
              <Form.Item
                name="mark"
                label="标志"
                initialValue={this.state.mark}>
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="files"
                label="附件列表"
                initialValue={this.state.files}
                valuePropName="fileList"
              >
                <File />
              </Form.Item>
            </Col>
          </Row>

          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="url"
                label="网址"
                initialValue={this.state.url}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </div>
        <div className="form-toolbar">
          <Button className="btn-cancel" onClick={this.props.onCancel}><i className="iconfont icon-cancel"></i>取消</Button>
          <Button className="btn-submit" htmlType="submit"><i className="iconfont icon-submit"></i>提交</Button>
        </div>
      </Form >
    );
  }
}