new-tarder-admin/src/pages/system/notify.tsx

import api from "@/api"
import MyTable from "@/components/MyTable"
import { getTime } from "@/utils"
import { DeleteFilled, EditOutlined } from "@ant-design/icons"
import { Button, Form, Input, Modal, Popconfirm, Switch, Tooltip, notification } from "antd"
import React, { useEffect, useRef, useState } from "react"

const SystemNofify = () => {

  const tableRef = useRef(null)
  const [visbleModel, setVisibleModal] = useState(false)
  const [form] = Form.useForm()
  const currentType = useRef('')
  const currentItem = useRef({} as any)

  const columns = [
    {
      title: '操作',
      width: 100,
      render: (row) => {
        return (
          <div style={{ display: "flex", alignItems: 'center' }}>
            <EditOutlined style={{ marginRight: 20 }} onClick={() => updateNotify(row)} />
            <Popconfirm title={`确定删除吗？`} onConfirm={() => deleteNotify(row)}>
              <DeleteFilled />
            </Popconfirm>
          </div>
        );
      }
    },
    {
      "dataIndex": "title", "title": "标题", width: 340, render: (text) => (
        <Tooltip title={text}>
          <div style={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</div>
        </Tooltip>
      )
    },
    {
      "dataIndex": "content", "title": "内容", width: 340, render: (text) => (
        <Tooltip title={text}>
          <div style={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</div>
        </Tooltip>
      )
    },
    { "dataIndex": "status", "title": "状态" },
    { "dataIndex": "time", "title": "时间", render: (time) => (<div>{getTime(time * 1000)}</div>) },
  ]

  const updateNotify = async (item) => {
    currentType.current = 'update';
    currentItem.current = item;
    setVisibleModal(true)
    form.setFieldsValue({
      title: item.title,
      content: item.content,
      status_code: item.status_code === 1 ? true : false
    })
  }

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

  const onFinish = async (values) => {
    setVisibleModal(false)
    const params = {
      ...values,
      status_code: values.status_code ? 1 : 2
    }
    let res: any = {};

    if (currentType.current === 'update') {
      params.id = currentItem.current.id
      res = await api.update_nofity({
        ...params
      })
    } else {
      res = await api.add_nofity({
        ...params
      })
    }

    if (res.code === 0) {
      notification.success({
        message: currentType.current === 'update' ? '修改成功' : '添加成功'
      })
      tableRef.current.update()
      form.resetFields()
    }

  }

  return (
    <div>
      <MyTable
        apiFun={api.get_systemNofify}
        columns={columns}
        ref={tableRef}
        header={
          <div style={{ marginBottom: 20 }}>
            <Button type="primary" onClick={() => setVisibleModal(true)}>新增公告</Button>
          </div>
        }
      />

      <Modal
        visible={visbleModel}
        title="新增公告"
        onCancel={() => {
          currentType.current = 'add';
          setVisibleModal(false)
        }}
        footer={() => null}
      >
        <Form form={form} onFinish={onFinish}>
          <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
            <Input placeholder="请输入标题" />
          </Form.Item>
          <Form.Item label="内容" name="content" rules={[{ required: true, message: '请输入内容' }]}>
            <Input placeholder="请输入内容" />
          </Form.Item>
          <Form.Item label="状态" name="status_code" valuePropName="checked" initialValue={true}>
            <Switch />
          </Form.Item>
          <Form.Item style={{ display: 'flex' }}>
            <Button onClick={() => setVisibleModal(false)}>取消</Button>
            <Button style={{ marginLeft: 20 }} type="primary" htmlType="submit">确认</Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default SystemNofify