(*)删除网关

code/web/client/src/sections/edition/actions/index.js

@@ -71,6 +71,17 @@ export function postVersion(data) {
         });
 }
 
+export function delGateway(id) {
+    return dispatch => basicAction({
+        type: 'delete',
+        dispatch: dispatch,
+        actionType: 'DELETE_GATEWAY',
+        url: ApiTable.delGateway.replace('{id}', id),
+        msg: { option: '删除网关' },
+        reducer: { name: '' }
+    });
+}
+
 export function gatewaySsh(id) {
     return dispatch => basicAction({
         type: 'post',
@@ -109,6 +120,7 @@ export default {
     getGateways,
     getGatewayStatus,
     ableGateway,
+    delGateway,
     gatewaySsh,
     rebootGateway,
     restartGateway,

code/web/client/src/sections/edition/containers/gateway.jsx

@@ -5,7 +5,7 @@ import { push } from 'react-router-redux';
 import { Popconfirm, Button, Popover, Skeleton, Table, Tag } from '@douyinfe/semi-ui';
 import { SkeletonScreen } from "$components";
 import GatewayStatusModal from './gatewayStatusModal'
-import GatewayEditModal from './gatewayEditModal'
+import GatewayModal from './gatewayModal'
 
 const GatewayManage = props => {
     const { dispatch, user, error, actions } = props
@@ -14,8 +14,9 @@ const GatewayManage = props => {
     const [tableData, setTableData] = useState([]);
     const [limits, setLimits] = useState()//每页实际条数
     const [detailV, setDetailV] = useState(false)
-    const [editV, setEditV] = useState(false)
     const [dataToModal, setDataToModal] = useState(null)
+    const [deviceModalV, setDeviceModalV] = useState(false)
+
     useEffect(() => {
         getTableData(query)
     }, [])
@@ -100,12 +101,23 @@ const GatewayManage = props => {
                     </Popconfirm>
 
                     <a style={{ ...aStyle, marginLeft: 15 }} onClick={() => {
-                        setEditV(true)
+                        setDeviceModalV(true)
                         setDataToModal(record)
                     }}>编辑</a>
-                    <a style={{ ...aStyle, marginLeft: 15 }} onClick={() => {
 
-                    }}>删除</a>
+                    <Popconfirm
+                        title="提示"
+                        content={`确认删除该网关？`}
+                        onConfirm={() => {
+                            dispatch(edition.delGateway(record.id)).then(r => {
+                                if (r.success) {
+                                    getTableData(query)
+                                }
+                            })
+                        }}>
+                        <a style={{ ...aStyle, marginLeft: 15 }}>删除</a>
+                    </Popconfirm>
+
                     <Popover key={Math.random()} content={renderPopover(record)} trigger='click' position='right'>
                         <a style={{ ...aStyle, marginLeft: 15 }}>更多...</a>
                     </Popover>
@@ -177,7 +189,7 @@ const GatewayManage = props => {
                             marginLeft: 21,
                         }}
                     >
-                  设备管理
+                        设备列表
                     </div>
                     <div
                         style={{
@@ -186,7 +198,7 @@ const GatewayManage = props => {
                             marginLeft: 20,
                         }}
                     >
-                  对NVR（网络硬盘录像机）设备节点的管理
+                        对网关设备添加、编辑、删除以及远程控制等的管理页面
                     </div>
                     <div
                         style={{
@@ -202,18 +214,20 @@ const GatewayManage = props => {
                             cursor: "pointer",
                         }}
                         onClick={() => {
-                     
+                            setDeviceModalV(true)
                         }}
                     >
-                新增设备
+                        新增网关
                     </div>
                 </div>
             </div>
-       <div style={{ width: "100%",
+            <div style={{
+                width: "100%",
                 background: "#FFFFFF",
                 borderRadius: 3,
                 padding: "8px 20px",
-               marginTop: 20,}}>
+                marginTop: 20,
+            }}>
                 <Skeleton
                     loading={false}
                     active={true}
@@ -248,8 +262,8 @@ const GatewayManage = props => {
                         dataToModal={dataToModal} /> : ''
                 }
                 {
-                editV ? <GatewayEditModal
+                    deviceModalV ? <GatewayModal
-                    onCancel={() => setEditV(false)}
+                        onCancel={() => setDeviceModalV(false)}
                         dataToModal={dataToModal} /> : ''
                 }
             </div>

code/web/client/src/sections/edition/containers/gatewayEditModal.jsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import moment from 'moment';
-import { connect } from "react-redux";
-import { Select, Modal, Form, Button } from "@douyinfe/semi-ui";
-
-const GatewayEditModal = (props) => {
-    const { dispatch, actions, user, onCancel, dataToModal } = props;
-    const { edition } = actions;
-
-    //初始化
-    useEffect(() => {
-
-    }, []);
-
-    return (
-        <Modal title={dataToModal.name}
-            visible={true} destroyOnClose onCancel={onCancel}
-            footer={[<Button onClick={onCancel}>关闭</Button>]}>
-            <div></div>
-        </Modal>
-    )
-}
-
-function mapStateToProps(state) {
-    const { auth, global } = state;
-    return {
-        user: auth.user,
-        error: auth.error,
-        actions: global.actions,
-    };
-}
-
-export default connect(mapStateToProps)(GatewayEditModal);

code/web/client/src/sections/edition/containers/gatewayModal.jsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useRef, useState } from 'react';
+import moment from 'moment';
+import { connect } from "react-redux";
+import { Select, Modal, Form, Button } from "@douyinfe/semi-ui";
+
+const GatewayModal = (props) => {
+    const { dispatch, actions, user, onCancel, dataToModal } = props;
+    const { edition } = actions;
+    const api = useRef()
+    //初始化
+    useEffect(() => {
+
+    }, []);
+
+    return (
+        <Modal
+            title={`${dataToModal ? '修改' : '新增'}网关`}
+            destroyOnClose visible={true}
+            onOk={() => {
+                api.current.validate().then(r => {
+                    // for (let key in r) {
+                    //     if (['major', 'minor', 'patch', 'build'].includes(key)) {
+                    //         r[key] = Number(r[key])
+                    //     }
+                    // }
+                    // dispatch(edition.postVersion({ ...r, createdAt: moment().format("YYYY-MM-DD HH:MM:SS") })).then(res => {
+                    //     if (res.success) {
+                    //         requestData()
+                    //         setaddVersion(false)
+                    //     }
+                    // })
+                })
+            }}
+            width={610}
+            onCancel={() => onCancel(0)}
+        >
+            {/* <Form
+                getFormApi={(formApi) => (api.current = formApi)}
+                layout="horizontal"
+                labelAlign="right"
+                labelWidth="114px"
+                style={{ display: 'flex', flexDirection: 'column' }}
+            >
+                <Form.Input
+                    field='serialNo'
+                    label='序列号'
+                    labelPosition="left"
+                    hideButtons={true}
+                    placeholder='请输入序列号'
+                    style={{ width: 200, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请输入序列号" }]}
+                />
+                <Form.Input
+                    field='name'
+                    label='名称'
+                    labelPosition="left"
+                    hideButtons={true}
+                    placeholder='请输入名称'
+                    style={{ width: 200, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请输入名称" }]}
+                />
+                <Form.Input
+                    field='patch'
+                    label='属性'
+                    labelPosition="left"
+                    hideButtons={true}
+                    placeholder='请输入网关属性'
+                    style={{ width: 200, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请输入网关属性" }]}
+                />
+                <Form.Input
+                    field='build' label='构建号:'
+                    labelPosition="left"
+                    hideButtons={true}
+                    placeholder='请输入构建号'
+                    style={{ width: 200, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请输入构建号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
+                />
+                <Form.Select
+                    field="type"
+                    label='Type:'
+                    labelPosition="left"
+                    placeholder='请选择类型'
+                    style={{ width: 200, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请选择类型" }]}
+                >
+                    <Form.Select.Option value="beta">beta</Form.Select.Option>
+                    <Form.Select.Option value="alpha">alpha</Form.Select.Option>
+                    <Form.Select.Option value="release">release</Form.Select.Option>
+                    <Form.Select.Option value="LTS">LTS</Form.Select.Option>
+                </Form.Select>
+                <Form.Input
+                    field='imageBase'
+                    label='基础镜像地址:'
+                    labelPosition="left"
+                    placeholder='请输入基础镜像地址'
+                    style={{ width: 440, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请输入基础镜像地址" }]}
+                />
+                <Form.Input
+                    field='imageVersion'
+                    label='镜像版本:'
+                    labelPosition="left"
+                    placeholder='请输入镜像版本'
+                    style={{ width: 200, marginBottom: 10 }}
+                    rules={[{ required: true, message: "请输入镜像版本" }]}
+                />
+                <Form.TextArea
+                    field='desc'
+                    label='描述:'
+                    labelPosition="left"
+                    placeholder='请输入描述'
+                    style={{ width: 440 }}
+                />
+
+            </Form> */}
+        </Modal>
+    )
+}
+
+function mapStateToProps(state) {
+    const { auth, global } = state;
+    return {
+        user: auth.user,
+        error: auth.error,
+        actions: global.actions,
+    };
+}
+
+export default connect(mapStateToProps)(GatewayModal);

code/web/client/src/utils/webapi.js

@@ -8,6 +8,8 @@ export const ApiTable = {
     getGateways: 'v1/edges',
     ableGateway: 'v1/edge/{id}/enable',
     getGatewayStatus: 'v1/edge/{id}/metrics',
+    delGateway: 'v1/edge/{id}',
+
     gatewaySsh: 'v1/edge/{id}/ssh',
     rebootGateway: 'v1/edge/{id}/reboot',
     restartGateway: 'v1/edge/{id}/restart',