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="请输入关键字搜索" />
-                {status && (
-                    <Icon type="cross-circle-o" color="rgba(35, 35, 35, 0.3)" size="xxs" className="clear-svg"  onClick={this.clear}/>
-                )}
+    return (
+        <div className="search-box">
+            <Icon type="search" size="xs" className="search-svg"/>
+            <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={clear}/>
+            )}
 
-            </div>
-        );
-    }
-}
+        </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}>
-                {data.text && (
-                    <div className="card-content-box">
-                        <div className="card-content-img">
-                            {
-                                addStatus && !data.iconAdd && (
-                                    <img
-                                        src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
-                                        className="card-content-img-icon"
-                                        alt=""
-                                        onClick={this.iconClick}
-                                    />
-                                )
-                            }
+    };
+    return (
+        <div className="card-content" onClick={contentCLick}>
+            {data.text && (
+                <div className="card-content-box">
+                    <div className="card-content-img">
+                        {
+                            status && !data.iconAdd && (
+                                <img
+                                    src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
+                                    className="card-content-img-icon"
+                                    alt=""
+                                    onClick={iconClick}
+                                />
+                            )
+                        }
 
-                            <img src={data.icon} className="card-content-img-svg" alt="" />
-                        </div>
-                        <div className="card-content-title">
-                            {data.text}
-                        </div>
+                        <img src={data.icon} className="card-content-img-svg" alt="" />
+                    </div>
+                    <div className="card-content-title">
+                        {data.text}
                     </div>
-                )}
-            </div>
-        );
-    }
-}
+                </div>
+            )}
+        </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 emptyIcon = type === 'edit' ? {
-            text: addStatus ? '完成添加' :'添加常用', icon: addStatus ? '/img/finish-work.png' : '/img/add-work.png', iconAdd: true
-        } : {};
-
-        const empty = data.length % 3;
-        empty === 0 && data.push(emptyIcon, {}, {});
-        empty === 1 && data.push(emptyIcon, {});
-        empty === 2 && data.push(emptyIcon);
-
-        return (
-            <div>
-                <div className="work-card-title">
-                    {title}
-                </div>
-                <div className="work-card-body">
-                    {data.map((item, index) => (
-                        <CardItem
-                            type={type}
-                            key={index}
-                            data={item}
-                            addStatus={addStatus}
-                            addCommon={addCommon}
-                            iconAction={iconAction}
-                        />
-                    ))}
-
-                </div>
+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
+    } : {};
+
+    const empty = data.length % 3;
+    empty === 0 && data.push(emptyIcon, {}, {});
+    empty === 1 && data.push(emptyIcon, {});
+    empty === 2 && data.push(emptyIcon);
+    return (
+        <div>
+            <div className="work-card-title">
+                {title}
+            </div>
+            <div className="work-card-body">
+                {data.map((item, index) => (
+                    <CardItem
+                        type={type}
+                        key={index}
+                        data={item}
+                        addStatus={addStatus}
+                        addCommon={addCommon}
+                        iconAction={iconAction}
+                    />
+                ))}
+
             </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
-                    toast
-                    text="加载中..."
-                    animating={loading}
-                />
-                <WhiteSpace/>
-                <TopSearch onSearch={val => console.log(val)}/>
-                {
-                    [{},{},{},{},{},{}].map((item, index) => (
-                        <div key={index}>
-                            <WhiteSpace/>
-                            <TodoCard data={item} onClick={this.checkLog}/>
-                        </div>
+    return (
+        <WingBlank>
+            <ActivityIndicator
+                toast
+                text="加载中..."
+                animating={loading}
+            />
+            <WhiteSpace/>
+            <TopSearch onSearch={val => console.log(val)}/>
+            {
+                [{},{},{},{},{},{}].map((item, index) => (
+                    <div key={index}>
+                        <WhiteSpace/>
+                        <TodoCard data={item} onClick={checkLog}/>
+                    </div>
 
-                    ))
-                }
+                ))
+            }
 
-            </WingBlank>
-        );
-    }
-}
+        </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,52 +68,72 @@ 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
-        return (
-            <div>
-                <ActivityIndicator
-                    toast
-                    text="加载中..."
-                    animating={loading}
-                />
-                <TopTabs page={current} onClick={this.tabClick}/>
-                <div id="event">
-                    <WingBlank>
-                        <div id="event-basic"/>
-                        <WhiteSpace/>
-                        <Basic/>
-                        <div id="event-adjunct"/>
-                        <WhiteSpace/>
-                        <Adjunct/>
-                        <div id="event-flow"/>
-                        <WhiteSpace/>
-                        <Flow/>
-                        <div id="event-option"/>
-                        <WhiteSpace/>
-                        <Option onChange={this.optionChange}/>
-                    </WingBlank>
-                </div>
-                <div className="event-footer">
-                    <div className={`event-footer-button ${(footStatus && disabled) ? 'button-disabled' : '' }`} onClick={footStatus && !disabled ? this.showActionSheet: this.textClick}>
-                        {!footStatus && (
-                            <img alt="" src="/img/process-edit.png" className="process-edit"/>
-                        )}
-                        {footButton}
-                    </div>
 
+    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
+                toast
+                text="加载中..."
+                animating={loading}
+            />
+            <TopTabs page={current} onClick={tabClick}/>
+            <div id="event">
+                <WingBlank>
+                    <div id="event-basic"/>
+                    <WhiteSpace/>
+                    <Basic/>
+                    <div id="event-adjunct"/>
+                    <WhiteSpace/>
+                    <Adjunct/>
+                    <div id="event-flow"/>
+                    <WhiteSpace/>
+                    <Flow/>
+                    <div id="event-option"/>
+                    <WhiteSpace/>
+                    <Option onChange={optionChange}/>
+                </WingBlank>
+            </div>
+            <div className="event-footer">
+                <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"/>
+                    )}
+                    {footButton}
                 </div>
 
             </div>
-        );
-    }
-}
 
-export default Process;
+        </div>
+    );
+};
+
+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;
-        return (
-            <WingBlank>
-                <ActivityIndicator
-                    toast
-                    text="加载中..."
-                    animating={loading}
-                />
-                <WhiteSpace/>
-                <TopNotice/>
-                <WhiteSpace/>
-                <TodoCard/>
-            </WingBlank>
-        );
-    }
-}
+const Notice = (props) => {
+    const [loading, setLoading] = useState(false)
+    return (
+        <WingBlank>
+            <ActivityIndicator
+                toast
+                text="加载中..."
+                animating={loading}
+            />
+            <WhiteSpace/>
+            <TopNotice/>
+            <WhiteSpace/>
+            <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})
+const Work = () => {
+    //测试数据
+    const data222 = Array.from(new Array(7)).map((_val, i) => ({
+        id: `name${i}`,
+        icon: '/img/test/test.png',
+        text: `name${i}`,
+    }));
+    const data22222 = Array.from(new Array(7)).map((_val, i) => ({
+        id: `name2${i}`,
+        icon: '/img/test/test-1.png',
+        text: `name${i}`,
+    }));
+
+    const [addStatus, setAddStatus] = useState(false);
+    const [loading, setLoading] = useState(false)
+
+    const commonEdit = () => {
+        setAddStatus(!addStatus)
     };
-    workSearch = (val) => {
+    const workSearch = (val) => {
         console.log(val)
     };
-    itemAdd = (id, arr, arr2) => {
+    const 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 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 data222 = Array.from(new Array(7)).map((_val, i) => ({
-            id: `name${i}`,
-            icon: '/img/test/test.png',
-            text: `name${i}`,
-        }));
-        const data22222 = Array.from(new Array(7)).map((_val, i) => ({
-            id: `name2${i}`,
-            icon: '/img/test/test-1.png',
-            text: `name${i}`,
-        }));
 
-        return (
-            <WingBlank>
-                <ActivityIndicator
-                    toast
-                    text="加载中..."
-                    animating={loading}
-                />
-                <WhiteSpace/>
-                <TopSearch onSearch={this.workSearch}/>
-                <WhiteSpace/>
-                <WorkCard
-                    type="edit"
-                    title="常用板块"
-                    addCommon={this.commonEdit}
-                    addStatus={addStatus}
-                    data={data222}
-                    iconAction={this.itemSlice}
-                />
-                <WhiteSpace/>
-                <WorkCard
-                    title="事物管理"
-                    addCommon={this.commonEdit}
-                    addStatus={addStatus}
-                    data={data22222}
-                    iconAction={this.itemAdd}
-                />
-            </WingBlank>
-        );
-    }
-}
+    return (
+        <WingBlank>
+            <ActivityIndicator
+                toast
+                text="加载中..."
+                animating={loading}
+            />
+            <WhiteSpace/>
+            <TopSearch onSearch={workSearch}/>
+            <WhiteSpace/>
+            <WorkCard
+                type="edit"
+                title="常用板块"
+                addCommon={commonEdit}
+                addStatus={addStatus}
+                data={data222}
+                iconAction={itemSlice}
+            />
+            <WhiteSpace/>
+            <WorkCard
+                title="事物管理"
+                addCommon={commonEdit}
+                addStatus={addStatus}
+                data={data22222}
+                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>
                 }/>