/* eslint-disable default-case */ import React, { useEffect, useState } from 'react'; import { Form, Modal, Row, Col, Input, Select, notification } from 'antd'; import { addInsertVideoConfig, editInsertVideoConfig } from '@/services/videoManger/videoManger'; import CryptoJS from 'crypto-js'; const AddDHModal = props => { const { callBackSubmit = () => {}, visible, onCancel, type, kind, obj } = props; const [form] = Form.useForm(); const { Item } = Form; const { TextArea } = Input; const [selectChange, setSelectChange] = useState('轻应用'); const [selectChange1, setSelectChange1] = useState('否'); const [selectChange2, setSelectChange2] = useState('主码流'); const [load, setLoad] = useState(false); // 提交加载 const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥 const iv = CryptoJS.enc.Utf8.parse('1234567890000000'); // 解密 const Decrypt = word => { let encryptedHexStr = CryptoJS.enc.Hex.parse(word); let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr); let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7, }); let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); return decryptedStr.toString(); }; // 加密 const Encrypt = word => { let srcs = CryptoJS.enc.Utf8.parse(word); let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7, }); return encrypted.ciphertext.toString().toUpperCase(); }; const onChange = value => { setSelectChange(value); }; const onChange1 = value => { setSelectChange1(value); }; const onChange2 = value => { setSelectChange2(value); }; useEffect(() => { console.log(obj.LoginPwd); setLoad(false); if (kind === 'add') { form.resetFields(); } else { form.setFieldsValue({ ...obj, LoginPwd: obj.LoginPwd ? Decrypt(obj.LoginPwd) : '' }); } }, [visible]); const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoad(true); let getValue = form.getFieldsValue(); console.log(getValue); if (getValue.PlayModel === undefined) { getValue.PlayModel = '轻应用'; } if (getValue.PlayZeroChannel === undefined) { getValue.PlayZeroChannel = '否'; } if (getValue.StreamType === undefined) { getValue.StreamType = '主码流'; } getValue.VideoManufacturer = type; if (kind === 'add') { addInsertVideoConfig({ ...getValue, LoginPwd: Encrypt(getValue.LoginPwd) }).then(res => { if (res.msg === 'Ok') { onCancel(); setLoad(false); form.resetFields(); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: '新增成功', }); } else { setLoad(false); notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); } if (kind === 'edit') { editInsertVideoConfig({ ...getValue, Id: obj.Id, LoginPwd: Encrypt(getValue.LoginPwd), }).then(res => { if (res.msg === 'Ok') { onCancel(); setLoad(false); form.resetFields(); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: '编辑成功', }); } else { setLoad(false); notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); } } }); }; return ( <Modal visible={visible} title={ kind === 'add' ? ( <span style={{ fontSize: '18px' }}>新增配置</span> ) : ( <span style={{ fontSize: '18px' }}>编辑配置</span> ) } width="1000px" destroyOnClose maskClosable={false} confirmLoading={load} onCancel={onCancel} onOk={onSubmit} > <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p> <Form form={form} labelCol={{ span: 7 }} style={{ height: '25rem', overflowY: 'scroll' }} autocomplete="off" > <Row> <Col span={11}> <Item label="名称" name="Name" rules={[ { required: true, message: '请输入名称', }, ]} > <Input placeholder="请输入名称" maxlength="20px" /> </Item> </Col> <Col span={12}> <span style={{ position: 'absolute', left: '12%', top: '9%', color: 'red', fontSize: '16px', }} > * </span> <Item label="视频厂商" name="VideoManufacturer"> <Input placeholder="大华" disabled /> </Item> </Col> <Col span={11}> <Item label="设备编码" name="EquipmentCode" rules={[ { required: true, message: '请输入设备编码', }, ]} > <Input placeholder="设备台账对应设备编码字段" /> </Item> </Col> <Col span={12}> <Item label="通道ID" name="PassageId" rules={[ { required: true, message: '请输入通道ID', }, ]} > <TextArea placeholder="视频监控点ID,请用英文逗好分隔" /> </Item> </Col> <Col span={24}> <p style={{ fontSize: '16px', marginLeft: '16px' }}>{type}</p> </Col> <Col span={11}> <Item label="登录IP" name="LoginIp" rules={[ { required: true, message: '请输入登录ID', }, ]} > <Input placeholder="登录ID" /> </Item> </Col> <Col span={12}> <Item label="设备端口" name="EquipmentPort" rules={[ { required: true, message: '请输入设备端口', }, ]} > <Input placeholder="设备端口" /> </Item> </Col> <Col span={11}> <Item label="视频名称" name="VideoName" rules={[ { required: true, message: '请输入视频名称', }, ]} > <Input placeholder="视频监控点名称" /> </Item> </Col> <Col span={12}> <Item label="默认通道ID" name="DefaultPassageId" rules={[ { required: true, message: '请输入默认通道ID', }, ]} > <TextArea placeholder="默认视频监控点ID,请用英文逗好分隔" /> </Item> </Col> <Col span={11}> <Item label="视频服务地址" name="VideoPath" rules={[ { required: true, message: '请输入视频名称', }, ]} > <Input placeholder="视频服务地址" /> </Item> </Col> </Row> </Form> </Modal> ); }; export default AddDHModal;