Commit b6f41437 authored by maple's avatar maple

[new]准备express接口调试

parent 02e45b8d
...@@ -67,128 +67,141 @@ export default defineConfig({ ...@@ -67,128 +67,141 @@ export default defineConfig({
}, },
{ {
path: '/runTest', path: '/runTest',
name: 'Monitoring Center', name: 'monitoringcenter',
icon: 'PieChartOutlined', icon: 'PieChartOutlined',
component: './runTest/Template', component: './runTest/Template',
}, },
{ {
path: '/UserManagement', path: '/UserManagement',
name: 'User Management', name: 'usemanagement',
icon:'ProfileOutlined', icon:'ProfileOutlined',
routes: [ routes: [
{ {
path: '/UserManagement/LIFEUserManagement', path: '/UserManagement/LIFEUserManagement',
name: 'LIFE Users', name: 'lifeusers',
component:'./UserManagement/LIFEUserManagement/LIFEUserManagement' component:'./UserManagement/LIFEUserManagement/LIFEUserManagement'
}, },
{ {
path: '/UserManagement/ServiceProviderManagement', path: '/UserManagement/ServiceProviderManagement',
name: 'Service Providers', name: 'serviceproviders',
component:'./UserManagement/ServiceProviderManagement/ServiceProviderManagement' component:'./UserManagement/ServiceProviderManagement/ServiceProviderManagement'
}, },
] ]
}, },
{ {
path: '/PropertyManagement/PropertyManagement', path: '/PropertyManagement',
name: 'Property Management', name: 'propertymanagement',
icon:'ReconciliationOutlined', icon:'ReconciliationOutlined',
component:'./runTest/Template' component: './PropertyManagement/ChargeManager',
routes: [
{path: './Detail',component:'./PropertyManagement/ChangeDetail'},
]
}, },
{ {
path: '/CommercialService', path: '/CommercialService',
name: 'Commercial Service', name: 'commercialservice',
icon:'ConsoleSqlOutlined', icon:'ConsoleSqlOutlined',
routes: [ routes: [
{ {
path: '/CommercialService/OwnerComplaints', path: './OwnerComplaints',
name: 'Owner Complaints', name: 'ownercomplaints',
component:'./runTest/Template' component: './CommercialService/PropertyServices',
}, },
{ {
path: '/CommercialService/ProblemFeedback', path: './ProblemFeedback',
name: 'Problem Feedback', name: 'problemfeedback',
component:'./runTest/Template' component:'./CommercialService/PropertyServices'
}, },
{ {
path: '/CommercialService/RenovationApplication', path: './RenovationApplication',
name: 'Renovation Application', name: 'renovationapplication',
component:'./runTest/Template' component:'./CommercialService/PropertyServices'
},
{
path: '/CommercialService/AccessCardApplication',
name: 'AccessCard Application',
component:'./runTest/Template'
}, },
{ {
path: '/CommercialService/Report Online', path: './AccessCardApplication',
name: 'Report Online', name: 'accessCardapplication',
component:'./runTest/Template' component:'./CommercialService/PropertyServices'
}, },
{ {
path: '/CommercialService/Shelf life Service', path: './ReportOnline',
name: 'Shelf life Service', name: 'reportonline',
component:'./runTest/Template' component:'./CommercialService/PropertyServices'
}, },
{
path: './ShelfLifeService',
name: 'shelflifeservice',
component:'./CommercialService/PropertyServices'
},
{path: './AccessCardApplication/Request',component:'./CommercialService/AccessCardApplication/Request'},
{path: './OwnerComplaints/Detail',component:'./CommercialService/Detail'},
{path: './OwnerComplaints/Edit',component:'./CommercialService/Detail'},
{path: './ProblemFeedback/Detail',component:'./CommercialService/Detail'},
{path: './ProblemFeedback/Edit',component:'./CommercialService/Detail'},
{path: './RenovationApplication/Detail',component:'./CommercialService/Detail'},
{path: './RenovationApplication/Edit',component:'./CommercialService/Detail'},
{path: './ReportOnline/Detail',component:'./CommercialService/Detail'},
{path: './ReportOnline/Edit',component:'./CommercialService/Detail'},
] ]
}, },
{ {
path: '/OrderManagement/OrderManagement', path: '/OrderManagement/OrderManagement',
name: 'Order Management', name: 'ordermanagement',
icon: 'ContainerOutlined', icon: 'ContainerOutlined',
component:'./runTest/Template' component:'./runTest/Template'
}, },
{ {
path: '/ContractManagement/ContractManagement', path: '/ContractManagement/ContractManagement',
name: 'Contract Management', name: 'contractmanagement',
icon: 'SwitcherOutlined', icon: 'SwitcherOutlined',
component:'./runTest/Template' component:'./runTest/Template'
}, },
{ {
path: '/CommunityManagement', path: '/CommunityManagement',
name: 'Community Management', name: 'communitymanagement',
icon:'HddOutlined', icon:'HddOutlined',
routes: [ routes: [
{ {
path: '/CommunityManagement/CellList', path: '/CommunityManagement/CellList',
name: 'Cell List', name: 'celllist',
component:'./runTest/Template' component:'./runTest/Template'
}, },
{ {
path: '/CommunityManagement/CommunityAnnouncement', path: '/CommunityManagement/CommunityAnnouncement',
name: 'Community Announcement', name: 'communityannouncement',
component:'./runTest/Template' component:'./runTest/Template'
}, },
{ {
path: '/CommunityManagement/FacilityBookings', path: '/CommunityManagement/FacilityBookings',
name: 'Facility Bookings', name: 'facilitybookings',
component:'./runTest/Template' component:'./runTest/Template'
}, },
{ {
path: '/CommunityManagement/VisitorRecord', path: '/CommunityManagement/VisitorRecord',
name: 'Visitor Record', name: 'visitorrecord',
component:'./runTest/Template' component:'./runTest/Template'
}, },
] ]
}, },
{ {
path: '/AccountManagement', path: '/AccountManagement',
name: 'Account Management', name: 'accountmanagement',
icon:'UserSwitchOutlined', icon:'UserSwitchOutlined',
routes: [ routes: [
{ {
path: '/AccountManagement/AccountManagement', path: '/AccountManagement/AccountManagement',
name: 'Account Management', name: 'accountmanagement1',
component:'./runTest/Template' component:'./AccountManagement/AccountManagement/AccountManagement'
}, },
{ {
path: '/AccountManagement/CompanyInformation', path: '/AccountManagement/CompanyInformation',
name: 'Company Information', name: 'companyinformation',
component:'./runTest/Template' component:'./AccountManagement/CompanyInformation/CompanyInformation'
}, },
{ {
path: '/AccountManagement/LanguageSettings', path: '/AccountManagement/LanguageSettings',
name: 'Language Settings', name: 'languagesettings',
component:'./runTest/Template' component:'./AccountManagement/LanguageSettings/LanguageSettings'
}, },
] ]
}, },
......
...@@ -7,8 +7,12 @@ import { gray } from 'chalk'; ...@@ -7,8 +7,12 @@ import { gray } from 'chalk';
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons'; import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
import { indexOf } from 'lodash'; import { indexOf } from 'lodash';
import { useIntl,getLocale} from 'umi';
import {
DownOutlined,
UpOutlined,
} from '@ant-design/icons';
var ArrayToPingYin = require('./ArrayToPingYin'); var ArrayToPingYin = require('./ArrayToPingYin');
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
const menuListNormal=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"] const menuListNormal=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
...@@ -26,22 +30,58 @@ function getDotText(arr) { ...@@ -26,22 +30,58 @@ function getDotText(arr) {
} }
} }
class SelectOptions extends React.Component { class SelectOptions extends React.Component {
state = { state = {
}; };
componentDidMount(){
var name=getLocale();
console.log(name)
if(name=="zh-CN"){
this.setState({
selectoptionsOpen : '展开',
selectoptionsPutItAway :'收起',
selectoptionsSelected : '已选',
selectoptionsSelectAll : '全选',
selectoptionsSelectNone : '全不选',
selectoptionsAll:'所有',
selectoptionsSearchCell :'搜索小区',
selectoptionsAllCell:'全部小区',
componetVisible:'展开',
})
}else{
this.setState({
selectoptionsOpen : 'Open',
selectoptionsPutItAway :'Put It Away',
selectoptionsSelected : 'Selected',
selectoptionsSelectAll : 'Select All',
selectoptionsSelectNone : 'Unselect All',
selectoptionsAll:'All',
selectoptionsSearchCell :'Search cell',
selectoptionsAllCell:'All Cell',
componetVisible:'Open',
})
}
};
constructor(props) { constructor(props) {
super(props); super(props);
const {list, dispatch } = this.props; const {list, dispatch } = this.props;
if(list==null){ if(list==null){
console.error("组件错误:没有数据导入") //console.error("组件错误:没有数据导入")
} }
this.state = { this.state = {
selectoptionsOpen : 'Open',
selectoptionsPutItAway :'Put It Away',
selectoptionsSelected : 'Selected',
selectoptionsSelectNone : 'Select None',
selectoptionsAll:'All',
selectoptionsSearchCell :'Search cell',
menuList:ArrayToPingYin.get(list), menuList:ArrayToPingYin.get(list),
componetVisible:"展开", componetVisible:'Open',
checkedListOptions:list, checkedListOptions:list,
checkedList: list, checkedList: list,
indeterminate: false, indeterminate: false,
...@@ -53,10 +93,10 @@ class SelectOptions extends React.Component { ...@@ -53,10 +93,10 @@ class SelectOptions extends React.Component {
hideAndexpand = ()=> { hideAndexpand = ()=> {
if(this.state.componetVisible=="展开"){ if(this.state.componetVisible==this.state.selectoptionsOpen){
this.setState({componetVisible:"收起"}) this.setState({componetVisible:this.state.selectoptionsPutItAway})
}else{ }else{
this.setState({componetVisible:"展开"}) this.setState({componetVisible:this.state.selectoptionsOpen})
} }
}; };
onChangeValue = (checkedList) => { onChangeValue = (checkedList) => {
...@@ -137,24 +177,24 @@ class SelectOptions extends React.Component { ...@@ -137,24 +177,24 @@ class SelectOptions extends React.Component {
render() { render() {
return ( return (
<div > <div style={{minWidth:800}}>
{ {
this.state.componetVisible=="展开"? this.state.componetVisible==this.state.selectoptionsOpen?
<div style={{width:"100%",height:48, position:"relative"}}> <div style={{width:"100%",height:48, position:"relative"}}>
<div style={{ position:"absolute",left:5,top:5}}>已选{this.state.resultList.length==this.props.list.length?'全部小区':getDotText(this.state.resultList)}</div> <div style={{ position:"absolute",left:5,top:5}}>{this.state.selectoptionsSelected}{this.state.resultList.length==this.props.list.length?this.state.selectoptionsAllCell:getDotText(this.state.resultList)}</div>
<div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div> <div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}<DownOutlined /></div>
</div> </div>
: :
<div style={{width:"100%",backgroundColor:"#eeeeee"}}> <div style={{width:"100%",backgroundColor:"#eeeeee"}}>
<div style={{width:"100%",height:48, position:"relative"}}> <div style={{width:"100%",height:48, position:"relative"}}>
<div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?'全不选':'已选'}{this.state.resultList.length==this.props.list.length?'全部小区':getDotText(this.state.resultList)}</div> <div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?this.state.selectoptionsSelectNone:this.state.selectoptionsSelected}{this.state.resultList.length==this.props.list.length?this.state.selectoptionsAllCell:getDotText(this.state.resultList)}</div>
<div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div> <div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible} <UpOutlined /></div>
</div> </div>
<div style={{width:"100%",backgroundColor:"#eeeeee",userSelect:"none"}}> <div style={{width:"100%",backgroundColor:"#eeeeee",userSelect:"none"}}>
<div style={{width:"100%",height:40, position:"relative"}}> <div style={{width:"100%",height:40, position:"relative"}}>
<div style={{fontSize:14,position:"absolute"}}> <div style={{fontSize:14,position:"absolute"}}>
<a style={{marginLeft:16}} onClick={this.itemSelectAll.bind(this)}>所有</a> <a style={{marginLeft:16}} onClick={this.itemSelectAll.bind(this)}>{this.state.selectoptionsAll}</a>
{ {
menuListNormal.map((item, index) => { menuListNormal.map((item, index) => {
if(this.state.menuList.indexOf(item)>-1){ if(this.state.menuList.indexOf(item)>-1){
...@@ -165,13 +205,13 @@ class SelectOptions extends React.Component { ...@@ -165,13 +205,13 @@ class SelectOptions extends React.Component {
}) })
} }
</div> </div>
<Checkbox style={{ position:"absolute",right:100}} indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange} checked={this.state.checkAll}>全选</Checkbox> <Checkbox style={{ position:"absolute",right:130}} indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange} checked={this.state.checkAll}>{this.state.selectoptionsSelectAll}</Checkbox>
<Checkbox style={{ position:"absolute",right:0}} onChange={this.onCheckAllChangeOver} checked={this.state.checkNone} >全不选</Checkbox> <Checkbox style={{ position:"absolute",right:0}} onChange={this.onCheckAllChangeOver} checked={this.state.checkNone} >{this.state.selectoptionsSelectNone}</Checkbox>
</div> </div>
<div style={{width:"100%",paddingLeft:16,paddingRight:16}}> <div style={{width:"100%",paddingLeft:16,paddingRight:16}}>
<div style={{width:"100%",backgroundColor:"#ffffff",border:"1px solid #cfcfcf",padding:5}}> <div style={{width:"100%",backgroundColor:"#ffffff",border:"1px solid #cfcfcf",padding:5}}>
<Input.Search placeholder="搜索小区" onSearch={this.getSearchValue.bind(this)} style={{width:200,margin:16}} /> <Input.Search placeholder={this.state.selectoptionsSearchCell} onSearch={this.getSearchValue.bind(this)} style={{width:200,margin:16}} />
<div><h1> </h1></div> <div><h1> </h1></div>
<CheckboxGroup <CheckboxGroup
options={ this.state.checkedListOptions} options={ this.state.checkedListOptions}
......
...@@ -9,6 +9,7 @@ import ProLayout, { ...@@ -9,6 +9,7 @@ import ProLayout, {
Settings, Settings,
DefaultFooter, DefaultFooter,
} from '@ant-design/pro-layout'; } from '@ant-design/pro-layout';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Link, useIntl, connect, Dispatch } from 'umi'; import { Link, useIntl, connect, Dispatch } from 'umi';
import { GithubOutlined } from '@ant-design/icons'; import { GithubOutlined } from '@ant-design/icons';
......
export default { export default {
'R.charge.input.project': 'Project', 'R.charge.input.project': 'Project',
'R.charge.input.nameofowner':'nameofowner', 'R.charge.input.nameofowner':'Name of Owner',
'R.charge.username': 'username', 'R.charge.username': 'username',
'R.charge.project': 'project', 'R.charge.project': 'project',
'R.charge.unit': 'unit', 'R.charge.unit': 'unit',
...@@ -9,5 +9,13 @@ export default { ...@@ -9,5 +9,13 @@ export default {
'R.charge.actions': 'actions', 'R.charge.actions': 'actions',
'R.charge.search': 'search', 'R.charge.search': 'search',
'R.charge.addaccount': 'addaccount', 'R.charge.addaccount': 'addaccount',
'R.charge.paymentsetting':'paymentsetting', 'R.charge.paymentsetting': 'paymentsetting',
'R.selectoptions.open': 'Open',
'R.selectoptions.PutItAway':'Put It Away',
'R.selectoptions.Selected':'Selected',
'R.selectoptions.SelectNone': 'Select None',
'R.selectoptions.all':'All',
'R.selectoptions.SearchCell': 'Search cell',
}; };
...@@ -49,4 +49,28 @@ export default { ...@@ -49,4 +49,28 @@ export default {
'menu.editor.flow': 'Flow Editor', 'menu.editor.flow': 'Flow Editor',
'menu.editor.mind': 'Mind Editor', 'menu.editor.mind': 'Mind Editor',
'menu.editor.koni': 'Koni Editor', 'menu.editor.koni': 'Koni Editor',
'menu.usemanagement': 'User Management',
'menu.monitoringcenter': 'Monitoring Center',
'menu.usemanagement.lifeusers': 'LIFE Users',
'menu.usemanagement.serviceproviders': 'Service Providers',
'menu.propertymanagement': 'Property Management',
'menu.commercialservice': 'Commercial Service',
'menu.commercialservice.ownercomplaints': 'Owner Complaints',
'menu.commercialservice.problemfeedback': 'Problem Feedback',
'menu.commercialservice.renovationapplication': 'Renovation Application',
'menu.commercialservice.accessCardapplication': 'AccessCard Application',
'menu.commercialservice.reportonline': 'Report Online',
'menu.commercialservice.shelflifeservice': 'Shelf life Service',
'menu.ordermanagement': 'Order Management',
'menu.contractmanagement': 'Contract Management',
'menu.communitymanagement': 'Community Management',
'menu.communitymanagement.celllist': 'Cell List',
'menu.communitymanagement.communityannouncement': 'Community Announcement',
'menu.communitymanagement.facilitybookings': 'Facility Bookings',
'menu.communitymanagement.visitorrecord': 'visitorrecord',
'menu.accountmanagement': 'Account Management',
'menu.accountmanagement.accountmanagement1': 'Account Management',
'menu.accountmanagement.companyinformation': 'Company Information',
'menu.accountmanagement.languagesettings': 'Language Settings',
}; };
...@@ -9,5 +9,14 @@ export default { ...@@ -9,5 +9,14 @@ export default {
'R.charge.actions': '操作', 'R.charge.actions': '操作',
'R.charge.search': '搜索', 'R.charge.search': '搜索',
'R.charge.addaccount': '添加会计', 'R.charge.addaccount': '添加会计',
'R.charge.paymentsetting':'缴费设置', 'R.charge.paymentsetting': '缴费设置',
'R.selectoptions.open': '展开',
'R.selectoptions.PutItAway':'收起',
'R.selectoptions.Selected':'已选',
'R.selectoptions.SelectNone': '全不选',
'R.selectoptions.all':'所有',
'R.selectoptions.SearchCell':'搜索小区',
}; };
...@@ -49,4 +49,5 @@ export default { ...@@ -49,4 +49,5 @@ export default {
'menu.editor.flow': '流程编辑器', 'menu.editor.flow': '流程编辑器',
'menu.editor.mind': '脑图编辑器', 'menu.editor.mind': '脑图编辑器',
'menu.editor.koni': '拓扑编辑器', 'menu.editor.koni': '拓扑编辑器',
}; };
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import SelectOptions from '../../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
const AccountManagement = () => {
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Add Admin Account</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Account ID</div>
<div className={styles.box1item2}><Input/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Administrator Name</div>
<div className={styles.box2item2}><Input/></div>
<div className={styles.box2item3}>Contact Details</div>
<div className={styles.box2item4}><Input/></div>
</div>
<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
<div className={styles.box3}>
<div className={styles.box3item1}>Permission Configuration</div>
<div className={styles.box3item2}>
<div className={styles.box3item2R}><Radio>Secondary Administrator</Radio></div>
<div className={styles.box3item2R}><Radio>Three Level Administrator</Radio></div>
<div className={styles.box3item2R}><Radio>Select All</Radio></div>
</div>
<div className={styles.box3item3}>
<Input />
</div>
</div>
</div>
);
};
export default AccountManagement;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 320px;
text-indent: 15px;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 182px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 182px;
}
.box2item3{
position: absolute;
left: 537px;
}
.box2item4{
position: absolute;
left: 670px;
}
.box3{
width: 100%;
position: relative;
margin-top: 20px;
}
.box3item1{
position: absolute;
}
.box3item2{
padding-left: 220px;
}
.box3item2R{
bottom: 20px;
}
.box3item3{
position: absolute;
left: 485px;
top:19px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
const CompanyInformation = () => {
return (
<div className={styles.base}>
<div className={styles.box1}>
<div className={styles.box1item1}>Management Company</div>
<div className={styles.box1item2}>Singapore Management Company</div>
<div className={styles.box1item3}> <Button>Edit</Button></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Contact Number</div>
<div className={styles.box2item2}><Input style={{width:200}} /></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Contact Email</div>
<div className={styles.box2item2}><Input style={{width:200}}/></div>
</div>
</div>
);
};
export default CompanyInformation;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 197px;
}
.box1item3{
position: absolute;
right: 0;
}
.box2{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 158px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
import { Link, useIntl, connect, Dispatch ,getLocale, setLocale} from 'umi';
const locales = ['zh-CN','en-US'];
const LanguageSettings = () => {
const languageSelect = (e) => {
setLocale(locales[e.target.value])
};
const [curLang, setCurLang] = useState(0);
useEffect(() => {
if (getLocale() == "en-US") {
setCurLang(1)
} else {
setCurLang(0)
}
}, [curLang]);
return (
<div className={styles.base}>
<div className={styles.box}>Language Selection</div>
<Radio.Group onChange={languageSelect} value={curLang} >
<div className={styles.box}><Radio value={0}>Chinese</Radio></div>
<div className={styles.box}><Radio value={1}>English</Radio></div>
</Radio.Group>
</div>
);
};
export default LanguageSettings;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
.box{
margin-bottom: 28px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Button,Table,Space,Pagination,Tooltip } from 'antd';
import { Link, useIntl, connect, Dispatch,history } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
const Request = () => {
const goToReturn = () => {
history.push('/CommercialService/AccessCardApplication')
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Payment Settings</div>
<button className={styles.item3} onClick={goToReturn}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Contract Details</div>
<div className={styles.box1item2}><Input.Search style={{width:200}} /></div>
<div className={styles.box1item3}><Input style={{width:94}}/></div>
<div className={styles.box1item4}>#</div>
<div className={styles.box1item5}><Input style={{width:80}}/></div>
<div className={styles.box1item6}></div>
<div className={styles.box1item7}><Input style={{width:112}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}><Input style={{width:680}}/></div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>Owner</div>
<div className={styles.box3item2}><Input style={{ width: 200 }} /></div>
<div className={styles.box3item3}>Contract Details</div>
<div className={styles.box3item4}><Input style={{ width: 200 }} /></div>
<div className={styles.box3item5}><Input style={{width:200}}/></div>
</div>
<div className={styles.line}></div>
<div className={styles.box3}>
<div className={styles.box3item1}>Applicant</div>
<div className={styles.box3item2}><Input style={{ width: 200 }} /></div>
<div className={styles.box3item3}>Contract Details</div>
<div className={styles.box3item4}><Input style={{ width: 200 }} /></div>
<div className={styles.box3item5}><Input style={{width:200}}/></div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Relationship With The Owner</div>
<div className={styles.box4item2}><Input style={{ width: 120 }} /></div>
</div>
<div className={styles.box5}>
<div className={styles.box5item1}>Relationship With The Owner</div>
<div className={styles.box5item2}><TextArea autoSize={false} style={{ width: 520,height: 120}} /></div>
</div>
<div><div className={styles.line}></div><Button type="primary" size="large">summit</Button></div>
</div>
);
};
export default Request;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 180px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item2{
width:300px;
position: absolute;
left: (300px);
line-height: 30px;
}
.item4{
position: absolute;
left: (500px);
line-height: 30px;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 32px;
line-height: 32px;
position: relative;
margin-bottom: 16px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 146px;
}
.box1item3{
position: absolute;
left: 362px;
}
.box1item4{
position: absolute;
left: 461px;
}
.box1item5{
position: absolute;
left: 475px
}
.box1item6{
position: absolute;
left: 561px;
}
.box1item7{
position: absolute;
left: 583px;
}
.box2{
width: 100%;
height: 32px;
position: relative;
padding-left: 146px;
margin-bottom: 27px;
}
.box2item1{
position: absolute;
}
.box3{
width: 100%;
height: 32px;
position: relative;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left:146px;
}
.box3item3{
position: absolute;
left:462px;
}
.box3item4{
position: absolute;
left:590px;
}
.box3item5{
position: absolute;
left:818px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box4{
width: 100%;
height: 32px;
margin-top: 28px;
margin-bottom: 28px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 252px;
}
.box5{
width: 100%;
height: 120px;
position: relative;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 252px;
}
\ No newline at end of file
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 180px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
//内容组件
.box1{
width: 100%;
height: 36px;
position: relative;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 215px;
}
.box2{
width: 100%;
height: 36px;
position: relative;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 430px;
}
.box3{
width: 100%;
height: 36px;
position: relative;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left: 132px;
}
.box3item3{
position: absolute;
left: 315px;
}
.box3item4{
position: absolute;
left: 445px;
}
.box3item5{
position: absolute;
left: 588px;
}
.box4{
width: 100%;
height: 90px;
position: relative;
margin-bottom: 28px;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 193px;
top:10px;
width: 394px;
height: 80px;
background-color: rgba(244,244,244,1);
overflow-y: auto;
}
.box5{
width: 100%;
height: 80px;
position: relative;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 193px;
}
.box5item3{
position: absolute;
left: 311px;
}
.box5item4{
position: absolute;
left: 429px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box6{
width: 100%;
height: 32px;
position: relative;
margin-bottom: 28px;
line-height: 32px;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 193px;
}
.box6item3{
position: absolute;
left: 498px;
}
.box6item4{
position: absolute;
left: 626px;
}
.box7{
width: 100%;
height: 80px;
position: relative;
margin-bottom: 28px;
}
.box7item1{
position: absolute;
}
.box7item2{
position: absolute;
left: 193px;
}
.box8{
width: 100%;
height: 200px;
position: relative;
}
.box8min{
width: 100%;
height: 100px;
position: relative;
}
.box8item1{
position: absolute;
}
.box8item2{
position: absolute;
left: 193px;
}
.box8item3{
position: absolute;
left: 800px;
}
.box8item01{
position: absolute;
}
.box8item02{
position: absolute;
left: 20px;
}
.box8item03{
position: absolute;
left: 20px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './Detail.less';
import { Input ,Menu,Table,Space,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch , } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const stylesList5 = [
styles.box5item2,
styles.box5item3,
styles.box5item4
]
const stylesList8 = [
styles.box8item01,
styles.box8item01,
styles.box8item01
]
const goToReturn = () => {
history.back()
}
const Detail = (props) => {
const [picList] = useState(['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png']);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const [editorFlag, setEditorFlag] = useState(true);
const { location } = props;
useEffect(() => {
if ((location.pathname).indexOf("/Edit")>-1) {
setEditorFlag(true)
} else {
setEditorFlag(false)
}
},[location.pathname]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj:any) => {setFileList(Obj.fileList)}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Payment Settings</div>
<button className={styles.item3} onClick={goToReturn}>返回</button>
</div>
{/* 内容组件 */}
<div className={styles.box1}>
<div className={styles.box1item1}>Sunshine Stanford </div>
<div className={styles.box1item2}>03#06-2050</div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Albert Street,175,Singapore,Albert,Bugis,Victoria Street,Rochor,Central Singapore 189969</div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>User Name</div>
<div className={styles.box3item2}>Josephine </div>
<div className={styles.box3item3}>Contact Details</div>
<div className={styles.box3item4}>13657724536</div>
<div className={styles.box3item5}>371712650@qq.com</div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Warranty Details</div>
<div className={styles.box4item2}>
垃圾分类(英文名为:Garbage classification),一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。
垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看,大致都是根据垃圾的成分、产生量,结合本地垃圾的资源利用和处理方式来进行分类的。
进行垃圾分类收集可以减少垃圾处理量和处理设备,降低处理成本,减少土地资源的消耗,具有社会、经济、生态等几方面的效益。
</div>
</div>
<div className={styles.box5}>
<div className={styles.box5item1}>Picture</div>
{
stylesList5.map((item, index) => {
return (
picList[index] != null ? (
<div className={item} key={"stylesList5_" + index}>
<img alt="pic1" style={{ width: 80, height: 80 }} src={picList[0]} />
</div>) : (<div key={"stylesList5_" + index} />)
)
})
}
</div>
<div className={styles.line}></div>
<div className={styles.box6}>
<div className={styles.box6item1}>response</div>
<div className={styles.box6item2}><Input style={{ width: 200 }} placeholder="Please enter a Name" disabled={!editorFlag} /></div>
<div className={styles.box6item3}>Contract Detail</div>
<div className={styles.box6item4}><Input style={{ width: 300 }} placeholder="Please enter contrat number" disabled={!editorFlag} /></div>
</div>
<div className={styles.box7}>
<div className={styles.box7item1}>Resolved Complaint</div>
<div className={styles.box7item2}><TextArea style={{ width: 394, height: 80 }} autoSize={false} disabled={!editorFlag}/></div>
</div>
<div className={fileList.length !=0?styles.box8:styles.box8min}>
<div className={styles.box8item1}>Resolved Complaint</div>
<div className={styles.box8item2}>
{
editorFlag ?
(<div>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal></div>) :
(<div>
{
stylesList8.map((item, index) => {
return (
picList[index] != null ? (
<div className={item} key={"stylesList8_" + index}>
<img alt="pic1" style={{ width: 80,height:80 }} src={picList[0]} />
</div>):(<div key={"stylesList8_" + index} />)
)
})
}
</div>)
}</div>
</div>
{
editorFlag ?
(<div><div className={styles.line}></div><Button type="primary">summit</Button></div>):(<div/>)
}
</div>
);
};
export default Detail;
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Upload,message,Button } from 'antd';
import { Link, useIntl, connect, Dispatch,history } from 'umi';
const pagination={defaultCurrent:1,total: 16}
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '1',
name: '胡彦斌',
age: 33,
address: '西湖区湖底公园1号',
},
];
const PropertyServices = (props: { location: any; }) => {
const { formatMessage } = useIntl();
const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
const inputProject = formatMessage({ id: 'R.charge.input.project' })
const username = formatMessage({ id: 'R.charge.username' })
const project = formatMessage({ id: 'R.charge.project' })
const unit = formatMessage({ id: 'R.charge.unit' })
const status = formatMessage({ id: 'R.charge.status' })
const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
const actions = formatMessage({ id: 'R.charge.actions' })
const search = formatMessage({ id: 'R.charge.search' })
const addaccount = formatMessage({ id: 'R.charge.addaccount' })
const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
const { location } = props;
const goToFunction = (value, e) => {
history.push(location.pathname+(value==33?"/Edit":"/Detail"))
}
const goToRequest = () => {
history.push("./AccessCardApplication/Request")
}
const tags = [username, project, unit, submissionTime, status,actions];
const [columns, setColums] = useState([{title:"1", dataIndex:"1", key:"1"}]);
useEffect(() => {
var tagval;
if (location.pathname=="/CommercialService/RenovationApplication") {
tagval=['name', 'age', 'address', 'address', 'address'];
} else {
tagval=['name', 'age', 'age', 'age', 'address'];
}
var columnsTmp = [
{ title: tags[0], dataIndex: tagval[0], key: tagval[0] },
{ title: tags[1], dataIndex: tagval[1], key: tagval[1] },
{ title: tags[2], dataIndex: tagval[2], key: tagval[2] },
{ title: tags[3], dataIndex: tagval[3], key: tagval[3] },
{ title: tags[4], dataIndex: tagval[4], key: tagval[4] },
{ title: tags[5], dataIndex: tagval[3], key: tagval[3],
render: (text: any, record: any) => (
<Space size="middle">
<a onClick={goToFunction.bind(this,text)}>{text==33?"回复":"详情"}</a>
</Space>
),},];
setColums(columnsTmp)
},[location.pathname]);
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<input className={styles.item1} placeholder={nameofowner} />
<input className={styles.item2} placeholder={inputProject} />
<input className={styles.item4} placeholder={inputProject} />
<button className={styles.item3}>{search}</button>
</div>
<div style={{position:"relative", width: "100%", height: 40 }}>
<div style={{ position: "absolute", right: 0 }}>
{
location.pathname == "/CommercialService/AccessCardApplication"?(<Button type="primary" size="large" onClick={goToRequest}>Apply For Access Card</Button>):(<div/>)
}
</div>
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
</div>
);
};
export default PropertyServices;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.input{
width:200px;
height:32px;
background:none;
outline: none;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
font-size:14px;
font-weight:400;
line-height:30px;
text-indent: 19px;
}
.item1{
.input();
}
.item2{
.input();
margin-left: 20px;
}
.item4{
.input();
margin-left: 20px;
}
.item3{
width:80px;
height:32px;
border:1px solid rgba(24,144,255,1);
border-radius:2px;
background-color:#e7f4ff;
outline: none;
font-size:14px;
font-weight:400;
color:rgba(24,144,255,1);
line-height:30px;
cursor: pointer;
margin-left: 48px;
}
.item3:active{
background-color:#ffffff;
}
\ No newline at end of file
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//边栏1
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 180px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item2{
width:300px;
position: absolute;
left: (180px+36px);
line-height: 30px;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box2{
width: 100%;
height: 80px;
text-align: center;
position: relative;
}
.item21{
line-height: 32px;
width: 200px;
position: absolute;
}
.item22{
line-height: 32px;
position: absolute;
left: 200px;
width: 200px;
height: 32px;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.item23{
line-height: 32px;
position: absolute;
left: 416px;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
width: 94px;
height: 32px;
}
.item234{
line-height: 32px;
height: 32px;
position: absolute;
left: 514px;
}
.item24{
line-height: 32px;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
position: absolute;
left: 529px;
width: 80px;
height: 32px;
}
.item245{
line-height: 32px;
position: absolute;
left: 609px;
}
.item25{
line-height: 32px;
width: 112px;
height: 32px;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
position: absolute;
left: 640px;
}
.item26{
width: 200px;
height: 32px;
line-height: 32px;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
position: absolute;
left: 780px;
}
.box3out{
padding-left: 200px;
}
.box3{
width: 780px;
border:1px solid rgba(217,217,217,1);
background-color: rgba(244,244,244,1);
cursor: pointer;
overflow: auto;
}
.box3of{
cursor: pointer;
}
.box4{
padding-left: 200px;
}
import React, { useState, useEffect } from 'react';
import styles from './ChangeDetail.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import PDF from 'react-pdf-js';//
import { render } from 'react-dom';
const ChangeDetail = () => {
const { formatMessage } = useIntl();
const [scale, setState] = useState(1.3)
const [pages,setPages] = useState(1)
const [curpage,setCurpage]=useState(1)
const pdfpages = (pages: any) => {
setPages(pages)
//alert(pages)
}
const lookup = () => {
if (scale == 1.3) {
setState(2)
} else {
setState(1.3)
}
}
const pageChange = (curpage: any) => {
setCurpage(curpage)
}
return (
<div className={styles.base}>
{/* 组件 */}
<div className={styles.box}>
<div className={styles.item1}>Payment Settings</div>
<div className={styles.item2}>Upload Time 2020/7/14/18:09:00</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box2}>
<div className={styles.item21}>Project</div>
<div className={styles.item22}>Project Name</div>
<div className={styles.item23}>Building No</div>
<div className={styles.item234}>#</div>
<div className={styles.item24}>Floor</div>
<div className={styles.item245}>——</div>
<div className={styles.item25}>Room Number</div>
<div className={styles.item26}>Owner's Name</div>
</div>
<div className={styles.box4}>
<Pagination simple defaultCurrent={curpage} total={pages*10} onChange={pageChange} />
</div>
{
scale == 1.3 ? (
<Tooltip title="点击放大查看">
<div className={styles.box3out}>
<div className={styles.box3} onClick={lookup}>
<PDF key="pdfjs" file="test2.pdf" cMapUrl="http://127.0.0.1:80/" workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js" scale={scale} page={curpage} onDocumentComplete={pdfpages} />
</div>
</div>
</Tooltip>
) : (
<Tooltip title="还原视图">
< div className={ styles.box3of } onClick={ lookup } >
<PDF key="pdfjs" file="test2.pdf" cMapUrl="http://127.0.0.1:80/" workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js' scale={scale} page={curpage} onDocumentComplete={pdfpages} />
</div>
</Tooltip>
)
}
</div>
);
};
export default ChangeDetail;
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space} from 'antd';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
];
const ChargeManager = (props: { location: any; }) => {
const { formatMessage } = useIntl();
const { location } = props;
const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
const inputProject = formatMessage({ id: 'R.charge.input.project' })
const username = formatMessage({ id: 'R.charge.username' })
const project = formatMessage({ id: 'R.charge.project' })
const unit = formatMessage({ id: 'R.charge.unit' })
const status = formatMessage({ id: 'R.charge.status' })
const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
const actions = formatMessage({ id: 'R.charge.actions' })
const search = formatMessage({ id: 'R.charge.search' })
const addaccount = formatMessage({ id: 'R.charge.addaccount' })
const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
const menuListNormal = ["A"]
const [display, setDisplay] = useState("A");//小组件:线框
const pagination={defaultCurrent:1,total: 16}
const goToDetail = () => {
history.push(location.pathname+"/Detail")
}
const columns = [
{
title: username,
dataIndex: 'name',
key: 'name',
},
{
title: project,
dataIndex: 'age',
key: 'age',
},
{
title: unit,
dataIndex: 'address',
key: 'address',
},
{
title: status,
dataIndex: 'address',
key: 'address',
},
{
title: submissionTime,
dataIndex: 'address',
key: 'address',
},
{
title: actions,
key: 'action',
render: (text: any, record: any) => (
<Space size="middle">
<a onClick={goToDetail}>Detail</a>
</Space>
),
},
];
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<input className={styles.item1} placeholder={nameofowner} />
<input className={styles.item2} placeholder={inputProject} />
<button className={styles.item3}>{search}</button>
</div>
{/* 内容组件 */}
<div className={styles.box2}>
{
menuListNormal.map((item, index) => {
return (<button key={"bt"+ index } className={display==item?styles.buttonChoose:styles.buttonWait} onClick={()=>{setDisplay(item)}}>{item}</button>)
})
}
<button className={styles.buttonAdd2} >+ {addaccount} </button>
<button className={styles.buttonAdd} >{paymentsetting}</button>
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
</div>
);
};
export default ChargeManager;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
}
//边栏1
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.input{
width:200px;
height:32px;
background:none;
outline: none;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
font-size:14px;
font-weight:400;
line-height:30px;
text-indent: 19px;
}
.item1{
.input();
}
.item2{
.input();
margin-left: 20px;
}
.item3{
width:80px;
height:32px;
border:1px solid rgba(24,144,255,1);
border-radius:2px;
background-color:#e7f4ff;
outline: none;
font-size:14px;
font-weight:400;
color:rgba(24,144,255,1);
line-height:30px;
cursor: pointer;
margin-left: 20px;
}
.item3:active{
background-color:#ffffff;
}
//边栏2
.box2{
width: 100%;
height: 40px;
margin-top: 0px;
position: relative;
}
//小组件1
.buttonLine{
width:200px;
height:32px;
border:none;
background:none;
outline: none;
font-size:14px;
font-weight:400;
line-height:30px;
cursor: pointer;
}
.buttonWait{
.buttonLine();
border-bottom:2px solid#dedede;
color:#454545;
}
.buttonWait:hover{
border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
}
.buttonChoose{
.buttonLine();
border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
}
.buttonAdd{
background:none;
outline: none;
cursor: pointer;
width:148px;
height:32px;
border:1px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
border-radius:2px;
position: absolute;
right: 0;
}
.buttonAdd2{
.buttonAdd();
right: 168px;
}
...@@ -92,7 +92,7 @@ const ServiceProviderManagement = () => { ...@@ -92,7 +92,7 @@ const ServiceProviderManagement = () => {
</div> </div>
{/* 列表组件 */} {/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />; <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
</div> </div>
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
} }
.box1item1{ .box1item1{
position: absolute; position: absolute;
line-height: 34px; line-height: 48px;
} }
.box1item2{ .box1item2{
padding-left: 167px; padding-left: 167px;
......
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