debug

src/components/AddressList/index.jsx

+import React from 'react';
+import './index.less'
+
+
+const data = [{}, {}, {}, {}]
+const Index = () => {
+    return (
+        <div className="address-box">
+            {data.map((item, index) => (
+                <div className="address-item">
+                    cccc
+                    <img src="/img/rarrow.png" alt="" className='icon18'/>
+                </div>
+            ))}
+
+        </div>
+    );
+};
+
+export default Index;

src/components/AddressList/index.less

+.address-item{
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  margin-bottom: 1px;
+  background: #ffffff;
+}
+.address-box > .address-item:first-child{
+  border-radius: 6px 6px 0 0;
+}
+.address-box > .address-item:last-child{
+  border-radius: 0 0 6px 6px;
+}

src/components/LogCard/index.less

+@import '../../variable.less';
+
 .todo-card{
 
 }
@@ -13,7 +15,7 @@
   height: 18px;
   font-size: 9px;
   padding: 0 5px;
-  background: #2087ED;
+  background: @primary;
   color: #ffffff;
   border-radius:3px;
 }
@@ -39,6 +41,7 @@
 .todo-footer{
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 15px 15px;
   background:rgba(255,255,255,1);
   border-radius: 0 0 6px 6px;

src/components/NoticeTab/index.jsx

@@ -7,7 +7,7 @@ const tabs = [
     { title: '未读', sub: '2' },
 ]
 
-const Index = () => {
+const Index = (props) => {
     return (
         <div className="pos-line">
             <div className="search-notice-box">

src/components/StepCard/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './index.less'
 
 const data = [{}, {}, {}, {s: '1'}, {s: '111', result: '11111'}]
-const Index = () => {
+const Index = (props) => {
     return (
         <div className="auto-step">
             <ul className="auto-step-card">

src/components/TopSearch/index.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {Icon} from 'antd-mobile'
 import './index.less'
 
-class Index extends Component {
-    state={
-        status: false
-    };
-    topSearch = () => {
+
+const Index = (props) => {
+    const [status, setStatus] = useState(false);
+
+    const topSearch = () => {
         const input = document.getElementsByClassName("top-single-search");
-        this.props.onSearch(input[0].value);
-        let inputValue = input[0].value
-        this.setState({status: (inputValue != null && inputValue != undefined && inputValue != '')})
+        props.onSearch(input[0].value);
+        let inputValue = input[0].value;
+        setStatus(inputValue != null && inputValue != undefined && inputValue != '')
     };
-    clear = () => {
-        this.setState({status: false})
+    const clear = () => {
+        setStatus(false)
         const input = document.getElementsByClassName("top-single-search");
         input[0].value = null;
         input[0].focus();
     }
-    render() {
-        const {status} = this.state
     return (
         <div className="search-box">
             <Icon type="search" size="xs" className="search-svg"/>
-                <input onChange={this.topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
+            <input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
             {status && (
-                    <Icon type="cross-circle-o" color="rgba(35, 35, 35, 0.3)" size="xxs" className="clear-svg"  onClick={this.clear}/>
+                <Icon type="cross-circle-o" color="rgba(35, 35, 35, 0.3)" size="xxs" className="clear-svg"  onClick={clear}/>
             )}
 
         </div>
     );
-    }
-}
+};
 
 export default Index;

src/components/WorkCard/CardItem.jsx

-import React, {Component} from 'react';
+import React, {useState, useEffect} from 'react';
 import './index.less'
 
-class CardItem extends Component {
-    state = {
-        addStatus: false
-    }
-    componentWillReceiveProps(nextProps, nextContext) {
-        if (this.props.addStatus !== nextProps.addStatus) {
-            this.setState({ addStatus: nextProps.addStatus });
-        }
-    };
 
-    contentCLick = () => {
-        const {data, addCommon} = this.props;
-        const {addStatus} = this.state
-        !addStatus && !data.iconAdd && console.log(data.text);
+const CardItem = (props) => {
+    const {data, addStatus, type, addCommon, iconAction} = props;
+
+    const [status, setStatus] = useState(false);
+    useEffect(() => {
+        setStatus(addStatus)
+    }, [addStatus])
+
+    const contentCLick = () => {
+        !status && !data.iconAdd && console.log(data.text);
         data.iconAdd && addCommon()
     };
-    iconClick = () => {
-        const { iconAction} = this.props;
+    const iconClick = () => {
         iconAction()
-    }
-
-    render() {
-        const {data, type} = this.props;
-        const {addStatus} = this.state
+    };
     return (
-            <div className="card-content" onClick={this.contentCLick}>
+        <div className="card-content" onClick={contentCLick}>
             {data.text && (
                 <div className="card-content-box">
                     <div className="card-content-img">
                         {
-                                addStatus && !data.iconAdd && (
+                            status && !data.iconAdd && (
                                 <img
                                     src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
                                     className="card-content-img-icon"
                                     alt=""
-                                        onClick={this.iconClick}
+                                    onClick={iconClick}
                                 />
                             )
                         }
@@ -50,7 +42,6 @@ class CardItem extends Component {
             )}
         </div>
     );
-    }
-}
+};
 
 export default CardItem;

src/components/WorkCard/index.jsx

-import React, {Component} from 'react';
+import React from 'react';
 import './index.less'
 import CardItem from './CardItem'
 
-class Index extends Component {
-    render() {
-        const {title, type, addStatus, addCommon, data, iconAction} = this.props;
+const Index = (props) => {
+    const {title, type, addStatus, addCommon, data, iconAction} = props;
     const emptyIcon = type === 'edit' ? {
         text: addStatus ? '完成添加' :'添加常用', icon: addStatus ? '/img/finish-work.png' : '/img/add-work.png', iconAdd: true
     } : {};
@@ -13,7 +12,6 @@ class Index extends Component {
     empty === 0 && data.push(emptyIcon, {}, {});
     empty === 1 && data.push(emptyIcon, {});
     empty === 2 && data.push(emptyIcon);
-
     return (
         <div>
             <div className="work-card-title">
@@ -34,9 +32,10 @@ class Index extends Component {
             </div>
         </div>
     );
-    }
-}
+};
 
 export default Index;
 
 
+
+

src/pages/Backlog/Backlog.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {WhiteSpace, WingBlank, ActivityIndicator} from 'antd-mobile'
 import TodoCard from '../../components/LogCard'
 import TopSearch from '../../components/TopSearch'
 
-class Index extends Component {
-    constructor(){
-        super();
-        this.state={
-            loading: false
-        };
-    };
-    checkLog = () => {
+const Backlog = () => {
+
+    const [loading, setLoading] = useState(false)
+
+    const checkLog = () => {
         this.props.history.push(`/blank/info/example/1`)
     }
-    render() {
-        const {loading} = this.state;
     return (
         <WingBlank>
             <ActivityIndicator
@@ -28,7 +23,7 @@ class Index extends Component {
                 [{},{},{},{},{},{}].map((item, index) => (
                     <div key={index}>
                         <WhiteSpace/>
-                            <TodoCard data={item} onClick={this.checkLog}/>
+                        <TodoCard data={item} onClick={checkLog}/>
                     </div>
 
                 ))
@@ -36,7 +31,6 @@ class Index extends Component {
 
         </WingBlank>
     );
-    }
-}
+};
 
-export default Index;
+export default Backlog;

src/pages/EventProcessing/Process.jsx

-import React, {Component} from 'react';
+import React, {useState, useEffect} from 'react';
 import {WingBlank, WhiteSpace, ActionSheet, ActivityIndicator} from 'antd-mobile'
 import './index.less'
 import TopTabs from '../../components/BlankTabs'
@@ -7,76 +7,59 @@ import Adjunct from './Adjunct'
 import Flow from './Flow';
 import Option from './Option';
 
-//Ipone antd-mobile ActionSheet
-const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
-let wrapProps;
-if (isIPhone) {
-    wrapProps = {
-        onTouchStart: e => e.preventDefault(),
+const Pro = (props) => {
+    const [loading, setLoading] = useState(false);
+
+    //提交按钮状态
+    const [disabled, setDisabled] = useState(true)
+    //提交按钮文字
+    const [footButton, setFootButton] = useState('确认发送');
+    //聚焦
+    const optionBlur = () => {
+        setFootButton('确认发送');
+        setFootStatus(true)
     };
-}
+    useEffect(() => {
+        const option = document.getElementsByClassName("option-text")[0]
+        option.addEventListener('focus', optionBlur, true);
+        return () => option.removeEventListener('focus', optionBlur, true);
+    }, []);
 
-class Process extends Component {
-    constructor() {
-        super();
-        this.optionBlur = this.optionBlur.bind(this)
-        this.handleScroll = this.handleScroll.bind(this)
-        this.state = {
-            current: 'basic',
-            disabled: true,
-            footStatus: false,
-            footButton: '处理',
-            loading: false
-        }
+    const optionChange = val => {
+        setDisabled(!(val != null && val != undefined && val != ''))
     };
-    componentDidMount() {
-        document.getElementsByClassName("option-text")[0].addEventListener('focus', this.optionBlur, true)
-        window.addEventListener('scroll', this.handleScroll, true);
-    }
-    optionBlur = () => {
-        this.setState({footButton: '确认发送', footStatus: true})
-    }
 
-    componentWillUnmount() {
-        document.getElementsByClassName("option-text")[0].removeEventListener('focus', this.optionBlur, true)
-        window.removeEventListener('scroll', this.handleScroll, true);
-    }
-    handleScroll() {
-        const adjunct = document.getElementById("event-adjunct").offsetTop;
-        const flow = document.getElementById("event-flow").offsetTop;
-        const option = document.getElementById("event-option").offsetTop;
-        const event = document.getElementById('event');
-        const top = event.scrollTop;
-        const scrollHeight = event.scrollHeight;
-        const clientHeight = event.clientHeight
-        if (top >= 0 && top < adjunct) {
-            this.setState({current: 'basic'})
-        }else if (top >= adjunct && top < flow) {
-            this.setState({current: 'adjunct'})
-        }else if (top >= flow && top < option) {
-            this.setState({current: 'flow'})
-        }else if (top >= option) {
-            this.setState({current: 'option'})
-        }
-        if (top + clientHeight === scrollHeight) {
-            this.setState({current: 'option'})
-        }
+    const [current, setCurrent] = useState('basic');
+
+    const [footStatus, setFootStatus] = useState(false);
+
+    //点击输入框， 聚焦移动
+    const textClick = () => {
+        const top = document.getElementById(`event-option`).offsetTop;
+        document.getElementById("event").scrollTo(0,top)
+        document.getElementsByClassName("option-text")[0].focus();
+        optionBlur()
     };
-    tabClick = (name) => {
-        this.setState({current: name})
+
+    //tab切换
+    const tabClick = (name) => {
+        setCurrent(name)
         name === 'option' && document.getElementsByClassName("option-text")[0].focus();
-        name === 'option' && this.optionBlur()
+        name === 'option' && optionBlur()
         const top = document.getElementById(`event-${name}`).offsetTop;
         document.getElementById("event").scrollTo(0,top);
     };
-    textClick = () => {
-        const top = document.getElementById(`event-option`).offsetTop;
-        document.getElementById("event").scrollTo(0,top)
-        document.getElementsByClassName("option-text")[0].focus();
-        this.optionBlur()
-    }
 
-    showActionSheet = () => {
+
+    //antd-mobile 提交选项
+    const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
+    let wrapProps;
+    if (isIPhone) {
+        wrapProps = {
+            onTouchStart: e => e.preventDefault(),
+        };
+    }
+    const showActionSheet = () => {
         const BUTTONS = ['送部门领导审核', '送办公室分管主任审批', '办结', '取消'];
         ActionSheet.showActionSheetWithOptions({
                 options: BUTTONS,
@@ -85,15 +68,36 @@ class Process extends Component {
                 wrapProps,
             },
             (buttonIndex) => {
+                props.history.push(`/blank/submit/1`)
                 // console.log(buttonIndex)
             });
     };
-    optionChange = val => {
-        this.setState({disabled: !(val != null && val != undefined && val != '')})
-    }
 
-    render() {
-        const {footButton, disabled, footStatus, current, loading} = this.state
+    const handleScroll = () => {
+        const adjunct = document.getElementById("event-adjunct").offsetTop;
+        const flow = document.getElementById("event-flow").offsetTop;
+        const option = document.getElementById("event-option").offsetTop;
+        const event = document.getElementById('event');
+        const top = event.scrollTop;
+        const scrollHeight = event.scrollHeight;
+        const clientHeight = event.clientHeight
+        if (top >= 0 && top < adjunct) {
+            setCurrent('basic')
+        }else if (top >= adjunct && top < flow) {
+            setCurrent('adjunct')
+        }else if (top >= flow && top < option) {
+            setCurrent('flow')
+        }else if (top >= option) {
+            setCurrent('option')
+        }
+        if (top + clientHeight === scrollHeight) {
+            setCurrent('option')
+        }
+    };
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll, true);
+        return () =>  window.removeEventListener('scroll', handleScroll, true);
+    }, [])
     return (
         <div>
             <ActivityIndicator
@@ -101,7 +105,7 @@ class Process extends Component {
                 text="加载中..."
                 animating={loading}
             />
-                <TopTabs page={current} onClick={this.tabClick}/>
+            <TopTabs page={current} onClick={tabClick}/>
             <div id="event">
                 <WingBlank>
                     <div id="event-basic"/>
@@ -115,11 +119,11 @@ class Process extends Component {
                     <Flow/>
                     <div id="event-option"/>
                     <WhiteSpace/>
-                        <Option onChange={this.optionChange}/>
+                    <Option onChange={optionChange}/>
                 </WingBlank>
             </div>
             <div className="event-footer">
-                    <div className={`event-footer-button ${(footStatus && disabled) ? 'button-disabled' : '' }`} onClick={footStatus && !disabled ? this.showActionSheet: this.textClick}>
+                <div className={`event-footer-button ${(footStatus && disabled) ? 'button-disabled' : '' }`} onClick={footStatus && !disabled ? showActionSheet: textClick}>
                     {!footStatus && (
                         <img alt="" src="/img/process-edit.png" className="process-edit"/>
                     )}
@@ -130,7 +134,6 @@ class Process extends Component {
 
         </div>
     );
-    }
-}
+};
 
-export default Process;
+export default Pro;

src/pages/EventProcessing/SubmitDetail.jsx

 import React, {Component} from 'react';
+import AddressList from '../../components/AddressList'
+import {WingBlank, WhiteSpace} from "antd-mobile";
 
 class SubmitDetail extends Component {
     render() {
         return (
             <div>
+                <WhiteSpace/>
+                <WingBlank>
+                    <AddressList/>
+                </WingBlank>
 
             </div>
         );

src/pages/Notice/Notice.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {ActivityIndicator, WhiteSpace, WingBlank} from 'antd-mobile'
 import TodoCard from '../../components/LogCard'
 import TopNotice from '../../components/NoticeTab'
 
 
-
-class Notice extends Component {
-    state={
-        loading: false
-    };
-    render() {
-        const {loading} = this.state;
+const Notice = (props) => {
+    const [loading, setLoading] = useState(false)
     return (
         <WingBlank>
             <ActivityIndicator
@@ -24,7 +19,7 @@ class Notice extends Component {
             <TodoCard/>
         </WingBlank>
     );
-    }
-}
+};
 
 export default Notice;
+

src/pages/Work/Work.jsx

-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {ActivityIndicator, WhiteSpace, WingBlank} from "antd-mobile";
 import TopSearch from '../../components/TopSearch'
 import WorkCard from '../../components/WorkCard'
 
 
-class Work extends Component {
-    state = {
-        addStatus: false,
-         loading: false
-    };
-    commonEdit = () => {
-        const {addStatus} = this.state;
-        this.setState({addStatus: !addStatus})
-    };
-    workSearch = (val) => {
-        console.log(val)
-    };
-    itemAdd = (id, arr, arr2) => {
-        // const item = arr2.filter(item => item.id === id);
-        // arr.splice(arr.length - 1, 0, item[0]);
-    };
-    itemSlice = (id, arr, arr2) => {
-        // const index = arr.findIndex(item => item.id == id);
-        // index > -1 && arr.splice(index, 1);
-    };
-    render() {
-        const {addStatus, loading} = this.state;
-
+const Work = () => {
     //测试数据
     const data222 = Array.from(new Array(7)).map((_val, i) => ({
         id: `name${i}`,
@@ -39,6 +17,24 @@ class Work extends Component {
         text: `name${i}`,
     }));
 
+    const [addStatus, setAddStatus] = useState(false);
+    const [loading, setLoading] = useState(false)
+
+    const commonEdit = () => {
+        setAddStatus(!addStatus)
+    };
+    const workSearch = (val) => {
+        console.log(val)
+    };
+    const itemAdd = (id, arr, arr2) => {
+        // const item = arr2.filter(item => item.id === id);
+        // arr.splice(arr.length - 1, 0, item[0]);
+    };
+    const itemSlice = (id, arr, arr2) => {
+        // const index = arr.findIndex(item => item.id == id);
+        // index > -1 && arr.splice(index, 1);
+    };
+
     return (
         <WingBlank>
             <ActivityIndicator
@@ -47,28 +43,27 @@ class Work extends Component {
                 animating={loading}
             />
             <WhiteSpace/>
-                <TopSearch onSearch={this.workSearch}/>
+            <TopSearch onSearch={workSearch}/>
             <WhiteSpace/>
             <WorkCard
                 type="edit"
                 title="常用板块"
-                    addCommon={this.commonEdit}
+                addCommon={commonEdit}
                 addStatus={addStatus}
                 data={data222}
-                    iconAction={this.itemSlice}
+                iconAction={itemSlice}
             />
             <WhiteSpace/>
             <WorkCard
                 title="事物管理"
-                    addCommon={this.commonEdit}
+                addCommon={commonEdit}
                 addStatus={addStatus}
                 data={data22222}
-                    iconAction={this.itemAdd}
+                iconAction={itemAdd}
             />
         </WingBlank>
     );
-    }
-}
+};
 
 export default Work;
 

src/router.js

@@ -9,6 +9,7 @@ import Notice from './pages/Notice/Notice'
 import Communicate from './pages/Communicate/Communicate';
 import AddressList from './pages/AddressList/AddressList';
 import Process from './pages/EventProcessing/Process'
+import SubmitDetail from './pages/EventProcessing/SubmitDetail'
 
 import NoFound from './pages/NoFound'
 
@@ -30,6 +31,7 @@ const ReactRouter = () => {
                 }/>
                 <Route path="/blank" component={() =>
                     <BlankLayout>
+                        <Route path="/blank/submit/:id" component={SubmitDetail}/>
                         <Route path="/blank/info/:name/:id" component={Process}/>
                     </BlankLayout>
                 }/>