9 changed files with 741 additions and 62 deletions
@ -0,0 +1,195 @@ |
|||
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 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.processInstancemMyDraftList, |
|||
{ userId: user?.id, businessType: '', ...obj }) |
|||
.then(res => { |
|||
setTableData(res?.data) |
|||
setLimits(res.count || 0) |
|||
setLoading(false) |
|||
}, error => { |
|||
Toast.error({ content: '保存待发列表请求失败', duration: 1, }) |
|||
setLoading(false) |
|||
|
|||
}); |
|||
} |
|||
|
|||
let columns = [{ |
|||
title: '序号', |
|||
dataIndex: 'index', |
|||
render: (text, record, index) => index + 1 |
|||
}, { |
|||
title: '标题', |
|||
dataIndex: 'nae', |
|||
}, { |
|||
title: '关联项目', |
|||
dataIndex: 'nae', |
|||
}, { |
|||
title: '申请人', |
|||
dataIndex: 'applyerName', |
|||
render: (text, record, index) =>user?.name |
|||
}, { |
|||
title: '申请部门', |
|||
dataIndex: 'applyDepartmentName', |
|||
render: (text, record, index) =>user?.department[0]?.name |
|||
}, { |
|||
title: '审批状态', |
|||
dataIndex: 'apName', |
|||
}, { |
|||
title: '提交时间', |
|||
dataIndex: 'createAt', |
|||
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 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", }}>PRESERVE 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) }} |
|||
/> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
user: auth.user, |
|||
// actions: global.actions, |
|||
// members: members.data, |
|||
// socket: webSocket.socket |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Rest); |
|||
Loading…
Reference in new issue