Skip to content

X
xiaomai-cloud-class-web
Commit 29c47994 by yuananting
Options

fix:解决合并培训计划空状态图的分支冲突

parents 96753369 1be68445
Showing with 562 additions and 530 deletions
src/modules/plan-manage/components/EmployeeShareData.jsx
import React from 'react';
import { withRouter } from "react-router-dom";
import {Table, Modal,Input,message} from 'antd';
import { PageControl } from "@/components";
import PlanService from '@/domains/plan-domain/planService'
import { withRouter } from 'react-router-dom';
import { Input } from 'antd';
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user';
import Bus from '@/core/bus';
import './EmployeeShareData.less';
......@@ -10,103 +11,129 @@ import './EmployeeShareData.less';
const { Search } = Input;
const UserRole = {
Store_Manager: {
text: "学院管理员"
text: '学院管理员',
},
Cloud_Manager: {
text:"管理员"
text: '管理员',
},
Cloud_Operator: {
text:'运营师'
text: '运营师',
},
Cloud_Lecture: {
text:"讲师"
text: '讲师',
},
};
class EmployeeShareData extends React.Component {
constructor(props) {
super(props);
const id = getParameterByName("id");
const id = getParameterByName('id');
this.state = {
id,
dataSource:[],
size:10,
dataSource: [],
size: 10,
query: {
current: 1,
},
totalCount:0,
}
totalCount: 0,
};
}
componentDidMount(){
componentDidMount() {
this.handleFetchDataList();
}
handleFetchDataList = ()=>{
const { query ,size,id} = this.state;
const params ={
handleFetchDataList = () => {
const { query, size, id } = this.state;
const params = {
...query,
size,
planId:id,
storeId:User.getStoreId(),
}
planId: id,
storeId: User.getStoreId(),
};
PlanService.getPlanUserRecordPage(params).then((res) => {
const { result = {} } = res ;
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
dataSource: records,
totalCount: Number(total)
dataSource: records,
totalCount: Number(total),
});
});
}
};
onShowSizeChange = (current, size) => {
if (current == size) {
return
return;
}
this.setState({
size
},()=>{this.handleFetchDataList()})
}
handleChangeTable = (pagination, filters, sorter)=> {
this.setState(
{
size,
},
() => {
this.handleFetchDataList();
}
);
};
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
const { query } = this.state;
let _columnKey;
let _columnKey;
let _order;
if (columnKey === 'learnNum' && order === 'ascend') { _columnKey="LEARN_NUM"; _order = 'SORT_ASC'; }
if (columnKey === 'learnNum' && order === 'descend') { _columnKey="LEARN_NUM"; _order = 'SORT_DESC'; }
if (columnKey === 'learnNum' && order === 'ascend') {
_columnKey = 'LEARN_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNum' && order === 'descend') {
_columnKey = 'LEARN_NUM';
_order = 'SORT_DESC';
}
if (columnKey === 'learnFinishNum' && order === 'ascend') { _columnKey="FINISH_NUM"; _order = 'SORT_ASC'; }
if (columnKey === 'learnFinishNum' && order === 'descend') { _columnKey="FINISH_NUM"; _order = 'SORT_DESC'; }
if (columnKey === 'learnFinishNum' && order === 'ascend') {
_columnKey = 'FINISH_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnFinishNum' && order === 'descend') {
_columnKey = 'FINISH_NUM';
_order = 'SORT_DESC';
}
if (columnKey === 'learnNoFinishNum' && order === 'ascend') { _columnKey="NOT_NUM"; _order = 'SORT_ASC'; }
if (columnKey === 'learnNoFinishNum' && order === 'descend') { _columnKey="NOT_NUM"; _order = 'SORT_DESC'; }
if (columnKey === 'learnNoFinishNum' && order === 'ascend') {
_columnKey = 'NOT_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNoFinishNum' && order === 'descend') {
_columnKey = 'NOT_NUM';
_order = 'SORT_DESC';
}
const _query = {
...query,
sortMap:{}
sortMap: {},
};
_query.sortMap[_columnKey]=_order;
_query.sortMap[_columnKey] = _order;
this.setState(
{
query: _query,
},
() => this.handleFetchDataList()
);
};
handleChangNickname = (value) => {
const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state;
if (isPhone) {
query.userPhone = value;
query.userName = null;
} else {
query.userName = value;
query.userPhone = null;
}
query.current = 1;
this.setState({
query:_query
},()=>this.handleFetchDataList())
}
handleChangNickname = (value)=>{
const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state;
if(isPhone){
query.userPhone = value;
query.userName = null;
}else{
query.userName = value;
query.userPhone = null;
}
query.current = 1;
this.setState({
query
})
}
watchDataView = (record)=>{
Bus.trigger('watchDataView',record);
}
query,
});
};
watchDataView = (record) => {
Bus.trigger('watchDataView', record);
};
// 请求表头
parselumns = () => {
const columns = [
......@@ -115,24 +142,16 @@ class EmployeeShareData extends React.Component {
key: 'storeUserName',
dataIndex: 'storeUserName',
render: (val, record) => {
return (
<div>
{val}
</div>
)
}
return <div>{val}</div>;
},
},
{
title: '角色',
key: 'roleEnum',
dataIndex: 'roleEnum',
render: (val, record) => {
return (
<div>
{UserRole[record.roleEnum].text}
</div>
)
}
return <div>{UserRole[record.roleEnum].text}</div>;
},
},
//产品暂时性隐藏
// {
......@@ -151,28 +170,20 @@ class EmployeeShareData extends React.Component {
title: '最近分享成功时间',
key: 'recentlyForwardTime',
dataIndex: 'recentlyForwardTime',
width:240,
width: 240,
render: (val, record) => {
return (
<div>
{formatDate('YYYY-MM-DD H:i', val)}
</div>
)
}
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
title: '学习人数',
key: 'learnNum',
dataIndex: 'learnNum',
width:110,
sorter:true,
width: 110,
sorter: true,
render: (val, record) => {
return (
<div className="learn-num">
{val}
</div>
)
}
return <div className='learn-num'>{val}</div>;
},
},
// {
// title: '已学完',
......@@ -208,51 +219,71 @@ class EmployeeShareData extends React.Component {
dataIndex: 'operate',
render: (val, record) => {
return (
<span className="operate-item" onClick={()=>this.watchDataView(record)}>数据详情</span>
)
}
}
<span className='operate-item' onClick={() => this.watchDataView(record)}>
数据详情
</span>
);
},
},
];
return columns;
}
};
render() {
const { dataSource,query,size,totalCount} = this.state;
const { dataSource, query, size, totalCount } = this.state;
return (
<div className="employee-share-data">
<div className="search-container">
<Search placeholder="搜索员工姓名或手机号" onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} style={{ width: 200 }} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
<div className='employee-share-data'>
<div className='search-container'>
<Search
placeholder='搜索员工姓名或手机号'
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
style={{ width: 200 }}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div>
<div>
<Table
rowKey={record => record.id}
dataSource={dataSource}
columns={this.parselumns()}
pagination={false}
onChange={this.handleChangeTable}
showSorterTooltip={false}
bordered
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parselumns()}
pagination={false}
onChange={this.handleChangeTable}
showSorterTooltip={false}
bordered
/>
{dataSource.length > 0 && (
<div className='box-footer'>
<PageControl
current={query.current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.setState(
{
query: _query,
},
() => {
this.handleFetchDataList();
}
);
}}
onShowSizeChange={this.onShowSizeChange}
/>
{dataSource.length >0 &&
<div className="box-footer">
<PageControl
current={query.current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = {...query, current: page + 1};
this.setState({
query:_query
},()=>{ this.handleFetchDataList()})
}}
onShowSizeChange={this.onShowSizeChange}
/>
</div>
}
</div>
)}
</div>
</div>
)
);
}
}
export default withRouter(EmployeeShareData);
\ No newline at end of file
export default withRouter(EmployeeShareData);
src/modules/plan-manage/components/UserLearningData.jsx
import React from 'react'
import { withRouter } from 'react-router-dom'
import { Table, Modal, message, Tooltip } from 'antd'
import { PageControl } from '@/components'
import UserLearningDataFilter from './UserLearningDataFilter'
import PlanService from '@/domains/plan-domain/planService'
import UserLearnDetailModal from '../modal/UserLearnDetailModal'
import UnbundEmployeeModal from '../modal/UnbundEmployeeModal'
import User from '@/common/js/user'
import './UserLearningData.less'
const { confirm } = Modal
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Modal, message, Tooltip } from 'antd';
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import UserLearningDataFilter from './UserLearningDataFilter';
import PlanService from '@/domains/plan-domain/planService';
import UserLearnDetailModal from '../modal/UserLearnDetailModal';
import UnbundEmployeeModal from '../modal/UnbundEmployeeModal';
import User from '@/common/js/user';
import './UserLearningData.less';
const { confirm } = Modal;
const LearnState = {
UN_PLAY: {
text: '未开始',
......@@ -19,12 +20,12 @@ const LearnState = {
FINISH: {
text: '已完成',
},
}
};
class UserLearningData extends React.Component {
constructor(props) {
super(props)
const id = getParameterByName('id')
super(props);
const id = getParameterByName('id');
this.state = {
id,
dataSource: [],
......@@ -35,13 +36,13 @@ class UserLearningData extends React.Component {
totalCount: 0,
userLearnDetailModalSHow: false,
unbundEmployeeModalVisible: false,
}
};
}
componentDidMount() {
this.handleFetchDataList()
this.handleFetchDataList();
}
handleFetchDataList = (_query) => {
const { query, size, id } = this.state
const { query, size, id } = this.state;
const params = {
...query,
..._query,
......@@ -49,88 +50,88 @@ class UserLearningData extends React.Component {
planId: id,
storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(),
}
this.setState({ query: params })
};
this.setState({ query: params });
PlanService.getPlanCustomerRecordPage(params).then((res) => {
const { result = {} } = res
const { records = [], total = 0 } = result
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
dataSource: records,
totalCount: Number(total),
})
})
}
});
});
};
onShowSizeChange = (current, size) => {
if (current == size) {
return
return;
}
this.setState(
{
size,
},
() => {
this.handleFetchDataList()
this.handleFetchDataList();
}
)
}
);
};
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter
const { query } = this.state
let _columnKey
let _order
const { columnKey, order } = sorter;
const { query } = this.state;
let _columnKey;
let _order;
if (columnKey === 'latelyLearnTime' && order === 'ascend') {
_columnKey = 'LATE_LEARN_TIME'
_order = 'SORT_ASC'
_columnKey = 'LATE_LEARN_TIME';
_order = 'SORT_ASC';
}
if (columnKey === 'latelyLearnTime' && order === 'descend') {
_columnKey = 'LATE_LEARN_TIME'
_order = 'SORT_DESC'
_columnKey = 'LATE_LEARN_TIME';
_order = 'SORT_DESC';
}
if (columnKey === 'startLearnTime' && order === 'ascend') {
_columnKey = 'START_LEARN_TIME'
_order = 'SORT_ASC'
_columnKey = 'START_LEARN_TIME';
_order = 'SORT_ASC';
}
if (columnKey === 'startLearnTime' && order === 'descend') {
_columnKey = 'START_LEARN_TIME'
_order = 'SORT_DESC'
_columnKey = 'START_LEARN_TIME';
_order = 'SORT_DESC';
}
if (columnKey === 'learnNum' && order === 'ascend') {
_columnKey = 'LEARN_NUM'
_order = 'SORT_ASC'
_columnKey = 'LEARN_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNum' && order === 'descend') {
_columnKey = 'LEARN_NUM'
_order = 'SORT_DESC'
_columnKey = 'LEARN_NUM';
_order = 'SORT_DESC';
}
const _query = {
...query,
sortMap: {},
}
_query.sortMap[_columnKey] = _order
};
_query.sortMap[_columnKey] = _order;
this.setState(
{
query: _query,
},
() => this.handleFetchDataList()
)
}
);
};
watchDetail = (record) => {
this.setState({
userLearnDetailModalSHow: true,
storeCustomerId: record.storeCustomerId,
planId: record.planId,
})
}
});
};
closeUserLearnDetailModal = () => {
this.setState({
userLearnDetailModalSHow: false,
})
}
});
};
UnbundEmployee = (record) => {
if (User.getUserRole() === 'CloudOperator') {
return confirm({
......@@ -141,40 +142,40 @@ class UserLearningData extends React.Component {
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.handleConfirmUnbundEmployee(record.storeCustomerId)
this.handleConfirmUnbundEmployee(record.storeCustomerId);
},
})
});
} else {
this.setState({
unbundEmployeeModalVisible: true,
storeCustomerId: record.storeCustomerId,
})
});
}
}
};
handleConfirmUnbundEmployee = (storeCustomerId) => {
let removeUserIds = []
removeUserIds.push(storeCustomerId)
let removeUserIds = [];
removeUserIds.push(storeCustomerId);
const params = {
planId: getParameterByName('id'),
removeUserIds,
storeCustomerId: storeCustomerId,
storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(),
}
};
PlanService.removePlanCustomer(params).then((res) => {
this.handleFetchDataList()
message.success('解绑成功')
})
}
this.handleFetchDataList();
message.success('解绑成功');
});
};
handleCloseUnbundEmployeeModal = () => {
this.setState({
unbundEmployeeModalVisible: false,
})
}
});
};
// 请求表头
parselumns = () => {
let columns
let columns;
if (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') {
columns = [
{
......@@ -182,7 +183,7 @@ class UserLearningData extends React.Component {
key: 'storeCustomerName',
dataIndex: 'storeCustomerName',
render: (val, record) => {
return <div>{val}</div>
return <div>{val}</div>;
},
},
{
......@@ -190,14 +191,20 @@ class UserLearningData extends React.Component {
key: 'learnState',
dataIndex: 'learnState',
render: (val, record) => {
return <div>{LearnState[val].text}</div>
return <div>{LearnState[val].text}</div>;
},
},
{
title: <span>
<span>负责人</span>
<Tooltip title="培训计划的分享者/跟进人"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:"400"}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>负责人</span>
<Tooltip title='培训计划的分享者/跟进人'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'userNameList',
dataIndex: 'userNameList',
render: (val, record) => {
......@@ -208,10 +215,10 @@ class UserLearningData extends React.Component {
<span>
{item} {index < record.userNameList.length - 1 && <span> 、</span>}{' '}
</span>
)
);
})}
</div>
)
);
},
},
{
......@@ -221,7 +228,7 @@ class UserLearningData extends React.Component {
sorter: true,
width: 240,
render: (val, record) => {
return `${formatDate('YYYY-MM-DD H:i', parseInt(record.latelyLearnTime))}`
return `${formatDate('YYYY-MM-DD H:i', parseInt(record.latelyLearnTime))}`;
},
},
{
......@@ -231,14 +238,20 @@ class UserLearningData extends React.Component {
width: 240,
sorter: true,
render: (val, record) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
title: <span>
<span>学习进度</span>
<Tooltip title="学员培训计划中达到“已完成”状态的课程数/总课程数"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px', fontWeight:"400"}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>学习进度</span>
<Tooltip title='学员培训计划中达到“已完成”状态的课程数/总课程数'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'learnNum',
dataIndex: 'learnNum',
width: 130,
......@@ -250,7 +263,7 @@ class UserLearningData extends React.Component {
<span>/</span>
<span>{record.courseNum}</span>
</div>
)
);
},
},
{
......@@ -267,15 +280,15 @@ class UserLearningData extends React.Component {
<span
className='operate-item'
onClick={() => {
this.UnbundEmployee(record)
this.UnbundEmployee(record);
}}>
解绑
</span>
</div>
)
);
},
},
]
];
} else {
columns = [
{
......@@ -283,7 +296,7 @@ class UserLearningData extends React.Component {
key: 'storeCustomerName',
dataIndex: 'storeCustomerName',
render: (val, record) => {
return <div>{val}</div>
return <div>{val}</div>;
},
},
{
......@@ -291,7 +304,7 @@ class UserLearningData extends React.Component {
key: 'learnState',
dataIndex: 'learnState',
render: (val, record) => {
return <div>{LearnState[val].text}</div>
return <div>{LearnState[val].text}</div>;
},
},
{
......@@ -300,7 +313,7 @@ class UserLearningData extends React.Component {
dataIndex: 'latelyLearnTime',
sorter: true,
render: (val, record) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
......@@ -309,7 +322,7 @@ class UserLearningData extends React.Component {
dataIndex: 'startLearnTime',
sorter: true,
render: (val, record) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
......@@ -333,7 +346,7 @@ class UserLearningData extends React.Component {
<span>/</span>
<span>{record.courseNum}</span>
</div>
)
);
},
},
{
......@@ -350,28 +363,32 @@ class UserLearningData extends React.Component {
<span
className='operate-item'
onClick={() => {
this.UnbundEmployee(record)
this.UnbundEmployee(record);
}}>
解绑
</span>
</div>
)
);
},
},
]
];
}
return columns
}
return columns;
};
render() {
const { dataSource, query, size, totalCount, userLearnDetailModalSHow, storeCustomerId, planId, unbundEmployeeModalVisible } = this.state
const { dataSource, query, size, totalCount, userLearnDetailModalSHow, storeCustomerId, planId, unbundEmployeeModalVisible } = this.state;
return (
<div className='user-learning-data'>
<div className='search-container'>
<UserLearningDataFilter onChange={this.handleFetchDataList} />
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.storeCustomerId}
dataSource={dataSource}
columns={this.parselumns()}
......@@ -388,15 +405,15 @@ class UserLearningData extends React.Component {
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = { ...query, current: page + 1 }
const _query = { ...query, current: page + 1 };
this.setState(
{
query: _query,
},
() => {
this.handleFetchDataList()
this.handleFetchDataList();
}
)
);
}}
onShowSizeChange={this.onShowSizeChange}
/>
......@@ -412,14 +429,14 @@ class UserLearningData extends React.Component {
onClose={this.handleCloseUnbundEmployeeModal}
storeCustomerId={storeCustomerId}
onConfirm={() => {
this.handleFetchDataList()
this.handleCloseUnbundEmployeeModal()
this.handleFetchDataList();
this.handleCloseUnbundEmployeeModal();
}}
/>
)}
</div>
)
);
}
}
export default withRouter(UserLearningData)
export default withRouter(UserLearningData);
src/modules/plan-manage/modal/relatedCourseModal.jsx
import React from 'react';
import _ from 'underscore';
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd';
import { Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd';
import { PageControl } from '@/components';
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import CourseService from '@/domains/course-domain/CourseService';
import User from '@/common/js/user';
......@@ -312,7 +313,7 @@ class SelectOperatorModal extends React.Component {
return null;
})}
<If condition={!hasCover}>
<img className='course-cover' src={"https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png"} alt='' />
<img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} alt='' />
</If>
<div>
......@@ -384,19 +385,6 @@ class SelectOperatorModal extends React.Component {
),
key: 'course',
dataIndex: 'course',
width: '40%',
title: (
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width: '60%',
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record;
......@@ -471,7 +459,7 @@ class SelectOperatorModal extends React.Component {
const { coverUrl } = record;
return (
<div className='course-info'>
<img className='course-cover' src={coverUrl || "https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png"} alt='' />
<img className='course-cover' src={coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'} alt='' />
<div className='course-name'>{record.courseName}</div>
</div>
);
......@@ -746,7 +734,11 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
......@@ -837,7 +829,11 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()}
......@@ -932,7 +928,11 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={pictureDataSource}
columns={this.parsePictureColumns()}
......
src/modules/teach-tool/examination-manager/ExamData.tsx
import React, { useState, useRef, useEffect, useContext } from 'react'
import Service from "@/common/js/service";
import { PageControl } from "@/components";
import React, { useState, useRef, useEffect, useContext } from 'react';
import Service from '@/common/js/service';
import { PageControl } from '@/components';
import { Input, Select, Tooltip, Button, Table } from 'antd';
import User from "@/common/js/user";
import User from '@/common/js/user';
import moment from 'moment';
import './userData.less'
import './userData.less';
const { Search } = Input;
const { Option } = Select;
interface sortType {
type: "ascend" | "descend" | null | undefined
type: 'ascend' | 'descend' | null | undefined;
}
function ExamData(props: any) {
const sortStatus: sortType = {
type: undefined
}
const examDataInit: any = {};
const queryInit: any = { current: 1, size: 10, order: 'SORT_ASC' };
const [examData, setUserData] = useState(examDataInit);
const [list, setList] = useState([]);
const [query, setQuery] = useState(queryInit);
const [total, setTotal] = useState(0);
const [field, setfield] = useState('');
const [allData, setAllData] = useState(0);
const [order, setOrder] = useState(sortStatus.type);
const questionTypeList = {
SINGLE_CHOICE: "单选题",
MULTI_CHOICE: "多选题",
JUDGE: "判断题",
GAP_FILLING: "填空题",
INDEFINITE_CHOICE: "不定项选择题",
};
const userTypeEnum = {
WORK_WE_CHAT: '企业微信',
WE_CHAT: '微信'
}
const userExamStateEnum = {
EXAM: '进行中',
LACK_EXAM: '缺考',
FINISH_EXAM: '已考试'
}
const orderEnum = {
currentAccuracy: {
ascend: 'ACCURACY_ASC',
descend: 'ACCURACY_DESC'
},
}
const queryRef = useRef({});
useEffect(() => {
queryExamUserData();
}, [])
useEffect(() => {
queryRef.current = query;
queryExamUserDataList();
}, [query])
function queryExamUserData() {
Service.Hades('public/hades/queryExamQuestionData', {
examId: props.examId,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0
}).then((res) => {
setUserData(res.result)
})
}
function queryExamUserDataList() {
Service.Hades('public/hades/queryExamQuestionDataList', {
...query,
examId: props.examId,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0
}).then((res) => {
setList(res.result.records);
setTotal(parseInt(res.result.total))
if (!allData) {
setAllData(parseInt(res.result.total))
}
})
}
const columns = [
{
title: "序号",
dataIndex: "sort",
width: 60,
render: (text: any) => <span>{text + 1}</span>,
},
{
title: "题目",
dataIndex: "questionStem",
ellipsis: true,
width: 350,
render: (val: any) => {
var handleVal = val;
handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、");
handleVal = handleVal.replace(/\&nbsp\;/gi, " ");
return (
<Tooltip
overlayClassName="aid-tool-list"
title={
<div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div>
}
placement="topLeft"
overlayStyle={{ maxWidth: 700 }}
>
{handleVal}
</Tooltip>
);
},
},
{
title: "题型",
dataIndex: "questionType",
render: (text: any) => <span>{(questionTypeList as any)[text]}</span>,
filters: Object.keys(questionTypeList).map((key) => {
return {
text: (questionTypeList as any)[key],
value: key
}
}),
},
{
title: "本次正确率",
dataIndex: "currentAccuracy",
sorter: true,
sortOrder: field === "currentAccuracy" ? order : sortStatus.type,
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>,
},
{
title: <div>历史正确率 <Tooltip
overlayClassName="tool-list"
title='包含本次考试正确率'
placement="top"
overlayStyle={{ maxWidth: 700 }}
> <span style={{ color: 'rgba(191, 191, 191, 1)' }} className="icon iconfont">&#xe61d;</span>
</Tooltip>
</div>,
dataIndex: "totalAccuracy",
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>,
},
];
function onChange(pagination: any, filters: any, sorter: any, extra: any) {
console.log(filters, sorter);
setfield(sorter.field);
setOrder(sorter.order)
console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field])
let _query: any = { ...queryRef.current };
console.log(filters.questionType)
if (filters.questionType) {
console.log(233232)
_query.questionType = filters.questionType;
_query.current = 1;
} else {
delete _query.questionType
}
_query.order = (orderEnum as any)[sorter.field][sorter.order]
setQuery(_query)
}
function download() {
Service.Hades('public/hades/exportExamData', {
// ...query,
examId: props.examId,
exportDataType: 'EXAM_QUESTION_DATA',
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0
}).then((res) => {
const dom = (document as any).getElementById("load-play-back-excel")
dom.setAttribute('href', res.result);
dom.click();
})
}
return <div className="rr">
<a
download
id="load-play-back-excel"
style={{ position: "absolute", left: "-10000px" }}
></a>
<div className="dataPanal">
{
!!examData.singleChoiceCnt && <div className="item">
<div className="num">{Math.round((examData.singleChoiceAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fa;</span>单选题 <span>(共{examData.singleChoiceCnt}题)</span></div></div>
</div>
}
{
!!examData.multiChoiceCnt && <div className="item">
<div className="num">{Math.round((examData.multiChoiceAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fb;</span>多选题<span>(共{examData.multiChoiceCnt}题)</span></div></div>
</div>
}
{
!!examData.judgeCnt && <div className="item">
<div className="num">{Math.round((examData.judgeAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fc;</span>判断题<span>(共{examData.judgeCnt}题)</span></div></div>
</div>
}
{
!!examData.gapFillingCnt && <div className="item">
<div className="num">{Math.round((examData.gapFillingAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fd;</span>填空题<span>(共{examData.gapFillingCnt}题)</span></div></div>
</div>
}
{
!!examData.indefiniteChoiceCnt && <div className="item">
<div className="num">{Math.round((examData.indefiniteChoiceAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fe;</span>不定项选择题 <span>(共{examData.indefiniteChoiceCnt}题)</span></div></div>
</div>
}
</div>
{
!!allData && <Button style={{ marginBottom: 12, marginTop: 12 }} onClick={download} >导出</Button>
}
<div className="content">
<Table
bordered
size="small"
columns={columns}
dataSource={list}
onChange={onChange}
pagination={false}
>
</Table>
{total > 0 &&
<PageControl
size="small"
current={query.current - 1}
pageSize={query.size}
total={total}
toPage={(page: any) => {
console.log(page)
let _query: any = { ...queryRef.current };
_query.current = page + 1;
setQuery(_query)
}}
/>
}
const sortStatus: sortType = {
type: undefined,
};
const examDataInit: any = {};
const queryInit: any = { current: 1, size: 10, order: 'SORT_ASC' };
const [examData, setUserData] = useState(examDataInit);
const [list, setList] = useState([]);
const [query, setQuery] = useState(queryInit);
const [total, setTotal] = useState(0);
const [field, setfield] = useState('');
const [allData, setAllData] = useState(0);
const [order, setOrder] = useState(sortStatus.type);
const questionTypeList = {
SINGLE_CHOICE: '单选题',
MULTI_CHOICE: '多选题',
JUDGE: '判断题',
GAP_FILLING: '填空题',
INDEFINITE_CHOICE: '不定项选择题',
};
const userTypeEnum = {
WORK_WE_CHAT: '企业微信',
WE_CHAT: '微信',
};
const userExamStateEnum = {
EXAM: '进行中',
LACK_EXAM: '缺考',
FINISH_EXAM: '已考试',
};
const orderEnum = {
currentAccuracy: {
ascend: 'ACCURACY_ASC',
descend: 'ACCURACY_DESC',
},
};
const queryRef = useRef({});
useEffect(() => {
queryExamUserData();
}, []);
useEffect(() => {
queryRef.current = query;
queryExamUserDataList();
}, [query]);
function queryExamUserData() {
Service.Hades('public/hades/queryExamQuestionData', {
examId: props.examId,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0,
}).then((res) => {
setUserData(res.result);
});
}
function queryExamUserDataList() {
Service.Hades('public/hades/queryExamQuestionDataList', {
...query,
examId: props.examId,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0,
}).then((res) => {
setList(res.result.records);
setTotal(parseInt(res.result.total));
if (!allData) {
setAllData(parseInt(res.result.total));
}
});
}
const columns = [
{
title: '序号',
dataIndex: 'sort',
width: 60,
render: (text: any, record: any, index: any) => <span>{index + 1}</span>,
},
{
title: '题目',
dataIndex: 'questionStem',
ellipsis: true,
width: 350,
render: (val: any) => {
var handleVal = val;
handleVal = handleVal.replace(/<(?!img|input).*?>/g, '');
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, '_、');
handleVal = handleVal.replace(/\&nbsp\;/gi, ' ');
return (
<Tooltip
overlayClassName='aid-tool-list'
title={<div style={{ maxWidth: 700, width: 'auto' }}>{handleVal}</div>}
placement='topLeft'
overlayStyle={{ maxWidth: 700 }}>
{handleVal}
</Tooltip>
);
},
},
{
title: '题型',
dataIndex: 'questionType',
render: (text: any) => <span>{(questionTypeList as any)[text]}</span>,
filters: Object.keys(questionTypeList).map((key) => {
return {
text: (questionTypeList as any)[key],
value: key,
};
}),
},
{
title: '本次正确率',
dataIndex: 'currentAccuracy',
sorter: true,
sortOrder: field === 'currentAccuracy' ? order : sortStatus.type,
render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
},
{
title: (
<div>
历史正确率{' '}
<Tooltip overlayClassName='tool-list' title='包含本次考试正确率' placement='top' overlayStyle={{ maxWidth: 700 }}>
{' '}
<span style={{ color: 'rgba(191, 191, 191, 1)' }} className='icon iconfont'>
&#xe61d;
</span>
</Tooltip>
</div>
),
dataIndex: 'totalAccuracy',
render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
},
];
function onChange(pagination: any, filters: any, sorter: any, extra: any) {
console.log(filters, sorter);
setfield(sorter.field);
setOrder(sorter.order);
console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field]);
let _query: any = { ...queryRef.current };
console.log(filters.questionType);
if (filters.questionType) {
console.log(233232);
_query.questionType = filters.questionType;
_query.current = 1;
} else {
delete _query.questionType;
}
_query.order = (orderEnum as any)[sorter.field][sorter.order];
setQuery(_query);
}
function download() {
Service.Hades('public/hades/exportExamData', {
// ...query,
examId: props.examId,
exportDataType: 'EXAM_QUESTION_DATA',
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0,
}).then((res) => {
const dom = (document as any).getElementById('load-play-back-excel');
dom.setAttribute('href', res.result);
dom.click();
});
}
return (
<div className='rr'>
<a download id='load-play-back-excel' style={{ position: 'absolute', left: '-10000px' }}></a>
<div className='dataPanal'>
{!!examData.singleChoiceCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.singleChoiceAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fa;</span>单选题 <span>(共{examData.singleChoiceCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.multiChoiceCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.multiChoiceAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fb;</span>多选题<span>(共{examData.multiChoiceCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.judgeCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.judgeAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fc;</span>判断题<span>(共{examData.judgeCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.gapFillingCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.gapFillingAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fd;</span>填空题<span>(共{examData.gapFillingCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.indefiniteChoiceCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.indefiniteChoiceAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fe;</span>不定项选择题 <span>(共{examData.indefiniteChoiceCnt}题)</span>
</div>
</div>
</div>
)}
</div>
{!!allData && (
<Button style={{ marginBottom: 12, marginTop: 12 }} onClick={download}>
导出
</Button>
)}
<div className='content'>
<Table bordered size='small' columns={columns} dataSource={list} onChange={onChange} pagination={false}></Table>
{total > 0 && (
<PageControl
size='small'
current={query.current - 1}
pageSize={query.size}
total={total}
toPage={(page: any) => {
console.log(page);
let _query: any = { ...queryRef.current };
_query.current = page + 1;
setQuery(_query);
}}
/>
)}
</div>
</div>
);
}
export default ExamData;
\ No newline at end of file
export default ExamData;
src/modules/teach-tool/paper-manage/OperatePaper.less
......@@ -6,6 +6,7 @@
}
.table-style {
border: 1px solid #f0f0f0 !important;
margin-bottom: 70px;
}
.ant-tabs {
color: #666666;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment