Skip to content

X
xiaomai-cloud-class-web
Commit 5184dc02 by guomingpang
Options

修复导出新打开页面的问题

parent 66fa34f4
Showing with 119 additions and 121 deletions
src/modules/knowledge-base/components/WatchDataModal.jsx
...@@ -2,25 +2,25 @@ ...@@ -2,25 +2,25 @@
* @Description: * @Description:
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-16 10:18:31 * @Date: 2021-03-16 10:18:31
* @LastEditors: wufan * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-13 16:36:00 * @LastEditTime: 2021-05-28 15:55:14
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from "react"; import React from 'react'
import { Table, message, Input, Button } from "antd"; import { Table, message, Input, Button } from 'antd'
import { PageControl } from "@/components"; import { PageControl } from '@/components'
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 './WatchDataModal.less'; // import './WatchDataModal.less';
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration"; import dealTimeDuration from '../../course-manage/utils/dealTimeDuration'
import KnowledgeAPI from "@/data-source/knowledge/request-api"; import KnowledgeAPI from '@/data-source/knowledge/request-api'
const { Search } = Input; const { Search } = Input
class WatchDataModal extends React.Component { class WatchDataModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
dataSource: [], dataSource: [],
size: 10, size: 10,
...@@ -28,227 +28,225 @@ class WatchDataModal extends React.Component { ...@@ -28,227 +28,225 @@ class WatchDataModal extends React.Component {
current: 1, current: 1,
}, },
totalCount: 0, totalCount: 0,
}; }
} }
componentDidMount() { componentDidMount() {
this.handleFetchDataList(); this.handleFetchDataList()
} }
// 获取观看视频数据列表 // 获取观看视频数据列表
handleFetchDataList = () => { handleFetchDataList = () => {
const { query, size, totalCount } = this.state; const { query, size, totalCount } = this.state
const { id, type } = this.props; const { id, type } = this.props
const params = { const params = {
...query, ...query,
size, size,
id, id,
storeId: User.getStoreId(), storeId: User.getStoreId(),
}; }
type === "FOLDER" type === 'FOLDER'
? KnowledgeAPI.queryPageKnowledgeFolderWatchInfo(params).then((res) => { ? KnowledgeAPI.queryPageKnowledgeFolderWatchInfo(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),
}); })
}) })
: KnowledgeAPI.queryPageKnowledgeMediaCourseWatchInfo(params).then( : KnowledgeAPI.queryPageKnowledgeMediaCourseWatchInfo(params).then((res) => {
(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), })
}); })
} }
);
};
handleChangNickname = (value) => { handleChangNickname = (value) => {
const isPhone = (value || "").match(/^\d+$/); const isPhone = (value || '').match(/^\d+$/)
const { query } = this.state; const { query } = this.state
if (isPhone) { if (isPhone) {
query.phone = value; query.phone = value
query.nickName = null; query.nickName = null
} else { } else {
query.nickName = value; query.nickName = value
query.phone = null; query.phone = null
} }
query.current = 1; query.current = 1
this.setState({ this.setState({
query, query,
}); })
}; }
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return; return
} }
this.setState( this.setState(
{ {
size, size,
}, },
() => { () => {
this.handleFetchDataList(); this.handleFetchDataList()
} }
); )
}; }
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
const { type } = this.props; const { type } = this.props
const columns = [ const columns = [
{ {
title: "观看学员", title: '观看学员',
key: "name", key: 'name',
dataIndex: "name", dataIndex: 'name',
}, },
{ {
title: "手机号", title: '手机号',
key: "phone", key: 'phone',
dataIndex: "phone", dataIndex: 'phone',
}, },
{ {
title: "观看者类型", title: '观看者类型',
key: "userRole", key: 'userRole',
dataIndex: "userRole", dataIndex: 'userRole',
}, },
{ {
title: "首次观看时间", title: '首次观看时间',
key: "firstWatch", key: 'firstWatch',
dataIndex: "firstWatch", dataIndex: 'firstWatch',
render: (val) => { render: (val) => {
return formatDate("YYYY-MM-DD H:i", val); return formatDate('YYYY-MM-DD H:i', val)
}, },
}, },
]; ]
if (type === "VOICE" || type === "PICTURE") { if (type === 'VOICE' || type === 'PICTURE') {
columns.push({ columns.push({
title: "观看时长", title: '观看时长',
key: "watchDuration", key: 'watchDuration',
dataIndex: "watchDuration", dataIndex: 'watchDuration',
render: (val) => { render: (val) => {
return <span>{val ? dealTimeDuration(val) : "00:00:00"}</span>; return <span>{val ? dealTimeDuration(val) : '00:00:00'}</span>
}, },
}); })
} }
if (type === "PICTURE") { if (type === 'PICTURE') {
columns.push({ columns.push({
title: "学习进度", title: '学习进度',
key: "progress", key: 'progress',
dataIndex: "progress", dataIndex: 'progress',
render: (val) => { render: (val) => {
return val === 100 ? "已完成" : <span>{val + "%"}</span>; return val === 100 ? '已完成' : <span>{val + '%'}</span>
}, },
}); })
} }
return columns; return columns
}; }
handleExportV5 = () => { handleExportV5 = () => {
const { query } = this.state; const { query } = this.state
const { id, type } = this.props; const { id, type } = this.props
const params = { const params = {
...query, ...query,
knowledgeId: id, knowledgeId: id,
storeId: User.getStoreId(), storeId: User.getStoreId(),
}; }
switch (type) { switch (type) {
case "FOLDER": case 'FOLDER':
KnowledgeAPI.exportFolderLearnSync(params).then((res) => { KnowledgeAPI.exportFolderLearnSync(params).then((res) => {
if (res.result) { if (res.result) {
window.open(res.result); const dom = document.getElementById('load-data')
dom.setAttribute('href', res.result)
dom.click()
} else { } else {
message.error("导出失败"); message.error('导出失败')
} }
}); })
break; break
case "VOICE": case 'VOICE':
KnowledgeAPI.exportVideoLearnSync(params).then((res) => { KnowledgeAPI.exportVideoLearnSync(params).then((res) => {
if (res.result) { if (res.result) {
window.open(res.result); const dom = document.getElementById('load-data')
dom.setAttribute('href', res.result)
dom.click()
} else { } else {
message.error("导出失败"); message.error('导出失败')
} }
}); })
break; break
case "PICTURE": case 'PICTURE':
KnowledgeAPI.exportPicLearnSync(params).then((res) => { KnowledgeAPI.exportPicLearnSync(params).then((res) => {
if (res.result) { if (res.result) {
window.open(res.result); const dom = document.getElementById('load-data')
dom.setAttribute('href', res.result)
dom.click()
} else { } else {
message.error("导出失败"); message.error('导出失败')
} }
}); })
break; break
default: default:
break; break
} }
}; }
render() { render() {
const { size, dataSource, totalCount, query } = this.state; const { size, dataSource, totalCount, query } = this.state
return ( return (
<div className="watch-data"> <div className='watch-data'>
<div className="search-container"> <a download id='load-data' style={{ position: 'absolute', left: '-10000px' }}></a>
<div className='search-container'>
<Search <Search
placeholder="搜索学员姓名/手机号" placeholder='搜索学员姓名/手机号'
style={{ width: 200 }} style={{ width: 200 }}
onChange={(e) => { onChange={(e) => {
this.handleChangNickname(e.target.value); this.handleChangNickname(e.target.value)
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchDataList(); this.handleFetchDataList()
}} }}
enterButton={<span className="icon iconfont">&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
</div> </div>
<div className="filter"> <div className='filter'>
<Button <Button
style={{ height: 32, margin: "16px auto 13px 0" }} style={{ height: 32, margin: '16px auto 13px 0' }}
onClick={_.debounce( onClick={_.debounce(
() => { () => {
if (!dataSource.length) { if (!dataSource.length) {
message.warning("暂无数据可导出"); message.warning('暂无数据可导出')
return; return
} }
this.handleExportV5(); this.handleExportV5()
}, },
500, 500,
true true
)} )}>
>
导出 导出
</Button> </Button>
</div> </div>
<div> <div>
<Table <Table rowKey={(record) => record.id} dataSource={dataSource} columns={this.parseColumns()} pagination={false} bordered />
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
bordered
/>
{dataSource.length > 0 && ( {dataSource.length > 0 && (
<div className="box-footer"> <div className='box-footer'>
<PageControl <PageControl
current={query.current - 1} current={query.current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
size="small" size='small'
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}
/> />
...@@ -256,8 +254,8 @@ class WatchDataModal extends React.Component { ...@@ -256,8 +254,8 @@ class WatchDataModal extends React.Component {
)} )}
</div> </div>
</div> </div>
); )
} }
} }
export default WatchDataModal; export default WatchDataModal
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