DefaultComponent.jsx 6.2 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1 2
import React, { useState, useEffect } from 'react';
import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd';
3
import PageContainer from '@/components/BasePageContainer';
4 5 6
import { connect } from 'react-redux';
import TestModal from './ModalComponent';
import ListCard from './ListCard';
陈前坚's avatar
陈前坚 committed
7
import { get, post, CITY_SERVICE } from '../../services';
Maofei94's avatar
Maofei94 committed
8 9 10
import { orgGet, orgTest } from '../../services/orgnazation/api';
import styles from './DefaultComponent.less';
const { Search } = Input;
11
const { TreeNode } = TreeSelect;
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
// const treeData = [
//   {
//     title: 'Node1',
//     value: '0-0',
//     children: [
//       {
//         title: 'Child Node1',
//         value: '0-0-1',
//       },
//       {
//         title: 'Child Node2',
//         value: '0-0-2',
//       },
//     ],
//   },
//   {
//     title: 'Node2',
//     value: '0-1',
//   },
// ];
32

Maofei94's avatar
Maofei94 committed
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
const DefaultComponent = () => {
  const [treeValue, setTreeValue] = useState(null); // 树节点选中的值
  const [tableData, setTableData] = useState([]); // table的值
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // table表格checkbox配置
  const [modalVisible, setModalVisible] = useState(false); // 展示Modal弹窗
  const [testPeoList, setTestPeoList] = useState([]); // 测试card数组
  const [treeData, setTreeData] = useState([]);
  // 树节点选中的值
  const treeChange = e => {
    setTreeValue(e);
  };
  // 用户搜索
  const handleSearch = () => {
    console.log('handleSearch');
    setModalVisible(true);
  };
  // 导入
  const handleImport = () => {
    setModalVisible(true);
  };
  // 搜索框时间
  const inputSearch = e => {
    console.log(e, 'inputSearch');
  };
57 58
  const columns = [
    {
Maofei94's avatar
Maofei94 committed
59 60 61
      title: '用户ID',
      dataIndex: 'userID',
      key: 'userID',
62 63
    },
    {
Maofei94's avatar
Maofei94 committed
64 65 66
      title: '登录名',
      dataIndex: 'loginName',
      key: 'loginName',
67 68
    },
    {
Maofei94's avatar
Maofei94 committed
69 70 71
      title: '用户姓名',
      dataIndex: 'userName',
      key: 'userName',
72 73
    },
    {
Maofei94's avatar
Maofei94 committed
74 75 76
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
77 78
    },
    {
Maofei94's avatar
Maofei94 committed
79 80 81
      title: '钉钉账户',
      dataIndex: 'ddid',
      key: 'ddid',
82 83
    },
    {
Maofei94's avatar
Maofei94 committed
84 85 86
      title: '微信账户',
      dataIndex: 'wxid',
      key: 'wxid',
87
      ellipsis: true,
Maofei94's avatar
Maofei94 committed
88 89 90 91 92 93 94 95 96
    },
  ];
  useEffect(() => {
    orgGet().then(res => {
      console.log(res, 'orgGet');
      if (res) {
        let arr = transTree(res);
        console.log(transTree(res), 'arr');
        setTreeData(arr);
97
      }
Maofei94's avatar
Maofei94 committed
98 99 100 101 102 103 104
    });
  }, []);
  // 处理返回的树形结构
  const transTree = (value, isChild = false) => {
    let arr = value;
    if (arr.length < 0) {
      return;
105
    }
Maofei94's avatar
Maofei94 committed
106 107 108 109 110 111 112 113
    let obj = {};
    return arr.map(item => {
      if (isChild) {
        item.title = item.userName;
        item.value = item.userID;
      } else {
        item.title = item.text;
        item.value = item.id;
114 115
      }

Maofei94's avatar
Maofei94 committed
116 117 118 119 120 121 122 123
      if (item.children && item.children.length > 0) {
        transTree(item.children, false);
        return (obj = item);
      }
      return item;
    });
  };
  useEffect(() => {
陈前坚's avatar
陈前坚 committed
124
    get('${CITY_SERVICE}/OMS.svc/U_GetOneOUUserListNew', {
Maofei94's avatar
Maofei94 committed
125 126 127 128 129 130
      OUID: 24,
      _version: 9999,
      _dc: new Date().getTime(),
    }).then(res => {
      if (res.success) {
        setTableData(res.root);
131
      }
Maofei94's avatar
Maofei94 committed
132 133 134 135
    });
    const testData = [];
    const test2list = [];
    for (let i = 1; i < 10; i++) {
136
      testData.push({
Maofei94's avatar
Maofei94 committed
137 138 139
        key: i,
        ID: i,
      });
140
      test2list.push({
Maofei94's avatar
Maofei94 committed
141 142 143
        label: `${i}测试`,
        value: `${i}测试`,
      });
144
    }
Maofei94's avatar
Maofei94 committed
145
    console.log(test2list);
146

Maofei94's avatar
Maofei94 committed
147 148 149 150 151 152 153 154 155 156 157 158
    setTestPeoList(test2list);
  }, []);
  // table选中框的值
  const selectChange = e => {
    console.log(e, 'e');
    setSelectedRowKeys(e);
  };
  const confirmModal = () => {
    setModalVisible(false);
  };
  // table复选的配置
  const rowSelection = {
159
    selectedRowKeys,
Maofei94's avatar
Maofei94 committed
160 161
    onChange: selectChange,
  };
162
  const btnLable = [
Maofei94's avatar
Maofei94 committed
163 164 165 166 167 168 169
    {
      label: '查找用户',
      handle: handleSearch,
      config: { type: 'primary', danger: true },
    },
    { label: '用户导入', handle: handleImport, config: { type: 'info' } },
  ];
170 171 172 173 174 175

  return (
    <>
      <PageContainer>
        <Card>
          <Row>
Maofei94's avatar
Maofei94 committed
176 177
            <Col span={1}>
              <div style={{ height: '30px', lineHeight: '30px' }}>机构选择</div>
178
            </Col>
179
            <Col span={12}>
Maofei94's avatar
Maofei94 committed
180 181 182 183 184 185 186 187
              <TreeSelect
                style={{ width: '50%' }}
                treeData={treeData}
                value={treeValue}
                onChange={e => {
                  treeChange(e);
                }}
              />
188
            </Col>
Maofei94's avatar
Maofei94 committed
189
            <Col span={8} />
190
          </Row>
Maofei94's avatar
Maofei94 committed
191
          <div style={{ marginTop: '20px', textAlign: 'center' }}>
192
            <Space>
Maofei94's avatar
Maofei94 committed
193 194 195
              {btnLable &&
                btnLable.map((item, index) => {
                  const { config } = item;
196
                  return (
Maofei94's avatar
Maofei94 committed
197 198 199 200 201 202 203 204 205 206 207 208 209
                    <Button
                      key={index}
                      {...config}
                      onClick={() => {
                        item.handle &&
                          typeof item.handle === 'function' &&
                          item.handle();
                      }}
                    >
                      {item.label}
                    </Button>
                  );
                })}
210
            </Space>
Maofei94's avatar
Maofei94 committed
211
          </div>
212
          <TestModal
Maofei94's avatar
Maofei94 committed
213 214
            title="用户选择"
            visible={modalVisible}
215 216 217
            maskClosable
            onOk={() => confirmModal()}
            onCancel={() => setModalVisible(false)}
Maofei94's avatar
Maofei94 committed
218 219
            bodyStyle={{ width: '100%', height: '100%' }}
            style={{ top: 20 }}
220
            width="1000px"
Maofei94's avatar
Maofei94 committed
221 222 223
            destroyOnClose
            cancelText="取消"
            okText="确认选择"
224
          >
Maofei94's avatar
Maofei94 committed
225
            <ListCard optionsList={testPeoList} />
226 227
          </TestModal>
        </Card>
228 229 230
        <Card className={styles.mgTop20}>
          <div classNam={styles.tableTitle}>一般用户的用户列表</div>
          <Table
Maofei94's avatar
Maofei94 committed
231 232 233 234 235 236 237 238
            className={styles.mgTop20}
            rowSelection={rowSelection}
            columns={columns}
            dataSource={tableData}
            bordered
            rowKey="userID"
            scroll={{ y: 400 }}
          />
239 240 241
        </Card>
      </PageContainer>
    </>
Maofei94's avatar
Maofei94 committed
242 243
  );
};
244

Maofei94's avatar
Maofei94 committed
245
export default connect()(DefaultComponent);