tools_auto_web/server/routes/PendingToolsAdd.js

import React, { useState } from "react";
import { Form, Input, Button, Card, message, Space } from "antd";
import { ArrowLeftOutlined, SaveOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { pendingToolsApi } from "../services/api";

const { TextArea } = Input;

const PendingToolsAdd = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  // 生成search_task_id的函数（基于Python代码的JavaScript版本）
  const generateSearchTaskId = () => {
    // 获取当前时间，精确到毫秒
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0");
    const day = String(now.getDate()).padStart(2, "0");
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    const seconds = String(now.getSeconds()).padStart(2, "0");
    const milliseconds = String(now.getMilliseconds()).padStart(3, "0");

    const timestamp = `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;

    // 生成 6 位随机数，范围 100000~999999
    const randomNumber = Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;

    return `${timestamp}${randomNumber}`;
  };

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      const searchTaskId = generateSearchTaskId();
      const submitData = {
        search_task_id: searchTaskId,
        tools_name: values.toolsName,
        tools_function_name: values.toolsFunctionName,
        tools_function_desc: values.toolsFunctionDesc,
        status: 0, // 默认状态为待处理
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      };

      await pendingToolsApi.create(submitData);
      message.success("新增工具成功！");
      navigate("/pending-tools");
    } catch (error) {
      console.error("新增工具失败:", error);
      message.error("新增工具失败，请重试");
    } finally {
      setLoading(false);
    }
  };

  const handleBack = () => {
    navigate("/pending-tools");
  };

  return (
    <div className="p-6">
      <Card
        title={
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
            <Button
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={handleBack}
            >
              返回列表
            </Button>
            <span style={{ fontSize: "18px", fontWeight: "bold", flex: 1, textAlign: "center" }}>新增待接入工具</span>
            <div style={{ width: "80px" }}></div> {/* 占位元素，保持标题居中 */}
          </div>
        }
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          autoComplete="off"
        >
          <Form.Item
            label="工具名称"
            name="toolsName"
            rules={[
              { required: true, message: "请输入工具名称" },
              { max: 100, message: "工具名称不能超过100个字符" },
            ]}
          >
            <Input placeholder="请输入工具名称" />
          </Form.Item>

          <Form.Item
            label="工具功能名称"
            name="toolsFunctionName"
            rules={[
              { required: true, message: "请输入工具功能名称" },
              { max: 200, message: "工具功能名称不能超过200个字符" },
            ]}
          >
            <Input placeholder="请输入工具功能名称" />
          </Form.Item>

          <Form.Item
            label="工具功能描述"
            name="toolsFunctionDesc"
            rules={[
              { required: true, message: "请输入工具功能描述" },
              { max: 1000, message: "工具功能描述不能超过1000个字符" },
            ]}
          >
            <TextArea
              placeholder="请输入工具功能描述"
              rows={6}
              showCount
              maxLength={1000}
            />
          </Form.Item>

          <Form.Item style={{ textAlign: 'center' }}>
            <Space>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                icon={<SaveOutlined />}
              >
                保存
              </Button>
              <Button onClick={handleBack}>取消</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default PendingToolsAdd;