schemeDetail.jsx 43.2 KB
Newer Older
1 2
/* eslint-disable radix */
/* eslint-disable camelcase */
3
import React, { useState, useEffect, useRef, useCallback } from 'react';
4
import SiteModal from '@/components/Modal/SiteModa';
5 6 7 8 9 10 11 12 13
import {
  Form,
  Input,
  notification,
  Select,
  Checkbox,
  message,
  Button,
  Card,
14 15
  Row,
  Col,
皮倩雯's avatar
皮倩雯 committed
16 17
  TreeSelect,
  Empty,
18
  Switch as Switchs,
19
  Image,
20
} from 'antd';
21 22 23 24
import BaseForm from '@/components/BaseForm/index';
import { Switch } from 'react-router';
import { iteratee } from 'lodash';
import v from 'voca';
25

皮倩雯's avatar
皮倩雯 committed
26 27 28 29 30 31 32
import {
  UsergroupDeleteOutlined,
  IdcardOutlined,
  DesktopOutlined,
  FolderFilled,
  FileOutlined,
  MobileOutlined,
33 34
  DeleteOutlined,
  PictureOutlined,
皮倩雯's avatar
皮倩雯 committed
35
} from '@ant-design/icons';
36
import moment from 'moment';
37
import { useHistory } from 'react-router-dom';
38 39 40
import VisibleRoleModal from '../projectManage/components/RolseSelect/VisibleRoleModal';
import VisibleIISAgentConfig from '../projectManage/components/IISAgentConfig/VisibleIISAgentConfig';
import RoleModal from '../projectManage/components/RolseSelect/RoleModal';
41 42 43 44 45
import {
  GetMessageTemplate,
  UpdateMessageConfig,
  InsertMessageConfig,
  AddIISAgentConfig,
46
  GetMessageIcon,
47
  // eslint-disable-next-line import/no-duplicates
邓超's avatar
邓超 committed
48
} from '@/services/messagemanage/messagemanage';
49

皮倩雯's avatar
皮倩雯 committed
50 51 52
import { getWebModuleTree, getWebMenuInfo } from '@/services/webConfig/api';
import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api';

53
import styles from './schemeDetail.less';
54
import PreviewModal from './PreviewModal';
55
const { Item } = Form;
56
const { TextArea } = Input;
57
const EditModal = props => {
58 59 60 61 62 63
  const history = useHistory();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [plan, setPlan] = useState('');
  const [isStart, setIsStart] = useState(false);
  const [IISConfig, setIISConfig] = useState(null);
64
  const [isUse, setIsUse] = useState(null);
65
  const [btnType, setBtnType] = useState('自定义');
66
  const { template, confirmModal, currentPage, nameList } = props.location.state;
67 68 69 70 71 72 73
  const [currentTrench, setCurrentTrench] = useState({
    isMessageShow: false,
    isAPPShow: false,
    isWEBShow: false,
    isWXShow: false,
    isEnterpriseWXShow: false,
  });
74
  const [showRoleModal, setShowRoleModal] = useState(false); // 推送组选择角色弹窗
75 76 77 78 79 80 81
  // eslint-disable-next-line camelcase
  const [APP_ITEMS, setAPP_ITEMS] = useState([]);
  const [WEB_ITEMS, setWEB_ITEMS] = useState([]);
  const [WX_ITEMS, setWX_ITEMS] = useState([]);
  const [MES_ITEMS, setMES_ITEMS] = useState([]);
  const [EN_ITEMS, setEN_ITEMS] = useState([]);
  const [listType, setListType] = useState([
82 83 84 85
    {
      title: '自定义',
      desc: '根据用户需求,自定义消息内容与各类推送方式。',
    },
86 87 88 89 90 91 92 93 94 95
    {
      title: '定时推送',
      desc: '用于周期性简报的定时推送,如智能巡检、运行周报。',
    },
    {
      title: '监控报警',
      desc: '设备硬件故障,阈值超限,状态突变,采集超时等异常情况报警。',
    },
    {
      title: '工单办理',
96
      desc: '针对工单办理人员的通知,包括工作办理、回退、审核等操作。',
97 98 99 100 101 102
    },
    {
      title: '平台公告',
      desc: '由运维人员向所有用户或特定用户发送的事务公告,如系统升级、维护。',
    },
  ]);
皮倩雯's avatar
皮倩雯 committed
103 104 105 106 107
  const [menuWebList, setMenuWebList] = useState([]);
  const [menuMoblieList, setMenuMoblieList] = useState([]);
  const { TreeNode } = TreeSelect;
  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
  const [treeSelectValueMoblie, setTreeSelectValueMoblie] = useState(undefined);
108 109 110 111 112 113 114
  const [imgDataList, setImgDataList] = useState([]);
  const [show, setShow] = useState('hidden');
  const [imageUrl, setImageUrl] = useState();
  const [keepImgeUrl, setKeepImgeUrl] = useState('');
  const [im, setIm] = useState();
  const [previewModal, setPreviewModal] = useState(false);
  const [type, setType] = useState('');
115
  const [hidden, setHidden] = useState(false);
116 117

  useEffect(() => {
118
    getMessageIcon();
皮倩雯's avatar
皮倩雯 committed
119 120
    getTreeWeb();
    getTreeMoblie();
121 122 123 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
    GetMessageTemplate().then(res => {
      if (res.code === 0) {
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        let arr5 = [];
        // eslint-disable-next-line array-callback-return
        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);
          }
          if (item.Type === '企业微信') {
            arr5.push(item);
          }
        });
        setAPP_ITEMS(arr3);
        setMES_ITEMS(arr2);
        setWX_ITEMS(arr1);
        setWEB_ITEMS(arr4);
        setEN_ITEMS(arr5);
      }
    });
  }, []);
  useEffect(() => {
皮倩雯's avatar
皮倩雯 committed
155 156
    getTreeWeb();
    getTreeMoblie();
157 158 159
    console.log('template', template);
    console.log(template.WorkWeiXinTemplateId);
    let aa;
160
    if (template.WorkWeiXinTemplateId == null || template.WorkWeiXinTemplateId === '') {
161 162 163 164 165
      aa = '';
    } else {
      // eslint-disable-next-line radix
      aa = parseInt(template.WorkWeiXinTemplateId);
    }
166
    // 编辑
167
    if (template.ThemeName) {
168 169 170 171 172 173 174 175 176
      if (
        template.MsgType === '通用报警' ||
        template.MsgType === '工单提醒' ||
        template.MsgType === '系统通知'
      ) {
        setHidden(true);
      } else {
        setHidden(false);
      }
177
      setType('edit');
178 179 180 181
      form.setFieldsValue({
        name: template.MsgType,
        isStart: template.IsStarted === '0' ? '关闭' : '开启',
        to_person: template.PushGroup,
182
        push_mode: template.PushMode === null ? '' : template.PushMode.split(','),
183
        webIcon: template.WebIcon,
184
        Title: template.Title,
185 186
        app_template: template.AppTemplateID,
        app_path: template.AppFunctionPath,
187
        wx_template: template.PublicTemplateID ? parseInt(template.PublicTemplateID) : '',
188 189 190 191 192 193
        h5_path: template.PublicPath,
        miniprogram_path: template.MiniAppRoute,
        web_template: template.WebTemplateID,
        web_path: template.WebFunctionPath,
        message_template: template.MsgTemplateID,
        enterprise_template: aa,
194
        WorkWeiXinPath: template.WorkWeiXinPath,
195
      });
196 197
      setImageUrl(template.WebIcon ? `${window.location.origin}/${template.WebIcon}` : '');
      setIm(template.WebIcon ? template.WebIcon : '');
198 199
      setPlan(template.MsgType);
      setBtnType(template.type);
200
      setIsUse(template.IsStarted === null ? '0' : template.IsStarted);
201
      setCurrentTrench({
202 203 204
        isAPPShow: !!(template.PushMode && template.PushMode.split(',').indexOf('平台弹框') > -1),
        isWXShow: !!(template.PushMode && template.PushMode.split(',').indexOf('公众号推送') > -1),
        isWEBShow: !!(template.PushMode && template.PushMode.split(',').indexOf('平台弹框') > -1),
205
        isMessageShow: !!(
206
          template.PushMode && template.PushMode.split(',').indexOf('短信推送') > -1
207 208
        ),
        isEnterpriseWXShow: !!(
209
          template.PushMode && template.PushMode.split(',').indexOf('企业微信推送') > -1
210 211 212
        ),
      });
    } else {
213
      setIsUse('1');
214 215 216
      setType('add');
      setImageUrl('');
      setIm('');
217
      console.log(111);
218
      setBtnType('自定义');
219 220
    }
  }, [props]);
皮倩雯's avatar
皮倩雯 committed
221

222 223 224 225 226 227 228
  const getMessageIcon = () => {
    GetMessageIcon().then(res => {
      console.log(res.data);
      setImgDataList(res.data);
    });
  };

皮倩雯's avatar
皮倩雯 committed
229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251
  const getTreeWeb = () => {
    getWebModuleTree('super')
      .then(res => {
        setLoading(false);
        const { code, data } = res;
        if (code === 0) {
          let list = [];
          let arr = data.filter(item => item.id === 'Web4SingleStation');
          let datalist = arr[0].children;
          console.log(datalist);
          datalist.map((i, j) => {
            let aa = [];
            i.children.map(k => {
              if (k.text === '菜单管理') {
                aa = k.children;
              }
            });
            let a = {};
            a.value = `praent${j}`;
            a.text = i.text;
            a.children = aa;
            a.menuID = `praent${j}`;
            a.key = `praent${j}`;
252
            a.item = 'father';
皮倩雯's avatar
皮倩雯 committed
253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 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 307 308
            list.push(a);
          });
          console.log(list);
          setMenuWebList(list);
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  const getTreeMoblie = () => {
    getMiniAppModuleTree({
      userMode: 'super',
    })
      .then(res => {
        if (res.code === 0) {
          let array = (res.data[0].children.length > 0 && [...res.data[0].children]) || [];
          console.log(array);
          let list = [];
          array.map((i, j) => {
            let aa = [];
            i.children.map(k => {
              if (k.text === '菜单管理') {
                aa = k.children;
              }
            });
            let a = {};
            a.value = `praent${j}`;
            a.text = i.text;
            a.children = aa;
            a.menuID = `praent${j}`;
            a.key = `praent${j}`;
            list.push(a);
          });
          console.log(list);
          setMenuMoblieList(list);
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

309 310 311 312 313 314 315 316 317 318 319 320 321 322
  const onNameChange = e => {
    setPlan(e.target.value);
  };

  const onSubmit = () => {
    let fv = form.getFieldValue();
    console.log(fv.enterprise_template);
    let aa;
    if (fv.enterprise_template === undefined) {
      aa = '';
    } else {
      aa = fv.enterprise_template.toString();
    }
    console.log(fv);
323 324 325 326 327 328 329 330 331 332

    let push_mode = [];
    Object.keys(currentTrench).forEach(key => {
      console.log(key, 'key');
      switch (key) {
        case 'isAPPShow':
          if (currentTrench[key]) {
            push_mode.push('平台弹框');
          }
          break;
333 334 335 336 337
        // case 'isWEBShow':
        //   if (currentTrench[key]) {
        //     push_mode.push('平台弹框');
        //   }
        //   break;
338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357
        case 'isWXShow':
          if (currentTrench[key]) {
            push_mode.push('公众号推送');
          }
          break;
        case 'isMessageShow':
          if (currentTrench[key]) {
            push_mode.push('短信推送');
          }
          break;
        case 'isEnterpriseWXShow':
          if (currentTrench[key]) {
            push_mode.push('企业微信推送');
          }
          break;
        default:
          break;
      }
    });

358 359 360
    if (template.ThemeName) {
      let a = {
        ID: template.ID,
361
        ThemeName: btnType,
362
        MsgType: fv.name,
363
        PublicTemplateID: fv.wx_template.toString() ? fv.wx_template.toString() : WX_ITEMS[0].Id,
364 365 366 367 368 369 370 371 372 373 374 375 376
        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,
377
        PushMode: push_mode.join(','),
378 379
        PushPath: template.PushPath,
        IsStarted: isUse,
380 381 382
        MsgTemplateID: fv.message_template ? fv.message_template : MES_ITEMS[0].Id,
        AppTemplateID: fv.app_template ? fv.app_template : APP_ITEMS[0].Id,
        WebTemplateID: fv.web_template ? fv.web_template : WEB_ITEMS[0].Id,
383 384
        PushGroup: fv.to_person ? fv.to_person.toString() : '',
        WorkWeiXinTemplateId: aa,
385
        WebIcon: fv.webIcon,
386
        Title: fv.Title,
387
        WorkWeiXinPath: fv.WorkWeiXinPath,
388 389 390 391 392 393 394 395 396
      };

      UpdateMessageConfig(a).then(res => {
        if (res.code === 0) {
          if (IISConfig) {
            // eslint-disable-next-line no-shadow
            AddIISAgentConfig(IISConfig).then(res => {
              if (res.code === 0) {
                message.success('保存成功');
397
                back();
398 399 400 401 402 403 404 405 406
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            });
          } else {
407
            back();
408 409
            message.success('保存成功');
          }
410
        } else {
411 412 413 414 415
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
416
        }
417 418 419 420 421 422 423 424 425 426
      });
    } else {
      let bb;
      if (fv.enterprise_template === undefined) {
        bb = '';
      } else {
        bb = fv.enterprise_template.toString();
      }
      console.log(fv.enterprise_template);
      let b = {
427
        ThemeName: btnType,
428
        MsgType: fv.name,
429
        PublicTemplateID: fv.wx_template ? fv.wx_template.toString() : WX_ITEMS[0].Id,
430 431 432 433 434 435 436 437 438 439 440 441 442
        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,
邓超's avatar
邓超 committed
443
        PushMode: push_mode.join(','),
444 445
        PushPath: template.PushPath,
        IsStarted: isUse,
446 447 448
        MsgTemplateID: fv.message_template ? fv.message_template : MES_ITEMS[0].Id,
        AppTemplateID: fv.app_template ? fv.app_template : APP_ITEMS[0].Id,
        WebTemplateID: fv.web_template ? fv.web_template : WEB_ITEMS[0].Id,
449 450
        PushGroup: fv.to_person ? fv.to_person.toString() : '',
        WorkWeiXinTemplateId: bb,
451
        WebIcon: fv.webIcon,
452
        Title: fv.Title,
453
        WorkWeiXinPath: fv.WorkWeiXinPath,
454 455 456 457 458 459 460 461
      };
      InsertMessageConfig(b).then(res => {
        if (res.code === 0) {
          if (IISConfig) {
            // eslint-disable-next-line no-shadow
            AddIISAgentConfig(IISConfig).then(res => {
              if (res.code === 0) {
                message.success('保存成功');
462
                back();
463 464 465 466 467 468 469 470 471
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            });
          } else {
472
            back();
473 474
            message.success('保存成功');
          }
475
        } else {
476 477 478 479 480
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
481
        }
482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506
      });
    }
  };

  const onIISAgentSubmit = value => {
    console.log('value', value);
    setIISConfig(value);
  };

  const onPushSubmit = value => {
    console.log(value, 'onPushSubmit');
  };
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 2,
    },
    wrapperCol: {
      span: 24,
    },
  };
  const onChange = value => {
    setIsUse(value ? '1' : '0');
  };
  const back = () => {
507
    history.push({
508
      pathname: '/platform/notification',
509 510 511 512
      query: {
        currentPage,
      },
    });
513 514 515 516 517 518
  };
  const tailLayout = {
    wrapperCol: { offset: 21, span: 24 },
  };
  const onTypeChange = (value, type) => {
    let data = { ...currentTrench };
519 520 521 522 523 524
    if (type === 'isWEBShow' || type === 'isAPPShow') {
      data.isWEBShow = value;
      data.isAPPShow = value;
    } else {
      data[type] = value;
    }
525 526
    setCurrentTrench(data);
  };
527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543
  // 推送组选择角色
  const rolCallBack = useCallback(list => {
    console.log(list, 'list');
    let strList = [];
    if (list.length > 0) {
      list.forEach(item => {
        console.log(item, 'item');
        item.checkedList.forEach(ele => {
          strList.push(ele);
        });
      });
      form.setFieldsValue({ to_person: strList.join(',') });
      setShowRoleModal(false);
      console.log(strList.join(','));
    }
  });

544 545 546 547
  const pictruePreview = () => {
    setPreviewModal(true);
  };

皮倩雯's avatar
皮倩雯 committed
548 549 550 551 552 553 554 555
  const treeSelectOnchange = e => {
    form.setFieldsValue({ web_path: '' });
    getWebMenuInfo({
      menuID: e,
      _dc: Date.now(),
    })
      .then(res => {
        if (res.code === 0) {
556 557
          let symbol = res.data.url.indexOf('|');
          let widget = res.data.url.indexOf('widget');
558
          if (symbol == -1) {
559 560
            form.setFieldsValue({ web_path: `${res.data.url}|widget=${e}`.replace(/\s/g, '') });
            setTreeSelectValue(`${res.data.url}|widget=${e}`.replace(/\s/g, ''));
561
          } else if (widget == -1) {
562 563
            form.setFieldsValue({ web_path: `${res.data.url}&widget=${e}`.replace(/\s/g, '') });
            setTreeSelectValue(`${res.data.url}&widget=${e}`.replace(/\s/g, ''));
564
          } else {
565 566
            form.setFieldsValue({ web_path: res.data.url });
            setTreeSelectValue(res.data.url);
567
          }
皮倩雯's avatar
皮倩雯 committed
568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588
        } else {
          notification.error({
            message: '提示',
            duration: 10,
            description: res.msg || '获取失败',
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const treeSelectOnchangeMoblie = e => {
    form.setFieldsValue({ app_path: '' });
    getMenuInfo({
      menuID: e,
    })
      .then(res => {
        if (res.code === 0) {
          form.setFieldsValue({ app_path: res.data.pageUrl });
589
          setTreeSelectValueMoblie(res.data.pageUrl);
皮倩雯's avatar
皮倩雯 committed
590 591 592 593 594 595 596 597 598 599 600 601 602 603 604
        } else {
          notification.error({
            message: '提示',
            duration: 10,
            description: res.msg || '获取失败',
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620
    // console.log(org);
    if (org.key) {
      if (haveChildren) {
        return (
          <TreeNode
            value={org.menuID}
            title={org.text}
            icon={org.key ? <DesktopOutlined /> : <FolderFilled />}
            disabled
          >
            {org.children.map(item => mapTree(item))}
          </TreeNode>
        );
      }
      return <TreeNode value={org.menuID} title={org.text} icon={<DesktopOutlined />} disabled />;
    }
皮倩雯's avatar
皮倩雯 committed
621 622 623 624 625 626 627 628 629 630 631 632 633
    return haveChildren ? (
      <TreeNode
        value={org.menuID}
        title={org.text}
        icon={org.key ? <DesktopOutlined /> : <FolderFilled />}
        disabled
      >
        {org.children.map(item => mapTree(item))}
      </TreeNode>
    ) : (
      <TreeNode
        value={org.menuID}
        title={org.text}
634 635 636 637 638 639 640 641
        icon={
          org.menuType == 'Web4MenuGroup' ? (
            <FolderFilled />
          ) : (
            <FileOutlined style={{ color: '#1890ff' }} />
          )
        }
        disabled={org.menuType == 'Web4MenuGroup'}
皮倩雯's avatar
皮倩雯 committed
642 643 644 645 646 647
      />
    );
  };

  const mapTreeMoblie = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
648 649 650 651 652 653 654 655 656 657 658 659 660 661 662
    if (org.key) {
      if (haveChildren) {
        return (
          <TreeNode
            value={org.menuID}
            title={org.text}
            icon={org.key ? <MobileOutlined /> : <FolderFilled />}
            disabled
          >
            {org.children.map(item => mapTreeMoblie(item))}
          </TreeNode>
        );
      }
      return <TreeNode value={org.menuID} title={org.text} icon={<MobileOutlined />} disabled />;
    }
皮倩雯's avatar
皮倩雯 committed
663 664 665 666 667 668 669
    return haveChildren ? (
      <TreeNode
        value={org.menuID}
        title={org.text}
        icon={org.key ? <MobileOutlined /> : <FolderFilled />}
        disabled
      >
670
        {org.children.map(item => mapTreeMoblie(item))}
皮倩雯's avatar
皮倩雯 committed
671 672 673 674 675
      </TreeNode>
    ) : (
      <TreeNode
        value={org.menuID}
        title={org.text}
676 677 678 679 680 681 682 683
        icon={
          org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo' ? (
            <FolderFilled />
          ) : (
            <FileOutlined style={{ color: '#1890ff' }} />
          )
        }
        disabled={org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo'}
皮倩雯's avatar
皮倩雯 committed
684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702
      />
    );
  };

  const filterTreeNode11 = (inputValue, treeNode) => treeNode.title.indexOf(inputValue) > -1;

  const onSearchApp = e => {
    console.log(e);
    if (e) {
      form.setFieldsValue({ app_path: e });
    }
  };

  const onSearchWeb = e => {
    console.log(e);
    if (e) {
      form.setFieldsValue({ web_path: e });
    }
  };
703 704

  const onOk = props => {
705
    console.log(props);
706 707 708 709 710 711 712 713
    if (props) {
      setImageUrl(`${window.location.origin}/${props}`);
      setIm(props);
      setKeepImgeUrl(props);
      form.setFieldsValue({ webIcon: `${props}` });
    }
    setShow('hidden');
  };
714 715
  return (
    <div className={styles.editModal_container}>
716
      <Form form={form} onFinish={onSubmit}>
717 718
        <div className={styles.content}>
          <Card title="方案" style={{ width: '100%' }}>
719 720 721 722 723 724 725 726 727 728 729
            <Row>
              <Col span={11}>
                <Item
                  label="方案名称"
                  name="name"
                  labelAlign="right"
                  rules={[
                    {
                      required: true,
                      message: '请输入方案名称',
                    },
730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745
                    {
                      validator: (rule, value) => {
                        let aa = form.getFieldValue().name;
                        if (!template.ThemeName && nameList.indexOf(aa) != -1) {
                          return Promise.reject('方案名称重复');
                        }
                        if (
                          template.ThemeName &&
                          nameList.indexOf(aa) != -1 &&
                          aa != template.name
                        ) {
                          return Promise.reject('方案名称重复');
                        }
                        return Promise.resolve();
                      },
                    },
746 747 748 749 750 751 752 753 754 755 756
                  ]}
                >
                  <Input
                    style={{ width: '25rem' }}
                    placeholder="请输入方案名称"
                    disabled={!!template.ThemeName}
                    onChange={onNameChange}
                  />
                </Item>
              </Col>
              <Col span={12}>
757
                <Item label="消息标题" name="Title" labelCol={{ span: 5 }}>
758 759 760 761
                  <Input placeholder="请输入标题" style={{ width: '25rem' }} />
                </Item>
              </Col>
            </Row>
762
            <Item label="方案类型" labelAlign="right" style={{ marginLeft: '12px' }}>
763 764 765
              <div className={styles.cardList}>
                {listType.map(item => (
                  <div key={item.title} className={styles.cardListItem}>
766
                    {item.title != '自定义' && item.title != '定时推送' ? (
767 768 769 770 771 772 773
                      <span
                        style={{
                          display: 'inline-block',

                          width: '88px',
                          marginLeft: '16px',
                        }}
774
                      >
775 776
                        {item.title}
                      </span>
777 778 779 780 781 782 783
                    ) : (
                      <Button
                        type={item.title === btnType ? 'primary' : 'default'}
                        style={{ marginRight: '1rem', width: '88px' }}
                        onClick={() => {
                          setBtnType(item.title);
                        }}
784
                        disabled={hidden}
785 786 787 788 789
                      >
                        {item.title}
                      </Button>
                    )}

790 791 792 793 794
                    <span>{item.desc}</span>
                  </div>
                ))}
              </div>
            </Item>
795 796 797
            <Item label="是否启用" labelAlign="right" style={{ marginLeft: '12px' }}>
              <Switchs checked={isUse !== '0'} onChange={onChange} />
            </Item>
798
          </Card>
799 800
          {btnType === '定时推送' ? (
            <Card title="推送计划" style={{ width: '100%', marginTop: '1rem' }}>
801
              <div style={{ display: 'flex', alignItems: 'center' }}>
802
                <Item labelCol={{ span: 5 }}>
803
                  <div style={{ display: 'flex' }}>
804 805 806 807 808
                    <Item
                      label="推送组"
                      name="to_person"
                      style={{ marginTop: '50px', marginLeft: '32px' }}
                    >
809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824
                      <Input disabled />
                    </Item>
                    <IdcardOutlined
                      onClick={() => {
                        setShowRoleModal(true);
                      }}
                      style={{
                        marginTop: '58px',
                        marginLeft: '10px',
                        fontSize: '22px',
                        color: '#1890FF',
                        cursor: 'pointer',
                      }}
                    />
                  </div>
                  {/* <VisibleRoleModal
825 826 827 828 829 830 831 832
                    style={{
                      display: 'flex',
                      width: '35rem',
                      alignItems: 'center',
                    }}
                    onSubmit={onPushSubmit}
                    selectValue={
                      template && template.PushGroup ? template.PushGroup : []
833
                    }
834 835
                    title={
                      <UsergroupDeleteOutlined style={{ fontSize: '18px' }} />
836
                    }
837
                  /> */}
838
                </Item>
839

840 841 842 843 844 845 846 847
                <div
                  style={{
                    display: 'flex',
                    width: '30rem',
                    margin: '0 2rem',
                    alignItems: 'center',
                  }}
                >
848
                  定时任务:{' '}
849 850 851 852 853 854 855 856
                  <VisibleIISAgentConfig
                    agentConfig={template.item && template.item.AgentConfig}
                    value={plan}
                    onIISAgentSubmit={onIISAgentSubmit}
                  />
                </div>
              </div>
            </Card>
857 858
          ) : (
            <></>
859 860
          )}
          <div className={styles.push_trench}>
861
            <Row>
862
              <Col xxl={8} xl={12} sm={24} xs={24}>
863 864 865 866 867 868 869 870 871 872
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>WEB</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isWEBShow')}
                        checked={currentTrench.isWEBShow}
                      />
                    </div>
                    <div className={styles.card_body}>
873
                      <Item label="模板" name="web_template" labelCol={{ span: 5 }}>
874 875 876 877 878 879 880 881
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}>
                          {WEB_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900

                      <Item
                        label="图标"
                        name="WebIcon"
                        style={{ height: '82px' }}
                        labelCol={{ span: 5 }}
                      >
                        {imageUrl ? (
                          <div
                            style={{
                              width: '74px',
                              height: '74px',
                              border: '1px solid #d9d9d9',
                              borderRadius: '2px',
                              padding: '8px',
                              position: 'relative',
                            }}
                            onMouseEnter={() => setShow('visible')}
                            onMouseLeave={() => setShow('hidden')}
901
                          >
902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920
                            <img
                              src={imageUrl}
                              alt="singleFile"
                              style={{
                                width: '100%',
                                backgroundColor: '#bfbfbf',
                              }}
                            />

                            {show == 'visible' && currentTrench.isWEBShow ? (
                              <>
                                <div className={styles.imgg} />
                                <DeleteOutlined
                                  onClick={() => {
                                    setImageUrl('');
                                    setIm('');
                                    setKeepImgeUrl('');
                                    form.setFieldsValue({ webIcon: '' });
                                  }}
921
                                  style={{
922 923 924 925 926 927
                                    position: 'absolute',
                                    fontSize: '18px',
                                    left: '12px',
                                    top: '25px',
                                    color: 'white',
                                    zIndex: '999',
928 929
                                  }}
                                />
930 931 932 933 934 935 936 937 938 939 940 941
                                <PictureOutlined
                                  onClick={pictruePreview}
                                  style={{
                                    position: 'absolute',
                                    fontSize: '18px',
                                    left: '40px',
                                    top: '25px',
                                    color: 'white',
                                    zIndex: '999',
                                  }}
                                />
                              </>
942
                            ) : (
943
                              <></>
944
                            )}
945 946 947 948 949 950 951 952 953
                          </div>
                        ) : (
                          <Image
                            width="74px"
                            // height={100}
                            src="error"
                            onClick={
                              currentTrench.isWEBShow
                                ? () => {
954
                                    pictruePreview();
955
                                  }
956 957 958 959 960 961 962
                                : ''
                            }
                            fallback="data:image/png;base64,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"
                          />
                        )}
                      </Item>

963
                      <Item label="功能路径" name="web_path" labelCol={{ span: 5 }}>
964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995
                        {/* <TextArea
                          rows={1}
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isWEBShow}
                          placeholder="请输入功能路径"
                        /> */}
                        <TreeSelect
                          showSearch
                          treeNodeFilterProp="title"
                          // filterTreeNode={filterTreeNode11}
                          style={{ width: '97%' }}
                          value={treeSelectValue}
                          disabled={!currentTrench.isWEBShow}
                          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                          placeholder="请选择功能路径"
                          allowClear
                          treeDefaultExpandAll
                          treeIcon
                          onChange={treeSelectOnchange}
                          onSearch={onSearchWeb}
                        >
                          {menuWebList ? (
                            menuWebList.map(i => mapTree(i))
                          ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                          )}
                        </TreeSelect>
                      </Item>
                    </div>
                  </div>
                }
              </Col>
996 997 998 999 1000 1001 1002 1003 1004 1005 1006
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>APP</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isAPPShow')}
                        checked={currentTrench.isAPPShow}
                      />
                    </div>
                    <div className={styles.card_body}>
1007
                      <Item label="模板" name="app_template" labelCol={{ span: 5 }}>
1008 1009 1010 1011 1012 1013 1014 1015
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow}>
                          {APP_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
1016
                      <Item label="功能路径" name="app_path" labelCol={{ span: 5 }}>
皮倩雯's avatar
皮倩雯 committed
1017
                        {/* <TextArea
1018 1019 1020 1021
                          rows={1}
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isAPPShow}
                          placeholder="请输入功能路径"
皮倩雯's avatar
皮倩雯 committed
1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042
                        /> */}
                        <TreeSelect
                          showSearch
                          treeNodeFilterProp="title"
                          style={{ width: '97%' }}
                          value={treeSelectValueMoblie}
                          disabled={!currentTrench.isAPPShow}
                          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                          placeholder="请选择功能路径"
                          allowClear
                          treeDefaultExpandAll
                          treeIcon
                          onSearch={onSearchApp}
                          onChange={treeSelectOnchangeMoblie}
                        >
                          {menuMoblieList ? (
                            menuMoblieList.map(i => mapTreeMoblie(i))
                          ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                          )}
                        </TreeSelect>
1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058
                      </Item>
                    </div>
                  </div>
                }
              </Col>
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>公众号</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isWXShow')}
                        checked={currentTrench.isWXShow}
                      />
                    </div>
                    <div className={styles.card_body}>
1059
                      <Item label="模板" name="wx_template" labelCol={{ span: 5 }}>
1060 1061 1062 1063 1064 1065 1066 1067
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow}>
                          {WX_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
1068
                      <Item label="H5路由" name="h5_path" labelCol={{ span: 5 }}>
1069 1070 1071 1072 1073 1074
                        <Input
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isWXShow}
                          placeholder="请输入功能路径"
                        />
                      </Item>
1075
                      <Item label="小程序路由" name="miniprogram_path" labelCol={{ span: 5 }}>
1076 1077 1078 1079 1080 1081 1082 1083 1084 1085
                        <Input
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isWXShow}
                          placeholder="请输入功能路径"
                        />
                      </Item>
                    </div>
                  </div>
                }
              </Col>
1086

1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>短信推送</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isMessageShow')}
                        checked={currentTrench.isMessageShow}
                      />
                    </div>
                    <div className={styles.card_body}>
1098
                      <Item label="模板" name="message_template" labelCol={{ span: 5 }}>
1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow}>
                          {MES_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
                    </div>
                  </div>
                }
              </Col>
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>企业微信</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isEnterpriseWXShow')}
                        checked={currentTrench.isEnterpriseWXShow}
                      />
                    </div>
                    <div className={styles.card_body}>
1122
                      <Item label="模板" name="enterprise_template" labelCol={{ span: 5 }}>
1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133
                        <Select
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isEnterpriseWXShow}
                        >
                          {EN_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
1134 1135 1136 1137 1138 1139 1140
                      <Item label="功能路径" name="WorkWeiXinPath" labelCol={{ span: 5 }}>
                        <Input
                          style={{ width: '97%' }}
                          placeholder="请输入功能路径"
                          disabled={!currentTrench.isEnterpriseWXShow}
                        />
                      </Item>
1141 1142 1143 1144 1145
                    </div>
                  </div>
                }
              </Col>
            </Row>
1146
          </div>
1147
        </div>
1148 1149 1150
        <Row>
          <Col span={24}>
            <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
1151
              <Button htmlType="button" onClick={back} style={{ marginRight: '20px' }}>
1152 1153 1154 1155 1156 1157 1158 1159
                返回
              </Button>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </div>
          </Col>
        </Row>
1160 1161
      </Form>
      <div />
1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172
      <PreviewModal
        visible={previewModal}
        onCancel={() => {
          setPreviewModal(false);
        }}
        imageUrl={im}
        keepImgeUrl={keepImgeUrl}
        type={type}
        imgDataList={imgDataList}
        callBackSubmit={onOk}
      />
1173 1174 1175 1176 1177 1178 1179 1180
      <RoleModal
        selectValue={form.getFieldValue('to_person')}
        visible={showRoleModal}
        rolCallBack={roleList => rolCallBack(roleList)}
        onCancel={() => {
          setShowRoleModal(false);
        }}
      />
1181 1182 1183 1184
    </div>
  );
};
export default EditModal;