|
|
|
@ -1,21 +1,186 @@ |
|
|
|
import React, { useEffect } from 'react'; |
|
|
|
import React, { useEffect, useRef, useState } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { ApiTable, EmisApiTable, EmisRequest } from '$utils' |
|
|
|
import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Toast } from '@douyinfe/semi-ui'; |
|
|
|
import { IconSearch } from '@douyinfe/semi-icons'; |
|
|
|
import { SkeletonScreen, WorkflowModal } from "$components"; |
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Server = (props) => { |
|
|
|
const { dispatch, actions, user, loading, socket } = props |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
const Rest = (props) => { |
|
|
|
const { dispatch, actions, user, socket } = props |
|
|
|
|
|
|
|
const [query, setQuery] = useState({ limit: 10, offset: 0 }); //页码信息 |
|
|
|
const [limits, setLimits] = useState(0)//每页实际条数 |
|
|
|
const [tableData, setTableData] = useState([]); |
|
|
|
const [loading, setLoading] = useState(true); |
|
|
|
const [workflowModalVisible, setWorkflowModalVisible] = useState(false) |
|
|
|
const [processInstanceId, setProcessInstanceId] = useState(null) |
|
|
|
const [params, setParams] = useState({}) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
backlogData() |
|
|
|
}, []) |
|
|
|
|
|
|
|
let backlogData = (obj = { limit: 10, offset: 0 }) => { |
|
|
|
|
|
|
|
setLoading(true) |
|
|
|
EmisRequest.get(EmisApiTable.processInstancemMyNoticeList, |
|
|
|
{ userId: user?.id, businessType: '', ...obj }) |
|
|
|
.then(res => { |
|
|
|
setTableData(res?.data) |
|
|
|
setLoading(false) |
|
|
|
}, error => { |
|
|
|
Toast.error({ content: '抄送我的工单列表请求失败', duration: 1, }) |
|
|
|
setLoading(false) |
|
|
|
|
|
|
|
}); |
|
|
|
EmisRequest.get(EmisApiTable.processInstancemMyNoticeCount, |
|
|
|
{ userId: user?.id, businessType: '', ...obj, limit: "", offset: "" }) |
|
|
|
.then(res => { |
|
|
|
setLimits(res.count || 0) |
|
|
|
}, error => { |
|
|
|
Toast.error({ content: '抄送我的工单数量请求失败', duration: 1, }) |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
let columns = [{ |
|
|
|
title: '序号', |
|
|
|
dataIndex: 'index', |
|
|
|
render: (text, record, index) => index + 1 |
|
|
|
}, { |
|
|
|
title: '标题', |
|
|
|
dataIndex: 'nae', |
|
|
|
}, { |
|
|
|
title: '关联项目', |
|
|
|
dataIndex: 'nae', |
|
|
|
}, { |
|
|
|
title: '申请人', |
|
|
|
dataIndex: 'applyerName', |
|
|
|
}, { |
|
|
|
title: '申请部门', |
|
|
|
dataIndex: 'applyDepartmentName', |
|
|
|
}, { |
|
|
|
title: '审批状态', |
|
|
|
dataIndex: 'apName', |
|
|
|
}, { |
|
|
|
title: '提交时间', |
|
|
|
dataIndex: 'startTime', |
|
|
|
render: (text, record, index) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') || '--' |
|
|
|
}, { |
|
|
|
title: '期望完成时间', |
|
|
|
dataIndex: 'nae', |
|
|
|
}, { |
|
|
|
title: '操作', |
|
|
|
dataIndex: 'hadle', |
|
|
|
render: (text, record, index) => <div style={{ width: 60, color: "#1890ff", cursor: "pointer" }} onClick={() => { |
|
|
|
setProcessInstanceId(record.processInstanceId) |
|
|
|
setWorkflowModalVisible(true) |
|
|
|
|
|
|
|
}}>查看详情</div> |
|
|
|
}] |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div> |
|
|
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> |
|
|
|
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
|
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>已办工单</div> |
|
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>ALREADY WORKORDER</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginRight: 20, display: 'flex', alignItems: 'center' }} className='myempush'> |
|
|
|
<Form |
|
|
|
// getFormApi={(formApi) => (form.current = formApi)} |
|
|
|
layout="horizontal" |
|
|
|
style={{ position: "relative", width: "100%", flex: 1 }} |
|
|
|
onSubmit={(values) => { |
|
|
|
if (values?.applyTimes) { |
|
|
|
values.applyTimes = [moment(values?.applyTimes[0]).format('YYYY-MM-DD HH:mm:ss'), moment(values?.applyTimes[1]).format('YYYY-MM-DD HH:mm:ss')] |
|
|
|
} |
|
|
|
backlogData({ ...values, limit: 10, page: 0 }) |
|
|
|
setQuery({ limit: 10, offset: 0 }); |
|
|
|
setLimits(0) |
|
|
|
setParams({ ...values }) |
|
|
|
}} |
|
|
|
> |
|
|
|
<Form.DatePicker |
|
|
|
pure |
|
|
|
field="applyTimes" |
|
|
|
label="提交时间" |
|
|
|
style={{ width: 268 }} |
|
|
|
type="dateRange" density="compact" |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
suffix={<IconSearch />} |
|
|
|
field="keywordsUser" |
|
|
|
pure |
|
|
|
showClear |
|
|
|
style={{ width: 260, marginLeft: 12, marginRight: 12 }} |
|
|
|
placeholder="请输入申请人" |
|
|
|
/> |
|
|
|
<Button theme='solid' type="primary" htmlType="submit">查询</Button> |
|
|
|
</Form> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style={{ marginTop: 20 }}> |
|
|
|
<Skeleton |
|
|
|
loading={loading} |
|
|
|
// loading={false} |
|
|
|
active={true} |
|
|
|
placeholder={SkeletonScreen()} |
|
|
|
> |
|
|
|
<Table |
|
|
|
rowKey="name" |
|
|
|
columns={columns} |
|
|
|
dataSource={tableData} |
|
|
|
bordered={false} |
|
|
|
hideExpandedColumn={false} |
|
|
|
empty="暂无数据" |
|
|
|
pagination={false} |
|
|
|
/> |
|
|
|
</Skeleton> |
|
|
|
|
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
padding: "20px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
|
|
|
共{limits}条信息 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
className="22" |
|
|
|
total={limits} |
|
|
|
showSizeChanger |
|
|
|
currentPage={query.offset + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setQuery({ limit: pageSize, offset: currentPage - 1 }); |
|
|
|
backlogData({ ...params, limit: pageSize, offset: currentPage - 1 }) |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<WorkflowModal |
|
|
|
visible={workflowModalVisible} |
|
|
|
title={''} |
|
|
|
processId={processInstanceId} |
|
|
|
onCancel={() => { setWorkflowModalVisible(false) }} |
|
|
|
successCallBack={() => { setWorkflowModalVisible(false) }} |
|
|
|
/> |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
@ -24,11 +189,11 @@ function mapStateToProps (state) { |
|
|
|
const { auth, global, members, webSocket } = state; |
|
|
|
return { |
|
|
|
// loading: members.isRequesting, |
|
|
|
// user: auth.user, |
|
|
|
user: auth.user, |
|
|
|
// actions: global.actions, |
|
|
|
// members: members.data, |
|
|
|
// socket: webSocket.socket |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Server); |
|
|
|
export default connect(mapStateToProps)(Rest); |
|
|
|
|
