PushTest.jsx 6.54 KB
Newer Older
1
import React, { useState, useEffect, useCallback } from 'react';
2
import { Modal, Input, Button, message, Spin, Pagination, Table } from 'antd';
邓超's avatar
邓超 committed
3
import { GetGroupUserTree, TestPush } from '@/services/messagemanage/messagemanage';
4
import styles from './PushTest.less';
5
import DragTable from '@/components/DragTable/DragTable';
6 7 8 9
import CardCheck from './CardCheck';

const PushTest = props => {
  const { confirmModal, onCancel, visible, pushTestMsg } = props;
10 11
  const [allList, setAllist] = useState([]); // 用于展示得数据
  const [checkList, setCheckList] = useState([]); // 选中得数据集合
12
  const [loading, setLoading] = useState(false);
13 14 15
  const [total, setTotal] = useState();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
16 17
  const [searchName, setSearchName] = useState();

18 19
  useEffect(() => {
    if (visible) {
20
      setCurrentPage(1);
21
      getData(searchName, 1, pageSize);
22
    } else {
23
      setCheckList([]);
24
      setAllist([]);
25
      setSearchName('');
26 27
    }
  }, [visible]);
28
  // 选中后得回调函数
29 30
  const checkCallBack = useCallback(newCheckList => {
    if (newCheckList) {
31
      setCheckList(newCheckList);
32 33
    }
  });
34 35 36 37
  // 监听分页
  const paginationChange = (page, pageSizes) => {
    setCurrentPage(page);
    setPageSize(pageSizes);
38
    getData(searchName, page, pageSizes);
39
  };
40
  // 提交勾选的测试人员
41
  const onFinish = () => {
42 43
    console.log(pushTestMsg);
    console.log(pushTestMsg.item.AgentConfig);
44 45 46
    TestPush({
      theme: pushTestMsg.ThemeName,
      msgType: pushTestMsg.MsgType,
47
      tousers: checkList.map(item => item.value),
48
      pushPath: pushTestMsg.item.AgentConfig ? pushTestMsg.item.AgentConfig.Url : '',
49 50 51
      msgTypeId: pushTestMsg.ID.toString(),
    })
      .then(res => {
52 53 54 55 56 57
        if (res.code === 0) {
          confirmModal();
          message.success('测试推送成功');
        } else {
          message.error(res.msg);
        }
58 59 60
      })
      .catch(() => {
        message.error('网络异常,请稍后再试');
61 62
      });
  };
63
  // 搜索
64
  const onSearch = () => {
65
    setCurrentPage(1);
66
    getData(searchName, 1, pageSize);
67
  };
68 69 70 71
  // 重置
  const onReset = () => {
    setCurrentPage(1);
    getData('', 1, pageSize);
72 73 74 75 76
    setSearchName('');
  };
  // 搜索框监听
  const searchChange = e => {
    setSearchName(e.target.value);
77 78
  };
  // 获取数据
79
  const getData = (username, page, pageSizes) => {
80
    setLoading(true);
81 82 83 84
    GetGroupUserTree({
      key: username,
      pageSize: pageSizes,
      PageIndex: page,
85 86 87 88 89 90 91 92 93 94 95 96
    })
      .then(res => {
        setLoading(false);
        if (res.code === 0) {
          setTotal(res.data.count);
          // 数据处理成checkbox组件需要得形式
          let list = res.data.data.map(item => {
            let indeterminate = false;
            let checkedList = [];
            let checkAll = false;
            let options = item.users.map(val => {
              checkList.forEach(ele => {
97 98
                if (val.userId === ele.value) {
                  checkedList.push(ele.value);
99 100 101 102 103 104 105
                }
              });
              return {
                label: val.userName,
                value: val.userId,
              };
            });
106
            if (checkedList.length === options.length && checkedList.length > 0) {
107
              checkAll = true;
108
            }
109 110 111 112 113 114 115 116 117 118 119
            if (checkedList.length < options.length && checkedList.length > 0) {
              indeterminate = true;
            }
            return {
              groupName: item.groupName,
              groupId: item.groupId,
              indeterminate,
              checkAll,
              checkedList,
              plainOptions: options,
            };
120
          });
121 122 123
          setAllist(list);
        } else {
          message.error(res.msg);
124
        }
125 126 127 128
      })
      .catch(() => {
        setLoading(false);
        message.error('网络异常,请稍后再试');
129 130
      });
  };
131 132 133 134 135 136 137 138 139 140 141 142 143 144
  // 拖拽后的回调函数
  const dragCallBack = val => {
    if (val) {
      setCheckList(val);
    }
  };
  const columns = [
    {
      title: '已选推送人',
      dataIndex: 'label',
      key: 'label',
      width: 300,
    },
  ];
145 146 147 148 149 150
  return (
    <>
      <Modal
        title="选择推送人"
        visible={visible}
        onOk={onFinish}
151
        width="900px"
152 153 154 155 156
        onCancel={onCancel}
        maskClosable={false}
        destroyOnClose
        centered
      >
157 158 159 160 161 162 163 164 165 166 167 168
        <div className={styles.pushTestContent}>
          <div className={styles.leftContent}>
            {/* 头部搜索框 */}
            <div className={styles.searchHeader}>
              <Input.Search
                value={searchName}
                placeholder="请输入部门或用户"
                onChange={searchChange}
                onSearch={onSearch}
                enterButton
                style={{ width: '300px', marginRight: '15px' }}
              />
169
              <Button type="primary" htmlType="submit" onClick={onReset}>
170 171
                重置
              </Button>
172 173 174 175 176 177 178 179 180
            </div>
            {/* 复选框模块 */}
            <Spin spinning={loading}>
              <div className={styles.checkContainer}>
                {allList.map((item, index) => (
                  <div className={styles.checkBoxContent} key={item.groupId}>
                    <CardCheck
                      cardMsg={item}
                      cardIndex={index}
181
                      callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
182 183 184 185
                      checkList={checkList}
                    />
                  </div>
                ))}
186
              </div>
187
            </Spin>
188
          </div>
189
          <div className={styles.tableRight}>
190
            <Table
191 192 193 194 195 196 197 198 199 200 201 202 203
              bordered
              style={{ width: '350px', overflowX: 'hidden' }}
              rowKey={record => record.value}
              columns={columns}
              dataSource={checkList}
              pagination={false}
              size="small"
              dragCallBack={dragCallBack}
              scroll={{ y: 530 }}
              ItemTypes="pushTest"
            />
          </div>
        </div>
204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
        <div>
          {/* 分页 */}
          <Pagination
            total={total}
            showTotal={(totals, range) => `共 ${totals} 条`}
            defaultPageSize={pageSize}
            defaultCurrent={1}
            current={currentPage}
            onChange={paginationChange}
            style={{ width: '100%' }}
            size="small"
            showQuickJumper
            showSizeChanger
          />
        </div>
219 220 221 222 223 224
      </Modal>
    </>
  );
};

export default PushTest;