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, Cascader
} 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 keyword = form.getFieldValue('keyword');
        const res = await apis.fetchTakaiAppList({
          pageSize: page.pageSize,
          pageNumber: page.pageNumber,
          userId: userId,
          typeId: typeId,
          projectId: projectId,
          keyword: keyword,
        })
        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 keyword = form.getFieldValue('keyword');
        const res = await apis.fetchTakaiIndexCount({
          pageSize: page.pageSize,
          pageNumber: page.pageNumber,
          userId: userId,
          typeId: typeId,
          projectId: projectId,
          keyword: keyword,
        })
        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('projectTree');
        const list: AppTypeList = res.data;
        setAppProjectList(list);
        // const res = await apis.fetchTakaiAppTypeList('projectTree');
        // 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;
      }
      if (values.typeId === '全部') {
        values.typeId = null;
      }
      if(values.projectId instanceof Array && values.projectId.length == 2) {
          values.projectId = values.projectId[1];
      }
      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 name='projectId'>
            <Cascader
                options={appProjectList}
                placeholder="请选择项目"
                showSearch
            />
            {/*<Select*/}
            {/*  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 name='keyword'>*/}
          {/*  <Input placeholder='请输入关键字' allowClear />*/}
          {/*</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}
                              preview={false}
                            />
                          </div>
                          {/*<div style={ { overflow: 'auto' } }>*/}
                          {/*  { item.name }*/}
                          {/*</div>*/}

                          <div style={{
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'center',
                            height: '100%'
                          }}>
                            <Tooltip title={item.name} placement="top">
                              <div style={{
                                lineHeight: '18px',
                                fontSize: 14,
                                fontWeight: 500,
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                whiteSpace: 'nowrap',
                                // maxWidth: '200px', // 可以根据需要调整宽度
                                cursor: 'pointer'
                              }}>
                                {item.name.length > 20 ? `${item.name.substring(0, 30)}...` : item.name}
                              </div>
                            </Tooltip>
                            <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);