Skip to content

T
TOSTUMI
Commit a4660d65 authored by maple's avatar maple
Browse files
Options

[step]保存工作区

parent b6f41437
Show whitespace changes
Inline Side-by-side
Showing with 1078 additions and 102 deletions
config/config.ts
View file @ a4660d65
...@@ -77,26 +77,29 @@ export default defineConfig({ ...@@ -77,26 +77,29 @@ export default defineConfig({
icon:'ProfileOutlined', icon:'ProfileOutlined',
routes: [ routes: [
{ {
path: '/UserManagement/LIFEUserManagement', path: './LIFEUserManagement',
name: 'lifeusers', name: 'lifeusers',
component:'./UserManagement/LIFEUserManagement/LIFEUserManagement' component:'./UserManagement/LIFEUserManagement/LIFEUserManagement'
}, },
{ {
path: '/UserManagement/ServiceProviderManagement', path: './ServiceProviderManagement',
name: 'serviceproviders', name: 'serviceproviders',
component:'./UserManagement/ServiceProviderManagement/ServiceProviderManagement' routes: [
{ path: './', component: './UserManagement/ServiceProviderManagement/ServiceProviderManagement' },
{ path: './Detail', component: './UserManagement/ServiceProviderManagement/Detail' },
{ path: './Edit', component: './UserManagement/ServiceProviderManagement/Edit' },
{path:'./Services',component:'./UserManagement/ServiceProviderManagement/Services'},
]
}, },
] ]
}, },
{ {
path: '/PropertyManagement', path: '/PropertyManagement',
name: 'propertymanagement', name: 'propertymanagement',
icon:'ReconciliationOutlined', icon: 'ReconciliationOutlined',
component: './PropertyManagement/ChargeManager', component: './PropertyManagement/ChargeManager',
routes: [
{path: './Detail',component:'./PropertyManagement/ChangeDetail'},
]
}, },
{path: '/PropertyManagementDetail',component:'./PropertyManagement/ChargeDetail'},
{ {
path: '/CommercialService', path: '/CommercialService',
name: 'commercialservice', name: 'commercialservice',
......
src/components/SelectOptions/index.jsx
View file @ a4660d65
...@@ -38,7 +38,7 @@ class SelectOptions extends React.Component { ...@@ -38,7 +38,7 @@ class SelectOptions extends React.Component {
}; };
componentDidMount(){ componentDidMount(){
var name=getLocale(); var name=getLocale();
console.log(name) //console.log(name)
if(name=="zh-CN"){ if(name=="zh-CN"){
this.setState({ this.setState({
selectoptionsOpen : '展开', selectoptionsOpen : '展开',
......
src/pages/PropertyManagement/ChangeDetail.tsx → src/pages/PropertyManagement/ChargeDetail.tsx
View file @ a4660d65
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from './ChangeDetail.less'; import styles from './ChargeDetail.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd'; import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi'; import { Link, useIntl, connect, Dispatch } from 'umi';
...@@ -9,9 +9,10 @@ import PDF from 'react-pdf-js';// ...@@ -9,9 +9,10 @@ import PDF from 'react-pdf-js';//
import { render } from 'react-dom'; import { render } from 'react-dom';
const ChangeDetail = () => { const ChargeDetail = () => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [scale, setState] = useState(1.3) const [scale, setState] = useState(1.3)
const [pages,setPages] = useState(1) const [pages,setPages] = useState(1)
const [curpage,setCurpage]=useState(1) const [curpage,setCurpage]=useState(1)
...@@ -33,13 +34,17 @@ const ChangeDetail = () => { ...@@ -33,13 +34,17 @@ const ChangeDetail = () => {
const pageChange = (curpage: any) => { const pageChange = (curpage: any) => {
setCurpage(curpage) setCurpage(curpage)
} }
const goToReturn = () => {
history.back()
}
return ( return (
<div className={styles.base}> <div className={styles.base}>
{/* 组件 */} {/* 组件 */}
<div className={styles.box}> <div className={styles.box}>
<div className={styles.item1}>Payment Settings</div> <div className={styles.item1}>Payment Settings</div>
<div className={styles.item2}>Upload Time 2020/7/14/18:09:00</div> <div className={styles.item2}>Upload Time 2020/7/14/18:09:00</div>
<button className={styles.item3}>返回</button> <button className={styles.item3} onClick={goToReturn}>返回</button>
</div> </div>
<div className={styles.box2}> <div className={styles.box2}>
...@@ -80,4 +85,4 @@ const ChangeDetail = () => { ...@@ -80,4 +85,4 @@ const ChangeDetail = () => {
}; };
export default ChangeDetail; export default ChargeDetail;
src/pages/PropertyManagement/ChargeManager.tsx
View file @ a4660d65
...@@ -31,13 +31,13 @@ const ChargeManager = (props: { location: any; }) => { ...@@ -31,13 +31,13 @@ const ChargeManager = (props: { location: any; }) => {
const addaccount = formatMessage({ id: 'R.charge.addaccount' }) const addaccount = formatMessage({ id: 'R.charge.addaccount' })
const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' }) const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
const menuListNormal = ["A"] const menuListNormal = ["A",'Accounting company']
const [display, setDisplay] = useState("A");//小组件：线框 const [display, setDisplay] = useState("A");//小组件：线框
const pagination={defaultCurrent:1,total: 16} const pagination={defaultCurrent:1,total: 16}
const goToDetail = () => { const goToDetail = () => {
history.push(location.pathname+"/Detail") history.push('/PropertyManagementDetail?id=123')
} }
const columns = [ const columns = [
......
src/pages/PropertyManagement/index.less
View file @ a4660d65
...@@ -11,8 +11,9 @@ ...@@ -11,8 +11,9 @@
//头部组件 //头部组件
.box{ .box{
width: 100%; width: 100%;
height: 64px; height: 34px;
position: relative; position: relative;
margin-bottom: 56px;
} }
.input{ .input{
width:200px; width:200px;
...@@ -61,7 +62,7 @@ ...@@ -61,7 +62,7 @@
//小组件1 //小组件1
.buttonLine{ .buttonLine{
width:200px; width:240px;
height:32px; height:32px;
border:none; border:none;
background:none; background:none;
...@@ -71,19 +72,30 @@ ...@@ -71,19 +72,30 @@
line-height:30px; line-height:30px;
cursor: pointer; cursor: pointer;
} }
.fontgz(){
font-size:16px;
font-family:'Source Han Sans CN;';
font-weight:800;
}
.buttonWait{ .buttonWait{
.buttonLine(); .buttonLine();
border-bottom:2px solid#dedede; border-bottom:2px solid#dedede;
color:#454545; color:#454545;
.fontgz();
} }
.buttonWait:hover{ .buttonWait:hover{
border-bottom:3px solid rgba(24,144,255,1); border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1); color:rgba(24,144,255,1);
.fontgz();
} }
.buttonChoose{ .buttonChoose{
.buttonLine(); .buttonLine();
border-bottom:3px solid rgba(24,144,255,1); border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1); color:rgba(24,144,255,1);
.fontgz();
} }
......
src/pages/UserManagement/ServiceProviderManagement/Detail.less 0 → 100644
View file @ a4660d65
@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: 400px;
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: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 196px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 196px;
}
.box3{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left: 196px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 196px;
}
.box5{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 196px;
}
.box6{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 196px;
}
.box7{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box7item1{
position: absolute;
}
.box7item2{
position: absolute;
left: 196px;
}
src/pages/UserManagement/ServiceProviderManagement/Detail.tsx 0 → 100644
View file @ a4660d65
import React, { useState, useEffect } from 'react';
import styles from './Detail.less';
import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
];
const Template = () => {
const goToReturn = () => {
history.back()
}
const pagination={defaultCurrent:1,total: 16}
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>详情</a>
</Space>
),
},
];
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Service Provider Details</div>
<button className={styles.item3} onClick={goToReturn}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Company Name</div>
<div className={styles.box1item2}>Free Limited</div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Office Address</div>
<div className={styles.box2item2}>Albert Street, 175, Singapore, Albert, Bugis, Victoria Street, </div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>Person In Charge</div>
<div className={styles.box3item2}>Bellamy</div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Contact Details</div>
<div className={styles.box4item2}>18205462231 371712650@qq.com</div>
</div>
<div className={styles.box5}>
<div className={styles.box5item1}>Services Available</div>
<div className={styles.box5item2}>Cleaning，Security Guard</div>
</div>
<div className={styles.box6}>
<div className={styles.box1item1}>Service Community</div>
</div>
<div className={styles.box7}>
<div className={styles.box1item1}>Security Guard Account</div>
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
<Button >Cancellation</Button>
</div>
);
};
export default Template;
\ No newline at end of file
src/pages/UserManagement/ServiceProviderManagement/Edit.less 0 → 100644
View file @ a4660d65
@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: 400px;
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: 34px;
position: relative;
line-height: 34px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 154px;
}
.box1item3{
position: absolute;
left: 529px;
}
.box1item4{
position: absolute;
left: 650px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
margin-top: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 192px;
}
.box3{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left: 189px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 189px;
}
.box4item3{
position: absolute;
left: 405px;
}
.box5{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 189px;
}
.box5item3{
position: absolute;
left: 405px;
}
.box6{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 189px;
}
.box6item3{
position: absolute;
left: 405px;
}
.box7{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box7item1{
position: absolute;
}
.box7item2{
position: absolute;
left: 189px;
}
.box7item3{
position: absolute;
left: 405px;
}
src/pages/UserManagement/ServiceProviderManagement/Edit.tsx 0 → 100644
View file @ a4660d65
import React, { useState, useEffect } from 'react';
import styles from './Edit.less';
import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import SelectOptions from '../../../components/SelectOptions/index';
const Template = () => {
const goToReturn = () => {
history.back()
}
const printContent = (comment: any)=>{
console.log(comment)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Edit Service Provider</div>
<button className={styles.item3} onClick={goToReturn}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Company Name</div>
<div className={styles.box1item2}><Input style={{width:260}} placeholder="Please enter company name"/></div>
<div className={styles.box1item3}>Office Address</div>
<div className={styles.box1item4}><Input style={{width:200}} placeholder="Single Line Input"/></div>
</div>
<div className={styles.line}></div>
<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
<div className={styles.box2}>
<div className={styles.box2item1}>Services Available</div>
<div className={styles.box2item2}><Checkbox.Group options={ ["Cleaning", "Security Guard", "Maintenance",]} /></div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>Person In Charge</div>
<div className={styles.box3item2}><Input style={{width:200}} placeholder="Please enter a name"/></div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Contact Details</div>
<div className={styles.box4item2}><Input style={{width:200}} placeholder="Telephone"/></div>
<div className={styles.box4item3}><Input style={{width:200}} placeholder="E-mail"/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" size="large">提交</Button>
</div>
);
};
export default Template;
\ No newline at end of file
src/pages/UserManagement/ServiceProviderManagement/ServiceProviderManagement.tsx
View file @ a4660d65
...@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'; ...@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import styles from './index.less'; import styles from './index.less';
import { Input ,Menu,Table,Space} from 'antd'; import { Input ,Menu,Table,Space} from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi'; import { Link, useIntl, connect, Dispatch,history } from 'umi';
import SelectOptions from '../../../components/SelectOptions/index'; import SelectOptions from '../../../components/SelectOptions/index';
...@@ -16,9 +16,21 @@ const dataSource = [ ...@@ -16,9 +16,21 @@ const dataSource = [
}, },
]; ];
const ServiceProviderManagement = () => {
const ServiceProviderManagement = (props: { location: any; }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { location } = props;
const goToDetail = () => {
history.push(location.pathname +'/Detail')
}
const goToEdit = () => {
history.push(location.pathname +'/Edit')
}
const goToServices = () => {history.push(location.pathname +'/Services')}
const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' }) const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
const inputProject = formatMessage({ id: 'R.charge.input.project' }) const inputProject = formatMessage({ id: 'R.charge.input.project' })
const username = formatMessage({ id: 'R.charge.username' }) const username = formatMessage({ id: 'R.charge.username' })
...@@ -67,7 +79,7 @@ const ServiceProviderManagement = () => { ...@@ -67,7 +79,7 @@ const ServiceProviderManagement = () => {
key: 'action', key: 'action',
render: (text: any, record: any) => ( render: (text: any, record: any) => (
<Space size="middle"> <Space size="middle">
<a>详情</a> <a onClick={goToDetail}>详情</a>
</Space> </Space>
), ),
}, },
...@@ -87,8 +99,8 @@ const ServiceProviderManagement = () => { ...@@ -87,8 +99,8 @@ const ServiceProviderManagement = () => {
{/* 内容组件 */} {/* 内容组件 */}
<div className={styles.box2}> <div className={styles.box2}>
<button className={styles.buttonAdd2} >Avail Services</button> <button className={styles.buttonAdd2} onClick={goToServices}>Avail Services</button>
<button className={styles.buttonAdd} >Create New</button> <button className={styles.buttonAdd} onClick={goToEdit}>Create New</button>
</div> </div>
{/* 列表组件 */} {/* 列表组件 */}
......
src/pages/UserManagement/ServiceProviderManagement/Services.tsx 0 → 100644
View file @ a4660d65
import React, { useState, useEffect } from 'react';
import styles from './Services.less';
import { Input ,Button,Modal,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import {
PlusCircleOutlined,
} from '@ant-design/icons';
const Services = () => {
const goToReturn = () => {
history.back()
}
const [state, setState] = useState(false)
const [state2,setState2] = useState(false)
const [currentvalue, setCurrentvalue] = useState('')
const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard'])
const showModal = (value,e) => {
setState(true)
setCurrentvalue(value)
};
const handleOk = (e) => {
setState(false)
let serviceNew = service
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
serviceNew.remove(currentvalue)
setServices(serviceNew)
};
const handleCancel = (e) => {
setState(false)
};
const addModal = (e) => {
setState2(true)
};
const handleOk2 =(e) => {
setState2(false);
let serviceNew = service
serviceNew.push(currentvalue)
setServices(serviceNew)
};
const handleCancel2 = (e) => {
setState2(false)
};
const changeCurentvalue = (e) => {
setCurrentvalue(e.target.value)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Services Available Management</div>
<button className={styles.item3} onClick={goToReturn}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Services Available</div>
<div className={styles.box1item2}>
{
service.map((item, index) => {
return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>)
})
}
<div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}} onClick={addModal} /></div>
</div>
</div>
<div style={{ clear:"both"}}></div>
<div className={styles.line}></div>
<Button type="primary" size="large">提交</Button>
<div>
<Modal title="删除该选项" visible={state} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
<p>is delete service?</p>
</Modal>
<Modal title="新增该选项" visible={state2} onOk={handleOk2} onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
<Input style={{width:300}} onChange={changeCurentvalue} />
</Modal>
</div>
</div>
);
};
export default Services;
src/pages/runTest/ChangeDetail.less 0 → 100644
View file @ a4660d65
@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;
}
src/pages/runTest/Template.tsx
View file @ a4660d65
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from './index.less'; import styles from './ChangeDetail.less';
import { Input ,Button,Modal,Space,Pagination,Tooltip, Checkbox } from 'antd'; import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi'; import { Link, useIntl, connect, Dispatch } from 'umi';
import { import PDF from 'react-pdf-js';//
PlusCircleOutlined, import { render } from 'react-dom';
} from '@ant-design/icons';
const Template = () => { const ChangeDetail = () => {
const { formatMessage } = useIntl();
const [scale, setState] = useState(1.3)
const [pages,setPages] = useState(1)
const [curpage,setCurpage]=useState(1)
const [state, setState] = useState(false) const pdfpages = (pages: any) => {
const [state2,setState2] = useState(false)
const [currentvalue, setCurrentvalue] = useState('')
const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard']) setPages(pages)
const showModal = (value,e) => { //alert(pages)
setState(true) }
setCurrentvalue(value)
};
const handleOk = (e) => { const lookup = () => {
setState(false) if (scale == 1.3) {
let serviceNew = service setState(2)
Array.prototype.remove = function(val) { } else {
var index = this.indexOf(val); setState(1.3)
if (index > -1) {
this.splice(index, 1);
} }
};
serviceNew.remove(currentvalue)
setServices(serviceNew)
};
const handleCancel = (e) => {
setState(false)
};
const addModal = (e) => {
setState2(true)
};
const handleOk2 =(e) => {
setState2(false);
let serviceNew = service
serviceNew.push(currentvalue)
setServices(serviceNew)
};
const handleCancel2 = (e) => {
setState2(false)
};
const changeCurentvalue = (e) => {
setCurrentvalue(e.target.value)
} }
const pageChange = (curpage: any) => {
setCurpage(curpage)
}
return ( return (
<div className={styles.base}> <div className={styles.base}>
{/* 组件 */}
{/* 头部组件 */}
<div className={styles.box}> <div className={styles.box}>
<div className={styles.item1}>Services Available Management</div> <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> <button className={styles.item3}>返回</button>
</div> </div>
<div className={styles.box1}> <div className={styles.box2}>
<div className={styles.box1item1}>Services Available</div> <div className={styles.item21}>Project</div>
<div className={styles.box1item2}> <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>
{ {
service.map((item, index) => { scale == 1.3 ? (
return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>) <Tooltip title="点击放大查看">
}) <div className={styles.box3out}>
} <div className={styles.box3} onClick={lookup}>
<div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}} onClick={addModal} /></div> <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>
</div> </div>
<div style={{ clear:"both"}}></div> </Tooltip>
<div className={styles.line}></div> ) : (
<Button type="primary" size="large">提交</Button> <Tooltip title="还原视图">
< div className={ styles.box3of } onClick={ lookup } >
<div> {/* <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} /> */}
<Modal title="删除该选项" visible={state} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
<p>is delete service?</p>
</Modal>
<Modal title="新增该选项" visible={state2} onOk={handleOk2} onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
<Input style={{width:300}} onChange={changeCurentvalue} />
</Modal>
</div> </div>
</Tooltip>
)
}
</div> </div>
); );
}; };
export default Template; export default ChangeDetail;
src/pages/template/Template.tsx 0 → 100644
View file @ a4660d65
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Button,Modal,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import {
PlusCircleOutlined,
} from '@ant-design/icons';
const Template = () => {
const [state, setState] = useState(false)
const [state2,setState2] = useState(false)
const [currentvalue, setCurrentvalue] = useState('')
const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard'])
const showModal = (value,e) => {
setState(true)
setCurrentvalue(value)
};
const handleOk = (e) => {
setState(false)
let serviceNew = service
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
serviceNew.remove(currentvalue)
setServices(serviceNew)
};
const handleCancel = (e) => {
setState(false)
};
const addModal = (e) => {
setState2(true)
};
const handleOk2 =(e) => {
setState2(false);
let serviceNew = service
serviceNew.push(currentvalue)
setServices(serviceNew)
};
const handleCancel2 = (e) => {
setState2(false)
};
const changeCurentvalue = (e) => {
setCurrentvalue(e.target.value)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Services Available Management</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Services Available</div>
<div className={styles.box1item2}>
{
service.map((item, index) => {
return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>)
})
}
<div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}} onClick={addModal} /></div>
</div>
</div>
<div style={{ clear:"both"}}></div>
<div className={styles.line}></div>
<Button type="primary" size="large">提交</Button>
<div>
<Modal title="删除该选项" visible={state} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
<p>is delete service?</p>
</Modal>
<Modal title="新增该选项" visible={state2} onOk={handleOk2} onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
<Input style={{width:300}} onChange={changeCurentvalue} />
</Modal>
</div>
</div>
);
};
export default Template;
src/pages/template/index.less 0 → 100644
View file @ a4660d65
@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: 400px;
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: 780px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
line-height: 48px;
}
.box1item2{
padding-left: 167px;
}
.item2x0{
width: 120px;
height: 34px;
background-color: rgba(238,238,238,1);
border: 1px solid rgba(217,217,217,1);
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
}
.item2x1{
width: 120px;
height: 34px;
border: 1px solid rgba(217,217,217,1);
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
cursor: pointer;
}
.item2x1:hover{
width: 120px;
height: 34px;
border: 1px solid rgba(24,144,255,1);
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
cursor: pointer;
}
.item2x3{
width: 120px;
height: 34px;
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
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