tools_auto_web/src/pages/PendingToolsList.js

import React, { useState, useEffect } from "react";
import { Table, Button, Input, Space, Tag, message, Modal, Tooltip } from "antd";
import { SearchOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { pendingToolsApi } from "../services/api";
import moment from "moment";
import { render } from "@testing-library/react";

const { Search } = Input;
const { confirm } = Modal;

const PendingToolsList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [searchText, setSearchText] = useState("");
  const navigate = useNavigate();

  const getStatusColor = (status) => {
    const statusMap = {
      0: "processing",
      1: "warning",
      2: "success",
      3: "error",
      4: "pending",
    };
    return statusMap[status] || "default";
  };

  const getStatusText = (status) => {
    const statusMap = {
      0: "待处理",
      1: "处理中",
      2: "已完成",
      3: "失败",
      4: "待审核",
    };
    return statusMap[status] || "未知";
  };

  const columns = [
    {
      title: "工具ID",
      dataIndex: "search_task_id",
      key: "search_task_id",
      width: 150,
      ellipsis: true,
      render: (text) => (
        <Tooltip title={text}>
          <span className="cursor-pointer">{text}</span>
        </Tooltip>
      ),
    },
    {
      title: "工具名称",
      dataIndex: "tools_name",
      key: "tools_name",
      width: 150,
    },
    {
      title: "工具功能名称",
      dataIndex: "tools_function_name",
      key: "tools_function_name",
      width: 200,
    },
    {
      title: "工具功能描述",
      dataIndex: "tools_function_desc",
      key: "tools_function_desc",
      width: 300,
      ellipsis: true,
      render: (text) => (
        <Tooltip title={text}>
          <span className="cursor-pointer">{text}</span>
        </Tooltip>
      ),
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (status) => <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>,
    },
    {
      title: "失败原因",
      dataIndex: "fail_reason",
      key: "fail_reason",
      width: 200,
    },
    {
      title: "创建时间",
      dataIndex: "create_time",
      key: "create_time",
      width: 180,
      render: (time) => moment(time).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "更新时间",
      dataIndex: "update_time",
      key: "update_time",
      width: 180,
      render: (time) => moment(time).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      key: "action",
      width: 150,
      fixed: "right",
      render: (_, record) => (
        <Space size="small">
          <Button
            type="primary"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => navigate(`/pending-tools/${record.search_task_id}`)}
          >
            详情
          </Button>
          <Button
            size="small"
            icon={<EditOutlined />}
            onClick={() => navigate(`/pending-tools/${record.search_task_id}?mode=edit`)}
          >
            编辑
          </Button>
          {/* <Button
            danger
            size="small"
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.search_task_id)}
          >
            删除
          </Button> */}
        </Space>
      ),
    },
  ];

  const fetchData = async (page = 1, pageSize = 10, search = "") => {
    setLoading(true);
    try {
      const response = await pendingToolsApi.getList({
        page,
        pageSize,
        search,
      });
      setData(response.data.data);
      setPagination({
        current: response.data.page,
        pageSize: response.data.pageSize,
        total: response.data.total,
      });
    } catch (error) {
      message.error("获取数据失败");
    } finally {
      setLoading(false);
    }
  };

  const handleTableChange = (paginationConfig) => {
    fetchData(paginationConfig.current, paginationConfig.pageSize, searchText);
  };

  const handleSearch = (value) => {
    setSearchText(value);
    fetchData(1, pagination.pageSize, value);
  };

  const handleDelete = (id) => {
    confirm({
      title: "确认删除",
      content: "确定要删除这个工具吗？",
      okText: "确认",
      cancelText: "取消",
      onOk: async () => {
        try {
          await pendingToolsApi.delete(id);
          message.success("删除成功");
          fetchData(pagination.current, pagination.pageSize, searchText);
        } catch (error) {
          message.error("删除失败");
        }
      },
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="space-y-6">
      <div className="table-container">
        <div className="mb-6">
          <Search
            placeholder="搜索工具名称、功能名称或描述"
            allowClear
            enterButton={<SearchOutlined />}
            size="large"
            onSearch={handleSearch}
            className="max-w-md"
          />
        </div>
        <Table
          columns={columns}
          dataSource={data}
          rowKey="search_task_id"
          pagination={pagination}
          loading={loading}
          onChange={handleTableChange}
          scroll={{ x: 1500 }}
          size="middle"
          className="shadow-sm"
        />
      </div>
    </div>
  );
};

export default PendingToolsList;