chat-admin-web/src/pages/platforms/zhipu/questionAnswer/list/index.tsx

import * as React from 'react';
import { observer } from 'mobx-react';
import { List, Button, Card, Space, Typography, Divider, Flex, Layout, Empty, Image, Modal } from 'antd';
import { PlusOutlined, FileOutlined, SettingOutlined, DeleteOutlined } from '@ant-design/icons';
import { apis } from '@/apis';
import './style.less';
import IconSvg from '@/assets/public/icon.svg';
import { PaginationConfig } from 'antd/es/pagination';
import router from '@/router';

const { Header, Footer, Sider, Content } = Layout;

const headerStyle : React.CSSProperties = {
  textAlign: 'center',
  height: 24,
  paddingInline: 48,
  lineHeight: '30px',
  backgroundColor: '#fff',
};

const contentStyle : React.CSSProperties = {
  textAlign: 'center',
  lineHeight: '40px',
  backgroundColor: '#fff',
};

const siderStyle : React.CSSProperties = {
  paddingLeft: 30,
  paddingTop: 30,
  height: 80,
  backgroundColor: '#fff',
};

const footerStyle : React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 24,
  backgroundColor: '#4096ff',
};

const layoutStyle = {
  borderRadius: 8,
  overflow: 'hidden',
  width: 'calc(10% - 8px)',
  maxWidth: 'calc(20% - 8px)',
};
const QuestionAnswerList : React.FC = () => {
  interface Item {
    name : string,
    desc : string,
    appId : number,
    createBy : string,
  };
  
  interface PageInfo {
    pageNumber : number,
    pageSize : number,
    total : number,
  };
  
  const [ listLoading, setListLoading ] = React.useState( false );
  const [ list, setList ] = React.useState<Item[]>( [] );
  const [ page, setPage ] = React.useState<PageInfo>( {
    pageNumber: 1,
    pageSize: 10,
    total: 0,
  } );
  const [ appCount, setAppCount ] = React.useState<string>();
  const [ knowCount, setKnowCount ] = React.useState<string>();
  const { Header, Footer, Sider, Content } = Layout;
  
  const appApi = {
    fetchList: async () => {
      setListLoading( true );
      try {
        const res = await apis.fetchAppList( {
          pageSize: page.pageSize,
          pageNumber: page.pageNumber
        } )
        setList( res.data.list );
        setPage( {
          pageNumber: page.pageNumber,
          pageSize: page.pageSize,
          total: res.data.total,
        } );
        console.log( page, 'res.data.total' );
      } catch ( error ) {
        console.error( error );
      } finally {
        setListLoading( false );
      }
    }
  };
  
  // 删除应用
  const delApplication = async ( appId : string ) => {
    try {
      await apis.deleteApplicationApi( appId );
      await appApi.fetchList();
    } catch ( error ) {
      console.error( error );
    }
  }
  
  const indexApi = {
    fetchIndex: async () => {
      try {
        const res = await apis.fetchIndexCount( {
          pageSize: page.pageSize,
          pageNumber: page.pageNumber
        } )
        setAppCount( res.data.applicationCount );
        setKnowCount( res.data.knowledgeCount );
        // setPage({
        //     pageNumber: page.pageNumber,
        //     pageSize: page.pageSize,
        //     total: res.data.total,
        // });
      } catch ( error ) {
        console.error( error );
      } finally {
        setListLoading( false );
      }
    }
  }
  
  const init = async () => {
    await appApi.fetchList();
    await indexApi.fetchIndex();
  }
  
  React.useEffect( () => {
    init();
  }, [ page.pageSize, page.pageNumber ] )
  
  const paginationConfig : PaginationConfig = {
    // 显示数据总量
    showTotal: ( total : number ) => {
      return `共 ${ total } 条`;
    },
    // 展示分页条数切换
    showSizeChanger: true,
    // 指定每页显示条数
    // pageSizeOptions: ['2', '20', '50', '100'],
    // 快速跳转至某页
    showQuickJumper: true,
    current: page.pageNumber,
    pageSize: page.pageSize,
    total: page.total,
    onChange: ( pageNumber, pageSize ) => {
      setPage( {
        pageNumber: pageNumber,
        pageSize: pageSize,
        total: page.total,
      } );
    },
  };
  
  
  return (
      <div>
        {
          list.length
              ?
              <div className='questionAnswerList'>
                {/*<div style={ { overflow: 'auto' } }>*/}
                {/*  <Flex gap="middle" wrap>*/}
                {/*    <Layout style={ layoutStyle }>*/}
                {/*      <Sider width="25%" style={ siderStyle }>*/}
                {/*        <FileOutlined />*/}
                {/*      </Sider>*/}
                {/*      <Layout>*/}
                {/*        <Header style={ headerStyle }>问答应用总数</Header>*/}
                {/*        <Content style={ contentStyle }>{ appCount }个</Content>*/}
                {/*      </Layout>*/}
                {/*    </Layout>*/}
                {/*    <Layout style={ layoutStyle }>*/}
                {/*      <Sider width="25%" style={ siderStyle }>*/}
                {/*        <FileOutlined />*/}
                {/*      </Sider>*/}
                {/*      <Layout>*/}
                {/*        <Header style={ headerStyle }>知识库总数</Header>*/}
                {/*        <Content style={ contentStyle }>{ knowCount } 个</Content>*/}
                {/*      </Layout>*/}
                {/*    </Layout>*/}
                {/*  </Flex>*/}
                {/*</div>*/}
                <div style={ { display: 'flex', justifyContent: 'space-between', padding: '16px 20px' } }>
                  <div>所有问答应用</div>
                  <Button type='primary'
                          icon={ <PlusOutlined /> }
                          onClick={ () => {
                            router.navigate( { pathname: '/zhipu/questionAnswer/create' } );
                          } }>创建问答应用</Button>
                </div>
                <div className='applicationList'>
                  <List grid={ {
                          gutter: 16,
                          xs: 1,
                          sm: 1,
                          md: 2,
                          lg: 2,
                          xl: 3,
                          xxl: 4, // 展示的列数
                        } }
                        dataSource={ list }
                        renderItem={ ( item ) => (
                            <List.Item>
                              <div className='card'>
                                <div style={ {
                                  display: 'flex',
                                  justifyContent: 'space-between',
                                  alignItems: 'center',
                                  overflow: 'auto'
                                } }>
                                  <div style={ { display: 'flex', alignItems: 'center', overflow: 'auto' } }>
                                    <div style={ { marginRight: 10, overflow: 'auto' } }>
                                      <Image
                                          width={ 32 }
                                          height={ 32 }
                                          src={ IconSvg }
                                      />
                                    </div>
                                    {/*<div style={ { overflow: 'auto' } }>*/ }
                                    {/*  { item.name }*/ }
                                    {/*</div>*/ }
                                    
                                    <div style={ {
                                      display: 'flex',
                                      flexDirection: 'column',
                                      justifyContent: 'center',
                                      height: '100%'
                                    } }>
                                      <div style={ {
                                        lineHeight: '18px',
                                        fontSize: 14,
                                        fontWeight: 500,
                                        overflow: 'auto'
                                      } }>{ item.name }</div>
                                      <Space size={ 4 } style={ { lineHeight: '18px' } }>
                                        <span style={ {
                                          color: '#999',
                                          fontSize: 12,
                                          margin: 0
                                        } }>ID:{ item.appId }</span>
                                        <Divider type="vertical" style={ { color: '999', margin: 0, height: 12 } } />
                                        {/*<span style={ { color: '#999', fontSize: 12 } }>创建者  { item.createBy }</span>*/ }
                                      </Space>
                                    </div>
                                  </div>
                                
                                </div>
                                <Divider plain style={ { margin: '16px 0' } }></Divider>
                                
                                <div className='desc'>
                                  {
                                    item.desc !== '' && item.desc.length > 40 ? item.desc.substring( 0, 40 ) + '...' : item.desc
                                  }
                                </div>
                                
                                <div style={ {
                                  display: 'flex',
                                  justifyContent: 'space-between',
                                  // justifyContent: 'flex-end',
                                  alignItems: 'flex-end',
                                  height: '100%',
                                  overflow: 'auto',
                                  paddingTop: 16,} }>
                                  <span style={ { color: '#999', fontSize: 12 } }>创建时间: {item.createTime}</span>
                                  <Space size={ 16 } align="center">
                                    <a onClick={ () => {
                                      router.navigate( { pathname: '/zhipu/questionAnswer/modify' }, { state: { id: item.appId } } );
                                    } }>
                                      <SettingOutlined /> 编辑
                                    </a>
                                    <a className='text-error' onClick={ () => {
                                      Modal.confirm( {
                                        title: '删除',
                                        content: `确定删除应用名称: ` + item.name + ` 吗？`,
                                        okType: 'danger',
                                        onOk: async () => {
                                          await delApplication( item.appId.toString() );
                                        }
                                      } );
                                    } }>
                                      <DeleteOutlined /> 删除
                                    </a>
                                  </Space>
                                </div>
                              </div>
                            </List.Item>
                        ) }
                        pagination={ paginationConfig } // 分页
                  />
                </div>
              </div>
              :
              <Empty image={ Empty.PRESENTED_IMAGE_SIMPLE } />
        }
      </div>
  )
};

export default observer( QuestionAnswerList );