index.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. import React, { useState, useEffect, useCallback, useRef } from 'react';
  2. import { FormattedMessage, history, useModel } from 'umi';
  3. import { Spin, Popover, Dropdown, MenuProps } from 'antd';
  4. import styles from './index.less';
  5. import cx from 'classnames';
  6. import PageHeader from '@/sagacare_components/PageHeader';
  7. import Search from '@/sagacare_components/Search';
  8. import Table from '@/sagacare_components/Table';
  9. import Empty from './components/Empty';
  10. import PersonModal from './components/personModal';
  11. import ImportModal from './components/StartImport';
  12. import ImportError from './components/StartImport/ImportError';
  13. import ImportSuccess from './components/StartImport/ImportSuccess';
  14. import { EllipsisOutlined } from '@ant-design/icons';
  15. import {
  16. queryUserList,
  17. queryCompanyOAById,
  18. queryControlSpaceCompany,
  19. } from '@/services/sagacare_service/member';
  20. const Member: React.FC = () => {
  21. const { initialState } = useModel('@@initialState');
  22. const [perVisible, setPerVisible] = useState(false); //人员对话框显示
  23. const [importVisible, setImportVisible] = useState(false); //人员对话框显示
  24. const [temporary, setTemporary] = useState(false); //是否是临时成员添加
  25. const [invalidSign, setInvalidSign] = useState(false); //显示作废
  26. const [spaceMap, setSpaceMap] = useState<any>();
  27. const [searchStr, setSearchStr] = useState();
  28. const [isSyncOa, setIsSyncOa] = useState(true); //是否是OA同步
  29. const [userList, setUserList] = useState<any>([]);
  30. const [total, setTotal] = useState();
  31. const [loading, setLoading] = useState(false);
  32. const [page, setPage] = useState({
  33. pageNum: 1,
  34. pageSize: 10,
  35. });
  36. const [checkUser, setCheckUser] = useState({}); //查看的人
  37. const [checkSign, setCheckSign] = useState('add'); // 三种状态 查看 编辑 新增
  38. const [refreshNum, setRefreshNum] = useState(0); //刷新列表
  39. // const statusArr = {
  40. // 2: '正常',
  41. // 3: '待激活',
  42. // 5: '已作废',
  43. // };
  44. const userTpeyArr = {
  45. 1: '普通成员',
  46. 2: '临时成员',
  47. 3: '管理员',
  48. };
  49. const [sorter, setSorter] = useState<any>({
  50. updateDate: 'DESC', //'ASC' : 'DESC'
  51. });
  52. const getColumns = () => {
  53. return [
  54. {
  55. title: '姓名',
  56. dataIndex: 'name',
  57. },
  58. {
  59. title: '类型',
  60. dataIndex: 'manageUserType',
  61. filteredValue: [],
  62. single: true,
  63. filters: [
  64. { value: '1', label: '普通成员' },
  65. { value: '2', label: '临时成员' },
  66. { value: '3', label: '管理员' },
  67. ],
  68. render: function (content, item, index) {
  69. return <span>{userTpeyArr[content]}</span>;
  70. },
  71. },
  72. {
  73. title: '手机号',
  74. dataIndex: 'phone',
  75. },
  76. {
  77. title: '职务',
  78. dataIndex: 'job',
  79. },
  80. {
  81. title: '常驻工区',
  82. dataIndex: 'permanentSpaceName',
  83. },
  84. {
  85. title: '可控工区',
  86. dataIndex: 'isAllControl',
  87. render: function (content, item, index) {
  88. return <span>{content ? '部分可控' : '全部可控'}</span>;
  89. },
  90. },
  91. {
  92. title: '更新时间',
  93. dataIndex: 'updateDate',
  94. sorter: true,
  95. sortered: sorter.updateDate,
  96. },
  97. {
  98. title: '状态',
  99. dataIndex: 'status',
  100. render: function (content, item, index) {
  101. //debugger;
  102. return (
  103. <div>
  104. <span
  105. className={cx(styles.circle, {
  106. [styles.activated]: content == '待激活',
  107. })}
  108. ></span>
  109. <span>{content}</span>
  110. </div>
  111. );
  112. },
  113. },
  114. {
  115. title: '',
  116. dataIndex: '',
  117. render: function (content, item) {
  118. const menuItems: MenuProps['items'] = [
  119. {
  120. key: '1',
  121. label: (
  122. <div
  123. className={styles.operateLi}
  124. onClick={() => {
  125. checkPerson(item);
  126. }}
  127. >
  128. 查看
  129. </div>
  130. ),
  131. },
  132. {
  133. key: '2',
  134. label: (
  135. <div
  136. className={styles.operateLi}
  137. onClick={() => {
  138. editPerson(item);
  139. }}
  140. >
  141. 编辑
  142. </div>
  143. ),
  144. },
  145. {
  146. key: '3',
  147. label: (
  148. <div
  149. className={cx(styles.operateLi, { [styles.disabled]: item.oaId })}
  150. onClick={() => {
  151. invalidPerson(item);
  152. }}
  153. >
  154. 作废
  155. </div>
  156. ),
  157. },
  158. ];
  159. return (
  160. <Dropdown menu={{ items: menuItems }}>
  161. <EllipsisOutlined style={{ color: '#4D5262', fontSize: '20px' }} />
  162. </Dropdown>
  163. );
  164. },
  165. },
  166. ];
  167. };
  168. const goToInvalid = () => {
  169. history.push(`/member/invalid`);
  170. };
  171. const refreshList = () => {
  172. setRefreshNum(refreshNum + 1);
  173. };
  174. const onClose = () => {
  175. setPerVisible(false);
  176. };
  177. const onImClose = () => {
  178. setImportVisible(false);
  179. };
  180. const showImport = () => {
  181. setImportVisible(true);
  182. };
  183. const [uploadResult, setUploadResult] = useState(null);
  184. useEffect(() => {
  185. var paramObj = {
  186. criteria: {
  187. param: searchStr,
  188. status: 1,
  189. companyId: initialState?.currentUser?.companyId,
  190. // manageUserType: [],
  191. },
  192. page: page.pageNum,
  193. size: page.pageSize,
  194. orders: [
  195. {
  196. column: 'updateDate',
  197. asc: sorter.updateDate == 'DESC' ? true : false,
  198. },
  199. ],
  200. };
  201. setLoading(true);
  202. queryUserList(paramObj)
  203. .then((res) => {
  204. debugger;
  205. setLoading(false);
  206. var uarr = res.content || [];
  207. var count = res.count || 0;
  208. setUserList(uarr);
  209. setTotal(count);
  210. })
  211. .catch((err) => {
  212. setLoading(false);
  213. });
  214. }, [searchStr, page, sorter, refreshNum]);
  215. useEffect(() => {
  216. //查询受控列表
  217. var paramObj = {
  218. criteria: {
  219. companyId: initialState?.currentUser?.companyId,
  220. },
  221. };
  222. queryControlSpaceCompany(paramObj)
  223. .then((res) => {
  224. var data = res.data || {};
  225. setSpaceMap(data);
  226. })
  227. .catch((err) => {});
  228. queryCompanyOAById({ companyId: initialState?.currentUser?.companyId })
  229. .then((res) => {
  230. var isSyncOa = res?.isSyncOa;
  231. setIsSyncOa(isSyncOa == 1 ? true : false);
  232. })
  233. .catch((err) => {});
  234. }, []);
  235. const checkPerson = (item) => {
  236. setPerVisible(true);
  237. setInvalidSign(false);
  238. setCheckSign('check'); //设置为查看状态
  239. setCheckUser(item);
  240. setTemporary(false);
  241. };
  242. const editPerson = (item) => {
  243. setPerVisible(true);
  244. setInvalidSign(false);
  245. setCheckSign('edit');
  246. setCheckUser(item);
  247. setTemporary(false);
  248. };
  249. //作废用户
  250. const invalidPerson = (item) => {
  251. setInvalidSign(true);
  252. setPerVisible(true);
  253. setCheckUser(item);
  254. setTemporary(false);
  255. };
  256. //添加临时用户
  257. const addTemporaryPerson = () => {
  258. setPerVisible(true);
  259. setInvalidSign(false);
  260. setCheckSign('add');
  261. setCheckUser({});
  262. setTemporary(true);
  263. };
  264. const addNewPerson = () => {
  265. setPerVisible(true);
  266. setInvalidSign(false);
  267. setCheckSign('add');
  268. setCheckUser({});
  269. setTemporary(false);
  270. };
  271. return (
  272. <div className={styles.memberwrap}>
  273. <PageHeader
  274. title={<FormattedMessage id="menu.member" />}
  275. action={
  276. <div className={styles.headerRight}>
  277. <Search changeSearchStr={setSearchStr} />
  278. {isSyncOa ? (
  279. <>
  280. <div className={styles.allIn}>已开启OA同步</div>
  281. <div
  282. className={styles.invalid}
  283. onClick={() => {
  284. goToInvalid();
  285. }}
  286. >
  287. 已作废
  288. </div>
  289. <div className={styles.addButton} onClick={addTemporaryPerson}>
  290. 添加临时成员
  291. </div>
  292. </>
  293. ) : (
  294. <>
  295. <div className={styles.allIn} onClick={showImport}>
  296. 批量导入
  297. </div>
  298. <div
  299. className={styles.invalid}
  300. onClick={() => {
  301. goToInvalid();
  302. }}
  303. >
  304. 已作废
  305. </div>
  306. <div className={styles.addButton} onClick={addNewPerson}>
  307. 新增成员
  308. </div>
  309. </>
  310. )}
  311. </div>
  312. }
  313. />
  314. <div className={styles.bottomTable}>
  315. <Table
  316. columns={getColumns()}
  317. rowKey="userId"
  318. dataSource={userList}
  319. loading={loading}
  320. page={page}
  321. total={total}
  322. pagination={!!userList.length}
  323. onFilterChange={(key, options) => {
  324. debugger;
  325. // if (key == 'spaceName' || key == 'tenantName') {
  326. // setShowFilterIds(options);
  327. // }
  328. }}
  329. onRowClick={(record) => {}}
  330. onSortChange={(col: any, direction: string) => {
  331. setSorter({ [col['dataIndex']]: direction });
  332. }}
  333. onPageChange={(p) => {
  334. setPage(p);
  335. }}
  336. />
  337. {!userList.length && !loading && <Empty />}
  338. </div>
  339. {perVisible && (
  340. <PersonModal
  341. invalidSign={invalidSign}
  342. temporary={temporary}
  343. checkUser={checkUser}
  344. checkSign={checkSign}
  345. onClose={onClose}
  346. setCheckSign={setCheckSign}
  347. setInvalidSign={setInvalidSign}
  348. spaceMap={spaceMap}
  349. refreshList={refreshList}
  350. ></PersonModal>
  351. )}
  352. {importVisible && (
  353. <ImportModal
  354. onUploadDone={(res) => {
  355. setImportVisible(false);
  356. setUploadResult(res);
  357. console.log(res);
  358. console.log(uploadResult);
  359. }}
  360. onClose={onImClose}
  361. ></ImportModal>
  362. )}
  363. {uploadResult && uploadResult.result == 'fail' && (
  364. <ImportError
  365. info={uploadResult}
  366. onClose={(type) => {
  367. console.log(type);
  368. if (type == 2) {
  369. setImportVisible(true);
  370. setUploadResult(null);
  371. } else {
  372. setUploadResult(null);
  373. }
  374. }}
  375. />
  376. )}
  377. {uploadResult && uploadResult.result == 'success' && (
  378. <ImportSuccess
  379. info={uploadResult}
  380. onClose={() => {
  381. setUploadResult(null);
  382. }}
  383. />
  384. )}
  385. </div>
  386. );
  387. };
  388. export default Member;