Skip to content

X
xiaomai-cloud-class-web
Commit 88745c2f by guomingpang
Options

style:修改知识库和培训管理部分样式

parent 3b0b2325
Showing with 283 additions and 364 deletions
src/modules/knowledge-base/components/KnowledgeBaseList.jsx
......@@ -2,93 +2,93 @@
* @Description:
* @Author: zangsuyun
* @Date: 2021-03-12 14:49:40
* @LastEditors: wufan
* @LastEditTime: 2021-05-13 16:35:41
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-30 18:31:24
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Table, Modal, message, Tooltip, Switch, Dropdown, Button } from "antd";
import { Route, withRouter } from "react-router-dom";
import { PageControl } from "@/components";
import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass";
import { appId, shareUrl, LIVE_SHARE } from "@/domains/course-domain/constants";
import ScanFileModal from "../../resource-disk/modal/ScanFileModal";
import WatchData from "./WatchData";
import KnowledgeAPI from "@/data-source/knowledge/request-api";
import ENUM from "../ENUM.js";
import "./KnowledgeBaseList.less";
import React from "react"
import { Table, Modal, message, Tooltip, Switch, Dropdown, Button } from "antd"
import { Route, withRouter } from "react-router-dom"
import { PageControl } from "@/components"
import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass"
import { appId, shareUrl, LIVE_SHARE } from "@/domains/course-domain/constants"
import ScanFileModal from "../../resource-disk/modal/ScanFileModal"
import WatchData from "./WatchData"
import KnowledgeAPI from "@/data-source/knowledge/request-api"
import ENUM from "../ENUM.js"
import "./KnowledgeBaseList.less"
const DEFAULT_SIZE_UNIT = 1000 * 1000; // 将B转换成M
const { confirm } = Modal;
const ENV = process.env.DEPLOY_ENV || "dev";
const DEFAULT_SIZE_UNIT = 1000 * 1000 // 将B转换成M
const { confirm } = Modal
const ENV = process.env.DEPLOY_ENV || "dev"
class KnowledgeBaseList extends React.Component {
constructor(props) {
super(props);
super(props)
this.state = {
id: "",
scanFileModal:null
};
id: "",
scanFileModal: null
}
}
handleAdminName = (adminArray) => {
let adminStr = "";
let adminStr = ""
adminArray.map((item, index) => {
if (index < adminArray.length - 1) {
adminStr = adminStr + item.adminName + "、";
adminStr = adminStr + item.adminName + "、"
} else {
adminStr = adminStr + item.adminName;
adminStr = adminStr + item.adminName
}
});
return adminStr;
};
})
return adminStr
}
handleUp = (index, record) => {
if (index === 0 && this.props.query.current === 1) {
return;
return
}
const params = {
direction: "UP",
id: record.id,
storeId: record.storeId,
};
storeId: record.storeId
}
KnowledgeAPI.moveKnowledge(params).then((res) => {
if (res.success) {
message.success("更新成功");
this.props.onChange();
message.success("更新成功")
this.props.onChange()
}
});
};
})
}
handleDown = (record, index) => {
const { query, totalCount } = this.props;
const { current, size } = query;
const { query, totalCount } = this.props
const { current, size } = query
if (totalCount === size * (current - 1) + index + 1) {
return;
return
}
const params = {
direction: "DOWN",
id: record.id,
storeId: record.storeId,
};
storeId: record.storeId
}
KnowledgeAPI.moveKnowledge(params).then((res) => {
if (res.success) {
message.success("更新成功");
this.props.onChange();
message.success("更新成功")
this.props.onChange()
}
});
};
})
}
getBlob = (url) => {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.open("GET", url, true)
xhr.responseType = "blob"
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response)
......@@ -102,8 +102,8 @@ class KnowledgeBaseList extends React.Component {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
const link = document.createElement('a')
const body = document.querySelector('body')
const link = document.createElement("a")
const body = document.querySelector("body")
// 创建对象url
link.href = window.URL.createObjectURL(blob)
......@@ -124,15 +124,15 @@ class KnowledgeBaseList extends React.Component {
this.saveAs(blob, folder.folderName)
})
}
// 预览文件
handleScanFile = (folder) => {
console.log(folder);
const { folderFormat, folderSize, ossUrl } = folder;
console.log(folder)
const { folderFormat, folderSize, ossUrl } = folder
switch (folderFormat) {
case "PDF":
window.open(ossUrl, "_blank");
break;
window.open(ossUrl, "_blank")
break
case "WORD":
case "DOCX":
case "DOC":
......@@ -141,11 +141,7 @@ class KnowledgeBaseList extends React.Component {
case "PPTX":
case "PDF":
if (
((folderFormat === "PPT" ||
folderFormat === "PPTX" ||
folderFormat === "DOCX" ||
folderFormat === "WORD" ||
folderFormat === "DOC") &&
((folderFormat === "PPT" || folderFormat === "PPTX" || folderFormat === "DOCX" || folderFormat === "WORD" || folderFormat === "DOC") &&
folderSize > 10 * DEFAULT_SIZE_UNIT) ||
(folderFormat === "EXCEL" && folderSize > 5 * DEFAULT_SIZE_UNIT)
) {
......@@ -157,33 +153,33 @@ class KnowledgeBaseList extends React.Component {
okText: "下载",
onOk: () => {
this.handleDownload(folder)
},
});
break;
}
})
break
}
const prefixUrl = "https://view.officeapps.live.com/op/view.aspx?src=";
const scanUrl = `${prefixUrl}${encodeURIComponent(ossUrl)}`;
window.open(scanUrl, "_blank");
break;
const prefixUrl = "https://view.officeapps.live.com/op/view.aspx?src="
const scanUrl = `${prefixUrl}${encodeURIComponent(ossUrl)}`
window.open(scanUrl, "_blank")
break
default:
const scanFileModal = (
<ScanFileModal
fileType={folderFormat}
item={folder}
close={() => {
this.setState({ scanFileModal: null });
this.setState({ scanFileModal: null })
}}
/>
);
this.setState({ scanFileModal });
break;
)
this.setState({ scanFileModal })
break
}
};
}
// 请求表头
parseColumns = () => {
const { query, totalCount } = this.props;
const { current, size } = query;
const { query, totalCount } = this.props
const { current, size } = query
const columns = [
{
title: "课程名称",
......@@ -192,131 +188,90 @@ class KnowledgeBaseList extends React.Component {
width: 391,
fixed: "left",
render: (val, record) => {
const { coverUrl, mediaCourseUrl } = record.source;
let hasCover = false;
const type = record.type;
const { coverUrl, mediaCourseUrl, courseDivision } = record.source
let hasCover = false
const type = record.type
return (
<div>
{type === "LIVE" && (
<div className="record__item">
<div className='record__item'>
{record.source &&
record.source.courseMediaVOS.map((item, index) => {
if (item.contentType === "COVER") {
hasCover = true;
return (
<img
className="course-cover"
key={index}
src={item.mediaUrl}
/>
);
hasCover = true
return <img className='course-cover' key={index} src={item.mediaUrl} />
}
})}
{!hasCover && (
<img
className="course-cover"
src={"https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"}
/>
)}
{!hasCover && <img className='course-cover' src={"https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"} />}
<div>
{val.length > 17 ? (
<Tooltip title={val}>
<div className="course-name">{val}</div>
<div className='course-name'>{val}</div>
</Tooltip>
) : (
<div className="course-name">{val}</div>
<div className='course-name'>{val}</div>
)}
<div>
<span className="course-time">
{formatDate(
"YYYY-MM-DD H:i",
parseInt(record.source.startTime)
)}
~{formatDate("H:i", parseInt(record.source.endTime))}
<span className='course-time'>
{formatDate("YYYY-MM-DD H:i", parseInt(record.source.startTime))}~{formatDate("H:i", parseInt(record.source.endTime))}
</span>
<span
className="course-status"
className='course-status'
style={{
color:
ENUM.courseStateShow[record.source.courseState]
.color,
border: `1px solid ${
ENUM.courseStateShow[record.source.courseState]
.color
}`,
}}
>
color: ENUM.courseStateShow[record.source.courseState].color,
border: `1px solid ${ENUM.courseStateShow[record.source.courseState].color}`
}}>
{ENUM.courseStateShow[record.source.courseState].title}
</span>
{record.hideToUser && (
<Tooltip
title={
<div>课程未成功开课，已在学员知识列表中隐藏</div>
}
>
<Tooltip title={<div>课程未成功开课，已在学员知识列表中隐藏</div>}>
<i
className="icon iconfont"
className='icon iconfont'
style={{
marginLeft: "5px",
cursor: "pointer",
color: "#FF4F4F",
fontSize: "14px",
}}
>
fontSize: "14px"
}}>
&#xe61d;
</i>
</Tooltip>
)}
</div>
<div className="teacher-assistant">
<div className='teacher-assistant'>
{record.source.teacherName.length > 4 ? (
<Tooltip title={record.source.teacherName}>
<span className="teacher">
讲师：{record.source.teacherName}
</span>
<span className='teacher'>讲师：{record.source.teacherName}</span>
</Tooltip>
) : (
<span className="teacher">
讲师：{record.source.teacherName}
</span>
<span className='teacher'>讲师：{record.source.teacherName}</span>
)}
{record.source.admins.length > 0 && (
<>
<span className="split"> | </span>
{this.handleAdminName(record.source.admins).length >
4 ? (
<Tooltip
title={this.handleAdminName(record.source.admins)}
>
<span className="assistant">
<span className='split'> | </span>
{this.handleAdminName(record.source.admins).length > 4 ? (
<Tooltip title={this.handleAdminName(record.source.admins)}>
<span className='assistant'>
助教：
{record.source.admins.map((item, index) => {
return (
<span>
{item.adminName}{" "}
{index <
record.source.admins.length - 1 && (
<span> 、</span>
)}{" "}
{item.adminName} {index < record.source.admins.length - 1 && <span> 、</span>}{" "}
</span>
);
)
})}
</span>
</Tooltip>
) : (
<span className="assistant">
<span className='assistant'>
助教：
{record.source.admins.map((item, index) => {
return (
<span key={index}>
{item.adminName}{" "}
{index <
record.source.admins.length - 1 && (
<span> 、</span>
)}{" "}
{item.adminName} {index < record.source.admins.length - 1 && <span> 、</span>}{" "}
</span>
);
)
})}
</span>
)}
......@@ -328,88 +283,77 @@ class KnowledgeBaseList extends React.Component {
)}
{type === "VOICE" && (
<div className="record__item">
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img
className="course-cover"
className='course-cover'
src={
coverUrl ||
`${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
coverUrl
? coverUrl
: courseDivision !== "EXTERNAL"
? `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: "https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png"
}
alt=''
/>
{val.length > 25 ? (
<Tooltip title={val}>
<div className="course-name clamp">{val}</div>
<div className='course-name clamp'>{val}</div>
</Tooltip>
) : (
<div className="course-name clamp">{val}</div>
<div className='course-name clamp'>{val}</div>
)}
</div>
)}
{type === "PICTURE" && (
<div className="record__item">
<img
className="course-cover"
src={
coverUrl ||
"https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"
}
/>
<div className='record__item'>
<img className='course-cover' src={coverUrl || "https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"} />
{val.length > 25 ? (
<Tooltip title={val}>
<div className="course-name clamp">{val}</div>
<div className='course-name clamp'>{val}</div>
</Tooltip>
) : (
<div className="course-name clamp">{val}</div>
<div className='course-name clamp'>{val}</div>
)}
</div>
)}
{type === "FOLDER" && (
<div
className="record__item"
className='record__item'
onClick={() => {
this.handleScanFile(record.source);
}}
>
<div
className={`folder-type ${
record.source && record.source.folderFormat
}`}
/>
this.handleScanFile(record.source)
}}>
<div className={`folder-type ${record.source && record.source.folderFormat}`} />
{val.length > 25 ? (
<Tooltip title={val}>
<div className="course-name clamp">{val}</div>
<div className='course-name clamp'>{val}</div>
</Tooltip>
) : (
<div className="course-name clamp">{val}</div>
<div className='course-name clamp'>{val}</div>
)}
</div>
)}
</div>
);
},
)
}
},
{
title: "课程类型",
key: "type",
dataIndex: "type",
align:'center',
align: "center",
// width: 100,
render: (val, record) => {
return (
<div className="">
{val ? ENUM.CourseTypeEnum[val] : "-"}
</div>
);
},
return <div className=''>{val ? ENUM.CourseTypeEnum[val] : "-"}</div>
}
},
{
title: "创建人",
key: "createName",
dataIndex: "createName",
align:'center',
align: "center",
render: (val) => {
return (
<div>
......@@ -419,31 +363,27 @@ class KnowledgeBaseList extends React.Component {
</Tooltip>
)}
</div>
);
},
)
}
},
{
title: "观看学员数",
key: "watchUserCount",
dataIndex: "watchUserCount",
align:'right',
align: "right",
render: (val, item) => {
return val ? (
<div
className="operate"
style={{display:'block'}}
onClick={() => this.handleLinkToClassData(item)}
>
<span className="operate__item">{val}</span>
<div className='operate' style={{ display: "block" }} onClick={() => this.handleLinkToClassData(item)}>
<span className='operate__item'>{val}</span>
</div>
) : (
0
);
},
)
}
},
{
title: "",
width: 48,
width: 48
},
{
title: "操作",
......@@ -452,131 +392,111 @@ class KnowledgeBaseList extends React.Component {
width: 160,
fixed: "right",
render: (val, record, index) => {
console.log(this.props.categoryId);
console.log(this.props.categoryId)
return this.props.categoryId === "0" ? (
<div className="operate">
<div
className="operate__item"
onClick={() => this.handleDelete(record)}
>
<div className='operate'>
<div className='operate__item' onClick={() => this.handleDelete(record)}>
移出
</div>
</div>
) : (
<div className="operate">
<div
className={
index === 0 && current === 1
? "operate__item disable"
: "operate__item"
}
onClick={() => this.handleUp(index, record)}
>
<div className='operate'>
<div className={index === 0 && current === 1 ? "operate__item disable" : "operate__item"} onClick={() => this.handleUp(index, record)}>
上移
</div>
<span className="operate__item split"> | </span>
<span className='operate__item split'> | </span>
<div
className={
totalCount === size * (current - 1) + index + 1
? "operate__item disable"
: "operate__item"
}
onClick={() => this.handleDown(record, index)}
>
className={totalCount === size * (current - 1) + index + 1 ? "operate__item disable" : "operate__item"}
onClick={() => this.handleDown(record, index)}>
下移
</div>
<span className="operate__item split"> | </span>
<div
className="operate__item"
onClick={() => this.handleDelete(record)}
>
<span className='operate__item split'> | </span>
<div className='operate__item' onClick={() => this.handleDelete(record)}>
移出
</div>
</div>
);
},
},
];
return columns;
};
)
}
}
]
return columns
}
handleDelete = (record) => {
return confirm({
title: "移出知识",
content: "确定将分类中此知识移出吗？",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
okText: "删除",
okType: "danger",
cancelText: "取消",
width: 440,
height: 188,
onOk: () => {
this.deleteConfirm(record);
},
});
};
this.deleteConfirm(record)
}
})
}
// 前往上课数据页面
handleLinkToClassData = (item) => {
const { match } = this.props;
console.log(item);
localStorage.setItem("WatchData_CourseName", item.name);
const { match } = this.props
console.log(item)
localStorage.setItem("WatchData_CourseName", item.name)
window.RCHistory.push({
// pathname: `${match.url}/course-data?type=${item.courseType}&id=${item.liveCourseId}`,
pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`,
});
};
pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`
})
}
deleteConfirm = (item) => {
const params = {
id: item.id,
storeId: item.storeId,
};
storeId: item.storeId
}
KnowledgeAPI.delKnowledge(params).then((res) => {
if (res.success) {
message.success("移出成功");
this.props.onChange();
this.props.updateCategoryTree();
message.success("移出成功")
this.props.onChange()
this.props.updateCategoryTree()
}
});
};
})
}
onShowSizeChange = (current, size) => {
if (current == size) {
return;
return
}
let _query = this.props.query;
_query.size = size;
this.props.onChange(_query);
};
let _query = this.props.query
_query.size = size
this.props.onChange(_query)
}
render() {
const { dataSource = [], totalCount, query, match } = this.props;
const { current, size } = query;
const { dataSource = [], totalCount, query, match } = this.props
const { current, size } = query
return (
<div className="knowledge-base-list">
<div className='knowledge-base-list'>
<Table
rowKey={(record) => record.id}
size="middle"
size='middle'
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
scroll={{ x: 900 }}
bordered
className="knowledge-list-table"
className='knowledge-list-table'
/>
<div className="box-footer">
<div className='box-footer'>
{totalCount > 0 && (
<PageControl
current={current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.props.onChange(_query);
const _query = { ...query, current: page + 1 }
this.props.onChange(_query)
}}
onShowSizeChange={this.onShowSizeChange}
/>
......@@ -586,10 +506,9 @@ class KnowledgeBaseList extends React.Component {
<Route path={`${match.url}/course-data`} component={WatchData} />
{this.state.scanFileModal}
</div>
);
)
}
}
export default withRouter(KnowledgeBaseList);
export default withRouter(KnowledgeBaseList)
src/modules/plan-manage/modal/relatedCourseModal.jsx
import React from 'react'
import _ from 'underscore'
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd'
import React from "react"
import _ from "underscore"
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from "antd"
import { PageControl } from '@/components'
import { PageControl } from "@/components"
import CourseService from '@/domains/course-domain/CourseService'
import User from '@/common/js/user'
import Service from '@/common/js/service'
import dealTimeDuration from '../../course-manage/utils/dealTimeDuration'
import CourseService from "@/domains/course-domain/CourseService"
import User from "@/common/js/user"
import Service from "@/common/js/service"
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration"
import './relatedCourseModal.less'
import "./relatedCourseModal.less"
const { Search } = Input
const { TabPane } = Tabs
const courseStateShow = {
UN_START: {
code: 1,
title: '待开课',
color: '#FFB714'
title: "待开课",
color: "#FFB714"
},
STARTING: {
code: 2,
title: '上课中',
color: '#238FFF'
title: "上课中",
color: "#238FFF"
},
FINISH: {
code: 3,
title: '已完成',
color: '#3BBDAA'
title: "已完成",
color: "#3BBDAA"
},
EXPIRED: {
code: 4,
title: '未成功开课',
color: '#999'
title: "未成功开课",
color: "#999"
}
}
class SelectOperatorModal extends React.Component {
......@@ -49,7 +49,7 @@ class SelectOperatorModal extends React.Component {
currentCourseListData: [],
currentLiveCourseListData: [], //页面中已关联的直播课程
videoCourseDivision: 'internal',
videoCourseDivision: "internal",
videoDataSource: {
external: [],
internal: []
......@@ -59,10 +59,10 @@ class SelectOperatorModal extends React.Component {
internal: 10
},
videoSearchName: {
external: '',
internal: ''
external: "",
internal: ""
},
videoSearchDefalt: '',
videoSearchDefalt: "",
videoQuery: {
external: {
current: 1
......@@ -93,7 +93,7 @@ class SelectOperatorModal extends React.Component {
selectPicture: [], //弹窗内已选择的视频课程
currentPictureCourseListData: [], //页面中已关联的视频课程
activeKey: 'video',
activeKey: "video",
currentTaskCourseData: this.props.data[this.props.selectedTaskIndex].courseList || []
}
}
......@@ -111,7 +111,7 @@ class SelectOperatorModal extends React.Component {
let currentLiveCourseListData = []
_data.map((item) => {
item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === 'LIVE') {
if (childItem.courseType === "LIVE") {
currentLiveCourseListData.push(childItem.courseId)
}
return childItem
......@@ -143,7 +143,7 @@ class SelectOperatorModal extends React.Component {
let currentVideoCourseListData = []
_data.map((item, index) => {
item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === 'VOICE') {
if (childItem.courseType === "VOICE") {
currentVideoCourseListData.push(childItem.courseId)
}
return childItem
......@@ -153,12 +153,12 @@ class SelectOperatorModal extends React.Component {
const params = {
...videoQuery[videoCourseDivision],
size: videoSize[videoCourseDivision],
courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL',
courseDivision: videoCourseDivision === "internal" ? "INTERNAL" : "EXTERNAL",
excludeCourseIdList: currentVideoCourseListData
}
CourseService.videoScheduleBasePage(params).then((res) => {
const { result = {} } = res
console.log('result', result)
console.log("result", result)
const { records = [], total = 0 } = result
......@@ -183,7 +183,7 @@ class SelectOperatorModal extends React.Component {
let currentPictureCourseListData = []
_data.map((item, index) => {
item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === 'PICTURE') {
if (childItem.courseType === "PICTURE") {
currentPictureCourseListData.push(childItem.courseId)
}
return childItem
......@@ -193,12 +193,12 @@ class SelectOperatorModal extends React.Component {
const params = {
...pictureQuery,
size: pictureSize,
courseType: 'PICTURE',
courseType: "PICTURE",
storeId: User.getStoreId(),
excludeCourseIdList: currentPictureCourseListData
}
Service.Hades('public/hades/mediaCoursePage', params).then((res) => {
Service.Hades("public/hades/mediaCoursePage", params).then((res) => {
const { result = {} } = res
const { records = [], total = 0 } = result
this.setState({
......@@ -291,28 +291,28 @@ class SelectOperatorModal extends React.Component {
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
<i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px" }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width: '40%',
key: "course",
dataIndex: "course",
width: "40%",
render: (val, record) => {
let hasCover = false
return (
<div className='course-info'>
{record.courseMediaVOS.map((item) => {
if (item.contentType === 'COVER') {
if (item.contentType === "COVER") {
hasCover = true
return <img className='course-cover' src={item.mediaUrl} alt='' />
}
return null
})}
<If condition={!hasCover}>
<img className='course-cover' src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} alt='' />
<img className='course-cover' src={"https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"} alt='' />
</If>
<div>
......@@ -328,31 +328,31 @@ class SelectOperatorModal extends React.Component {
}
},
{
title: '上课时间',
key: 'courseTime',
dataIndex: 'courseTime',
width: '40%',
title: "上课时间",
key: "courseTime",
dataIndex: "courseTime",
width: "40%",
render: (val, record) => {
return (
<div>
<div>{formatDate('YYYY-MM-DD', record.startTime)}</div>
<div>{formatDate("YYYY-MM-DD", record.startTime)}</div>
<div>
{formatDate('H:i', record.startTime)}~{formatDate('H:i', record.endTime)}
{formatDate("H:i", record.startTime)}~{formatDate("H:i", record.endTime)}
</div>
</div>
)
}
},
{
title: '学院展示',
key: 'shelfState',
dataIndex: 'shelfState',
width: '20%',
title: "学院展示",
key: "shelfState",
dataIndex: "shelfState",
width: "20%",
render: (val, record) => {
return (
<span>
<Choose>
<When condition={record.shelfState === 'YES'}>
<When condition={record.shelfState === "YES"}>
<span>开启</span>
</When>
<Otherwise>
......@@ -376,15 +376,15 @@ class SelectOperatorModal extends React.Component {
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
<i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px" }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width: '40%',
key: "course",
dataIndex: "course",
width: "40%",
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record
return (
......@@ -394,9 +394,9 @@ class SelectOperatorModal extends React.Component {
className='course-cover'
src={
coverUrl ||
(videoCourseDivision === 'internal'
(videoCourseDivision === "internal"
? `${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=''
/>
......@@ -407,23 +407,23 @@ class SelectOperatorModal extends React.Component {
}
},
{
title: '课程时长',
key: 'courseTime',
dataIndex: 'courseTime',
width: '20%',
title: "课程时长",
key: "courseTime",
dataIndex: "courseTime",
width: "20%",
render: (val, record) => {
return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span>
}
},
{
title: '学院展示',
key: 'shelfState',
dataIndex: 'shelfState',
width: '20%',
title: "学院展示",
key: "shelfState",
dataIndex: "shelfState",
width: "20%",
render: (val, record) => {
return (
<Choose>
<When condition={record.shelfState === 'YES'}>
<When condition={record.shelfState === "YES"}>
<span>开启</span>
</When>
<Otherwise>
......@@ -445,42 +445,42 @@ class SelectOperatorModal extends React.Component {
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
<i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px" }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width: '55%',
key: "course",
dataIndex: "course",
width: "55%",
render: (val, record) => {
const { coverUrl } = record
return (
<div className='course-info'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className='course-cover' src={coverUrl || 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} alt='' />
<img className='course-cover' src={coverUrl || "https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"} alt='' />
<div className='course-name'>{record.courseName}</div>
</div>
)
}
},
{
title: '更新时间',
key: 'updated',
dataIndex: 'updated',
width: '25%',
title: "更新时间",
key: "updated",
dataIndex: "updated",
width: "25%",
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: '学院展示',
key: 'shelfState',
dataIndex: 'shelfState',
width: '20%',
title: "学院展示",
key: "shelfState",
dataIndex: "shelfState",
width: "20%",
render: (val, record) => {
return <span>{record.shelfState === 'YES' ? '开启' : '关闭'}</span>
return <span>{record.shelfState === "YES" ? "开启" : "关闭"}</span>
}
}
]
......@@ -495,7 +495,7 @@ class SelectOperatorModal extends React.Component {
_list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId)
}
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) {
message.warning('无法继续选择，一个任务最多关联20个课程')
message.warning("无法继续选择，一个任务最多关联20个课程")
return
}
this.setState({ selectLive: _list })
......@@ -513,7 +513,7 @@ class SelectOperatorModal extends React.Component {
_list = _.reject(selectList, (item) => item.id === record.id)
}
if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) {
message.warning('无法继续选择，一个任务最多关联20个课程')
message.warning("无法继续选择，一个任务最多关联20个课程")
return
}
this.setState({
......@@ -533,7 +533,7 @@ class SelectOperatorModal extends React.Component {
_list = _.reject(selectPicture, (item) => item.id === record.id)
}
if (_list.length + currentTaskCourseData.length + selectLive.length + selectVideo.length > 20) {
message.warning('无法继续选择，一个任务最多关联20个课程')
message.warning("无法继续选择，一个任务最多关联20个课程")
return
}
this.setState({ selectPicture: _list })
......@@ -553,7 +553,7 @@ class SelectOperatorModal extends React.Component {
return selectVideo.map((item) => {
let _item = {}
_item.courseId = item.id
_item.courseType = 'VOICE'
_item.courseType = "VOICE"
_item.courseName = item.courseName
return _item
......@@ -564,7 +564,7 @@ class SelectOperatorModal extends React.Component {
return selectLive.map((item, index) => {
let _item = {}
_item.courseId = item.liveCourseId
_item.courseType = 'LIVE'
_item.courseType = "LIVE"
_item.courseName = item.courseName
_item.courseState = item.courseState
return _item
......@@ -587,46 +587,46 @@ class SelectOperatorModal extends React.Component {
return selectPicture.map((item, index) => {
let _item = {}
_item.courseId = item.id
_item.courseType = 'PICTURE'
_item.courseType = "PICTURE"
_item.courseName = item.courseName
return _item
})
}
renderFooter = () => {
const { activeKey } = this.state
let href = ''
let href = ""
switch (activeKey) {
case 'live':
case "live":
href = (
<a
target='_blank'
rel='noopener noreferrer'
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}>
没有找到需要的直播课？<span>去创建</span>
</a>
)
break
case 'video':
case "video":
href = (
<a
target='_blank'
rel='noopener noreferrer'
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}>
没有找到需要的视频课？<span>去创建</span>
</a>
)
break
case 'picture':
case "picture":
href = (
<a
target='_blank'
rel='noopener noreferrer'
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}>
没有找到需要的图文课？<span>去创建</span>
</a>
......@@ -741,8 +741,8 @@ class SelectOperatorModal extends React.Component {
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
type: "checkbox",
selectedRowKeys: _.pluck(selectLive, "liveCourseId"),
onSelect: (record, selected) => {
this.selectLiveList(record, selected)
},
......@@ -754,7 +754,7 @@ class SelectOperatorModal extends React.Component {
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId))
}
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
_list.splice(_list.length - extraLength, extraLength)
}
......@@ -788,7 +788,7 @@ class SelectOperatorModal extends React.Component {
</TabPane>
<TabPane tab='视频课' key='video'>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 16 }}>
<Radio.Button value='internal'>内部课程</Radio.Button>
<Radio.Button value='external'>外部课程</Radio.Button>
</Radio.Group>
......@@ -832,8 +832,8 @@ class SelectOperatorModal extends React.Component {
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
type: "checkbox",
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], "id"),
onSelect: (record, selected) => {
this.selectVideoList(record, selected)
},
......@@ -845,7 +845,7 @@ class SelectOperatorModal extends React.Component {
_list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id))
}
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
_list.splice(_list.length - extraLength, extraLength)
}
......@@ -927,8 +927,8 @@ class SelectOperatorModal extends React.Component {
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectPicture, 'id'),
type: "checkbox",
selectedRowKeys: _.pluck(selectPicture, "id"),
onSelect: (record, selected) => {
this.selectPictureList(record, selected)
},
......@@ -940,7 +940,7 @@ class SelectOperatorModal extends React.Component {
_list = _.reject(selectPicture, (item) => _.find(changeRows, (data) => data.id === item.id))
}
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
_list.splice(_list.length - extraLength, extraLength)
}
......
src/modules/plan-manage/modal/relatedCourseModal.less
.related-course-modal {
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight: normal;
font-weight: 500;
}
// .ant-tabs-nav .ant-tabs-tab {
// padding: 6px 12px !important;
......@@ -48,14 +48,14 @@
.select-box {
display: inline-box;
width: 186px;
background: #fff4dd;
background: #e9efff;
border-radius: 4px;
padding: 6px 16px;
margin-right: 8px;
display: flex;
justify-content: space-between;
.tip-icon {
color: #ff9d14;
color: #2966ff;
font-size: 14px;
margin-right: 4px;
}
......@@ -71,7 +71,7 @@
}
.related-box {
padding: 6px 16px;
background: #fff4dd;
background: #e9efff;
border-radius: 4px;
flex: 1;
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