/* eslint-disable prettier/prettier */ /* eslint-disable eqeqeq */ /* eslint-disable no-shadow */ /* eslint-disable no-unused-vars */ /* eslint-disable array-callback-return */ /* eslint-disable react-hooks/rules-of-hooks */ /* eslint-disable camelcase */ /* eslint-disable guard-for-in */ /* eslint-disable no-restricted-syntax */ import React, { useState, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; import { Form, Card, Space, Table, Popconfirm, Spin, Tooltip, notification, Tree, Button, Modal, Input, message, } from 'antd'; import { DoubleLeftOutlined, DoubleRightOutlined, PlusSquareFilled, RightOutlined, EditTwoTone, DeleteOutlined, OrderedListOutlined, ApartmentOutlined, DesktopOutlined, FormOutlined, } from '@ant-design/icons'; import { GetCM_Event_LoadEventTable, CM_Event_RemoveEventTable, CM_Event_ReOrder, GetCM_Event_LoadEventTypeTable, CM_Event_EditBusinessType } from '@/services/standingBook/api'; import classnames from 'classnames'; import styles from './incident.less'; import AddModal from './AddModal'; import ProcessModal from './ProcessModal'; import SortModal from './SortModal'; import ViewModal from './ViewModal'; const incident = () => { const history = useHistory(); const [treeLoading, setTreeLoading] = useState(false); const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见 const [treeData, setTreeData] = useState([]); // 事件表数据 const [tableData, setTableData] = useState([]); // 事件表 const [addVisible, setAddvisible] = useState(false); const [processVisible, setProcessVisible] = useState(false); const [sortVisible, setSortVisible] = useState(false); const [viewVisible, setViewVisible] = useState(false); const [isType, setIsType] = useState(''); // 弹窗类型 const [formObj, setFormObj] = useState(''); const [flag, setFlag] = useState(0); const [title1, setTitle1] = useState(''); const [title2, setTitle2] = useState(''); const [select, setSelect] = useState(''); const [sortData, setSortData] = useState([]); const [rember, setRember] = useState(0); const [rember1, setRember1] = useState(); const [maxLength, setMaxLength] = useState(0); const [pickItem, setPickItem] = useState(''); const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引 const [keepIdValue, setKeepIdValue] = useState([]); const [editBusinessVisible, setEditBusinessVisible] = useState(false); const [addForm] = Form.useForm(); const columns = [ { title: '事件类型', dataIndex: 'name', key: 'name', width: 150, render: record => ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ), }, { title: '事件主表', dataIndex: 'tableName', key: 'tableName', width: 200, render: record => ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ), }, { title: '编码', dataIndex: 'code', key: 'code', width: 80, render: record => ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ), }, // { // title: '摘要字段', // dataIndex: 'summaryFields', // key: 'summaryFields', // width: 100, // render: record => ( // <Tooltip placement="topLeft" title={record}> // {record} // </Tooltip> // ), // }, { title: '权限', dataIndex: 'roles', key: 'roles', width: 80, render: record => ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ), }, // { // title: '流程', // dataIndex: 'flowCount', // key: 'flowCount', // width: 80, // render: record => ( // <Tooltip placement="topLeft" title={record}> // {record} // </Tooltip> // ), // }, { title: '上报', dataIndex: 'reportable', key: 'reportable', width: 50, }, // { // title: '上报字段', // dataIndex: 'reportFields', // key: 'reportFields', // width: 80, // }, // { // title: '显示字段', // dataIndex: 'displayFields', // key: 'displayFields', // width: 80, // }, { title: '编辑', dataIndex: 'editable', key: 'editable', width: 50, render: item => ( <span style={{ color: 'grey' }} key={item}> {item} </span> ), }, { title: '编辑字段', dataIndex: 'editableFields', key: 'editableFields', width: 80, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ), }, { title: '外部字段', dataIndex: 'outFields', key: 'outFields', align: 'center', width: 80, render: text => ( <span style={{ display: 'inline-block', width: '60px', color: Number(text) > 0 ? 'red' : '', backgroundColor: Number(text) > 0 ? 'yellow' : '', }} > {text == 0 ? '(无)' : text} </span> ), }, { title: '上报方式', dataIndex: 'createMode', key: 'createMode', width: 80, }, { title: '流程数量', dataIndex: 'flowCount', key: 'flowCount', width: 80, render: (text, record) => ( <> <span style={{ display: 'inline-block', width: '60px', color: Number(text.split(' ')[0]) > 1 && record.createMode === '工单分派' ? 'red' : '', }} > {Number(text.split(' ')[0]) > 1 && record.createMode === '工单分派' ? ( <Tooltip placement="topLeft" title="工单模型的流程数量不能大于1"> {text} </Tooltip> ) : ( text )} </span> </> ), }, { title: '操作', key: 'action', align: 'center', width: 150, render: record => ( <Space size="middle"> <Tooltip title="编辑事件类型"> <EditTwoTone onClick={() => editEventType(record)} style={{ fontSize: '16px' }} /> </Tooltip> <Tooltip title="受理流程"> <ApartmentOutlined onClick={() => process1(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="辅助视图"> <DesktopOutlined onClick={() => auxiliaryView1(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="删除事件类型"> <Popconfirm placement="bottomRight" title={<p>即将删除事件类型表,是否确认删除?</p>} okText="确认" cancelText="取消" onConfirm={() => deleteEventType(record)} > <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> </Tooltip> </Space> ), }, ]; useEffect(() => { setTreeLoading(true); GetCM_Event_LoadEventTable().then(res => { setTreeLoading(false); if (res.code === 0) { console.log(res.data); setKeepIdValue(res.data); // setMaxLength(res.data.root.length + 1) let arr = formateArrDataA(res.data, 'businessType'); console.log(arr); let newArr = []; let newapp = []; let newabb = []; let aa = []; let zz = []; Object.keys(arr).map((item, index) => { newArr.push(item); }); console.log(arr); Object.values(arr).map((item, index) => { newapp.push(item); }); console.log(newapp); newapp.map((item, index) => { console.log(item); item.map((item1, index) => { newabb.push(item1.root); console.log(item1.root); }); }); console.log(newabb); newabb.map((item, index) => { console.log(item); aa.push(item); }); console.log(aa); aa.map((item, index) => { console.log(item); item.map((item1, index) => { console.log(item1); zz.push({ ...item1 }); }); }); console.log(zz); let arrr = formateArrDataA(zz, 'businessType'); console.log(arrr); setTableData(arrr); console.log(history.location.state); if (history.location.state) { console.log(history); console.log(history.location.state.rember); setPickItem(newArr[history.location.state.rember]); setRember(history.location.state.rember); setRember1(newArr[history.location.state.rember]); } else { setPickItem(newArr[rember]); setRember1(newArr[0]); } console.log(rember); console.log(newArr[rember]); console.log(newArr, 'newArr'); setTreeData(newArr); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }, [flag]); useEffect(() => { GetCM_Event_LoadEventTypeTable().then(res => { if (res.msg === 'Ok') { let arr = []; res.data.map((item, index) => { arr.push(item.text); }); setSelect(arr); } }); }, []); const formateArrDataA = (initialArr, name) => { console.log(initialArr); console.log(name); // 判定传参是否符合规则 if (!(initialArr instanceof Array)) { return '请传入正确格式的数组'; } if (!name) { return '请传入对象属性'; } // 先获取一下这个数组中有多少个"name" let nameArr = []; for (let i in initialArr) { if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) { nameArr.push(initialArr[i][`${name}`]); } } // 新建一个包含多个list的结果对象 let tempObj = {}; // 根据不同的"name"生成多个数组 for (let k in nameArr) { for (let j in initialArr) { if (initialArr[j][`${name}`] == nameArr[k]) { // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变 tempObj[nameArr[k]] = tempObj[nameArr[k]] || []; tempObj[nameArr[k]].push(initialArr[j]); } } } for (let keys in tempObj) { let arr = []; tempObj[keys].map((item, index) => { tempObj[keys] = arr; item.key = index; arr.push(item); }); } return tempObj; }; // 添加事件 const addIncident = () => { setAddvisible(true); setIsType('add'); }; // 修改事件类型 const editEventType = record => { setFormObj(record); setIsType('edit'); setAddvisible(true); }; // 删除事件类型 const deleteEventType = record => { CM_Event_RemoveEventTable(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 sort = () => { setSortVisible(true); console.log(tableData); console.log(pickItem); console.log(tableData[pickItem]); setSortData(tableData[pickItem]); }; const process1 = record => { history.push({ pathname: '/biz/workflow/eventFlow', state: { formObj: record, title1: record.name, rember }, }); }; const auxiliaryView1 = record => { history.push({ pathname: '/biz/workflow/eventView', state: { formObj: record, title2: record.name, rember }, }); }; const onSubmit = () => { setAddvisible(false); setFlag(flag + 1); }; const onOK = prop => { setSortVisible(false); let aa = prop.str.toString(); console.log(aa); CM_Event_ReOrder(aa).then(res => { if (res.msg === 'Ok') { notification.success({ message: '提示', duration: 3, description: '调整成功', }); setFlag(flag + 1); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; const editBusiness = () =>{ setEditBusinessVisible(true) addForm.setFieldsValue({newBusinessType:pickItem}) } const editOk = () =>{ let aa =addForm.getFieldsValue().newBusinessType; console.log(aa); CM_Event_EditBusinessType({ oldBusinessType:pickItem, newBusinessType:aa }).then(res=>{ if(res.code===0){ setEditBusinessVisible(false); setFlag(flag + 1); notification.success({ message: '提示', duration: 3, description: '编辑成功', }); }else{ notification.error({ message: '提示', duration: 3, description: res.msg||'编辑失败', }); } }).catch(err => { message.error(err); }); } return ( <div className={styles.incidentContainer}> <div className={styles.contentContainers}> {/* 左侧事件树 */} <Spin spinning={treeLoading} tip="loading..."> <Card className={classnames({ [styles.orgContainer]: true, [styles.orgContainerHide]: !treeVisible, })} > <div style={{ height: '100%', display: treeVisible ? 'block' : 'none' }}> <span style={{ fontSize: '15px ', fontWeight: 'bold', marginLeft: '14px', }} > 事件列表 </span> <Tooltip title="添加事件类型"> <PlusSquareFilled onClick={() => addIncident()} style={{ color: '#1890FF', fontSize: '25px', verticalAlign: 'middle', marginLeft: '51%', }} /> </Tooltip> <hr style={{ width: '100%', color: '#eeecec' }} /> <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll', }} > {treeData.length > 0 && treeData.map((item, index) => ( <div className={classnames({ [styles.listItem]: true, [styles.pickItem]: item === pickItem, [styles.listHover]: item !== pickItem && item === hoverItemIndex, })} onClick={e => { setPickItem(item); setRember(index); setRember1(item); }} onMouseEnter={() => { setHoverItemIndex(item); }} onMouseLeave={() => { setHoverItemIndex(''); }} key={index} > <div style={{ width: '130px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }} > <Tooltip placement="top" title={item}> {item} </Tooltip> </div> ({tableData[item] ? tableData[item].length : ''}) </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={classnames({ [styles.userContainer]: true, [styles.userContainerHide]: !treeVisible, })} > <div style={{ height: '50px' }}> <span className={styles.titleName}>【{pickItem}】</span> <span ><Tooltip title="编辑业务类型名称"><FormOutlined className={styles.iconSize} onClick={editBusiness}/></Tooltip></span> <span style={{ float: 'right', marginRight: '10px' }}> <Button icon={<OrderedListOutlined className={styles.icon} />} onClick={sort} style={{ marginLeft: '30px', verticalAlign: 'middle', marginTop: '10px', }} > 调序 </Button> </span> </div> <Table size="small" rowKey="ID" bordered onRow={record => ({ onDoubleClick: event => { event.stopPropagation(); editEventType(record); }, // 双击 })} columns={columns} dataSource={tableData[pickItem]} scroll={{ y: 'calc(100% - 50px)', x: 'max-content' }} pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, pageSizeOptions: [10, 20, 50, 100], defaultPageSize: 20, showQuickJumper: true, showSizeChanger: true, }} /> </div> {/* Modal弹框 */} {/* 添加事件 */} <AddModal visible={addVisible} type={isType} formObj={formObj} rember1={rember1} maxLength={maxLength} onClose={() => setAddvisible(false)} treeData={treeData} selectData={select} callBackSubmit={onSubmit} placement="right" /> <SortModal title="调整顺序" visible={sortVisible} sortData1={sortData} pickItem={pickItem} onCancel={() => setSortVisible(false)} callBackSubmit={onOK} keepIdValue={keepIdValue} /> <Modal title='编辑业务类型名称' visible={editBusinessVisible} onCancel={()=>setEditBusinessVisible(false)} onOk={()=>editOk()} > <Form form={addForm} labelCol={{ span: 3 }}> <Form.Item name="newBusinessType" label="名称" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入名称" style={{ width: '95%' }} allowClear/> </Form.Item> <Form.Item name="newBusinessType" label="名称" style={{ display: 'none' }}> <Input placeholder="请输入名称" style={{ width: '95%' }} /> </Form.Item> </Form> </Modal> </div> </div> ); }; export default incident;