import React, { useEffect, useState } from 'react'; import { Form, Modal, Table, Input, Select, Tooltip, Button, notification, Image, Menu, Dropdown, Space, Popconfirm } from 'antd'; import { CM_Event_ReloadEventExtendPages, CM_Event_RemoveEventExtendPage } from '@/services/standingBook/api'; import { PlusSquareFilled, EditTwoTone, DeleteOutlined, } from '@ant-design/icons'; import AddViewModal from './AddViewModal' import { set } from 'immutable'; const ViewModal = props => { const { callBackSubmit = () => { }, visible, onCancel, formObj, title2} = props; const [tableData, setTableData] = useState([]) const [addViewVisible, setAddViewVisible] = 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(()=>{ console.log(formObj) CM_Event_ReloadEventExtendPages({eventName:formObj.name}).then(res=>{ if (res.msg === 'Ok'||res.msg==='') { console.log(res.data) setTableData(res.data) } }) },[visible,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) } return( <Modal title={`${title2}的辅助视图`} visible={visible} onCancel={onCancel} width="1200px" onOk={onSumbit} > <Tooltip title="添加"> <PlusSquareFilled onClick={() => addView()} style={{ color: '#1890FF', fontSize: '25px', verticalAlign: 'middle', marginLeft: '25px', marginBottom: '10px' }} /> </Tooltip> <Table size="small" rowKey='ID' bordered onRow={record => { return { onDoubleClick: event => {event.stopPropagation(); editView(record)}, //双击 }; }} columns={columns} style={{ height: '15rem', overflowY: 'scroll', marginLeft: '25px', marginRight: '25px' }} dataSource={tableData} pagination={false} scroll={{ x: 'max-content'}} /> <AddViewModal visible={addViewVisible} title="事件辅助视图配置" onClose={()=>setAddViewVisible(false)} title2={title2} callBackSubmit={okk} obj={obj} type={type} placement="right" /> </Modal> ) } export default ViewModal;