pc-admin/src/pages/check/index.jsx

import React from 'react';
import Page from '@/components/Page';
import { useNavigate } from 'react-router-dom';
import { queryTable } from "@/utils/request";
import { ProTable } from "@ant-design/pro-components";
import { Button, message, Popconfirm } from "antd";
import { getTaCheck, deleteTaCheck, putTaCheck } from '@/service/tacheck';

const queryList = queryTable(getTaCheck);

export default (props) => {

  const navigate = useNavigate();
  const actionRef = React.useRef();

  const onDelete = (item) => {
    deleteTaCheck(item.checkId).then(() => {
      actionRef.current.reload();
    })
  }

  const onUpdateStatus = (item) => {
    putTaCheck(item.checkId, {...item, status: Math.abs(item.status - 1)}).then(() => {
      actionRef.current.reload();
    })
  }

  const columns = [
    {
      title: "测评名称",
      dataIndex: "title",
    },
    {
      title: "测评日期",
      hideInTable: true,
      dataIndex: "dateRange",
      valueType: 'dateRange',
      search: {
        transform: value => ({ startDate: value[0], endDate: value[1] }),
      },
    },
    {
      title: "开始日期",
      dataIndex: "startDate",
      hideInSearch: true,
    },
    {
      title: "结束日期",
      dataIndex: "endDate",
      hideInSearch: true,
    },
    {
      title: "状态",
      dataIndex: "status",
      search: false,
      valueEnum: {
        1: {
          text: "正常",
          status: "Processing",
        },
        0: {
          text: "禁用",
          status: "Error",
        },
      },
    },
    {
      title: "操作",
      valueType: "option",
      width: 200,
      render: (_, record) => [
        <Button
          key={1}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            onUpdateStatus(record);
          }}
        >
          {record.status === 1 ? "禁用" : "启用"}
        </Button>,
        <Button
          key={2}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            navigate(`/check/edit?id=${record.checkId}`);
          }}
        >
          编辑
        </Button>,
        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => onDelete(record)}
          okText="确定"
          cancelText="取消"
        >
          {/* manualPush */}
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ]

  return (
    <Page>
      <ProTable
        actionRef={actionRef}
        rowKey="checkId"
        toolBarRender={() => [
          <Button
            key="1"
            type="primary"
            onClick={() => {
              navigate("/check/edit");
            }}
          >
            新增
          </Button>,
        ]}
        request={queryList}
        columns={columns}
      />
    </Page>
  )
}