EditModal.jsx

import React, { useState, useEffect, useRef } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import { Form, Input, notification, Select, Checkbox, message, Button } from 'antd';
import BaseForm from '@/components/BaseForm/index';
import { Switch } from 'react-router';
import { iteratee } from 'lodash';
import styles from './EditModal.less';
import v from 'voca';
import VisibleRoleModal from './RolseSelect/VisibleRoleModal';
import VisibleIISAgentConfig from './IISAgentConfig/VisibleIISAgentConfig';
import { GetMessageTemplate } from '@/services/messagemanage/messagemanage';
import moment from 'moment';
import {
  UpdateMessageConfig,
  InsertMessageConfig,
  AddIISAgentConfig,
} from '@/services/messagemanage/messagemanage';

const { Item } = Form;

const EditModal = props => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [isStart, setIsStart] = useState(false);
  const [IISConfig, setIISConfig] = useState(null);

  const { template, confirmModal } = props;
  const [currentTrench, setCurrentTrench] = useState({
    isMessageShow: false,
    isAPPShow: false,
    isWEBShow: false,
    isWXShow: false,
  });
  const plainOptions = ['平台弹框', '短信推送', '公众号推送'];
  const [APP_ITEMS, setAPP_ITEMS] = useState([]);
  const [WEB_ITEMS, setWEB_ITEMS] = useState([]);
  const [WX_ITEMS, setWX_ITEMS] = useState([]);
  const [MES_ITEMS, setMES_ITEMS] = useState([]);

  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) {
      console.log(template);
      form.setFieldsValue({
        name: template.MsgType,
        isStart: template.IsStarted === '0' ? '关闭' : '开启',
        to_person: template.PushGroup,
        push_plan: template.MsgType,
        push_mode: template.PushMode === null ? '' : template.PushMode.split(','),

        app_template: template.AppTemplateID,
        app_path: template.AppFunctionPath,
        wx_template: parseInt(template.PublicTemplateID),
        h5_path: template.PublicPath,
        miniprogram_path: template.MiniAppRoute,
        web_template: template.WebTemplateID,
        web_path: template.WebFunctionPath,
        message_template: template.MsgTemplateID,
      });
      setCurrentTrench({
        isAPPShow:
          template.PushMode && template.PushMode.split(',').indexOf('平台弹框') > -1 ? true : false,
        isWXShow:
          template.PushMode && template.PushMode.split(',').indexOf('公众号推送') > -1
            ? true
            : false,
        isWEBShow:
          template.PushMode && template.PushMode.split(',').indexOf('平台弹框') > -1 ? true : false,
        isMessageShow:
          template.PushMode && template.PushMode.split(',').indexOf('短信推送') > -1 ? true : false,
      });
    }
  }, [props]);
  const onNameChange = e => {
    form.setFieldsValue({
      push_plan: e.target.value,
    });
  };

  const onSubmit = () => {
    console.log(form.getFieldValue());
    let fv = form.getFieldValue();
    if (template.ThemeName) {
      console.log('fv.wx_template', fv.wx_template);
      console.log('fv.push_mode.toString()', fv.push_mode.toString());
      let a = {
        ID: template.ID,
        ThemeName: template.ThemeName,
        MsgType: fv.name,
        PublicTemplateID: fv.wx_template.toString(),
        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,
        PushMode: fv.push_mode.toString(),
        PushPath: template.PushPath,
        IsStarted: fv.isStart,
        MsgTemplateID: fv.message_template,
        AppTemplateID: fv.app_template,
        WebTemplateID: fv.web_template,
        PushGroup: fv.to_person.toString(),
      };
      console.log(a);
      UpdateMessageConfig(a).then(res => {
        if (res.code === 0) {
          if (IISConfig) {
            AddIISAgentConfig(IISConfig).then(res => {
              if (res.code === 0) {
                message.success('保存成功');
                confirmModal();
              }
            });
          } else {
            message.success('保存成功');
            confirmModal();
          }
        }
      });
    } else {
      console.log('fv.push_mode.toString()', fv.push_mode.toString());
      let b = {
        ThemeName: '定时推送',
        MsgType: fv.name,
        PublicTemplateID: fv.wx_template,
        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,
        PushMode: fv.push_mode.toString(),
        PushPath: template.PushPath,
        IsStarted: fv.isStart,
        MsgTemplateID: fv.message_template,
        AppTemplateID: fv.app_template,
        WebTemplateID: fv.web_template,
        PushGroup: fv.to_person.toString(),
      };
      InsertMessageConfig(b).then(res => {
        if (res.code === 0) {
          if (IISConfig) {
            AddIISAgentConfig(IISConfig).then(res => {
              if (res.code === 0) {
                message.success('保存成功');
                confirmModal();
              }
            });
          } else {
            message.success('保存成功');
            confirmModal();
          }
        }
      });
    }
  };
  const operateProject = () => {};
  const onTypeChange = value => {
    setCurrentTrench({
      isAPPShow: value.indexOf('平台弹框') > -1 ? true : false,
      isWXShow: value.indexOf('公众号推送') > -1 ? true : false,
      isWEBShow: value.indexOf('平台弹框') > -1 ? true : false,
      isMessageShow: value.indexOf('短信推送') > -1 ? true : false,
    });
  };
  const onIISAgentSubmit = value => {
    console.log(value, 'IIS配置');
    setIISConfig(value);
  };

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

  return (
    <SiteModal
      {...props}
      title={template.ThemeName ? '编辑推送方案' : '新增推送方案'}
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: 200, borderRadius: '20px' }}
      width="1200px"
      destroyOnClose
      cancelText="取消"
      okText="确认"
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
      <div className={styles.editModal_container}>
        <Form form={form} labelCol={{ span: 4 }}>
          <Item
            label="方案名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入方案名称',
              },
            ]}
          >
            <Input
              placeholder="请输入方案名称"
              disabled={template.ThemeName ? true : false}
              onChange={onNameChange}
            />
          </Item>
          <Item label="是否开启" name="isStart">
            <Select>
              <Option value="1">开启</Option>
              <Option value="0">关闭</Option>
            </Select>
          </Item>
          <Item label="推送人" name="to_person">
            <VisibleRoleModal onSubmit={onPushSubmit} title={'推送人员'} />
          </Item>
          <Item label="定时计划" name="push_plan">
            <VisibleIISAgentConfig
              agentConfig={template.item && template.item.AgentConfig}
              onIISAgentSubmit={onIISAgentSubmit}
            />
          </Item>
          <Item label="推送方式" name="push_mode">
            <Checkbox.Group options={plainOptions} onChange={onTypeChange} />
          </Item>
          <div className={styles.push_trench}>
            {currentTrench.isAPPShow && (
              <div className={styles.trench_card}>
                <div className={styles.card_title}>
                  <div className={styles.lable}>APP</div>
                </div>
                <div className={styles.card_body}>
                  <Item label="模板" name="app_template">
                    <Select>
                      {APP_ITEMS.map((item, idx) => {
                        return (
                          <Option value={item.Id} key={idx}>
                            {item.LikeName}
                          </Option>
                        );
                      })}
                    </Select>
                  </Item>
                  <Item label="功能路径" name="app_path">
                    <Input placeholder="请输入功能路径" />
                  </Item>
                </div>
              </div>
            )}
            {currentTrench.isWXShow && (
              <div className={styles.trench_card}>
                <div className={styles.card_title}>
                  <div className={styles.lable}>微信</div>
                </div>
                <div className={styles.card_body}>
                  <Item label="模板" name="wx_template">
                    <Select>
                      {WX_ITEMS.map((item, idx) => {
                        return (
                          <Option value={item.Id} key={idx}>
                            {item.LikeName}
                          </Option>
                        );
                      })}
                    </Select>
                  </Item>
                  <Item label="H5路由" name="h5_path">
                    <Input placeholder="请输入功能路径" />
                  </Item>
                  <Item label="小程序路由" name="miniprogram_path">
                    <Input placeholder="请输入功能路径" />
                  </Item>
                </div>
              </div>
            )}
            {currentTrench.isWEBShow && (
              <div className={styles.trench_card}>
                <div className={styles.card_title}>
                  <div className={styles.lable}>WEB</div>
                </div>
                <div className={styles.card_body}>
                  <Item label="模板" name="web_template">
                    <Select>
                      {WEB_ITEMS.map((item, idx) => {
                        return (
                          <Option value={item.Id} key={idx}>
                            {item.LikeName}
                          </Option>
                        );
                      })}
                    </Select>
                  </Item>
                  <Item label="功能路径" name="web_path">
                    <Input placeholder="请输入功能路径" />
                  </Item>
                 
                </div>
              </div>
            )}

            {currentTrench.isMessageShow && (
              <div className={styles.trench_card}>
                <div className={styles.card_title}>
                  <div className={styles.lable}>短信</div>
                </div>
                <div className={styles.card_body}>
                  <Item label="模板" name="message_template">
                    <Select>
                      {MES_ITEMS.map((item, idx) => {
                        return (
                          <Option value={item.Id} key={idx}>
                            {item.LikeName}
                          </Option>
                        );
                      })}
                    </Select>
                  </Item>
                </div>
              </div>
            )}
          </div>
        </Form>
      </div>
    </SiteModal>
  );
};
export default EditModal;