Skip to content

X
xiaomai-cloud-class-web
Commit 8270c55e by yuananting
Options

Merge branch 'feature/yuananting/20210624/replace_empty_picture' into rc

parents d2e2861d 1be68445
Showing with 932 additions and 861 deletions
src/modules/plan-manage/components/EmployeeShareData.jsx
import React from 'react'; import React from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from 'react-router-dom';
import {Table, Modal,Input,message} from 'antd'; import { Input } from 'antd';
import { PageControl } from "@/components"; import { PageControl, XMTable } from '@/components';
import PlanService from '@/domains/plan-domain/planService' import college from '@/common/lottie/college';
import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user'; import User from '@/common/js/user';
import Bus from '@/core/bus'; import Bus from '@/core/bus';
import './EmployeeShareData.less'; import './EmployeeShareData.less';
...@@ -10,103 +11,129 @@ import './EmployeeShareData.less'; ...@@ -10,103 +11,129 @@ import './EmployeeShareData.less';
const { Search } = Input; const { Search } = Input;
const UserRole = { const UserRole = {
Store_Manager: { Store_Manager: {
text: "学院管理员" text: '学院管理员',
}, },
Cloud_Manager: { Cloud_Manager: {
text:"管理员" text: '管理员',
}, },
Cloud_Operator: { Cloud_Operator: {
text:'运营师' text: '运营师',
}, },
Cloud_Lecture: { Cloud_Lecture: {
text:"讲师" text: '讲师',
}, },
}; };
class EmployeeShareData extends React.Component { class EmployeeShareData extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const id = getParameterByName("id"); const id = getParameterByName('id');
this.state = { this.state = {
id, id,
dataSource:[], dataSource: [],
size:10, size: 10,
query: { query: {
current: 1, current: 1,
}, },
totalCount:0, totalCount: 0,
} };
} }
componentDidMount(){ componentDidMount() {
this.handleFetchDataList(); this.handleFetchDataList();
} }
handleFetchDataList = ()=>{ handleFetchDataList = () => {
const { query ,size,id} = this.state; const { query, size, id } = this.state;
const params ={ const params = {
...query, ...query,
size, size,
planId:id, planId: id,
storeId:User.getStoreId(), storeId: User.getStoreId(),
} };
PlanService.getPlanUserRecordPage(params).then((res) => { PlanService.getPlanUserRecordPage(params).then((res) => {
const { result = {} } = res ; const { result = {} } = res;
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total),
}); });
}); });
} };
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return return;
} }
this.setState({ this.setState(
size {
},()=>{this.handleFetchDataList()}) size,
} },
handleChangeTable = (pagination, filters, sorter)=> { () => {
this.handleFetchDataList();
}
);
};
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter; const { columnKey, order } = sorter;
const { query } = this.state; const { query } = this.state;
let _columnKey; let _columnKey;
let _order; let _order;
if (columnKey === 'learnNum' && order === 'ascend') { _columnKey="LEARN_NUM"; _order = 'SORT_ASC'; } if (columnKey === 'learnNum' && order === 'ascend') {
if (columnKey === 'learnNum' && order === 'descend') { _columnKey="LEARN_NUM"; _order = 'SORT_DESC'; } _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 === 'ascend') {
if (columnKey === 'learnFinishNum' && order === 'descend') { _columnKey="FINISH_NUM"; _order = 'SORT_DESC'; } _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 === 'ascend') {
if (columnKey === 'learnNoFinishNum' && order === 'descend') { _columnKey="NOT_NUM"; _order = 'SORT_DESC'; } _columnKey = 'NOT_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNoFinishNum' && order === 'descend') {
_columnKey = 'NOT_NUM';
_order = 'SORT_DESC';
}
const _query = { const _query = {
...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({ this.setState({
query:_query query,
},()=>this.handleFetchDataList()) });
} };
handleChangNickname = (value)=>{ watchDataView = (record) => {
const isPhone = (value || '').match(/^\d+$/); Bus.trigger('watchDataView', record);
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);
}
// 请求表头 // 请求表头
parselumns = () => { parselumns = () => {
const columns = [ const columns = [
...@@ -115,24 +142,16 @@ class EmployeeShareData extends React.Component { ...@@ -115,24 +142,16 @@ class EmployeeShareData extends React.Component {
key: 'storeUserName', key: 'storeUserName',
dataIndex: 'storeUserName', dataIndex: 'storeUserName',
render: (val, record) => { render: (val, record) => {
return ( return <div>{val}</div>;
<div> },
{val}
</div>
)
}
}, },
{ {
title: '角色', title: '角色',
key: 'roleEnum', key: 'roleEnum',
dataIndex: 'roleEnum', dataIndex: 'roleEnum',
render: (val, record) => { render: (val, record) => {
return ( return <div>{UserRole[record.roleEnum].text}</div>;
<div> },
{UserRole[record.roleEnum].text}
</div>
)
}
}, },
//产品暂时性隐藏 //产品暂时性隐藏
// { // {
...@@ -151,28 +170,20 @@ class EmployeeShareData extends React.Component { ...@@ -151,28 +170,20 @@ class EmployeeShareData extends React.Component {
title: '最近分享成功时间', title: '最近分享成功时间',
key: 'recentlyForwardTime', key: 'recentlyForwardTime',
dataIndex: 'recentlyForwardTime', dataIndex: 'recentlyForwardTime',
width:240, width: 240,
render: (val, record) => { render: (val, record) => {
return ( return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
<div> },
{formatDate('YYYY-MM-DD H:i', val)}
</div>
)
}
}, },
{ {
title: '学习人数', title: '学习人数',
key: 'learnNum', key: 'learnNum',
dataIndex: 'learnNum', dataIndex: 'learnNum',
width:110, width: 110,
sorter:true, sorter: true,
render: (val, record) => { render: (val, record) => {
return ( return <div className='learn-num'>{val}</div>;
<div className="learn-num"> },
{val}
</div>
)
}
}, },
// { // {
// title: '已学完', // title: '已学完',
...@@ -208,51 +219,71 @@ class EmployeeShareData extends React.Component { ...@@ -208,51 +219,71 @@ class EmployeeShareData extends React.Component {
dataIndex: 'operate', dataIndex: 'operate',
render: (val, record) => { render: (val, record) => {
return ( return (
<span className="operate-item" onClick={()=>this.watchDataView(record)}>数据详情</span> <span className='operate-item' onClick={() => this.watchDataView(record)}>
) 数据详情
} </span>
} );
},
},
]; ];
return columns; return columns;
} };
render() { render() {
const { dataSource,query,size,totalCount} = this.state; const { dataSource, query, size, totalCount } = this.state;
return ( return (
<div className="employee-share-data"> <div className='employee-share-data'>
<div className="search-container"> <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>}/> <Search
placeholder='搜索员工姓名或手机号'
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
style={{ width: 200 }}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div> </div>
<div> <div>
<Table <XMTable
rowKey={record => record.id} renderEmpty={{
dataSource={dataSource} image: college,
columns={this.parselumns()} description: '暂无数据',
pagination={false} }}
onChange={this.handleChangeTable} rowKey={(record) => record.id}
showSorterTooltip={false} dataSource={dataSource}
bordered 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>
<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> </div>
) );
} }
} }
export default withRouter(EmployeeShareData); export default withRouter(EmployeeShareData);
\ No newline at end of file
src/modules/plan-manage/components/UserLearningData.jsx
import React from 'react' import React from 'react';
import { withRouter } from 'react-router-dom' import { withRouter } from 'react-router-dom';
import { Table, Modal, message, Tooltip } from 'antd' import { Modal, message, Tooltip } from 'antd';
import { PageControl } from '@/components' import { PageControl, XMTable } from '@/components';
import UserLearningDataFilter from './UserLearningDataFilter' import college from '@/common/lottie/college';
import PlanService from '@/domains/plan-domain/planService' import UserLearningDataFilter from './UserLearningDataFilter';
import UserLearnDetailModal from '../modal/UserLearnDetailModal' import PlanService from '@/domains/plan-domain/planService';
import UnbundEmployeeModal from '../modal/UnbundEmployeeModal' import UserLearnDetailModal from '../modal/UserLearnDetailModal';
import User from '@/common/js/user' import UnbundEmployeeModal from '../modal/UnbundEmployeeModal';
import './UserLearningData.less' import User from '@/common/js/user';
const { confirm } = Modal import './UserLearningData.less';
const { confirm } = Modal;
const LearnState = { const LearnState = {
UN_PLAY: { UN_PLAY: {
text: '未开始', text: '未开始',
...@@ -19,12 +20,12 @@ const LearnState = { ...@@ -19,12 +20,12 @@ const LearnState = {
FINISH: { FINISH: {
text: '已完成', text: '已完成',
}, },
} };
class UserLearningData extends React.Component { class UserLearningData extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
const id = getParameterByName('id') const id = getParameterByName('id');
this.state = { this.state = {
id, id,
dataSource: [], dataSource: [],
...@@ -35,13 +36,13 @@ class UserLearningData extends React.Component { ...@@ -35,13 +36,13 @@ class UserLearningData extends React.Component {
totalCount: 0, totalCount: 0,
userLearnDetailModalSHow: false, userLearnDetailModalSHow: false,
unbundEmployeeModalVisible: false, unbundEmployeeModalVisible: false,
} };
} }
componentDidMount() { componentDidMount() {
this.handleFetchDataList() this.handleFetchDataList();
} }
handleFetchDataList = (_query) => { handleFetchDataList = (_query) => {
const { query, size, id } = this.state const { query, size, id } = this.state;
const params = { const params = {
...query, ...query,
..._query, ..._query,
...@@ -49,88 +50,88 @@ class UserLearningData extends React.Component { ...@@ -49,88 +50,88 @@ class UserLearningData extends React.Component {
planId: id, planId: id,
storeId: User.getStoreId(), storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(), storeUserId: User.getStoreUserId(),
} };
this.setState({ query: params }) this.setState({ query: params });
PlanService.getPlanCustomerRecordPage(params).then((res) => { PlanService.getPlanCustomerRecordPage(params).then((res) => {
const { result = {} } = res const { result = {} } = res;
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total), totalCount: Number(total),
}) });
}) });
} };
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return return;
} }
this.setState( this.setState(
{ {
size, size,
}, },
() => { () => {
this.handleFetchDataList() this.handleFetchDataList();
} }
) );
} };
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter const { columnKey, order } = sorter;
const { query } = this.state const { query } = this.state;
let _columnKey let _columnKey;
let _order let _order;
if (columnKey === 'latelyLearnTime' && order === 'ascend') { if (columnKey === 'latelyLearnTime' && order === 'ascend') {
_columnKey = 'LATE_LEARN_TIME' _columnKey = 'LATE_LEARN_TIME';
_order = 'SORT_ASC' _order = 'SORT_ASC';
} }
if (columnKey === 'latelyLearnTime' && order === 'descend') { if (columnKey === 'latelyLearnTime' && order === 'descend') {
_columnKey = 'LATE_LEARN_TIME' _columnKey = 'LATE_LEARN_TIME';
_order = 'SORT_DESC' _order = 'SORT_DESC';
} }
if (columnKey === 'startLearnTime' && order === 'ascend') { if (columnKey === 'startLearnTime' && order === 'ascend') {
_columnKey = 'START_LEARN_TIME' _columnKey = 'START_LEARN_TIME';
_order = 'SORT_ASC' _order = 'SORT_ASC';
} }
if (columnKey === 'startLearnTime' && order === 'descend') { if (columnKey === 'startLearnTime' && order === 'descend') {
_columnKey = 'START_LEARN_TIME' _columnKey = 'START_LEARN_TIME';
_order = 'SORT_DESC' _order = 'SORT_DESC';
} }
if (columnKey === 'learnNum' && order === 'ascend') { if (columnKey === 'learnNum' && order === 'ascend') {
_columnKey = 'LEARN_NUM' _columnKey = 'LEARN_NUM';
_order = 'SORT_ASC' _order = 'SORT_ASC';
} }
if (columnKey === 'learnNum' && order === 'descend') { if (columnKey === 'learnNum' && order === 'descend') {
_columnKey = 'LEARN_NUM' _columnKey = 'LEARN_NUM';
_order = 'SORT_DESC' _order = 'SORT_DESC';
} }
const _query = { const _query = {
...query, ...query,
sortMap: {}, sortMap: {},
} };
_query.sortMap[_columnKey] = _order _query.sortMap[_columnKey] = _order;
this.setState( this.setState(
{ {
query: _query, query: _query,
}, },
() => this.handleFetchDataList() () => this.handleFetchDataList()
) );
} };
watchDetail = (record) => { watchDetail = (record) => {
this.setState({ this.setState({
userLearnDetailModalSHow: true, userLearnDetailModalSHow: true,
storeCustomerId: record.storeCustomerId, storeCustomerId: record.storeCustomerId,
planId: record.planId, planId: record.planId,
}) });
} };
closeUserLearnDetailModal = () => { closeUserLearnDetailModal = () => {
this.setState({ this.setState({
userLearnDetailModalSHow: false, userLearnDetailModalSHow: false,
}) });
} };
UnbundEmployee = (record) => { UnbundEmployee = (record) => {
if (User.getUserRole() === 'CloudOperator') { if (User.getUserRole() === 'CloudOperator') {
return confirm({ return confirm({
...@@ -141,40 +142,40 @@ class UserLearningData extends React.Component { ...@@ -141,40 +142,40 @@ class UserLearningData extends React.Component {
okType: 'danger', okType: 'danger',
cancelText: '取消', cancelText: '取消',
onOk: () => { onOk: () => {
this.handleConfirmUnbundEmployee(record.storeCustomerId) this.handleConfirmUnbundEmployee(record.storeCustomerId);
}, },
}) });
} else { } else {
this.setState({ this.setState({
unbundEmployeeModalVisible: true, unbundEmployeeModalVisible: true,
storeCustomerId: record.storeCustomerId, storeCustomerId: record.storeCustomerId,
}) });
} }
} };
handleConfirmUnbundEmployee = (storeCustomerId) => { handleConfirmUnbundEmployee = (storeCustomerId) => {
let removeUserIds = [] let removeUserIds = [];
removeUserIds.push(storeCustomerId) removeUserIds.push(storeCustomerId);
const params = { const params = {
planId: getParameterByName('id'), planId: getParameterByName('id'),
removeUserIds, removeUserIds,
storeCustomerId: storeCustomerId, storeCustomerId: storeCustomerId,
storeId: User.getStoreId(), storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(), storeUserId: User.getStoreUserId(),
} };
PlanService.removePlanCustomer(params).then((res) => { PlanService.removePlanCustomer(params).then((res) => {
this.handleFetchDataList() this.handleFetchDataList();
message.success('解绑成功') message.success('解绑成功');
}) });
} };
handleCloseUnbundEmployeeModal = () => { handleCloseUnbundEmployeeModal = () => {
this.setState({ this.setState({
unbundEmployeeModalVisible: false, unbundEmployeeModalVisible: false,
}) });
} };
// 请求表头 // 请求表头
parselumns = () => { parselumns = () => {
let columns let columns;
if (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') { if (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') {
columns = [ columns = [
{ {
...@@ -182,7 +183,7 @@ class UserLearningData extends React.Component { ...@@ -182,7 +183,7 @@ class UserLearningData extends React.Component {
key: 'storeCustomerName', key: 'storeCustomerName',
dataIndex: 'storeCustomerName', dataIndex: 'storeCustomerName',
render: (val, record) => { render: (val, record) => {
return <div>{val}</div> return <div>{val}</div>;
}, },
}, },
{ {
...@@ -190,14 +191,20 @@ class UserLearningData extends React.Component { ...@@ -190,14 +191,20 @@ class UserLearningData extends React.Component {
key: 'learnState', key: 'learnState',
dataIndex: 'learnState', dataIndex: 'learnState',
render: (val, record) => { render: (val, record) => {
return <div>{LearnState[val].text}</div> return <div>{LearnState[val].text}</div>;
}, },
}, },
{ {
title: <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>负责人</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', key: 'userNameList',
dataIndex: 'userNameList', dataIndex: 'userNameList',
render: (val, record) => { render: (val, record) => {
...@@ -208,10 +215,10 @@ class UserLearningData extends React.Component { ...@@ -208,10 +215,10 @@ class UserLearningData extends React.Component {
<span> <span>
{item} {index < record.userNameList.length - 1 && <span> 、</span>}{' '} {item} {index < record.userNameList.length - 1 && <span> 、</span>}{' '}
</span> </span>
) );
})} })}
</div> </div>
) );
}, },
}, },
{ {
...@@ -221,7 +228,7 @@ class UserLearningData extends React.Component { ...@@ -221,7 +228,7 @@ class UserLearningData extends React.Component {
sorter: true, sorter: true,
width: 240, width: 240,
render: (val, record) => { 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 { ...@@ -231,14 +238,20 @@ class UserLearningData extends React.Component {
width: 240, width: 240,
sorter: true, sorter: true,
render: (val, record) => { 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> 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>学习进度</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', key: 'learnNum',
dataIndex: 'learnNum', dataIndex: 'learnNum',
width: 130, width: 130,
...@@ -250,7 +263,7 @@ class UserLearningData extends React.Component { ...@@ -250,7 +263,7 @@ class UserLearningData extends React.Component {
<span>/</span> <span>/</span>
<span>{record.courseNum}</span> <span>{record.courseNum}</span>
</div> </div>
) );
}, },
}, },
{ {
...@@ -267,15 +280,15 @@ class UserLearningData extends React.Component { ...@@ -267,15 +280,15 @@ class UserLearningData extends React.Component {
<span <span
className='operate-item' className='operate-item'
onClick={() => { onClick={() => {
this.UnbundEmployee(record) this.UnbundEmployee(record);
}}> }}>
解绑 解绑
</span> </span>
</div> </div>
) );
}, },
}, },
] ];
} else { } else {
columns = [ columns = [
{ {
...@@ -283,7 +296,7 @@ class UserLearningData extends React.Component { ...@@ -283,7 +296,7 @@ class UserLearningData extends React.Component {
key: 'storeCustomerName', key: 'storeCustomerName',
dataIndex: 'storeCustomerName', dataIndex: 'storeCustomerName',
render: (val, record) => { render: (val, record) => {
return <div>{val}</div> return <div>{val}</div>;
}, },
}, },
{ {
...@@ -291,7 +304,7 @@ class UserLearningData extends React.Component { ...@@ -291,7 +304,7 @@ class UserLearningData extends React.Component {
key: 'learnState', key: 'learnState',
dataIndex: 'learnState', dataIndex: 'learnState',
render: (val, record) => { render: (val, record) => {
return <div>{LearnState[val].text}</div> return <div>{LearnState[val].text}</div>;
}, },
}, },
{ {
...@@ -300,7 +313,7 @@ class UserLearningData extends React.Component { ...@@ -300,7 +313,7 @@ class UserLearningData extends React.Component {
dataIndex: 'latelyLearnTime', dataIndex: 'latelyLearnTime',
sorter: true, sorter: true,
render: (val, record) => { 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 { ...@@ -309,7 +322,7 @@ class UserLearningData extends React.Component {
dataIndex: 'startLearnTime', dataIndex: 'startLearnTime',
sorter: true, sorter: true,
render: (val, record) => { 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 { ...@@ -333,7 +346,7 @@ class UserLearningData extends React.Component {
<span>/</span> <span>/</span>
<span>{record.courseNum}</span> <span>{record.courseNum}</span>
</div> </div>
) );
}, },
}, },
{ {
...@@ -350,28 +363,32 @@ class UserLearningData extends React.Component { ...@@ -350,28 +363,32 @@ class UserLearningData extends React.Component {
<span <span
className='operate-item' className='operate-item'
onClick={() => { onClick={() => {
this.UnbundEmployee(record) this.UnbundEmployee(record);
}}> }}>
解绑 解绑
</span> </span>
</div> </div>
) );
}, },
}, },
] ];
} }
return columns return columns;
} };
render() { render() {
const { dataSource, query, size, totalCount, userLearnDetailModalSHow, storeCustomerId, planId, unbundEmployeeModalVisible } = this.state const { dataSource, query, size, totalCount, userLearnDetailModalSHow, storeCustomerId, planId, unbundEmployeeModalVisible } = this.state;
return ( return (
<div className='user-learning-data'> <div className='user-learning-data'>
<div className='search-container'> <div className='search-container'>
<UserLearningDataFilter onChange={this.handleFetchDataList} /> <UserLearningDataFilter onChange={this.handleFetchDataList} />
</div> </div>
<div> <div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.storeCustomerId} rowKey={(record) => record.storeCustomerId}
dataSource={dataSource} dataSource={dataSource}
columns={this.parselumns()} columns={this.parselumns()}
...@@ -388,15 +405,15 @@ class UserLearningData extends React.Component { ...@@ -388,15 +405,15 @@ class UserLearningData extends React.Component {
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...query, current: page + 1 } const _query = { ...query, current: page + 1 };
this.setState( this.setState(
{ {
query: _query, query: _query,
}, },
() => { () => {
this.handleFetchDataList() this.handleFetchDataList();
} }
) );
}} }}
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
/> />
...@@ -412,14 +429,14 @@ class UserLearningData extends React.Component { ...@@ -412,14 +429,14 @@ class UserLearningData extends React.Component {
onClose={this.handleCloseUnbundEmployeeModal} onClose={this.handleCloseUnbundEmployeeModal}
storeCustomerId={storeCustomerId} storeCustomerId={storeCustomerId}
onConfirm={() => { onConfirm={() => {
this.handleFetchDataList() this.handleFetchDataList();
this.handleCloseUnbundEmployeeModal() this.handleCloseUnbundEmployeeModal();
}} }}
/> />
)} )}
</div> </div>
) );
} }
} }
export default withRouter(UserLearningData) export default withRouter(UserLearningData);
src/modules/plan-manage/modal/relatedCourseModal.jsx
import React from "react" import React from 'react';
import _ from "underscore" import _ from 'underscore';
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from "antd" import { Table, 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 CourseService from '@/domains/course-domain/CourseService';
import User from "@/common/js/user" import User from '@/common/js/user';
import Service from "@/common/js/service" import Service from '@/common/js/service';
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration" import dealTimeDuration from '../../course-manage/utils/dealTimeDuration';
import "./relatedCourseModal.less" import './relatedCourseModal.less';
const { Search } = Input const { Search } = Input;
const { TabPane } = Tabs const { TabPane } = Tabs;
const courseStateShow = { const courseStateShow = {
UN_START: { UN_START: {
code: 1, code: 1,
title: "待开课", title: '待开课',
color: "#FFB129", color: '#FFB129',
}, },
STARTING: { STARTING: {
code: 2, code: 2,
title: "上课中", title: '上课中',
color: "#238FFF" color: '#238FFF',
}, },
FINISH: { FINISH: {
code: 3, code: 3,
title: "已完成", title: '已完成',
color: "#3BBDAA" color: '#3BBDAA',
}, },
EXPIRED: { EXPIRED: {
code: 4, code: 4,
title: "未成功开课", title: '未成功开课',
color: "#999" color: '#999',
} },
} };
class SelectOperatorModal extends React.Component { class SelectOperatorModal extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
liveDataSource: [], liveDataSource: [],
liveSize: 10, liveSize: 10,
liveQuery: { liveQuery: {
current: 1 current: 1,
}, },
liveTotalCount: 0, liveTotalCount: 0,
selectLive: [], //弹窗内已选择的直播课程 selectLive: [], //弹窗内已选择的直播课程
currentCourseListData: [], currentCourseListData: [],
currentLiveCourseListData: [], //页面中已关联的直播课程 currentLiveCourseListData: [], //页面中已关联的直播课程
videoCourseDivision: "internal", videoCourseDivision: 'internal',
videoDataSource: { videoDataSource: {
external: [], external: [],
internal: [] internal: [],
}, },
videoSize: { videoSize: {
external: 10, external: 10,
internal: 10 internal: 10,
}, },
videoSearchName: { videoSearchName: {
external: "", external: '',
internal: "" internal: '',
}, },
videoSearchDefalt: "", videoSearchDefalt: '',
videoQuery: { videoQuery: {
external: { external: {
current: 1 current: 1,
}, },
internal: { internal: {
current: 1 current: 1,
} },
}, },
videoTotalCount: { videoTotalCount: {
external: 0, external: 0,
internal: 0 internal: 0,
}, },
selectVideo: { selectVideo: {
external: [], external: [],
internal: [] internal: [],
}, //弹窗内已选择的视频课程 }, //弹窗内已选择的视频课程
currentVideoCourseListData: { currentVideoCourseListData: {
external: [], external: [],
internal: [] internal: [],
}, //页面中已关联的视频课程 }, //页面中已关联的视频课程
pictureDataSource: [], pictureDataSource: [],
pictureSize: 10, pictureSize: 10,
pictureQuery: { pictureQuery: {
current: 1 current: 1,
}, },
pictureTotalCount: 0, pictureTotalCount: 0,
selectPicture: [], //弹窗内已选择的视频课程 selectPicture: [], //弹窗内已选择的视频课程
currentPictureCourseListData: [], //页面中已关联的视频课程 currentPictureCourseListData: [], //页面中已关联的视频课程
activeKey: "video", activeKey: 'video',
currentTaskCourseData: this.props.data[this.props.selectedTaskIndex].courseList || [] currentTaskCourseData: this.props.data[this.props.selectedTaskIndex].courseList || [],
} };
} }
componentDidMount() { componentDidMount() {
this.handleFetchLiveDataList() this.handleFetchLiveDataList();
this.handleFetchVideoDataList() this.handleFetchVideoDataList();
this.handleFetchPictureDataList() this.handleFetchPictureDataList();
} }
// 获取直播课列表 // 获取直播课列表
handleFetchLiveDataList = () => { handleFetchLiveDataList = () => {
const { liveQuery, liveSize } = this.state const { liveQuery, liveSize } = this.state;
const _data = [...this.props.data] const _data = [...this.props.data];
let currentLiveCourseListData = [] let currentLiveCourseListData = [];
_data.map((item) => { _data.map((item) => {
item.courseList.map((childItem, childIndex) => { item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === "LIVE") { if (childItem.courseType === 'LIVE') {
currentLiveCourseListData.push(childItem.courseId) currentLiveCourseListData.push(childItem.courseId);
} }
return childItem return childItem;
}) });
return item return item;
}) });
const params = { const params = {
...liveQuery, ...liveQuery,
size: liveSize, size: liveSize,
excludeCourseIdList: currentLiveCourseListData excludeCourseIdList: currentLiveCourseListData,
} };
CourseService.getLiveCloudCourseBasePage(params).then((res) => { CourseService.getLiveCloudCourseBasePage(params).then((res) => {
const { result = {} } = res const { result = {} } = res;
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
liveDataSource: records, liveDataSource: records,
liveTotalCount: Number(total), liveTotalCount: Number(total),
currentLiveCourseListData currentLiveCourseListData,
}) });
}) });
} };
// 获取视频课列表 // 获取视频课列表
handleFetchVideoDataList = () => { handleFetchVideoDataList = () => {
const { videoQuery, videoSize, videoDataSource, videoTotalCount, videoCourseDivision } = this.state const { videoQuery, videoSize, videoDataSource, videoTotalCount, videoCourseDivision } = this.state;
const _data = [...this.props.data] const _data = [...this.props.data];
let currentVideoCourseListData = [] let currentVideoCourseListData = [];
_data.map((item, index) => { _data.map((item, index) => {
item.courseList.map((childItem, childIndex) => { item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === "VOICE") { if (childItem.courseType === 'VOICE') {
currentVideoCourseListData.push(childItem.courseId) currentVideoCourseListData.push(childItem.courseId);
} }
return childItem return childItem;
}) });
return item return item;
}) });
const params = { const params = {
...videoQuery[videoCourseDivision], ...videoQuery[videoCourseDivision],
size: videoSize[videoCourseDivision], size: videoSize[videoCourseDivision],
courseDivision: videoCourseDivision === "internal" ? "INTERNAL" : "EXTERNAL", courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL',
excludeCourseIdList: currentVideoCourseListData excludeCourseIdList: currentVideoCourseListData,
} };
CourseService.videoScheduleBasePage(params).then((res) => { CourseService.videoScheduleBasePage(params).then((res) => {
const { result = {} } = res const { result = {} } = res;
console.log("result", result) console.log('result', result);
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
videoDataSource: { videoDataSource: {
...videoDataSource, ...videoDataSource,
[videoCourseDivision]: records [videoCourseDivision]: records,
}, },
videoTotalCount: { videoTotalCount: {
...videoTotalCount, ...videoTotalCount,
[videoCourseDivision]: Number(total) [videoCourseDivision]: Number(total),
}, },
currentVideoCourseListData currentVideoCourseListData,
}) });
}) });
} };
// 获取图文课列表 // 获取图文课列表
handleFetchPictureDataList = () => { handleFetchPictureDataList = () => {
const { pictureQuery, pictureSize } = this.state const { pictureQuery, pictureSize } = this.state;
const _data = [...this.props.data] const _data = [...this.props.data];
let currentPictureCourseListData = [] let currentPictureCourseListData = [];
_data.map((item, index) => { _data.map((item, index) => {
item.courseList.map((childItem, childIndex) => { item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === "PICTURE") { if (childItem.courseType === 'PICTURE') {
currentPictureCourseListData.push(childItem.courseId) currentPictureCourseListData.push(childItem.courseId);
} }
return childItem return childItem;
}) });
return item return item;
}) });
const params = { const params = {
...pictureQuery, ...pictureQuery,
size: pictureSize, size: pictureSize,
courseType: "PICTURE", courseType: 'PICTURE',
storeId: User.getStoreId(), storeId: User.getStoreId(),
excludeCourseIdList: currentPictureCourseListData excludeCourseIdList: currentPictureCourseListData,
} };
Service.Hades("public/hades/mediaCoursePage", params).then((res) => { Service.Hades('public/hades/mediaCoursePage', params).then((res) => {
const { result = {} } = res const { result = {} } = res;
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
pictureDataSource: records, pictureDataSource: records,
pictureTotalCount: Number(total), pictureTotalCount: Number(total),
currentPictureCourseListData currentPictureCourseListData,
}) });
}) });
} };
handleChangVideoCourseName = (value) => { handleChangVideoCourseName = (value) => {
const { videoQuery, videoCourseDivision, videoSearchName } = this.state const { videoQuery, videoCourseDivision, videoSearchName } = this.state;
videoQuery[videoCourseDivision].courseName = value videoQuery[videoCourseDivision].courseName = value;
videoQuery[videoCourseDivision].current = 1 videoQuery[videoCourseDivision].current = 1;
this.setState({ this.setState({
...videoQuery, ...videoQuery,
videoSearchDefalt: value, videoSearchDefalt: value,
videoSearchName: { videoSearchName: {
...videoSearchName, ...videoSearchName,
[videoCourseDivision]: value [videoCourseDivision]: value,
} },
}) });
} };
handleChangLiveCourseName = (value) => { handleChangLiveCourseName = (value) => {
const { liveQuery } = this.state const { liveQuery } = this.state;
liveQuery.courseName = value liveQuery.courseName = value;
liveQuery.current = 1 liveQuery.current = 1;
this.setState({ this.setState({
liveQuery liveQuery,
}) });
} };
handleChangPictureCourseName = (value) => { handleChangPictureCourseName = (value) => {
const { pictureQuery } = this.state const { pictureQuery } = this.state;
pictureQuery.courseName = value pictureQuery.courseName = value;
pictureQuery.current = 1 pictureQuery.current = 1;
this.setState({ this.setState({
pictureQuery pictureQuery,
}) });
} };
onShowLiveSizeChange = (current, size) => { onShowLiveSizeChange = (current, size) => {
if (current === size) { if (current === size) {
return return;
} }
this.setState( this.setState(
{ {
liveSize: size liveSize: size,
}, },
() => { () => {
this.handleFetchLiveDataList() this.handleFetchLiveDataList();
} }
) );
} };
onShowVideoSizeChange = (current, size) => { onShowVideoSizeChange = (current, size) => {
if (current === size) { if (current === size) {
return return;
} }
this.setState( this.setState(
{ {
videoSize: size videoSize: size,
}, },
() => { () => {
this.handleFetchLiveDataList() this.handleFetchLiveDataList();
} }
) );
} };
onShowPictureSizeChange = (current, size) => { onShowPictureSizeChange = (current, size) => {
if (current === size) { if (current === size) {
return return;
} }
this.setState( this.setState(
{ {
pictureSize: size pictureSize: size,
}, },
() => { () => {
this.handleFetchPictureDataList() this.handleFetchPictureDataList();
} }
) );
} };
// 请求表头 // 请求表头
parseLiveColumns = () => { parseLiveColumns = () => {
const columns = [ const columns = [
{ {
title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:"400" title: (
}}>&#xe61d;</i></Tooltip></span>, <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', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'40%', width: '40%',
render: (val, record) => { render: (val, record) => {
let hasCover = false let hasCover = false;
return ( return (
<div className='course-info'> <div className='course-info'>
{record.courseMediaVOS.map((item) => { {record.courseMediaVOS.map((item) => {
if (item.contentType === "COVER") { if (item.contentType === 'COVER') {
hasCover = true hasCover = true;
return <img className='course-cover' src={item.mediaUrl} alt='' /> return <img className='course-cover' src={item.mediaUrl} alt='' />;
} }
return null return null;
})} })}
<If condition={!hasCover}> <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> </If>
<div> <div>
...@@ -316,35 +325,35 @@ class SelectOperatorModal extends React.Component { ...@@ -316,35 +325,35 @@ class SelectOperatorModal extends React.Component {
</span> </span>
</div> </div>
</div> </div>
) );
} },
}, },
{ {
title: "上课时间", title: '上课时间',
key: "courseTime", key: 'courseTime',
dataIndex: "courseTime", dataIndex: 'courseTime',
width: "40%", width: '40%',
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div>
<div>{formatDate("YYYY-MM-DD", record.startTime)}</div> <div>{formatDate('YYYY-MM-DD', record.startTime)}</div>
<div> <div>
{formatDate("H:i", record.startTime)}~{formatDate("H:i", record.endTime)} {formatDate('H:i', record.startTime)}~{formatDate('H:i', record.endTime)}
</div> </div>
</div> </div>
) );
} },
}, },
{ {
title: "学院展示", title: '学院展示',
key: "shelfState", key: 'shelfState',
dataIndex: "shelfState", dataIndex: 'shelfState',
width: "20%", width: '20%',
render: (val, record) => { render: (val, record) => {
return ( return (
<span> <span>
<Choose> <Choose>
<When condition={record.shelfState === "YES"}> <When condition={record.shelfState === 'YES'}>
<span>开启</span> <span>开启</span>
</When> </When>
<Otherwise> <Otherwise>
...@@ -352,24 +361,33 @@ class SelectOperatorModal extends React.Component { ...@@ -352,24 +361,33 @@ class SelectOperatorModal extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</span> </span>
) );
} },
} },
] ];
return columns return columns;
} };
// 请求表头 // 请求表头
parseVideoColumns = () => { parseVideoColumns = () => {
const { videoCourseDivision } = this.state const { videoCourseDivision } = this.state;
const columns = [ const columns = [
{ {
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: 'course', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'60%', width: '60%',
render: (val, record) => { render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record const { coverUrl, scheduleVideoUrl } = record;
return ( return (
<div className='course-info'> <div className='course-info'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
...@@ -377,242 +395,251 @@ class SelectOperatorModal extends React.Component { ...@@ -377,242 +395,251 @@ class SelectOperatorModal extends React.Component {
className='course-cover' className='course-cover'
src={ src={
coverUrl || coverUrl ||
(videoCourseDivision === "internal" (videoCourseDivision === 'internal'
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast` ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: "https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png") : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
} }
alt='' alt=''
/> />
<div className='course-name'>{record.courseName}</div> <div className='course-name'>{record.courseName}</div>
</div> </div>
) );
} },
}, },
{ {
title: "课程时长", title: '课程时长',
key: "courseTime", key: 'courseTime',
dataIndex: "courseTime", dataIndex: 'courseTime',
width: "20%", width: '20%',
render: (val, record) => { render: (val, record) => {
return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span> return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span>;
} },
}, },
{ {
title: "学院展示", title: '学院展示',
key: "shelfState", key: 'shelfState',
dataIndex: "shelfState", dataIndex: 'shelfState',
width: "20%", width: '20%',
render: (val, record) => { render: (val, record) => {
return ( return (
<Choose> <Choose>
<When condition={record.shelfState === "YES"}> <When condition={record.shelfState === 'YES'}>
<span>开启</span> <span>开启</span>
</When> </When>
<Otherwise> <Otherwise>
<span>关闭</span> <span>关闭</span>
</Otherwise> </Otherwise>
</Choose> </Choose>
) );
} },
} },
] ];
return columns return columns;
} };
// 请求表头 // 请求表头
parsePictureColumns = () => { parsePictureColumns = () => {
const columns = [ const columns = [
{ {
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: 'course', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'55%', width: '55%',
render: (val, record) => { render: (val, record) => {
const { coverUrl } = record const { coverUrl } = record;
return ( return (
<div className='course-info'> <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 className='course-name'>{record.courseName}</div>
</div> </div>
) );
} },
}, },
{ {
title: "更新时间", title: '更新时间',
key: "updated", key: 'updated',
dataIndex: "updated", dataIndex: 'updated',
width: "25%", width: '25%',
render: (val, record) => { render: (val, record) => {
return <span className='course-status'>{formatDate("YYYY-MM-DD", record.updated)}</span> return <span className='course-status'>{formatDate('YYYY-MM-DD', record.updated)}</span>;
} },
}, },
{ {
title: "学院展示", title: '学院展示',
key: "shelfState", key: 'shelfState',
dataIndex: "shelfState", dataIndex: 'shelfState',
width: "20%", width: '20%',
render: (val, record) => { render: (val, record) => {
return <span>{record.shelfState === "YES" ? "开启" : "关闭"}</span> return <span>{record.shelfState === 'YES' ? '开启' : '关闭'}</span>;
} },
} },
] ];
return columns return columns;
} };
selectLiveList = (record, selected) => { selectLiveList = (record, selected) => {
const { selectVideo, currentTaskCourseData, selectLive, selectPicture } = this.state const { selectVideo, currentTaskCourseData, selectLive, selectPicture } = this.state;
let _list = [] let _list = [];
if (selected || !_.find(selectLive, (item) => item.liveCourseId === record.liveCourseId)) { if (selected || !_.find(selectLive, (item) => item.liveCourseId === record.liveCourseId)) {
_list = _.uniq(selectLive.concat([record]), false, (item) => item.liveCourseId) _list = _.uniq(selectLive.concat([record]), false, (item) => item.liveCourseId);
} else { } else {
_list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId) _list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId);
} }
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) { if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程") message.warning('无法继续选择，一个任务最多关联20个课程');
return return;
} }
this.setState({ selectLive: _list }) this.setState({ selectLive: _list });
} };
selectVideoList = (record, selected) => { selectVideoList = (record, selected) => {
const { selectVideo, currentTaskCourseData, selectLive, selectPicture, videoCourseDivision } = this.state const { selectVideo, currentTaskCourseData, selectLive, selectPicture, videoCourseDivision } = this.state;
let { [videoCourseDivision]: selectList } = selectVideo let { [videoCourseDivision]: selectList } = selectVideo;
let _list = [] let _list = [];
if (selected || !_.find(selectList, (item) => item.id === record.id)) { if (selected || !_.find(selectList, (item) => item.id === record.id)) {
_list = _.uniq(selectList.concat([record]), false, (item) => item.id) _list = _.uniq(selectList.concat([record]), false, (item) => item.id);
} else { } else {
_list = _.reject(selectList, (item) => item.id === record.id) _list = _.reject(selectList, (item) => item.id === record.id);
} }
if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) { if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程") message.warning('无法继续选择，一个任务最多关联20个课程');
return return;
} }
this.setState({ this.setState({
selectVideo: { selectVideo: {
...selectVideo, ...selectVideo,
[videoCourseDivision]: _list [videoCourseDivision]: _list,
} },
}) });
} };
selectPictureList = (record, selected) => { selectPictureList = (record, selected) => {
const { selectVideo, currentTaskCourseData, selectLive, selectPicture } = this.state const { selectVideo, currentTaskCourseData, selectLive, selectPicture } = this.state;
let _list = [] let _list = [];
if (selected || !_.find(selectPicture, (item) => item.id === record.id)) { if (selected || !_.find(selectPicture, (item) => item.id === record.id)) {
_list = _.uniq(selectPicture.concat([record]), false, (item) => item.id) _list = _.uniq(selectPicture.concat([record]), false, (item) => item.id);
} else { } else {
_list = _.reject(selectPicture, (item) => item.id === record.id) _list = _.reject(selectPicture, (item) => item.id === record.id);
} }
if (_list.length + currentTaskCourseData.length + selectLive.length + selectVideo.length > 20) { if (_list.length + currentTaskCourseData.length + selectLive.length + selectVideo.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程") message.warning('无法继续选择，一个任务最多关联20个课程');
return return;
} }
this.setState({ selectPicture: _list }) this.setState({ selectPicture: _list });
} };
clearSelectCourse = () => { clearSelectCourse = () => {
this.setState({ this.setState({
selectLive: [], selectLive: [],
selectVideo: { selectVideo: {
internal: [], internal: [],
external: [] external: [],
}, },
selectPicture: [] selectPicture: [],
}) });
} };
handleSelectVideo = (selectVideo) => { handleSelectVideo = (selectVideo) => {
return selectVideo.map((item) => { return selectVideo.map((item) => {
let _item = {} let _item = {};
_item.courseId = item.id _item.courseId = item.id;
_item.courseType = "VOICE" _item.courseType = 'VOICE';
_item.courseName = item.courseName _item.courseName = item.courseName;
return _item return _item;
}) });
} };
handleSelectLive = (selectLive) => { handleSelectLive = (selectLive) => {
return selectLive.map((item, index) => { return selectLive.map((item, index) => {
let _item = {} let _item = {};
_item.courseId = item.liveCourseId _item.courseId = item.liveCourseId;
_item.courseType = "LIVE" _item.courseType = 'LIVE';
_item.courseName = item.courseName _item.courseName = item.courseName;
_item.courseState = item.courseState _item.courseState = item.courseState;
return _item return _item;
}) });
} };
videoCourseDivisionChange = (e) => { videoCourseDivisionChange = (e) => {
const { videoSearchName } = this.state const { videoSearchName } = this.state;
this.setState( this.setState(
{ {
videoCourseDivision: e.target.value, videoCourseDivision: e.target.value,
videoSearchDefalt: videoSearchName[e.target.value] videoSearchDefalt: videoSearchName[e.target.value],
}, },
() => { () => {
this.handleFetchVideoDataList() this.handleFetchVideoDataList();
} }
) );
} };
handleSelectPicture = (selectPicture) => { handleSelectPicture = (selectPicture) => {
return selectPicture.map((item, index) => { return selectPicture.map((item, index) => {
let _item = {} let _item = {};
_item.courseId = item.id _item.courseId = item.id;
_item.courseType = "PICTURE" _item.courseType = 'PICTURE';
_item.courseName = item.courseName _item.courseName = item.courseName;
return _item return _item;
}) });
} };
renderFooter = () => { renderFooter = () => {
const { activeKey } = this.state const { activeKey } = this.state;
let href = "" let href = '';
switch (activeKey) { switch (activeKey) {
case "live": case 'live':
href = ( href = (
<a <a
target='_blank' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
className='link-create-course' className='link-create-course'
href={window.location.origin + window.location.pathname + "#/create-live-course?type=add"} href={window.location.origin + window.location.pathname + '#/create-live-course?type=add'}
onClick={this.props.onClose}> onClick={this.props.onClose}>
没有找到需要的直播课？<span>去创建</span> 没有找到需要的直播课？<span>去创建</span>
</a> </a>
) );
break break;
case "video": case 'video':
href = ( href = (
<a <a
target='_blank' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
className='link-create-course' className='link-create-course'
href={window.location.origin + window.location.pathname + "#/create-video-course?type=add"} href={window.location.origin + window.location.pathname + '#/create-video-course?type=add'}
onClick={this.props.onClose}> onClick={this.props.onClose}>
没有找到需要的视频课？<span>去创建</span> 没有找到需要的视频课？<span>去创建</span>
</a> </a>
) );
break break;
case "picture": case 'picture':
href = ( href = (
<a <a
target='_blank' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
className='link-create-course' className='link-create-course'
href={window.location.origin + window.location.pathname + "#/create-graphics-course?type=add"} href={window.location.origin + window.location.pathname + '#/create-graphics-course?type=add'}
onClick={this.props.onClose}> onClick={this.props.onClose}>
没有找到需要的图文课？<span>去创建</span> 没有找到需要的图文课？<span>去创建</span>
</a> </a>
) );
break break;
default: default:
break break;
} }
return href return href;
} };
render() { render() {
const { visible } = this.props const { visible } = this.props;
const { const {
liveDataSource, liveDataSource,
liveSize, liveSize,
...@@ -632,8 +659,8 @@ class SelectOperatorModal extends React.Component { ...@@ -632,8 +659,8 @@ class SelectOperatorModal extends React.Component {
pictureQuery, pictureQuery,
pictureTotalCount, pictureTotalCount,
videoCourseDivision videoCourseDivision,
} = this.state } = this.state;
return ( return (
<Modal <Modal
title='关联课程' title='关联课程'
...@@ -649,7 +676,7 @@ class SelectOperatorModal extends React.Component { ...@@ -649,7 +676,7 @@ class SelectOperatorModal extends React.Component {
this.renderFooter(), this.renderFooter(),
<Button <Button
onClick={() => { onClick={() => {
this.props.onClose() this.props.onClose();
}}> }}>
取消 取消
</Button>, </Button>,
...@@ -660,18 +687,18 @@ class SelectOperatorModal extends React.Component { ...@@ -660,18 +687,18 @@ class SelectOperatorModal extends React.Component {
...this.handleSelectVideo(selectVideo.internal), ...this.handleSelectVideo(selectVideo.internal),
...this.handleSelectVideo(selectVideo.external), ...this.handleSelectVideo(selectVideo.external),
...this.handleSelectLive(selectLive), ...this.handleSelectLive(selectLive),
...this.handleSelectPicture(selectPicture) ...this.handleSelectPicture(selectPicture),
]) ])
}> }>
确定 确定
</Button> </Button>,
]}> ]}>
<div> <div>
<Tabs <Tabs
type='line' type='line'
defaultActiveKey='live' defaultActiveKey='live'
onChange={(activeKey) => { onChange={(activeKey) => {
this.setState({ activeKey: activeKey }) this.setState({ activeKey: activeKey });
}}> }}>
<TabPane tab='直播课' key='live'> <TabPane tab='直播课' key='live'>
<div className='search-container'> <div className='search-container'>
...@@ -680,10 +707,10 @@ class SelectOperatorModal extends React.Component { ...@@ -680,10 +707,10 @@ class SelectOperatorModal extends React.Component {
placeholder='搜索课程名称' placeholder='搜索课程名称'
style={{ width: 200 }} style={{ width: 200 }}
onChange={(e) => { onChange={(e) => {
this.handleChangLiveCourseName(e.target.value) this.handleChangLiveCourseName(e.target.value);
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchLiveDataList() this.handleFetchLiveDataList();
}} }}
/> />
</div> </div>
...@@ -707,32 +734,36 @@ class SelectOperatorModal extends React.Component { ...@@ -707,32 +734,36 @@ class SelectOperatorModal extends React.Component {
</div> </div>
</div> </div>
<div> <div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.liveCourseId} rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource} dataSource={liveDataSource}
columns={this.parseLiveColumns()} columns={this.parseLiveColumns()}
pagination={false} pagination={false}
bordered bordered
rowSelection={{ rowSelection={{
type: "checkbox", type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, "liveCourseId"), selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: (record, selected) => { onSelect: (record, selected) => {
this.selectLiveList(record, selected) this.selectLiveList(record, selected);
}, },
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = [];
if (selected) { if (selected) {
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId) _list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId);
} else { } else {
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId)) _list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId));
} }
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) { if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程") message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length - 20 const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length - 20;
_list.splice(_list.length - extraLength, extraLength) _list.splice(_list.length - extraLength, extraLength);
} }
this.setState({ selectLive: _list }) this.setState({ selectLive: _list });
} },
}} }}
/> />
{liveDataSource.length > 0 && ( {liveDataSource.length > 0 && (
...@@ -743,15 +774,15 @@ class SelectOperatorModal extends React.Component { ...@@ -743,15 +774,15 @@ class SelectOperatorModal extends React.Component {
size='small' size='small'
total={liveTotalCount} total={liveTotalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 } const _query = { ...liveQuery, current: page + 1 };
this.setState( this.setState(
{ {
liveQuery: _query liveQuery: _query,
}, },
() => { () => {
this.handleFetchLiveDataList() this.handleFetchLiveDataList();
} }
) );
}} }}
onShowSizeChange={this.onShowLiveSizeChange} onShowSizeChange={this.onShowLiveSizeChange}
/> />
...@@ -772,10 +803,10 @@ class SelectOperatorModal extends React.Component { ...@@ -772,10 +803,10 @@ class SelectOperatorModal extends React.Component {
placeholder='搜索课程名称' placeholder='搜索课程名称'
style={{ width: 200 }} style={{ width: 200 }}
onChange={(e) => { onChange={(e) => {
this.handleChangVideoCourseName(e.target.value) this.handleChangVideoCourseName(e.target.value);
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchVideoDataList() this.handleFetchVideoDataList();
}} }}
/> />
</div> </div>
...@@ -798,37 +829,41 @@ class SelectOperatorModal extends React.Component { ...@@ -798,37 +829,41 @@ class SelectOperatorModal extends React.Component {
</div> </div>
</div> </div>
<div> <div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id} rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]} dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()} columns={this.parseVideoColumns()}
pagination={false} pagination={false}
bordered bordered
rowSelection={{ rowSelection={{
type: "checkbox", type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], "id"), selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
onSelect: (record, selected) => { onSelect: (record, selected) => {
this.selectVideoList(record, selected) this.selectVideoList(record, selected);
}, },
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = [];
if (selected) { if (selected) {
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id) _list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id);
} else { } else {
_list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id)) _list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id));
} }
if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) { if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程") message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = _list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length - 20 const extraLength = _list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length - 20;
_list.splice(_list.length - extraLength, extraLength) _list.splice(_list.length - extraLength, extraLength);
} }
this.setState({ this.setState({
selectVideo: { selectVideo: {
...selectVideo, ...selectVideo,
[videoCourseDivision]: _list [videoCourseDivision]: _list,
} },
}) });
} },
}} }}
/> />
{videoDataSource[videoCourseDivision].length > 0 && ( {videoDataSource[videoCourseDivision].length > 0 && (
...@@ -839,19 +874,19 @@ class SelectOperatorModal extends React.Component { ...@@ -839,19 +874,19 @@ class SelectOperatorModal extends React.Component {
size='small' size='small'
total={videoTotalCount[videoCourseDivision]} total={videoTotalCount[videoCourseDivision]}
toPage={(page) => { toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 } const _query = { ...videoQuery[videoCourseDivision], current: page + 1 };
this.setState( this.setState(
{ {
videoQuery: { videoQuery: {
...videoQuery, ...videoQuery,
[videoCourseDivision]: _query [videoCourseDivision]: _query,
} },
}, },
() => { () => {
this.handleFetchVideoDataList() this.handleFetchVideoDataList();
} }
) );
}} }}
onShowSizeChange={this.onShowVideoSizeChange} onShowSizeChange={this.onShowVideoSizeChange}
/> />
...@@ -866,10 +901,10 @@ class SelectOperatorModal extends React.Component { ...@@ -866,10 +901,10 @@ class SelectOperatorModal extends React.Component {
placeholder='搜索课程名称' placeholder='搜索课程名称'
style={{ width: 200 }} style={{ width: 200 }}
onChange={(e) => { onChange={(e) => {
this.handleChangPictureCourseName(e.target.value) this.handleChangPictureCourseName(e.target.value);
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchPictureDataList() this.handleFetchPictureDataList();
}} }}
/> />
</div> </div>
...@@ -893,32 +928,36 @@ class SelectOperatorModal extends React.Component { ...@@ -893,32 +928,36 @@ class SelectOperatorModal extends React.Component {
</div> </div>
</div> </div>
<div> <div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id} rowKey={(record) => record.id}
dataSource={pictureDataSource} dataSource={pictureDataSource}
columns={this.parsePictureColumns()} columns={this.parsePictureColumns()}
pagination={false} pagination={false}
bordered bordered
rowSelection={{ rowSelection={{
type: "checkbox", type: 'checkbox',
selectedRowKeys: _.pluck(selectPicture, "id"), selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: (record, selected) => { onSelect: (record, selected) => {
this.selectPictureList(record, selected) this.selectPictureList(record, selected);
}, },
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = [];
if (selected) { if (selected) {
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id) _list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id);
} else { } else {
_list = _.reject(selectPicture, (item) => _.find(changeRows, (data) => data.id === item.id)) _list = _.reject(selectPicture, (item) => _.find(changeRows, (data) => data.id === item.id));
} }
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length > 20) { if (_list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程") message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length - 20 const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length - 20;
_list.splice(_list.length - extraLength, extraLength) _list.splice(_list.length - extraLength, extraLength);
} }
this.setState({ selectPicture: _list }) this.setState({ selectPicture: _list });
} },
}} }}
/> />
{pictureDataSource.length > 0 && ( {pictureDataSource.length > 0 && (
...@@ -929,15 +968,15 @@ class SelectOperatorModal extends React.Component { ...@@ -929,15 +968,15 @@ class SelectOperatorModal extends React.Component {
size='small' size='small'
total={pictureTotalCount} total={pictureTotalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...pictureQuery, current: page + 1 } const _query = { ...pictureQuery, current: page + 1 };
this.setState( this.setState(
{ {
pictureQuery: _query pictureQuery: _query,
}, },
() => { () => {
this.handleFetchPictureDataList() this.handleFetchPictureDataList();
} }
) );
}} }}
onShowSizeChange={this.onShowPictureSizeChange} onShowSizeChange={this.onShowPictureSizeChange}
/> />
...@@ -948,8 +987,8 @@ class SelectOperatorModal extends React.Component { ...@@ -948,8 +987,8 @@ class SelectOperatorModal extends React.Component {
</Tabs> </Tabs>
</div> </div>
</Modal> </Modal>
) );
} }
} }
export default SelectOperatorModal export default SelectOperatorModal;
src/modules/teach-tool/examination-manager/ExamData.tsx
import React, { useState, useRef, useEffect, useContext } from 'react' import React, { useState, useRef, useEffect, useContext } from 'react';
import Service from "@/common/js/service"; import Service from '@/common/js/service';
import { PageControl } from "@/components"; import { PageControl } from '@/components';
import { Input, Select, Tooltip, Button, Table } from 'antd'; 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 moment from 'moment';
import './userData.less' import './userData.less';
const { Search } = Input; const { Search } = Input;
const { Option } = Select; const { Option } = Select;
interface sortType { interface sortType {
type: "ascend" | "descend" | null | undefined type: 'ascend' | 'descend' | null | undefined;
} }
function ExamData(props: any) { function ExamData(props: any) {
const sortStatus: sortType = { const sortStatus: sortType = {
type: undefined type: undefined,
} };
const examDataInit: any = {}; const examDataInit: any = {};
const queryInit: any = { current: 1, size: 10, order: 'SORT_ASC' }; const queryInit: any = { current: 1, size: 10, order: 'SORT_ASC' };
const [examData, setUserData] = useState(examDataInit); const [examData, setUserData] = useState(examDataInit);
const [list, setList] = useState([]); const [list, setList] = useState([]);
const [query, setQuery] = useState(queryInit); const [query, setQuery] = useState(queryInit);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [field, setfield] = useState(''); const [field, setfield] = useState('');
const [allData, setAllData] = useState(0); const [allData, setAllData] = useState(0);
const [order, setOrder] = useState(sortStatus.type); const [order, setOrder] = useState(sortStatus.type);
const questionTypeList = { const questionTypeList = {
SINGLE_CHOICE: "单选题", SINGLE_CHOICE: '单选题',
MULTI_CHOICE: "多选题", MULTI_CHOICE: '多选题',
JUDGE: "判断题", JUDGE: '判断题',
GAP_FILLING: "填空题", GAP_FILLING: '填空题',
INDEFINITE_CHOICE: "不定项选择题", INDEFINITE_CHOICE: '不定项选择题',
}; };
const userTypeEnum = { const userTypeEnum = {
WORK_WE_CHAT: '企业微信', WORK_WE_CHAT: '企业微信',
WE_CHAT: '微信' WE_CHAT: '微信',
} };
const userExamStateEnum = { const userExamStateEnum = {
EXAM: '进行中', EXAM: '进行中',
LACK_EXAM: '缺考', LACK_EXAM: '缺考',
FINISH_EXAM: '已考试' FINISH_EXAM: '已考试',
} };
const orderEnum = { const orderEnum = {
currentAccuracy: { currentAccuracy: {
ascend: 'ACCURACY_ASC', ascend: 'ACCURACY_ASC',
descend: 'ACCURACY_DESC' descend: 'ACCURACY_DESC',
}, },
};
}
const queryRef = useRef({});
const queryRef = useRef({}); useEffect(() => {
queryExamUserData();
useEffect(() => { }, []);
queryExamUserData();
}, []) useEffect(() => {
queryRef.current = query;
useEffect(() => { queryExamUserDataList();
queryRef.current = query; }, [query]);
queryExamUserDataList();
}, [query]) function queryExamUserData() {
Service.Hades('public/hades/queryExamQuestionData', {
function queryExamUserData() { examId: props.examId,
Service.Hades('public/hades/queryExamQuestionData', { tenantId: User.getStoreId(),
examId: props.examId, userId: User.getStoreUserId(),
tenantId: User.getStoreId(), source: 0,
userId: User.getStoreUserId(), }).then((res) => {
source: 0 setUserData(res.result);
}).then((res) => { });
setUserData(res.result) }
}) function queryExamUserDataList() {
} Service.Hades('public/hades/queryExamQuestionDataList', {
...query,
examId: props.examId,
function queryExamUserDataList() { tenantId: User.getStoreId(),
Service.Hades('public/hades/queryExamQuestionDataList', { userId: User.getStoreUserId(),
...query, source: 0,
examId: props.examId, }).then((res) => {
tenantId: User.getStoreId(), setList(res.result.records);
userId: User.getStoreUserId(), setTotal(parseInt(res.result.total));
source: 0 if (!allData) {
}).then((res) => { setAllData(parseInt(res.result.total));
setList(res.result.records); }
setTotal(parseInt(res.result.total)) });
if (!allData) { }
setAllData(parseInt(res.result.total))
} const columns = [
}) {
} title: '序号',
dataIndex: 'sort',
width: 60,
const columns = [ render: (text: any, record: any, index: any) => <span>{index + 1}</span>,
},
{ {
title: "序号", title: '题目',
dataIndex: "sort", dataIndex: 'questionStem',
width: 60, ellipsis: true,
render: (text: any) => <span>{text + 1}</span>, width: 350,
}, render: (val: any) => {
{ var handleVal = val;
title: "题目", handleVal = handleVal.replace(/<(?!img|input).*?>/g, '');
dataIndex: "questionStem", handleVal = handleVal.replace(/<\s?input[^>]*>/gi, '_、');
ellipsis: true, handleVal = handleVal.replace(/\&nbsp\;/gi, ' ');
width: 350, return (
render: (val: any) => { <Tooltip
var handleVal = val; overlayClassName='aid-tool-list'
handleVal = handleVal.replace(/<(?!img|input).*?>/g, ""); title={<div style={{ maxWidth: 700, width: 'auto' }}>{handleVal}</div>}
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、"); placement='topLeft'
handleVal = handleVal.replace(/\&nbsp\;/gi, " "); overlayStyle={{ maxWidth: 700 }}>
return ( {handleVal}
<Tooltip </Tooltip>
overlayClassName="aid-tool-list" );
title={ },
<div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div> },
} {
placement="topLeft" title: '题型',
overlayStyle={{ maxWidth: 700 }} dataIndex: 'questionType',
> render: (text: any) => <span>{(questionTypeList as any)[text]}</span>,
{handleVal} filters: Object.keys(questionTypeList).map((key) => {
</Tooltip> return {
); text: (questionTypeList as any)[key],
}, value: key,
};
}, }),
{ },
title: "题型", {
dataIndex: "questionType", title: '本次正确率',
render: (text: any) => <span>{(questionTypeList as any)[text]}</span>, dataIndex: 'currentAccuracy',
filters: Object.keys(questionTypeList).map((key) => { sorter: true,
return { sortOrder: field === 'currentAccuracy' ? order : sortStatus.type,
text: (questionTypeList as any)[key], render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
value: key },
} {
}), title: (
<div>
}, 历史正确率{' '}
{ <Tooltip overlayClassName='tool-list' title='包含本次考试正确率' placement='top' overlayStyle={{ maxWidth: 700 }}>
title: "本次正确率", {' '}
dataIndex: "currentAccuracy", <span style={{ color: 'rgba(191, 191, 191, 1)' }} className='icon iconfont'>
sorter: true, &#xe61d;
sortOrder: field === "currentAccuracy" ? order : sortStatus.type, </span>
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>, </Tooltip>
},
{
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>
),
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> </div>
);
} }
export default ExamData;
export default ExamData;
\ No newline at end of file
src/modules/teach-tool/paper-manage/OperatePaper.less
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
} }
.table-style { .table-style {
border: 1px solid #f0f0f0 !important; border: 1px solid #f0f0f0 !important;
margin-bottom: 70px;
} }
.ant-tabs { .ant-tabs {
color: #666666; 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