Skip to content

T
TOSTUMI
Commit 9a619db7 authored by cellee's avatar cellee
Browse files
Options

添加小区重构 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent 58c0428b
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 94 deletions
src/pages/CommunityManagement/CellList/Adds.tsx
View file @ 9a619db7
import React from 'react'; import React from 'react';
import { LeftOutlined, EditOutlined } from '@ant-design/icons'; import { LeftOutlined, EditOutlined, PlusCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Form, Input, Button, Select, TimePicker } from 'antd'; import { Form, Input, Button, TimePicker, Checkbox, Upload, message } from 'antd';
// 样式 // 样式
import './celllist.less'; import './celllist.less';
const { RangePicker } = TimePicker; const { RangePicker } = TimePicker;
const Adds = () => { const Adds = () => {
const plainOptions = [
{ label: '线上缴费', value: '0' },
{ label: '线下缴费', value: '1' },
];
const props = {
name: 'file',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
function onChange(checkedValues) {
console.log('checked = ', checkedValues);
}
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log('Success:', values); // console.log('Success:', values);
message.error(`页面重构，后端接口处理中...`);
}; };
const goToReturn = () => {
// console.log(fileList)
history.back()
}
// 上传
return ( return (
<div className="box">
{/* 头部 */} <div className="form">
<div className="back"> <h3>
<Button onClick={() => {}}> <EditOutlined />
<LeftOutlined />
Back
</Button>
</div>
<div className="form">
<h3>
<EditOutlined />
&nbsp; 添加小区 &nbsp; 添加小区
</h3>
<Form <div className="back">
name="basic" <Button onClick={goToReturn}>
onFinish={onFinish} <LeftOutlined />
labelCol={{ span: 3 }} Back
wrapperCol={{ span: 18 }} </Button>
layout="horizontal" </div>
labelAlign="left" </h3>
> <Form
<Form.Item label="Community Name" name="communityName"> name="basic"
<Input style={{ width: 120 }} placeholder="6 Postcode" maxLength={6} />{' '} onFinish={onFinish}
<span className="span"> labelCol={{ span: 3 }}
小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址 wrapperCol={{ span: 18 }}
layout="horizontal"
labelAlign="left"
>
<Form.Item label="Community Name" name="communityName">
<Input style={{ width: 120 }} placeholder="6 Postcode" maxLength={6} />{' '}
<span className="span">
小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址
</span>{' '} </span>{' '}
<div> <div>
<li className="li">小区名字</li> <li className="li">小区名字</li>
</div>
</Form.Item>
<Form.Item label="Working Hours" name="workingHours">
<RangePicker />
</Form.Item>
<Form.Item label="Community Telephone" name="communityTelephone">
<Input.Group compact>
<Form.Item
name={['communityTelephone', 'tel']}
noStyle
// rules={[{ required: true, message: 'Province is required' }]}
>
<Input style={{ marginRight: '10px', width: '160px' }} placeholder="Please enter Phone" />
</Form.Item>
<Button type="text">—</Button>
<Form.Item
name={['communityTelephone', 'email']}
noStyle
// rules={[{ required: true, message: 'Street is required' }]}
>
<Input style={{ marginLeft: '10px', width: '180px' }} placeholder="Please enter Email" />
</Form.Item>
</Input.Group>
</Form.Item>
<Form.Item label="Administrators" name="adminiStrators">
<Input style={{ width: '160px' }} placeholder='Contacts' /> <Button type="text"><PlusCircleOutlined style={{ fontSize: '18px', color: '#08c' }} /></Button>
</Form.Item>
<Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
<Checkbox.Group options={plainOptions} defaultValue={['1']} onChange={onChange} />
<div className='tip'>
<span>*</span>线上缴费会有服务费
</div> </div>
</Form.Item> </Form.Item>
<Form.Item label="Working Hours" name="workingHours">
<Input /> <hr />
</Form.Item>
<Form.Item label="Community Telephone" name="communityTelephone"> <Form.Item label="Louba Timetable" name="loubaTimetable" style={{ marginBottom: '0' }}>
<Input /> <Upload {...props}>
</Form.Item> <Button icon={<UploadOutlined />}>Click to Upload</Button>
<Form.Item label="Administrators" name="adminiStrators"> </Upload>
<Input />
</Form.Item> <div className='tip'>
<Form.Item label="Property fee"> 支持文件：.pdf,.jpg, .png
<RangePicker /> </div>
</Form.Item> </Form.Item>
<Form.Item label="Louba Timetable" name="loubaTimetable">
<Input /> <Form.Item label="Property Guide" name="propertyGuide" style={{ marginBottom: '0' }}>
</Form.Item> <Upload {...props}>
<Form.Item label="Property Guide" name="propertyGuide"> <Button icon={<UploadOutlined />}>Click to Upload</Button>
<Input /> </Upload>
</Form.Item>
<Form.Item label="Period of Service" name="period"> <div className='tip'>
<Input /> 支持文件：.pdf,.jpg, .png
</Form.Item> </div>
</Form.Item>
<Form.Item label="Help Phone" name="helpPhone">
<Input /> <Form.Item label="Period of Service" name="period" style={{ marginBottom: '0' }}>
</Form.Item> <Upload {...props}>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
<Form.Item label=" " colon={false}> </Upload>
<Button type="primary" htmlType="submit"> <div className='tip'>
Submit 支持文件：.pdf,.jpg, .png
</div>
</Form.Item>
<hr />
<Form.Item label="Help Phone" name="helpPhone">
<Input.Group compact>
<Form.Item
name={['helpPhone', 'tel']}
noStyle
>
<Input style={{ marginRight: '10px', width: '160px' }} placeholder="热线电话名称" />
</Form.Item>
<Form.Item
name={['helpPhone', 'email']}
noStyle
>
<Input style={{ marginRight: '10px', width: '180px' }} placeholder="热线电话" />
</Form.Item>
<Form.Item
name={['helpPhone', 'email2']}
noStyle
>
<Input style={{ marginRight: '10px', width: '180px' }} placeholder="服务起始时间" />
</Form.Item>
<Form.Item
name={['helpPhone', 'email3']}
noStyle
>
<Input style={{ marginRight: '10px', width: '180px' }} placeholder="服务结束时间" />
</Form.Item>
</Input.Group>
</Form.Item>
<Form.Item label=" " colon={false}>
<Button type="primary" htmlType="submit">
Conserve
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div>
</div> </div>
); );
}; };
......
src/pages/CommunityManagement/CellList/celllist.css
View file @ 9a619db7
...@@ -3,9 +3,71 @@ ...@@ -3,9 +3,71 @@
background: #fff; background: #fff;
margin-bottom: 20px; margin-bottom: 20px;
} }
.listbox { .listbox {
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 10px; padding: 10px;
} }
.form {
padding: 20px;
border: 1px solid #efefef;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 1px #ccc;
}
.form h3 {
margin-bottom: 30px;
position: relative;
}
.form h3 .back {
position: absolute;
right: 0;
top: 0;
margin-bottom: 20px;
background: #fff;
}
.form .span,
.form .li {
display: inline-block;
min-width: 240px;
line-height: 30px;
background: #efefef;
font-size: 15px;
margin-top: -3px;
vertical-align: middle;
margin-left: 12px;
padding: 0 6px;
border-radius: 2px;
border: 1px solid #d9d9d9;
color: #999;
}
.form .li {
min-width: 140px;
margin-top: 15px;
margin-left: 0;
}
.form input,
.form .ant-upload-list {
width: 240px;
}
.form .ant-picker-range {
width: 240px;
}
.form .ant-picker-range input {
width: 100%;
}
.form .list {
display: inline-block;
}
.form .ant-checkbox-group {
line-height: 34px;
}
.form hr {
border: 0;
height: 1px;
background: #eee;
margin-bottom: 20px;
}
.form .tip {
padding: 15px 0;
}
src/pages/CommunityManagement/CellList/celllist.less
View file @ 9a619db7
...@@ -10,41 +10,64 @@ ...@@ -10,41 +10,64 @@
} }
// 添加 // 添加
.box{ .form{
padding: 20px; padding: 20px;
border: 1px solid #efefef; border: 1px solid #efefef;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc;
h3{
.back{ margin-bottom: 30px;
margin-bottom: 20px; position: relative;
} .back{
.form{ position: absolute;
h3{ right: 0;
margin-bottom: 30px; top: 0;
} margin-bottom: 20px;
.span,.li{ background: #fff;
display: inline-block;
min-width: 240px;
line-height: 30px;
background: #efefef;
font-size: 15px;
margin-top: -3px;
vertical-align: middle;
margin-left: 12px;
padding: 0 6px;
border-radius: 2px;
border: 1px solid #d9d9d9;
color: #000;
}
.li{
min-width: 140px;
margin-top: 15px;
margin-left: 0;
} }
}
.span,.li{
display: inline-block;
min-width: 240px;
line-height: 30px;
background: #efefef;
font-size: 15px;
margin-top: -3px;
vertical-align: middle;
margin-left: 12px;
padding: 0 6px;
border-radius: 2px;
border: 1px solid #d9d9d9;
color: #999;
}
.li{
min-width: 140px;
margin-top: 15px;
margin-left: 0;
}
input,.ant-upload-list{
width: 240px;
}
.ant-picker-range{
width: 240px;
input{ input{
width: 240px; width: 100%;
} }
} }
} .list{
\ No newline at end of file display: inline-block;
}
.ant-checkbox-group{
line-height: 34px;
}
hr{
border: 0;
height: 1px;
background: #eee;
margin-bottom: 20px;
}
.tip{
padding:15px 0;
}
}
src/pages/ContractManagement/ContractContent.tsx
View file @ 9a619db7
...@@ -250,8 +250,10 @@ const ContractContent = (props: any) => { ...@@ -250,8 +250,10 @@ const ContractContent = (props: any) => {
<div className='list2'> <div className='list2'>
<div className={styles.box8item2x1}> <div className={styles.box8item2x1}>
<Form.Item <Form.Item
rules={[{ required: true, message: `${tipList[5]}` }]}
label="Contract Remarks"
name="contractRemindContent"> name="contractRemindContent">
<TextArea autoSize={false} style={{ padding: 8, width: 600, height: 194 }}> <TextArea autoSize={false} style={{ padding: 8, width: 600, height: 194 }} placeholder='remarks'>
</TextArea> </TextArea>
</Form.Item> </Form.Item>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment