fix(): 设备管理页面修改

src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss

@@ -220,6 +220,37 @@ $color-primary : var(--color-primary);
     }
   }
 
+  .file-list {
+    padding: 10px;
+    width: 100%;
+
+    >div+div {
+      margin-top: 10px;
+    }
+
+    >div {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      span {
+        &:first-child {
+          // max-width: calc(100% - 20px);
+          flex: auto;
+          @include textEllipsis();
+        }
+
+        &:last-child {
+          width: 16px;
+          height: 16px;
+          color: #ff4d4f;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
   .submitBtn {
     text-align: center;
     margin-top: 20px;

src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx

@@ -11,11 +11,13 @@ import {
   Dropdown,
   Form,
   Transfer,
+  Upload,
 } from "antd";
+import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
 import { dictionary } from "@/config/common";
+import { getToken } from "@/config/cookie";
 import moment from "moment";
 import "./index.scss";
-import { DeleteOutlined } from "@ant-design/icons";
 import ajax from "@/services";
 function OutMonitorMgm(props) {
   const [form] = Form.useForm();
@@ -63,6 +65,10 @@ function OutMonitorMgm(props) {
   };
   // 行数据
   const [rowData, setRowData] = useState(defRowData);
+  // 模版弹窗
+  const [visible1, setVisible1] = useState(false);
+  // 上传文件数组
+  const [fileList, setFileList] = useState([]);
 
   useEffect(() => {
     getNvrList();
@@ -390,6 +396,105 @@ function OutMonitorMgm(props) {
     setVisible(true);
   };
 
+  // 下载模板
+  const downloadTemplate = (e) => {
+    // 获取模板地址
+    ajax.monitorAdd().then(
+      (res) => {
+        if (res.status === 20000 && res?.data) {
+          window.location.href = res?.data;
+        } else {
+          message.error(res.message);
+        }
+      },
+      (err) => {
+        message.error("服务器连接失败！");
+        console.log(err);
+      }
+    );
+  };
+
+  // 上传参数
+  const upArgs = {
+    name: "file",
+    action: baseApi + "/api/com/common/file_upload",
+    headers: {
+      Authorization: getToken(),
+    },
+    // method: 'post',
+    showUploadList: false,
+    beforeUpload(file) {
+      // Excel表格 xls、xlsx格式，大小不得超过50M
+      if (file.size > 50 * 1024 * 1024) {
+        message.error("上传文件超过50M，请重新选择！");
+        return false;
+      } else {
+        const formatArr = [
+          "application/vnd.ms-excel",
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ];
+        let isFormat = formatArr.includes(file.type);
+        if (!isFormat) {
+          message.error("该文件类型不支持，请重新选择！");
+        }
+        return isFormat;
+      }
+    },
+
+    onChange(info) {
+      //状态有：uploading done error removed
+      if (info.file.status === "uploading") {
+        // console.log(info.file, info.fileList);
+        return;
+      }
+      // console.log(info.file.percent);
+      if (info.file.status === "done") {
+        let res = info.file.response;
+        if (parseInt(res?.status) === 20000) {
+          message.success(res.message);
+          const newArr = [...fileList];
+          newArr.push(res?.data || "");
+          setFileList(newArr);
+        } else {
+          message.warn(res.message);
+        }
+      }
+      if (info.file.status === "error") {
+        message.error("上传失败！");
+      }
+    },
+  };
+
+  // 删除文件
+  const delFileItem = (num) => {
+    const newArr = [...fileList];
+    setFileList(newArr.filter((v, i) => i != num));
+  };
+
+  // 确认上传
+  const handleSubmit = () => {
+    // console.log(fileList);
+    if (!fileList?.length) {
+      message.error("请上传文件");
+      return;
+    }
+    ajax.monitorAdd({ files: fileList }).then(
+      (res) => {
+        if (res?.status == 20000) {
+          message.success(res?.message);
+          setPageInfo({ ...pageInfo, ...{ pn: 1 } });
+          setIsAjax(!isAjax);
+          setVisible1(false);
+        } else {
+          message.error(res.message);
+        }
+      },
+      (err) => {
+        console.log(err);
+      }
+    );
+  };
+
   return (
     <>
       <div className="out-monitor-mgm">
@@ -468,7 +573,13 @@ function OutMonitorMgm(props) {
                 <Button type="primary" className="green" onClick={handleAdd}>
                   添加
                 </Button>
-                <Button type="primary" onClick={handleAdd}>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    setFileList([]);
+                    setVisible1(true);
+                  }}
+                >
                   导入
                 </Button>
               </div>
@@ -557,6 +668,48 @@ function OutMonitorMgm(props) {
             </Form>
           </div>
         </Modal>
+        <Modal
+          open={visible1}
+          width={720}
+          onCancel={() => setVisible1(false)}
+          footer={null}
+          className="modal-monitor"
+          title={"批量导入"}
+        >
+          <div className="form-container">
+            <p>
+              1.请先获取批量导入的Excel模板将需要添加的信息填写后进行上传该Excel文件，
+              上传非规范文件可能造成数据错误，
+              <a onClick={downloadTemplate}>点击下载</a>模板文件。
+            </p>
+            <p>2.请选择上传文件，并上传。</p>
+            <Upload {...upArgs}>
+              <Button icon={<UploadOutlined />}>点击上传</Button>
+            </Upload>
+            <div className="file-list">
+              {fileList?.length
+                ? fileList.map((v, i) => {
+                    return (
+                      <div key={"v" + i}>
+                        <span title={v || "-"}>{v || "-"}</span>
+                        <span onClick={() => delFileItem(i)}>
+                          <DeleteOutlined />
+                        </span>
+                      </div>
+                    );
+                  })
+                : null}
+            </div>
+            <div className="submitBtn">
+              <Button type="primary" className="submit" onClick={handleSubmit}>
+                确定
+              </Button>
+              <Button className="cancel" onClick={() => setVisible1(false)}>
+                取消
+              </Button>
+            </div>
+          </div>
+        </Modal>
       </div>
     </>
   );

src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss

@@ -207,6 +207,37 @@ $color-primary : var(--color-primary);
     }
   }
 
+  .file-list {
+    padding: 10px;
+    width: 100%;
+
+    >div+div {
+      margin-top: 10px;
+    }
+
+    >div {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      span {
+        &:first-child {
+          // max-width: calc(100% - 20px);
+          flex: auto;
+          @include textEllipsis();
+        }
+
+        &:last-child {
+          width: 16px;
+          height: 16px;
+          color: #ff4d4f;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
   .submitBtn {
     text-align: center;
     margin-top: 20px;

src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx

@@ -10,11 +10,13 @@ import {
   Modal,
   Dropdown,
   Form,
+  Upload,
 } from "antd";
+import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
 import { dictionary } from "@/config/common";
+import { getToken } from "@/config/cookie";
 import moment from "moment";
 import "./index.scss";
-import { DeleteOutlined } from "@ant-design/icons";
 import ajax from "@/services";
 function OutNvrMgm(props) {
   const [form] = Form.useForm();
@@ -67,6 +69,10 @@ function OutNvrMgm(props) {
   };
   // 行数据
   const [rowData, setRowData] = useState(defRowData);
+  // 模版弹窗
+  const [visible1, setVisible1] = useState(false);
+  // 上传文件数组
+  const [fileList, setFileList] = useState([]);
 
   useEffect(() => {
     getSelectList();
@@ -379,6 +385,106 @@ function OutNvrMgm(props) {
     // form.resetFields();
     setVisible(true);
   };
+
+  // 下载模板
+  const downloadTemplate = (e) => {
+    // 获取模板地址
+    ajax.monitorAdd().then(
+      (res) => {
+        if (res.status === 20000 && res?.data) {
+          window.location.href = res?.data;
+        } else {
+          message.error(res.message);
+        }
+      },
+      (err) => {
+        message.error("服务器连接失败！");
+        console.log(err);
+      }
+    );
+  };
+
+  // 上传参数
+  const upArgs = {
+    name: "file",
+    action: baseApi + "/api/com/common/file_upload",
+    headers: {
+      Authorization: getToken(),
+    },
+    // method: 'post',
+    showUploadList: false,
+    beforeUpload(file) {
+      // Excel表格 xls、xlsx格式，大小不得超过50M
+      if (file.size > 50 * 1024 * 1024) {
+        message.error("上传文件超过50M，请重新选择！");
+        return false;
+      } else {
+        const formatArr = [
+          "application/vnd.ms-excel",
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ];
+        let isFormat = formatArr.includes(file.type);
+        if (!isFormat) {
+          message.error("该文件类型不支持，请重新选择！");
+        }
+        return isFormat;
+      }
+    },
+
+    onChange(info) {
+      //状态有：uploading done error removed
+      if (info.file.status === "uploading") {
+        // console.log(info.file, info.fileList);
+        return;
+      }
+      // console.log(info.file.percent);
+      if (info.file.status === "done") {
+        let res = info.file.response;
+        if (parseInt(res?.status) === 20000) {
+          message.success(res.message);
+          const newArr = [...fileList];
+          newArr.push(res?.data || "");
+          setFileList(newArr);
+        } else {
+          message.warn(res.message);
+        }
+      }
+      if (info.file.status === "error") {
+        message.error("上传失败！");
+      }
+    },
+  };
+
+  // 删除文件
+  const delFileItem = (num) => {
+    const newArr = [...fileList];
+    setFileList(newArr.filter((v, i) => i != num));
+  };
+
+  // 确认上传
+  const handleSubmit = () => {
+    // console.log(fileList);
+    if (!fileList?.length) {
+      message.error("请上传文件");
+      return;
+    }
+    ajax.monitorAdd({ files: fileList }).then(
+      (res) => {
+        if (res?.status == 20000) {
+          message.success(res?.message);
+          setPageInfo({ ...pageInfo, ...{ pn: 1 } });
+          setIsAjax(!isAjax);
+          setVisible1(false);
+        } else {
+          message.error(res.message);
+        }
+      },
+      (err) => {
+        console.log(err);
+      }
+    );
+  };
+
   return (
     <>
       <div className="out-nvr-mgm">
@@ -457,7 +563,13 @@ function OutNvrMgm(props) {
                 <Button type="primary" className="green" onClick={handleAdd}>
                   添加
                 </Button>
-                <Button type="primary" onClick={handleAdd}>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    setFileList([]);
+                    setVisible1(true);
+                  }}
+                >
                   导入
                 </Button>
               </div>
@@ -593,6 +705,48 @@ function OutNvrMgm(props) {
             </Form>
           </div>
         </Modal>
+        <Modal
+          open={visible1}
+          width={720}
+          onCancel={() => setVisible1(false)}
+          footer={null}
+          className="modal-monitor"
+          title={"批量导入"}
+        >
+          <div className="form-container">
+            <p>
+              1.请先获取批量导入的Excel模板将需要添加的信息填写后进行上传该Excel文件，
+              上传非规范文件可能造成数据错误，
+              <a onClick={downloadTemplate}>点击下载</a>模板文件。
+            </p>
+            <p>2.请选择上传文件，并上传。</p>
+            <Upload {...upArgs}>
+              <Button icon={<UploadOutlined />}>点击上传</Button>
+            </Upload>
+            <div className="file-list">
+              {fileList?.length
+                ? fileList.map((v, i) => {
+                    return (
+                      <div key={"v" + i}>
+                        <span title={v || "-"}>{v || "-"}</span>
+                        <span onClick={() => delFileItem(i)}>
+                          <DeleteOutlined />
+                        </span>
+                      </div>
+                    );
+                  })
+                : null}
+            </div>
+            <div className="submitBtn">
+              <Button type="primary" className="submit" onClick={handleSubmit}>
+                确定
+              </Button>
+              <Button className="cancel" onClick={() => setVisible1(false)}>
+                取消
+              </Button>
+            </div>
+          </div>
+        </Modal>
       </div>
     </>
   );