import React , { useState , useEffect } from 'react' ; import { Modal , 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 { MAX_SUCCESS_CODE } from '@/config/global' ; import { IGroupItem , IResponseWithoutData } from '@/types/model' ; import './style/group-list.scss' ; const tableColumn = [ { dataIndex : 'name' , title : '名称' , ellipsis : true } , { dataIndex : 'info' , title : '信息' , ellipsis : true } , ] ; export default function GroupList ( ) { const [ tableData , setTableData ] = useState < IGroupItem [ ] > ( [ ] ) ; const [ modalFormVisible , setModalFormVisible ] = useState ( false ) ; const [ editingRecord , setEditingRecord ] = useState < IGroupItem > ( { } as IGroupItem ) ; const [ loading , setLoading ] = useState ( true ) ; const operation = [ { name : '编辑' , func : handleEdit , type : 'primary' } , { name : '删除' , func : handleDelete , type : 'danger' } , ] ; useEffect ( ( ) => { getAllGroups ( ) ; } , [ ] ) ; async function getAllGroups ( ) { try { setModalFormVisible ( false ) ; const tableData = await Admin . getAllGroups ( ) ; setTableData ( tableData ) ; } catch ( e ) { console . log ( e ) ; } finally { setLoading ( false ) ; } } 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 { setLoading ( true ) ; let res = await Admin . deleteOneGroup ( record . id ) ; if ( res . code < MAX_SUCCESS_CODE ) { message . success ( `${ res . message }` ) ; await getAllGroups ( ) ; } else { message . error ( `${ res . message }` ) ; } } catch ( e ) { console . log ( e ) ; } finally { setLoading ( false ) ; } } function closeEditModal ( ) { setModalFormVisible ( false ) ; } return ( < div className = 'group-list-container' > < LinHeader title = '分组列表信息' divider = { false } / > { } < LinTable bordered stripe verticalDivider = 'none' horizonalDivider = 'none' columns = { tableColumn } operation = { operation } dataSource = { tableData } rowKey = 'id' loading = { loading } pagination = { false } / > { } < FormModal visible = { modalFormVisible } onCancel = { closeEditModal } refreshData = { getAllGroups } data = { editingRecord } / > < /div>); }