Skip to content

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

feat:修改视频课关联培训计划

parent 1aff56d2
Showing with 661 additions and 101 deletions
src/data-source/store/request-apis.ts
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-11-25 18:25:02 * @Date: 2020-11-25 18:25:02
* @LastEditors: wufan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-11 19:38:50 * @LastEditTime: 2021-03-08 11:47:58
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -68,3 +68,9 @@ export function delCourseCategory(params: object) { ...@@ -68,3 +68,9 @@ export function delCourseCategory(params: object) {
export function getStoreUserBasicPage(params: object) { export function getStoreUserBasicPage(params: object) {
return Service.Hades("public/hades/getStoreUserBasicPage", params); return Service.Hades("public/hades/getStoreUserBasicPage", params);
} }
export function updateStoreMessage(params: object) {
return Service.Hades("public/hades/updateStoreMessage", params);
}
export function getStoreDetail(params: object) {
return Service.Hades("public/hades/getStoreDetail", params);
}
\ No newline at end of file
src/domains/store-domain/constants.ts
/*
* @Author: zhangleyuan
* @Date: 2021-01-19 11:27:56
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-08 10:36:04
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
export const storeRoleEnum = { export const storeRoleEnum = {
"0": "店铺管理员", "0": "店铺管理员",
"1": "管理员", "1": "管理员",
"2": "普通讲师" "2": "普通讲师"
}; };
export const industryList = ["IT服务","制造业","批发/零售","生活服务","文化/体育/娱乐业","建筑/房地产","教育","运输/物流/仓储","医疗","政府","金融","能源/采矿","农林渔牧","其他行业"];
export const childIndustryList = {
"IT服务":["计算机软件/硬件/信息服务","互联网和相关服务","其他"],
"制造业":["机械/电子","服装/纺织","汽车","金属制品","家具/家纺","重工制造","家电/数码","橡胶/塑料","日用品/化妆品","化学原料制品","文教/工美/体育/娱乐用品","烟酒/茶","非金属矿物","其他"],
"批发/零售":["批发","零售","超市/便利店/百货商场","进出口","其他"],
"生活服务":["餐饮","居民服务","租赁和商务服务","酒店/住宿","其他"],
"文化/体育/娱乐业":["文化/体育","娱乐/旅游","新闻传媒","其他"],
"建筑/房地产":["建筑业","建材装修","房地产","其他"],
"教育":["学前教育","初中等教育","高等教育","培训机构","其他"],
"运输/物流/仓储":["物流/仓储","道路/铁路运输","邮政/快递","航空运输","水上运输","其他"],
"医疗":["医院/医疗机构","医疗器械","医药制造","医药流通","其他"],
"政府":["党政机关","国家权利/行政机构","检察院/法院/公安","民政/人社/交通/卫生","发改委/经信委/商务局/统计局","国土/规划","税务/海关/工商/环保/物价/药品","政协/民主党派","地方政府","其他"],
"金融":["保险","银行","证券/投资/基金","其他"],
"能源/采矿":["电力/热力/燃气/水供应业","石油/天然气","煤炭","有色金属","钢铁","其他"],
"农林渔牧":["农林渔牧"],
"其他行业":["科学研究和技术服务业","社会组织","水利和环境管理","国际组织","其他"]
}
\ No newline at end of file
src/domains/store-domain/storeService.ts
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-11-25 18:25:02 * @Date: 2020-11-25 18:25:02
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-23 16:54:10 * @LastEditTime: 2021-03-08 11:48:43
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner, moveBannerSequence,getStoreUserBasicPage} from '@/data-source/store/request-apis'; import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList,
getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner,
moveBannerSequence,getStoreUserBasicPage,updateStoreMessage,getStoreDetail} from '@/data-source/store/request-apis';
export default class StoreService { export default class StoreService {
// 获取员工列表 // 获取员工列表
...@@ -81,5 +83,10 @@ export default class StoreService { ...@@ -81,5 +83,10 @@ export default class StoreService {
static delCourseCategory(params: any) { static delCourseCategory(params: any) {
return delCourseCategory(params); return delCourseCategory(params);
} }
static updateStoreMessage(params: any) {
return updateStoreMessage(params);
}
static getStoreDetail(params: any) {
return getStoreDetail(params);
}
} }
\ No newline at end of file
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -57,7 +57,8 @@ class LiveCourseList extends React.Component { ...@@ -57,7 +57,8 @@ class LiveCourseList extends React.Component {
columns: [], columns: [],
openDownloadModal:false, openDownloadModal:false,
url:'', url:'',
RelatedPlanModalVisible:false RelatedPlanModalVisible:false,
selectPlanList:{}
} }
} }
componentWillMount(){ componentWillMount(){
...@@ -662,9 +663,21 @@ class LiveCourseList extends React.Component { ...@@ -662,9 +663,21 @@ class LiveCourseList extends React.Component {
window.open(htmlUrl); window.open(htmlUrl);
} }
handleRelatedModalShow = (item)=>{ handleRelatedModalShow = (item)=>{
const selectPlanList = {};
if(item.relatedPlanList){
item.relatedPlanList.map((item,index)=>{
selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
return item
})
}
this.setState({ this.setState({
RelatedPlanModalVisible:true, RelatedPlanModalVisible:true,
selectCourseId:item.liveCourseId selectCourseId:item.liveCourseId,
selectPlanList:selectPlanList
}) })
} }
closeRelatedPlanModalVisible = ()=>{ closeRelatedPlanModalVisible = ()=>{
...@@ -672,6 +685,16 @@ class LiveCourseList extends React.Component { ...@@ -672,6 +685,16 @@ class LiveCourseList extends React.Component {
RelatedPlanModalVisible:false RelatedPlanModalVisible:false
}) })
} }
onChangeSelectPlanList = (selectPlanList)=>{
this.setState({
selectPlanList:selectPlanList
})
}
onConfirmSelectPlanList = ()=>{
this.setState({
RelatedPlanModalVisible:false
},()=>{this.props.onChange();})
}
render() { render() {
const { total, query, courseList, loading} = this.props; const { total, query, courseList, loading} = this.props;
const { current, size } = query; const { current, size } = query;
...@@ -680,7 +703,8 @@ class LiveCourseList extends React.Component { ...@@ -680,7 +703,8 @@ class LiveCourseList extends React.Component {
openCoursewareModal, openCoursewareModal,
editData, editData,
RelatedPlanModalVisible, RelatedPlanModalVisible,
selectCourseId selectCourseId,
selectPlanList
} = this.state; } = this.state;
const { match } = this.props; const { match } = this.props;
...@@ -736,6 +760,9 @@ class LiveCourseList extends React.Component { ...@@ -736,6 +760,9 @@ class LiveCourseList extends React.Component {
onClose={this.closeRelatedPlanModalVisible} onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible} visible={RelatedPlanModalVisible}
selectCourseId={selectCourseId} selectCourseId={selectCourseId}
selectPlanList={selectPlanList}
onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList}
/> />
} }
<iframe src={url} style={{ display: "none" }} /> <iframe src={url} style={{ display: "none" }} />
......
src/modules/course-manage/modal/RelatedPlanModal.jsx
...@@ -20,10 +20,10 @@ class RelatedPlanModal extends React.Component { ...@@ -20,10 +20,10 @@ class RelatedPlanModal extends React.Component {
selectPlanList:{}, selectPlanList:{},
}; };
} }
componentDidMount() { componentDidMount() {
this.handleFetchDataList(); this.handleFetchDataList();
} }
// 获取培训计划列表 // 获取培训计划列表
handleFetchDataList = () => { handleFetchDataList = () => {
const {query,size,totalCount} = this.state const {query,size,totalCount} = this.state
...@@ -92,7 +92,7 @@ class RelatedPlanModal extends React.Component { ...@@ -92,7 +92,7 @@ class RelatedPlanModal extends React.Component {
return columns; return columns;
} }
selectPlanList = (record,selected,planId) =>{ selectPlanList = (record,selected,planId) =>{
const { selectPlanList } = this.state; const { selectPlanList } = this.props;
let _selectPlanList = {...selectPlanList}; let _selectPlanList = {...selectPlanList};
if (selected) { if (selected) {
...@@ -109,7 +109,8 @@ class RelatedPlanModal extends React.Component { ...@@ -109,7 +109,8 @@ class RelatedPlanModal extends React.Component {
_selectPlanList[planId].taskBaseVOList = []; _selectPlanList[planId].taskBaseVOList = [];
_selectPlanList[planId].planId = planId; _selectPlanList[planId].planId = planId;
} }
this.setState({selectPlanList:_selectPlanList}); this.props.onChange(_selectPlanList);
// this.setState({selectPlanList:_selectPlanList});
} }
handleSelectPlanListData(selectPlanList){ handleSelectPlanListData(selectPlanList){
let _selectPlanList = []; let _selectPlanList = [];
...@@ -124,19 +125,19 @@ class RelatedPlanModal extends React.Component { ...@@ -124,19 +125,19 @@ class RelatedPlanModal extends React.Component {
return _selectPlanList; return _selectPlanList;
} }
confirmRelatedPlan =()=>{ confirmRelatedPlan =()=>{
const {selectPlanList } = this.state; const {selectPlanList } = this.props;
const params = { const params = {
courseId:this.props.selectCourseId, courseId:this.props.selectCourseId,
relatedPlanList:this.handleSelectPlanListData(selectPlanList), relatedPlanList:this.handleSelectPlanListData(selectPlanList),
storeId:User.getStoreId(), storeId:User.getStoreId(),
} }
CourseService.relatedCourseToPlan(params).then((res) => { CourseService.relatedCourseToPlan(params).then((res) => {
this.props.onClose(); this.props.onConfirm();
}); });
} }
render() { render() {
const { size,dataSource,totalCount,query,selectOperatorList,selectPlanList} = this.state; const { size,dataSource,totalCount,query} = this.state;
const { visible } = this.props; const { visible,selectPlanList} = this.props;
return ( return (
<Modal <Modal
title="关联培训计划" title="关联培训计划"
...@@ -159,7 +160,7 @@ class RelatedPlanModal extends React.Component { ...@@ -159,7 +160,7 @@ class RelatedPlanModal extends React.Component {
</div> </div>
<div className="select-container"> <div className="select-container">
<span className="icon iconfont tip">&#xe6f2;</span> <span className="icon iconfont tip">&#xe6f2;</span>
<span className="text">已选择3个任务</span> <span className="text">已选择个任务</span>
<span className="clear">清空</span> <span className="clear">清空</span>
</div> </div>
<div> <div>
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-04 16:41:05 * @LastEditTime: 2021-03-08 15:24:25
* @Description: 视频课新增/编辑页 * @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -23,6 +23,8 @@ import StoreService from "@/domains/store-domain/storeService"; ...@@ -23,6 +23,8 @@ import StoreService from "@/domains/store-domain/storeService";
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 _ from "underscore"; import _ from "underscore";
import Upload from '@/core/upload';
import PhotoClip from 'photoclip';
import './AddVideoCourse.less'; import './AddVideoCourse.less';
const EDIT_BOX_KEY = Math.random(); const EDIT_BOX_KEY = Math.random();
...@@ -38,7 +40,7 @@ const defaultScheduleMedia = [{ ...@@ -38,7 +40,7 @@ const defaultScheduleMedia = [{
}] }]
const whetherVisitorsJoin = 'NO' const whetherVisitorsJoin = 'NO'
let cutFlag = false;
class AddVideoCourse extends React.Component { class AddVideoCourse extends React.Component {
constructor(props) { constructor(props) {
...@@ -71,17 +73,17 @@ class AddVideoCourse extends React.Component { ...@@ -71,17 +73,17 @@ class AddVideoCourse extends React.Component {
categoryName:null, //分类名称 categoryName:null, //分类名称
courseCatalogList:[], //分类列表 courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值 categoryId:null, //分类的Id值
whetherVisitorsJoin:'NO' // 是否允许游客加入 whetherVisitorsJoin:'NO', // 是否允许游客加入
showSelectCoverModal:false,
cutImageBlob: null,
} }
} }
componentWillMount() { componentWillMount() {
// this.handleFetchDiskList();
const { id, pageType } = this.state; const { id, pageType } = this.state;
this.getCourseCatalogList(); this.getCourseCatalogList();
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id);
// this.handleFetchStudentList(id);
} }
} }
//获取分类列表 //获取分类列表
...@@ -114,15 +116,7 @@ class AddVideoCourse extends React.Component { ...@@ -114,15 +116,7 @@ class AddVideoCourse extends React.Component {
}).then((res) => { }).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {};
const { const {
// coverId,
// coverUrl,
// videoType,
// videoDuration,
// videoName,
// scheduleMedia,
courseName, courseName,
// scheduleVideoId,
// scheduleVideoUrl,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
courseMediaVOS, courseMediaVOS,
...@@ -216,7 +210,6 @@ class AddVideoCourse extends React.Component { ...@@ -216,7 +210,6 @@ class AddVideoCourse extends React.Component {
// 修改表单 // 修改表单
handleChangeForm = (field, value, coverUrl) => { handleChangeForm = (field, value, coverUrl) => {
console.log('field',value);
this.setState({ this.setState({
[field]: value, [field]: value,
coverUrl: coverUrl ? coverUrl : this.state.coverUrl coverUrl: coverUrl ? coverUrl : this.state.coverUrl
...@@ -228,9 +221,6 @@ class AddVideoCourse extends React.Component { ...@@ -228,9 +221,6 @@ class AddVideoCourse extends React.Component {
this.setState({ studentModal : true }); this.setState({ studentModal : true });
const { studentList, selectedStuList } = this.state; const { studentList, selectedStuList } = this.state;
// const _studentList = _.map(studentList, (item) => {
// return item.studentId
// })
const studentModal = ( const studentModal = (
<SelectStudent <SelectStudent
showTabs={true} showTabs={true}
...@@ -316,15 +306,6 @@ class AddVideoCourse extends React.Component { ...@@ -316,15 +306,6 @@ class AddVideoCourse extends React.Component {
} }
} }
// 上传封面图
handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0];
if (!imageFile) return;
this.setState({
imageFile,
showCutModal: true,
});
}
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
const { instId, adminId } = window.currentUserInstInfo; const { instId, adminId } = window.currentUserInstInfo;
...@@ -412,14 +393,122 @@ class AddVideoCourse extends React.Component { ...@@ -412,14 +393,122 @@ class AddVideoCourse extends React.Component {
resolve(true); resolve(true);
}); });
} }
handleSelectCover = (file)=> {
this.uploadImage(file);
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
};
//获取resourceId
getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
this.setState({
coverClicpPath:signInfo.fileUrl,
coverId:signInfo.resourceId,
visible: false
},()=>this.updateCover())
});
};
updateCover = () =>{
const {coverClicpPath,coverId} = this.state
this.setState({
showSelectCoverModal: false,
coverUrl:coverClicpPath,
coverId:coverId
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
render() { render() {
const { const {
pageType,courseName, scheduleVideoId, coverId, pageType,courseName, scheduleVideoId, coverId,
coverUrl, scheduleVideoUrl, studentList, scheduleMedia, coverUrl, scheduleVideoUrl, studentList, scheduleMedia,
showCutModal, showSelectFileModal, diskList, showCutModal, showSelectFileModal, diskList,
imageFile, joinType, videoName, videoType,shelfState, imageFile, joinType, videoName, videoType,shelfState,
categoryName,courseCatalogList,whetherVisitorsJoin categoryName,courseCatalogList,whetherVisitorsJoin,
visible,showSelectCoverModal,hasImgReady,cutImageBlob
} = this.state; } = this.state;
// 已选择的上课学员数量 // 已选择的上课学员数量
...@@ -491,20 +580,7 @@ class AddVideoCourse extends React.Component { ...@@ -491,20 +580,7 @@ class AddVideoCourse extends React.Component {
} }
</div> </div>
<div className="opt-btns"> <div className="opt-btns">
<input <Button onClick={() => {this.setState({ showSelectCoverModal:true })}}>{`${(pageType === 'add' && (!scheduleVideoId && !coverUrl)) ? '上传' : '修改'}封面`}</Button>
type="file"
accept="image/png, image/jpeg, image/jpg"
ref="picInputFile"
style={{display: 'none'}}
onChange={(event) => { this.handleShowImgCutModal(event) }}
/>
<Button onClick={() => {
this.setState({
currentInputFile: this.refs.picInputFile
});
this.refs.picInputFile.click()
}}>{`${(pageType === 'add' && (!scheduleVideoId && !coverUrl)) ? '上传' : '修改'}封面`}</Button>
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
</div> </div>
...@@ -558,24 +634,75 @@ class AddVideoCourse extends React.Component { ...@@ -558,24 +634,75 @@ class AddVideoCourse extends React.Component {
onSelect={this.handleSelectVideo} onSelect={this.handleSelectVideo}
/> />
} }
<ImgCutModalNew {showSelectCoverModal &&
title="裁剪" <SelectPrepareFileModal
width={550} key="basic"
cutWidth={500} operateType="select"
cutHeight={282} multiple={false}
cutContentWidth={500} accept="image/jpeg,image/png,image/jpg"
cutContentHeight={300} selectTypeList={['JPG', 'JPEG', 'PNG']}
visible={showCutModal} tooltip='支持文件类型：jpg、jpeg、png'
imageFile={imageFile} isOpen={showSelectCoverModal}
bizCode='LIVE_COURSE_MEDIA' onClose={() => {
onOk={(urlStr, resourceId) => { this.setState({ showSelectCoverModal: false })
this.setState({ showCutModal: false });
this.handleChangeForm('coverId', resourceId, urlStr)
this.state.currentInputFile.value = '';
}} }}
onClose={() => this.setState({ showCutModal: false })} onSelect={this.handleSelectCover}
reUpload={() => { this.state.currentInputFile.click() }}
/> />
}
<Modal
title="设置图片"
width={1080}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
}}
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
this.getSignature(cutImageBlob);
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
></div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<div id="preview-url-box" style={{width:500,height:282}}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
</div>
</div>
</Modal>
{ this.state.previewCourseModal } { this.state.previewCourseModal }
</div> </div>
) )
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-01 16:34:11 * @LastEditTime: 2021-03-08 15:07:16
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -17,21 +17,23 @@ import { appId, shareUrl, LIVE_SHARE } from '@/domains/course-domain/constants'; ...@@ -17,21 +17,23 @@ import { appId, shareUrl, LIVE_SHARE } from '@/domains/course-domain/constants';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal'; import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import WatchDataModal from '../modal/WatchDataModal' import WatchDataModal from '../modal/WatchDataModal'
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from "@/domains/course-domain/CourseService";
import RelatedPlanModal from '../../modal/RelatedPlanModal';
import User from '@/common/js/user' import User from '@/common/js/user'
import './VideoCourseList.less'; import './VideoCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'dev'; const ENV = process.env.DEPLOY_ENV || 'dev';
const userRole = User.getUserRole();
class VideoCourseList extends React.Component { class VideoCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
id: '', // 视频课ID id: '', // 视频课ID
studentIds:[] studentIds:[],
RelatedPlanModalVisible:false,
selectPlanList:{}
} }
} }
...@@ -166,6 +168,25 @@ class VideoCourseList extends React.Component { ...@@ -166,6 +168,25 @@ class VideoCourseList extends React.Component {
} }
}, },
{ {
title: '关联项',
width: 200,
key: "planList",
dataIndex: "planList",
render: (val, record) => {
return (
<span>
{ record.relatedPlanList ?
record.relatedPlanList.map((item,index)=>{
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
:
<span></span>
}
</span>
)
}
},
{
title: '操作', title: '操作',
key: 'operate', key: 'operate',
dataIndex: 'operate', dataIndex: 'operate',
...@@ -200,6 +221,12 @@ class VideoCourseList extends React.Component { ...@@ -200,6 +221,12 @@ class VideoCourseList extends React.Component {
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
<div className="live-course-more-menu"> <div className="live-course-more-menu">
{ (userRole === "CloudManager" || userRole === "StoreManager") &&
<div
className="operate__item"
onClick={()=>this.handleRelatedModalShow(item)}
>关联培训计划</div>
}
<div <div
className="operate__item" className="operate__item"
onClick={() => { onClick={() => {
...@@ -237,6 +264,7 @@ class VideoCourseList extends React.Component { ...@@ -237,6 +264,7 @@ class VideoCourseList extends React.Component {
} }
}) })
} }
// 删除视频课 // 删除视频课
handleDeleteVideoCourse = (scheduleId) => { handleDeleteVideoCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
...@@ -314,12 +342,42 @@ class VideoCourseList extends React.Component { ...@@ -314,12 +342,42 @@ class VideoCourseList extends React.Component {
}; };
this.props.onChange(_query); this.props.onChange(_query);
} }
handleRelatedModalShow = (item)=>{
const selectPlanList = {};
if(item.relatedPlanList){
item.relatedPlanList.map((item,index)=>{
selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
return item
})
}
this.setState({
RelatedPlanModalVisible:true,
selectCourseId:item.id,
selectPlanList:selectPlanList
})
}
closeRelatedPlanModalVisible = ()=>{
this.setState({
RelatedPlanModalVisible:false
})
}
onChangeSelectPlanList = (selectPlanList)=>{
this.setState({
selectPlanList:selectPlanList
})
}
onConfirmSelectPlanList = ()=>{
this.setState({
RelatedPlanModalVisible:false
},()=>{this.props.onChange();})
}
render() { render() {
const { dataSource = [], totalCount, query } = this.props; const { dataSource = [], totalCount, query } = this.props;
const { current, size } = query; const { current, size } = query;
const {RelatedPlanModalVisible,selectPlanList,selectCourseId} = this.state;
return ( return (
<div className="video-course-list"> <div className="video-course-list">
<Table <Table
...@@ -344,6 +402,16 @@ class VideoCourseList extends React.Component { ...@@ -344,6 +402,16 @@ class VideoCourseList extends React.Component {
}} }}
/> />
</div> </div>
{ RelatedPlanModalVisible &&
<RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible}
selectCourseId={selectCourseId}
selectPlanList={selectPlanList}
onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList}
/>
}
{ this.state.shareLiveModal } { this.state.shareLiveModal }
{ this.state.watchDataModal } { this.state.watchDataModal }
</div> </div>
......
src/modules/store-manage/StoreInfo.jsx
import React from 'react'; import React from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { Form, Input, Button, Checkbox ,Select } from 'antd'; import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd';
import {industryList,childIndustryList} from '@/domains/store-domain/constants'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
import PhotoClip from 'photoclip';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
let cutFlag = false;
class StoreInfo extends React.Component { class StoreInfo extends React.Component {
formRef = React.createRef();
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
storeName:'',
storeFullName:'',
subjectType:'',
corpIndustry:'',
corpSubIndustry:'',
logo:'',
showSelectFileModal:false,
cutImageBlob: null,
} }
} }
componentWillMount(){
this.getStoreDetail()
}
getStoreDetail = ()=>{
const params= {
storeId:User.getStoreId()
}
StoreService.getStoreDetail(params).then((res) => {
const { result = { } } = res;
const {
storeName,
storeFullName,
subjectType,
corpIndustry,
corpSubIndustry,
logo
} = result;
this.formRef.current.setFieldsValue({
storeName:storeName
});
this.formRef.current.setFieldsValue({
storeFullName:storeFullName
});
this.formRef.current.setFieldsValue({
subjectType:subjectType
});
this.formRef.current.setFieldsValue({
corpIndustry:corpIndustry
});
this.formRef.current.setFieldsValue({
corpSubIndustry:corpSubIndustry
});
this.setState({
storeName,
storeFullName,
subjectType,
corpIndustry,
corpSubIndustry,
logo
})
});
}
onChangeFiledValue=(filed,value)=>{
this.setState({
[filed]:value
})
}
handleSelectCover = (file)=> {
this.uploadImage(file);
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
};
//获取resourceId
getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
this.setState({
coverClicpPath:signInfo.fileUrl,
coverId:signInfo.resourceId,
visible: false
},()=>this.updateCover())
});
};
updateCover = () =>{
const {coverClicpPath,coverId} = this.state
this.setState({
showSelectFileModal: false
})
this.setState({
logo:coverClicpPath
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
updateInfo=()=>{
const {storeName,storeFullName,logo,subjectType,corpIndustry,corpSubIndustry} = this.state;
if(!storeName){
message.warning('请输入店铺简称');
return;
}
if(!storeFullName){
message.warning('请输入店铺名称');
return;
}
if(!subjectType){
message.warning('请选择店铺类型');
return;
}
if(!subjectType){
message.warning('店铺所属行业');
return;
}
const params= {
storeName,
storeFullName,
logo,
subjectType,
corpIndustry,
corpSubIndustry,
storeId:User.getStoreId()
}
StoreService.updateStoreMessage(params).then((res) => {
message.success('保存成功');
});
}
render() { render() {
const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob } = this.state;
return ( return (
<div className="page"> <div className="page">
<div className="content-header">店铺基本信息</div> <div className="content-header">店铺基本信息</div>
<div className="box"> <div className="box">
<div> <div>
<Form> <Form ref={this.formRef}>
<Form.Item <Form.Item
label="店铺简称" label="店铺简称"
name="storeName" name="storeName"
rules={[{ required: true, message: 'Please input your username!' }]} rules={[{ required: true}]}
> >
<Input style={{ width: '300px' }}/> <Input value={storeName} style={{ width: '300px' }} placeholder="请输入店铺简称" onChange={(e)=>this.onChangeFiledValue("storeName",e.target.value)} maxLength={20}/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="店铺名称" label="店铺名称"
name="storeFullName" name="storeFullName"
rules={[{ required: true, message: 'Please input your username!' }]} rules={[{ required: true}]}
> >
<Input style={{ width: '300px' }}/> <Input value={storeFullName} style={{ width: '300px' }} placeholder="请输入店铺名称" onChange={(e)=>this.onChangeFiledValue("storeFullName",e.target.value)} maxLength={30}/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="店铺logo" label="店铺logo"
> >
<img src=""></img> <div>
<div>
{ logo ? <img src={logo} style={{width:'258px',height:'60px'}}/> : <div><span>Logo</span></div>}
</div>
<div>
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}}>上传</span></div>
<div>建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
</div>
</div>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="店铺类型" label="店铺类型"
...@@ -43,11 +257,14 @@ class StoreInfo extends React.Component { ...@@ -43,11 +257,14 @@ class StoreInfo extends React.Component {
placeholder="Select a option and change input text above" placeholder="Select a option and change input text above"
allowClear allowClear
style={{ width: '300px' }} style={{ width: '300px' }}
placeholder="请选择店铺类型"
value={subjectType}
onChange={(value)=>this.onChangeFiledValue("subjectType",value)}
> >
<Option value="COMPANY">male</Option> <Option value="COMPANY">企业</Option>
<Option value="INSTITUTION">female</Option> <Option value="INSTITUTION">政府以及事业单位</Option>
<Option value="ELSE">other</Option> <Option value="ELSE">其他组织</Option>
<Option value="TEAM ">other</Option> <Option value="TEAM ">团队号</Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
...@@ -56,33 +273,111 @@ class StoreInfo extends React.Component { ...@@ -56,33 +273,111 @@ class StoreInfo extends React.Component {
name="corpIndustry" name="corpIndustry"
> >
<Select <Select
placeholder="Select a option and change input text above" placeholder="请选择店铺所属行业"
style={{ width: '300px' }} style={{ width: '300px' }}
allowClear allowClear
value={corpIndustry}
onChange={(value)=>this.onChangeFiledValue("corpIndustry",value)}
> >
<Option value="male">male</Option> {industryList.map((item,index)=>{
<Option value="female">female</Option> return <Option value={item}>{item}</Option>
<Option value="other">other</Option> })
}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="店铺所属子类行业" label="店铺所属子行业"
rules={[{ required: true }]}
name="corpSubIndustry" name="corpSubIndustry"
> >
<Select <Select
placeholder="Select a option and change input text above" placeholder="请选择店铺所属子行业"
allowClear allowClear
style={{ width: '300px' }} style={{ width: '300px' }}
value={corpSubIndustry}
onChange={(value)=>this.onChangeFiledValue("corpSubIndustry",value)}
> >
<Option value="male">male</Option> {childIndustryList[corpIndustry] &&
<Option value="female">female</Option> childIndustryList[corpIndustry].map((item,index)=>{
<Option value="other">other</Option> return <Option value={item}>{item}</Option>
})
}
</Select> </Select>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
<div><Button type="primary">更新信息</Button></div> {showSelectFileModal &&
<SelectPrepareFileModal
key="basic"
operateType="select"
multiple={false}
accept="image/jpeg,image/png,image/jpg"
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal}
onClose={() => {
this.setState({
showSelectFileModal:false
})
}}
onSelect={this.handleSelectCover}
/>
}
<Modal
title="设置图片"
width={1080}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
}}
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
this.getSignature(cutImageBlob);
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
></div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<div id="preview-url-box" style={{width:500,height:282}}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
</div>
</div>
</Modal>
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit">更新信息</Button></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