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} +
+
+ + +
+
+
); 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) { -
@@ -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} +
+
+ + +
+
+
);