Skip to content

F
frontend
Commit 64ce1288 authored by 熊成伟's avatar 熊成伟
Browse files
Options

debug

parent 186034f2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 339 additions and 321 deletions
.idea/workspace.xml
View file @ 64ce1288
This diff is collapsed.
src/components/AddressList/index.jsx 0 → 100644
View file @ 64ce1288
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 0 → 100644
View file @ 64ce1288
.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
View file @ 64ce1288
@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
View file @ 64ce1288
......@@ -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
View file @ 64ce1288
......@@ -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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
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
View file @ 64ce1288
......@@ -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>
}/>
......
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