Skip to content

T
TOSTUMI
Commit 0cf1c156 authored by cellee's avatar cellee
Browse files
Options

完成新增小区，小区列表搜索优化，新增小区详情页面 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent 62fee18b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1126 additions and 573 deletions
config/config.ts
View file @ 0cf1c156
...@@ -218,7 +218,7 @@ export default defineConfig({ ...@@ -218,7 +218,7 @@ export default defineConfig({
routes:[ routes:[
{ path: './', component: './CommunityManagement/CellList/CellList' }, { path: './', component: './CommunityManagement/CellList/CellList' },
{ path: './Add', component: './CommunityManagement/CellList/Adds' }, { path: './Add', component: './CommunityManagement/CellList/Adds' },
{path:'./Detail',component:'./CommunityManagement/CellList/Detail'}, {path:'./Detail',component:'./CommunityManagement/CellList/Details'},
] ]
}, },
{ {
......
src/components/TitleSearch/TitleSearch copy.tsx 0 → 100644
View file @ 0cf1c156
import React, { useState, useEffect, useRef } from 'react';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import styles from './index.less';
import BackButton from '../BackButton/BackButton';
import TitleGet from '../TitleGet/TitleGet';
import { Input, Row, Col, Form, Select, Button, DatePicker } from 'antd';
const { Option } = Select;
import SelectOptions from '../../components/SelectOptions/index';
import { gray } from 'chalk';
import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';
const TitleSearch = (props: any) => {
// console.log("===================================", props)
const { dispatch, CommunityList } = props;
const key = props.listkey
const name = props.list;
// const single = props.single
// const checklist = props.checklist;
// const status = props.status;
// const communitySelect = props.communitySelect
// const defaultValue = props.defaultValue;
const { single, checklist, status, communitySelect, defaultValue } = props;
const time = props.time;
const community = props.community;
const [selectOptions, setSelectOptions] = useState(true)
const [communitys, setCommunitys] = useState(CommunityList)
const [communitySingle, setCommunitySingle] = useState(null)
const [datePicker, setDate] = useState(null)
const [form] = Form.useForm()
const tosCommunityget = (values: any) => { dispatch({ type: 'Init/tosCommunityget', playload: values }) };
useEffect(() => {
// console.log("标题搜寻组件初始化") OK
if (CommunityList == null) {
// console.log("小区数量初始化") OK
tosCommunityget(null)
}
if (defaultValue != null) {
form.setFieldsValue(defaultValue)
}
}, []);
useEffect(() => {
if (defaultValue != null) {
form.setFieldsValue(defaultValue)
}
}, [defaultValue])
useEffect(() => {
// console.log(CommunityList)
if (CommunityList != null) {
// console.log("小区数量初始化完毕") OK
var tmp = {}
tmp[community] = CommunityList
// props.onSubmit(tmp) 禁用 改用组件初始化
setCommunitys(CommunityList)
}
}, [CommunityList])
const onFinish = (values: any) => {
if (datePicker) {
values[time[0]] = datePicker;
}
if (community) {
values[community] = communitys
}
console.log('Success:', values);
props.onSubmit(values)
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const onChange = (date: any, dateString: string) => {
setDate(dateString)
}
const printContent = (comment: any) => {
setCommunitys(comment)
}
// 选择小区名字并赋值
const opname = (value: any) => {
form.setFieldsValue({
'communityName': value
})
}
return (
<>
<Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
<Row gutter={32}>
{
communitySelect != null ?
<Col key={"communitySelect_"} ><Form.Item name={"communityName"}><SearchOptionsCommnity titleSearch={true} opname={opname} /></Form.Item></Col>
: null
}
{
key != null ?
key.map((item, index) => {
return (
<Col key={"KeyCol_" + index}><Form.Item name={item}><Input placeholder={name[index]} allowClear /></Form.Item></Col>
)
})
: null
}
{
status != null ?
status.map((item, index) => {
return (
<Col key={"StatusCol_" + index}>
<Form.Item name={item.name[0]}>
<Select style={{ width: 160 }} placeholder={item.name[1]} allowClear={true}>
{
item.data.map(word => {
return (
<Option key={word} value={word[0]}>{word[1]}</Option>
)
})
}
</Select>
</Form.Item>
</Col>
)
})
: null
}
{
time != null ?
<Col key={"datePicker_"} > <DatePicker placeholder={time[1]} onChange={onChange} /></Col>
: null
}
{
community == null ?
<Col><Form.Item><Button type="primary" htmlType="submit">Search</Button></Form.Item></Col>
: null
}
</Row>
{
community != null ?
<>
{
CommunityList != null ?
<SelectOptions checklist={checklist} single={single} list={CommunityList.sort()} show={selectOptions} onSubmit={printContent} /> :
null
}
<Form.Item><Button type="primary" htmlType="submit" style={{ backgroundColor: "#e7f4ff", color: "rgba(24,144,255,1)" }}>Search</Button></Form.Item>
</> : null
}
</Form>
</>
);
};
function mapStateToProps(state: any) {
// console.log("state参数",state)
const { CommunityList } = state.Init;
return {
CommunityList,
};
}
export default connect(mapStateToProps)(TitleSearch);
// time={["key","预订时间筛选"]}
// status = [{name:"status",data:["处理", "未处理"]}]
// listkey={['A', 'C']} list={['订单状态', '预订时间筛选']}
// <TitleSearch
// status={[{
// name: ["status", "订单状态"],
// data: [[0, "全部"], [1, "已申请"], [2, "已预订"], [3, "已使用"], [4, "已取消"]]
// }]}
// time={["key", "预订时间筛选"]}
// community={"communityName"}
// // single={true}
// onSubmit={CallBackTitleSearch} />
\ No newline at end of file
src/components/TitleSearch/TitleSearch.tsx
View file @ 0cf1c156
...@@ -18,68 +18,69 @@ const TitleSearch = (props: any) => { ...@@ -18,68 +18,69 @@ const TitleSearch = (props: any) => {
const { dispatch, CommunityList } = props; const { dispatch, CommunityList } = props;
const key = props.listkey const key = props.listkey;
console.log(props);
const name = props.list; const name = props.list;
// const single = props.single // const single = props.single
// const checklist = props.checklist; // const checklist = props.checklist;
// const status = props.status; // const status = props.status;
// const communitySelect = props.communitySelect // const communitySelect = props.communitySelect
// const defaultValue = props.defaultValue; // const defaultValue = props.defaultValue;
// const time = props.time;
const { single, checklist, status, communitySelect, defaultValue } = props; // username 为 小区列表管理者名字筛选
const { single, checklist, status, communitySelect, defaultValue, time, username } = props;
const time = props.time;
const community = props.community; const community = props.community;
const [selectOptions, setSelectOptions] = useState(true) const [selectOptions, setSelectOptions] = useState(true);
const [communitys, setCommunitys] = useState(CommunityList) const [communitys, setCommunitys] = useState(CommunityList);
const [communitySingle, setCommunitySingle] = useState(null) const [communitySingle, setCommunitySingle] = useState(null);
const [datePicker, setDate] = useState(null) const [datePicker, setDate] = useState(null);
const [form] = Form.useForm() const [form] = Form.useForm();
const tosCommunityget = (values: any) => { dispatch({ type: 'Init/tosCommunityget', playload: values }) }; const tosCommunityget = (values: any) => {
dispatch({ type: 'Init/tosCommunityget', playload: values });
};
useEffect(() => { useEffect(() => {
// console.log("标题搜寻组件初始化") OK // console.log("标题搜寻组件初始化") OK
if (CommunityList == null) { if (CommunityList == null) {
// console.log("小区数量初始化") OK // console.log("小区数量初始化") OK
tosCommunityget(null) tosCommunityget(null);
} }
if (defaultValue != null) { if (defaultValue != null) {
form.setFieldsValue(defaultValue) form.setFieldsValue(defaultValue);
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
if (defaultValue != null) { if (defaultValue != null) {
form.setFieldsValue(defaultValue) form.setFieldsValue(defaultValue);
} }
}, [defaultValue]) }, [defaultValue]);
useEffect(() => { useEffect(() => {
// console.log(CommunityList) // console.log(CommunityList)
if (CommunityList != null) { if (CommunityList != null) {
// console.log("小区数量初始化完毕") OK // console.log("小区数量初始化完毕") OK
var tmp = {} var tmp = {};
tmp[community] = CommunityList tmp[community] = CommunityList;
// props.onSubmit(tmp) 禁用 改用组件初始化 // props.onSubmit(tmp) 禁用 改用组件初始化
setCommunitys(CommunityList) setCommunitys(CommunityList);
} }
}, [CommunityList]) }, [CommunityList]);
const onFinish = (values: any) => { const onFinish = (values: any) => {
if (datePicker) { if (datePicker) {
values[time[0]] = datePicker; values[time[0]] = datePicker;
} }
if (community) { if (community) {
values[community] = communitys values[community] = communitys;
} }
console.log('Success:', values); console.log('Success:', values);
props.onSubmit(values) props.onSubmit(values);
}; };
const onFinishFailed = (errorInfo: any) => { const onFinishFailed = (errorInfo: any) => {
...@@ -87,90 +88,111 @@ const TitleSearch = (props: any) => { ...@@ -87,90 +88,111 @@ const TitleSearch = (props: any) => {
}; };
const onChange = (date: any, dateString: string) => { const onChange = (date: any, dateString: string) => {
setDate(dateString) setDate(dateString);
} };
const printContent = (comment: any) => { const printContent = (comment: any) => {
setCommunitys(comment) setCommunitys(comment);
} };
// 选择小区名字并赋值 // 选择小区名字并赋值
const opname = (value: any) => { const opname = (value: any) => {
form.setFieldsValue({ form.setFieldsValue({
'communityName': value communityName: value,
}) });
} };
return ( return (
<> <>
<Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}> <Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
<Row gutter={32}> <Row gutter={32}>
{ {communitySelect != null ? (
communitySelect != null ? <Col key={'communitySelect_'}>
<Col key={"communitySelect_"} ><Form.Item name={"communityName"}><SearchOptionsCommnity titleSearch={true} opname={opname} /></Form.Item></Col> <Form.Item name={'communityName'}>
: null <SearchOptionsCommnity titleSearch={true} opname={opname} />
} </Form.Item>
{ </Col>
key != null ? ) : null}
key.map((item, index) => { {key != null
? key.map((item, index) => {
return ( return (
<Col key={"KeyCol_" + index}><Form.Item name={item}><Input placeholder={name[index]} allowClear /></Form.Item></Col> <Col key={'KeyCol_' + index}>
) <Form.Item name={item}>
<Input placeholder={name[index]} allowClear />
</Form.Item>
</Col>
);
}) })
: null : null}
}
{ {/* 小区列表的管理员姓名搜索 */}
status != null ? {username != null ? (
status.map((item, index) => { <Col key={'username_' + username[0]}>
<Form.Item name={username[0]} label="Username">
<Input placeholder={username[1]} allowClear />
</Form.Item>
</Col>
) : null}
{status != null
? status.map((item, index) => {
return ( return (
<Col key={"StatusCol_" + index}> <Col key={'StatusCol_' + index}>
<Form.Item name={item.name[0]}> <Form.Item name={item.name[0]}>
<Select style={{ width: 160 }} placeholder={item.name[1]} allowClear={true}> <Select style={{ width: 160 }} placeholder={item.name[1]} allowClear={true}>
{ {item.data.map((word) => {
item.data.map(word => { return (
return ( <Option key={word} value={word[0]}>
<Option key={word} value={word[0]}>{word[1]}</Option> {word[1]}
) </Option>
}) );
} })}
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
) );
}) })
: null : null}
} {time != null ? (
{ <Col key={'datePicker_'}>
time != null ? {' '}
<Col key={"datePicker_"} > <DatePicker placeholder={time[1]} onChange={onChange} /></Col> <DatePicker placeholder={time[1]} onChange={onChange} />
: null </Col>
} ) : null}
{ {community == null ? (
community == null ? <Col>
<Col><Form.Item><Button type="primary" htmlType="submit">Search</Button></Form.Item></Col> <Form.Item>
: null <Button type="primary" htmlType="submit">
} Search
</Button>
</Form.Item>
</Col>
) : null}
</Row> </Row>
{ {community != null ? (
community != null ? <>
<> {CommunityList != null ? (
{ <SelectOptions
CommunityList != null ? checklist={checklist}
<SelectOptions checklist={checklist} single={single} list={CommunityList.sort()} show={selectOptions} onSubmit={printContent} /> : single={single}
null list={CommunityList.sort()}
} show={selectOptions}
onSubmit={printContent}
<Form.Item><Button type="primary" htmlType="submit" style={{ backgroundColor: "#e7f4ff", color: "rgba(24,144,255,1)" }}>Search</Button></Form.Item> />
</> : null ) : null}
}
<Form.Item>
<Button
type="primary"
htmlType="submit"
style={{ backgroundColor: '#e7f4ff', color: 'rgba(24,144,255,1)' }}
>
Search
</Button>
</Form.Item>
</>
) : null}
</Form> </Form>
</> </>
); );
}; };
...@@ -194,4 +216,4 @@ export default connect(mapStateToProps)(TitleSearch); ...@@ -194,4 +216,4 @@ export default connect(mapStateToProps)(TitleSearch);
// time={["key", "预订时间筛选"]} // time={["key", "预订时间筛选"]}
// community={"communityName"} // community={"communityName"}
// // single={true} // // single={true}
// onSubmit={CallBackTitleSearch} /> // onSubmit={CallBackTitleSearch} />
\ No newline at end of file
src/models/CommunityManagement/CellList.ts
View file @ 0cf1c156
...@@ -41,21 +41,26 @@ export default { ...@@ -41,21 +41,26 @@ export default {
console.log(resp) console.log(resp)
// if (resp.code == 500||resp.error_code!="0000") { // if (resp.code == 500||resp.error_code!="0000") {
// } // }
if (resp.error_code != "0000") { if (resp.code == 500 && resp.error_code != "0000") {
getObjectInfo(playload.body) getObjectInfo(playload.body)
printf(playload, resp) printf(playload, resp)
} message.error(`${resp.code}:${resp.msg}`)
switch (playload.index) { } else {
case 24: { switch (playload.index) {
let Data = resp.data; case 24: {
yield put({ type: 'returnPage', Data }); let Data = resp.data;
yield put({ type: 'returnPage', Data });
} break;
case 29: {
let Result = resp;
yield put({ type: 'returnResult', Result });
message.success(`新增成功！`)
} break; } break;
case 29: { }
let Result = resp; history.push('/CommunityManagement/CellList');
yield put({ type: 'returnResult', Result });
} break;
} }
}, },
*ResultClear({ }, { put }) { *ResultClear({ }, { put }) {
......
src/pages/CommunityManagement/CellList/CellList.tsx
View file @ 0cf1c156
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Input ,Tabs,Table,Space, Button ,Form ,message} from 'antd'; import { Space, Button, Form, message } from 'antd';
const { TabPane } = Tabs; import { connect, history } from 'umi';
import {connect,history} from 'umi';
// 图标 // 图标
import { SearchOutlined,ClearOutlined,PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import TitleSearch from '@/components/TitleSearch/TitleSearch';
import TitleSearch from '@/components/TitleSearch/TitleSearch'
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity'
import { RA, SA } from '@/utils/method'; import { RA, SA } from '@/utils/method';
import { objectColumns } from '@/utils/string'; import { objectColumns } from '@/utils/string';
import { timestampToTime } from '@/utils/time'; const module = 'CellList';
import CommunitySearch from "@/components/CommunitySearch/CommunitySearch";
const module="CellList"
import './celllist.less'
const CellList = (props:any) => { import './celllist.less';
const CellList = (props: any) => {
const columns = objectColumns([ const columns = objectColumns([
["Community", "residentialName"], ['Community', 'residentialName'],
["Administrator", "residentialManagerUserName"], ['Administrator', 'residentialManagerUserName'],
["Operation Hours", null, (text: any, record: any) => (<div></div>)], [
["Office Tel", "residentialPhone"], 'Operation Hours',
["Address", "residentialAddress"], null,
["Actions", null, (text: any, record: any) => (<Space size="middle"> (text: any, record: any) => (
<a onClick={goToDetail.bind(this, record)}>Edit</a> <div>
<a onClick={goToDetail.bind(this,record)}>Detail</a> <span>{record.residentialStartWorking}</span>
</Space>)], <span>-</span>
]) <span>{record.residentialEndWorking}</span>
</div>
),
const { dispatch, Data , loading , curString} = props; ],
['Office Tel', 'residentialPhone'],
['Address', 'residentialAddress'],
const onChange = e => { [
e.persist(); 'Actions',
console.log("表单输入的值", e.target.value); null,
}; (text: any, record: any) => (
<Space size="middle">
<a onClick={goToDetail.bind(this, record)}>Edit</a>
<a onClick={goToDetail.bind(this, record)}>Detail</a>
</Space>
),
],
]);
const { dispatch, Data, loading, curString } = props;
console.log(curString);
useEffect(() => { useEffect(() => {
RA(24, {communityName: "" }, module, dispatch); RA(24, { communityName: '' }, module, dispatch);
}, []) }, []);
useEffect(() => { useEffect(() => {
if (Data != null) { if (Data != null) {
//console.log(columnsVal) //console.log(columnsVal)
} }
}, [Data]) }, [Data]);
const CallbackSearch = (values:any) => { const CallbackSearch = (values: any) => {
RA(24, {communityName: values }, module, dispatch); RA(24, { communityName: values }, module, dispatch);
} };
const goToAdd = () => { const goToAdd = () => {
history.push("./CellList/Add"); SA('', module, dispatch); // 清空之前传递的数据
} history.push('./CellList/Add');
};
const goToDetail = (values: any, e: any) => { const goToDetail = (values: any, e: any) => {
SA(values,module,dispatch) // console.log(values);
history.push("./CellList/Detail"); SA(values, module, dispatch);
} history.push('./CellList/Detail');
};
// 点击搜索
// 表单标识
const [form] = Form.useForm()
// 表单提交
const onFinishContract = (value:any)=>{
// console.log(value)
if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
message.error('Please enter one of them!')
}else{
console.log(value)
let payload = {
index: 19,
page:{
pageNum:1,
contractNumber:value.contractNumber,
contractTitle:value.contractTitle,
communityName:value.communityName
}
}
// requst(payload);
}
}
// 选择小区名字并赋值 const CallBackTitleSearch = (comment: any) => {
const opname = (value:any)=>{ if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
form.setFieldsValue({ let tmp: any = new Object();
'communityName' : value tmp.adminName = comment.label;
}) tmp.communityName = comment.communityName;
} tmp.curPage = 1;
// 重置 // QA(tmp);
const onReset = () => { console.log(tmp);
form.resetFields(); // CallbackSearch()
let payload = { //中断
index: 19, // RA(9, {
page:{ // userToken: token,
pageNum:1 // pageNum: '1',
} // subscribeDate: tmp.subscribeDate,
// status: tmp.status,
// communityNameList: comment.communityName,
// }, module, dispatch);
} else {
message.error('请输入管理员姓名或选择小区进行搜索！');
} }
}; };
// 点击搜索
const CallBackTitleSearch= (comment: any) => {
console.log(comment)
// if (comment.communityName != null || comment.key != null || comment.status != null) {
// var tmp = curString
// tmp.subscribeDate = comment.key
// if (comment.status == null||comment.status==undefined) {
// tmp.status = 0;
// } else {
// tmp.status = comment.status
// }
// tmp.communityNameList = comment.communityName
// tmp.curPage=1
// QA(tmp)
// console.log(tmp)
// //中断
// RA(9, { userToken: token, pageNum: "1", subscribeDate: tmp.subscribeDate, status: tmp.status,communityNameList:comment.communityName })
// }
}
return ( return (
<div > <div>
{ {Data != null ? (
Data != null ? <> <>
{/* <TitleSearch listkey={['communityName']} list={['Community Name']} onSubmit={CallBackTitleSearch}/> */} {/* <TitleSearch listkey={['communityName']} list={['Community Name']} onSubmit={CallBackTitleSearch}/> */}
<div className='contop'> <div className="contop">
<TitleSearch <TitleSearch
status={[{ username={['label', '请输入管理员姓名']}
name: ["status", "Order status"], community={'communityName'}
data: [[0, "All"], [1, "Applied"], [2, "Reserved"], [3, "Used"], [4, "Cancelled"]] checklist={curString.communityNameList != null ? curString.communityNameList : null}
}]} onSubmit={CallBackTitleSearch}
time={["key", "Booking time "]} />
community={"communityName"}
checklist={curString.communityNameList!=null?curString.communityNameList:null}
onSubmit={CallBackTitleSearch} />
{/* <Form
autoComplete= "off"
layout="inline"
form={form}
name="contract"
onFinish={onFinishContract}
>
<Form.Item name="communityName">
<SearchOptionsCommnity
// ubmit={extendName}
opname={opname} />
</Form.Item>
<Form.Item name="contractNumber">
<Input allowClear placeholder='Contract No' />
</Form.Item>
<Form.Item name="contractTitle">
<Input allowClear placeholder='Contract Title' />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>Search </Button>
<Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}} icon={<ClearOutlined />} loading={loading}> Reset</Button>
</Form.Item>
</Form> */}
</div> </div>
<ProTable <ProTable
// request={requestHeadl} // request={requestHeadl}
pagination={false} // 隐藏默认分页 pagination={false} // 隐藏默认分页
rowKey={"id"} rowKey={'id'}
dataSource={Data.rows} dataSource={Data.rows}
columns={columns} columns={columns}
search={false} search={false}
loading={loading} loading={loading}
toolBarRender={() => [ toolBarRender={() => [
<Button key="3" type="primary" onClick={goToAdd}> <Button key="3" type="primary" onClick={goToAdd}>
<PlusOutlined />Create new Community <PlusOutlined />
Create new Community
</Button>, </Button>,
]} ]}
options={{ options={{
...@@ -183,24 +124,22 @@ const CellList = (props:any) => { ...@@ -183,24 +124,22 @@ const CellList = (props:any) => {
setting: false, setting: false,
}} }}
headerTitle="Community List" headerTitle="Community List"
// pagination={{ defaultCurrent: 1, total: Data.totalRow }} // pagination={{ defaultCurrent: 1, total: Data.totalRow }}
/> />
{/* <Table loading={false} rowKey="id" style={{ marginTop: 16 }} {/* <Table loading={false} rowKey="id" style={{ marginTop: 16 }}
dataSource={Data.rows} dataSource={Data.rows}
columns={columns} columns={columns}
pagination={{ defaultCurrent: 1, total: Data.total}} /> */} pagination={{ defaultCurrent: 1, total: Data.total}} /> */}
</>
</> : null ) : null}
}
</div> </div>
); );
}; };
function map(state:any) { function map(state: any) {
console.log(state) // console.log(state);
const loading = state.loading.models.CellList const loading = state.loading.models.CellList;
const { Data ,curString } = state[module] const { Data, curString } = state[module];
return { Data , loading ,curString} return { Data, loading, curString };
} }
export default connect(map)(CellList); export default connect(map)(CellList);
\ No newline at end of file
src/pages/CommunityManagement/CellList/Details.tsx 0 → 100644
View file @ 0cf1c156
import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import {
LeftOutlined,
EyeOutlined,
PoweroffOutlined,
FileJpgOutlined,
FilePdfOutlined,
} from '@ant-design/icons';
import { Modal, Input, Button, TimePicker, Checkbox, Image, message, Divider, Avatar } from 'antd';
// 样式
import './celllist.less';
import { RA } from '@/utils/method';
import moment from 'moment';
// 接口申明
const Adds = (props: any) => {
const { Data, dispatch } = props;
useEffect(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
if (Data) {
// 返回列表
console.log('编辑');
console.log(Data);
} else {
console.log('新建');
}
}, [1]);
//物业费选择
const plainOptions = [
{ label: '线上缴费', value: '0', disabled: true },
{ label: '线下缴费', value: '1', disabled: true },
];
// 关闭提示框
const [ModelFee, setModelFee] = useState(false);
// 返回
const goToReturn = () => {
// console.log(fileList)
history.back();
};
// 复制
const copy = () => {};
// 打开弹窗
const openModel = () => {
setModelFee(true);
};
// 关闭弹窗
const handleCancel = () => {
setModelFee(false);
};
// 关闭小区
const handleOk = () => {
setModelFee(false);
message.success('您已关闭小区！');
history.back();
};
return (
<div className="form">
<h3>
<EyeOutlined />
&nbsp;小区详情
<div className="back">
<Button
type="primary"
danger
style={{ marginRight: '15px' }}
icon={<PoweroffOutlined />}
loading={false}
onClick={openModel}
>
关闭小区
</Button>
<Button onClick={goToReturn}>
<LeftOutlined />
Back
</Button>
</div>
</h3>
<Divider />
<div className="box">
{/* 激活码 */}
<div className="code">
<li>激活码</li>
<Avatar
shape="square"
style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
size={120}
icon={<FileJpgOutlined />}
/>
</div>
{/* 详情 */}
<div className="list-item">
<div className="item">
<label>小区名字：</label>
<span>XXXXX</span>
</div>
{/* ---------- */}
<div className="item">
<label>详细地址：</label>
<span>XXXXX</span>
</div>
{/* ---------- */}
<div className="item">
<label>工作时间：</label>
<span>XXXXX</span>
</div>
{/* ---------- */}
<div className="inst">
<div className="item">
<label>小区联系电话：</label>
<span>XXXXX</span>
</div>
<div className="item">
<label>小区邮箱：</label>
<span>XXXXX</span>
</div>
</div>
{/* ---------- */}
<div className="item">
<label>小区管理员：</label>
<span>XXXXX</span>
</div>
{/* ---------- */}
<div className="item" style={{ marginBottom: '0' }}>
<label>物业费：</label>
<Checkbox.Group options={plainOptions} defaultValue={['1']} />
</div>
</div>
</div>
<Divider />
<div className="box">
<div className="list-item">
<div className="item">
<label>楼巴时刻表：</label>
<Avatar
shape="square"
style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
size={64}
icon={<FileJpgOutlined />}
/>
<Button type="link">预览</Button>
</div>
{/* ---------- */}
<div className="item">
<label>物业办事指南：</label>
<Avatar
shape="square"
style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
size={64}
icon={<FilePdfOutlined />}
/>
<Button type="link">预览</Button>
</div>
{/* ---------- */}
<div className="item">
<label>保质期服务：</label>
<Avatar
shape="square"
style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
size={64}
/>
<Button type="link">预览</Button>
</div>
</div>
</div>
<Divider />
<div className="box">
<div className="list-item">
<div className="item">
<label>帮助中心：</label>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</div>
<Divider />
<div className="box">
<div className="list-item">
<div className="item">
<label>临时到访码下载：</label>
<Avatar
shape="square"
style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
size={64}
/>
<Button type="link">下载</Button>
<Input placeholder="Basic usage" disabled value="12333333333" />
<Button type="link" onClick={copy}>
复制
</Button>
</div>
</div>
</div>
{/* 确认关闭框 */}
<Modal title="确认关闭小区吗?" visible={ModelFee} onCancel={handleCancel} onOk={handleOk}>
<p>
关闭小区将会<span style={{ color: 'red' }}>删除</span>小区内
<span style={{ color: 'red' }}>所有</span>业主，请谨慎操作！
</p>
</Modal>
</div>
);
};
// export default Adds;
function map(state: any) {
const Data = state.CellList.DataSave;
const loading = state.loading.models.CellList;
return { Data, loading };
}
export default connect(map)(Adds);
src/pages/CommunityManagement/CellList/celllist.less
View file @ 0cf1c156
.contop{ li {
padding: 20px; list-style: none;
background: #fff; }
margin-bottom: 20px; .contop {
padding: 20px;
background: #fff;
margin-bottom: 20px;
} }
.listbox{ .listbox {
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 10px; padding: 10px;
} }
// 添加 // 添加
.form{ .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{ h3 {
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
.back{ .back {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-bottom: 20px; margin-bottom: 20px;
background: #fff; background: #fff;
}
}
.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; .li {
margin-left: 0; min-width: 140px;
} margin-top: 15px;
input,.ant-upload-list{ margin-left: 0;
width: 240px; display: block;
} }
.ant-picker-range{ input,
width: 240px; .ant-upload-list {
input{ width: 240px;
width: 100%; }
} .ant-picker-range {
width: 240px;
input {
width: 100%;
} }
.list{ }
.list {
display: inline-block;
}
.ant-checkbox-group {
line-height: 34px;
}
hr {
border: 0;
height: 1px;
background: #eee;
margin-bottom: 20px;
}
.tip {
padding: 15px 0;
}
.ant-form-item-label > label {
width: 160px;
}
// 详情页
.box {
position: relative;
.item {
font-size: 15px;
line-height: 35px;
margin-bottom: 10px;
label {
display: inline-block; display: inline-block;
min-width: 110px;
}
} }
.ant-checkbox-group{
line-height: 34px; .inst {
} display: flex;
hr{ .item {
border: 0; flex: 1;
height: 1px; &:nth-child(2) {
background: #eee; flex: 2;
margin-bottom: 20px; }
}
} }
.tip{ .code {
padding:15px 0; position: absolute;
right: 5%;
top: 50%;
transform: translateY(-65%);
li {
text-align: center;
line-height: 35px;
}
} }
}
}
.ant-picker-time-panel-column {
width: 100px;
} }
src/utils/params.ts
View file @ 0cf1c156
...@@ -58,7 +58,8 @@ export const requestList = [ ...@@ -58,7 +58,8 @@ export const requestList = [
file: ['A.jpg'], file: ['A.jpg'],
}, },
], ],
['/tos/tosManageCommunity/save', '29 新建一个小区', {}], // ['/tos/tosManageCommunity/save', '29 新建一个小区', {}],
['/tos/tosCommunity/save', '29 新建一个小区', {}],
['/tos/tosOrder/get', '30 获取订单详情', {}], ['/tos/tosOrder/get', '30 获取订单详情', {}],
['/tos/property/community/houseCard/query', '31 获取住户卡列表', {}], ['/tos/property/community/houseCard/query', '31 获取住户卡列表', {}],
['/tos/tosCommunity/get/detail', '32 获取小区详情', {}], ['/tos/tosCommunity/get/detail', '32 获取小区详情', {}],
......
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