|
@@ -0,0 +1,130 @@
|
|
|
|
+import { useSize } from 'ahooks';
|
|
|
|
+import { App, Button, Card, DatePicker, Input, Pagination, Table } from 'antd';
|
|
|
|
+import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
+import SearchBox from '../../components/searchBox';
|
|
|
|
+import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
|
+import { delProjectGroupsApi, getProjectGroupsListApi, GetProjectGroupsListProps } from '../../API/groupManage';
|
|
|
|
+import { useAjax } from '@/Hook/useAjax';
|
|
|
|
+import GroupModal from './groupModal';
|
|
|
|
+import style from '../bookLink/index.less'
|
|
|
|
+import { GroupTableConfig } from './tableConfig';
|
|
|
|
+import UpdateUser from './updateUser';
|
|
|
|
+
|
|
|
|
+const GroupManage: React.FC = () => {
|
|
|
|
+
|
|
|
|
+ /*******************************************/
|
|
|
|
+ const { message } = App.useApp();
|
|
|
|
+ const ref = useRef<HTMLDivElement>(null)
|
|
|
|
+ const size = useSize(ref)
|
|
|
|
+
|
|
|
|
+ const [queryParams, setQueryParams] = useState<GetProjectGroupsListProps>({ pageNum: 1, pageSize: 20 })
|
|
|
|
+ const [queryParamsNew, setQueryParamsNew] = useState<GetProjectGroupsListProps>({ pageNum: 1, pageSize: 20 })
|
|
|
|
+ const [visible, setVisible] = useState<boolean>(false)
|
|
|
|
+ const [initialValues, setInitialValues] = useState<any>()
|
|
|
|
+ const [userData, setUserData] = useState<{ data: any, visible: boolean }>({ data: undefined, visible: false })
|
|
|
|
+
|
|
|
|
+ const getProjectGroupsList = useAjax((params) => getProjectGroupsListApi(params))
|
|
|
|
+ const delProjectGroups = useAjax((params) => delProjectGroupsApi(params))
|
|
|
|
+ /*******************************************/
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ getProjectGroupsList.run(queryParamsNew)
|
|
|
|
+ }, [queryParamsNew])
|
|
|
|
+
|
|
|
|
+ const handleUser = (data: any) => {
|
|
|
|
+ setUserData({ data, visible: true })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const handleEdit = (data: any) => {
|
|
|
|
+ setInitialValues(data)
|
|
|
|
+ setVisible(true)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const handleDel = (groupId: number) => {
|
|
|
|
+ delProjectGroups.run(groupId).then(res => {
|
|
|
|
+ getProjectGroupsList.refresh()
|
|
|
|
+ message.success('删除成功')
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return <Card
|
|
|
|
+ styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', height: 'calc(100vh - 88px)', overflow: 'hidden' } }}
|
|
|
|
+ >
|
|
|
|
+ <div>
|
|
|
|
+ <SearchBox
|
|
|
|
+ bodyPadding={`10px 16px 4px`}
|
|
|
|
+ buttons={<>
|
|
|
|
+ <Button type="primary" onClick={() => {
|
|
|
|
+ setQueryParamsNew({ ...queryParams, pageNum: 1 })
|
|
|
|
+ }} loading={getProjectGroupsList.loading} icon={<SearchOutlined />}>搜索</Button>
|
|
|
|
+ <Button type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)}>新增项目组</Button>
|
|
|
|
+ </>}
|
|
|
|
+ >
|
|
|
|
+ <>
|
|
|
|
+ <Input onChange={(e) => setQueryParams({ ...queryParams, name: e.target.value as any })} value={queryParams?.name} placeholder="项目组名称" allowClear />
|
|
|
|
+ <DatePicker.RangePicker placeholder={['开始时间创建', '结束时间创建']} onChange={(date, dateString) => setQueryParams({ ...queryParams, createTimeStart: dateString[0], createTimeEnd: dateString[1] })} />
|
|
|
|
+ </>
|
|
|
|
+ </SearchBox>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div className={style.bookLinkTable} ref={ref}>
|
|
|
|
+ <Table
|
|
|
|
+ dataSource={getProjectGroupsList?.data?.data?.records}
|
|
|
|
+ columns={GroupTableConfig(handleUser, handleEdit, handleDel)}
|
|
|
|
+ bordered
|
|
|
|
+ className='resetTable'
|
|
|
|
+ pagination={false}
|
|
|
|
+ rowKey={'id'}
|
|
|
|
+ size='small'
|
|
|
|
+ loading={getProjectGroupsList?.loading}
|
|
|
|
+ scroll={{ y: size?.height && ref.current ? size?.height - ref.current.querySelector('.ant-table-thead').clientHeight : 300 }}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div className={style.bookLinkPagination}>
|
|
|
|
+ <Pagination
|
|
|
|
+ size="small"
|
|
|
|
+ total={getProjectGroupsList?.data?.data?.total || 0}
|
|
|
|
+ showSizeChanger
|
|
|
|
+ showQuickJumper
|
|
|
|
+ pageSize={getProjectGroupsList?.data?.data?.size || 20}
|
|
|
|
+ current={getProjectGroupsList?.data?.data?.current || 1}
|
|
|
|
+ onChange={(page: number, pageSize: number) => {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ setQueryParams({ ...queryParams, pageNum: page, pageSize })
|
|
|
|
+ setQueryParamsNew({ ...queryParamsNew, pageNum: page, pageSize })
|
|
|
|
+ }, 50)
|
|
|
|
+ }}
|
|
|
|
+ showTotal={(total: number) => <span style={{ fontSize: 12 }}>共 {total} 条</span>}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {/* 新增项目组 */}
|
|
|
|
+ {visible && <GroupModal
|
|
|
|
+ visible={visible}
|
|
|
|
+ initialValues={initialValues}
|
|
|
|
+ onChange={() => {
|
|
|
|
+ setVisible(false)
|
|
|
|
+ setInitialValues(undefined)
|
|
|
|
+ getProjectGroupsList.refresh()
|
|
|
|
+ }}
|
|
|
|
+ onClose={() => {
|
|
|
|
+ setInitialValues(undefined)
|
|
|
|
+ setVisible(false)
|
|
|
|
+ }}
|
|
|
|
+ />}
|
|
|
|
+
|
|
|
|
+ {/* 修改用户 */}
|
|
|
|
+ {userData?.visible && <UpdateUser
|
|
|
|
+ {...userData}
|
|
|
|
+ onClose={() => {
|
|
|
|
+ setUserData({ data: undefined, visible: false })
|
|
|
|
+ }}
|
|
|
|
+ onChange={() => {
|
|
|
|
+ setUserData({ data: undefined, visible: false })
|
|
|
|
+ getProjectGroupsList.refresh()
|
|
|
|
+ }}
|
|
|
|
+ />}
|
|
|
|
+ </Card>
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+export default GroupManage;
|