场景审核-修改机房编码

src/pages/B2Scene/EditNum.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Input, Modal, Popconfirm } from "antd";
+import { B2_APIcheckNum, B2_APIeditNum } from "@/store/action/B2Scene";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  info: { id: number; num: string; name: string };
+  closeFu: () => void;
+  upTableFu: () => void;
+};
+
+function EditNum({ info, closeFu, upTableFu }: Props) {
+  const [value, setValue] = useState("");
+
+  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.num}</div>
+        </div>
+        <div className="B2Ebox1">
+          <div>场景名称：</div>
+          <div>{info.name}</div>
+        </div>
+
+        <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="B2Ebtn">
+          <Button type="primary" onClick={btnOkFu} disabled={value.length < 24}>
+            提交
+          </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;

src/pages/B2Scene/index.module.scss

@@ -176,4 +176,48 @@
       }
     }
   }
+}
+
+// ----------修改机房编码
+.EditNum {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+
+      .B2Emain {
+        border-top: 1px solid #ccc;
+        padding-top: 15px;
+
+        .B2Ebox1 {
+          margin-bottom: 15px;
+          display: flex;
+          align-items: center;
+
+          &>div {
+            &:nth-of-type(1) {
+              width: 100px;
+              text-align: right;
+            }
+
+            &:nth-of-type(2) {
+              width: calc(100% - 150px);
+            }
+          }
+        }
+
+
+        .B2Ebtn {
+          margin-top: 20px;
+          text-align: center;
+          position: relative;
+
+        }
+
+      }
+    }
+  }
 }

src/pages/B2Scene/index.tsx

@@ -34,6 +34,7 @@ import AuditMo from "./AuditMo";
 import clasNames from "classnames";
 import { mapDataAll1 } from "../C1User/AddUser/city";
 import LookReDo from "./LookReDo";
+import EditNum from "./EditNum";
 
 function B2Scene() {
   const dispatch = useDispatch();
@@ -158,11 +159,30 @@ function B2Scene() {
     [getListFu]
   );
 
+  // 修改机房编码
+  const [editNum, setEditNum] = useState({ id: 0, num: "", name: "" });
+
   const columns = useMemo(() => {
     return [
       {
         title: "机房编码",
-        render: (item: B2tableType) => item.roomNum || "（空）",
+        render: (item: B2tableType) =>
+          item.roomNum ? (
+            <span
+              onClick={() =>
+                setEditNum({
+                  id: item.id,
+                  num: item.roomNum,
+                  name: item.sceneName,
+                })
+              }
+              className="B2audit"
+            >
+              {item.roomNum}
+            </span>
+          ) : (
+            "（空）"
+          ),
       },
       {
         title: "站址地区",
@@ -189,19 +209,17 @@ function B2Scene() {
         title: "场景链接",
         render: (item: B2tableType) =>
           item.link ? (
-            item.link.length >= 25 ? (
-              <a
-                target="_blank"
-                href={item.link}
-                style={{ cursor: "pointer" }}
-                title={item.link}
-                rel="noreferrer"
-              >
-                {item.link.substring(0, 25) + "..."}
-              </a>
-            ) : (
-              item.link
-            )
+            <a
+              target="_blank"
+              href={item.link}
+              style={{ cursor: "pointer" }}
+              title={item.link}
+              rel="noreferrer"
+            >
+              {item.link.length >= 25
+                ? item.link.substring(0, 25) + "..."
+                : item.link}
+            </a>
           ) : (
             "（空）"
           ),
@@ -546,6 +564,15 @@ function B2Scene() {
       {/* 查看重复的场景 */}
       {lookReDo ? <LookReDo closePageFu={() => setLookReDo(false)} /> : null}
 
+      {/* 修改机房编码 */}
+      {editNum.num ? (
+        <EditNum
+          info={editNum}
+          closeFu={() => setEditNum({ id: 0, num: "", name: "" })}
+          upTableFu={getListFu}
+        />
+      ) : null}
+
       {/*  右下角的列表数量 */}
       <div className="tableNumBox">
         共 <span>{B2TableList.total}</span> 条数据

src/store/action/B2Scene.ts

@@ -50,3 +50,17 @@ export const B2_APIAudit = (data: any) => {
 export const B2_APIlookReDo = () => {
   return http.get("cms/scene/duplicateRoom");
 };
+
+/**
+ * 查询机房编码是否存在
+ */
+export const B2_APIcheckNum = (num: string) => {
+  return http.get(`cms/room/exist/${num}`);
+};
+
+/**
+ * 更新机房编码
+ */
+export const B2_APIeditNum = (id: number, num: string) => {
+  return http.get(`cms/scene/update/${id}/${num}`);
+};