wenlele
2 years ago
9 changed files with 217 additions and 12 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