import { Button , Card , message , Table } from 'antd' ; import React , { Component } from 'react' ; import { PlusOutlined , ArrowRightOutlined } from '@ant-design/icons' ; import LinkButton from '../../components/link-button' ; import { reqCategorys } from '../../api' ; import { ModalStatusCode } from './ModalStatusCode' ; import { CategoryModel , ICategory } from './Model' ; import UpdateFrom from './UpdateFrom' ; import AddForm from './AddForm' ; interface ICategoryProps { } interface ICategoryState { categorys : ICategory [ ] ; loading : boolean ; parentId : string ; parentName : string ; showStatus : number ; } export default class Category extends Component < ICategoryProps , ICategoryState > { private columns : any [ ] = [ ] ; private defaultCategory : ICategory = { parentId : '' , _id : '' , name : '' , __v : 0 , categoryName : '' , parentName : '' , } ; constructor ( props ) { super ( props ) ; this . initColumns ( ) ; this . state = { loading : false , categorys : [ ] , parentId : '0' , parentName : '' , showStatus : 0 , } ; } componentDidMount ( ) { const { parentId } = this . state ; this . getCategory ( parentId ) ; } private getCategory = async ( parentId ) => { this . setLoading ( true ) ; const result = await reqCategorys ( parentId ) ; this . setLoading ( false ) ; if ( result . status !== 0 ) { message . error ( '获取分类列表失败' ) ; return ; } else { this . setCategorys ( result ) ; } } ; private setLoading = ( isLoading ) : void => { this . setState ( ( ) => { return { loading : isLoading , } ; } ) ; } ; private setCategorys = ( result ) : void => { let categorys = result . data . map ( ( item ) => { let tmp = { parentId : item . parentId , _id : String ( item . id ) , __v : 0 , name : item . name , categoryName : item . categoryName , parentName : item . parentName } ; return tmp ; } ) ; this . setState ( ( ) => { return { categorys : categorys , } ; } ) ; } ; name test msg param { category return { void } private showSubCategorys = ( category ) : void => { this . defaultCategory = category ; this . setState ( ( ) => { return { parentId : category . _id , parentName : category . name , } ; } , ( ) => { this . getCategory ( this . state . parentId ) ; } ) ; } ; name test msg return { type } private showCategorys = ( category = this . defaultCategory ) : void => { if ( category . _id === '' ) { this . setState ( ( ) => { return { parentId : '0' , parentName : '' } ; } , ( ) => { this . getCategory ( this . state . parentId ) ; } ) ; } else { this . showSubCategorys ( category ) ; } } ; name test msg param { type } return { type } private handleCancel = ( ) : void => { this . showModalWithMutiForm ( ModalStatusCode . Invisble ) ; } ; name test msg param { type } return { type } private showModalWithMutiForm = ( status = ModalStatusCode . Add ) : void => { this . setState ( { showStatus : status , } ) ; } ; private showUpdateCategory = ( category ) : void => { this . defaultCategory = category ; this . showModalWithMutiForm ( ModalStatusCode . Update ) ; } ; name test msg return private initColumns = ( ) : void => { this . columns = [ { title : '分类名称' , dataIndex : 'name' , } , { title : '操作' , width : 300 , render : ( category ) => ( < span > < LinkButton onClick = { ( ) => this . showUpdateCategory ( category ) } > 修改分类 < /LinkButton> { this . state . parentId === '0' ? ( < LinkButton onClick = { ( ) => { this . showCategorys ( category ) ; } } > 查看子分类 < /LinkButton>) : null} < /span>), } , ] ; } ; render ( ) { const { categorys , loading , parentName , parentId } = this . state ; const title = parentId === '0' ? ( '一级分类列表' ) : ( < span > < LinkButton onClick = { this . showCategorys . bind ( this ) } > 一级分类列表 < /LinkButton> < ArrowRightOutlined style = { { marginRight : '5px' } } /> < span > { parentName } < /span> < /span>); const extra = ( < Button type = "primary" icon = { < PlusOutlined / > } onClick = { ( ) => { this . showModalWithMutiForm ( ModalStatusCode . Add ) ; } } > 添加 < /Button>); return ( < Card title = { title } extra = { extra } > < Table rowKey = "_id" dataSource = { categorys } columns = { this . columns } bordered loading = { loading } pagination = { { defaultPageSize : 10 , showQuickJumper : true } } /> < AddForm category = { this . defaultCategory } showStatus = { this . state . showStatus } categorys = { this . state . categorys } onCancel = { this . handleCancel } updateCategory = { this . showCategorys } > < /AddForm> < UpdateFrom category = { this . defaultCategory } showStatus = { this . state . showStatus } onCancel = { this . handleCancel } updateCategory = { this . showCategorys } > < /UpdateFrom> < /Card>); } }