274 lines
8.6 KiB
JavaScript
274 lines
8.6 KiB
JavaScript
|
import React, { useState, useEffect, useRef, Component } from 'react'
|
||
|
|
import { connect } from 'dva'
|
||
|
|
import FormPage from '../../FormPage'
|
||
|
|
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extend } from "../../../utils/common"
|
||
|
|
import { Table, Card,Modal,List,Avatar, Row, Col, Icon, Button, Input, DatePicker, Form, Select, notification, Divider,Tabs,Tag } from 'antd';
|
||
|
|
// import './home.less'
|
||
|
|
import config from '../config';
|
||
|
|
const { TabPane } = Tabs;
|
||
|
|
class ApproveMobile extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
visible: false,
|
||
|
|
noticeTitle: '',
|
||
|
|
retData: [],
|
||
|
|
pagination: {},
|
||
|
|
tmpData: {},
|
||
|
|
type:"1",
|
||
|
|
// querySearch: {},//搜索集合
|
||
|
|
// tableData: [{//工作台四个展示模块
|
||
|
|
// key: '1',
|
||
|
|
// // bgImg: backlog,
|
||
|
|
// title: '待办事项',
|
||
|
|
// total: '0',
|
||
|
|
// // iconImg: backlog_i,
|
||
|
|
// iconDisplay: 'block',
|
||
|
|
// }, {
|
||
|
|
// key: '2',
|
||
|
|
// // bgImg: flow,
|
||
|
|
// title: '已办事项',
|
||
|
|
// total: '0',
|
||
|
|
// // iconImg: flow_i,
|
||
|
|
// iconDisplay: 'none',
|
||
|
|
// },
|
||
|
|
// // {
|
||
|
|
// // key: '3',
|
||
|
|
// // bgImg: finished,
|
||
|
|
// // title: '今日新增',
|
||
|
|
// // total: '0',
|
||
|
|
// // iconImg: finished_i,
|
||
|
|
// // iconDisplay: 'none',
|
||
|
|
// // }
|
||
|
|
// // ,
|
||
|
|
// {
|
||
|
|
// key: '4',
|
||
|
|
// // bgImg: remind,
|
||
|
|
// title: '待办超时',
|
||
|
|
// total: '0',
|
||
|
|
// // iconImg: remind_i,
|
||
|
|
// iconDisplay: 'none',
|
||
|
|
// }
|
||
|
|
// ],
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.getBaseInfoData(1, "1", 500);
|
||
|
|
};
|
||
|
|
componentDidUpdate(preProps ){
|
||
|
|
// if(preProps.type!==this.props.type){
|
||
|
|
// //放置刷新函数
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
//获取数据
|
||
|
|
getBaseInfoData = (pagination, key, limit) => {
|
||
|
|
const current = pagination ? pagination.current : 1
|
||
|
|
const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current)
|
||
|
|
extendRule(json, 'SOURCE_FORMCODE', 9, "FO008")
|
||
|
|
// const querySearch = this.state.querySearch;
|
||
|
|
// for (var item in querySearch) {
|
||
|
|
// if (item == 'searchName') {
|
||
|
|
// extendRule(json, 'NOTICE_TITLE', 9, querySearch[item])
|
||
|
|
// }
|
||
|
|
// if (item == 'searchCode') {
|
||
|
|
// extendRule(json, 'CODE', 9, querySearch[item])
|
||
|
|
// }
|
||
|
|
// if (item == 'startTime1') {
|
||
|
|
// extendRule(json, 'TASK_STARTDT', 6, querySearch[item])
|
||
|
|
// }
|
||
|
|
// if (item == 'startTime2') {
|
||
|
|
// extendRule(json, 'TASK_STARTDT', 4, querySearch[item])
|
||
|
|
// }
|
||
|
|
// if (item == 'endTime1') {
|
||
|
|
// extendRule(json, 'TASK_ENDDT', 6, querySearch[item])
|
||
|
|
// }
|
||
|
|
// if (item == 'endTime2') {
|
||
|
|
// extendRule(json, 'TASK_ENDDT', 4, querySearch[item])
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
json.Limit = limit;
|
||
|
|
json.Parameter1 = key;//1待办事项2已办事项3今日新增4待办超时
|
||
|
|
this.props.dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
url: 'FM/FMNotificationTask/OrderPaged',
|
||
|
|
payload: json,
|
||
|
|
onlyData: false,
|
||
|
|
onComplete: (re) => {
|
||
|
|
if (re && re.IsSuccessful && re.Data.newData) {
|
||
|
|
// this.state.tableData[0].total = re.Data.todoCount;
|
||
|
|
// this.state.tableData[1].total = re.Data.doneCount;
|
||
|
|
// this.state.tableData[2].total = re.Data.todayNewCount;
|
||
|
|
// this.state.tableData[2].total = re.Data.timeOverCount;
|
||
|
|
// if (limit != null || limit != undefined)
|
||
|
|
// {
|
||
|
|
this.setState({
|
||
|
|
retData: re.Data.newData,
|
||
|
|
})
|
||
|
|
// }
|
||
|
|
// else {
|
||
|
|
// var pageInfo = {}
|
||
|
|
// pageInfo.current = current;
|
||
|
|
// pageInfo.total = Math.ceil(re.Data.TotalCount, 10);
|
||
|
|
// this.setState({
|
||
|
|
// retDataAll: re.Data.newData,
|
||
|
|
// pagination: pageInfo,
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
ShowState(obj,key) {
|
||
|
|
if(key!="2")
|
||
|
|
{
|
||
|
|
var thisResult = (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
|
||
|
|
if (thisResult > 0) {
|
||
|
|
return (<Tag color="#2db7f5" style={{float:"center",padding:'0 10px' }}>正常</Tag >);
|
||
|
|
} else {
|
||
|
|
return (<Tag color="#f50" style={{float:"center",padding:'0 10px' }}>超期</Tag >);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
showEditModal = (dataId, formCode, TaskID, title, taskCode) => {
|
||
|
|
const newtmpData = {
|
||
|
|
data: { id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, homeReload: true },
|
||
|
|
formCode: formCode,
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
noticeTitle: title,
|
||
|
|
taskCode: taskCode,
|
||
|
|
tmpData: newtmpData
|
||
|
|
}, () => this.setState({
|
||
|
|
visible: true
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
handleCancel = () => { // 退出弹窗
|
||
|
|
// this.getBaseInfoData(1, "1", 500);
|
||
|
|
this.clearData();
|
||
|
|
}
|
||
|
|
closeModal = () => { // 退出弹窗
|
||
|
|
this.clearData();
|
||
|
|
}
|
||
|
|
clearData = () => {
|
||
|
|
let newtmpData = { ...this.state.tmpData }
|
||
|
|
newtmpData["data"].id = '';
|
||
|
|
newtmpData["data"].homeReload = false;
|
||
|
|
this.setState({
|
||
|
|
visible: false,
|
||
|
|
tmpData: newtmpData,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onTabChange = (tabKey) => {
|
||
|
|
this.getBaseInfoData(1, tabKey, 500);
|
||
|
|
this.setState({
|
||
|
|
type:tabKey
|
||
|
|
})
|
||
|
|
}
|
||
|
|
handleActiveMenu = () => {
|
||
|
|
window.location.replace(config.guideH5Host)
|
||
|
|
// let host= window.location.origin
|
||
|
|
// window.location.replace(host+'/#/HomeMobileNew')
|
||
|
|
}
|
||
|
|
handleActiveCreate = (menu) => {
|
||
|
|
this.props.history.push({ pathname: `/main/${menu.ID}` })
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div style={{ backgroundColor: '#fff', padding: '20px 10px'}}>
|
||
|
|
<div style={{ display: 'inline-block' }}>
|
||
|
|
<Modal
|
||
|
|
visible={this.state.visible}
|
||
|
|
title={this.state.noticeTitle + "(" + this.state.taskCode + ")"}
|
||
|
|
maskClosable={false}
|
||
|
|
onCancel={this.handleCancel}
|
||
|
|
footer={null}
|
||
|
|
style={{
|
||
|
|
maxWidth: "100vw",
|
||
|
|
top: -10,
|
||
|
|
paddingBottom: 0
|
||
|
|
}}
|
||
|
|
bodyStyle={{
|
||
|
|
maxHeight:"100vh",
|
||
|
|
height: "calc(100vh - 55px )", //-53
|
||
|
|
overflowY: "auto"
|
||
|
|
}}
|
||
|
|
width="100vw"
|
||
|
|
// className='antd-modal-fullscreen2'
|
||
|
|
closeModal={this.closeModal}
|
||
|
|
// forceRender={true}
|
||
|
|
>
|
||
|
|
<FormPage {...this.state.tmpData} />
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
<br></br>
|
||
|
|
<Row>
|
||
|
|
<Button style={{float: "left"}} type="link" onClick={()=>this.handleActiveMenu()}>返回首页</Button>
|
||
|
|
<Button style={{float: "right"}} type="link" onClick={()=>this.handleActiveMenu()}>新增</Button>
|
||
|
|
</Row>
|
||
|
|
<Row justify='center' style={{marginTop: "14px", height: 'calc((100% - 250px) / 2)', minHeight: '120px' }}>
|
||
|
|
<Col style={{ height: '100%', whiteSpace: 'pre-wrap' }}>
|
||
|
|
<Tabs defaultActiveKey={this.state.type} style={{backgroundColor:'#fff'}} onChange={this.onTabChange}>
|
||
|
|
<TabPane tab="待办事项" key="1">
|
||
|
|
<List
|
||
|
|
pagination={{
|
||
|
|
onChange: page => {
|
||
|
|
console.log(page);
|
||
|
|
},
|
||
|
|
pageSize: 10,
|
||
|
|
}}
|
||
|
|
itemLayout="horizontal"
|
||
|
|
dataSource={this.state.retData}
|
||
|
|
renderItem={record => (
|
||
|
|
<List.Item
|
||
|
|
extra={
|
||
|
|
this.ShowState(record,"1")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<List.Item.Meta
|
||
|
|
avatar={<Avatar src="https://joeschmoe.io/api/v1/jon" />}
|
||
|
|
title={<span> <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE)}>{record.NOTICE_TITLE}</a></span>}
|
||
|
|
description={"开始时间:"+record.TASK_STARTDT+'\n'+"结束时间:"+record.TASK_ENDDT}
|
||
|
|
/>
|
||
|
|
</List.Item>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</TabPane>
|
||
|
|
<TabPane tab="已办事项" key="2">
|
||
|
|
<List
|
||
|
|
pagination={{
|
||
|
|
onChange: page => {
|
||
|
|
console.log(page);
|
||
|
|
},
|
||
|
|
pageSize: 10,
|
||
|
|
}}
|
||
|
|
itemLayout="horizontal"
|
||
|
|
dataSource={this.state.retData}
|
||
|
|
renderItem={record => (
|
||
|
|
<List.Item
|
||
|
|
extra={
|
||
|
|
this.ShowState(record,"2")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<List.Item.Meta
|
||
|
|
avatar={<Avatar src="https://joeschmoe.io/api/v1/jon" />}
|
||
|
|
title={<span> <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE)}>{record.NOTICE_TITLE}</a></span>}
|
||
|
|
description={"开始时间:"+record.TASK_STARTDT+'\n'+"结束时间:"+record.TASK_ENDDT}
|
||
|
|
/>
|
||
|
|
</List.Item>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</TabPane>
|
||
|
|
</Tabs>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default connect(({ login }) => ({ login }))(ApproveMobile)
|