154 lines
5.0 KiB
TypeScript
154 lines
5.0 KiB
TypeScript
![]() |
import { Form, Input, Modal, Select, Spin } from "antd"
|
||
|
import React, { useEffect, useState } from "react"
|
||
|
import { getDeviceById } from "./service";
|
||
|
|
||
|
|
||
|
interface DeviceFormProps {
|
||
|
modalVisible: boolean;
|
||
|
titleName: string;
|
||
|
onCancel: () => void;
|
||
|
status: string;//状态 0-新建 1-编辑 2-查看
|
||
|
type: string;
|
||
|
tpId: string;
|
||
|
deviceId: string;
|
||
|
|
||
|
}
|
||
|
const deviceTypeEnum = {
|
||
|
'resource_door': { text: '门禁点' },
|
||
|
'resource_camera': { text: '监控点' },
|
||
|
'resource_nvr': { text: 'nvr' },
|
||
|
'resource_encodeDevice': { text: '编码设备' },
|
||
|
'resource_oneMachine': { text: '门禁一体机' },
|
||
|
}
|
||
|
const layout = {
|
||
|
labelCol: { span: 7 },
|
||
|
wrapperCol: { span: 10 },
|
||
|
};
|
||
|
const DeviceForm: React.FC<DeviceFormProps> = (props) => {
|
||
|
|
||
|
const { titleName, modalVisible, onCancel, type, tpId, deviceId } = props;
|
||
|
const [spinning, setSping] = useState<boolean>();//加载遮罩
|
||
|
const [editInformation, setEditInformation] = useState<boolean>(false);//是否可编
|
||
|
const [form] = Form.useForm();
|
||
|
//窗口状态 0-新建 1-编辑 2-查看
|
||
|
const [modalStatus, setModalStatus] = useState<string | undefined>(status);
|
||
|
|
||
|
|
||
|
useEffect(() => {
|
||
|
Int();
|
||
|
form.resetFields();//清除form中数据
|
||
|
}, [type, deviceId]);
|
||
|
const Int = () => {
|
||
|
|
||
|
setSping(true);
|
||
|
if (type == "new") {//==========================================================新建
|
||
|
|
||
|
setSping(false);
|
||
|
setEditInformation(false);//可编辑
|
||
|
|
||
|
} else if (type == "edit") {//=========================================================修改
|
||
|
console.log(deviceId);
|
||
|
getDeviceById(deviceId).then(res => {
|
||
|
if (res.code == 200) {
|
||
|
const data = res.data;
|
||
|
|
||
|
form.setFieldsValue({
|
||
|
"id": data.id,
|
||
|
"deviceName": data.deviceName,
|
||
|
"deviceManagementIp": data.deviceManagementIp,
|
||
|
"deviceCode": data.deviceCode,
|
||
|
"devicePlatform": data.devicePlatform,
|
||
|
"placeId": data.placeId,
|
||
|
"areaId": data.areaId,
|
||
|
});
|
||
|
setSping(false);
|
||
|
setEditInformation(false);//可编辑
|
||
|
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
} else if (type == "read") {//=========================================================查看
|
||
|
getDeviceById(deviceId).then(res => {
|
||
|
if (res.code == 200) {
|
||
|
const data = res.data;
|
||
|
|
||
|
form.setFieldsValue({
|
||
|
"id": data.id,
|
||
|
"deviceName": data.deviceName,
|
||
|
"deviceManagementIp": data.deviceManagementIp,
|
||
|
"deviceCode": data.deviceCode,
|
||
|
"devicePlatform": data.devicePlatform,
|
||
|
"placeId": data.placeId,
|
||
|
"areaId": data.areaId,
|
||
|
})
|
||
|
|
||
|
setSping(false);
|
||
|
setEditInformation(true)
|
||
|
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
// @ts-ignore
|
||
|
return (
|
||
|
<Modal
|
||
|
mask={true}
|
||
|
destroyOnClose
|
||
|
title={titleName}
|
||
|
visible={modalVisible}
|
||
|
onCancel={() => onCancel()}
|
||
|
className="返回"
|
||
|
width={"40%"}
|
||
|
/*style={{top: "2%", height: "96%", overflowY: "auto"}}
|
||
|
bodyStyle={{paddingTop: "16px"}}*/
|
||
|
centered
|
||
|
|
||
|
>
|
||
|
<Spin spinning={spinning}>
|
||
|
<Form
|
||
|
{...layout}
|
||
|
name="basic"
|
||
|
form={form}
|
||
|
>
|
||
|
<Form.Item name="id" label="设备id" hidden>
|
||
|
<Input />
|
||
|
</Form.Item>
|
||
|
<Form.Item name="devicePlatform" label="管理平台" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Input placeholder="管理平台" disabled={modalStatus == "2"} maxLength={50} />
|
||
|
</Form.Item>
|
||
|
<Form.Item name="placeId" label="评标场所" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Input placeholder="评标场所" disabled={modalStatus == "2"} maxLength={50} />
|
||
|
</Form.Item>
|
||
|
|
||
|
<Form.Item name="areaId" label="评标区域" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Input placeholder="评标区域" disabled={modalStatus == "2"} maxLength={50} />
|
||
|
</Form.Item>
|
||
|
<Form.Item name="deviceCode" label="设备标识" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Input placeholder="设备标识" disabled={modalStatus == "2"} maxLength={50} />
|
||
|
</Form.Item>
|
||
|
<Form.Item name="deviceManagementIp" label="网络IP" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Input placeholder="网络IP" disabled={modalStatus == "2"} maxLength={50} />
|
||
|
</Form.Item>
|
||
|
<Form.Item name="deviceType" label="设备类型" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Select
|
||
|
placeholder="选择设备类型"
|
||
|
allowClear
|
||
|
disabled={modalStatus == "2"}
|
||
|
>
|
||
|
</Select>
|
||
|
</Form.Item>
|
||
|
<Form.Item name="deviceName" label="设备名称" rules={[{ required: !(modalStatus == "2") }]}>
|
||
|
<Input placeholder="设备名称" disabled={modalStatus == "2"} maxLength={50} />
|
||
|
</Form.Item>
|
||
|
</Form>
|
||
|
</Spin>
|
||
|
</Modal>
|
||
|
|
||
|
)
|
||
|
}
|
||
|
export default DeviceForm
|