syzx/admin/src/pages/examinationrules/normal/components/AutoSelector.tsx

/** 
 * 模拟考试自动组卷 
 */

//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, InputNumber, message } from 'antd';
//import { FooterToolbar, PageContainer } from '@ant-design/pro-layout';
//import { useRequest } from 'umi';
//import { queryFakeList } from './service';
//import type { CardListItemDataType } from './data';
import styles from '../style.less';
//import SubMenu from 'antd/lib/menu/SubMenu';
//import ProCard from '@ant-design/pro-card';
//import ProList from '@ant-design/pro-list';
import { forwardRef, ReactText, useEffect, useImperativeHandle, useRef, useState } from 'react';
//import { PlusOutlined, DeleteOutlined, DownloadOutlined, UploadOutlined, EditOutlined, EyeOutlined, EyeInvisibleOutlined, DownOutlined } from '@ant-design/icons';
import { useParams, useRequest, history, useRouteMatch } from 'umi';
import { queryCourseView } from '@/pages/course/option/service';
import { queryQuestionList, queryQuestionType } from '@/pages/questionbank/service';
//import ProForm, { ProFormSelect } from '@ant-design/pro-form';
import { ActionType, EditableProTable, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { manualPaper } from '../service';
import ProCard from '@ant-design/pro-card';
import { ProFormField } from '@ant-design/pro-form';
//import dataSource from 'mock/dataSource';
import { queryListChapterBySubject } from '@/pages/course/subject/service';

export type TableListItem = {
  id: string;
  code: number;
  name: string;
  creator: string;
  status: string;
  createdAt: number;
  progress: number;
  money: number;
  memo: string;
};

type DataSourceType = {
  id: React.Key;
  title?: string;
  decs?: string;
  state?: string;
  created_at?: string;
  children?: DataSourceType[];
};

// 需要处理
// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
const AutoSelector = (props: any, ref: any) => {
  /** 获取章节数据 */
  // 获取主题id
  console.log('props subject_id', props)
  const { subjectId, questionType } = props;
  console.log('questionType', questionType)
  const [typeScore, setTypeScore] = useState([]) ; // 题型分数数组 [{"question_type":0,"chapter_list": [{ "chapter_id":3, "count":1 }]}]

  //const [dataSource, setDataSource] = useState<DataSourceType[]>(() => defaultData);

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '章节',
      dataIndex: 'chapter_name',
      width: '40%', 
      /*    
      renderFormItem: ( item, { defaultRender, ...rest }, form) => {
        return item?.entry?.title;
      },*/
    },
  ];

  /* 动态设置题型列 */
  questionType?.forEach((item)=>{
    columns.push({
      title: <>{item?.name} <Form.Item style={{margin:0}} name={`type${item?.code}`}><InputNumber defaultValue={0} style={{marginLeft:5}} /></Form.Item></>,
      //key: 'code',
      dataIndex: `type${item?.code}`,
      render: ( item, { defaultRender, ...rest }, form) => {
        return <Form.Item style={{margin:0}} ><InputNumber min={0} max={3} defaultValue={1} type='number'
          onChange={(value)=>{
            //
            const _data = [];
            console.log('typeScore',typeScore)
            typeScore?.forEach((item, key)=>{
              _data.push({...item, score_harf: ((index === key) ? value : item?.score_harf)})
            })
            setTypeScore(_data)
            console.log('setTypeScore',typeScore)
          }}
        /></Form.Item>;
      },
    })
  })


  // 暴露组件的方法 接受外部获取的ref
  useImperativeHandle(ref, () => ({
    // 构造ref的获取数据方法
    getData: () => { // 组卷数据
      return [];
    },
  }));

  return (
    <>
      <EditableProTable
        bordered
        recordCreatorProps={false}
        headerTitle={false}
        columns={columns}
        rowKey="id"
        // value={dataSource}
        request={async (value) => {
          const { data } = await queryListChapterBySubject({
            subject_id: subjectId,
            page_number: 1,
            page_size: 1000,
          });
          console.log('data--',data)
          const _data = [];
          data?.list.forEach((item)=>{
            _data.push({
              id: item?.chapter_id,
              chapter_name: item?.chapter_name,
            })
          })
          //chapter_name
          return {data: data?.list};
          /*
          return {
            current: data?.page_number,
            data: data?.list,
            pageSize: data?.page_size,
            success: true,
            total: data?.total_row || 0,
          };*/
        }}
        onChange={()=>{
          // setDataSource
        }}
        toolBarRender={false}
      />
    </>
  );
};
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
export default forwardRef( AutoSelector );