You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
291 lines
12 KiB
291 lines
12 KiB
import React, { useEffect, useRef, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { ApiTable, EmisApiTable, EmisRequest, parseProcessData, processState, judgmentProcessState } from '$utils'
|
|
import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Toast, Space, Tooltip } from '@douyinfe/semi-ui';
|
|
import { SkeletonScreen, WorkflowApprovalModal, } from "$components";
|
|
import moment from "moment";
|
|
|
|
const Rest = (props) => {
|
|
const { dispatch, actions, user, socket, pomsProjectBasicAll } = props
|
|
const { workOrder } = actions
|
|
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 [workflowModalType, setWorkflowModalType] = useState('')
|
|
const [checkProcessInstanceId, setCheckProcessInstanceId] = useState(null)
|
|
const [params, setParams] = useState({})
|
|
|
|
useEffect(() => {
|
|
backlogData()
|
|
if (!pomsProjectBasicAll.length) {
|
|
dispatch(workOrder.getPomsProjectBasicAll())
|
|
}
|
|
}, [])
|
|
|
|
let backlogData = (obj = { limit: 10, offset: 0 }) => {
|
|
setLoading(true)
|
|
EmisRequest.get(EmisApiTable.processInstancemMyApplyList,
|
|
{
|
|
userId: user?.id,
|
|
businessType: '运维中台表单',
|
|
...obj,
|
|
queryFormData: 'true'
|
|
})
|
|
.then(res => {
|
|
let nextTableData = (res?.data || []).map(r => {
|
|
let pomsNeedData = {}
|
|
if (r?.formData?.submitFormData && r?.formData?.workflowProcessVersion?.workflowProcessForm?.formSchema) {
|
|
pomsNeedData = parseProcessData({
|
|
formSchema: r?.formData?.workflowProcessVersion?.workflowProcessForm?.formSchema,
|
|
formData: r?.formData?.submitFormData
|
|
})
|
|
}
|
|
return {
|
|
...r,
|
|
pomsNeedData
|
|
}
|
|
})
|
|
setTableData(nextTableData)
|
|
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: 'title',
|
|
render: (text, record, index) => {
|
|
return record?.pomsNeedData?.title?.value || ''
|
|
}
|
|
}, {
|
|
title: '关联项目',
|
|
dataIndex: 'pomsProject',
|
|
render: (text, record, index) => {
|
|
const pomsProjectId = record?.pomsNeedData?.pomsProjectId?.value
|
|
if (pomsProjectId) {
|
|
const corProject = pomsProjectBasicAll.find(p => p.value == pomsProjectId)
|
|
return corProject?.label || ''
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}, {
|
|
title: '申请人',
|
|
dataIndex: 'applyerName',
|
|
}, {
|
|
title: '申请部门',
|
|
dataIndex: 'applyDepartmentName',
|
|
}, {
|
|
title: '审批状态',
|
|
dataIndex: 'status',
|
|
render: (text, record) => {
|
|
return judgmentProcessState(record, 'initiate')
|
|
},
|
|
}, {
|
|
title: '提交时间',
|
|
dataIndex: 'submissionTime',
|
|
render: (text, record, index) => text && moment(text).add(8, 'hours').format('YYYY-MM-DD HH:mm:ss') || '--'
|
|
}, {
|
|
title: '期望完成时间',
|
|
dataIndex: 'expectTime',
|
|
render: (text, record, index) => {
|
|
return record?.pomsNeedData?.expectTime?.value || ''
|
|
}
|
|
}, {
|
|
title: '操作',
|
|
dataIndex: 'hadle',
|
|
render: (text, record, index) => {
|
|
let reviewTime = record.lastApproveTime ?
|
|
moment(record.lastApproveTime).format('YYYY-MM-DD HH:mm:ss')
|
|
:
|
|
record.variables.find(t => t.name == 'fsLastActionTime') ?
|
|
moment.unix(record.variables.find(t => t.name == 'fsLastActionTime').value).format('YYYY-MM-DD HH:mm:ss')
|
|
: '';
|
|
console.log(reviewTime);
|
|
let tooltipTitle = '';
|
|
if (record.processDeleted) {
|
|
tooltipTitle = '该表单流程已删除，不支持重新发起';
|
|
}
|
|
if (!record.processIsEnable) {
|
|
tooltipTitle = '该表单流程已停用，不支持重新发起';
|
|
}
|
|
if (!record.isCurrentVersion) {
|
|
tooltipTitle = '该表单流程已修改，不支持重新发起'
|
|
}
|
|
return (
|
|
<Space>
|
|
<a style={{ width: 60, color: "#1890ff", cursor: "pointer" }} onClick={() => {
|
|
setWorkflowModalType('myApply')
|
|
setCheckProcessInstanceId(record.processInstanceId)
|
|
setWorkflowModalVisible(true)
|
|
}}>查看详情</a>
|
|
{
|
|
!reviewTime && processState.active == record.state ?
|
|
<Popconfirm title='确认撤销申请？' onConfirm={() => {
|
|
// setLoading(true)
|
|
EmisRequest.post(EmisApiTable.getApprovalActionUrl.replace('{type}', 'interrupt'),
|
|
{
|
|
procinstId: record.processInstanceId,
|
|
actionName: '撤销'
|
|
})
|
|
.then(res => {
|
|
setLoading(false)
|
|
backlogData()
|
|
Toast.success({ content: '撤销流程成功', duration: 1, })
|
|
}, error => {
|
|
Toast.error({ content: '撤销流程失败', duration: 1, })
|
|
setLoading(false)
|
|
});
|
|
}}>
|
|
<a style={{ color: "#1890ff", cursor: "pointer" }}>撤销</a>
|
|
</Popconfirm>
|
|
: ''
|
|
}{
|
|
(
|
|
record.state == processState.suspended // 已撤销
|
|
|| record.state == processState.externally // 手动结束
|
|
) ?
|
|
tooltipTitle
|
|
&& false
|
|
?
|
|
<Tooltip content={tooltipTitle} position={'leftBottom'}>
|
|
重新发起
|
|
</Tooltip>
|
|
: <a style={{ color: "#1890ff", cursor: "pointer" }} onClick={() => {
|
|
setWorkflowModalType('submit')
|
|
setCheckProcessInstanceId(record.processInstanceId)
|
|
setWorkflowModalVisible(true)
|
|
}}>重新发起</a>
|
|
: ''
|
|
}
|
|
</Space >
|
|
)
|
|
}
|
|
}]
|
|
|
|
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", }}>LAUNCH 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?.length) {
|
|
values.applyTimes = [moment(values?.applyTimes[0]).format('YYYY-MM-DD HH:mm:ss'), moment(values?.applyTimes[1]).endOf('day').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>
|
|
<WorkflowApprovalModal
|
|
type={workflowModalType}
|
|
visible={workflowModalVisible}
|
|
processAuditList={tableData}
|
|
checkProcessInstanceId={checkProcessInstanceId}
|
|
onCancel={() => { setWorkflowModalVisible(false) }}
|
|
successCallBack={({ refresh }) => {
|
|
if (refresh) {
|
|
backlogData()
|
|
}
|
|
setWorkflowModalVisible(false)
|
|
}}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, pomsProjectBasicAll } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
pomsProjectBasicAll: pomsProjectBasicAll.data || []
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Rest);
|
|
|