Skip to content

X
xiaomai-cloud-class-web
Commit de9553ed by zhangleyuan
Options

Merge branch 'feature/zhangleyuan/20200220/training-program' into dev

parents bd30a9f7 4fb83424
Showing with 99 additions and 23 deletions
src/core/antd.less
...@@ -784,4 +784,6 @@ mr0 { ...@@ -784,4 +784,6 @@ mr0 {
.ant-table-column-sorter { .ant-table-column-sorter {
margin-left: 2px!important; margin-left: 2px!important;
} }
.ant-table-column-sorter-full{
margin-top:-0.32rem !important;
}
src/modules/course-manage/modal/RelatedPlanModal.jsx
...@@ -122,8 +122,10 @@ class RelatedPlanModal extends React.Component { ...@@ -122,8 +122,10 @@ class RelatedPlanModal extends React.Component {
item.taskId = selectPlanList[key].taskBaseVOList[0].taskId; item.taskId = selectPlanList[key].taskBaseVOList[0].taskId;
} }
} }
if(item.taskId){
_selectPlanList.push(item) _selectPlanList.push(item)
} }
}
return _selectPlanList; return _selectPlanList;
} }
confirmRelatedPlan =()=>{ confirmRelatedPlan =()=>{
......
src/modules/plan-manage/AddPlan.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39 * @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-12 11:29:48 * @LastEditTime: 2021-03-13 14:58:38
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -38,6 +38,7 @@ function AddPlan() { ...@@ -38,6 +38,7 @@ function AddPlan() {
const [basicData,setBasicData] = useState(defaultBasicData); const [basicData,setBasicData] = useState(defaultBasicData);
const [taskList,setTaskList] = useState(defaultTaskList); const [taskList,setTaskList] = useState(defaultTaskList);
const [expiredCourseList,setExpiredCourseList] = useState([]); const [expiredCourseList,setExpiredCourseList] = useState([]);
const [hasGetDetail,setHasGetDetail]= useState(false);
useEffect(()=>{ useEffect(()=>{
if(type==='edit'){ if(type==='edit'){
getPlanDetail(); getPlanDetail();
...@@ -91,6 +92,7 @@ function AddPlan() { ...@@ -91,6 +92,7 @@ function AddPlan() {
return _item return _item
}) })
} }
setTaskList(trainingTaskList);
setBasicData({ setBasicData({
planName, planName,
coverUrl:coverUrl || defaultCover, coverUrl:coverUrl || defaultCover,
...@@ -102,7 +104,7 @@ function AddPlan() { ...@@ -102,7 +104,7 @@ function AddPlan() {
percentCompleteLive, percentCompleteLive,
percentCompleteVideo percentCompleteVideo
}) })
setTaskList(trainingTaskList) setHasGetDetail(true);
}) })
} }
function handleChangeBasicInfo(field, value){ function handleChangeBasicInfo(field, value){
...@@ -261,7 +263,7 @@ function AddPlan() { ...@@ -261,7 +263,7 @@ function AddPlan() {
</div> </div>
<div className="basic-info__wrap"> <div className="basic-info__wrap">
<div className="title">培训任务</div> <div className="title">培训任务</div>
{ (type==='edit' && taskList.length>0) && { (type==='edit' && hasGetDetail) &&
<TrainingTask data={taskList} onChange={handleChangeTaskInfo} /> <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
} }
{ type==='add' && { type==='add' &&
......
src/modules/plan-manage/LearningData.jsx
...@@ -27,6 +27,7 @@ class LearningData extends React.Component { ...@@ -27,6 +27,7 @@ class LearningData extends React.Component {
createName:"" createName:""
} }
} }
componentDidMount(){ componentDidMount(){
this.getPlanDetail(); this.getPlanDetail();
Bus.bind('watchDataView',() =>{this.setState({activeKey:"userLearningData"}) }) Bus.bind('watchDataView',() =>{this.setState({activeKey:"userLearningData"}) })
...@@ -62,6 +63,7 @@ class LearningData extends React.Component { ...@@ -62,6 +63,7 @@ class LearningData extends React.Component {
}) })
}) })
} }
render() { render() {
const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state; const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state;
return ( return (
......
src/modules/plan-manage/LearningData.less
.plan-learn-data-list{ .plan-learn-data-list{
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight:normal;
}
.plan-info{ .plan-info{
margin:16px; margin:16px;
padding:16px; padding:16px;
......
src/modules/plan-manage/components/BasicInfo.less
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
margin-top: 16px; margin-top: 16px;
&__wrap { &__wrap {
position: relative; position: relative;
display: flex;
.tag { .tag {
border-radius: 2px; border-radius: 2px;
background: #D6D6D6; background: #D6D6D6;
...@@ -43,9 +44,6 @@ ...@@ -43,9 +44,6 @@
} }
} }
.opt-btns{ .opt-btns{
display:flex;
align-items: center;
margin-top:12px;
.default-btn { .default-btn {
margin:0 8px; margin:0 8px;
color: #5289FA; color: #5289FA;
...@@ -56,6 +54,7 @@ ...@@ -56,6 +54,7 @@
} }
} }
.tips{ .tips{
margin-top:8px;
font-size:14px; font-size:14px;
color:#999; color:#999;
} }
...@@ -97,7 +96,7 @@ ...@@ -97,7 +96,7 @@
display: flex; display: flex;
margin-top:22px; margin-top:22px;
.standard-label{ .standard-label{
margin-top:2px; margin-top:3px;
} }
.live-standard-info{ .live-standard-info{
margin-bottom:10px; margin-bottom:10px;
......
src/modules/plan-manage/components/PlanList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46 * @Date: 2021-02-20 16:46:46
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-10 15:51:26 * @LastEditTime: 2021-03-13 15:24:41
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -28,10 +28,10 @@ function PlanList(props) { ...@@ -28,10 +28,10 @@ function PlanList(props) {
title: '培训计划', title: '培训计划',
key: 'planName', key: 'planName',
dataIndex: 'planName', dataIndex: 'planName',
width:'15%', width:'18%',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="plan__name"> <div className="plan-name">
{val} {val}
</div> </div>
) )
...@@ -75,7 +75,7 @@ function PlanList(props) { ...@@ -75,7 +75,7 @@ function PlanList(props) {
}, },
{ {
title: '创建时间', title: '创建时间',
width: "10%", width: "12.5%",
key: 'created', key: 'created',
dataIndex: 'created', dataIndex: 'created',
sorter: true, sorter: true,
...@@ -85,7 +85,7 @@ function PlanList(props) { ...@@ -85,7 +85,7 @@ function PlanList(props) {
}, },
{ {
title: '更新时间', title: '更新时间',
width: "10%", width: "12.5%",
key: 'updated', key: 'updated',
dataIndex: 'updated', dataIndex: 'updated',
sorter: true, sorter: true,
...@@ -111,7 +111,8 @@ function PlanList(props) { ...@@ -111,7 +111,8 @@ function PlanList(props) {
title: '操作', title: '操作',
key: 'operate', key: 'operate',
dataIndex: 'operate', dataIndex: 'operate',
width: '25%', fixed: 'right',
width: 176,
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="operate"> <div className="operate">
...@@ -145,6 +146,7 @@ function PlanList(props) { ...@@ -145,6 +146,7 @@ function PlanList(props) {
]; ];
return columns; return columns;
} }
function renderMoreOperate(item){ function renderMoreOperate(item){
return ( return (
<div className="live-course-more-menu"> <div className="live-course-more-menu">
...@@ -158,6 +160,7 @@ function PlanList(props) { ...@@ -158,6 +160,7 @@ function PlanList(props) {
</div> </div>
) )
} }
function handleChangeTable(pagination, filters, sorter){ function handleChangeTable(pagination, filters, sorter){
const { columnKey, order } = sorter; const { columnKey, order } = sorter;
const { query } = props; const { query } = props;
...@@ -330,6 +333,8 @@ function PlanList(props) { ...@@ -330,6 +333,8 @@ function PlanList(props) {
pagination={false} pagination={false}
onChange={handleChangeTable} onChange={handleChangeTable}
bordered bordered
size="middle"
scroll={{ x: 1400}}
/> />
<div className="box-footer"> <div className="box-footer">
<PageControl <PageControl
......
src/modules/plan-manage/components/PlanList.less
.plan-list{ .plan-list{
margin-top:12px; margin-top:12px;
.plan-name{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.operate-text { .operate-text {
color: #5289FA; color: #5289FA;
cursor: pointer; cursor: pointer;
...@@ -17,4 +26,7 @@ ...@@ -17,4 +26,7 @@
} }
} }
} }
.more-operate{
line-height:20px;
}
} }
\ No newline at end of file
src/modules/plan-manage/components/TrainingTask.less
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
color:#666666; color:#666666;
font-size:14px; font-size:14px;
.icon{ .icon{
font-size:14px;
color:#999; color:#999;
} }
.text{ .text{
...@@ -94,6 +95,7 @@ ...@@ -94,6 +95,7 @@
color:#666666; color:#666666;
font-size:14px; font-size:14px;
.icon{ .icon{
font-size:14px;
color:#999; color:#999;
} }
.text{ .text{
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
...@@ -158,15 +158,14 @@ class UserLearnDetailModal extends React.Component { ...@@ -158,15 +158,14 @@ class UserLearnDetailModal extends React.Component {
render: (val, record,index) => { render: (val, record,index) => {
return ( return (
<div className="course-info"> <div className="course-info">
<span className="course-type">{CourseType[record.courseType].text}</span> <div className="course-type">{CourseType[record.courseType].text}</div>
<div className="name-and-state">
<span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span> <span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span>
{record.courseState === "EXPIRED" &&
<span className="icon iconfont tip">&#xe834;</span>
}
{ record.courseType==="LIVE" && { record.courseType==="LIVE" &&
<span className="course-state">{courseStateShow[record.courseState].title}</span> <span className="course-state">{courseStateShow[record.courseState].title}</span>
} }
</div> </div>
</div>
) )
} }
}, },
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
.user-Learn-modal{ .user-Learn-modal{
.customer-info{ .customer-info{
margin-bottom:16px; margin-bottom:16px;
.customer-name{ .customer-name{
...@@ -13,6 +14,18 @@ ...@@ -13,6 +14,18 @@
} }
.plan-table{ .plan-table{
margin-bottom:8px; margin-bottom:8px;
.ant-table-thead{
tr {
th{
padding:9px 24px;
}
}
}
tr{
td{
padding:8px 24px;
}
}
.plan-instro{ .plan-instro{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -20,7 +33,7 @@ ...@@ -20,7 +33,7 @@
margin-right:8px; margin-right:8px;
img{ img{
width: 97px; width: 97px;
height: 55px; height: 54px;
display: inline-block; display: inline-block;
border-radius:4px; border-radius:4px;
} }
...@@ -36,6 +49,18 @@ ...@@ -36,6 +49,18 @@
} }
} }
.task-table{ .task-table{
.ant-table-thead{
tr {
th{
padding:9px 16px;
}
}
}
tr{
td{
padding:14px 16px;
}
}
.taskName{ .taskName{
color:#666666; color:#666666;
font-size:14px; font-size:14px;
...@@ -45,8 +70,12 @@ ...@@ -45,8 +70,12 @@
font-size:14px; font-size:14px;
} }
.course-info{ .course-info{
display:flex;
margin-left:57px; margin-left:57px;
align-items: center;
.course-type{ .course-type{
width:54px;
height: 22px;
font-size:11px; font-size:11px;
color:#666666; color:#666666;
padding:1px 8px; padding:1px 8px;
...@@ -54,6 +83,8 @@ ...@@ -54,6 +83,8 @@
margin-right:4px; margin-right:4px;
border-radius: 2px; border-radius: 2px;
} }
.name-and-state{
flex:1;
.course-name{ .course-name{
color:#666666; color:#666666;
font-size:14px; font-size:14px;
...@@ -69,6 +100,13 @@ ...@@ -69,6 +100,13 @@
font-size:14px; font-size:14px;
} }
} }
}
.ant-table-expanded-row{
td{
padding:0 16px;
}
}
.ant-table-content{ .ant-table-content{
border:1px solid #e8e8e8; border:1px solid #e8e8e8;
tr{ tr{
...@@ -76,13 +114,18 @@ ...@@ -76,13 +114,18 @@
border:none; border:none;
} }
.child-table{ .child-table{
.ant-table-content{ .ant-table-content{
border:none; border:none;
thead{ thead{
display:none; display:none;
} }
tbody tr td{ tbody tr {
td{
border-bottom:none; border-bottom:none;
padding:14px 16px;
}
} }
} }
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
...@@ -161,11 +161,12 @@ class SelectOperatorModal extends React.Component { ...@@ -161,11 +161,12 @@ class SelectOperatorModal extends React.Component {
videoSize:size videoSize:size
},()=>{this.handleFetchLiveDataList()}) },()=>{this.handleFetchLiveDataList()})
} }
// 请求表头 // 请求表头
parseLiveColumns = () => { parseLiveColumns = () => {
const columns = [ const columns = [
{ {
title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>, title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'45%', width:'45%',
...@@ -229,7 +230,7 @@ class SelectOperatorModal extends React.Component { ...@@ -229,7 +230,7 @@ class SelectOperatorModal extends React.Component {
parseVideoColumns = () => { parseVideoColumns = () => {
const columns = [ const columns = [
{ {
title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>, title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'60%', width:'60%',
......
src/modules/store-manage/StoreInfo.jsx
...@@ -248,7 +248,9 @@ class StoreInfo extends React.Component { ...@@ -248,7 +248,9 @@ class StoreInfo extends React.Component {
{ logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>} { logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>}
</div> </div>
<div className="operate-con"> <div className="operate-con">
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">上传</span></div> <div><span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">
{logo ? <span>重新上传</span> : <span>上传</span> }
</span></div>
<div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div> <div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
</div> </div>
</div> </div>
......
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