fateverse-react/src/view/system/notice/inform/index.tsx

import "./index.scss";
import { Select, Button, Table, Space, Tag, message, Modal } from "antd";

import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleFilled,
} from "@ant-design/icons";

import {
  getNoticeListApi,
  deleteNoticeInfoApi,
} from "../../../../api/system/notice";

import { useEffect, useState } from "react";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";

export default function Inform() {
  const [noticeInfo, setNoticeInfo] = useState<string>("");
  const [isNoticeOpen, setIsNoticeOpen] = useState<boolean>(false);
  const [listData, setListData] = useState([]);
  const [messageApi, contextHolder] = message.useMessage();
  const [queryParams, setQueryParams] = useState<QueryParamsType>({
    state: undefined,
    pageSize: undefined,
    pageNum: undefined,
  });
  const columns = [
    {
      title: "序号",
      dataIndex: "noticeId",
      key: "noticeId",
      render: (text: string) => <>{text ? text : "null"}</>,
    },
    {
      title: "公告标题",
      dataIndex: "noticeTitle",
      key: "noticeTitle",
      render: (text: string) => <>{text ? text : "null"}</>,
    },
    {
      title: "阅读状态",
      key: "state",
      dataIndex: "state",
      render: (text: string) => (
        <>
          {text === "1" ? (
            <Tag color="warning">已读</Tag>
          ) : (
            <Tag color="error">未读</Tag>
          )}
        </>
      ),
    },
    {
      title: "操作",
      key: "operate",
      dataIndex: "operate",
      render: (_: string, record: object) => (
        <div style={{ color: "#58aaff" }}>
          <Space>
            <EditOutlined />
            <a
              href="#"
              onClick={() => handleInfo(record)}
              style={{ color: " #58aaff" }}
            >
              详情
            </a>
            <DeleteOutlined />
            <a
              href="#"
              onClick={() => handleDel(record)}
              style={{ color: " #58aaff" }}
            >
              删除
            </a>
          </Space>
        </div>
      ),
    },
  ];

  interface QueryParamsType {
    state?: string;
    pageSize?: number;
    pageNum?: number;
  }

  const getList = async (newQueryParams: object) => {
    try {
      const { code, data } = await getNoticeListApi(newQueryParams);
      if (code === 1000) {
        setListData(data.rows);
      }
    } catch (err) {
      console.error(err);
    }
  };

  const handleReset = async () => {
    setQueryParams({});
    getList({});
  };

  const handleSearch = () => {
    getList(queryParams);
  };

  const handleInfo = (record: any) => {
    setIsNoticeOpen(true);
    setNoticeInfo(record.noticeTitle);
  };

  const handleInfoOk = () => {
    setIsNoticeOpen(false);
  };

  const handleInfoCancel = () => {
    setIsNoticeOpen(false);
  };

  const handleDel = async (record: any) => {
    Modal.confirm({
      title: `确定删除Id为-${record.noticeId}-, 名称为-${record.noticeTitle}-的岗位吗?`,
      icon: <ExclamationCircleFilled />,
      async onOk() {
        const { code } = await deleteNoticeInfoApi(record.noticeId);
        try {
          if (code === 1000) {
            messageApi.open({
              type: "success",
              content: "删除成功",
            });
            getList({});
          } else {
            messageApi.open({
              type: "error",
              content: "删除失败",
            });
          }
        } catch (err) {
          console.log(err);
        }
      },
      onCancel() {
        messageApi.open({
          type: "warning",
          content: "取消成功",
        });
      },
    });
  };

  const handlePageChange = (page: number) => {
    setQueryParams({
      ...queryParams,
      pageNum: page,
    });
  };

  useEffect(() => {
    getList(queryParams);
  }, []);

  return (
    <div id="content">
      <>
        <div className="right">
          <div className="search-content">
            <>
              <Space>
                <div>状态</div>
                <Select
                  style={{ width: 220 }}
                  placeholder="请选择状态"
                  allowClear
                  options={[
                    { value: "1", label: "已读" },
                    { value: "0", label: "未读" },
                  ]}
                  value={queryParams.state}
                  onChange={(value: any) =>
                    setQueryParams({
                      ...queryParams,
                      state: value,
                    })
                  }
                />
              </Space>
              <Space>
                <div className="search-button">
                  <Button type="primary" onClick={handleSearch}>
                    <SearchOutlined />
                    搜索
                  </Button>
                </div>
              </Space>
              <Space>
                <div className="reset-button" onClick={handleReset}>
                  <Button>
                    <RedoOutlined />
                    重置
                  </Button>
                </div>
              </Space>
            </>
          </div>
          <Modal
            title="通知弹框"
            open={isNoticeOpen}
            onOk={handleInfoOk}
            onCancel={handleInfoCancel}
            footer={null}
          >
            <h1>{noticeInfo}</h1>
          </Modal>
          <div className="table-content">
            <>
              {contextHolder}
              <Table
                columns={columns}
                dataSource={listData}
                className="article-table"
                pagination={{
                  onChange: handlePageChange,
                  locale: {
                    jump_to: "跳至",
                    page: "页",
                  },
                  showQuickJumper: true,
                  showTotal: (total, range) =>
                    `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
                }}
              />
            </>
          </div>
        </div>
      </>
    </div>
  );
}