zhongze-admin/src/pages/News/NewsList/edit.tsx

import React, { useEffect, useState, useRef } from 'react';
import {
  ProForm,
  ProFormText,
  ProFormUploadButton,
  ProFormSelect,
  ProFormDatePicker,
  ProFormRadio
} from '@ant-design/pro-components';
import { Form, Modal, Drawer, message, Upload, Space, Button, Switch,Input,Tooltip } from 'antd';
import {InfoCircleOutlined} from '@ant-design/icons';

import { useIntl, FormattedMessage } from '@umijs/max';
import { DictValueEnumObj } from '@/components/DictTag';
import Editor from '@/components/ueditor';
import { upload } from '@/services/news/news';
import { getDataEnumList } from '@/services/system/Enum';
import Quill from "quill";
import "quill/dist/quill.snow.css";
import moment from 'moment';
import { trim } from 'lodash';
let editor: any;

export type NewsProps = {
  onCancel: (flag?: boolean, formVals?: any) => void;
  onSubmit: (values: any) => Promise<void>;
  open: boolean;
  currentRow: any;
  date: any;
  title: string;
  content: string;
  surface: string;
  surfaceUrl: string;
};

let toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
  ['blockquote', 'code-block'],
  ['link', 'image'],


  [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
  [{ 'direction': 'rtl' }],                         // 文本下划线


  [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],


  [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
  [{ 'font': [] }],
  [{ 'align': [] }],
  // [{ 'wordBox': ['20px', '22px', '24px', '26px', '28px', '28px', '30px'] }],
  [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
  ['clean'],                                         // 清除格式

];

function image(){
  var _this3 = this;

  var fileInput = this.container.querySelector('input.ql-image[type=file]');
  fileInput = null
  if (fileInput == null) {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    fileInput.classList.add('ql-image');
    fileInput.addEventListener('change', async function () {
      if (fileInput.files != null && fileInput.files[0] != null) {
        let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;

        let file = fileInput.files[0]
        const formData = new FormData();
        formData.append('file', file, file.name);
        const res = await upload(formData)
        editor.insertEmbed(index, 'image', res.data.url);
        var reader = new FileReader();
        reader.onload = function (e) {
          fileInput.value = "";
        };

      }
    });
    this.container.appendChild(fileInput);
  }
  fileInput.click();
}
const NewsForm: React.FC<NewsProps> = (props) => {

  const [form] = Form.useForm();
  const intl = useIntl();
  let editorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    form.resetFields();
    if(!props.open) return;
    // const { title, content, surface, surfaceUrl, date } = props;
    if(!props.currentRow) return;
    const { digest, top,key,content,surface,surfaceUrl,date,title,source} = props.currentRow;
    if (props.currentRow) {
      form.setFieldsValue({
        digest,
        top,
        key
      })
      // if (top) {
      //   setCheckTop(1)
      // } else {
      //   setCheckTop(0)
      // }
    }

    setSurface(surface)
    form.setFieldsValue({
      title: title,
      date: date,
    })
    if (surfaceUrl && surface) {
      setFileList([
        {
          uid: surface,
          thumbUrl: surfaceUrl
        }
      ])
    }
    if (editorRef && editorRef.current && editorRef.current.children[0]) {
      editorRef.current.children[0].innerHTML = content
    }

  }, [props.open]);

  useEffect(() => {
    var Parchment = Quill.import('parchment');

    let config = {
      scope: Parchment.Scope.INLINE,
      // 会有下拉框列表
      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
      //可设置成没有下拉框的，但会导致无法清除样式
      // whitelist: ['1px solid #000000']  
    };

    let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);

    Quill.register(wordBox, true);
    editor = new Quill('#editor', {
      modules: {
        toolbar: toolbarOptions,
        clipboard: {
          dangerouslyPasteHTML: true
        }
      },
      theme: 'snow'
    });

    // 工具栏附件按钮
    let a = document.querySelectorAll(".ql-wordBox")[0]
    let b = document.querySelectorAll(".ql-wordBox")[1]
    //添加默认显示内容
    let stit = document.createElement('span')
    stit.innerHTML = intl.formatMessage({ id: 'public.lineSpacing' });
    stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
    a.children[0].insertBefore(stit, a.children[0].children[0])

    // 遍历下拉框列表添加值
    let i = a.children[1].children.length
    while (i) {
      i--;
      let item = a.children[1].children[i]
      item.innerHTML = item.dataset.value ? item.dataset.value : '无'
    }

    // console.log('editor', editor)
    var toolbar = editor.getModule('toolbar');

    toolbar.image2 = image
    // console.log("toolbar.handlers.image", toolbar.handlers.image)
    toolbar.addHandler('image', (e) => {
      toolbar.image2()
      // 

    });

    // toolbar.addHandler('wordBox', (e) => {
    //   console.log('e-----++++', e)
    //   // 

    // });

  }, []);


  const [fileList, setFileList] = useState<any>([]);
  const [surface, setSurface] = useState<any>('');

  const [checkTop, setCheckTop] = useState<any>('')
  const handleOk = async () => {
    let data = form.getFieldsValue()
    let val = await form.validateFields()
    
    let htmlStr = editorRef.current?.children[0].innerHTML

    htmlStr = htmlStr?.replaceAll('"', "'")
    let content = editor.getContents()
    // console.log('htmlStr----', htmlStr)
    editor.setContents(content)
    data.date = moment(data.date).format('YYYY.MM.DD');
    if(checkTop){
      data.top = 1;
    }else{
      data.top = 0;
    } 
    // data.top = checkTop;
    let formData = {
      ...data,
      surface,
      content: htmlStr
    }
    form.setFieldsValue({
      title: '',
      digest: ""
    })
    setFileList([]);
    setCheckTop(false)
    editor.clipboard.dangerouslyPasteHTML(0, '')
    editor.setContents([])
    props.onSubmit(formData);
  };
  const handleCancel = () => {
    form.setFieldsValue({
      title: '',
      digest: "",
      top: ""
    })
    setFileList([]);
    setCheckTop(false)
    editor.clipboard.dangerouslyPasteHTML(0, '')
    editor.setContents([])
    props.onCancel();

  };

  const handleChange = async (res) => {
    const { fileList } = res;
    setFileList(fileList);
  };

  const handleBeforeUpload = async (file: RcFile) => {
    const formData = new FormData();
    formData.append('file', file, file.name);
    const res = await upload(formData);
    if (res?.data?.uuid) {
      setSurface(res.data.uuid)
    }
    return false;
  };


  return (
    <Drawer
      width={'80%'}
      title={props.currentRow ? '新闻编辑' : '新建新闻'}
      forceRender
      open={props.open}
      destroyOnClose
      onClose={handleCancel}
      extra={
        <Space>
          <Button onClick={handleCancel}>取消</Button>
          <Button type="primary" onClick={handleOk}>确认</Button>
        </Space>
      }
    >
      <ProForm
        form={form}
        grid={true}
        submitter={false}
        layout="horizontal"
      >
        <ProFormText
          name="title"
          label='标题'
          labelCol={{
            style: { width: 95 }
          }}
          placeholder='请输入标题'
          rules={[
            {
              required: true,
              message: '请输入标题!',
            },
          ]}
        />
        <ProForm.Item
          label={'封面图'}
          extra={'图片尺寸1218*915'}
          labelCol={{
            style: { width: 95 }
          }}
          rules={[
            {
              required: true
            }
          ]
          }
        >
          <Upload
            listType="picture-card" // 设置为图片卡片模式
            fileList={fileList}
            maxCount={1}
            onChange={handleChange}
            beforeUpload={handleBeforeUpload}
          >
            {fileList?.length < 1 && '+' + intl.formatMessage({ id: 'public.uploadImg' })}
          </Upload>
        </ProForm.Item>
        <ProFormDatePicker
          name="date"
          label='日期'
          fieldProps={{
            format: (value) => value.format('YYYY.MM.DD'),
          }}
          labelCol={{
            style: { width: 95 }
          }}
          rules={[
            {
              required: true
            }
          ]
          }
        />

        <ProFormSelect
          name="column"
          key="column"
          label='新闻分类'
          request={() =>
            getDataEnumList({enumUuid: '2024810214616101'}).then((res) => {
              let tList = []
              res.rows.forEach(item => {
                tList.push({
                  label: item.dataName,
                  value: item.uuid,
                })
              })
              return tList;
            })

          }
          labelCol={{
            style: { width: 95 }
          }}
          placeholder={'请选择新闻分类'}

        />
        <ProFormText
          name="digest"
          label='摘要'
          labelCol={{
            style: { width: 95 }
          }}
          placeholder={'请输入摘要'}
        />
         
        <ProFormText
          name="key"
          label='网页关键字'
          labelCol={{
            style: { width: 95 }
          }}
          placeholder={'请输入页面关键字'}
        />

        <ProFormText
          name="source"
          label='来源'
          labelCol={{
            style: { width: 95 }
          }}
          placeholder={'中泽集团'}
          initialValue={'中泽集团'}
        />

        <ProForm.Item 
        label={'新闻内容'} 
        labelCol={{
          style: { width: 95 }
        }}
        >
          <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div>
        </ProForm.Item>
      </ProForm>
    </Drawer>
  );
};

export default NewsForm;