/* 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, Tag, Upload, } from 'antd'; import { DoubleLeftOutlined, DoubleRightOutlined, PlusSquareFilled, RightOutlined, EditTwoTone, DeleteOutlined, OrderedListOutlined, ApartmentOutlined, DesktopOutlined, FormOutlined, ImportOutlined, ExportOutlined, } from '@ant-design/icons'; import { GetCM_Event_LoadEventTable, CM_Event_RemoveEventTable, CM_Event_ReOrder, GetCM_Event_LoadEventTypeTable, CM_Event_EditBusinessType, CheckImportEventConfig, ImportEventConfig, ExportEventConfig, } 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 { Search } = Input; 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 [searchValue, setSearchValue] = useState(''); const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式 const [addForm] = Form.useForm(); const [file, setFile] = useState(); // 上传文件信息 const columns = [ { title: '事件类型', dataIndex: 'name', key: 'name', width: 150, render: (text,record) => ( <Tooltip placement="topLeft" title={text}> {searchStyle(text)} </Tooltip> ), }, { title: '事件主表', dataIndex: 'tableName', key: 'tableName', width: 200, render: record => ( <Tooltip placement="topLeft" title={record}> {searchStyle(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}> <span style={{color:record == '(无)'?'grey':'black'}}>{record}</span> </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, // align: 'center', // render: record => { // if (record == '是') { // return <Tag color="success">{record}</Tag>; // } else { // return <Tag color="processing">{record}</Tag>; // } // }, // }, // { // 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' : 'grey', backgroundColor: Number(text) > 0 ? 'yellow' : '', }} > {text == 0 ? '(无)' : text} </span> ), }, { title: '上报方式', dataIndex: 'reportable', key: 'reportable', width: 80, render: item => { if (item === '均可') { return <span><Tag color="processing">前端</Tag><Tag color="processing">手持</Tag></span>; } if (item === ''||item==='否') { return <Tag color="warning">内置</Tag>; }if (item==='是') { return <span style={{color: 'grey'}}>(无)</span>; } return <span><Tag color="processing">{item}</Tag></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="导出事件"> <ExportOutlined onClick={() => hadelExport(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({ filter: searchValue }).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'); if(!newArr[rember]){ setRember(0) setPickItem(newArr[0]); setRember1(newArr[0]) } 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 beforeUpload = val => { setFile(val); const formData = new FormData(); formData.append('_files', val); CheckImportEventConfig(formData).then(res => { if (res.code === 0) { Modal.confirm({ title: '提示', icon: '', content: <div style={{ whiteSpace: 'pre-wrap' }}>{res.data}</div>, onOk() { console.log('OK'); ImportEventConfig(formData).then(response => { if (response.code === 0) { setFlag(flag + 1); message.success('导入成功'); } else { message.error(response.msg); } }); }, okText: '确认导入', cancelText: '我再想想', }); } else { message.error(res.msg); } }); return false; }; // 导出 const hadelExport = record => { window.location.href = ExportEventConfig({ eventTypeId: record.ID, }); }; 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); }); }; // 搜索 const handleSearch = text => { setFlag(flag + 1); setShowSearchStyle(true); }; // 搜索框改变时存储输入的值 const handleChange = e => { setSearchValue(e.target.value); }; // 模糊查询匹配的样式 const searchStyle = val => { let n; if (showSearchStyle) { n = val.replace( new RegExp(searchValue, 'g'), `<span style='color:red'>${searchValue}</span>`, ); } else { n = val; } return <div dangerouslySetInnerHTML={{ __html: n }} />; }; 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', }} > 事件列表 </span> <Tooltip title="添加事件类型"> <PlusSquareFilled onClick={() => addIncident()} style={{ color: '#1890FF', fontSize: '25px', marginLeft: '123px', }} /> </Tooltip> <hr style={{ width: '97%', color: '#eeecec', marginLeft: '0px' }} /> <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', lineHeight: '50px' }}> {pickItem?<span><span className={styles.titleName}>【{pickItem}】</span> <span> <Tooltip title="编辑业务类型名称"> <FormOutlined className={styles.iconSize} onClick={editBusiness} /> </Tooltip> </span></span>:null} <span> <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span> <Search allowClear placeholder='请输入事件类型或事件主表' onSearch={handleSearch} onChange={handleChange} value={searchValue} enterButton style={{ width: '300px',marginTop: '10px' }} /> </span> <span className={styles.buttonList}> <Upload showUploadList={false} accept=".json" beforeUpload={beforeUpload}> <Button style={{ marginLeft: '10px' }} type="primary" ghost> <div style={{ display: 'flex', alignItems: 'center' }}> <ImportOutlined style={{ marginRight: '5px' }} /> <div>导入</div> </div> </Button> </Upload> <Button icon={<OrderedListOutlined className={styles.icon} />} onClick={sort} style={{ marginLeft: '10px', verticalAlign: 'middle', }} > 调序 </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;