PendingToolsAdd.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import React, { useState } from "react";
  2. import { Form, Input, Button, Card, message, Space } from "antd";
  3. import { ArrowLeftOutlined, SaveOutlined } from "@ant-design/icons";
  4. import { useNavigate } from "react-router-dom";
  5. import { pendingToolsApi } from "../services/api";
  6. const { TextArea } = Input;
  7. export const generateSearchTaskId = () => {
  8. // 获取当前时间,精确到毫秒
  9. const now = new Date();
  10. const year = now.getFullYear();
  11. const month = String(now.getMonth() + 1).padStart(2, "0");
  12. const day = String(now.getDate()).padStart(2, "0");
  13. const hours = String(now.getHours()).padStart(2, "0");
  14. const minutes = String(now.getMinutes()).padStart(2, "0");
  15. const seconds = String(now.getSeconds()).padStart(2, "0");
  16. const milliseconds = String(now.getMilliseconds()).padStart(3, "0");
  17. const timestamp = `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;
  18. // 生成 6 位随机数,范围 100000~999999
  19. const randomNumber = Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;
  20. return `${timestamp}${randomNumber}`;
  21. };
  22. const PendingToolsAdd = () => {
  23. const [form] = Form.useForm();
  24. const [loading, setLoading] = useState(false);
  25. const navigate = useNavigate();
  26. // 生成search_task_id的函数(基于Python代码的JavaScript版本)
  27. const handleSubmit = async (values) => {
  28. setLoading(true);
  29. try {
  30. const searchTaskId = generateSearchTaskId();
  31. const submitData = {
  32. search_task_id: searchTaskId,
  33. tools_name: values.toolsName,
  34. tools_function_name: values.toolsFunctionName,
  35. tools_function_desc: values.toolsFunctionDesc,
  36. status: 0, // 默认状态为待处理
  37. created_at: new Date().toISOString(),
  38. updated_at: new Date().toISOString(),
  39. };
  40. await pendingToolsApi.create(submitData);
  41. message.success("新增工具成功!");
  42. navigate("/pending-tools");
  43. } catch (error) {
  44. console.error("新增工具失败:", error);
  45. message.error("新增工具失败,请重试");
  46. } finally {
  47. setLoading(false);
  48. }
  49. };
  50. const handleBack = () => {
  51. navigate("/pending-tools");
  52. };
  53. return (
  54. <div className="p-6">
  55. <Card
  56. title={
  57. <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
  58. <Button
  59. type="text"
  60. icon={<ArrowLeftOutlined />}
  61. onClick={handleBack}
  62. >
  63. 返回列表
  64. </Button>
  65. <span style={{ fontSize: "18px", fontWeight: "bold", flex: 1, textAlign: "center" }}>新增待接入工具</span>
  66. <div style={{ width: "80px" }}></div> {/* 占位元素,保持标题居中 */}
  67. </div>
  68. }
  69. >
  70. <Form
  71. form={form}
  72. layout="vertical"
  73. onFinish={handleSubmit}
  74. autoComplete="off"
  75. >
  76. <Form.Item
  77. label="工具名称"
  78. name="toolsName"
  79. rules={[
  80. { required: true, message: "请输入工具名称" },
  81. { max: 100, message: "工具名称不能超过100个字符" },
  82. ]}
  83. >
  84. <Input placeholder="请输入工具名称" />
  85. </Form.Item>
  86. <Form.Item
  87. label="工具功能名称"
  88. name="toolsFunctionName"
  89. rules={[
  90. { required: false, message: "请输入工具功能名称" },
  91. { max: 200, message: "工具功能名称不能超过200个字符" },
  92. ]}
  93. >
  94. <Input placeholder="请输入工具功能名称" />
  95. </Form.Item>
  96. <Form.Item
  97. label="工具功能描述"
  98. name="toolsFunctionDesc"
  99. rules={[
  100. { required: false, message: "请输入工具功能描述" },
  101. { max: 1000, message: "工具功能描述不能超过1000个字符" },
  102. ]}
  103. >
  104. <TextArea
  105. placeholder="请输入工具功能描述"
  106. rows={6}
  107. showCount
  108. maxLength={1000}
  109. />
  110. </Form.Item>
  111. <Form.Item style={{ textAlign: "center" }}>
  112. <Space>
  113. <Button
  114. type="primary"
  115. htmlType="submit"
  116. loading={loading}
  117. icon={<SaveOutlined />}
  118. >
  119. 保存
  120. </Button>
  121. <Button onClick={handleBack}>取消</Button>
  122. </Space>
  123. </Form.Item>
  124. </Form>
  125. </Card>
  126. </div>
  127. );
  128. };
  129. export default PendingToolsAdd;