up-机房管理

src/pages/A1Camera/AddCamera/index.tsx

@@ -1,15 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import styles from "./index.module.scss";
 import { A1addType, options1 } from "../data";
 import { Button, Form, FormInstance, Input, Popconfirm, Select } from "antd";
-import {
-  A1_APIadd,
-  A1_APIgetInfo,
-  A1_APIgetUserList,
-} from "@/store/action/A1Camera";
+import { A1_APIadd, A1_APIgetInfo } from "@/store/action/A1Camera";
 import { getTokenInfo } from "@/utils/storage";
 import TextArea from "antd/es/input/TextArea";
 import { MessageFu } from "@/utils/message";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { C1_APIGgetlist } from "@/store/action/C1User";
 
 type Props = {
   openInfo: A1addType;
@@ -19,30 +18,26 @@ type Props = {
 };
 
 function AddCamera({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    // 获取用户列表所有用户信息
+    dispatch(
+      C1_APIGgetlist(
+        {
+          pageSize: 99999,
+          pageNum: 1,
+        },
+        true
+      )
+    );
+  }, [dispatch]);
+
   // 表单的ref
   const FormBoxRef = useRef<FormInstance>(null);
 
   // 获取用户列表的所有用户，用于表单的  项目经理 的下拉
-  const [pmList, setPmList] = useState(
-    [] as { value: number; label: string }[]
-  );
-
-  const getUserListFu = useCallback(async () => {
-    const res = await A1_APIgetUserList({
-      pageSize: 99999,
-      pageNum: 1,
-    });
-    if (res.code === 0) {
-      setPmList(
-        res.data.records.map((v: any) => ({
-          value: v.id,
-          label: `${v.userName} - ${v.roleName}${
-            v.realName ? " - " + v.realName : ""
-          }`,
-        }))
-      );
-    }
-  }, []);
+  const { C1TableListAll } = useSelector((state: RootState) => state.C1User);
 
   // 通过id获取详情
   const getInfoFu = useCallback(async (id: number) => {
@@ -53,15 +48,13 @@ function AddCamera({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
   }, []);
 
   useEffect(() => {
-    getUserListFu();
-
     if (openInfo.txt === "新增") {
       FormBoxRef.current?.setFieldsValue({
         status: "使用中",
         pmUserId: getTokenInfo().user.id,
       });
     } else getInfoFu(openInfo.id);
-  }, [getInfoFu, getUserListFu, openInfo]);
+  }, [getInfoFu, openInfo]);
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {}, []);
@@ -124,7 +117,7 @@ function AddCamera({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
             <Select
               style={{ width: 300 }}
               placeholder="请选择"
-              options={pmList}
+              options={C1TableListAll}
             />
           </Form.Item>
 

src/pages/A2Psychz/AddPsychz/index.module.scss

@@ -0,0 +1,123 @@
+.AddPsychz {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 24px;
+
+  :global {
+    .A2addMain {
+      overflow-y: auto;
+      width: 100%;
+      height: calc(100% - 80px);
+
+      .ant-form {
+        width: 800px;
+      }
+
+      .A2addBtn {
+        position: absolute;
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+
+      }
+
+      .e_row {
+        display: flex;
+        font-size: 14px;
+        margin-bottom: 24px;
+        position: relative;
+
+
+        .e_rowL {
+          position: relative;
+          top: 3px;
+          width: 100px;
+          text-align: right;
+
+          &>span {
+            color: #ff4d4f;
+            position: relative;
+            top: 3px;
+          }
+        }
+
+        .e_rowR {
+          width: calc(100% - 100px);
+
+          .e_rowRrow {
+            display: flex;
+            margin-bottom: 24px;
+            position: relative;
+
+            .anticon {
+              cursor: pointer;
+              font-size: 20px;
+              padding-right: 15px;
+            }
+
+            .e_rowRrowTit {
+              position: absolute;
+              left: 34px;
+              bottom: -10px;
+              font-size: 14px;
+              color: #ff4d4f;
+              transition: all .3s;
+              opacity: 0;
+            }
+
+          }
+
+          .e_rowRrowIconHide {
+            .anticon.anticon-plus-circle {
+              opacity: .5;
+              pointer-events: none;
+            }
+          }
+
+          .e_rowRrowErr {
+            .ant-input-affix-wrapper {
+              border-color: #ff4d4f;
+            }
+
+            .e_rowRrowTit {
+              opacity: 1;
+              bottom: -21px;
+            }
+          }
+
+          .e_rowRrowEdit {
+            .anticon {
+              display: none;
+            }
+
+            .e_rowRrowTit {
+              left: 0;
+            }
+          }
+
+        }
+
+        .e_rowRightTit {
+          position: absolute;
+          right: -110px;
+          top: 0px;
+          font-size: 14px;
+          color: #ff4d4f;
+          opacity: 0;
+          transition: all .3s;
+        }
+
+        .e_rowRightTitShow {
+          top: 4px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

src/pages/A2Psychz/AddPsychz/index.tsx

@@ -0,0 +1,265 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import {
+  Button,
+  Cascader,
+  Form,
+  FormInstance,
+  Input,
+  Popconfirm,
+  Select,
+} from "antd";
+import { A1addType } from "@/pages/A1Camera/data";
+import mapDataAll from "@/pages/C1User/AddUser/city";
+import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+import { C1_APIGgetlist } from "@/store/action/C1User";
+import { RootState } from "@/store";
+import { A2_APIadd, A2_APIgetInfo } from "@/store/action/A2Psychz";
+import { MessageFu } from "@/utils/message";
+import { getTokenInfo } from "@/utils/storage";
+
+type Props = {
+  openInfo: A1addType;
+  closeFu: () => void;
+  upTableFu: () => void;
+  addTableFu: () => void;
+};
+
+function AddPsychz({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A2_APIgetInfo(id);
+    if (res.code === 0) {
+      const data = res.data;
+      let cityBase: null | string[] = null;
+      if (data.province && data.city) cityBase = [data.province, data.city];
+      FormBoxRef.current?.setFieldsValue({
+        ...data,
+        cityBase,
+      });
+      setRoomList([data.roomNum]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (openInfo.txt === "新增") {
+      FormBoxRef.current?.setFieldsValue({
+        pmUserId: getTokenInfo().user.id,
+      });
+    } else getInfoFu(openInfo.id);
+  }, [getInfoFu, openInfo]);
+
+  // 新增的时候的机房编码的数组
+  const [roomList, setRoomList] = useState([""] as string[]);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setIsOk(true);
+  }, []);
+
+  const [isOk, setIsOk] = useState(false);
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (value: any) => {
+      setIsOk(true);
+
+      if (roomList.filter((v) => v).length <= 0) return;
+
+      const obj = {
+        ...value,
+        id: openInfo.txt === "新增" ? null : openInfo.id,
+        province: value.cityBase ? value.cityBase[0] : null,
+        city: value.cityBase ? value.cityBase[1] : null,
+        typeIn: "pc",
+        roomNum: roomList,
+      };
+
+      const res = await A2_APIadd(obj);
+      if (res.code === 0) {
+        MessageFu.success(`${openInfo.txt}成功!`);
+        openInfo.txt === "新增" ? addTableFu() : upTableFu();
+        closeFu();
+      }
+    },
+    [addTableFu, closeFu, openInfo.id, openInfo.txt, roomList, upTableFu]
+  );
+
+  // 获取用户列表的所有用户，用于表单的  项目经理 的下拉
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    // 获取用户列表所有用户信息
+    dispatch(
+      C1_APIGgetlist(
+        {
+          pageSize: 99999,
+          pageNum: 1,
+        },
+        true
+      )
+    );
+  }, [dispatch]);
+
+  const { C1TableListAll } = useSelector((state: RootState) => state.C1User);
+
+  return (
+    <div className={styles.AddPsychz}>
+      <div className="A2addMain">
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          labelCol={{ span: 3 }}
+          name="basic"
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item label="站址地区" name="cityBase">
+            <Cascader
+              style={{ width: 300 }}
+              options={mapDataAll}
+              placeholder="请选择地点"
+            />
+          </Form.Item>
+
+          <Form.Item
+            label="详细地址"
+            name="address"
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+          >
+            <Input maxLength={20} showCount placeholder="请输入内容" />
+          </Form.Item>
+
+          <Form.Item
+            label="站址名称"
+            name="name"
+            rules={[{ required: true, message: "请输入站址名称!" }]}
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+          >
+            <Input maxLength={20} showCount placeholder="请输入内容" />
+          </Form.Item>
+
+          <Form.Item
+            label="站址编号"
+            name="siteNum"
+            rules={[{ required: true, message: "请输入站址编号!" }]}
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+          >
+            <Input maxLength={20} showCount placeholder="请输入内容" />
+          </Form.Item>
+          <Form.Item
+            label="项目经理"
+            name="pmUserId"
+            rules={[{ required: true, message: "请选择项目经理!" }]}
+          >
+            <Select
+              style={{ width: 300 }}
+              placeholder="请选择"
+              options={C1TableListAll}
+            />
+          </Form.Item>
+
+          {/* {openInfo.txt === "新增" ? ( */}
+          <div className="e_row">
+            <div className="e_rowL">
+              <span> * </span>机房编码：
+            </div>
+            <div className="e_rowR">
+              {roomList.map((v, i) => (
+                <div
+                  className={classNames(
+                    "e_rowRrow",
+                    roomList.length >= 10 ? "e_rowRrowIconHide" : "",
+                    isOk && !v ? "e_rowRrowErr" : "",
+                    openInfo.txt==='编辑'?'e_rowRrowEdit':''
+                  )}
+                  key={i}
+                >
+                  <>
+                    {i === 0 ? (
+                      <PlusCircleOutlined
+                        rev={undefined}
+                        onClick={() => setRoomList([...roomList, ""])}
+                      />
+                    ) : (
+                      <Popconfirm
+                        title="删除后无法恢复，是否删除?"
+                        okText="删除"
+                        cancelText="取消"
+                        onConfirm={() =>
+                          setRoomList(roomList.filter((c, ci) => ci !== i))
+                        }
+                        okButtonProps={{ loading: false }}
+                      >
+                        <MinusCircleOutlined rev={undefined} />
+                      </Popconfirm>
+                    )}
+                  </>
+                  <Input
+                    value={v}
+                    onChange={(e) => {
+                      setRoomList(
+                        roomList.map((c, ci) =>
+                          ci === i ? e.target.value.replace(/\s+/g, "") : c
+                        )
+                      );
+                    }}
+                    maxLength={20}
+                    showCount
+                    placeholder="请输入内容"
+                  />
+                  <div className="e_rowRrowTit">请输入机房编码!</div>
+                </div>
+              ))}
+            </div>
+            <div
+              className={classNames(
+                "e_rowRightTit",
+                roomList.length >= 10 ? "e_rowRightTitShow" : ""
+              )}
+            >
+              最多可添加10个
+            </div>
+          </div>
+          {/* ) : (
+            <Form.Item
+              label="机房编码"
+              name="roomNum"
+              rules={[{ required: true, message: "请输入机房编码!" }]}
+              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+            >
+              <Input maxLength={20} showCount placeholder="请输入内容" />
+            </Form.Item>
+          )}
+ */}
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item className="A2addBtn">
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={closeFu}
+              okButtonProps={{ loading: false }}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+const MemoAddPsychz = React.memo(AddPsychz);
+
+export default MemoAddPsychz;

src/pages/A2Psychz/data.ts

@@ -0,0 +1,28 @@
+export type A2FromDataType = {
+  siteLevel: 2;
+  site: string[] | undefined;
+  searchKey: string;
+  pmUser: string;
+  typeIn: "" | "pc" | "app-scan" | "app-manual";
+  pageSize: number;
+  pageNum: number;
+};
+
+export const options1 = [
+  {
+    value: "",
+    label: "全部",
+  },
+  {
+    value: "pc",
+    label: "系统",
+  },
+  {
+    value: "app-scan",
+    label: "移动端扫码",
+  },
+  {
+    value: "app-manual",
+    label: "移动端手工",
+  },
+];

src/pages/A2Psychz/index.module.scss

@@ -1,5 +1,43 @@
-.A2Psychz{
-  :global{
-    
+.A2Psychz {
+  position: relative;
+
+  :global {
+    .A2top {
+      display: flex;
+      justify-content: space-between;
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 15px 10px;
+
+      // 级联选择器的 placeholder
+      .ant-select-selection-placeholder{
+        color: black;
+      }
+
+      &>div {
+        display: flex;
+
+        .A2topRow {
+          margin-right: 10px;
+          &:last-child{
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .tableMain {
+      border-radius: 10px;
+      margin-top: 15px;
+      height: calc(100% - 80px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 625px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+      }
+    }
   }
 }

src/pages/A2Psychz/index.tsx

@@ -1,12 +1,366 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
- function A2Psychz() {
-  
+import { Button, Cascader, Input, Popconfirm, Select, Table } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { A2FromDataType, options1 } from "./data";
+import mapDataAll from "../C1User/AddUser/city";
+import {
+  A2_APIgetlist,
+  A2_APIgetlistDerive,
+  A2_APIremoves,
+} from "@/store/action/A2Psychz";
+import { RootState } from "@/store";
+import { A2tableType } from "@/types";
+import { MessageFu } from "@/utils/message";
+import { A1addType } from "../A1Camera/data";
+import AddPsychz from "./AddPsychz";
+import dayjs from "dayjs";
+import ExportJsonExcel from "js-export-excel";
+
+function A2Psychz() {
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState<A2FromDataType>({
+    siteLevel: 2,
+    site: undefined,
+    searchKey: "",
+    pmUser: "",
+    typeIn: "",
+    pageSize: 10,
+    pageNum: 1,
+  });
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    const obj = {
+      ...tableSelect,
+      site: tableSelect.site ? tableSelect.site[1] : null,
+    };
+    dispatch(A2_APIgetlist(obj));
+  }, [dispatch, tableSelect]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 输入框的改变
+  const txtTimeRef = useRef(-1);
+  const txtChangeFu = useCallback(
+    (txt: string, key: "pmUser" | "searchKey") => {
+      clearTimeout(txtTimeRef.current);
+      txtTimeRef.current = window.setTimeout(() => {
+        setTableSelect({ ...tableSelect, [key]: txt, pageNum: 1 });
+      }, 500);
+    },
+    [tableSelect]
+  );
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setTableSelect({
+      siteLevel: 2,
+      site: undefined,
+      searchKey: "",
+      pmUser: "",
+      typeIn: "",
+      pageSize: 10,
+      pageNum: 1,
+    });
+  }, []);
+
+  // 从仓库获取列表
+  const A2TableList = useSelector(
+    (state: RootState) => state.A2Psychz.A2TableList
+  );
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+    },
+    [tableSelect]
+  );
+
+  // 点击删除
+  const delByIdFu = useCallback(
+    async (id: number) => {
+      const res = await A2_APIremoves(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "站址地区",
+        render: (item: A2tableType) =>
+          !item.province && !item.city
+            ? "（空）"
+            : `${item.province} - ${item.city}`,
+      },
+      {
+        title: "详细地址",
+        render: (item: A2tableType) =>
+          item.address ? (
+            item.address.length >= 25 ? (
+              <span style={{ cursor: "pointer" }} title={item.address}>
+                {item.address.substring(0, 25) + "..."}
+              </span>
+            ) : (
+              item.address
+            )
+          ) : (
+            "（空）"
+          ),
+      },
+      {
+        title: "站址名称",
+        dataIndex: "name",
+      },
+      {
+        title: "站址编号",
+        dataIndex: "siteNum",
+      },
+      {
+        title: "机房编码",
+        dataIndex: "roomNum",
+      },
+      {
+        title: "项目经理",
+        render: (item: A2tableType) => {
+          if (item.pmUserId === 1) return "管理员";
+          else {
+            return item.pmName || "匿名";
+          }
+        },
+      },
+      {
+        title: "最近编辑时间",
+        dataIndex: "updateTime",
+      },
+
+      {
+        title: "录入方式",
+        render: (item: A2tableType) =>
+          item.typeIn === "pc"
+            ? "系统"
+            : item.typeIn === "app-scan"
+            ? "移动端扫码"
+            : "移动端手工",
+      },
+      {
+        title: "操作",
+        render: (item: A2tableType) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => setOpenInfo({ id: item.id, txt: "编辑" })}
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delByIdFu(item.id)}
+              okButtonProps={{ loading: false }}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delByIdFu]);
+
+  const [openInfo, setOpenInfo] = useState<A1addType>({ id: 0, txt: "" });
+
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    if (A2TableList.list.length === 0)
+      return MessageFu.warning("当前搜索条件没有数据!");
+    const name = "机房管理" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
+
+    const res = await A2_APIgetlistDerive({
+      ...tableSelect,
+      site: tableSelect.site ? tableSelect.site[1] : null,
+      pageNum: 1,
+      pageSize: 99999,
+    });
+
+    if (res.code === 0) {
+      const option = {
+        fileName: name,
+        datas: [
+          {
+            sheetData: res.data.records.map((v: A2tableType) => ({
+              ...v,
+              myCity:
+                !v.province && !v.city ? "（空）" : `${v.province} - ${v.city}`,
+              address: v.address ? v.address : "（空）",
+              pmName: v.pmUserId === 1 ? "管理员" : v.pmName || "匿名",
+              typeIn:
+                v.typeIn === "pc"
+                  ? "系统"
+                  : v.typeIn === "app-scan"
+                  ? "移动端扫码"
+                  : "移动端手工",
+            })),
+            sheetName: name,
+            sheetFilter: [
+              "myCity",
+              "address",
+              "name",
+              "siteNum",
+              "roomNum",
+              "pmName",
+              "updateTime",
+              "typeIn",
+            ],
+            sheetHeader: [
+              "站址地区",
+              "详细地址",
+              "站址名称",
+              "站址编号",
+              "机房编码",
+              "项目经理",
+              "最近编辑时间",
+              "录入方式",
+            ],
+            columnWidths: [10, 10, 10, 10, 10, 10, 10, 10],
+          },
+        ],
+      };
+
+      const toExcel = new ExportJsonExcel(option); //new
+      toExcel.saveExcel(); //保存
+    }
+  }, [A2TableList.list.length, tableSelect]);
+
   return (
     <div className={styles.A2Psychz}>
-      <h1>A2Psychz</h1>
+      <div className="pageTitle">
+        {openInfo.txt === "新增"
+          ? "新增机房"
+          : openInfo.txt === "编辑"
+          ? "编辑机房"
+          : "机房管理"}
+      </div>
+      {/* 顶部筛选 */}
+      <div className="A2top">
+        {/* 左侧输入框 */}
+        <div className="A2top1">
+          <div className="A2topRow">
+            <span>站址地区：</span>
+            <Cascader
+              value={tableSelect.site}
+              style={{ width: 160 }}
+              options={mapDataAll}
+              placeholder="全部"
+              onChange={(e) =>
+                setTableSelect({ ...tableSelect, site: e as string[] })
+              }
+            />
+          </div>
+
+          <div className="A2topRow">
+            <span>搜索项：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 323 }}
+              placeholder="请输入站址名称/站置编号/机房编码,最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
+            />
+          </div>
+
+          <div className="A2topRow">
+            <span>项目经理：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 174 }}
+              placeholder="请输入姓名,最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
+            />
+          </div>
+
+          <div className="A2topRow">
+            <span>录入方式：</span>
+            <Select
+              style={{ width: 116 }}
+              value={tableSelect.typeIn}
+              onChange={(e) =>
+                setTableSelect({ ...tableSelect, typeIn: e, pageNum: 1 })
+              }
+              options={options1}
+            />
+          </div>
+        </div>
+        {/* 右侧按钮 */}
+        <div className="A2top2">
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button
+            type="primary"
+            onClick={() => setOpenInfo({ id: -1, txt: "新增" })}
+          >
+            新增
+          </Button>
+          &emsp;
+          <Button type="primary" onClick={deriveFu}>
+            导出表格
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          scroll={{ y: 625 }}
+          dataSource={A2TableList.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: A2TableList.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
+
+      {/* 新增和编辑出来的页面 */}
+      {openInfo.id ? (
+        <AddPsychz
+          openInfo={openInfo}
+          closeFu={() => setOpenInfo({ id: 0, txt: "" })}
+          upTableFu={getListFu}
+          addTableFu={resetSelectFu}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoA2Psychz = React.memo(A2Psychz);

src/pages/Layout/index.tsx

@@ -19,7 +19,6 @@ import { passWordEditAPI } from "@/store/action/layout";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
 import { MessageFu } from "@/utils/message";
 import logoImg from "@/assets/img/logo.png";
-import { useDispatch } from "react-redux";
 import NotFound from "@/components/NotFound";
 
 import { RouterType, RouterTypeRow } from "@/types";
@@ -27,10 +26,6 @@ import tabLeftArr from "./data";
 import { C1_APIgetInfo } from "@/store/action/C1User";
 
 function Layout() {
-  const dispatch = useDispatch();
-
-  useEffect(() => {}, [dispatch]);
-
   // 左侧菜单 和 路由 信息
   const [list, setList] = useState([] as RouterType);
 

src/store/action/A1Camera.ts

@@ -24,13 +24,6 @@ export const A1_APIgetlistDerive = (data: any) => {
 };
 
 /**
- * 获取 用户管理 表格列表（项目经理的 表单下拉）
- */
-export const A1_APIgetUserList = (data: any) => {
-  return http.post("sys/user/pageList", data);
-};
-
-/**
  * 删除单个表格数据
  */
 export const A1_APIremove = (id: number) => {

src/store/action/A2Psychz.ts

@@ -0,0 +1,48 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取 机房管理 表格列表（存到仓库）
+ */
+export const A2_APIgetlist = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/room/pageList", data);
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+      // console.log(123,obj);
+
+      dispatch({ type: "A2/getList", payload: obj });
+    }
+  };
+};
+
+/**
+ * 获取 机房管理 表格列表（导出表格）
+ */
+export const A2_APIgetlistDerive = (data:any) => {
+  return http.post("cms/room/pageList", data);
+};
+
+/**
+ * 删除表格单个
+ */
+export const A2_APIremoves = (id: number) => {
+  return http.get(`cms/room/remove/${id}`);
+};
+
+/**
+ * 新增/编辑
+ */
+export const A2_APIadd = (data: any) => {
+  return http.post("cms/room/save", data);
+};
+
+/**
+ * 通过id获取详情
+ */
+export const A2_APIgetInfo = (id:number) => {
+  return http.get(`cms/room/detail/${id}`);
+};

src/store/action/C1User.ts

@@ -3,7 +3,7 @@ import { AppDispatch } from "..";
 /**
  * 获取 用户管理 表格列表（存到仓库）
  */
-export const C1_APIGgetlist = (data: any) => {
+export const C1_APIGgetlist = (data: any, falg?: boolean) => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post("sys/user/pageList", data);
     if (res.code === 0) {
@@ -11,8 +11,17 @@ export const C1_APIGgetlist = (data: any) => {
         list: res.data.records,
         total: res.data.total,
       };
-
-      dispatch({ type: "C1/getList", payload: obj });
+      if (falg) {
+        dispatch({
+          type: "C1/getListAll",
+          payload: obj.list.map((v: any) => ({
+            value: v.id,
+            label: `${v.userName} - ${v.roleName}${
+              v.realName ? " - " + v.realName : ""
+            }`,
+          })),
+        });
+      } else dispatch({ type: "C1/getList", payload: obj });
     }
   };
 };

src/store/reducer/A2Psychz.ts

@@ -0,0 +1,27 @@
+import { A2tableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  A2TableList: {
+    list: [] as A2tableType[],
+    total: 0,
+  },
+};
+
+// 定义 action 类型
+type Props = {
+  type: "A2/getList";
+  payload: { list: A2tableType[]; total: number };
+};
+
+// reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "A2/getList":
+      return { ...state, A2TableList: action.payload };
+    default:
+      return state;
+  }
+}

src/store/reducer/C1User.ts

@@ -7,13 +7,13 @@ const initState = {
     list: [] as C1ListType[],
     total: 0,
   },
+  C1TableListAll: [] as C1ListType[],
 };
 
 // 定义 action 类型
-type Props = {
-  type: "C1/getList";
-  payload: { list: C1ListType[]; total: number };
-};
+type Props =
+  | { type: "C1/getList"; payload: { list: C1ListType[]; total: number } }
+  | { type: "C1/getListAll"; payload: C1ListType[] };
 
 // reducer
 export default function Reducer(state = initState, action: Props) {
@@ -21,6 +21,8 @@ export default function Reducer(state = initState, action: Props) {
     // 获取列表数据
     case "C1/getList":
       return { ...state, C1TableList: action.payload };
+    case "C1/getListAll":
+      return { ...state, C1TableListAll: action.payload };
     default:
       return state;
   }

src/store/reducer/index.ts

@@ -4,6 +4,7 @@ import { combineReducers } from "redux";
 // 导入 登录 模块的 reducer
 import A0Layout from "./layout";
 import A1Camera from "./A1Camera";
+import A2Psychz from "./A2Psychz";
 import C1User from "./C1User";
 import C2Log from "./C2Log";
 
@@ -11,6 +12,7 @@ import C2Log from "./C2Log";
 const rootReducer = combineReducers({
   A0Layout,
   A1Camera,
+  A2Psychz,
   C1User,
   C2Log,
 });

src/types/api/A2Psychz.d.ts

@@ -0,0 +1,17 @@
+export type A2tableType ={
+	address: string;
+	city: string;
+	createTime: string;
+	creatorId?: any;
+	creatorName: string;
+	hasScene?: any;
+	id: number;
+	name: string;
+	pmName: string;
+	pmUserId?: any;
+	province: string;
+	roomNum: string;
+	siteNum: string;
+	typeIn: string;
+	updateTime: string;
+}

src/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './api/layot'
 export * from './api/A1Camera'
+export * from './api/A2Psychz'
 export * from './api/C1User'
 export * from './api/C2Log'