弹框修改

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx

@@ -1,16 +1,27 @@
-import React, { useState } from 'react'
+import React, { useState ,useRef} from 'react'
-import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui';
+import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
 import { IconTickCircle } from '@douyinfe/semi-icons';
 function nvrModal(props){
+  const {modalName}=props
+  const form = useRef();
   const [visible, setVisible] = useState(false);//是否显示弹框
   const [isloading,setloading] = useState(false);//是否显示loading
   const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
-  const [step,setstep] = useState(0)
+  const [step,setstep] = useState(0)//第几步
+  const [okText,setokText] = useState('测试校验')//ok弹框text  右边
+  const [cancelText,setcancelText] = useState('取消')//取消弹框text  左边
+  const opts ={//添加完成确认后通知
+    title:'Hi',
+    content:'添加成功',
+    duration:3
+  }
   function showDialog() {//打开弹框
     setVisible(true);
   }
-  function handleOk() {//点击弹框确定
+  function handleOk() {//点击弹框确定  右边按钮
-    // setVisible(false);
+    if(step==0){
+      form.current.validate()
+      .then(values=>{//表单校验成功
         setloading(true);
         setTimeout(() => {
           setloadingTip('...接受成功')
@@ -18,38 +29,62 @@ function nvrModal(props){
             setloadingTip('已完成')
             setTimeout(() => {
               setstep(1);
+              setokText('确认');
+              setcancelText('上一步');
               setloading(false);
             }, 2000);
           },2000)
         }, 2000);
+      })
+      .catch(errors=>{//表单校验失败
+        console.log('errors',errors);
+      })
+      
+    }
+    else{
+      Notification.success(opts)
+      setVisible(false);
+    }
   }
   function handleAfterClose(){//在关闭之后
-    console.log('after');
+    setstep(0);
+    setokText('测试校验');
+    setcancelText('取消');
   }
-  function handleCancel() {//点击弹框取消
+  function handleCancel() {//点击弹框取消  左边按钮
+    if(step==0){
       setVisible(false);
     }
+    else{
+      setstep(0);
+      setokText('测试校验');
+      setcancelText('取消');
+    }
+  }
+  function handleLocation(){//高德经纬度
+    console.log('handleLocationhandleLocation');
+  }
   return (
     <>
-        <div onClick={showDialog}>{props.modalName}</div>
+      <div onClick={showDialog}>{modalName}</div>
       <Modal
           title="添加NVR"
-            okText="测试校验"
+          okText={okText}
-            // cancelText 取消按钮
+          cancelText={cancelText} //取消按钮
           visible={visible}
           onOk={handleOk}
-            height={386}
           width={607}
-            afterClose={handleAfterClose} //>=1.16.0
+          afterClose={handleAfterClose}
           onCancel={handleCancel}
       >
         <Spin tip={loadingTip} spinning={isloading}>
-            {step==0?<div style={{paddingLeft:16+'px'}}>
+          {step==0?<div style={{paddingLeft:16}}>
             <Form 
               labelPosition='left'
               labelAlign='left'
               labelWidth= '90px'
-                onValueChange={values=>console.log(values)}>
+              onValueChange={values=>console.log(values)}
+              getFormApi={formApi => form.current = formApi}>
               <Row>
                 <Col span={12}>
                   <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
@@ -67,13 +102,13 @@ function nvrModal(props){
                   ]}/>
                 </Col>
                 <Col span={24}>
-                    <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}>
+                  <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421 }}>
                     <Form.Select.Option value="abc">Semi</Form.Select.Option>
                     <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
                     <Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
                   </Form.Select>
                 </Col>
-                  <Col span={24} style={{display:'flex',alignItems:'center'}}>
+                <Col span={24} style={{display:'flex'}}>
                   <Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
                     rules={[
                     { required: true, message: '请输入或拾取高德经纬度坐标' }
@@ -82,20 +117,23 @@ function nvrModal(props){
                     width:32,
                     height:32,
                     background:"#1859C1",
-                      marginLeft:4+'px',
+                    marginLeft:4,
                     display:'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                     cursor: "pointer",
-                      borderRadius: 3+'px'}}>
+                    marginTop:12,
+                    borderRadius: 3+'px'}}
+                    onClick={handleLocation}>
                     <img src="../../../assets/images/background/location.png" width={16} height={20}/>
                   </div>
                 </Col>
               </Row>
             </Form>
-            </div>:
+          </div>
-            <div >
+          ://下一步
-              <div style={{marginTop:50,display: 'flex', justifyContent: 'center'}}>
+          <div style={{height:224}}>
+            <div style={{paddingTop:50,display: 'flex', justifyContent: 'center'}}>
               <IconTickCircle style={{color:'#04B234',fontSize:60}}/>
             </div>
             <div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@@ -67,7 +67,7 @@ const NvrHeader = (props) => {
       render: (y) => {
         return (
           <>
-            <Button theme="borderless">修改</Button>
+            <Button theme="borderless"><NvrModal modalName="修改" /></Button>
             <Button theme="borderless">查看</Button>
             <Button theme="borderless">删除</Button>
           </>