|  |  | @ -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); | 
			
		
	
	
		
			
				
					|  |  | 
 |