/* eslint-disable react-hooks/rules-of-hooks */ /* eslint-disable camelcase */ import React, { useEffect, useState } from 'react'; import { Modal, Table, Tooltip, notification, Space, Popconfirm, Spin, Button } from 'antd'; import { PlusSquareFilled, EditTwoTone, DeleteOutlined, PlusSquareOutlined, RollbackOutlined, } from '@ant-design/icons'; import { useHistory } from 'react-router-dom'; import styles from './incident.less'; import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api'; import AddFlowsModal from './AddFlowsModal'; const incidentFlow = props => { const [tableData, setTableData] = useState([]); const history = useHistory(); const [addVisible, setAddVisible] = useState(false); const [treeLoading, setTreeLoading] = useState(false); const [isType, setIsType] = useState(''); // 弹窗类型 const [record1, setRecord1] = useState(''); const [obj, setObj] = useState(''); const [flag, setFlag] = useState(0); const columns = [ { title: () => <span style={{ fontWeight: 'bold' }}>流程名称</span>, dataIndex: 'FlowName', key: 'FlowName', // width: 600, ellipsis: true, align: 'center', }, { title: () => <span style={{ fontWeight: 'bold' }}>操作</span>, key: 'action', width: 150, align: 'center', render: record => ( <Space size="middle"> {/* <Tooltip title="编辑用户"> <EditTwoTone onClick={() => editEventType(record)} style={{ fontSize: '16px' }} /> </Tooltip> */} <Tooltip title="删除"> <Popconfirm placement="bottomRight" title={<p>即将删除事件流程,是否确认删除?</p>} okText="确认" cancelText="取消" onConfirm={() => deleteEventType(record)} > <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> </Tooltip> </Space> ), }, ]; useEffect(() => { console.log(props); console.log(props.location.state.formObj); setTreeLoading(true); GetCM_Event_LoadEvenFlows({ eventTypeId: props.location.state.formObj.ID, }).then(res => { setTreeLoading(false); if (res.msg === 'Ok') { console.log(res.data); setTableData(res.data); } }); }, [flag]); const addIncident = () => { console.log(props.location.state.formObj.ID); setObj(props.location.state.formObj.ID); setAddVisible(true); setIsType('add'); }; const editEventType = record => { setObj(props.location.state.formObj.ID); setRecord1(record); setIsType('edit'); setAddVisible(true); }; const back = () => { let { rember } = props.location.state; history.push({ pathname: '/biz/workflow/event', state: { rember }, }); }; const deleteEventType = record => { console.log(record); CM_Event_RemoveEvenFlow({ eventFlowIds: record.ID }).then(res => { if (res.msg === '') { notification.success({ message: '提示', duration: 3, description: '删除成功', }); setFlag(flag + 1); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; const onOK = () => { setAddVisible(false); GetCM_Event_LoadEvenFlows({ eventTypeId: props.location.state.formObj.ID, }).then(res => { if (res.msg === 'Ok') { console.log(res.data); setTableData(res.data); } }); }; return ( <> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.containerBox}> <div className={styles.config}> <div className={styles.title}>{`${props.location.state.title1}受理流程`}</div> <div className={styles.btn}> <Button disabled={ props.location.state.formObj.createMode === '工单分派' && tableData.length >= 1 } type="primary" icon={<PlusSquareOutlined />} onClick={() => addIncident()} > 新增 </Button> <Button type="primary" icon={<RollbackOutlined />} onClick={() => back()}> 返回 </Button> </div> </div> <Table size="small" rowKey="ID" bordered style={{ overflowY: 'scroll' }} onRow={record => ({ onDoubleClick: event => { event.stopPropagation(); editEventType(record); }, // 双击 })} columns={columns} dataSource={tableData} pagination={false} /> </div> </Spin> <AddFlowsModal visible={addVisible} obj={obj} formObj={props.location.state.formObj} type={isType} record={record1} // maxLength={maxLength} onClose={() => setAddVisible(false)} callBackSubmit={onOK} placement="right" /> </> ); }; export default incidentFlow;