free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

弹框修改

release_0.0.1
deartibers 3 years ago
parent
5744fe52b8
commit
27594bada8
2 changed files with 127 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 214
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  2. 2
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

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

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

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

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

Write Preview
Loading…
Cancel
Save