diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss
index 69fbf30..f0cd748 100644
--- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss
+++ b/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;
diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx
index 2609c69..3187b9f 100644
--- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx
+++ b/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 (
<>
@@ -468,7 +573,13 @@ function OutMonitorMgm(props) {
-
@@ -557,6 +668,48 @@ function OutMonitorMgm(props) {
+ setVisible1(false)}
+ footer={null}
+ className="modal-monitor"
+ title={"批量导入"}
+ >
+
+
+ 1.请先获取批量导入的Excel模板将需要添加的信息填写后进行上传该Excel文件,
+ 上传非规范文件可能造成数据错误,
+ 点击下载模板文件。
+
+
2.请选择上传文件,并上传。
+
+ }>点击上传
+
+
+ {fileList?.length
+ ? fileList.map((v, i) => {
+ return (
+
+ {v || "-"}
+ delFileItem(i)}>
+
+
+
+ );
+ })
+ : null}
+
+
+
+ 确定
+
+ setVisible1(false)}>
+ 取消
+
+
+
+
>
);
diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss
index f016fc4..2a81cd8 100644
--- a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss
+++ b/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;
diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx
index 7cc0fe8..99b3a07 100644
--- a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx
+++ b/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 (
<>
@@ -457,7 +563,13 @@ function OutNvrMgm(props) {
添加
-
+ {
+ setFileList([]);
+ setVisible1(true);
+ }}
+ >
导入
@@ -593,6 +705,48 @@ function OutNvrMgm(props) {
+ setVisible1(false)}
+ footer={null}
+ className="modal-monitor"
+ title={"批量导入"}
+ >
+
+
+ 1.请先获取批量导入的Excel模板将需要添加的信息填写后进行上传该Excel文件,
+ 上传非规范文件可能造成数据错误,
+ 点击下载模板文件。
+
+
2.请选择上传文件,并上传。
+
+ }>点击上传
+
+
+ {fileList?.length
+ ? fileList.map((v, i) => {
+ return (
+
+ {v || "-"}
+ delFileItem(i)}>
+
+
+
+ );
+ })
+ : null}
+
+
+
+ 确定
+
+ setVisible1(false)}>
+ 取消
+
+
+
+
>
);