import React, { useEffect, useState } from 'react'; import { Form, Modal, Table, Input, Select, Tooltip, Button, notification, Spin, Image, Menu, Dropdown, Space, Popconfirm } from 'antd'; import { CM_Event_ReloadEventExtendPages, CM_Event_RemoveEventExtendPage } from '@/services/standingBook/api'; import { PlusSquareFilled, EditTwoTone, DeleteOutlined, PlusSquareOutlined, RollbackOutlined } from '@ant-design/icons'; import AddViewModal from './AddViewModal' import { useHistory } from 'react-router-dom'; import { set } from 'immutable'; import styles from './incident.less'; const incidentView = props => { const history = useHistory(); const [tableData, setTableData] = useState([]) const [addViewVisible, setAddViewVisible] = useState(false) const [treeLoading, setTreeLoading] = useState(false) const [flag,setFlag] = useState(0) const [obj,setObj] = useState('') const [type,setType] = useState('') const columns = [ { title: () => (<span style={{fontWeight:'bold'}}>视图标签</span>), dataIndex: 'WebLabel', key: 'WebLabel', width: 150, ellipsis: true, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ) } , { title: () => (<span style={{fontWeight:'bold'}}>视图模块</span>), dataIndex: 'WebPage', key: 'WebPage', width: 150, ellipsis: true, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ) }, { title: () => (<span style={{fontWeight:'bold'}}>视图参数</span>), dataIndex: 'WebParam', key: 'WebParam', width: 150, ellipsis: true, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ) }, , { title: () => (<span style={{fontWeight:'bold'}}>手持视图标签</span>), dataIndex: 'MobileLabel', key: 'MobileLabel', width: 150, ellipsis: true, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ) }, { title: () => (<span style={{fontWeight:'bold'}}>手持视图模块</span>), dataIndex: 'MobilePage', key: 'MobilePage', width: 150, ellipsis: true, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ) }, , { title: () => (<span style={{fontWeight:'bold'}}>手持视图参数</span>), dataIndex: 'MobileParam', key: 'MobileParam', width: 150, ellipsis: true, render: item => ( <div ref={r => { if (r) { r.innerHTML = item; } }} /> ) }, { title: () => (<span style={{fontWeight:'bold'}}>操作</span>), key: 'action', aligin: 'center', width: 50, render: record => ( <Space size="middle"> <Tooltip title="编辑用户"> <EditTwoTone onClick={() => editView(record)} style={{ fontSize: '16px' }} /> </Tooltip> <Tooltip title="删除"> <Popconfirm placement="bottomRight" title={ <p> 即将删除事件处理流程,是否确认删除? </p> } okText="确认" cancelText="取消" onConfirm={() => deleteView(record)} > <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> </Tooltip> </Space> ) } ] useEffect(()=>{ setTreeLoading(true); CM_Event_ReloadEventExtendPages({eventName:props.location.state.formObj.name}).then(res=>{ setTreeLoading(false); if (res.msg === 'Ok'||res.msg==='') { console.log(res.data) setTableData(res.data) } }) },[flag]) const onSumbit =()=>{ callBackSubmit() } const addView=()=>{ setType('add') setAddViewVisible(true) } const editView = record =>{ setType('edit') setAddViewVisible(true) setObj(record.ID) } const deleteView= record =>{ console.log(record) CM_Event_RemoveEventExtendPage({eventExtendId: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 okk =()=>{ setAddViewVisible(false) setFlag(flag+1) } const back = () => { let rember = props.location.state.rember; history.push({ pathname: '/bsmanger/workOrder/incident', state: { rember }, }); }; return( <> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.containerBox}> <div className={styles.config}> <div className={styles.title}>{`${props.location.state.title2}受理流程和权限`}</div> <div className={styles.btn}> <Button type="primary" icon={<PlusSquareOutlined />} onClick={() => addView()} > 新增 </Button> <Button type="primary" icon={<RollbackOutlined />} onClick={()=>back()}> 返回 </Button> </div> </div> <Table size="small" rowKey='ID' bordered onRow={record => { return { onDoubleClick: event => {event.stopPropagation(); editView(record)}, //双击 }; }} columns={columns} style={{overflowY: 'scroll'}} dataSource={tableData} pagination={false} scroll={{ x: 'max-content'}} /> </div> </Spin> <AddViewModal visible={addViewVisible} title="事件辅助视图配置" onClose={()=>setAddViewVisible(false)} title2={props.location.state.title2} callBackSubmit={okk} obj={obj} type={type} placement="right" /> </> ) } export default incidentView;