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