indexNew.jsx

import React, { useState, useEffect, useRef } from 'react';
import { useHistory } from 'react-router-dom';
import { Tabs, Table, Form, Input, Button, Tooltip, Tag, Space, Popconfirm, message } from 'antd';
import {
  FundViewOutlined,
  EditTwoTone,
  DeleteOutlined,
  CheckOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import SchemeTest from './schemeDetails/schemeTest';
import PushTest from './schemeDetails/components/PushTest/PushTest';
import {
  GetMessageConfigs,
  DelMessageConfigs,
  GetThirdpartyTemplates,
} from '@/services/messagemanage/messagemanage';
import styles from './index.less';

const { TabPane } = Tabs;
const { Search } = Input;

const HostManager = () => {
  const history = useHistory();
  const [dataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState({ configPage: false, personPage: false });
  const [schemeMsg, setSchemeMsg] = useState({});
  const searchValue = useRef();
  const [msgTemplate, setMsgTemplate] = useState();
  const [testPersons, setTestPersons] = useState();
  const [form] = Form.useForm();
  useEffect(() => {
    GetThirdpartyTemplates().then(res => {
      if (res.code === 0) {
        setMsgTemplate(res.data);
      } else {
        message.error(res.msg);
      }
    });
    getData();
  }, []);
  const getData = query => {
    setLoading(true);
    GetMessageConfigs({ keyword: query }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setDataList(res.data);
      } else {
        message.error(res.msg);
      }
    });
  };
  const onChage = value => {
    searchValue.current = value.target.value;
  };
  const onSearch = value => {
    getData(value);
  };
  const changeDesc = value => {
    history.push({
      pathname: `/platform/SchemeDetailNew`,
      state: { schemeMsg: value, msgTemplate },
    });
  };
  // 消息发送测试
  const TestDesc = val => {
    setSchemeMsg(val);
    setVisible({ ...visible, personPage: true });
  };
  // 删除消息
  const DeleteProject = val => {
    DelMessageConfigs({ Id: val.Id }).then(res => {
      if (res.code === 0) {
        message.success('删除成功');
        getData(searchValue.current);
      } else {
        message.error(res.msg);
      }
    });
  };
  const savePersonTest = value => {
    console.log(value, 'aaaaa');
    setTestPersons(value);
    setVisible({ personPage: false, configPage: true });
  };
  const columns = [
    {
      title: '序号',
      dataIndex: 'ID',
      align: 'center',
      key: 'ID',
      width: 60,
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '方案名称',
      dataIndex: 'SchemeName',
      align: 'center',
      key: 'SchemeName',
      render: (text, record) => <div>{text === null || !text ? '-' : text}</div>,
    },

    // {
    //   title: '推送组',
    //   dataIndex: 'TimeJobGroup',
    //   key: 'TimeJobGroup',
    //   align: 'center',
    //   ellipsis: true,
    //   width: 500,
    //   render: (text, record) => (
    //     <span>
    //       <Tooltip placement="topLeft" title={text.map(item => item.name).join(',')}>
    //         {text.map(item => item.name).join(',') || '--'}
    //       </Tooltip>
    //     </span>
    //   ),
    // },
    {
      title: '消息平台',
      dataIndex: 'Platform',
      align: 'center',
      key: 'Platform',
      width: '100px',

      render: record => {
        if (record.PlatformStatus === 1) {
          return <Tag color="success">开</Tag>;
        }
        return <Tag color="processing">关</Tag>;
      },
    },
    {
      title: '短信推送',
      dataIndex: 'SMS',
      align: 'center',
      key: 'SMS',
      width: '100px',

      render: record => {
        if (record.SMSStatus === 1) {
          return <Tag color="success">开</Tag>;
        }
        return <Tag color="processing">关</Tag>;
      },
    },
    {
      title: '公众号推送',
      dataIndex: 'Wechat',
      align: 'center',
      key: 'Wechat',
      width: '100px',
      render: record => {
        if (record.WechatStatus === 1) {
          return <Tag color="success">开</Tag>;
        }
        return <Tag color="processing">关</Tag>;
      },
    },
    {
      title: '企业微信推送',
      dataIndex: 'WorkWechat',
      align: 'center',
      key: 'WorkWechat',
      width: '110px',
      render: record => {
        if (record.WorkWechatStatus === 1) {
          return <Tag color="success">开</Tag>;
        }
        return <Tag color="processing">关</Tag>;
      },
    },

    {
      title: '是否启用',
      dataIndex: 'IsEnable',
      align: 'center',
      key: 'IsEnable',
      width: '100px',

      render: record => {
        if (record === 1) {
          return <Tag color="success">是</Tag>;
        }
        return <Tag color="processing">否</Tag>;
      },
    },
    {
      title: '操作',
      width: 250,
      align: 'center',
      ellipsis: true,
      render: (text, record) => (
        <Space>
          <Tooltip title="测试">
            <FundViewOutlined
              style={{ fontSize: '16px', color: '#1890FF' }}
              onClick={() => {
                TestDesc(record);
              }}
            />
          </Tooltip>
          <Tooltip title="编辑">
            <EditTwoTone
              style={{ fontSize: '16px', color: '#e86060' }}
              onClick={() => {
                changeDesc(record);
              }}
            />
          </Tooltip>

          <Popconfirm
            title="是否删除方案？"
            okText="确认"
            cancelText="取消"
            onConfirm={() => {
              DeleteProject(record);
            }}
          >
            <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
          </Popconfirm>
        </Space>
      ),
    },
  ];
  return (
    <div className={styles.pageContent}>
      <div className={styles.header}>
        <Form name={form} layout="inline">
          <Form.Item>
            <Search
              placeholder="请输入方案名称"
              onChange={onChage}
              onSearch={onSearch}
              enterButton
              allowClear
            />
          </Form.Item>
          <Form.Item>
            <Button
              onClick={() => {
                history.push({
                  pathname: `/platform/schemeDetailNew`,
                  state: { schemeMsg: null, msgTemplate },
                });
              }}
            >
              新增
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className={styles.content}>
        {/* <Table
          loading={loading}
          bordered
          columns={columns}
          dataSource={dataList}
          pagination={false}
          rowKey="Id"
          scroll={{ y: 'calc(100% - 55px)' }}
        /> */}
        {dataList.map(item => (
          <div className={styles.cardBox}>
            <div className={styles.header}>{item.SchemeName}</div>
            <div className={styles.cardContent}>
              <div className={styles.stadusBox}>
                <div className={styles.label}>消息平台</div>
                <div className={styles.value}>
                  {item.Platform.PlatformStatus ? (
                    <CheckOutlined style={{ color: '#1890FF' }} />
                  ) : (
                    ''
                    // <CloseOutlined style={{ color: '#e86060' }} />
                  )}
                </div>
              </div>
              <div className={styles.stadusBox}>
                <div className={styles.label}>短信推送</div>
                <div className={styles.value}>
                  {item.SMS.SMSStatus ? (
                    <CheckOutlined style={{ color: '#1890FF' }} />
                  ) : (
                    ''
                    // <CloseOutlined style={{ color: '#e86060' }} />
                  )}
                </div>
              </div>
              <div className={styles.stadusBox}>
                <div className={styles.label}>公众号推送</div>
                <div className={styles.value}>
                  {item.Wechat.WechatStatus ? (
                    <CheckOutlined style={{ color: '#1890FF' }} />
                  ) : (
                    ''
                    // <CloseOutlined style={{ color: '#e86060' }} />
                  )}
                </div>
              </div>
              <div className={styles.stadusBox}>
                <div className={styles.label}>企业微信推送</div>
                <div className={styles.value}>
                  {item.WorkWechat.WorkWechatStatus ? (
                    <CheckOutlined style={{ color: '#1890FF' }} />
                  ) : (
                    ''
                    // <CloseOutlined style={{ color: '#e86060' }} />
                  )}
                </div>
              </div>
            </div>
            <div className={styles.footer}>
              <div className={styles.operateBox}>
                <Tooltip title="测试">
                  <FundViewOutlined
                    style={{ fontSize: '16px', color: '#1890FF' }}
                    onClick={() => {
                      TestDesc(item);
                    }}
                  />
                </Tooltip>
              </div>
              <div className={styles.operateBox}>
                <Tooltip title="编辑">
                  <EditTwoTone
                    style={{ fontSize: '16px', color: '#1890FF' }}
                    onClick={() => {
                      changeDesc(item);
                    }}
                  />
                </Tooltip>
              </div>
              <div className={styles.operateBox}>
                <Popconfirm
                  title="是否删除方案？"
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() => {
                    DeleteProject(item);
                  }}
                >
                  <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                </Popconfirm>
              </div>
            </div>
          </div>
        ))}
      </div>
      <SchemeTest
        visible={visible.configPage}
        schemeMsg={schemeMsg}
        testPersons={testPersons}
        onCancel={() => setVisible({ ...visible, configPage: false })}
        onOk={() => {}}
      />
      <PushTest
        onOk={savePersonTest}
        visible={visible.personPage}
        onCancel={() => setVisible({ ...visible, personPage: false })}
      />
    </div>
  );
};
export default HostManager;