ViewModal.jsx 7.63 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
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 = [
        {
皮倩雯's avatar
皮倩雯 committed
21
            title: () => (<span style={{fontWeight:'bold'}}>视图标签</span>),
皮倩雯's avatar
皮倩雯 committed
22 23 24
            dataIndex: 'WebLabel',
            key: 'WebLabel',
            width: 150,
皮倩雯's avatar
皮倩雯 committed
25
            ellipsis: true,
皮倩雯's avatar
皮倩雯 committed
26 27 28 29 30 31 32 33 34 35 36 37
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        }
        ,
        {
皮倩雯's avatar
皮倩雯 committed
38
            title: () => (<span style={{fontWeight:'bold'}}>视图模块</span>),
皮倩雯's avatar
皮倩雯 committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
            dataIndex: 'WebPage',
            key: 'WebPage',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        {
皮倩雯's avatar
皮倩雯 committed
54
            title: () => (<span style={{fontWeight:'bold'}}>视图参数</span>),
皮倩雯's avatar
皮倩雯 committed
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
            dataIndex: 'WebParam',
            key: 'WebParam',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        ,
        {
皮倩雯's avatar
皮倩雯 committed
71
            title: () => (<span style={{fontWeight:'bold'}}>手持视图标签</span>),
皮倩雯's avatar
皮倩雯 committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
            dataIndex: 'MobileLabel',
            key: 'MobileLabel',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        {
皮倩雯's avatar
皮倩雯 committed
87
            title: () => (<span style={{fontWeight:'bold'}}>手持视图模块</span>),
皮倩雯's avatar
皮倩雯 committed
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
            dataIndex: 'MobilePage',
            key: 'MobilePage',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        ,
        {
皮倩雯's avatar
皮倩雯 committed
104
            title: () => (<span style={{fontWeight:'bold'}}>手持视图参数</span>),
皮倩雯's avatar
皮倩雯 committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
            dataIndex: 'MobileParam',
            key: 'MobileParam',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        {
皮倩雯's avatar
皮倩雯 committed
120
            title: () => (<span style={{fontWeight:'bold'}}>操作</span>),
皮倩雯's avatar
皮倩雯 committed
121 122
            key: 'action',
            aligin: 'center',
皮倩雯's avatar
皮倩雯 committed
123
            width: 50,
皮倩雯's avatar
皮倩雯 committed
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
            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 =()=>{
166
        callBackSubmit()
皮倩雯's avatar
皮倩雯 committed
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
    }

    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}
皮倩雯's avatar
皮倩雯 committed
208
           width="1200px"
皮倩雯's avatar
皮倩雯 committed
209 210 211 212 213 214 215 216 217
           onOk={onSumbit}
        >
           <Tooltip title="添加">
                <PlusSquareFilled
                    onClick={() => addView()}
                    style={{
                        color: '#1890FF',
                        fontSize: '25px',
                        verticalAlign: 'middle',
皮倩雯's avatar
皮倩雯 committed
218 219
                        marginLeft: '25px',
                        marginBottom: '10px'
皮倩雯's avatar
皮倩雯 committed
220 221 222 223 224 225 226 227 228 229 230 231 232
                    }}
                />
            </Tooltip>
            <Table
                size="small"
                rowKey='ID'
                bordered
                onRow={record => {
                    return {
                      onDoubleClick: event => {event.stopPropagation(); editView(record)}, //双击
                    };
                  }}
                columns={columns}
皮倩雯's avatar
皮倩雯 committed
233
                style={{ height: '15rem', overflowY: 'scroll', marginLeft: '25px', marginRight: '25px' }}
皮倩雯's avatar
皮倩雯 committed
234
                dataSource={tableData}
皮倩雯's avatar
皮倩雯 committed
235 236
                pagination={false}
                scroll={{ x: 'max-content'}}
皮倩雯's avatar
皮倩雯 committed
237 238 239 240
            />
            <AddViewModal
                visible={addViewVisible} 
                title="事件辅助视图配置"
皮倩雯's avatar
皮倩雯 committed
241
                onClose={()=>setAddViewVisible(false)}
皮倩雯's avatar
皮倩雯 committed
242 243 244 245
                title2={title2}
                callBackSubmit={okk}
                obj={obj}
                type={type}
皮倩雯's avatar
皮倩雯 committed
246
                placement="right"
皮倩雯's avatar
皮倩雯 committed
247 248 249 250 251
            />
        </Modal>
    )
}
export default ViewModal;