Skip to content

X
xiaomai-cloud-class-web
Commit 75cf6b8c by guomingpang
Options

feat:外部课程相关模块提交

parent ca32bda3
Showing with 269 additions and 231 deletions
src/modules/knowledge-base/modal/LiveList.less
......@@ -71,13 +71,13 @@
}
.courseware {
font-size: 14px;
color: #5289fa;
color: #2966ff;
line-height: 20px;
text-align: right;
cursor: pointer;
}
.quota-icon {
color: #5289fa;
color: #2966ff;
cursor: pointer;
}
.operate {
......@@ -85,7 +85,7 @@
align-items: center;
flex-wrap: wrap;
.operate__item {
color: #5289fa;
color: #2966ff;
cursor: pointer;
&.split {
margin: 0 8px;
......@@ -94,7 +94,7 @@
}
}
.operate-text {
color: #5289fa;
color: #2966ff;
cursor: pointer;
}
.course-start-end {
......@@ -126,7 +126,7 @@
}
.add-course-modal {
.ant-tabs-nav .ant-tabs-tab-active {
color: #ffb714;
color: #2966ff;
}
.ant-modal-content tr > td {
padding: 12px 8px !important;
......
src/modules/plan-manage/components/UserLearningData.jsx
import React from 'react';
import { withRouter } from "react-router-dom";
import {Table, Modal,Input,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 React from 'react'
import { withRouter } from 'react-router-dom'
import { Table, Modal, Input, 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 userRole = User.getUserRole();
const { Search } = Input;
const { confirm } = Modal;
import User from '@/common/js/user'
import './UserLearningData.less'
const userRole = User.getUserRole()
const { Search } = Input
const { confirm } = Modal
const LearnState = {
UN_PLAY: {
text: "未开始"
text: '未开始',
},
UNDER_WAY: {
text:"进行中"
text: '进行中',
},
FINISH : {
text:'已完成'
}
};
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:[],
size:10,
dataSource: [],
size: 10,
query: {
current: 1,
},
totalCount:0,
userLearnDetailModalSHow:false,
unbundEmployeeModalVisible:false,
totalCount: 0,
userLearnDetailModalSHow: false,
unbundEmployeeModalVisible: false,
}
}
componentDidMount(){
this.handleFetchDataList();
componentDidMount() {
this.handleFetchDataList()
}
handleFetchDataList = (_query)=>{
const { query ,size,id} = this.state;
const params ={
handleFetchDataList = (_query) => {
const { query, size, id } = this.state
const params = {
...query,
..._query,
size,
planId:id,
storeId:User.getStoreId(),
storeUserId:User.getStoreUserId(),
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)
});
});
dataSource: records,
totalCount: Number(total),
})
})
}
onShowSizeChange = (current, size) => {
if (current == size) {
return
}
this.setState({
size
},()=>{this.handleFetchDataList()})
this.setState(
{
size,
},
() => {
this.handleFetchDataList()
}
)
}
handleChangeTable = (pagination, filters, sorter)=> {
const { columnKey, order } = sorter;
const { query } = this.state;
let _columnKey;
let _order;
if (columnKey === 'latelyLearnTime' && order === 'ascend') {_columnKey="LATE_LEARN_TIME"; _order = 'SORT_ASC'; }
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter
const { query } = this.state
let _columnKey
let _order
if (columnKey === 'latelyLearnTime' && order === 'ascend') {
_columnKey = 'LATE_LEARN_TIME'
_order = 'SORT_ASC'
}
if (columnKey === 'latelyLearnTime' && order === 'descend') {
_columnKey = 'LATE_LEARN_TIME'
_order = 'SORT_DESC'
}
if (columnKey === 'startLearnTime' && order === 'ascend') {
_columnKey = 'START_LEARN_TIME'
_order = 'SORT_ASC'
}
if (columnKey === 'startLearnTime' && order === 'descend') {
_columnKey = 'START_LEARN_TIME'
_order = 'SORT_DESC'
}
if (columnKey === 'learnNum' && order === 'ascend') {
_columnKey = 'LEARN_NUM'
_order = 'SORT_ASC'
}
if (columnKey === 'latelyLearnTime' && order === 'descend') { _columnKey="LATE_LEARN_TIME"; _order = 'SORT_DESC';}
if (columnKey === 'startLearnTime' && order === 'ascend') { _columnKey="START_LEARN_TIME"; _order = 'SORT_ASC'; }
if (columnKey === 'startLearnTime' && order === 'descend') { _columnKey="START_LEARN_TIME"; _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 === 'learnNum' && order === 'descend') {
_columnKey = 'LEARN_NUM'
_order = 'SORT_DESC'
}
const _query = {
...query,
sortMap:{}
};
_query.sortMap[_columnKey]=_order;
this.setState({
query:_query
}, ()=>this.handleFetchDataList())
sortMap: {},
}
_query.sortMap[_columnKey] = _order
this.setState(
{
query: _query,
},
() => this.handleFetchDataList()
)
}
watchDetail = (record)=>{
watchDetail = (record) => {
this.setState({
userLearnDetailModalSHow:true,
storeCustomerId:record.storeCustomerId,
planId:record.planId
userLearnDetailModalSHow: true,
storeCustomerId: record.storeCustomerId,
planId: record.planId,
})
}
closeUserLearnDetailModal = ()=>{
closeUserLearnDetailModal = () => {
this.setState({
userLearnDetailModalSHow:false,
userLearnDetailModalSHow: false,
})
}
UnbundEmployee = (record)=>{
if(User.getUserRole()==='CloudOperator'){
UnbundEmployee = (record) => {
if (User.getUserRole() === 'CloudOperator') {
return confirm({
title: "你确定要解绑与学员的关系吗？",
content: "解绑后，学员该培训计划的学习数据将同步移出",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
okType: "danger",
cancelText: "取消",
title: '你确定要解绑与学员的关系吗？',
content: '解绑后，学员该培训计划的学习数据将同步移出',
icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.handleConfirmUnbundEmployee(record.storeCustomerId);
this.handleConfirmUnbundEmployee(record.storeCustomerId)
},
});
}else{
})
} else {
this.setState({
unbundEmployeeModalVisible:true,
storeCustomerId:record.storeCustomerId
unbundEmployeeModalVisible: true,
storeCustomerId: record.storeCustomerId,
})
}
}
handleConfirmUnbundEmployee=(storeCustomerId)=>{
let removeUserIds = [];
handleConfirmUnbundEmployee = (storeCustomerId) => {
let removeUserIds = []
removeUserIds.push(storeCustomerId)
const params = {
planId:getParameterByName("id"),
planId: getParameterByName('id'),
removeUserIds,
storeCustomerId:storeCustomerId,
storeId:User.getStoreId(),
storeUserId:User.getStoreUserId()
storeCustomerId: storeCustomerId,
storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(),
}
PlanService.removePlanCustomer(params).then((res) => {
this.handleFetchDataList();
message.success('解绑成功');
});
this.handleFetchDataList()
message.success('解绑成功')
})
}
handleCloseUnbundEmployeeModal = ()=>{
handleCloseUnbundEmployeeModal = () => {
this.setState({
unbundEmployeeModalVisible:false,
unbundEmployeeModalVisible: false,
})
}
// 请求表头
parselumns = () => {
let columns;
if(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager"){
let columns
if (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') {
columns = [
{
title: '学员',
key: 'storeCustomerName',
dataIndex: 'storeCustomerName',
render: (val, record) => {
return (
<div>
{val}
</div>
)
}
return <div>{val}</div>
},
},
{
title: '学习状态',
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'}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>负责人</span>
<Tooltip title='培训计划的分享者/跟进人'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'userNameList',
dataIndex: 'userNameList',
render: (val, record) => {
return (
<div>
{record.userNameList.map((item,index)=>{
return <span>{item} { (index < record.userNameList.length-1)&&(<span> 、</span>)} </span>
{record.userNameList.map((item, index) => {
return (
<span>
{item} {index < record.userNameList.length - 1 && <span> 、</span>}{' '}
</span>
)
})}
</div>
)
}
},
},
{
title: '最近学习时间',
key: 'latelyLearnTime',
dataIndex: 'latelyLearnTime',
sorter:true,
width:240,
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))}`
},
},
{
title: '开始学习时间',
key: 'startLearnTime',
dataIndex: 'startLearnTime',
width:240,
sorter:true,
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'}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>学习进度</span>
<Tooltip title='学员培训计划中达到“已完成”状态的课程数/总课程数'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'learnNum',
dataIndex: 'learnNum',
width:130,
sorter:true,
width: 130,
sorter: true,
render: (val, record) => {
return (
<div className="learn-num">
<div className='learn-num'>
<span>{record.courseFinishNum}</span>
<span>/</span>
<span>{record.courseNum}</span>
</div>
)
}
},
},
{
title: '操作',
......@@ -247,75 +274,73 @@ class UserLearningData extends React.Component {
dataIndex: 'operate',
render: (val, record) => {
return (
<div className="operate-area">
<span className="operate-item" onClick={()=>this.watchDetail(record)}>学习详情</span>
<span className="split">|</span>
<span className="operate-item" onClick={()=>{this.UnbundEmployee(record)}}>解绑</span>
<div className='operate-area'>
<span className='operate-item' onClick={() => this.watchDetail(record)}>
学习详情
</span>
<span className='split'>|</span>
<span
className='operate-item'
onClick={() => {
this.UnbundEmployee(record)
}}>
解绑
</span>
</div>
)
}
}
];
}else{
},
},
]
} else {
columns = [
{
title: '学员',
key: 'storeCustomerName',
dataIndex: 'storeCustomerName',
render: (val, record) => {
return (
<div>
{val}
</div>
)
}
return <div>{val}</div>
},
},
{
title: '学习状态',
key: 'learnState',
dataIndex: 'learnState',
render: (val, record) => {
return (
<div>
{LearnState[val].text}
</div>
)
}
return <div>{LearnState[val].text}</div>
},
},
{
title: '最近学习时间',
key: 'latelyLearnTime',
dataIndex: 'latelyLearnTime',
sorter:true,
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: '开始学习时间',
key: 'startLearnTime',
dataIndex: 'startLearnTime',
sorter:true,
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'}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>学习进度</span>
<Tooltip title='学员培训计划中达到“已完成”状态的课程数/总课程数'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'learnNum',
dataIndex: 'learnNum',
sorter:true,
sorter: true,
render: (val, record) => {
return (
<div>
......@@ -324,7 +349,7 @@ class UserLearningData extends React.Component {
<span>{record.courseNum}</span>
</div>
)
}
},
},
{
title: '操作',
......@@ -332,70 +357,84 @@ class UserLearningData extends React.Component {
dataIndex: 'operate',
render: (val, record) => {
return (
<div className="operate-area">
<span className="operate-item" onClick={()=>this.watchDetail(record)}>学习详情</span>
<span className="split">|</span>
<span className="operate-item" onClick={()=>{this.UnbundEmployee(record)}}>解绑</span>
<div className='operate-area'>
<span className='operate-item' onClick={() => this.watchDetail(record)}>
学习详情
</span>
<span className='split'>|</span>
<span
className='operate-item'
onClick={() => {
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 className='user-learning-data'>
<div className='search-container'>
<UserLearningDataFilter onChange={this.handleFetchDataList} />
</div>
<div>
<Table
rowKey={record => record.storeCustomerId}
dataSource={dataSource}
columns={this.parselumns()}
pagination={false}
className="user-learning-table"
onChange={this.handleChangeTable}
showSorterTooltip={false}
bordered
<Table
rowKey={(record) => record.storeCustomerId}
dataSource={dataSource}
columns={this.parselumns()}
pagination={false}
className='user-learning-table'
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>
{ userLearnDetailModalSHow &&
<UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
}
{unbundEmployeeModalVisible &&
{userLearnDetailModalSHow && (
<UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal} />
)}
{unbundEmployeeModalVisible && (
<UnbundEmployeeModal
visible={unbundEmployeeModalVisible}
onClose={this.handleCloseUnbundEmployeeModal}
storeCustomerId={storeCustomerId}
onConfirm={()=>{this.handleFetchDataList();this.handleCloseUnbundEmployeeModal();}}
onConfirm={() => {
this.handleFetchDataList()
this.handleCloseUnbundEmployeeModal()
}}
/>
}
)}
</div>
)
}
}
export default withRouter(UserLearningData);
\ No newline at end of file
export default withRouter(UserLearningData)
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