buzzup-admin/src/pages/notify/news.tsx

import api from "@/api"
import MyTable from "@/components/MyTable"
import { RootState } from "@/store"
import { getTime } from "@/utils"
import { getBaseUrl } from "@/utils/axios"
import { InboxOutlined } from "@ant-design/icons"
import { Button, Drawer, Form, Input, Popconfirm, Tooltip, notification } from "antd"
import TextArea from "antd/lib/input/TextArea"
import Dragger from "antd/lib/upload/Dragger"
import { title } from "process"
import React, { useRef, useState } from "react"
import { useSelector } from "react-redux"

const BUZZUPNews = () => {

  const { userInfo } = useSelector((state: RootState) => state.storeData)

  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()
  const currentType = useRef('' as 'create' | 'update')
  const currentItem = useRef({} as any)
  const tableRef = useRef(null)

  const columns = [
    {
      title: '图片',
      dataIndex: 'image',
      width: 300,
      render: (logo) => {
        return (
          <Tooltip title={
            <img src={logo} alt="" style={{ width: 240, height: 240, objectFit: 'contain' }} />
          }>
            <img src={logo} className="tp" alt="" style={{ width: 50, height: 50, objectFit: 'contain' }} />
          </Tooltip>
        )
      }
    },
    {
      title: '标题',
      width: 300,
      dataIndex: "title",
      render: (title) => {
        return (
          <Tooltip overlay={false} title={
            <div dangerouslySetInnerHTML={{ __html: title.replace(/\\n/g, '<br/>') }}></div>
          }>
            <div className="text-overflow tp" dangerouslySetInnerHTML={{ __html: title.replace(/\\n/g, '<br/>') }}></div>
          </Tooltip>
        )
      }
    },
    {
      title: '链接',
      dataIndex: 'url',
      width: 300
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      render: (time) => (
        <div>{getTime(time * 1000)}</div>
      )
    },
    {
      title: 'options',
      fixed: 'right',
      width: 100,
      render: (item) => (
        <div>
          <Button type="primary" style={{ marginTop: 10 }} onClick={() => {
            currentItem.current = item
            currentType.current = 'update'
            form.setFieldsValue(item)
            setVisible(true)
          }}>修改</Button>
          <Popconfirm title={`确认删除“${item.title}”吗？`} onConfirm={() => deleteSystemMsg(item)}>
            <Button type="primary" style={{ marginTop: 10, backgroundColor: 'red', borderColor: 'red' }}>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  ]

  const deleteSystemMsg = async (item) => {
    const res: any = await api.delete_new_message({
      id: item.id
    })
    if (res.code === 0) {
      tableRef.current.update()
      notification.success({
        message: '删除成功'
      })
    }
  }

  const onClose = () => setVisible(false)

  const onFinish = async (values) => {
    const parmas = {
      ...values
    }
    console.log(parmas);

    if (currentType.current === 'update') {
      parmas.id = currentItem.current.id
    }
    let res: any;
    if (currentType.current === 'create') {
      res = await api.add_news_message(parmas)
    } else {
      res = await api.updata_news_message(parmas)
    }
    if (res.code === 0) {
      setVisible(false)
      tableRef.current.update()
      form.resetFields()
      notification.success({
        message: currentType.current === 'create' ? '添加成功' : '修改成功'
      })
    }
  }

  const uploadProps = {
    name: 'img',
    action: `${getBaseUrl()}/admin/uploadImg`,
    headers: {
      Token: userInfo.token,
    },
  }

  const onChange = (info: any) => {

    if (info.file.status === 'removed') {
      form.setFieldsValue({
        image: ''
      })
    }

    if (info.file.status === 'done') {
      if (info.file.response && info.file.response.code === 0) {
        form.setFieldsValue({
          image: info.file.response.data.url
        })
        notification.success({
          message: `图片上传成功`
        })
      }

    } else if (info.file.status === 'error') {
      notification.error({
        message: `图片上传失败`
      });
    }
  }

  return (
    <div>
      <MyTable
        apiFun={api.get_news_message}
        ref={tableRef}
        columns={columns}
        header={
          <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', marginBottom: 20 }}>
            <Button type="primary" onClick={() => {
              currentType.current = 'create'
              form.resetFields()
              setVisible(true)
            }}>添加BUZZUPNews</Button>
          </div>
        }
      />
      <Drawer title="添加系统通知" onClose={onClose} visible={visible} width="40%">
        <Form form={form} onFinish={onFinish}>
          <Form.Item
            name="url"
            label="链接"
            rules={[{ required: true, message: '请输入链接' }]}
          >
            <Input placeholder="请输入链接" />
          </Form.Item>
          <Form.Item
            name="title"
            label="标题"
            rules={[{ required: true, message: '请输入标题' }]}
          >
            <TextArea placeholder="请输入标题" style={{ minHeight: 200 }} />
          </Form.Item>
          <Form.Item label="模版" shouldUpdate={(prevValues, currentValues) => prevValues.title !== currentValues.title}>
            {({ getFieldValue }) => (
              <div dangerouslySetInnerHTML={{ __html: (getFieldValue('title') || '').replace(/\\n/g, '<br/>') }}></div>
            )}
          </Form.Item>

          <Form.Item
            label="图片"
            name="image"
            rules={[{ required: true, message: 'Please Select Logo Image!' }]}
          >
            <Dragger
              {...uploadProps}
              onChange={onChange}
            >
              <p className="ant-upload-drag-icon" style={{ display: 'flex', justifyContent: 'center', paddingTop: 10 }}>
                <InboxOutlined />
              </p>
              <p className="ant-upload-text" style={{ textAlign: 'center' }}>点击或拖拽文件进行上传</p>
              <p className="ant-upload-hint" style={{ textAlign: 'center', paddingBottom: 10 }}>
                Support for a single or bulk upload. Strictly prohibited from uploading company data or other
                banned files.
              </p>
            </Dragger>
          </Form.Item>

          <Form.Item label="">
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Button type="primary" htmlType="submit">提交</Button>
            </div>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  )
}

export default BUZZUPNews