feat(): 新增路外远程运维管理页面

src/pages/OutRoadMgm/OutRemoteDevice/index.jsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect } from "react";
-import { message, Pagination, Table, Select, Input, DatePicker, Button, Popover, Modal } from "antd";
+import { message, Pagination, Table, Select, Input, Spin, Button, Modal } from "antd";
 import { connect } from "react-redux";
 import loadable from "@loadable/component"
 import { LoadingImg } from "@/components"
@@ -11,16 +11,24 @@ import ajax from "@/services";
 import "./index.scss";
 
 function OutRemoteDevice(props) {
+  const { TextArea } = Input;
   const uid = props?.user?.userInfo?.user_uid;
-  console.log(uid);
   // 默认数据
   const defaultData = {
     pn: 1,
     page_size: dictionary?.pageSizeOptions1[0]
   };
-  const [formData, setFormData] = useState(defaultData); // 表单数据
+  const manageDefault = {
+    version: "", // 版本
+    note: "", // 描述
+  };
+  const [formData, setFormData] = useState(defaultData); // 分页切换
   const [loading, setLoading] = useState(false); // 检索按钮加载状态
-  
+  const [modalOpen, setModalOpen] = useState(false);  // 模态框
+  const [modalLoad, setModalLoad] = useState(false);  // 模态框提交加载
+  const [versionData, setVersionData] = useState([]); // 版本数据
+  const [manageForm, setManageForm] = useState(manageDefault); // 模态框表单数据
+
   // 表格返回数据
   const [resultData, setResultData] = useState({
     total_records: 0,
@@ -71,6 +79,45 @@ function OutRemoteDevice(props) {
     $getTableList(temFormData);
   };
 
+  // 新增
+  const $addVersion = () => {
+    let _data = {
+      ...manageForm,
+      uid
+    };
+    if (!manageForm?.version) return message.error("请选择版本！");
+    if (!manageForm?.note) return message.error("请请输入描述！");
+    setModalLoad(true);
+    ajax.getOutRemoteDeviceVersionAdd(_data).then((res) => {
+      setModalLoad(false);
+      if (res.status === 20000) {
+        message.success(res?.message || "升级成功");
+        setFormData(defaultData);
+        $getTableList(defaultData);
+        setModalOpen(false);
+        setManageForm(manageDefault);
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      setModalLoad(false);
+      message.error(error.message);
+    });
+  };
+
+  // 获取版本数据
+  const $versionSel = () => {
+    ajax.getOutRemoteDeviceVersionData().then((res) => {
+      if (res.status === 20000) {
+        setVersionData(res?.data?.list || []);
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      message.error(error.message);
+    });
+  };
+
   // 获取表格数据
   const $getTableList = (value = {}) => {
     let _data = {
@@ -94,6 +141,7 @@ function OutRemoteDevice(props) {
   };
   useEffect(() => {
     $getTableList();
+    $versionSel();
   }, []);
 
   return (
@@ -102,7 +150,7 @@ function OutRemoteDevice(props) {
         <div className="result">
           <div className="row-head">
             <span className="number-wrapper">共查询到<span className="total-number"> {resultData.total_records || 0} </span>条结果</span>
-            <div >
+            <div onClick={() => setModalOpen(true)}>
               <Button type="primary">
                 前场管理系统升级
               </Button>
@@ -132,17 +180,56 @@ function OutRemoteDevice(props) {
           </div>
         </div>
       </div>
+
+      <Modal
+        title="前场管理系统升级"
+        className="remote-device-management-modal"
+        open={modalOpen}
+        onOk={() => {if(modalLoad) return; $addVersion()}}
+        onCancel={() => {
+          if(modalLoad) return;
+          setModalOpen(false); setManageForm(manageDefault)
+        }}
+      >
+        <Spin tip="升级中..." spinning={modalLoad}  size="large">
+          <div className="result-data-modal">
+            <div className="yisa-search">
+              <label><em>*</em>版本</label>
+              <Select
+                className="form-con"
+                placeholder="请选择版本"
+                getPopupContainer={(node) => node.parentElement}
+                options={versionData}
+                value={manageForm?.version || null}
+                onChange={(v) => setManageForm({ ...manageForm, version: v || "" })}
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>描述</label>
+              <TextArea
+                maxLength={200}
+                autoSize={{ minRows: 4 }}
+                className="form-con text-input"
+                showCount
+                placeholder="请输入描述"
+                value={manageForm?.note || ""}
+                onChange={(e) => { setManageForm({ ...manageForm, note: e?.target?.value || "" }) }}
+              />
+            </div>
+          </div>
+        </Spin>
+      </Modal>
     </div>
   );
 }
 
-export default  connect(function mapStateToProps(state) {
+export default connect(function mapStateToProps(state) {
   return {
     user: state.user,
   };
 })((props) => {
 
-  return(
+  return (
     <OutRemoteDevice {...props} fallback={<LoadingImg />} />
   )
 })

src/pages/OutRoadMgm/OutRemoteDevice/index.scss

@@ -40,4 +40,41 @@ $color-primary: var(--color-primary);
       }
     }
   }
+}
+
+.remote-device-management-modal {
+  .result-data-modal {
+    .yisa-search {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-bottom: 24px;
+      >label {
+        color: var(--color-search-list-item-text);
+        width: 50px;
+        text-align: right;
+        padding-right: 8px;
+        >em {
+          margin-right: 5px;
+          color: #a61d24;
+        }
+      }
+      &:last-child {
+        align-items: start;
+        margin-bottom: 0;
+      }
+      .form-con {
+        width: 220px;
+      }
+      .text-input {
+        width: calc(100% - 50px);
+        .ant-input {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  .ant-modal-footer {
+    padding: 0 16px 20px;
+  }
 }

src/router/router.config.js

@@ -1181,7 +1181,7 @@ let routes = [
       {
         // -------------------------------远程运维管理
         path: "/outRoad/outRemoteDevice",
-        text: "概览",
+        text: "远程运维管理",
         name: "outRemoteDevice",
         component: pages.OutRemoteDevice,
       },

src/services/OutRoadMgm/OutPersonMgm.js

@@ -79,4 +79,23 @@ export default {
       data,
     });
   },
+
+  // 远程运维管理--版本列表数据
+  getOutRemoteDeviceVersionData: (data) => {
+    return ajax({
+      url: "/api/bpm/remote/show_version_list",
+      type: "post",
+      data,
+    });
+  },
+
+  // 远程运维管理--新增版本信息
+  getOutRemoteDeviceVersionAdd: (data) => {
+      return ajax({
+        url: "/api/bpm/remote/add_version",
+        type: "post",
+        data,
+      });
+    },
+
 };