project-admin/src/pages/home/Detail.jsx

import React, { useEffect, useRef, useState } from "react";
import {
  Button,
  Select,
  Row,
  Col,
  Form,
  Descriptions,
  Input,
  Card,
  Space,
} from "antd";
import {
  ProForm,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";
import { useSearchParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { getTaMessageById, putTaMessage } from "@/service/taMessage";
import { postTaRotation } from "@/service/taRotation";
import Page from "@/components/Page";

export default (props) => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");
  const [form] = Form.useForm();
  const navigate = useNavigate();

  useEffect(() => {
    form.resetFields();
    getTaMessageById(id).then((res) => {
      form.setFieldsValue(res);
    });
  }, []);

  const onFinish = (values) => {
    const sourceName = form.getFieldValue("sourceName");
    const data = {
      ...values,
      sourceName: sourceName,
    };
    putTaMessage(id, data).then((res) => {
      navigate(-1);
    });
  };

  const onRatation = () => {
    const sourceName = form.getFieldValue("sourceName");
    const sourceId = form.getFieldValue("sourceId");
    if (sourceName == "taRotation") {
      navigate(
        `/rotationMange/rotationList/edit?id=${sourceId}&disabled={true}`
      );
    } else {
      navigate(
        `/mandatoryLeaveMange/mandatoryleave/edit?id=${sourceId}&disabled={true}`
      );
    }
  };

  return (
    <Page>
      <Card>
        <ProForm
          style={{ marginTop: "24px" }}
          form={form}
          onFinish={onFinish}
          layout="horizontal"
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 8 }}
          submitter={false}
        >
          <ProFormTextArea label="消息内容" name="contentSent" readonly />

          <ProForm.Item noStyle shouldUpdate>
            {({ getFieldValue }) => {
              const waringType = getFieldValue("waringType");
              const sourceName = getFieldValue("sourceName");
              return (
                <>
                  <Form.Item label="查看按钮">
                    <Button type="link" onClick={onRatation}>
                      {sourceName == "taRotation"
                        ? "点击查看轮岗详情"
                        : "点击查看强制休假详情"}
                    </Button>
                  </Form.Item>
                  {sourceName && sourceName == "taMandatoryLeave" ? null : (
                    <>
                      <ProFormTextArea
                        label="核查反馈"
                        name="remark"
                        disabled={waringType == "prompt"}
                      />
                      <Form.Item>
                        <Row>
                          <Col offset={15}>
                            <Button
                              type="primary"
                              htmlType="submit"
                              disabled={waringType == "prompt"}
                            >
                              提交
                            </Button>
                          </Col>
                        </Row>
                      </Form.Item>
                    </>
                  )}
                </>
              );
            }}
          </ProForm.Item>
        </ProForm>
      </Card>
    </Page>
  );
};