schemeDetail.jsx 22.5 KB
Newer Older
1 2
import React, { useState, useEffect, useRef } from 'react'
import SiteModal from '@/components/Modal/SiteModa';
3
import { Form, Input, notification, Select, Checkbox, message, Button, Card, Switch as Switchs } from 'antd'
4 5 6 7 8
import BaseForm from '@/components/BaseForm/index';
import { Switch } from 'react-router';
import { iteratee } from 'lodash';
import styles from './schemeDetail.less';
import v from 'voca';
9 10

import { UsergroupDeleteOutlined } from '@ant-design/icons';
11 12 13 14 15
import VisibleRoleModal from '../messageManage/projectManage/components/RolseSelect/VisibleRoleModal'
import VisibleIISAgentConfig from '../messageManage/projectManage/components/IISAgentConfig/VisibleIISAgentConfig'
import { GetMessageTemplate } from '@/services/platform/messagemanage'
import moment from 'moment'
import { UpdateMessageConfig, InsertMessageConfig, AddIISAgentConfig } from '@/services/platform/messagemanage'
16
import { useHistory } from 'react-router-dom';
17
const { Item } = Form;
18
const { TextArea } = Input;
19 20
const EditModal = props => {

21
    const history = useHistory();
22 23
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
24
    const [plan, setPlan] = useState('');
25 26
    const [isStart, setIsStart] = useState(false);
    const [IISConfig, setIISConfig] = useState(null)
27 28
    const [isUse, setIsUse] = useState("0")
    const [btnType, setBtnType] = useState("定时推送")
29 30 31 32 33 34 35 36 37 38 39
    const { template, confirmModal } = props.location.state
    const [currentTrench, setCurrentTrench] = useState({
        isMessageShow: false,
        isAPPShow: false,
        isWEBShow: false,
        isWXShow: false
    })
    const [APP_ITEMS, setAPP_ITEMS] = useState([])
    const [WEB_ITEMS, setWEB_ITEMS] = useState([])
    const [WX_ITEMS, setWX_ITEMS] = useState([])
    const [MES_ITEMS, setMES_ITEMS] = useState([])
40
    const [listType, setListType] = useState([{ title: '定时推送', desc: '用于周期性简报的定时推送,如智能巡检、运行周报。' }, { title: '监控报警', desc: '设备硬件故障,阈值超限,状态突变,采集超时等异常情况报警。' }, { title: '工单办理', desc: '在工单系统中,针对特定人员的通知,包括工作办理、审核、会签、回退等操作。' }, { title: '平台公告', desc: '由运维人员向所有用户或特定用户发送的事务公告,如系统升级、维护。' }])
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

    useEffect(() => {
        GetMessageTemplate().then(
            res => {
                if (res.code === 0) {
                    let arr1 = []
                    let arr2 = []
                    let arr3 = []
                    let arr4 = []
                    res.data.map((item, index) => {
                        if (item.Type === "公众号") {
                            arr1.push(item)
                        }
                        if (item.Type === "短信") {
                            arr2.push(item)
                        }
                        if (item.Type === "APP") {
                            arr3.push(item)
                        }
                        if (item.Type === "WEB") {
                            arr4.push(item)
                        }
                    })
                    setAPP_ITEMS(arr3)
                    setMES_ITEMS(arr2)
                    setWX_ITEMS(arr1)
                    setWEB_ITEMS(arr4)
                }
            }
        )
    }, [])
    useEffect(() => {
        if (template.ThemeName) {
74
            console.log('template',template);
75 76 77 78 79 80 81 82
            form.setFieldsValue({
                name: template.MsgType,
                isStart: template.IsStarted === "0" ? "关闭" : "开启",
                to_person: template.PushGroup,
                push_mode: template.PushMode === null ? '' : template.PushMode.split(","),

                app_template: template.AppTemplateID,
                app_path: template.AppFunctionPath,
83
                wx_template: template.PublicTemplateID ? parseInt(template.PublicTemplateID) : '',
84 85 86 87 88 89
                h5_path: template.PublicPath,
                miniprogram_path: template.MiniAppRoute,
                web_template: template.WebTemplateID,
                web_path: template.WebFunctionPath,
                message_template: template.MsgTemplateID,
            })
90 91 92
            setPlan(template.MsgType)
            setBtnType(template.type)
            setIsUse(template.IsStarted)
93 94 95
            setCurrentTrench({
                isAPPShow: template.PushMode && template.PushMode.split(",").indexOf("平台弹框") > -1 ? true : false,
                isWXShow: template.PushMode && template.PushMode.split(",").indexOf("公众号推送") > -1 ? true : false,
96 97
                isWEBShow: template.PushMode && template.PushMode.split(",").indexOf("平台弹框") > -1 ? true : false,
                isMessageShow: template.PushMode && template.PushMode.split(",").indexOf("短信推送") > -1 ? true : false,
98 99
            })
        }
100 101 102
        else {
            setBtnType('定时推送')
        }
103 104
    }, [props])
    const onNameChange = (e) => {
105
        setPlan(e.target.value)
106 107 108 109
    }

    const onSubmit = () => {
        let fv = form.getFieldValue()
110
        let push_mode = ((currentTrench.isAPPShow || currentTrench.isWEBShow) ? '平台弹框' : '') + (currentTrench.isWXShow ? ',公众号推送' : '') + (currentTrench.isMessageShow ? ',短信推送' : '')
111 112 113 114 115
        if (template.ThemeName) {
            let a = {
                ID: template.ID,
                ThemeName: template.ThemeName,
                MsgType: fv.name,
116
                PublicTemplateID: fv.wx_template.toString(),
117 118 119 120 121 122 123 124 125 126 127 128 129
                PublicConfig: template.PublicConfig,
                PublicPath: fv.h5_path,
                MsgTemplateName: template.MsgTemplateName,
                MsgTemplateCode: template.MsgTemplateCode,
                MsgConfig: template.MsgConfig,
                MiniAppRoute: fv.miniprogram_path,
                AppFunctionPath: fv.app_path,
                AppConfig: template.AppConfig,
                WebFunctionPath: fv.web_path,
                WebConfig: template.WebConfig,
                IsDelete: template.IsDelete,
                InputTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                Pusher: template.Pusher,
130
                PushMode: push_mode,
131
                PushPath: template.PushPath,
132
                IsStarted: isUse,
133 134 135
                MsgTemplateID: fv.message_template,
                AppTemplateID: fv.app_template,
                WebTemplateID: fv.web_template,
136
                PushGroup: fv.to_person ? fv.to_person.toString() : ''
137
            }
138

139 140 141 142 143 144 145 146
            UpdateMessageConfig(a).then(
                res => {
                    if (res.code === 0) {
                        if (IISConfig) {
                            AddIISAgentConfig(IISConfig).then(
                                res => {
                                    if (res.code === 0) {
                                        message.success("保存成功")
147

148 149 150 151 152 153
                                    } else {
                                        notification.error({
                                            message: '提示',
                                            duration: 3,
                                            description: res.msg,
                                        });
154 155 156 157 158 159
                                    }
                                }
                            )
                        } else {
                            message.success("保存成功")

160 161 162 163 164 165 166 167
                        }
                    }
                    else {
                        notification.error({
                            message: '提示',
                            duration: 3,
                            description: res.msg,
                        });
168 169 170 171 172 173 174 175
                    }
                }
            )

        } else {
            let b = {
                ThemeName: "定时推送",
                MsgType: fv.name,
176
                PublicTemplateID: fv.wx_template ? fv.wx_template.toString() : null,
177 178 179 180 181 182 183 184 185 186 187 188 189
                PublicConfig: template.PublicConfig,
                PublicPath: fv.h5_path,
                MsgTemplateName: template.MsgTemplateName,
                MsgTemplateCode: template.MsgTemplateCode,
                MsgConfig: template.MsgConfig,
                MiniAppRoute: fv.miniprogram_path,
                AppFunctionPath: fv.app_path,
                AppConfig: template.AppConfig,
                WebFunctionPath: fv.web_path,
                WebConfig: template.WebConfig,
                IsDelete: template.IsDelete,
                InputTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                Pusher: template.Pusher,
190
                PushMode: push_mode,
191
                PushPath: template.PushPath,
192
                IsStarted: isUse,
193 194 195
                MsgTemplateID: fv.message_template,
                AppTemplateID: fv.app_template,
                WebTemplateID: fv.web_template,
196
                PushGroup: fv.to_person ? fv.to_person.toString() : ''
197 198 199 200 201 202 203 204 205
            }
            InsertMessageConfig(b).then(
                res => {
                    if (res.code === 0) {
                        if (IISConfig) {
                            AddIISAgentConfig(IISConfig).then(
                                res => {
                                    if (res.code === 0) {
                                        message.success("保存成功")
206 207

                                    }
208
                                    else {
209 210 211 212 213
                                        notification.error({
                                            message: '提示',
                                            duration: 3,
                                            description: res.msg,
                                        });
214 215 216 217 218 219 220
                                    }
                                }
                            )
                        } else {
                            message.success("保存成功")
                        }
                    }
221 222 223 224 225 226 227
                    else {
                        notification.error({
                            message: '提示',
                            duration: 3,
                            description: res.msg,
                        });
                    }
228 229 230 231 232
                }
            )
        }

    }
233

234

235
    const onIISAgentSubmit = (value) => {
236
        console.log('value',value);
237 238 239 240 241 242 243
        setIISConfig(value)

    }

    const onPushSubmit = (value) => {
        console.log(value, "onPushSubmit")
    }
244 245 246 247 248 249 250 251 252
    const layout = {
        layout: 'horizontal',
        labelCol: {
            span: 2,
        },
        wrapperCol: {
            span: 24,
        },
    };
253
    const onChange = (value) => {
254
        setIsUse(value ? '1' : '0')
255 256 257 258 259 260 261
    }
    const back = () => {
        history.push('/platformCenter/notify')
    }
    const tailLayout = {
        wrapperCol: { offset: 21, span: 24 },
    };
262 263 264 265
    const onTypeChange = (value, type) => {
        let data = { ...currentTrench }
        data[type] = value
        setCurrentTrench(data)
266
    }
267
    return (
268 269

        <div className={styles.editModal_container}>
270
            <Form form={form}  {...layout} onFinish={onSubmit}>
271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290
                <div className={styles.content}>
                    <Card title="方案" style={{ width: '100%' }}>
                        <Item
                            label="方案名称"
                            name="name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入方案名称',
                                },
                            ]}
                        >
                            <Input style={{ width: '25rem' }} placeholder="请输入方案名称" disabled={template.ThemeName ? true : false} onChange={onNameChange} />
                        </Item>
                        <Item
                            label="方案类型"

                        >
                            <div className={styles.cardList}>
                                {listType.map(item => {
291
                                    return <div key={item.title} className={styles.cardListItem}><Button type={item.title === btnType ? 'primary' : 'default'} style={{ cursor: 'not-allowed', marginRight: '1rem' }} >{item.title}</Button> <span>{item.desc}</span></div>
292 293 294 295 296 297
                                })}

                            </div>
                        </Item>

                    </Card>
298 299 300 301 302
                    {btnType === '定时推送' && (<Card title="推送信息" style={{ width: '100%', marginTop: '1rem' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Item
                                label="推送组"
                                name="to_person"
303
                                labelCol={{ span: 3 }}
304 305
                                style={{ paddingTop: '1.6rem', width: '35rem' }}
                            >
306
                                <VisibleRoleModal
307
                                    style={{ display: 'flex', width: '35rem', alignItems: 'center' }}
308
                                    onSubmit={onPushSubmit}
309 310 311 312 313 314
                                    selectValue={template && template.PushGroup ? template.PushGroup : []}
                                    title={<UsergroupDeleteOutlined style={{ fontSize: '18px' }} />} />
                            </Item>

                            <div style={{ display: 'flex', width: '30rem', margin: '0 2rem', alignItems: 'center' }}>
                                推送计划: <VisibleIISAgentConfig agentConfig={template.item && template.item.AgentConfig} value={plan} onIISAgentSubmit={onIISAgentSubmit} />
315 316
                            </div>
                            <span>
317
                                是否启用:<Switchs checked={isUse === '0' ? false : true} onChange={onChange} />
318 319 320
                            </span>
                        </div>

321
                    </Card>)}
322 323
                    <div className={styles.push_trench}>
                        {
324 325 326 327

                            <div className={styles.trench_card}>
                                <div className={styles.card_title}>
                                    <div className={styles.lable}>APP</div>
328
                                    <Switchs onChange={e => onTypeChange(e, 'isAPPShow')} checked={currentTrench.isAPPShow} />
329
                                </div>
330 331 332
                                <div className={styles.card_body}>
                                    <Item
                                        label="模板"
333
                                        labelAlign='left'
334
                                        name="app_template"
335
                                        labelCol={{ span: 2 }}
336
                                    >
337
                                        <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow} >
338 339 340 341 342 343 344 345 346 347 348 349
                                            {
                                                APP_ITEMS.map((item, idx) => {
                                                    return (
                                                        <Select.Option value={item.Id} key={idx}>{item.LikeName}</Select.Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    </Item>
                                    <Item
                                        label="功能路径"
                                        name="app_path"
350 351
                                        labelAlign='left'
                                        labelCol={{ span: 2 }}
352
                                    >
353
                                        <TextArea rows={4} style={{ width: '97%' }} disabled={!currentTrench.isAPPShow} placeholder="请输入功能路径" />
354 355 356 357
                                    </Item>
                                </div>
                            </div>

358 359
                        }
                        {
360 361 362 363

                            <div className={styles.trench_card}>
                                <div className={styles.card_title}>
                                    <div className={styles.lable}>微信</div>
364
                                    <Switchs onChange={e => onTypeChange(e, 'isWXShow')} checked={currentTrench.isWXShow} />
365
                                </div>
366 367 368 369
                                <div className={styles.card_body}>
                                    <Item
                                        label="模板"
                                        name="wx_template"
370 371
                                        labelAlign='left'
                                        labelCol={{ span: 3 }}
372
                                    >
373
                                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow} >
374 375 376 377 378 379 380 381 382 383 384 385
                                            {
                                                WX_ITEMS.map((item, idx) => {
                                                    return (
                                                        <Select.Option value={item.Id} key={idx}>{item.LikeName}</Select.Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    </Item>
                                    <Item
                                        label="H5路由"
                                        name="h5_path"
386 387
                                        labelAlign='left'
                                        labelCol={{ span: 3 }}
388
                                    >
389
                                        <Input style={{ width: '97%' }} disabled={!currentTrench.isWXShow} placeholder="请输入功能路径" />
390 391 392 393
                                    </Item>
                                    <Item
                                        label="小程序路由"
                                        name="miniprogram_path"
394 395
                                        labelAlign='left'
                                        labelCol={{ span: 3 }}
396
                                    >
397
                                        <Input style={{ width: '97%' }} disabled={!currentTrench.isWXShow} placeholder="请输入功能路径" />
398 399 400 401
                                    </Item>
                                </div>
                            </div>

402 403
                        }
                        {
404 405 406 407

                            <div className={styles.trench_card}>
                                <div className={styles.card_title}>
                                    <div className={styles.lable}>WEB</div>
408
                                    <Switchs onChange={e => onTypeChange(e, 'isWEBShow')} checked={currentTrench.isWEBShow} />
409
                                </div>
410 411 412 413
                                <div className={styles.card_body}>
                                    <Item
                                        label="模板"
                                        name="web_template"
414 415
                                        labelCol={{ span: 2 }}
                                        labelAlign='left'
416
                                    >
417
                                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}>
418 419 420 421 422 423 424 425 426 427 428 429
                                            {
                                                WEB_ITEMS.map((item, idx) => {
                                                    return (
                                                        <Select.Option value={item.Id} key={idx}>{item.LikeName}</Select.Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    </Item>
                                    <Item
                                        label="功能路径"
                                        name="web_path"
430 431
                                        labelAlign='left'
                                        labelCol={{ span: 2 }}
432
                                    >
433
                                        <TextArea rows={4} style={{ width: '97%' }} disabled={!currentTrench.isWEBShow} placeholder="请输入功能路径" />
434 435 436 437
                                    </Item>
                                </div>
                            </div>

438 439 440
                        }

                        {
441 442 443 444

                            <div className={styles.trench_card}>
                                <div className={styles.card_title}>
                                    <div className={styles.lable}>短信推送</div>
445
                                    <Switchs onChange={e => onTypeChange(e, 'isMessageShow')} checked={currentTrench.isMessageShow} />
446
                                </div>
447 448 449
                                <div className={styles.card_body}>
                                    <Item
                                        label="模板"
450
                                        labelAlign='left'
451
                                        name="message_template"
452
                                        labelCol={{ span: 2 }}
453
                                    >
454
                                        <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow} >
455 456 457 458 459 460 461 462 463 464 465 466
                                            {
                                                MES_ITEMS.map((item, idx) => {
                                                    return (
                                                        <Select.Option value={item.Id} key={idx}>{item.LikeName}</Select.Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    </Item>
                                </div>
                            </div>

467 468
                        }
                    </div>
469 470 471 472 473 474 475 476 477 478 479 480

                </div>
                <Item  {...tailLayout} style={{ marginTop: '1rem' }}>
                    <Button htmlType="button" onClick={back} style={{ marginRight: '2rem' }}>
                        返回
                    </Button>
                    <Button type="primary" htmlType="submit">
                        确定
                    </Button>
                </Item>
            </Form>
            <div>
481
            </div>
482
        </div>
483 484 485
    )
}
export default EditModal;