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 => { return { 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;