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