import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { reloadFlowNodes, removeFlowNodeExtend } from '@/services/flow/flow'; import { Space, Table, Popconfirm, Tooltip, notification, message, Button, Spin, Tag } from 'antd'; import { RollbackOutlined, EditTwoTone, ControlOutlined, DeleteOutlined, EyeOutlined, } from '@ant-design/icons'; import PageContainer from '@/components/BasePageContainer'; import NodeEdit from './flowNodeComponents/NodeEdit'; import AuxiliaryView from './flowNodeComponents/AuxiliaryView'; import styles from './flowNode.less'; import start from '@/assets/images/icons/开始节点.png'; import end from '@/assets/images/icons/结束节点.png'; const FlowNode = () => { const history = useHistory(); const { flowName, pickItemIndex, allDisabled, searchValue } = history.location.state; const [visible, setVisible] = useState({ nodeEdit: false, auxiliaryView: false, }); // 弹窗显示 const [tableData, setTableData] = useState([]); // 流程对应的回显的表格 const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 展开的表格的key const [nodeMsg, setNodeMsg] = useState(); // 保存节点信息 const [loading, setLoading] = useState(false); useEffect(() => { getData(); }, []); // 弹窗显示控制 const showModal = (key, value) => { setVisible({ ...visible, [key]: value }); }; // 获取数据 const getData = () => { setLoading(true); reloadFlowNodes({ flowName }).then(res => { setLoading(false); if (res.code === 0) { setTableData(res.data); // 存入需要展开得节点 setExpandedRowKeys(res.data.map(item => item.GroupName)); } }); }; // 清除节点 const delNode = record => { removeFlowNodeExtend({ flowNodeExtendID: record.extendID }) .then(res => { if (res.code === 0) { getData(); notification.success({ message: '提示', duration: 3, description: '清除成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(() => { notification.error({ message: '提示', duration: 3, description: '网络异常', }); }); }; // 控制表格的展开跟收起 const onUnfold = (expanded, record) => { const data = [...expandedRowKeys]; let index = data.indexOf(record.GroupName); if (expanded) { data.push(record.GroupName); } else { data.splice(index, 1); } setExpandedRowKeys(data); }; // 表格内文案样式 const textStyleOne = (text, record) => { if (record.colorType === 2) { return 'red'; } if (text === '(未配置)') { return 'grey'; } return '000000D9'; }; // 定义展开的表格 const createUnfoldTable = itemTable => { const columns = [ { title: '节点名称', dataIndex: 'name', width: 149, align: 'left', ellipsis: { showTitle: true, }, render: (text, record) => { console.log(record); if (record.type == 1) { return ( <div style={{ display: 'flex', justifyContent: 'center' }}> <img src={start} style={{ height: '18px', marginTop: '2px', marginRight: '5px' }} alt="" /> <div style={{ color: record.colorType === 2 ? 'red' : '#000000D9', }} > {text} </div> </div> ); } if (record.type == 2) { return ( <div style={{ display: 'flex', justifyContent: 'center' }}> <img src={end} style={{ height: '18px', marginTop: '2px', marginRight: '5px' }} alt="" /> <div style={{ color: record.colorType === 2 ? 'red' : '#000000D9', }} > {text} </div> </div> ); } if (record.type == 0) { return ( <div style={{ display: 'flex', justifyContent: 'center', color: record.colorType === 2 ? 'red' : '#000000D9', }} > {text} </div> ); } }, }, { title: '节点别名', dataIndex: 'aliasName', align: 'center', width: 80, ellipsis: { showTitle: true, }, render: (text, record) => ( <Tooltip placement="topLeft" title={text}> <span style={{ color: textStyleOne(text, record) }}>{text}</span> </Tooltip> ), }, { title: '移交方式', dataIndex: 'extendHandover', align: 'center', width: 100, render: (text, record) => <span style={{ color: textStyleOne(text, record) }}>{text}</span>, }, { title: '节点类型', dataIndex: 'extendNodeType', align: 'center', width: 80, render: (text, record) => <span style={{ color: textStyleOne(text, record) }}>{text}</span>, }, { title: '工单主表', dataIndex: 'extendTableName', width: 150, align: 'center', ellipsis: { showTitle: true, }, render: (text, record) => ( <Tooltip placement="topLeft" title={text}> <span style={{ color: textStyleOne(text, record) }}>{text}</span> </Tooltip> ), }, // { // title: '查看字段', // dataIndex: 'extendSeeFields', // align: 'center', // width: 80, // render: (text, record) => ( // <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span> // ), // }, { title: '字段', dataIndex: 'extendFields', align: 'center', width: 80, render: (text, record) => ( <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span> ), }, { title: '外部字段', dataIndex: 'outFields', key: 'outFields', align: 'center', width: 100, render: text => ( <span style={{ display: 'inline-block', width: '80px', color: Number(text) > 0 ? 'red' : '', backgroundColor: Number(text) > 0 ? 'yellow' : '', }} > {text} </span> ), }, // { // title: '补正', // dataIndex: 'extendEditableLater', // align: 'center', // width: 80, // render: (text, record) => { // if (record.colorType === 2) { // return <span style={{ color: 'red' }}>{text}</span>; // } // if (text == '是') { // return <Tag color="success">{text}</Tag>; // } // if (text == '否') { // return <Tag color="processing">{text}</Tag>; // } // }, // }, { title: '可退', dataIndex: 'extendRollbackable', align: 'center', width: 80, render: (text, record) => { if (record.colorType === 2) { return <span style={{ color: 'red' }}>{text}</span>; } if (text == '是') { return <Tag color="success">{text}</Tag>; } if (text == '否') { return <Tag color="processing">{text}</Tag>; } }, }, // { // title: '退至', // dataIndex: 'extendRollbackNode', // align: 'center', // width: 80, // ellipsis: { // showTitle: true, // }, // render: (text, record) => ( // <Tooltip placement="topLeft" title={text}> // <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span> // </Tooltip> // ), // }, { title: '转办', dataIndex: 'tranferable', align: 'center', width: 80, render: (text, record) => { if (record.colorType === 2) { return <span style={{ color: 'red' }}>{text}</span>; } if (text == '是') { return <Tag color="success">{text}</Tag>; } if (text == '否') { return <Tag color="processing">{text}</Tag>; } }, }, // { // title: '显示事件信息', // dataIndex: 'eventInformation', // align: 'center', // width: 80, // render: (text, record) => ( // <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span> // ), // }, { title: '操作', align: 'center', ellipsis: true, width: 150, render: record => ( <> <Space> {record.ID !== 0 && ( <> {allDisabled ? ( <Tooltip title="节点配置查看"> <EyeOutlined onClick={() => { showModal('nodeEdit', true); setNodeMsg(record); }} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> ) : ( <Tooltip title="节点配置"> <EditTwoTone onClick={() => { showModal('nodeEdit', true); setNodeMsg(record); }} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> )} {allDisabled ? ( <Tooltip title="节点辅助视图查看"> <ControlOutlined onClick={() => { showModal('auxiliaryView', true); setNodeMsg(record); }} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> ) : ( <Tooltip title="节点辅助视图"> <ControlOutlined onClick={() => { showModal('auxiliaryView', true); setNodeMsg(record); }} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> )} </> )} {allDisabled && record.groupName.includes('正常节点') ? null : ( <Tooltip title="清除节点配置"> <Popconfirm title="是否清除该节点配置?" onConfirm={() => delNode(record)} onCancel={() => message.error('取消清除')} okText="是" cancelText="否" > <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> </Tooltip> )} </Space> </> ), }, ]; return ( <Table className={styles.unfoldTable} rowKey={record => record.name} columns={columns} bordered size="small" showHeader={false} dataSource={itemTable} pagination={false} onRow={record => ({ onDoubleClick: () => { if (record.ID !== 0) { showModal('nodeEdit', true); setNodeMsg(record); } }, })} /> ); }; // 返回 const backFlow = () => { history.push({ pathname: '/biz/workflow/case', state: { pickItemIndex, searchValue, dataSource: true }, }); }; // 定义表格 const columns = [ { title: '节点名称', dataIndex: 'GroupName', width: 100, align: 'left', render: (text, record) => ( <a style={{ fontWeight: 'bold' }}> {text}({record.Items.length ? record.Items.length : 0}个) </a> ), }, { title: '节点别名', align: 'center', width: 80, }, { title: '移交方式', align: 'center', width: 100, }, { title: '节点类型', align: 'center', width: 80, }, { title: '工单主表', align: 'center', width: 150, }, // { // title: '查看字段', // width: 80, // align: 'center', // }, { title: '字段', align: 'center', width: 80, }, { title: '外部字段', dataIndex: 'outFields', key: 'outFields', align: 'center', width: 100, }, // { // title: '补正', // align: 'center', // width: 80, // }, { title: '可退', align: 'center', width: 80, }, // { // title: '退至', // align: 'center', // width: 80, // }, { title: '转办', align: 'center', width: 80, }, // { // title: '显示事件信息', // align: 'center', // width: 80, // }, { title: '操作', align: 'center', width: 150, }, ]; return ( <PageContainer> <div className={styles.NodeContent}> <div className={styles.header}> <div className={styles.nodeTitle}>{flowName}-流程节点配置</div> <div className={styles.buttonBox}> <Button type="primary" onClick={() => backFlow()}> <RollbackOutlined /> 返回 </Button> </div> </div> <div style={{ height: 'calc(100% - 50px)', overflowY: 'scroll' }}> <Spin spinning={loading} tip="loading..."> <Table dataSource={tableData} columns={columns} rowKey={record => record.GroupName} size="small" showHeader expandable={{ expandedRowRender: record => createUnfoldTable(record.Items), }} expandedRowKeys={expandedRowKeys} onExpand={onUnfold} pagination={false} /> </Spin> </div> <NodeEdit visible={visible.nodeEdit} msg={nodeMsg} handleCancel={() => showModal('nodeEdit', false)} onSubumit={() => { showModal('nodeEdit', false); getData(); }} allDisabled={allDisabled} /> <AuxiliaryView visible={visible.auxiliaryView} msg={nodeMsg} handleCancel={() => showModal('auxiliaryView', false)} allDisabled={allDisabled} /> </div> </PageContainer> ); }; export default FlowNode;