ProjectManage.jsx 12.3 KB
Newer Older
1
import React, { useEffect, useState } from 'react'
2 3 4 5 6 7 8
import {
    // Tree,
    Table,
    Space,
    Input,
    Button,
    Select,
9
    Popconfirm,
10
    message,
shaoan123's avatar
shaoan123 committed
11 12
    Tooltip,
    Spin
13
} from 'antd';
shaoan123's avatar
shaoan123 committed
14
import { PlusCircleOutlined, EditTwoTone, DeleteOutlined, FundViewOutlined, FieldTimeOutlined } from '@ant-design/icons';
15
import { useHistory } from 'react-router-dom';
16 17 18
const { Search } = Input;
const { Option } = Select;
import EditModal from './components/EditModal'
19
import VisibleRoleModal from './components/RolseSelect/VisibleRoleModal'
20
import { GetMessageConfigList, TestPush, DeleteMessageConfig, GetMsgTypeList, DeleteIISAgentConfig } from '@/services/platform/messagemanage'
21 22
import styles from './ProjectManage.less'
const ProjectManage = () => {
23
    const history = useHistory();
24
    const [visibleParams, setvisibleParams] = useState({
25
        addVisible: false, // 新增弹窗
26 27 28 29 30 31 32
        delVisible: false, // 删除弹窗
        editVisible: false, // 修改弹窗
        spinLoading: false, // 加载弹窗
        btnLoading: false,
        loading: false,
        checkBoxLoading: false,
    });
33 34 35
    const [currentType, setCurrentType] = useState("全部")
    const [currentName, setCurrentName] = useState("全部")
    const [messageTypes, setMessageTypes] = useState([])
36
    const [currentTemplate, setCurrentTempalte] = useState({});
37
    const [flag, setFlag] = useState(0)
38 39 40
    const [pageIndex, setPageIndex] = useState(0)
    const [pageSize, setPageSize] = useState(10)
    const [dataList, setDataList] = useState([])
shaoan123's avatar
shaoan123 committed
41
    const [treeLoading, setTreeLoading] = useState(false);
42 43 44 45 46
    const columns = [
        {
            title: '方案名称',
            dataIndex: 'name',
            key: 'name',
shaoan123's avatar
shaoan123 committed
47 48 49 50 51 52 53 54 55 56
            render: (text, record) => (
                <div>{record.type == '定时推送' ? text : <div style={{display:'flex',alignItems:'center'}}>
                    <Tooltip title={text} >
                        <FieldTimeOutlined
                            style={{ fontSize: '16px',color: '#1890FF' ,marginRight:'0.1rem'}}
                        />
                    </Tooltip>
                    {text}
                </div>}</div>
            )
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
        },
        {
            title: '方案类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '推送方式',
            dataIndex: 'send_pattern',
            key: 'send_pattern',
        },
        {
            title: '推送组',
            dataIndex: 'receive_person',
            key: 'receive_person',
        },
        {
            title: '是否启用',
            dataIndex: 'is_use',
            key: 'is_use',
77 78 79
            render: (text, record) => (
                <div>{text === "0" ? "否" : "是"}</div>
            )
80 81 82 83 84 85 86
        },
        {
            title: '操作',
            width: 250,
            ellipsis: true,
            render: (text, record) => (
                <Space>
87
                    <Tooltip title="测试">
shaoan123's avatar
shaoan123 committed
88
                        <FundViewOutlined style={{ fontSize: '16px', color: '#1890FF' }} onClick={() => {
89
                            TestDesc(record);
90 91 92 93
                        }} />
                    </Tooltip>
                    <Tooltip title="编辑">
                        <EditTwoTone style={{ fontSize: '16px', color: '#e86060' }} onClick={() => {
94
                            changeDesc(record);
95 96
                        }}></EditTwoTone>
                    </Tooltip>
97

98
                    {
99 100 101
                        record.name != "通用报警"
                        && record.name != "工单提醒"
                        && record.name != "系统通知"
102 103 104 105 106 107 108 109 110
                        && (<div onClick={e => e.stopPropagation()}>
                            <Popconfirm
                                title="是否删除方案?"
                                okText="确认"
                                cancelText="取消"
                                onConfirm={() => {
                                    DeleteProject(record)
                                }}
                            >
111

shaoan123's avatar
shaoan123 committed
112
                                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }}></DeleteOutlined>
113 114 115
                            </Popconfirm>
                        </div>)
                    }
116 117 118 119 120 121
                </Space>
            ),
        },

    ];
    const placeholder = '请输入方案名称'
122 123
    const handleSearch = (value) => {
        GetMessageList({ pageSize: 10, pageIndex: 0, search: value })
124 125 126
    }
    const changeDesc = (record) => {
        setCurrentTempalte(record)
127 128
        history.push({ pathname: `/platformCenter/schemeDetail`, state: { template: record } })
        // handleShowModal("editVisible", true)
129 130
    }
    const TestDesc = (record) => {
131 132 133 134 135 136 137 138 139 140 141 142 143 144
        if (record.ThemeName)
            TestPush({
                theme: record.ThemeName,
                msgType: record.MsgType,
                tousers: record.PushGroup,
                pushPath: record.item.AgentConfig ? record.item.AgentConfig.Url : '',
                msgTypeId: record.ID
            }).then(
                res => {
                    if (res.code === 0) {
                        message.success("测试推送成功")
                    } else {
                        message.error(res.msg)
                    }
145
                }
146
            )
147
    }
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
    const DeleteProject = (record) => {
        let agen = record.item.AgentConfig
        let config = record.item.MessageConfig
        if (agen) {
            DeleteIISAgentConfig({
                agentName: config.MsgType
            }).then(
                res => {
                    if (res === 0) {
                        DeleteMessageConfig({
                            id: config.ID
                        }).then(
                            res3 => {
                                if (res3.code === 0) {
                                    message.success("删除方案成功")
163
                                    setFlag(flag + 1)
164 165 166 167
                                }
                            }
                        )
                    }
shaoan123's avatar
shaoan123 committed
168
                    else {
169 170
                        message.error(res.msg)
                    }
171 172
                }
            )
173
        } else {
174
            DeleteMessageConfig({
175
                id: config.ID
176
            }).then(
177 178
                res3 => {
                    if (res3.code === 0) {
179
                        message.success("删除方案成功")
180
                        setFlag(flag + 1)
181 182 183 184 185 186 187 188 189 190 191
                    }
                }
            )
        }

    }
    const handleReset = () => {
        setCurrentType("全部")
        setCurrentName("全部")
        GetMessageList({ pageSize: 10, pageIndex: 0 })
    }
192 193 194 195 196
    // 弹出模态框
    const handleShowModal = (key, value) => {
        setvisibleParams({ ...visibleParams, [key]: value });
    };
    const editModal = () => {
197

198
        handleShowModal("editVisbile", false)
199 200 201
        setFlag(flag + 1)
    }
    const bddModal = () => {
202
        handleShowModal("addVisbile", false)
203 204 205 206
        setFlag(flag + 1)
    }
    const onAddClick = () => {
        setCurrentTempalte({})
207 208
        // handleShowModal("addVisible", true)
        history.push({ pathname: `/platformCenter/schemeDetail`, state: { template: {} } })
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226
    }
    const onTypeChange = (value) => {
        if (value == "全部") {
            setCurrentType("")
            GetMessageList({ pageIndex: pageIndex, pageSize: 10 })
        } else {
            GetMessageList({ pageIndex: pageIndex, pageSize: 10, infoType: value, msgType: currentName == "全部" ? "" : currentName })
            setCurrentType(value)
        }
    }
    const onNameChange = (value) => {
        if (value == "全部") {
            setCurrentName("")
            GetMessageList({ pageIndex: pageIndex, pageSize: 10 })
        } else {
            GetMessageList({ pageIndex: pageIndex, pageSize: 10, msgType: value, infoType: currentType == "全部" ? "" : currentType })
            setCurrentName(value)
        }
227 228
    }

229
    useEffect(() => {
shaoan123's avatar
shaoan123 committed
230
        setTreeLoading(true)
231 232
        GetMsgTypeList().then(
            res => {
shaoan123's avatar
shaoan123 committed
233
                setTreeLoading(false)
234 235 236 237 238 239 240 241 242 243 244
                if (res.code === 0) {
                    setMessageTypes(res.data)
                }
            }
        )
    }, [])
    useEffect(() => {
        GetMessageList({ pageIndex: pageIndex, pageSize: 10 })
    }, [flag])

    const GetMessageList = (params) => {
shaoan123's avatar
shaoan123 committed
245
        setTreeLoading(true)
246
        GetMessageConfigList(params).then(
247
            res => {
shaoan123's avatar
shaoan123 committed
248
                setTreeLoading(false)
249
                let mesList = []
250 251
                if (res.code === 0) {
                    res.data.MessageConfigModels.map((item) => {
252
                        mesList.push({
253 254 255 256 257 258 259
                            name: item.MessageConfig.MsgType,
                            type: item.MessageConfig.ThemeName,
                            send_pattern: item.MessageConfig.PushMode,
                            receive_person: item.MessageConfig.PushGroup,
                            is_use: item.MessageConfig.IsStarted,
                            ...item.MessageConfig,
                            item: item
260 261
                        })
                    })
shaoan123's avatar
shaoan123 committed
262

263 264 265 266
                    setDataList(mesList)
                }
            }
        )
267
    }
268 269
    return (
        <div className={styles.project_container}>
shaoan123's avatar
shaoan123 committed
270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306
            <Spin tip="loading..." spinning={treeLoading}>
                <div className={styles.operate_bar}>
                    <div className={styles.template_type}>
                        <div className={styles.title}>方案类型</div>
                        <Select placeholder="请选择方案类型!" defaultValue={currentType} style={{ width: "150px" }} onChange={onTypeChange}>
                            <Option value="全部">全部</Option>
                            <Option value="监控报警">监控报警</Option>
                            <Option value="工单办理">工单办理</Option>
                            <Option value="平台公告">平台公告</Option>
                            <Option value="定时推送">定时推送</Option>
                        </Select>
                    </div>
                    <div className={styles.template_type}>
                        <div className={styles.title}>方案名称</div>
                        <Select placeholder="请选择方案名称!" defaultValue={currentName} style={{ width: "150px" }} onChange={onNameChange}>
                            <Option value="全部">全部</Option>
                            {
                                messageTypes.map((item, idx) => {
                                    return (
                                        <Option key={idx} value={item.MsgType}>{item.MsgType}</Option>
                                    )
                                })
                            }
                        </Select>
                    </div>
                    <div className={styles.fast_search}>
                        <div className={styles.title}>快速检索</div>
                        <Search
                            allowClear
                            placeholder={placeholder}
                            onSearch={handleSearch}
                            // onChange={handleChange}
                            enterButton
                            style={{ width: "300px" }}
                        />
                    </div>
                    <Button type="primary" onClick={handleReset}>重置</Button>
shaoan123's avatar
shaoan123 committed
307
                    <Button type="primary" style={{ marginLeft: "10px" }} icon={<PlusCircleOutlined />} onClick={onAddClick}><span style={{ marginTop: "-3px" }}>新增</span></Button>
308

shaoan123's avatar
shaoan123 committed
309 310
                </div>
                <div className={styles.list_view}>
shaoan123's avatar
shaoan123 committed
311
                    <Table bordered columns={columns} dataSource={dataList} pagination={{ pageSize: '10' }} rowKey='ID' />
shaoan123's avatar
shaoan123 committed
312 313 314 315 316 317 318 319 320 321 322 323 324 325
                </div>
                <EditModal
                    visible={visibleParams.editVisible}
                    template={currentTemplate}
                    onCancel={() => handleShowModal('editVisible', false)}
                    confirmModal={editModal}
                />
                <EditModal
                    visible={visibleParams.addVisible}
                    template={{}}
                    onCancel={() => handleShowModal('addVisible', false)}
                    confirmModal={bddModal}
                />
            </Spin>
326 327 328 329
        </div>
    )
}
export default ProjectManage;