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;