tieTa3D/src/pages/B2Scene/EditNum.tsx

import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Input, Modal, Popconfirm } from "antd";
import { B2_APIeditNum, B2_APInumIsOk } from "@/store/action/B2Scene";
import { MessageFu } from "@/utils/message";
import classNames from "classnames";

type Props = {
  info: { id: number; num: string; name: string; roomName: string };
  closeFu: () => void;
  upTableFu: () => void;
};

function EditNum({ info, closeFu, upTableFu }: Props) {
  const [value, setValue] = useState("");

  // 通过 新机房编码 检查 新站址名称
  const [newRoomName, setNewRoomName] = useState({ code: 0, name: "" });

  const numIsOkFu = useCallback(async (val: string) => {
    const res = await B2_APInumIsOk(val);
    if (res.code === 0) {
      if (res.data && res.data.name)
        setNewRoomName({ code: 1, name: res.data.name });
      else setNewRoomName({ code: 0, name: "机房编码不存在!" });
    }
  }, []);

  useEffect(() => {
    if (value && value.length >= 24) numIsOkFu(value);
  }, [numIsOkFu, value]);

  const btnOkFu = useCallback(async () => {
    if (value === info.num) return MessageFu.warning("新旧编码不能相同!");

    // const res1 = await B2_APIcheckNum(value);
    // if (res1.code === 0) {
    //   if (res1.data) {
    // 编码存在
    const res2 = await B2_APIeditNum(info.id, value);
    if (res2.code === 0) {
      MessageFu.success("更新成功!");
      upTableFu();
      closeFu();
      // }
      // } else MessageFu.warning("该机房编码不存在，请先在机房管理中创建!");
    }
  }, [closeFu, info.id, info.num, upTableFu, value]);

  return (
    <Modal
      wrapClassName={styles.EditNum}
      open={true}
      title="修改机房编码"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="B2Emain">
        <div className="B2Ebox1">
          <div>场景名称：</div>
          <div>{info.name}</div>
        </div>

        <div className="B2Ebox1">
          <div>原机房编码：</div>
          <div>{info.num}</div>
        </div>
        <div className="B2Ebox1">
          <div>原站址名称：</div>
          <div>{info.roomName}</div>
        </div>

        <hr />
        <br />

        <div className="B2Ebox1">
          <div>新机房编码：</div>
          <div>
            <Input
              placeholder="请输入24位纯数字"
              maxLength={24}
              style={{ width: 300 }}
              value={value}
              onChange={(e) => setValue(e.target.value.replace(/[^\d]/g, ""))}
            />
          </div>
        </div>

        <div
          className={classNames(
            "B2Ebox1",
            newRoomName.code === 0 ? "B2Ebox1Err" : ""
          )}
          hidden={value.length < 24 || !newRoomName.name}
        >
          <div>新站址名称：</div>
          <div>{newRoomName.name}</div>
        </div>

        <div className="B2Ebtn">
          <Button
            type="primary"
            onClick={btnOkFu}
            disabled={value.length < 24 || newRoomName.code !== 1}
          >
            提交
          </Button>
          &emsp;
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
        </div>
      </div>
    </Modal>
  );
}

const MemoEditNum = React.memo(EditNum);

export default MemoEditNum;