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

import * as React from 'react';
import { observer } from 'mobx-react';
import {
  List,
  Button,
  Divider,
  Flex,
  Layout,
  Empty,
  Image,
  Modal,
  Tag,
  message,
  Tooltip,
  Select,
  Form,
  Space,
  Row,
  Col,
  Input
} from 'antd';
import {
  PlusOutlined,
  FileOutlined,
  SettingOutlined,
  DeleteOutlined,
  StepForwardOutlined,
  SearchOutlined,
  ReloadOutlined,
  BookOutlined,
  TeamOutlined,
  AppstoreOutlined,
  EditOutlined
} from '@ant-design/icons';
import { apis } from '@/apis';
import './style.less';
import { PaginationConfig } from 'antd/es/pagination';
import router from '@/router';
import LocalStorage from '@/LocalStorage';
import { create } from 'domain';
import audit from '../../audit';
import { set } from 'mobx';
import IconSvg from "@/assets/public/icon.svg";

const { Header, Footer, Sider, Content } = Layout;
const { Option } = Select;
const FormItem = Form.Item;

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 = () => {
  const [ form ] = Form.useForm();
  
  interface Item {
    name : string,
    desc : string,
    appId : number,
    createBy : string,
    typeId : string;
    status : string;
    comment : string;
    auditStatus : string;
    projectName : string;
    updateTime : string;
  };
  
  interface PageInfo {
    pageNumber : number,
    pageSize : number,
    total : number,
  };
  
  type AppTypeList = {
    label : string,
    value : string,
  }[];
  
  type ProjectTypeList = {
    label : string,
    value : string,
  }[];
  
  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 [ appTypeList, setAppTypeList ] = React.useState<AppTypeList>( [] );
  const [ createFlag, setCreateFlag ] = React.useState( false );
  const [ deleteFlag, setDeleteFlag ] = React.useState( false );
  const [ updateFlag, setUpdateFlag ] = React.useState( false );
  const [ projectList, setProjectList ] = React.useState<ProjectTypeList>( [] );
  const [ appProjectList, setAppProjectList ] = React.useState<AppTypeList>( [] );
  const [ showSubPanel, setShowSubPanel ] = React.useState( false );
  const [ selectedType, setSelectedType ] = React.useState<string | null>( '全部' );
  const wrapperRef = React.useRef<HTMLDivElement>( null );
  const selectRef = React.useRef<any>( null );
  const [ levelTypeList, setLevelTypeList ] = React.useState<AppTypeList>( [] );
  
  const appApi = {
    fetchList: async ( typeId : any, projectId : any ) => {
      setListLoading( true );
      try {
        const userInfo = LocalStorage.getUserInfo();
        const userId = ( userInfo?.id ?? '' ).toString();
        const res = await apis.fetchTakaiAppList( {
          pageSize: page.pageSize,
          pageNumber: page.pageNumber,
          userId: userId,
          typeId: typeId,
          projectId: projectId,
        } )
        const list = res.rows.map( ( item : any ) => {
          return {
            name: item.name,
            desc: item.desc,
            appId: item.appId,
            createBy: item.createBy,
            typeId: item.typeId,
            status: item.status,
            comment: item.comment,
            auditStatus: item.auditStatus,
            projectName: item.projectName,
            updateTime: item.updateTime
          }
        } );
        const c = LocalStorage.getStatusFlag( 'deepseek:application:create' );
        const u = LocalStorage.getStatusFlag( 'deepseek:application:delete' );
        const filteredList = list.filter( ( item : any ) => {
          // 如果有 createFlag 或 updateFlag 权限，显示所有数据
          if ( c || u ) {
            return true;
          }
          // 没有权限时排除 status='5' 的数据
          return item.status !== '5';
        } );
        setList( filteredList );
        setPage( {
          pageNumber: page.pageNumber,
          pageSize: page.pageSize,
          total: res.total,
        } );
      } catch ( error ) {
        console.error( error );
      } finally {
        setListLoading( false );
      }
    },
    
    auditApplication: async ( appId : string, userId : string ) => {
      const res = await apis.auditTakaiApplicationLibApi( appId, userId );
      if ( res.data === 9 ) {
        message.error( '您没有添加审核人' );
      }
      await appApi.fetchList( null, null );
    }
  };
  
  // 删除应用
  const delApplication = async ( appId : string ) => {
    try {
      await apis.deleteTakaiApplicationApi( appId );
      await appApi.fetchList( null, null );
    } catch ( error ) {
      console.error( error );
    }
  }
  
  const indexApi = {
    fetchIndex: async ( typeId : any, projectId : any ) => {
      try {
        const userInfo = LocalStorage.getUserInfo();
        const userId = ( userInfo?.id ?? '' ).toString();
        const res = await apis.fetchTakaiIndexCount( {
          pageSize: page.pageSize,
          pageNumber: page.pageNumber,
          userId: userId,
          typeId: typeId,
          projectId: projectId,
        } )
        setAppCount( res.data.applicationCount );
        setKnowCount( res.data.knowledgeCount );
      } catch ( error ) {
        console.error( error );
      } finally {
        setListLoading( false );
      }
    }
  };
  
  // 获取应用类型
  const appTypeApi = {
    fetchAppType: async () => {
      try {
        const res = await apis.fetchTakaiAppTypeList( 'app_type' );
        const list = res.data.map( ( item : any ) => {
          return {
            label: item.dictLabel,
            value: item.dictCode,
          }
        } );
        setAppTypeList( list );
      } catch ( error : any ) {
        console.error( error );
      }
    },
  };
  
  // 项目级应用下的类型
  const appProTypeApi = {
    fetchAppProType: async () => {
      try {
        const res = await apis.fetchTakaiAppTypeList( 'project_type' );
        const list = res.data.map( ( item : any ) => {
          return {
            label: item.dictLabel,
            value: item.dictCode,
          }
        } );
        setAppProjectList( list );
      } catch ( error : any ) {
        console.error( error );
      }
    },
  };
  
  const projectApi = {
    fetchProject: async () => {
      try {
        const res = await apis.fetchTakaiProjectLibApi();
        const list = res.data.map( ( item : any ) => {
          return {
            label: item.projectName,
            value: item.projectId,
          }
        } );
        setProjectList( list );
      } catch ( error : any ) {
        console.error( error );
      }
    },
  };
  
  // 获取应用类型
  const levelTypeApi = {
    fetchLevelAppType: async () => {
      try {
        const res = await apis.fetchTakaiAppTypeList( 'project_type' );
        const list = res.data.map( ( item : any ) => {
          return {
            label: item.dictLabel,
            value: item.dictCode,
          }
        } );
        setLevelTypeList( list );
      } catch ( error : any ) {
        console.error( error );
      }
    },
  };
  
  const init = async () => {
    await appApi.fetchList( null, null );
    await indexApi.fetchIndex( null, null );
    await appTypeApi.fetchAppType();
    await projectApi.fetchProject();
    await appProTypeApi.fetchAppProType();
    await levelTypeApi.fetchLevelAppType();
    
    // 设置默认选择"全部"
    form.setFieldsValue({ typeId: '全部' });
  }
  
  React.useEffect( () => {
    setCreateFlag( LocalStorage.getStatusFlag( 'deepseek:application:create' ) );
    setDeleteFlag( LocalStorage.getStatusFlag( 'deepseek:application:delete' ) );
    setUpdateFlag( LocalStorage.getStatusFlag( 'deepseek:application:update' ) );
    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,
      } );
    },
  };
  
  // 点击查询
  const handleClickSearch = async () => {
    form.validateFields().then( async ( values ) => {
      if ( values.proTypeId ) {
        values.typeId = values.proTypeId;
      }
      await indexApi.fetchIndex( values.typeId, values.projectId );
      await appApi.fetchList( values.typeId, values.projectId );
    } ).catch( ( error ) => {
      console.error( error );
    } );
  };
  
  // 点击重置
  const handleClickReset = async () => {
    form.resetFields();
    setShowSubPanel( false );
    setSelectedType( '全部' ); // 重置为"全部"
    page.pageNumber = 1;
    page.pageSize = 10;
    await appApi.fetchList( null, null );
    await indexApi.fetchIndex( null, null );
  };
  
  /** 点击外部关闭面板 */
  React.useEffect( () => {
    const handleClickOutside = ( event : MouseEvent ) => {
      if ( wrapperRef.current && !wrapperRef.current.contains( event.target as Node ) ) {
        setShowSubPanel( false );
      }
    };
    
    document.addEventListener( 'mousedown', handleClickOutside, true );
    return () => {
      document.removeEventListener( 'mousedown', handleClickOutside, true );
    };
  }, [] );
  
  
  const handleAppTypeChange = ( value : string ) => {
    if ( value === '41' ) {
      // 如果是项目级应用，切换面板状态
      // setShowSubPanel(prev => !prev);
      setShowSubPanel( true );
    } else {
      // 其他选项，隐藏面板
      setShowSubPanel( false );
    }
    setSelectedType( value );
    form.setFieldsValue( { typeId: value } );
    
    // 自动提交逻辑
    if (value === '全部') {
      // 全部选项，传递null给后端
      appApi.fetchList( null, null );
      indexApi.fetchIndex( null, null );
    } else {
      // 其他选项，传递对应的typeId
      appApi.fetchList( value, null );
      indexApi.fetchIndex( value, null );
    }
  };
  
  const handleAppProTypeChange = ( value : string ) => {
    console.log( value, 'valuevalue' );
    
    setSelectedType( value );
    form.setFieldsValue( { typeId: value } );
  };
  
  return (
      <div>
        <div style={ { padding: '16px 20px' , display: 'flex' } }>
          <Form
              form={ form }
              layout='inline'
              colon={ false }
              style={{ flex: 1 }}
          >
            <div>
              {/* 主选择器 - 修改为按钮组形式 */}
              <FormItem
                  name="typeId"
                  style={ { marginBottom: 0 } }
              >
                <div className="filter-button-group">
                  {/* 全部按钮 */}
                  <Button
                    key="全部"
                    type={selectedType === '全部' ? 'primary' : 'default'}
                    size="small"
                    onClick={() => handleAppTypeChange('全部')}
                  >
                    全部
                  </Button>
                  {/* 动态应用类型按钮 */}
                  {appTypeList.map(item => {
                    // 根据label匹配对应的图标
                    let icon = null;
                    const isSelected = selectedType === item.value;
                    
                    if (item.label === '专业知识') {
                      icon = <BookOutlined style={{ fontSize: '14px', marginRight: '0' }} />;
                    } else if (item.label === '职能管理') {
                      icon = <TeamOutlined style={{ fontSize: '14px', marginRight: '0' }} />;
                    } else if (item.label === '项目级应用') {
                      icon = <AppstoreOutlined style={{ fontSize: '14px', marginRight: '0' }} />;
                    }
                    
                    return (
                      <Button
                        key={item.value}
                        type={isSelected ? 'primary' : 'default'}
                        size="small"
                        onClick={() => handleAppTypeChange(item.value)}
                      >
                        {icon}
                        {item.label}
                      </Button>
                    );
                  })}
                </div>
              </FormItem>
              
              {/* 子选项面板 */ }
              { showSubPanel && selectedType === '41' && (
                  
                  <FormItem
                      label='类型'
                      name='proTypeId'
                      rules={ [ { required: true, message: '类型不能为空' } ] }
                  >
                    <Select
                        placeholder='请选择'
                        allowClear
                        // style={ { width: 200 } }
                        onChange={(value) => {
                          // 项目类型选择器自动提交逻辑
                          const currentProjectId = form.getFieldValue('projectId');
                          appApi.fetchList(value, currentProjectId);
                          indexApi.fetchIndex(value, currentProjectId);
                        }}
                    >
                      {
                        appProjectList.map( ( item, index ) => {
                          return <Option value={ item.value } key={ index }>
                            { item.label }
                          </Option>
                        } )
                      }
                    </Select>
                  </FormItem>
              ) }
            </div>
            
            {/* {
                            appProjectList.map((subItem, index) => (
                                <div key={index}>
                                    {subItem.label}
                                </div>
                            ))
                        } */ }
            
            <FormItem
                // label='项目'
                name='projectId'
            >
              <Select
                  // style={ { width: '200px' } }
                  placeholder='请选择项目'
                  allowClear
                  onChange={(value) => {
                    // 项目选择器自动提交逻辑
                    const currentTypeId = form.getFieldValue('typeId');
                    const typeId = currentTypeId === '全部' ? null : currentTypeId;
                    appApi.fetchList(typeId, value);
                    indexApi.fetchIndex(typeId, value);
                  }}
              >
                {
                  projectList.map( ( item, index ) => {
                    return <Option value={ item.value } key={ index }>
                      { item.label }
                    </Option>
                  } )
                }
              </Select>
            </FormItem>
            
            
            <FormItem>
              <Space size={ 12 }>
                <Tooltip title="重置">
                  <Button
                    shape="circle"
                    icon={ <ReloadOutlined /> }
                    onClick={ handleClickReset }
                  />
                </Tooltip>
                <Tooltip title="查询">
                  <Button
                    type='primary'
                    shape="circle"
                    onClick={ handleClickSearch }
                    icon={ <SearchOutlined /> }
                  />
                </Tooltip>
              </Space>
            </FormItem>
            
            {/* {
                createFlag && (
                    
                    <div style={ { marginLeft: 'auto' } }>
                      <Button type='primary'
                              icon={ <PlusOutlined /> }
                              onClick={ () => {
                                router.navigate( { pathname: '/deepseek/questionAnswer/create' } );
                              } }>创建问答应用</Button>
                    </div>
                )
            } 
             */}
            {/* 创建按钮已移至面包屑组件 */}
          
          </Form>
        </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>*/ }
                {/*  /!*{*!/*/ }
                {/*  /!*    createFlag &&*!/*/ }
                {/*  /!*    <Button type='primary'*!/*/ }
                {/*  /!*            icon={ <PlusOutlined /> }*!/*/ }
                {/*  /!*            onClick={ () => {*!/*/ }
                {/*  /!*              router.navigate( { pathname: '/deepseek/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.projectName && item.projectName.length > 8 ?
                                                `${item.projectName.substring(0, 8)}...` :
                                                item.projectName
                                          }
                                        </span>
                                      </Space>
                                    </div>
                                  
                                  </div>
                                  <div>
                                    <>
                                      {/*{ item.projectName } 移动599 line*/}
                                      {
                                          ( item.status !== null && item.status !== '3' ) &&
                                          < Tag style={ {
                                            // marginLeft: 16,
                                            width: 65,
                                            color: '#fff',
                                            height: 24,
                                            backgroundColor: item.status === '1' ? '#D26900' : item.status === '2' ? '#408080' : item.auditStatus === '4' ? '#CE0000' : item.status === '5' ? '#5151A2' : ''
                                          } }>
                                            { item.status === '1' ? '待审核' : item.status === '2' ? '审核中' : item.auditStatus === '4' ? '审核拒绝' : item.status === '5' ? '待提交' : '未知' }
                                          </Tag>
                                      }
                                      
                                      {
                                          ( item.auditStatus === '4' ) &&
                                          <Tooltip title={ item.comment }>
                                            {
                                              item.comment !== '' && item.comment !== null && item.comment.length > 10 ?
                                                  item.comment.substring( 0, 10 ) + '......' :
                                                  item.comment
                                            }
                                          </Tooltip>
                                      }
                                    </>
                                  </div>
                                </div>
                                <Divider plain style={{ margin: '16px 0'}}></Divider>
                                <div className='desc'>
                                  {
                                    item.desc !== '' && item.desc !== null && item.desc.length > 40 ? item.desc.substring( 0, 40 ) + '......' : item.desc
                                  }
                                </div>
                                <div style={ {
                                  display: 'flex',
                                  justifyContent: 'space-between',
                                  alignItems: 'center'
                                }}>
                                  <span style={ {
                                    color: '#999',
                                    fontSize: 12,
                                    margin: 0
                                  } }>更新时间: { item.updateTime }</span>
                                </div>
                                <div style={ {
                                  display: 'flex',
                                  justifyContent: 'space-between',
                                  alignItems: 'flex-end',
                                  overflow: 'auto',
                                  // paddingTop: 16,
                                  // height: '100%'
                                } }>
                                  <div style={ { overflow: 'auto' } }>
                                    {
                                        ( item.status === '5' || item.status === '4' || item.status === '3' || item.status === '' || item.status === null ) &&
                                        <>
                                          {
                                              updateFlag &&
                                              <a
                                                  className="action-button"
                                                  style={ { marginRight: 16 } }
                                                  onClick={ () => {
                                                router.navigate( { pathname: '/deepseek/questionAnswer/modify' }, { state: { id: item.appId } } );
                                              } }>
                                                <EditOutlined /> 编辑
                                              </a>
                                          }
                                          
                                          {
                                              deleteFlag &&
                                              <a className='delete-button' onClick={ () => {
                                                Modal.confirm( {
                                                  title: '删除',
                                                  content: `确定删除应用: ` + item.name + ` 吗？`,
                                                  okType: 'danger',
                                                  onOk: async () => {
                                                    await delApplication( item.appId.toString() );
                                                  }
                                                } );
                                              } }>
                                                <DeleteOutlined /> 删除
                                              </a>
                                          }
                                        
                                        </>
                                    }
                                    
                                    {
                                        createFlag && item.status === '5' &&
                                        <a className="action-button" style={ { marginLeft: 16 } } onClick={ () => {
                                          Modal.confirm( {
                                            title: '提交审核',
                                            content: `确认提交审核应用: ` + item.name + `吗？`,
                                            okType: 'danger',
                                            onOk: async () => {
                                              const userInfo = LocalStorage.getUserInfo();
                                              const userId = ( userInfo?.id ?? '' ).toString();
                                              appApi.auditApplication( item.appId.toString(), userId );
                                            }
                                          } );
                                        } }>
                                          <StepForwardOutlined /> 提交审核
                                        </a>
                                    }
                                  </div>
                                  
                                  <div>
                                    <Tag
                                        style={ {
                                          // padding: '4px 8px',
                                          marginRight: 0,
                                          fontSize: 12,
                                          fontWeight: 600,
                                          background: '#f8f8f8',
                                          // border: '1px solid #d9d9d9'
                                        } }
                                    >
                                      {
                                          appTypeList
                                              .find( item1 => item1.value.toString() === item.typeId )?.label || levelTypeList.find( item2 => item2.value.toString() === item.typeId )?.label || '未分类'
                                      }
                                    </Tag>
                                  </div>
                                </div>
                              </div>
                            </List.Item>
                        ) }
                        pagination={ paginationConfig } // 分页
                  />
                </div>
              </div>
              :
              <div>
                {/* {
                    createFlag &&
                    <Button type='primary'
                            icon={ <PlusOutlined /> }
                            onClick={ () => {
                              router.navigate( { pathname: '/deepseek/questionAnswer/create' } );
                            } }>创建问答应用</Button>
                } */}
                <Empty image={ Empty.PRESENTED_IMAGE_SIMPLE } />
              </div>
        }
      </div>
  )
};

export default observer( QuestionAnswerList );