import React , { useState , useEffect } from 'react' ; import { Modal , Select , Pagination , message } from 'antd' ; import { ExclamationCircleOutlined } from '@ant-design/icons' ; import LinHeader from '@/components/base/lin-header/LinHeader' ; import LinTable , { ILinTableOperation , IColumnsItem , } from '@/components/base/lin-table/LinTable' ; import FormModal from './FormModal' ; import Admin from '@/lin/models/admin' ; import useAwait from '@/hooks/base/useAwait' ; import { MAX_SUCCESS_CODE } from '@/config/global' ; import { IAdminUserItem , IAdminUsers , IResponseWithoutData , } from '@/types/model' ; import './style/user-list.scss' ; const PAGE_COUNT = 10 ; const tableColumn = [ { dataIndex : 'username' , title : '名称' , ellipsis : true } , { dataIndex : 'groupNames' , title : '所属分组' , ellipsis : true } , ] ; export default function UserList ( ) { const [ tableData , setTableData ] = useState < IAdminUserItem [ ] > ( [ ] ) ; const [ total , setTotal ] = useState ( 0 ) ; const [ currentPage , setCurrentPage ] = useState ( 1 ) ; const [ modalFormVisible , setModalFormVisible ] = useState ( false ) ; const [ groupId , setGroupId ] = useState < number | undefined > ( undefined ) ; const [ editingRecord , setEditingRecord ] = useState < IAdminUserItem > ( { } as IAdminUserItem ) ; const [ loading , setLoading ] = useState ( true ) ; const operation = [ { name : '编辑' , func : handleEdit , type : 'primary' } , { name : '删除' , func : handleDelete , type : 'danger' } , ] ; const [ groups ] = useAwait ( Admin . getAllGroups , [ ] ) ; useEffect ( ( ) => { async function getAdminUsers ( ) { if ( ! loading ) return ; let res ; const page = currentPage - 1 ; try { setModalFormVisible ( false ) ; res = await Admin . getAdminUsers ( { page , group_id : groupId , count : PAGE_COUNT } ) ; res . items . forEach ( item => { item . group_ids = item . groups ; item . groupNames = item . group_ids . map ( item => item . name ) . join ( ',' ) ; delete item . groups ; } ) ; setTableData ( res . items ) ; setTotal ( res . total ) ; } catch ( e ) { console . log ( e ) ; } finally { setLoading ( false ) ; } } getAdminUsers ( ) ; } , [ loading , currentPage , groupId ] ) ; function onGroupChange ( groupId ) { setCurrentPage ( 1 ) ; setGroupId ( groupId ) ; setLoading ( true ) ; } function onPageChange ( page ) { setCurrentPage ( page ) ; setLoading ( true ) ; } function handleEdit ( text , record , index ) { setModalFormVisible ( true ) ; setEditingRecord ( record ) ; } function handleDelete ( text , record , index ) { Modal . confirm ( { title : '提示' , icon : < ExclamationCircleOutlined />, content : '此操作将永久删除该用户, 是否继续?' , okText : '确定' , centered : true , maskClosable : true , onOk : ( ) => deleteItem ( record ) } ) ; } async function deleteItem ( record ) { try { let res = await Admin . deleteOneUser ( record . id ) ; if ( res . code < MAX_SUCCESS_CODE ) { setLoading ( true ) ; message . success ( `${ res . message }` ) ; } else { setLoading ( false ) ; message . error ( `${ res . message }` ) ; } } catch ( e ) { setLoading ( false ) ; console . log ( e ) ; } } function refreshData ( ) { setLoading ( true ) ; } function closeEditModal ( ) { setModalFormVisible ( false ) ; } return ( < div className = 'user-list-container' > < LinHeader title = '用户列表' divider = { false } > { } < Select className = 'custom-antd group-select' allowClear placeholder = '请选择分组' onChange = { onGroupChange } > { groups . map ( item => ( < Select . Option key = { item . id } value = { item . id } > { item . name } < /Select.Option>))} < /Select> < /LinHeader> { } < LinTable bordered stripe verticalDivider = 'none' horizonalDivider = 'none' columns = { tableColumn } operation = { operation } dataSource = { tableData } rowKey = 'username' loading = { loading } pagination = { false } / > { } < div className = 'pagination' > < Pagination className = 'custom-antd' showQuickJumper current = { currentPage } pageSize = { PAGE_COUNT } total = { total } onChange = { onPageChange } / > < /div> { } < FormModal visible = { modalFormVisible } onCancel = { closeEditModal } refreshData = { refreshData } data = { editingRecord } / > < /div>); }