Commit b9563e2d authored by 熊成伟's avatar 熊成伟

debug

parent 0305756c
import React from 'react';
import {WhiteSpace} from 'antd-mobile'
import TodoCard from '../../components/TodoCard'
import TopSearch from '../../components/TopSearch'
const Backlog = (props) => {
const checkLog = () => {
props.history.push(`/blank/example/1`)
}
return (
<div>
<WhiteSpace/>
<TopSearch/>
{
[{},{},{},{},{},{}].map((item, index) => (
<div key={index}>
<WhiteSpace/>
<TodoCard data={item} onCLick={checkLog}/>
</div>
))
}
{/*<Step direction="horizontal"/>*/}
</div>
);
};
export default Backlog;
import React, {Component} from 'react';
import {List, WhiteSpace} from 'antd-mobile';
import TopSearch from '../../components/TopSearch'
const Item = List.Item;
class Communicate extends Component {
render() {
return (
<div>
<WhiteSpace/>
<TopSearch/>
<WhiteSpace/>
<List>
<Item>通讯录</Item>
<Item arrow="horizontal" multipleLine onClick={() => {}}>Title</Item>
</List>
</div>
);
}
}
export default Communicate;
import React from 'react';
import List from '../../components/List'
const Adjunct = () => {
const listData = [
{title: '开始时间', content: '文电科'},
{title: '结束时间', content: '3'},
{title: '天数', content: ''},
{title: '乘坐交通工具', content: '武汉'},
{title: '备注', line: true, content: '函数是也是对象,是一个属性的集合,所以函数下也有属性,也可以自定义属性。当我们创建一个函数时就默认会有一个prototype属性,这个属性是一个对象(属性的集合)。这个东西就是原型---通过调用构造函数而创建的那个对象实例的原型对象。prototype里也有个属性constructor,指向的是函数本身'},
{title: '附件', line: true, content:
<div>
<div style={{width: '100%', height: 44}}>111111</div>
<div style={{width: '100%', height: 44}}>111111</div>
</div>
},
]
return (
<div id="event-adjunct">
<List
listData={listData}
/>
</div>
);
};
export default Adjunct;
import React from 'react';
import './index.less'
import List from '../../components/List'
const data = Array.from(new Array(7)).map((_val, i) => ({
icon: '/img/test/test.png',
text: `name${i}`,
}));
const Basic = () => {
const personImg = data.map((item, index) => (
<div key={index} className="pos-line">
<img alt=""/>
</div>
))
const listData = [
{title: '单位(科室)', content: '文电科'},
{title: '人数', content: '3'},
{title: '人员', content: <div></div>},
{title: '目的地', content: '武汉'},
{title: '事由', content: '考察'},
];
return (
<div id="event-basic">
<List
title={"6.1日,部门考察工作出差申请"}
listData={listData}
/>
</div>
);
};
export default Basic;
import React from 'react';
import StepCard from '../../components/StepCard'
const Flow = () => {
return (
<div id="event-flow">
<StepCard/>
</div>
);
};
export default Flow;
import React from 'react';
import './index.less'
const Option = () => {
return (
<div id="event-option">
<div className="option-card">
<div className="option-title">
<div>流转意见:</div>
<a className="option-fast">常用阅办意见</a>
</div>
<textarea className="option-text"/>
</div>
</div>
);
};
export default Option;
import React, {Component} from 'react';
import {WingBlank, WhiteSpace, ActionSheet} from 'antd-mobile'
import './index.less'
import TopTabs from '../../components/TopTabs'
import Basic from './Basic'
import Adjunct from './Adjunct'
import Flow from './Flow';
import Option from './Option';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
wrapProps = {
onTouchStart: e => e.preventDefault(),
};
}
class Process extends Component {
constructor() {
super();
this.optionBlur = this.optionBlur.bind(this)
// this.handleScroll = this.handleScroll.bind(this)
this.state = {
footButton: '处理'
}
};
componentDidMount() {
console.log(document.getElementsByClassName("option-text")[0])
document.getElementsByClassName("option-text")[0].addEventListener('focus', this.optionBlur, true)
// window.addEventListener('scroll', this.handleScroll, true);
}
optionBlur = () => {
this.setState({footButton: '确认发送'})
}
componentWillUnmount() {
document.getElementsByClassName("option-text")[0].removeEventListener('focus', this.optionBlur, true)
// window.removeEventListener('scroll', this.handleScroll, true);
}
// handleScroll() {
// const basic = document.getElementById("event-basic").offsetTop;
// const adjunct = document.getElementById("event-adjunct").offsetTop;
// const flow = document.getElementById("event-flow").offsetTop;
// const option = document.getElementById("event-option").offsetTop;
// const top = document.documentElement.scrollTop;
//
// console.log(top)
//
// // console.log(basic, adjunct, flow, option);
// };
tabClick = (name) => {
// console.log(document.getElementsByClassName("option-text"))
name === 'option' && document.getElementsByClassName("option-text")[0].focus();
name === 'option' && this.optionBlur()
const top = document.getElementById(`event-${name}`).offsetTop;
document.getElementById("event").scrollTo(0,top - 9)
};
showActionSheet = () => {
const BUTTONS = ['送部门领导审核', '送办公室分管主任审批', '办结', '取消'];
ActionSheet.showActionSheetWithOptions({
options: BUTTONS,
cancelButtonIndex: BUTTONS.length - 1,
maskClosable: true,
wrapProps,
},
(buttonIndex) => {
console.log(buttonIndex)
});
}
render() {
return (
<div>
<TopTabs onClick={this.tabClick}/>
<div id="event">
<WingBlank>
<WhiteSpace/>
<Basic/>
<WhiteSpace/>
<Adjunct/>
<WhiteSpace/>
<Flow/>
<WhiteSpace/>
<Option/>
</WingBlank>
</div>
<div className="event-footer">
<div className="event-footer-button" onClick={this.showActionSheet}>
{this.state.footButton}
</div>
</div>
</div>
);
}
}
export default Process;
#event{
position: fixed;
top: 44px;
left: 0;right: 0; bottom: 50px;
overflow: auto;
padding-bottom: 300px;
}
.event-footer{
height: 45px;
position: fixed;
bottom: 0; left: 0; right: 0
}
.event-footer-button{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: rgba(54, 147, 239, 1);
color: #ffffff;
}
.event-footer-button:active{
background: rgba(54, 147, 239, 0.8);
}
.option-card{
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 6px;
background: #ffffff;
padding: 17px 15px;
font-size: 14px;
}
.option-title{
display: flex;
justify-content: space-between;
}
.option-fast{
color: rgba(239, 154, 54, 1);
}
.option-text{
resize: none;
margin-top: 15px;
height: 137px;
border:1px solid rgba(0, 0, 0, 0.1);
border-radius:5px;
padding: 12px;
}
.am-action-sheet{
bottom: 10px;
left: 10px;
right: 10px;
border-radius: 7px;
width: auto;
}
.am-action-sheet-button-list .am-action-sheet-cancel-button-mask{
position: relative;
}
.am-action-sheet-button-list .am-action-sheet-cancel-button{
padding-top: 0;
}
.pos-line{
display: flex;
align-items: center;
flex-direction: column;
}
import { Result } from 'antd-mobile';
import React from 'react';
const NoFound = () => (
<Result
title="404"
/>
);
export default NoFound;
import React from 'react';
import {WhiteSpace} from 'antd-mobile'
import TodoCard from '../../components/TodoCard'
import TopNotice from '../../components/TopNotice'
const Notice = () => {
return (
<div>
<WhiteSpace/>
<TopNotice/>
<WhiteSpace/>
<TodoCard/>
{/*<Step direction="horizontal"/>*/}
</div>
);
};
export default Notice;
import React, {Component} from 'react';
import {WhiteSpace} from "antd-mobile";
import TopSearch from '../../components/TopSearch'
import WorkCard from '../../components/WorkCard'
class Work extends Component {
state = {
addStatus: false
};
commonEdit = () => {
const {addStatus} = this.state;
this.setState({addStatus: !addStatus})
};
workSearch = (val) => {
console.log(val)
};
itemAdd = () => {
console.log('add')
}
itemSlice = () => {
console.log('slice')
}
render() {
const {addStatus} = this.state;
//测试数据
const data = Array.from(new Array(7)).map((_val, i) => ({
icon: '/img/test/test.png',
text: `name${i}`,
}));
const data2 = Array.from(new Array(7)).map((_val, i) => ({
icon: '/img/test/test-1.png',
text: `name${i}`,
}));
return (
<div>
<WhiteSpace/>
<TopSearch onSearch={this.workSearch}/>
<WhiteSpace/>
<WorkCard
type="edit"
title="常用板块"
addCommon={this.commonEdit}
addStatus={addStatus}
data={data}
iconAction={this.itemSlice}
/>
<WhiteSpace/>
<WorkCard
title="事物管理"
addCommon={this.commonEdit}
addStatus={addStatus}
data={data2}
iconAction={this.itemAdd}
/>
</div>
);
}
}
export default Work;
......@@ -3,14 +3,14 @@ import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom
import BlankLayout from './layout/BlankLayout';
import CommonLayout from './layout/CommonLayout';
import Backlog from './Pages/Backlog/Backlog'
import Work from './Pages/Work/Work'
import Notice from './Pages/Notice/Notice'
import Communicate from './Pages/Communicate/Communicate'
import Backlog from './pages/Backlog/Backlog'
import Work from './pages/Work/Work'
import Notice from './pages/Notice/Notice'
import Communicate from './pages/Communicate/Communicate'
import Process from './Pages/EventProcessing/Process'
import Process from './pages/EventProcessing/Process'
import NoFound from './Pages/NoFound'
import NoFound from './pages/NoFound'
const ReactRouter = () => {
......
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