import React, { useEffect, useState } from 'react'; import { Modal, Table, Tooltip, notification, Space, Popconfirm } from 'antd'; import { PlusSquareFilled, EditTwoTone, DeleteOutlined } from '@ant-design/icons'; import styles from './incident.less'; import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api'; import AddFlowsModal from './AddFlowsModal'; const ProcessModal = props => { const { callBackSubmit = () => {}, title1, visible, onCancel, formObj, maxLength } = props; const [tableData, setTableData] = useState([]); const [addVisible, setAddVisible] = 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: 150, ellipsis: true, // render: item => ( // <div // ref={r => { // if (r) { // r.innerHTML = item; // } // }} // /> // ) }, { title: () => <span style={{ fontWeight: 'bold' }}>受理权限</span>, dataIndex: 'FlowRoles', key: 'FlowRoles', width: 400, ellipsis: true, // render: item => ( // <div // ref={r => { // if (r) { // r.innerHTML = item; // } // }} // /> // ) }, { title: () => <span style={{ fontWeight: 'bold' }}>操作</span>, key: 'action', aligin: '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(() => { GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => { if (res.msg === 'Ok') { console.log(res.data); setTableData(res.data); } }); }, [visible, flag]); const addIncident = () => { console.log(formObj.ID); setObj(formObj.ID); setAddVisible(true); setIsType('add'); }; const editEventType = record => { setObj(formObj.ID); setRecord1(record); setIsType('edit'); setAddVisible(true); }; 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: formObj.ID }).then(res => { if (res.msg === 'Ok') { console.log(res.data); setTableData(res.data); } }); }; const onSumbit = () => { callBackSubmit(); }; return ( <Modal title={`${title1}受理流程和权限`} visible={visible} width="800px" onCancel={onCancel} onOk={onSumbit} > <Tooltip title="添加事件类型"> <PlusSquareFilled onClick={() => addIncident()} style={{ color: '#1890FF', fontSize: '25px', verticalAlign: 'middle', marginLeft: '25px', marginBottom: '10px', }} /> </Tooltip> <Table size="small" rowKey="ID" bordered style={{ height: '15rem', overflowY: 'scroll', width: '700px', marginLeft: '25px' }} onRow={record => ({ onDoubleClick: event => { event.stopPropagation(); editEventType(record); }, // 双击 })} columns={columns} dataSource={tableData} pagination={false} /> <AddFlowsModal visible={addVisible} obj={obj} formObj={formObj} type={isType} record={record1} maxLength={maxLength} onClose={() => setAddVisible(false)} callBackSubmit={onOK} placement="right" /> </Modal> ); }; export default ProcessModal;