|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
/** 资质考试 */
|
|
|
|
|
//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
|
|
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Tag, Dropdown } from 'antd';
|
|
|
|
|
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Tag, Dropdown, Upload } from 'antd';
|
|
|
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
|
|
|
|
//import { useRequest } from 'umi';
|
|
|
|
|
//import { queryFakeList } from './service';
|
|
|
|
|
@ -9,62 +9,38 @@ 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 { ReactText, useState } from 'react';
|
|
|
|
|
import { ReactText, useEffect, useState } from 'react';
|
|
|
|
|
import { PlusOutlined, DeleteOutlined, DownloadOutlined, UploadOutlined, EditOutlined, EyeOutlined, EyeInvisibleOutlined, DownOutlined } from '@ant-design/icons';
|
|
|
|
|
import { exportQuestionTemplate, queryQuestionList, queryQuestionType } from './service';
|
|
|
|
|
import { useRequest } from 'umi';
|
|
|
|
|
import { queryCourseView } from '@/pages/course/option/service';
|
|
|
|
|
//const { Paragraph } = Typography;
|
|
|
|
|
const QuestionBank = () => {
|
|
|
|
|
|
|
|
|
|
const [questionType, setQuestionType] = useState([]);
|
|
|
|
|
const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
|
|
|
|
|
const [expandedDescRowKeys, setExpandedDescRowKeys] = useState<readonly ReactText[]>([]); // 展开解析设置
|
|
|
|
|
const [addType, setAddType] = useState(0);
|
|
|
|
|
const numbers = [];
|
|
|
|
|
for(let i=0;i<50;i++){
|
|
|
|
|
numbers.push({id: `${i}`})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const dataSource = [
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: '下面哪个词语能体现未来思维？',
|
|
|
|
|
type: '单选',
|
|
|
|
|
options: [
|
|
|
|
|
{label: '井底之蛙', value: 'A'},
|
|
|
|
|
{label: '鼠目寸光', value: 'B'},
|
|
|
|
|
{label: '未雨绸缪', value: 'C'},
|
|
|
|
|
{label: '即时行乐', value: 'D'},
|
|
|
|
|
],
|
|
|
|
|
const labels = ['A','B','C','D','E']
|
|
|
|
|
|
|
|
|
|
time: '2022/12/12',
|
|
|
|
|
tag: '生涯理论',
|
|
|
|
|
course: '特质因素理论',
|
|
|
|
|
/** 获取题型 */
|
|
|
|
|
const { data } = useRequest(() => {
|
|
|
|
|
return queryQuestionType();
|
|
|
|
|
},{
|
|
|
|
|
formatResult: (result) => {
|
|
|
|
|
return result.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
/*
|
|
|
|
|
const { data: template } = useRequest(() => {
|
|
|
|
|
return exportQuestionTemplate();
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setQuestionType(data || []);
|
|
|
|
|
}, [data]);
|
|
|
|
|
|
|
|
|
|
answer:'C',
|
|
|
|
|
desc: '该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
name: 'Ant Design',
|
|
|
|
|
type: '多选',
|
|
|
|
|
image:
|
|
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
|
|
|
|
desc: '我是一条测试的描述',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
name: '蚂蚁金服体验科技',
|
|
|
|
|
type: '判断',
|
|
|
|
|
image:
|
|
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
|
|
|
|
desc: '我是一条测试的描述',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 4,
|
|
|
|
|
name: 'TechUI',
|
|
|
|
|
type: '单选',
|
|
|
|
|
image:
|
|
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
|
|
|
|
desc: '我是一条测试的描述',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<PageContainer content={false} extraContent={false} className={styles.questionbank}>
|
|
|
|
|
@ -76,11 +52,17 @@ const QuestionBank = () => {
|
|
|
|
|
showSizeChanger: false,
|
|
|
|
|
}}
|
|
|
|
|
toolBarRender={() => {
|
|
|
|
|
const menuItems = [];
|
|
|
|
|
console.log('toolBarRender', questionType);
|
|
|
|
|
if(questionType?.length > 0){
|
|
|
|
|
console.log('push');
|
|
|
|
|
questionType.forEach((item: {code: number, name: string})=>{
|
|
|
|
|
menuItems.push(<Menu.Item key={item?.code}>{item?.name}</Menu.Item>)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const menu = (
|
|
|
|
|
<Menu onClick={(value)=>setAddType(value)}>
|
|
|
|
|
<Menu.Item key="1">单选</Menu.Item>
|
|
|
|
|
<Menu.Item key="2">多选</Menu.Item>
|
|
|
|
|
<Menu.Item key="3">判断</Menu.Item>
|
|
|
|
|
{menuItems}
|
|
|
|
|
</Menu>
|
|
|
|
|
);
|
|
|
|
|
return [
|
|
|
|
|
@ -92,15 +74,27 @@ const QuestionBank = () => {
|
|
|
|
|
<Button key="remove" type="default" danger>
|
|
|
|
|
<DeleteOutlined /> 批量删除
|
|
|
|
|
</Button>,
|
|
|
|
|
<Button key="download" >
|
|
|
|
|
<Button key="download" onClick={()=>{window.location.href='/dsideal_yy/zygh/training/exportQuestionTemplate'}} >
|
|
|
|
|
<DownloadOutlined /> 下载模板
|
|
|
|
|
</Button>,
|
|
|
|
|
<Upload
|
|
|
|
|
accept='.xlsx'
|
|
|
|
|
showUploadList={false}
|
|
|
|
|
action="/dsideal_yy/res/plupload/"
|
|
|
|
|
data={
|
|
|
|
|
{
|
|
|
|
|
type: 0,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<Button key="upload" >
|
|
|
|
|
<UploadOutlined /> 批量上传
|
|
|
|
|
</Button>,
|
|
|
|
|
</Button>
|
|
|
|
|
</Upload>,
|
|
|
|
|
];
|
|
|
|
|
}}
|
|
|
|
|
onRow={(record: any) => {
|
|
|
|
|
/*
|
|
|
|
|
return {
|
|
|
|
|
onMouseEnter: () => {
|
|
|
|
|
console.log(record);
|
|
|
|
|
@ -108,12 +102,45 @@ const QuestionBank = () => {
|
|
|
|
|
onClick: () => {
|
|
|
|
|
console.log(record);
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
};*/
|
|
|
|
|
}}
|
|
|
|
|
rowKey="id"
|
|
|
|
|
headerTitle={false}
|
|
|
|
|
tooltip={false}
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
request={async (value) => {
|
|
|
|
|
console.log('value', value)
|
|
|
|
|
/*
|
|
|
|
|
const { create_time } = value;
|
|
|
|
|
if (create_time) {
|
|
|
|
|
value.begin_time = create_time[0]
|
|
|
|
|
value.end_time = create_time[1]
|
|
|
|
|
}*/
|
|
|
|
|
|
|
|
|
|
const questions = await queryQuestionList({
|
|
|
|
|
...value,
|
|
|
|
|
type: 0,
|
|
|
|
|
page_number: value?.current || 1,
|
|
|
|
|
page_size: value?.pageSize,
|
|
|
|
|
});
|
|
|
|
|
// 课程名称及课程标签
|
|
|
|
|
console.log('data',questions);
|
|
|
|
|
const data = []
|
|
|
|
|
for(let i=0; i<questions?.table_List.length; i++){
|
|
|
|
|
const { data: course } = await queryCourseView({
|
|
|
|
|
course_id: questions?.table_List[i]?.course_id
|
|
|
|
|
});
|
|
|
|
|
data[i] = {...questions?.table_List[i], course_name:course?.course_name, tag_name:course?.tag_name, };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
current: questions?.pageNumber,
|
|
|
|
|
data: data,
|
|
|
|
|
pageSize: questions?.pageSize,
|
|
|
|
|
success: true,
|
|
|
|
|
total: questions?.totalRow || 0,
|
|
|
|
|
};
|
|
|
|
|
}}
|
|
|
|
|
//dataSource={dataSource}
|
|
|
|
|
rowSelection={{
|
|
|
|
|
onChange: (_, selectedRows) => {
|
|
|
|
|
setSelectedRows(selectedRows);
|
|
|
|
|
@ -124,29 +151,42 @@ const QuestionBank = () => {
|
|
|
|
|
showExtra="always"
|
|
|
|
|
metas={{
|
|
|
|
|
title: {
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
dataIndex: 'question_stem',
|
|
|
|
|
render: (text: React.ReactNode, record: T, index: number) => `1. ${text}`,
|
|
|
|
|
},
|
|
|
|
|
avatar: {
|
|
|
|
|
dataIndex: 'type',
|
|
|
|
|
dataIndex: 'question_type',
|
|
|
|
|
valueType: 'text',
|
|
|
|
|
render: (text: React.ReactNode, record: T, index: number) => `[${record.type}]`,
|
|
|
|
|
render: (text: React.ReactNode, record: T, index: number) => {
|
|
|
|
|
const type = questionType?.filter((item, idx, self)=>{
|
|
|
|
|
console.log('FFFF', item, idx, self);
|
|
|
|
|
return item?.code === record.question_type
|
|
|
|
|
});
|
|
|
|
|
console.log('type', type?.name);
|
|
|
|
|
console.log('type', type?.name);
|
|
|
|
|
console.log('questionType::::',questionType);
|
|
|
|
|
return `[${type[0]?.name}]`
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
description: {
|
|
|
|
|
dataIndex: 'options',
|
|
|
|
|
dataIndex: 'answers',
|
|
|
|
|
valueType: 'checkbox',
|
|
|
|
|
render: (text: React.ReactNode, record: T, index: number) => {
|
|
|
|
|
console.log('description answers', record)
|
|
|
|
|
return (
|
|
|
|
|
<List
|
|
|
|
|
header={false}
|
|
|
|
|
footer={false}
|
|
|
|
|
bordered={false}
|
|
|
|
|
dataSource={record.options || []}
|
|
|
|
|
renderItem={item => (
|
|
|
|
|
dataSource={record.answers || []}
|
|
|
|
|
rowKey='id'
|
|
|
|
|
renderItem={ (item, key) => {
|
|
|
|
|
console.log('item', item);
|
|
|
|
|
return (
|
|
|
|
|
<List.Item>
|
|
|
|
|
<Typography.Text mark={false}>{`${item?.value}. ${item?.label}`}</Typography.Text>
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
<Typography.Text mark={false}>{`${(record?.question_type === 2) ? ['T','F'][key] : labels[key]}. ${item?.answer}`}</Typography.Text>
|
|
|
|
|
</List.Item>)
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
@ -154,24 +194,57 @@ const QuestionBank = () => {
|
|
|
|
|
subTitle: { },
|
|
|
|
|
content: {
|
|
|
|
|
render: (text: React.ReactNode, record: T, index: number) => {
|
|
|
|
|
let answer = '';
|
|
|
|
|
const answertrue = record?.answertrue?.split(',');
|
|
|
|
|
console.log('answertrue', answertrue)
|
|
|
|
|
/** 题型 */
|
|
|
|
|
switch(record?.question_type){
|
|
|
|
|
case 0: // 单选
|
|
|
|
|
case 1: // 多选
|
|
|
|
|
answer = labels?.filter((x, idx, self)=>answertrue[idx] === `${idx}`).toString()
|
|
|
|
|
break;
|
|
|
|
|
case 2: // 判断
|
|
|
|
|
answer = ['T', 'F']?.filter((x, idx, self)=>answertrue[idx] === `${idx}`).toString()
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
console.log('expandedDescRowKeys', expandedDescRowKeys)
|
|
|
|
|
if(expandedDescRowKeys?.indexOf(record.id) > -1){
|
|
|
|
|
return (
|
|
|
|
|
<Space direction="vertical" style={{border:'solid 1px #f0f0f0;',padding:10}}>
|
|
|
|
|
<Typography>正确答案：{record.answer}</Typography>
|
|
|
|
|
<Space direction="vertical" style={{borderTop:'solid 1px #f0f0f0', padding:10, margin: '5px -18px 0 -24px', background: '#fdfdfd'}}>
|
|
|
|
|
<Typography>正确答案：
|
|
|
|
|
{answer}
|
|
|
|
|
</Typography>
|
|
|
|
|
<Typography>解析：{record.desc}</Typography>
|
|
|
|
|
</Space>
|
|
|
|
|
);
|
|
|
|
|
}else{
|
|
|
|
|
return (
|
|
|
|
|
<Space direction="vertical" style={{borderTop:'solid 1px #f0f0f0', padding:10, margin: '5px -18px 0 -24px', background: '#fdfdfd'}}>
|
|
|
|
|
<Typography>正确答案：
|
|
|
|
|
{answer}
|
|
|
|
|
</Typography>
|
|
|
|
|
</Space>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
actions: {
|
|
|
|
|
cardActionProps: 'extra',
|
|
|
|
|
render: (text: React.ReactNode, record: T, _index: number) => {
|
|
|
|
|
let eye
|
|
|
|
|
if(expandedDescRowKeys?.indexOf(record.id) > -1){
|
|
|
|
|
eye = <><EyeInvisibleOutlined /> 隐藏解析</>
|
|
|
|
|
}else{
|
|
|
|
|
eye = <><EyeOutlined /> 查看解析</>
|
|
|
|
|
}
|
|
|
|
|
return(
|
|
|
|
|
<Row style={{padding:'10px 24px'}}>
|
|
|
|
|
<Col flex={1} style={{textAlign:'left'}}>
|
|
|
|
|
<Space direction="horizontal" size="large">
|
|
|
|
|
<Typography>创建时间：{record.time}</Typography>
|
|
|
|
|
<Typography>标签：{record.tag}</Typography>
|
|
|
|
|
<Typography>所属课程：{record.course}</Typography>
|
|
|
|
|
<Typography>创建时间：{record?.create_time}</Typography>
|
|
|
|
|
<Typography>标签：{record?.tag_name}</Typography>
|
|
|
|
|
<Typography>所属课程：{record?.course_name}</Typography>
|
|
|
|
|
</Space>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col flex={1} style={{textAlign:'right'}}>
|
|
|
|
|
@ -185,12 +258,21 @@ const QuestionBank = () => {
|
|
|
|
|
<a
|
|
|
|
|
key="view"
|
|
|
|
|
onClick={()=>{
|
|
|
|
|
if(expandedDescRowKeys?.indexOf(record.id) > -1){
|
|
|
|
|
const descRowKeys = expandedDescRowKeys?.filter((item, idx, self)=>{
|
|
|
|
|
console.log('FFFF', item, idx, self);
|
|
|
|
|
return item !== record.id
|
|
|
|
|
});
|
|
|
|
|
setExpandedDescRowKeys([...descRowKeys]);
|
|
|
|
|
}else{
|
|
|
|
|
setExpandedDescRowKeys([...expandedDescRowKeys, record.id]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('record id:', record.id);
|
|
|
|
|
console.log('expandedDescRowKeys', expandedDescRowKeys)
|
|
|
|
|
console.log('expandedDescRowKeys......', expandedDescRowKeys)
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<EyeOutlined /> <EyeInvisibleOutlined /> 查看解析
|
|
|
|
|
{eye}
|
|
|
|
|
</a>
|
|
|
|
|
</Space>
|
|
|
|
|
</Col>
|
|
|
|
|
|
