Skip to content

F
frontend
Commit 85b8f907 authored by 熊成伟's avatar 熊成伟
Browse files
Options

debug

parent 426dd49b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 463 additions and 78 deletions
.idea/workspace.xml
View file @ 85b8f907
This diff is collapsed.
src/Components/List/index.jsx 0 → 100644
View file @ 85b8f907
import React from 'react';
import './index.less'
const Index = (props) => {
return (
<div className="auto-list-card">
{props.title && (
<div className="auto-list-item auto-list-item-title">{props.title}</div>
)}
{props.listData.map((item, index) => (
<div key={index} className={`auto-list-item ${item.line ? 'auto-list-item-line-feed' : 'auto-list-item-line'}`}>
<div className="auto-list-title">
{item.title}：
</div>
<div className="auto-list-content">
{item.content}
</div>
</div>
))}
</div>
);
};
export default Index;
src/Components/List/index.less 0 → 100644
View file @ 85b8f907
.auto-list-card{
width: 100%;
}
.auto-list-item-line{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.auto-list-item-line-feed{
display: flex;
flex-direction: column;
}
.auto-list-item{
padding: 5px 15px;
min-height: 43px;
background: #ffffff;
margin-bottom: 1px;
}
.auto-list-card > .auto-list-item:first-child{
border-radius: 6px 6px 0 0;
}
.auto-list-card > .auto-list-item:last-child{
border-radius: 0 0 6px 6px;
}
.auto-list-item-title{
display: flex;
align-items: center;
font-size: 17px;
font-weight: bold;
}
.auto-list-title{
padding: 10px 0;
font-size: 14px;
min-width: 100px;
}
.auto-list-content{
padding: 10px 20px;
font-size: 14px;
line-height: 22px;
}
src/Components/StepCard/index.jsx 0 → 100644
View file @ 85b8f907
import React from 'react';
const Index = () => {
return (
<div>
flow
</div>
);
};
export default Index;
src/Components/TodoCard/index.jsx
View file @ 85b8f907
import React from 'react';
import Steps from '../Steps'
import './index.less'
const Index = () => {
const Index = (props) => {
return (
<div className="todo-card">
<div className="todo-card" onClick={props.onCLick}>
<div className="todo-title pos-aline">
<div className="pos-aline">
<div className="todo-tag pos-aline">
<img style={{width: 12, height: 12, marginRight: 4}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591252471425&di=85236ae603ca74553adaca6e8c161a39&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb912bf96dc19b3b23530ae2259b60eb6cf70083f6680b-H9l0ri_fw658"/>
<img
alt=""
className="todo-tag-png"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591252471425&di=85236ae603ca74553adaca6e8c161a39&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb912bf96dc19b3b23530ae2259b60eb6cf70083f6680b-H9l0ri_fw658"
/>
收文管理
</div>
<p>《2020年上级党委文件7号》</p>
</div>
<span>img</span>
<span>
<img
alt=""
className="todo-read-png"
src={props.data && props.data.read ? '/img/read.png' : '/img/unread.png'}
/>
</span>
</div>
<div style={{marginTop: 27}}>
<div className="todo-content">
<p>当前状态：排版套头</p>
<p style={{marginTop: 15}}>更新时间：2020-05-26 17:51</p>
<p style={{marginTop: 15}}>发送人员：杜莹莹</p>
</div>
<div className="todo-footer">
<div>
<p>更新时间：2020-05-26 17:51</p>
<p style={{marginTop: 15}}>停滞时间：24h</p>
</div>
<img
alt=""
className="todo-footer-img"
src={props.data && props.data.read ? '/img/serious.png' : '/img/urgency.png'}
/>
</div>
</div>
);
......
src/Components/TodoCard/index.less
View file @ 85b8f907
.todo-card{
padding: 10px 15px;
background:rgba(255,255,255,1);
border:0 solid rgba(38, 104, 255, 0.2);
border-radius:6px;
}
.todo-title{
padding: 10px 15px;
background:rgba(255,255,255,1);
border-radius:6px 6px 0 0;
justify-content: space-between;
margin-bottom: 1px;
}
.todo-tag{
line-height: 18px;
......@@ -16,8 +17,33 @@
color: #ffffff;
border-radius:3px;
}
.todo-tag-png{
width: 12px;
height: 12px;
margin-right: 3px;
}
.todo-read-png{
width: 18px;
height: 18px;
}
.pos-aline{
display: flex;
align-items: center;
}
.todo-content{
padding: 15px 15px;
background:rgba(255,255,255,1);
margin-bottom: 1px;
}
.todo-footer{
display: flex;
justify-content: space-between;
padding: 15px 15px;
background:rgba(255,255,255,1);
border-radius: 0 0 6px 6px;
}
.todo-footer-img{
width: 40px;
height: 40px;
}
src/Components/TopNotice/index.jsx
View file @ 85b8f907
......@@ -17,7 +17,7 @@ const Index = () => {
<div className="search-tab">
<Tabs
tabs={tabs}
initialPage={1}
initialPage={'1'}
onChange={(tab, index) => { console.log('onChange', index, tab); }}
/>
</div>
......
src/Components/TopSearch/index.jsx
View file @ 85b8f907
import React from 'react';
import {SearchBar, Icon} from 'antd-mobile'
import {Icon} from 'antd-mobile'
import './index.less'
const Index = (props) => {
const topSearch = (val) => {
const input = document.getElementsByClassName("top-single-search").value;
console.log(val)
// props.onSearch(val)
const topSearch = () => {
const input = document.getElementsByClassName("top-single-search");
props.onSearch(input[0].value)
}
return (
<div className="search-box">
<Icon type="search" size="xs" className="search-svg"/>
{/*<SearchBar/>*/}
<input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
</div>
);
......
src/Components/TopTabs/index.jsx
View file @ 85b8f907
import React from 'react';
import {Tabs, Icon} from 'antd-mobile'
import {Tabs} from 'antd-mobile'
import './index.less'
const tabs = [
{ title: '基本信息', sub: '1' },
{ title: '详情附件', sub: '2' },
{ title: '流转意见', sub: '3' },
{ title: '流程信息', sub: '4' },
{ title: '基本信息', sub: 'basic' },
{ title: '详情附件', sub: 'adjunct' },
{ title: '流程信息', sub: 'flow' },
{ title: '流转意见', sub: 'option' },
]
const Index = () => {
const Index = (props) => {
return (
<div>
<Tabs
tabs={tabs}
initialPage={1}
onChange={(tab, index) => { console.log('onChange', index, tab); }}
initialPage={"basic"}
onChange={(tab, index) => props.onClick(tab.sub)}
/>
</div>
);
......
src/Components/WorkCard/CardItem.jsx
View file @ 85b8f907
......@@ -7,17 +7,40 @@ class CardItem extends Component {
}
componentWillReceiveProps(nextProps, nextContext) {
if (this.props.addStatus !== nextProps.addStatus) {
this.setState({ addStatus: this.props.addStatus });
this.setState({ addStatus: nextProps.addStatus });
}
};
contentCLick = () => {
const {data, addCommon} = this.props;
const {addStatus} = this.state
!addStatus && !data.iconAdd && console.log(data.text);
data.iconAdd && addCommon()
};
iconClick = () => {
const { iconAction} = this.props;
iconAction()
}
render() {
const {data, addCommon} = this.props;
const {data, type} = this.props;
const {addStatus} = this.state
return (
<div className="card-content" onClick={() => data.iconAdd ? addCommon() : null }>
<div className="card-content" onClick={this.contentCLick}>
{data.text && (
<div>
<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}
/>
)
}
<img src={data.icon} className="card-content-img-svg" alt="" />
</div>
<div className="card-content-title">
......
src/Components/WorkCard/index.jsx
View file @ 85b8f907
import React, {Component} from 'react';
import {Grid} from 'antd-mobile'
import './index.less'
import CardItem from './CardItem'
class Index extends Component {
render() {
const {title, type, addStatus, addCommon} = this.props
const {title, type, addStatus, addCommon, data, iconAction} = this.props;
const emptyIcon = type === 'edit' ? {
text: '添加常用', icon: '', iconAdd: true
text: addStatus ? '完成添加' :'添加常用', icon: addStatus ? '/img/finish-work.png' : '/img/add-work.png', iconAdd: true
} : {};
//测试数据
const data = Array.from(new Array(7)).map((_val, i) => ({
icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
text: `name${i}`,
}));
const empty = data.length % 3;
empty === 0 && data.push(emptyIcon, {}, {});
empty === 1 && data.push(emptyIcon, {});
......@@ -29,10 +22,12 @@ class Index extends Component {
<div className="work-card-body">
{data.map((item, index) => (
<CardItem
type={type}
key={index}
data={item}
addStatus={addStatus}
addCommon={addCommon}
iconAction={iconAction}
/>
))}
......
src/Components/WorkCard/index.less
View file @ 85b8f907
......@@ -16,8 +16,8 @@
}
.card-content{
width: 114px;
height: 114px;
width: 33.1%;
height: 115px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -26,6 +26,11 @@
margin-bottom: 1px;
//border: 1px solid rgba(38, 104, 255, 0.1);
}
.card-content-box{
display: flex;
align-items: center;
flex-direction: column;
}
.work-card-body > .card-content:nth-child(3n + 2){
margin-left: 1px;
}
......@@ -39,7 +44,7 @@
border-radius: 0 0 0 6px;
}
.card-content:active{
background: yellow;
background: rgba(248, 248, 248, 1);
}
.card-content-img{
......@@ -51,5 +56,13 @@
width: 35px;
height: 35px;
}
.card-content-img-icon{
width: 30px;
height: 30px;
position: absolute;
margin-top: -15px;
margin-left: 20px;
}
.card-content-title{
text-align: center;
}
src/Pages/Backlog/Backlog.jsx
View file @ 85b8f907
......@@ -3,17 +3,19 @@ import {WhiteSpace} from 'antd-mobile'
import TodoCard from '../../components/TodoCard'
import TopSearch from '../../components/TopSearch'
const Backlog = () => {
const Backlog = (props) => {
const checkLog = () => {
props.history.push(`/blank/example/1`)
}
return (
<div>
<WhiteSpace/>
<TopSearch/>
<WhiteSpace/>
{
[{},{},{},{},{},{}].map(item => (
<div>
[{},{},{},{},{},{}].map((item, index) => (
<div key={index}>
<WhiteSpace/>
<TodoCard/>
<TodoCard data={item} onCLick={checkLog}/>
</div>
))
......
src/Pages/EventProcessing/Adjunct.jsx 0 → 100644
View file @ 85b8f907
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;
src/Pages/EventProcessing/Basic.jsx 0 → 100644
View file @ 85b8f907
import React from 'react';
import {WhiteSpace} from 'antd-mobile'
import List from '../../components/List'
const Basic = () => {
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;
src/Pages/EventProcessing/Flow.jsx 0 → 100644
View file @ 85b8f907
import React from 'react';
import StepCard from '../../components/StepCard'
const Flow = () => {
return (
<div id="event-flow">
<StepCard/>
</div>
);
};
export default Flow;
src/Pages/EventProcessing/Option.jsx 0 → 100644
View file @ 85b8f907
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;
src/Pages/EventProcessing/Process.jsx 0 → 100644
View file @ 85b8f907
import React, {Component} from 'react';
import {WingBlank, WhiteSpace} 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'
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)
};
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">
{this.state.footButton}
</div>
</div>
</div>
);
}
}
export default Process;
src/Pages/EventProcessing/index.less 0 → 100644
View file @ 85b8f907
#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;
}
src/Pages/Work/Work.jsx
View file @ 85b8f907
......@@ -13,10 +13,26 @@ class Work extends Component {
this.setState({addStatus: !addStatus})
};
workSearch = (val) => {
console.log(val.target)
console.log(val)
};
itemAdd = () => {
console.log('add')
}
itemSlice = () => {
console.log('slice')
}
render() {
const {addStatus} = this.props
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/>
......@@ -27,12 +43,16 @@ class Work extends Component {
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>
);
......
src/layout/BlankLayout.jsx
View file @ 85b8f907
import React from 'react';
import {WingBlank} from 'antd-mobile'
import Footer from './Footer'
import {withRouter} from 'react-router-dom'
const BlankLayout = (props) => {
return (
<div >
<div>
<div style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 50, overflow: 'auto', paddingBottom: 10}}>
<WingBlank>
{props.children}
</WingBlank>
</div>
<Footer {...props}/>
</div>
<Footer {...props}/>
<div>
{props.children}
</div>
);
};
......
src/layout/CommonLayout.jsx
View file @ 85b8f907
......@@ -2,11 +2,12 @@ import React from 'react';
import {WingBlank} from 'antd-mobile'
import Footer from './Footer'
import {withRouter} from 'react-router-dom'
import './index.less'
const CommonLayout = (props) => {
return (
<div>
<div style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 50, overflow: 'auto', paddingBottom: 10}}>
<div className="common-layout-content">
<WingBlank>
{props.children}
</WingBlank>
......
src/layout/Footer.jsx
View file @ 85b8f907
import React, {Component} from 'react';
import {TabBar} from 'antd-mobile'
import './index.less'
class Footer extends Component {
state={
......@@ -16,33 +17,26 @@ class Footer extends Component {
render() {
const tabItem = [
{title: '待办', key: 'backlog', icon: '', selectedIcon: '', badge: '', onPress: '/bord/backlog'},
{title: '工作', key: 'work', icon: '', selectedIcon: '', badge: '', onPress: '/bord/work'},
{title: '通讯录', key: 'communicate', icon: '', selectedIcon: '', badge: '', onPress: '/bord/communicate'},
{title: '通知', key: 'notice', icon: '', selectedIcon: '', badge: '', onPress: '/bord/notice'}
{title: '待办', key: 'backlog', icon: '/img/footer-backlog.png', selectedIcon: '/img/footer-backlog-s.png', badge: '', onPress: '/bord/backlog'},
{title: '工作', key: 'work', icon: '/img/footer-work.png', selectedIcon: '/img/footer-work-s.png', badge: '', onPress: '/bord/work'},
{title: '通讯录', key: 'communicate', icon: '/img/footer-communicate.png', selectedIcon: '/img/footer-communicate-s.png', badge: '', onPress: '/bord/communicate'},
{title: '通知', key: 'notice', icon: '/img/footer-notice.png', selectedIcon: '/img/footer-notice-s.png', badge: '', onPress: '/bord/notice'}
];
return (
<div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
tintColor="#2E67EA"
barTintColor="white"
>
{tabItem.map(item => (
<TabBar.Item
key={item.key}
title={item.title}
icon={<div style={{
width: '22px',
height: '22px',
background: `url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 22px 22px no-repeat`
}}/>}
selectedIcon={<div style={{
width: '22px',
height: '22px',
background: `url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 22px 22px no-repeat`
}}/>}
icon={<img alt="" className="footer-tab-icon" src={item.icon}/>}
selectedIcon={ <img alt="" className="footer-tab-icon" src={item.selectedIcon}/>}
badge={item.badge || null}
onPress={() => this.tabClick(item.key, item.onPress)}
selected={this.state.current === item.key}
......
src/layout/index.less 0 → 100644
View file @ 85b8f907
.common-layout-content{
position: fixed;
top: 0;left: 0;right: 0;bottom: 50px;
overflow: auto;
padding-bottom: 10px
}
.footer-tab-icon{
width: 18px;
height: 18px;
margin-bottom: 4px;
}
src/router.js
View file @ 85b8f907
......@@ -8,6 +8,8 @@ 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 NoFound from './Pages/NoFound'
......@@ -26,7 +28,7 @@ const ReactRouter = () => {
}/>
<Route path="/blank" component={() =>
<BlankLayout>
<Route path="/blank/:name/:id" component={Process}/>
</BlankLayout>
}/>
<Route component={NoFound}/>
......
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