/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-09-13 16:01:52
|
* @LastEditTime: 2023-05-19 11:27:13
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 新增房间 or 修改房间弹窗组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { Input, Button, Picker } from 'dingtalk-design-mobile';
|
import { CloseBoldOutlined, DownArrow2Outlined } from 'dd-icons';
|
import { checkIsNum } from '../../utils/utility';
|
import obj from '../../utils/selectOption';
|
import MyModal from '../MyModal';
|
|
// type:1房号 2.地名地址与房名房址一致
|
const ChangeRoomMsg = ({ data, roomNumberSelect, visible, onClose, onSave, type = '1', detailLook = true }) => {
|
|
const [roomMsg, setRoomMsg] = useState(roomNumberSelect ? { ...data, ...roomNumberSelect } : { ...data });
|
|
useEffect(() => {
|
setRoomMsg(roomNumberSelect ? { ...data, ...roomNumberSelect } : { ...data });
|
}, [data]);
|
|
return (
|
<MyModal zIndex={889} visible={visible} center onClose={() => onClose(roomMsg)}>
|
<div className="room-changeRoomMsg">
|
<div className="room-changeRoomMsg-header">
|
<h4>房间信息</h4>
|
<CloseBoldOutlined onClick={() => onClose(roomMsg)} className="room-changeRoomMsg-close" />
|
</div>
|
{
|
type == '1' &&
|
<div className="room-changeRoomMsg-form">
|
<div className="room-changeRoomMsg-form-item">
|
<h5>单元号</h5>
|
<div className="room-input">
|
<Input onChange={(value) => setRoomMsg({ ...roomMsg, unit: checkIsNum(value) })}
|
value={roomMsg.unit || ''} placeholder="请输入" clear />
|
</div>
|
</div>
|
<div className="room-changeRoomMsg-form-item">
|
<h5>房号</h5>
|
<div className="room-input">
|
<Input
|
onChange={(value) => setRoomMsg({ ...roomMsg, housenumber: value.replace(/，/g, ",") })}
|
value={roomMsg.housenumber || ''}
|
placeholder="请输入户（室）牌号"
|
clear
|
/>
|
</div>
|
</div>
|
</div>
|
}
|
{/* {
|
type == '2' &&
|
<div className="room-changeRoomMsg-form">
|
<div className="room-changeRoomMsg-form-item">
|
<div style={{ marginBottom: '8px' }}> <span style={{ fontWeight: '600' }}>房名房址：</span><span style={{ color: 'rgba(23, 26, 29, 0.6)' }}>{roomMsg.houseaddress || '-'}</span></div>
|
</div>
|
</div>
|
} */}
|
<div>
|
<h5>用途</h5>
|
<Picker
|
data={[obj.houseUse]}
|
value={(!roomMsg.houseUse || roomMsg.houseUse == 'undefined') ? [] : [roomMsg.houseUse]}
|
onChange={(e) => {
|
setRoomMsg({ ...roomMsg, houseUseName: obj.houseUse.find((it) => it.value == e[0]).label, houseUse: e[0] });
|
}}
|
title="用途"
|
okText="确定"
|
cascade={false}
|
>
|
{(!roomMsg.houseUse || roomMsg.houseUse == 'undefined') ?
|
<div className="room-input room-changeRoomMsg-form-picker room-changeRoomMsg-form-extra select-color">
|
<div>请选择</div>
|
<DownArrow2Outlined />
|
</div> : <div className="room-input room-changeRoomMsg-form-picker room-changeRoomMsg-form-extra">
|
{roomMsg.houseUseName}
|
<DownArrow2Outlined />
|
</div>
|
}
|
</Picker>
|
</div>
|
<div style={{ display: 'flex', marginTop: '8px' }}>
|
{detailLook && <Button
|
onClick={() => onSave('detail', roomMsg)}
|
style={{ flex: 1, marginRight: '8px', color: '#007FFF', border: '1px solid #007FFF' }}
|
>
|
房间预览
|
</Button>}
|
<Button style={{ flex: 1 }} onClick={() => onSave('OnOk', roomMsg)} type="primary">
|
保存信息
|
</Button>
|
</div>
|
</div>
|
</MyModal>
|
);
|
};
|
|
export default ChangeRoomMsg;
|
