import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { reloadFlows, removeFlowExtend } from '@/services/flow/flow'; import { Tag, Card, Space, Table, Popconfirm, Spin, Tooltip, notification, message, Button } from 'antd'; import { DoubleLeftOutlined, DoubleRightOutlined, EditTwoTone, ApartmentOutlined, DeleteOutlined, OrderedListOutlined, ControlOutlined, } from '@ant-design/icons'; import classnames from 'classnames'; import PageContainer from '@/components/BasePageContainer'; import ProcessConfig from './flowComponents/ProcessConfig'; import Order from './flowComponents/Order'; import Timelimit from './flowComponents/Timelimit'; import styles from './flow.less'; const Flow = () => { const history = useHistory(); const [tableData, setTableData] = useState([]); // 流程对应的回显的表格 const [processData, setProcessData] = useState([]); // 流程列表总 const [dataSource, setDataSource] = useState(''); // 是否是返回获取数据 const [processMsg, setProcessMsg] = useState({}); // 流程配置回显信息 const [treeLoading, setTreeLoading] = useState(false); const [treeVisible, setTreeVisible] = useState(true); const [pickItemIndex, setPickItemIndex] = useState(0); // 选中流程索引 const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引 const [visible, setVisible] = useState({ processConfig: false, order: false, auxiliaryView: false, }); // 弹窗显示 // 初始化 useEffect(() => { // 初始化流程列表 getProcessData(); if (history.location.state && history.location.state.pickItemIndex) { setDataSource('back'); } }, []); // 表格数据改变后处理 useEffect(() => { // 判断是否是返回回来的页面 if (processData.length === 0) { return; } if (dataSource === 'back') { setPickItemIndex(history.location.state.pickItemIndex); setTableData(processData[history.location.state.pickItemIndex].root); } else { setTableData(processData[pickItemIndex].root); } }, [processData]); // 弹窗显示控制 const showModal = (key, value) => { setVisible({ ...visible, [key]: value }); }; // 初始化流程列表 const getProcessData = () => { setTreeLoading(true); reloadFlows() .then(res => { setTreeLoading(false); if (res.code === 0) { setProcessData(res.data); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(() => { setTreeLoading(false); notification.error({ message: '提示', duration: 3, description: '网络异常', }); }); }; // 删除流程 const delProcess = val => { removeFlowExtend({ flowIDs: val.extendID }) .then(res => { if (res.code === 0) { setDataSource('current'); getProcessData(); notification.success({ message: '提示', duration: 3, description: '清除成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(() => { notification.error({ message: '提示', duration: 3, description: '网络异常', }); }); }; // 跳转到对应的流程节点 const toNode = flowName => { console.log(flowName); history.push({ pathname: '/biz/workflow/caseNode', state: { flowName, pickItemIndex }, }); }; // 定义表格 const columns = [ { title: '名称', dataIndex: 'name', width: 150, align: 'center' }, { title: '前端样式', dataIndex: 'extendWebPage', align: 'center', render: text => ( <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>{text}</span> ), }, { title: '手持样式', dataIndex: 'extendMobilePage', align: 'center', render: text => ( <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>{text}</span> ), }, { title: '辅助视图', dataIndex: 'extendPageCount', align: 'center', width: 80, render: text => <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>{text}</span>, }, { title: '流程结束后', dataIndex: 'flowEndBehavior', align: 'center', render: text => ( <span style={{ color: text === '(不做处理)' ? 'grey' : '000000D9' }}>{text}</span> ), }, { title: '12位编码', dataIndex: 'useFixedCodingRule', width: 80, align: 'center', render: record => { if (record == '是') { return <Tag color="success">{record}</Tag>; } else { return <Tag color="processing">{record}</Tag>; } }, }, { title: '异常节点', dataIndex: 'errorNodes', align: 'center', render: text => <span style={{ color: text === '(无)' ? 'grey' : 'red' }}>{text}</span>, }, { title: '接口配置', dataIndex: 'interfaceConfig', align: 'center', // render: text => <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>{text}</span>, render: record => { if (record!='(无)') { return ( <Tooltip title={record}> <Tag color="success">有</Tag> </Tooltip> ); } return <Tag color="processing">无</Tag>; }, }, { title: '操作', align: 'center', ellipsis: true, render: record => ( <> <Space> <Tooltip title="流程配置"> <EditTwoTone onClick={() => { showModal('processConfig', true); setProcessMsg(record); }} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="时限配置"> <ControlOutlined onClick={() => { showModal('auxiliaryView', true); setProcessMsg(record); }} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="节点配置"> <ApartmentOutlined onClick={() => toNode(record.name)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="清除流程配置"> <Popconfirm title="是否清除该流程配置?" onConfirm={() => delProcess(record)} onCancel={() => message.error('取消清除')} okText="是" cancelText="否" > <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> </Tooltip> </Space> </> ), }, ]; return ( <PageContainer> <div className={styles.flowContainer}> {/* 左侧事件树 */} <Spin spinning={treeLoading} tip="loading..."> <Card className={classnames({ [styles.orgContainer]: true, [styles.orgContainerHide]: !treeVisible, })} > <div style={{ height: '100%', display: `${treeVisible ? 'block' : 'none'}` }}> <span className={styles.processTitle}>流程列表</span> <hr className={styles.splitLine} /> {/* 流程列表 */} <div style={{ overflowY: 'scroll', height: 'calc(100% - 30px)' }}> {processData.length > 0 && processData.map((item, index) => ( <div className={classnames({ [styles.listItem]: true, [styles.pickItem]: index === pickItemIndex, [styles.listHover]: index !== pickItemIndex && index === hoverItemIndex, })} onMouseEnter={() => { setHoverItemIndex(index); }} onMouseLeave={() => { setHoverItemIndex(''); }} onClick={() => { setPickItemIndex(index); setTableData(item.root); }} key={item.goupName} > {item.goupName}({item.count ? item.count : ''}) </div> ))} </div> </div> <div className={styles.switcher}> {treeVisible && ( <Tooltip title="隐藏流程列表"> <DoubleLeftOutlined onClick={() => setTreeVisible(false)} /> </Tooltip> )} {!treeVisible && ( <Tooltip title="显示流程列表"> <DoubleRightOutlined onClick={() => setTreeVisible(true)} /> </Tooltip> )} </div> </Card> </Spin> {/* 右侧流程表 */} <div className={styles.processContainer}> <div className={styles.buttonList}> <Button onClick={() => { showModal('order', true); }} > <OrderedListOutlined /> 排序 </Button> </div> <Table dataSource={tableData} columns={columns} rowKey={record => record.ID} bordered size="small" scroll={{ x: 'max-content', y: 'calc(100% - 40px)' }} onRow={record => ({ onDoubleClick: () => { toNode(record.name); }, })} pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, pageSizeOptions: [10, 20, 50, 100], defaultPageSize: 20, showQuickJumper: true, showSizeChanger: true, }} /> </div> </div> {/* 流程配置弹窗 */} <ProcessConfig visible={visible.processConfig} processMsg={processMsg} handleCancel={() => showModal('processConfig', false)} onSubumit={() => { showModal('processConfig', false); setDataSource('current'); getProcessData(); }} /> {/* 排序弹窗 */} <Order visible={visible.order} tableData={tableData} processData={processData} handleCancel={() => showModal('order', false)} submitCallBack={() => { showModal('order', false); setDataSource('current'); getProcessData(); }} /> {/* 流程时限配置 */} <Timelimit visible={visible.auxiliaryView} msg={processMsg} handleCancel={() => showModal('auxiliaryView', false)} /> </PageContainer> ); }; export default Flow;