Skip to content

X
xiaomai-cloud-class-web
Commit 641a814b by wufan
Options

Merge branch 'refactor/yuananting/20210615/category-tree-related' into 'master' 

Refactor/yuananting/20210615/category tree related

See merge request !46
parents 77f02561 01a72eb2
Showing with 656 additions and 677 deletions
src/data-source/aidTool/request-apis.ts
......@@ -2,89 +2,89 @@
* @Author: yuananting
* @Date: 2021-03-03 15:13:12
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-25 10:07:03
* @LastEditTime: 2021-06-16 09:57:18
* @Description: 助学工具接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import Service from '@/common/js/service'
import Service from '@/common/js/service';
export function queryExternalCategoryTree(params: object) {
return Service.Hades('public/externalHades/queryCategoryTree', params)
return Service.Hades('public/externalHades/queryCategoryTree', params);
}
export function queryCategoryTree(params: object) {
return Service.Hades('public/hades/queryCategoryTree', params)
return Service.Hades('public/hades/queryCategoryTree', params);
}
export function addCategory(params: object) {
return Service.Hades('public/hades/addCategory', params)
return Service.Hades('public/hades/addCategory', params);
}
export function delCategory(params: object) {
return Service.Hades('public/hades/delCategory', params)
return Service.Hades('public/hades/delCategory', params);
}
export function editCategory(params: object) {
return Service.Hades('public/hades/editCategory', params)
return Service.Hades('public/hades/editCategory', params);
}
export function editCategoryTree(params: object) {
return Service.Hades('public/hades/editCategoryTree', params)
export function moveCategory(params: object) {
return Service.Hades('public/hades/moveCategory', params);
}
export function queryQuestionPageList(params: object) {
return Service.Hades('public/hades/queryQuestionPageList', params)
return Service.Hades('public/hades/queryQuestionPageList', params);
}
export function addQuestion(params: object) {
return Service.Hades('public/hades/addQuestion', params)
return Service.Hades('public/hades/addQuestion', params);
}
export function deleteQuestion(params: object) {
return Service.Hades('public/hades/deleteQuestion', params)
return Service.Hades('public/hades/deleteQuestion', params);
}
export function queryQuestionDetails(params: object) {
return Service.Hades('public/hades/queryQuestionDetails', params)
return Service.Hades('public/hades/queryQuestionDetails', params);
}
export function editQuestion(params: object) {
return Service.Hades('public/hades/editQuestion', params)
return Service.Hades('public/hades/editQuestion', params);
}
export function batchImport(params: object) {
return Service.Hades('public/hades/batchImport', params)
return Service.Hades('public/hades/batchImport', params);
}
export function createPaper(params: object) {
return Service.Hades('public/hades/createPaper', params)
return Service.Hades('public/hades/createPaper', params);
}
export function queryPaperPageList(params: object) {
return Service.Hades('public/hades/queryPaperPageList', params)
return Service.Hades('public/hades/queryPaperPageList', params);
}
export function deletePaper(params: object) {
return Service.Hades('public/hades/deletePaper', params)
return Service.Hades('public/hades/deletePaper', params);
}
export function queryPaperDetail(params: object) {
return Service.Hades('public/hades/queryPaperDetail', params)
return Service.Hades('public/hades/queryPaperDetail', params);
}
export function viewPaper(params: object) {
return Service.Hades('public/hades/viewPaper', params)
return Service.Hades('public/hades/viewPaper', params);
}
export function editPaper(params: object) {
return Service.Hades('public/hades/editPaper', params)
return Service.Hades('public/hades/editPaper', params);
}
export function batchQueryQuestionDetails(params: object) {
return Service.Hades('public/hades/batchQueryQuestionDetails', params)
return Service.Hades('public/hades/batchQueryQuestionDetails', params);
}
export function queryQuestionPageListWithContent(params: object) {
return Service.Hades('public/hades/queryQuestionPageListWithContent', params)
return Service.Hades('public/hades/queryQuestionPageListWithContent', params);
}
src/domains/aid-tool-domain/AidToolService.ts
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-11 11:34:37
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-24 23:44:39
* @LastEditTime: 2021-06-16 09:56:46
* @Description: 助学工具接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,7 +12,7 @@ import {
addCategory,
delCategory,
editCategory,
editCategoryTree,
moveCategory,
addQuestion,
queryQuestionPageList,
deleteQuestion,
......@@ -26,8 +26,8 @@ import {
viewPaper,
editPaper,
batchQueryQuestionDetails,
queryQuestionPageListWithContent
} from '@/data-source/aidTool/request-apis'
queryQuestionPageListWithContent,
} from '@/data-source/aidTool/request-apis';
export default class AidToolService {
/**
* 查询运营端分类书
......@@ -35,101 +35,101 @@ export default class AidToolService {
* @returns
*/
static queryExternalCategoryTree(parmas: any) {
return queryExternalCategoryTree(parmas)
return queryExternalCategoryTree(parmas);
}
// 获取题目分类树
static queryCategoryTree(params: any) {
return queryCategoryTree(params)
return queryCategoryTree(params);
}
// 新增题目分类
static addCategory(params: any) {
return addCategory(params)
return addCategory(params);
}
// 删除分类
static delCategory(params: any) {
return delCategory(params)
return delCategory(params);
}
// 编辑分类
static editCategory(params: any) {
return editCategory(params)
return editCategory(params);
}
// 编辑分类树（拖拽）
static editCategoryTree(params: any) {
return editCategoryTree(params)
// 拖拽移动分类树
static moveCategory(params: any) {
return moveCategory(params);
}
// 查询题目列表
static queryQuestionPageList(params: any) {
return queryQuestionPageList(params)
return queryQuestionPageList(params);
}
// 添加题目
static addQuestion(params: any) {
return addQuestion(params)
return addQuestion(params);
}
// 删除题目
static deleteQuestion(params: any) {
return deleteQuestion(params)
return deleteQuestion(params);
}
// 预览题目
static queryQuestionDetails(params: any) {
return queryQuestionDetails(params)
return queryQuestionDetails(params);
}
// 编辑题目
static editQuestion(params: any) {
return editQuestion(params)
return editQuestion(params);
}
// 批量导入
static batchImport(params: any) {
return batchImport(params)
return batchImport(params);
}
// 创建试卷
static createPaper(params: any) {
return createPaper(params)
return createPaper(params);
}
// 查询试卷列表
static queryPaperPageList(params: any) {
return queryPaperPageList(params)
return queryPaperPageList(params);
}
// 删除试卷
static deletePaper(params: any) {
return deletePaper(params)
return deletePaper(params);
}
// 编辑前查询试卷信息
static queryPaperDetail(params: any) {
return queryPaperDetail(params)
return queryPaperDetail(params);
}
// 预览试卷
static viewPaper(params: any) {
return viewPaper(params)
return viewPaper(params);
}
// 编辑试卷
static editPaper(params: any) {
return editPaper(params)
return editPaper(params);
}
// 操作试卷-预览查询多题目信息
static batchQueryQuestionDetails(params: any) {
return batchQueryQuestionDetails(params)
return batchQueryQuestionDetails(params);
}
// 操作试卷-选择题目列表带题目详情
static queryQuestionPageListWithContent(params: any) {
return queryQuestionPageListWithContent(params)
return queryQuestionPageListWithContent(params);
}
}
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: wufan
* @LastEditTime: 2021-05-27 16:37:28
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-16 18:16:14
* @Description: 图文课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Button, Input, Radio, message, Modal,Cascader} from 'antd';
import { Button, Input, Radio, message, Modal, Cascader } from 'antd';
import $ from 'jquery';
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components';
import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs";
import ShowTips from '@/components/ShowTips';
import Breadcrumbs from '@/components/Breadcrumbs';
import AddGraphicsIntro from './components/AddGraphicsIntro';
import SelectStudent from '../modal/select-student';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
import PreviewGraphicsModal from '../modal/PreviewGraphicsModal';
import StoreService from "@/domains/store-domain/storeService";
import StoreService from '@/domains/store-domain/storeService';
import Service from '@/common/js/service';
import { randomString } from '@/domains/basic-domain/utils';
import User from '@/common/js/user';
import _ from "underscore";
import _ from 'underscore';
import Upload from '@/core/upload';
import './AddGraphicsCourse.less';
const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
//添加课程时课程默认的一些值
const defaultShelfState = 'YES';
const whetherVisitorsJoin = 'NO'
const whetherVisitorsJoin = 'NO';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
let cutFlag = false;
class AddGraphicsCourse extends React.Component {
constructor(props) {
super(props);
const id = getParameterByName("id");
const pageType = getParameterByName("type");
const id = getParameterByName('id');
const pageType = getParameterByName('type');
this.state = {
id, // 图文课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片
courseName: null, // 图文课名称
id, // 图文课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片
courseName: null, // 图文课名称
courseMedia: '',
introduce: '',
courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId
coverUrl: defaultCoverUrl, // 图文课封面
studentList: [], // 上课学员列表
shelfState:'YES', //是否开启学院展示
selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗
courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId
coverUrl: defaultCoverUrl, // 图文课封面
studentList: [], // 上课学员列表
shelfState: 'YES', //是否开启学院展示
selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗
showSelectVideoModal: false,
studentModal: false,
categoryName:null, //分类名称
courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值
categoryName: null, //分类名称
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入
}
};
}
componentWillMount() {
......@@ -76,88 +75,80 @@ class AddGraphicsCourse extends React.Component {
}
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo)
}
Bus.bind('graphicsEditorImage', this.uploadImage);
Bus.bind('graphicsEditorVideo', this.uploadVideo);
};
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage)
Bus.unbind('graphicsEditorVideo', this.uploadVideo)
}
Bus.unbind('graphicsEditorImage', this.uploadImage);
Bus.unbind('graphicsEditorVideo', this.uploadVideo);
};
uploadImage = () => {
this.setState({ showSelectImageModal: true })
}
this.setState({ showSelectImageModal: true });
};
uploadVideo = () => {
this.setState({ showSelectVideoModal: true })
}
this.setState({ showSelectVideoModal: true });
};
//获取分类列表
getCourseCatalogList = ()=>{
StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
this.setState({
courseCatalogList:res.result.records
})
getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({
courseCatalogList: res.result.records,
});
});
}
catalogChange= (value, options) => {
};
catalogChange = (value, options) => {
const changeValueLength = value.length;
switch (changeValueLength){
switch (changeValueLength) {
case 1:
this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
break;
break;
case 2:
this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
break;
break;
default:
this.setState({ categoryId: null, categoryName: '' });
break;
break;
}
}
};
// 获取图文课详情
handleFetchScheudleDetail = (courseId) => {
Service.Hades('public/hades/mediaCourseDetail',{
courseId
Service.Hades('public/hades/mediaCourseDetail', {
courseId,
}).then((res) => {
const { result = {} } = res || {};
const {
courseName,
shelfState,
whetherVisitorsJoin,
courseMediaVOS,
categoryOneName,
categoryTwoName,
categoryId
} = result;
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId } = result;
let coverId;
let coverUrl = this.state.coverUrl;
let hasIntro = false;
courseMediaVOS.map((item) => {
switch (item.contentType){
case "COVER":
switch (item.contentType) {
case 'COVER':
coverId = item.mediaContent;
coverUrl = item.mediaUrl;
break;
case "SCHEDULE":
break;
case 'SCHEDULE':
this.getTextDetail('courseMedia', item.mediaUrl);
break;
case "INTRO":
case 'INTRO':
hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl);
break;
break;
default:
break;
}
return item;
})
let categoryName;
if( categoryTwoName ){
});
let categoryName;
if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}`;
}else{
} else {
categoryName = `${categoryOneName}`;
}
this.setState({
......@@ -168,74 +159,74 @@ class AddGraphicsCourse extends React.Component {
shelfState,
whetherVisitorsJoin,
categoryName,
categoryId
categoryId,
});
})
}
});
};
getTextDetail = (key, url) => {
$.ajax({
data: {},
type: 'GET',
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ [key]: res, [`load${key}`]: true });
}
})
}
},
});
};
handleGoBack = () => {
const {
coverId,
videoName,
videoDuration,
courseName,
courseMediaId,
categoryId,
shelfState,
whetherVisitorsJoin
} = this.state;
if(videoName || videoDuration || courseMediaId || categoryId || courseName || coverId || shelfState !== defaultShelfState || whetherVisitorsJoin !== whetherVisitorsJoin ){
const { coverId, videoName, videoDuration, courseName, courseMediaId, categoryId, shelfState, whetherVisitorsJoin } = this.state;
if (
videoName ||
videoDuration ||
courseMediaId ||
categoryId ||
courseName ||
coverId ||
shelfState !== defaultShelfState ||
whetherVisitorsJoin !== whetherVisitorsJoin
) {
Modal.confirm({
title: '确认要返回吗?',
content: '返回后，本次编辑的内容将不被保存。',
okText: '确认返回',
cancelText: '留在本页',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
onOk: () => {
window.RCHistory.push({
pathname: `/graphics-course`,
});
}
},
});
}else{
} else {
window.RCHistory.push({
pathname: `/graphics-course`,
});
}
}
};
// 修改表单
handleChangeForm = (field, value, coverUrl) => {
this.setState({
[field]: value,
coverUrl: coverUrl ? coverUrl : this.state.coverUrl
coverUrl: coverUrl ? coverUrl : this.state.coverUrl,
});
}
};
// 显示选择学员弹窗
handleShowSelectStuModal = () => {
this.setState({ studentModal : true });
this.setState({ studentModal: true });
const { studentList, selectedStuList } = this.state;
// const _studentList = _.map(studentList, (item) => {
// const _studentList = _.map(studentList, (item) => {
// return item.studentId
// })
const studentModal = (
<SelectStudent
showTabs={true}
type="videoCourse"
type='videoCourse'
onSelect={this.handleSelectStudent}
after={true} //表明是不是上课后的状态
studentList={studentList}
......@@ -245,9 +236,9 @@ class AddGraphicsCourse extends React.Component {
});
}}
/>
)
);
this.setState({ studentModal });
}
};
handleSelectStudent = (studentIds) => {
let studentList = [];
......@@ -255,52 +246,46 @@ class AddGraphicsCourse extends React.Component {
studentList.push({ studentId: item });
});
// this.setState({ studentModal: null });
this.setState({ studentList });
this.setState({ studentModal : false });
}
this.setState({ studentList });
this.setState({ studentModal: false });
};
// 显示预览弹窗
handleShowPreviewModal = () => {
const {
coverUrl,
courseName,
courseMedia,
introduce,
categoryName,
} = this.state;
const { coverUrl, courseName, courseMedia, introduce, categoryName } = this.state;
const courseBasinInfo = {
coverUrl,
courseName,
categoryName
}
categoryName,
};
const courseIntroInfo = {
courseMedia,
introduce,
}
};
const previewGraphicsModal = (
<PreviewGraphicsModal
courseBasicInfo={courseBasinInfo}
courseIntroInfo={courseIntroInfo}
close={() => {
this.setState({
previewGraphicsModal: null
})
previewGraphicsModal: null,
});
}}
/>
);
this.setState({ previewGraphicsModal });
}
};
handleSelectCover = (file)=> {
handleSelectCover = (file) => {
this.uploadCoverImage(file);
}
};
//上传图片
uploadCoverImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'));
const self = this;
this.setState(
{
......@@ -308,56 +293,54 @@ class AddGraphicsCourse extends React.Component {
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const okBtnDom = document.querySelector('#headPicModal');
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
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()
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()
})
scale: this.scale(),
});
}
}, 500)
}, 500);
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
dataUrl,
});
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
message.error('图片上传失败了，请重新上传');
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
const _dataUrl = this.clip();
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
hasImgReady: true,
});
}, 100);
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
......@@ -366,7 +349,6 @@ class AddGraphicsCourse extends React.Component {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
......@@ -374,56 +356,48 @@ class AddGraphicsCourse extends React.Component {
//获取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())
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
updateCover = () => {
const { coverClicpPath, coverId } = this.state;
this.setState({
showSelectCoverModal: false,
coverUrl:coverClicpPath,
coverId:coverId
})
}
coverUrl: coverClicpPath,
coverId: coverId,
});
};
// base64转换成blob
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
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" });
return new Blob([ab], { type: 'image/png' });
};
// 保存
handleSubmit = () => {
const {
id,
coverId,
pageType,
courseName,
courseMedia,
introduce,
categoryId,
shelfState,
whetherVisitorsJoin,
} = this.state;
const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state;
const commonParams = {
categoryId,
courseName,
coverId,
operatorId:User.getStoreUserId(),
storeId:User.getStoreId(),
operatorId: User.getStoreUserId(),
storeId: User.getStoreId(),
shelfState,
whetherVisitorsJoin,
courseType: 'PICTURE',
......@@ -431,19 +405,29 @@ class AddGraphicsCourse extends React.Component {
// 校验必填字段:课程名称, 课程图文
this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
if (!res) return;
Upload.uploadTextToOSS(courseMedia, `${randomString()}.txt`, (courseMediaId) => {
Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({
id,
pageType,
commonParams,
courseMediaId,
introduceId,
});
}, () => message.warning('上传课程简介失败'));
}, () => message.warning('上传课程内容失败'));
Upload.uploadTextToOSS(
courseMedia,
`${randomString()}.txt`,
(courseMediaId) => {
Upload.uploadTextToOSS(
introduce,
`${randomString()}.txt`,
(introduceId) => {
this.submitRemote({
id,
pageType,
commonParams,
courseMediaId,
introduceId,
});
},
() => message.warning('上传课程简介失败')
);
},
() => message.warning('上传课程内容失败')
);
});
}
};
submitRemote = (data) => {
const { id, pageType, commonParams, courseMediaId, introduceId } = data;
......@@ -452,42 +436,42 @@ class AddGraphicsCourse extends React.Component {
if (pageType === 'add') {
Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
if (!res) return;
message.success("新建成功");
message.success('新建成功');
window.RCHistory.push({
pathname: `/graphics-course`,
});
})
});
} else {
const editParams = {
courseId:id,
courseId: id,
...commonParams,
}
};
Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return;
message.success("保存成功");
message.success('保存成功');
window.RCHistory.push({
pathname: `/graphics-course`,
});
});
}
}
};
handleValidate = (courseName, courseMedia, categoryId) => {
return new Promise((resolve) => {
if (!courseName) {
message.warning('请输入课程名称');
resolve(false);
return false
return false;
}
if (!courseMedia) {
message.warning('请输入课程内容');
resolve(false);
return false
return false;
}
if(!categoryId){
if (!categoryId) {
message.warning('请选择课程分类');
resolve(false);
return false
return false;
}
// const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
// for (let i = 0, len = textMedia.length; i < len; i++) {
......@@ -499,7 +483,7 @@ class AddGraphicsCourse extends React.Component {
// }
resolve(true);
});
}
};
render() {
const {
......@@ -528,58 +512,65 @@ class AddGraphicsCourse extends React.Component {
const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
return (
<div className="page add-graphics-course-page">
<Breadcrumbs
navList={pageType === "add" ? "新建图文课" : "编辑图文课"}
goBack={this.handleGoBack}
/>
<div className="box">
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利" />
<div className='page add-graphics-course-page'>
<Breadcrumbs navList={pageType === 'add' ? '新建图文课' : '编辑图文课'} goBack={this.handleGoBack} />
<div className='box'>
<div className='show-tips'>
<ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
</div>
<div className="form">
<div className="course-name required">
<span className="label">课程名称：</span>
<div className='form'>
<div className='course-name required'>
<span className='label'>课程名称：</span>
<Input
value={courseName}
placeholder="请输入图文课的名称（40字以内）"
placeholder='请输入图文课的名称（40字以内）'
maxLength={40}
style={{ width: 240 }}
onChange={(e) => { this.handleChangeForm('courseName', e.target.value)}}
onChange={(e) => {
this.handleChangeForm('courseName', e.target.value);
}}
/>
</div>
<div className="cover-url flex mt16">
<div className="label">封面图：</div>
<div className="cover-url__wrap">
<div className="img-content">
<div className='cover-url flex mt16'>
<div className='label'>封面图：</div>
<div className='cover-url__wrap'>
<div className='img-content'>
<img src={coverUrl} />
</div>
<div className="opt-btns">
<Button onClick={() => {
this.setState({
showSelectCoverModal: true
});
}}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
<div className='opt-btns'>
<Button
onClick={() => {
this.setState({
showSelectCoverModal: true,
});
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div>
</div>
</div>
<div className="course-catalog required">
<span className="label">课程分类：</span>
{ (pageType === 'add') &&
<Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
}
{ (pageType === 'edit' && categoryName ) &&
<Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
}
<div className='course-catalog required'>
<span className='label'>课程分类：</span>
<Cascader
value={categoryName ? [categoryName] : undefined}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
</div>
<div className="intro-info mt16">
<div className='intro-info mt16'>
<AddGraphicsIntro
data={{
id,
......@@ -596,49 +587,50 @@ class AddGraphicsCourse extends React.Component {
</div>
</div>
<div className="footer shrink-footer">
<div className='footer shrink-footer'>
<Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.handleShowPreviewModal}>预览</Button>
<Button type="primary" onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>保存</Button>
<Button type='primary' onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>
保存
</Button>
</div>
{showSelectCoverModal &&
{showSelectCoverModal && (
<SelectPrepareFileModal
key="basic"
operateType="select"
key='basic'
operateType='select'
multiple={false}
accept="image/jpeg,image/png,image/jpg"
accept='image/jpeg,image/png,image/jpg'
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectCoverModal}
onClose={() => {
this.setState({ showSelectCoverModal: false })
this.setState({ showSelectCoverModal: false });
}}
onSelect={this.handleSelectCover}
/>
}
)}
<Modal
title="设置图片"
title='设置图片'
width={1080}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
}}
zIndex={10001}
footer={[
<Button
key="back"
key='back'
onClick={() => {
this.setState({ visible: false });
}}
>
}}>
重新上传
</Button>,
<Button
key="submit"
type="primary"
key='submit'
type='primary'
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
......@@ -646,39 +638,36 @@ class AddGraphicsCourse extends React.Component {
this.refs.hiddenBtn.click();
}
this.getSignature(cutImageBlob);
}}
>
}}>
确定
</Button>,
]}
>
<div className="clip-box">
]}>
<div className='clip-box'>
<div
id="headPicModal"
ref="headPicModal"
id='headPicModal'
ref='headPicModal'
style={{
width: "500px",
height: "430px",
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 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 className="tip-box">
<div className="tip">温馨提示</div>
<div className="tip">①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
<div className='tip-box'>
<div className='tip'>温馨提示</div>
<div className='tip'>①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className='tip'>②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div>
</div>
</div>
</Modal>
{ this.state.previewGraphicsModal }
{this.state.previewGraphicsModal}
</div>
)
);
}
}
......
src/modules/knowledge-base/components/Classification.jsx
......@@ -2,17 +2,17 @@
* @Description:
* @Author: zangsuyun
* @Date: 2021-03-19 18:05:23
* @LastEditors: wufan
* @LastEditTime: 2021-05-30 16:48:46
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-15 11:20:24
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Input, Button, Tree } from "antd";
import "./Classification.less";
import User from "@/common/js/user";
import KnowledgeAPI from "@/data-source/knowledge/request-api";
import Bus from "@/core/bus";
import React, { Component } from 'react';
import { Input, Button, Tree } from 'antd';
import './Classification.less';
import User from '@/common/js/user';
import KnowledgeAPI from '@/data-source/knowledge/request-api';
import Bus from '@/core/bus';
const { Search } = Input;
const { DirectoryTree } = Tree;
......@@ -21,7 +21,7 @@ class Classification extends Component {
constructor(props) {
super(props);
this.state = {
selectedKeys: props.selectedKeys ? [props.selectedKeys] : ["0"],
selectedKeys: props.selectedKeys ? [props.selectedKeys] : ['0'],
searchValue: null,
NewEditQuestionBankCategory: null, //新增或编辑分类模态框
ImportCourseCategory: null, // 引用课程分类模态框
......@@ -32,11 +32,11 @@ class Classification extends Component {
componentDidMount() {
this.queryCategoryTree();
Bus.bind('knowledgeCategoryTree', this.queryCategoryTree)
Bus.bind('knowledgeCategoryTree', this.queryCategoryTree);
}
componentWillUnmount() {
Bus.unbind('knowledgeCategoryTree', this.queryCategoryTree)
Bus.unbind('knowledgeCategoryTree', this.queryCategoryTree);
}
shouldComponentUpdate = (nextProps, nextState) => {
......@@ -79,7 +79,7 @@ class Classification extends Component {
};
KnowledgeAPI.getCategoryTree(query).then((res) => {
const { categoryList = [], noCategoryCnt = 0 } = res.result;
let str = "未分类";
let str = '未分类';
if (categoryName) {
this.setState({ autoExpandParent: true });
if (str.indexOf(categoryName) < 0) {
......@@ -93,8 +93,8 @@ class Classification extends Component {
this.setState({ expandedKeys: nodeId });
} else {
const defaultNode = {
id: "0",
categoryName: "未分类",
id: '0',
categoryName: '未分类',
categoryCount: noCategoryCnt,
};
categoryList.unshift(defaultNode);
......@@ -110,8 +110,8 @@ class Classification extends Component {
} else {
this.setState({ autoExpandParent: false });
const defaultNode = {
id: "0",
categoryName: "未分类",
id: '0',
categoryName: '未分类',
categoryCount: noCategoryCnt,
};
categoryList.unshift(defaultNode);
......@@ -140,39 +140,35 @@ class Classification extends Component {
item.title =
!value || (value && item.categoryName.indexOf(value) > -1) ? (
<span>
{item.categoryName}（{item.categoryCount}）
{item.categoryName}
{item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
</span>
) : (
<span style={{ opacity: 0.5 }}>
{item.categoryName}（{item.categoryCount}）
{item.categoryName}
{item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
</span>
);
item.icon =
item.categoryName === "未分类" ? (
item.categoryName === '未分类' ? (
<img
style={{
width: "24px",
height: "24px",
opacity:
!value || (value && item.categoryName.indexOf(value) > -1)
? 1
: 0.5,
width: '24px',
height: '24px',
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
src="https://image.xiaomaiketang.com/xm/defaultCategory.png"
alt=""
src='https://image.xiaomaiketang.com/xm/defaultCategory.png'
alt=''
/>
) : (
<img
style={{
width: "24px",
height: "24px",
opacity:
!value || (value && item.categoryName.indexOf(value) > -1)
? 1
: 0.5,
width: '24px',
height: '24px',
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
src="https://image.xiaomaiketang.com/xm/hasCategory.png"
alt=""
src='https://image.xiaomaiketang.com/xm/hasCategory.png'
alt=''
/>
);
if (item.sonCategoryList) {
......@@ -186,36 +182,30 @@ class Classification extends Component {
};
render() {
const {
treeData,
expandedKeys,
selectedKeys,
autoExpandParent,
} = this.state;
const { treeData, expandedKeys, selectedKeys, autoExpandParent } = this.state;
return (
<div className="question-bank-sider">
<div className="sider-title">知识分类</div>
<div className='question-bank-sider'>
<div className='sider-title'>知识分类</div>
<Search
className="sider-search"
placeholder="搜索名称分类"
className='sider-search'
placeholder='搜索名称分类'
onSearch={(value) => {
this.queryCategoryTree(value);
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
style={{width: 230}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
style={{ width: 230 }}
/>
<div className="sider-btn">
<div className='sider-btn'>
<Button
onClick={() => {
window.RCHistory.push({
pathname: "/course-category-manage?from=knowledge",
pathname: '/course-category-manage?from=knowledge',
});
}}
>
}}>
分类管理
</Button>
</div>
<div className="sider-tree">
<div className='sider-tree'>
<DirectoryTree
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
......
src/modules/teach-tool/components/CourseCategoryManage.jsx
/*
* @Author: yuananting
* @Date: 2021-02-23 18:28:50
* @LastEditors: yuananting
* @LastEditTime: 2021-06-02 14:25:06
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-16 09:59:04
* @Description: 助学工具-课程分类
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from 'react'
import Breadcrumbs from '@/components/Breadcrumbs'
import './CourseCategoryManage.less'
import OpearteCourseCategoryModal from '../modal/OpearteCourseCategoryModal'
import AidToolService from '@/domains/aid-tool-domain/AidToolService'
import User from '@/common/js/user'
import { Tree, Input, Space, Button, Menu, Dropdown, message, Modal } from 'antd'
import ShowTips from '@/components/ShowTips'
const { DirectoryTree } = Tree
const { Search } = Input
const { confirm } = Modal
import React, { Component } from 'react';
import Breadcrumbs from '@/components/Breadcrumbs';
import './CourseCategoryManage.less';
import OpearteCourseCategoryModal from '../modal/OpearteCourseCategoryModal';
import AidToolService from '@/domains/aid-tool-domain/AidToolService';
import User from '@/common/js/user';
import { Tree, Input, Space, Button, Menu, Dropdown, message, Modal } from 'antd';
import ShowTips from '@/components/ShowTips';
const { DirectoryTree } = Tree;
const { Search } = Input;
const { confirm } = Modal;
class CourseCategoryManage extends Component {
constructor(props) {
super(props)
super(props);
this.state = {
operateCourseCategoryModal: null, //新增或编辑分类模态框
treeData: [],
originTreeData: [],
treeMap: {},
selectedKeys: ['null'],
autoExpandParent: true
}
autoExpandParent: true,
};
}
componentDidMount() {
this.queryCategoryTree('init')
this.queryCategoryTree('init');
}
getWholeTree = () => {
......@@ -40,112 +40,112 @@ class CourseCategoryManage extends Component {
count: false,
source: 0,
userId: User.getStoreUserId(),
tenantId: User.getStoreId()
}
tenantId: User.getStoreId(),
};
AidToolService.queryCategoryTree(query).then((res) => {
const { categoryList = [] } = res.result
const { categoryList = [] } = res.result;
this.setState({ originTreeData: categoryList }, () => {
let map = {}
let topItem = []
let map = {};
let topItem = [];
categoryList.forEach((item) => {
topItem.push(item)
})
topItem.push(item);
});
this.setState({
treeMap: Object.assign(this.getTreeMap(categoryList, map), {
0: {
sonCategoryList: topItem
}
})
})
})
})
}
sonCategoryList: topItem,
},
}),
});
});
});
};
// 查询分类树
queryCategoryTree = (operateType, categoryName) => {
this.getWholeTree()
this.setState({ categoryName })
this.getWholeTree();
this.setState({ categoryName });
let query = {
bizType: 'QUESTION',
count: false,
source: 0,
categoryName,
userId: User.getStoreUserId(),
tenantId: User.getStoreId()
}
tenantId: User.getStoreId(),
};
AidToolService.queryCategoryTree(query).then((res) => {
const { categoryList = [] } = res.result
let str = '未分类'
const { categoryList = [] } = res.result;
let str = '未分类';
if (categoryName) {
this.setState({ autoExpandParent: true })
this.setState({ autoExpandParent: true });
if (str.indexOf(categoryName) < 0) {
this.setState({
treeData: this.renderTreeNodes(categoryList, categoryName)
})
let nodeId = []
treeData: this.renderTreeNodes(categoryList, categoryName),
});
let nodeId = [];
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item)
})
this.setState({ expandedKeys: nodeId })
nodeId.push(item);
});
this.setState({ expandedKeys: nodeId });
} else {
const defaultNode = {
id: 'null',
categoryName: '未分类',
categoryCount: 0,
parentId: '0',
categoryLevel: 0
}
categoryList.unshift(defaultNode)
categoryLevel: 0,
};
categoryList.unshift(defaultNode);
this.setState({
treeData: this.renderTreeNodes(categoryList, categoryName)
})
let nodeId = []
treeData: this.renderTreeNodes(categoryList, categoryName),
});
let nodeId = [];
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item)
})
nodeId.push(item);
});
if (operateType === 'init') {
this.setState({ expandedKeys: nodeId })
this.setState({ expandedKeys: nodeId });
}
}
} else {
this.setState({ autoExpandParent: false })
this.setState({ autoExpandParent: false });
const defaultNode = {
id: 'null',
categoryName: '未分类',
categoryCount: 0,
parentId: '0',
categoryLevel: 0
}
categoryList.unshift(defaultNode)
this.setState({ treeData: this.renderTreeNodes(categoryList, categoryName) })
categoryLevel: 0,
};
categoryList.unshift(defaultNode);
this.setState({ treeData: this.renderTreeNodes(categoryList, categoryName) });
if (operateType === 'init') {
this.setState({ expandedKeys: [] })
this.setState({ expandedKeys: [] });
}
}
})
}
});
};
// 树节点渲染-内容处理
renderTreeNodes = (data, value) => {
let newTreeData = data.map((item) => {
item.title = item.categoryName
item.key = item.id
item.title = item.categoryName;
item.key = item.id;
item.title = (
<div
style={{
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
className='node-title-div'
onMouseOver={(e) => {
let mouseNodeOpts = e.currentTarget.getElementsByTagName('div')[0]
let mouseNodeOpts = e.currentTarget.getElementsByTagName('div')[0];
if (mouseNodeOpts) {
mouseNodeOpts.style.visibility = 'visible'
mouseNodeOpts.style.visibility = 'visible';
}
}}
onMouseOut={(e) => {
let mouseNodeOpts = e.currentTarget.getElementsByTagName('div')[0]
let mouseNodeOpts = e.currentTarget.getElementsByTagName('div')[0];
if (mouseNodeOpts) {
mouseNodeOpts.style.visibility = 'hidden'
mouseNodeOpts.style.visibility = 'hidden';
}
}}>
<span>{item.categoryName}</span>
......@@ -158,9 +158,9 @@ class CourseCategoryManage extends Component {
(item.categoryLevel === 0 && originTreeData.length >= 29) ||
(item.categoryLevel > 0 && this.getRelatedNodes(item.parentId).length >= 30)
) {
return message.info('最多只能添加30个分类')
return message.info('最多只能添加30个分类');
}
this.newEditCourseCategory('newEqualLevelCategory', 'equal', 'new', item)
this.newEditCourseCategory('newEqualLevelCategory', 'equal', 'new', item);
}}>
<span className='icon iconfont' style={{ color: '#BFBFBF' }}>
&#xe7f5;{' '}
......@@ -171,10 +171,10 @@ class CourseCategoryManage extends Component {
<span
onClick={() => {
if (this.getRelatedNodes(item.id) && this.getRelatedNodes(item.id).length >= 30) {
message.info('最多只能添加30个子分类')
return
message.info('最多只能添加30个子分类');
return;
}
this.newEditCourseCategory('newChildLevelCategory', 'child', 'new', item)
this.newEditCourseCategory('newChildLevelCategory', 'child', 'new', item);
}}>
<span className='icon iconfont' style={{ color: '#BFBFBF' }}>
&#xe7f8;{' '}
......@@ -193,14 +193,14 @@ class CourseCategoryManage extends Component {
</Space>
)}
</div>
)
);
item.icon =
item.categoryName === '未分类' ? (
<img
style={{
width: '24px',
height: '24px',
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
src='https://image.xiaomaiketang.com/xm/defaultCategory.png'
alt=''
......@@ -210,54 +210,54 @@ class CourseCategoryManage extends Component {
style={{
width: '24px',
height: '24px',
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
src='https://image.xiaomaiketang.com/xm/hasCategory.png'
alt=''
/>
)
);
if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList, value)
item.children = this.renderTreeNodes(item.sonCategoryList, value);
}
return item
})
return newTreeData
}
return item;
});
return newTreeData;
};
// 树结构平铺
getTreeMap = (data, map) => {
data.forEach((item) => {
map[item.id] = item
map[item.id] = item;
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
this.getTreeMap(item.sonCategoryList, map)
this.getTreeMap(item.sonCategoryList, map);
}
})
});
return map
}
return map;
};
// 新增或编辑分类
newEditCourseCategory = (categoryType, addLevelType, type, node) => {
let title = ''
let label = ''
let title = '';
let label = '';
switch (categoryType) {
case 'newEqualLevelCategory':
title = '新增分类'
label = '分类名称'
break
title = '新增分类';
label = '分类名称';
break;
case 'newChildLevelCategory':
title = '新增子分类'
label = '子分类名称'
break
title = '新增子分类';
label = '子分类名称';
break;
case 'editEqualLevelCategory':
title = '编辑分类'
label = '分类名称'
break
title = '编辑分类';
label = '分类名称';
break;
case 'editChildLevelCategory':
title = '编辑子分类'
label = '子分类名称'
break
title = '编辑子分类';
label = '子分类名称';
break;
}
const m = (
<OpearteCourseCategoryModal
......@@ -267,15 +267,15 @@ class CourseCategoryManage extends Component {
title={title}
label={label}
close={() => {
this.queryCategoryTree('remain', this.state.categoryName)
this.queryCategoryTree('remain', this.state.categoryName);
this.setState({
operateCourseCategoryModal: null
})
operateCourseCategoryModal: null,
});
}}
/>
)
this.setState({ operateCourseCategoryModal: m })
}
);
this.setState({ operateCourseCategoryModal: m });
};
// 删除分类
delCategory = (item) => {
......@@ -291,17 +291,17 @@ class CourseCategoryManage extends Component {
categoryId: item.id,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId()
}
userId: User.getStoreUserId(),
};
AidToolService.delCategory(params).then((res) => {
if (res.success) {
message.success('删除分类成功')
this.queryCategoryTree('remain', this.state.categoryName)
message.success('删除分类成功');
this.queryCategoryTree('remain', this.state.categoryName);
}
})
}
})
}
});
},
});
};
// 更多操作-【重命名 删除】
initDropMenu = (item) => {
......@@ -310,8 +310,8 @@ class CourseCategoryManage extends Component {
<Menu.Item key='0'>
<span
onClick={() => {
let categoryType = item.categoryLevel === 0 ? 'editEqualLevelCategory' : 'editChildLevelCategory'
this.newEditCourseCategory(categoryType, 'equal', 'edit', item)
let categoryType = item.categoryLevel === 0 ? 'editEqualLevelCategory' : 'editChildLevelCategory';
this.newEditCourseCategory(categoryType, 'equal', 'edit', item);
}}>
重命名
</span>
......@@ -319,49 +319,47 @@ class CourseCategoryManage extends Component {
<Menu.Item key='1'>
<span
onClick={() => {
this.delCategory(item)
this.delCategory(item);
}}>
删除
</span>
</Menu.Item>
</Menu>
)
}
);
};
// 获取相关节点
getRelatedNodes = (parentId) => {
return this.state.treeMap[parentId] ? this.state.treeMap[parentId].sonCategoryList : []
}
return this.state.treeMap[parentId] ? this.state.treeMap[parentId].sonCategoryList : [];
};
// 获取拖拽目标父节点层级
getParentDragNodesLevel = (dragNode) => {
if (!dragNode) {
return []
return [];
}
let dragNodes = []
dragNodes.push(dragNode.id)
let dragNodes = [];
dragNodes.push(dragNode.id);
if (dragNode.parentId !== "0") {
dragNodes = dragNodes.concat(
this.getParentDragNodesLevel(this.state.treeMap[dragNode.parentId])
);
if (dragNode.parentId !== '0') {
dragNodes = dragNodes.concat(this.getParentDragNodesLevel(this.state.treeMap[dragNode.parentId]));
}
return dragNodes
}
return dragNodes;
};
// 获取拖拽节点层级
getDragNodesLevel = (dragNode) => {
let dragNodes = []
let dragNodes = [];
if (dragNode.sonCategoryList && dragNode.sonCategoryList.length > 0) {
dragNode.sonCategoryList.forEach((item) => {
dragNodes.push(item.categoryLevel)
dragNodes.push(item.categoryLevel);
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
dragNodes = dragNodes.concat(this.getDragNodesLevel(item))
dragNodes = dragNodes.concat(this.getDragNodesLevel(item));
}
})
});
}
return [...new Set(dragNodes)]
}
return [...new Set(dragNodes)];
};
// 拖拽
onDrop = (info) => {
......@@ -370,148 +368,172 @@ class CourseCategoryManage extends Component {
// 不允许其他节点拖拽到未分类之前
if (
this.state.categoryName ||
(info.node.categoryName === "未分类" && info.dropPosition === 0) ||
(info.node.categoryName === "未分类" &&
info.dropToGap &&
info.dropPosition === -1)
(info.node.categoryName === '未分类' && info.dropPosition === 0) ||
(info.node.categoryName === '未分类' && info.dropToGap && info.dropPosition === -1)
) {
return;
}
// 未分类不可以拖拽
if (
info.dragNode.categoryName === "未分类" &&
info.dragNode.categoryLevel === 0
)
return message.info("“未分类”为默认分类暂不支持移动");
if (info.dragNode.categoryName === '未分类' && info.dragNode.categoryLevel === 0) return message.info('“未分类”为默认分类暂不支持移动');
let targetParentId = info.dropToGap ? info.node.parentId : info.node.id
let relatedNodes = this.getRelatedNodes(targetParentId)
let targetParentId = info.dropToGap ? info.node.parentId : info.node.id;
let relatedNodes = this.getRelatedNodes(targetParentId);
if (!((info.dropToGap && info.node.parentId === info.dragNode.parentId) || (!info.dropToGap && info.node.id === info.dragNode.parentId))) {
if (this.state.treeMap[targetParentId].categoryLevel === 4) {
return message.info('最多支持5级分类')
if (this.state.treeMap[targetParentId].categoryLevel >= 4) {
return message.info('最多支持5级分类');
} else {
let nodesArr = this.getDragNodesLevel(this.state.treeMap[info.dragNode.id])
let parentArr = this.getParentDragNodesLevel(this.state.treeMap[targetParentId])
let nodesArr = this.getDragNodesLevel(this.state.treeMap[info.dragNode.id]);
let parentArr = this.getParentDragNodesLevel(this.state.treeMap[targetParentId]);
if (nodesArr.length + parentArr.length > 4) {
return message.info("最多支持5级分类");
return message.info('最多支持5级分类');
}
}
if (relatedNodes && relatedNodes.length >= 30) {
return message.info('最多只能添加30个分类')
return message.info('最多只能添加30个分类');
}
}
const dropKey = info.node.key
const dragKey = info.dragNode.key
const dropPos = info.node.pos.split('-')
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
const dropKey = info.node.key;
const dragKey = info.dragNode.key;
const dropPos = info.node.pos.split('-');
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
const loop = (data, key, callback) => {
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return callback(data[i], i, data)
return callback(data[i], i, data);
}
if (data[i].sonCategoryList) {
loop(data[i].sonCategoryList, key, callback)
loop(data[i].sonCategoryList, key, callback);
}
}
}
const data = [...this.state.treeData]
};
const data = [...this.state.treeData];
let getSuf = function (name, originCategoryName, sufIndex) {
if (relatedNodes && relatedNodes.length > 0) {
let sameNameNodes = []
let sameNameNodes = [];
relatedNodes.forEach((item) => {
if (item.id === info.dragNode.id) return true
if (item.id === info.dragNode.id) return true;
if (item.categoryName === name) {
sameNameNodes.push(item)
sameNameNodes.push(item);
}
})
});
if (sameNameNodes.length > 0) {
sufIndex++
return getSuf(originCategoryName + `(${sufIndex})`, originCategoryName, sufIndex)
sufIndex++;
return getSuf(originCategoryName + `(${sufIndex})`, originCategoryName, sufIndex);
}
}
return sufIndex
}
return sufIndex;
};
let dragObj
let dragObj;
loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1)
item.parentId = targetParentId
arr.splice(index, 1);
item.parentId = targetParentId;
if (item.originCategoryName) {
item.categoryName = item.originCategoryName
item.categoryName = item.originCategoryName;
} else {
item.originCategoryName = item.categoryName
item.originCategoryName = item.categoryName;
}
info.dragNode.categoryName = item.originCategoryName
let sufIndex = getSuf(info.dragNode.categoryName, item.originCategoryName, 0)
item.categoryName = item.categoryName + (sufIndex ? `(${sufIndex})` : '')
item.categoryName = item.originCategoryName + (sufIndex ? `(${sufIndex})` : '')
dragObj = item
})
info.dragNode.categoryName = item.originCategoryName;
let sufIndex = getSuf(info.dragNode.categoryName, item.originCategoryName, 0);
item.categoryName = item.categoryName + (sufIndex ? `(${sufIndex})` : '');
item.categoryName = item.originCategoryName + (sufIndex ? `(${sufIndex})` : '');
dragObj = item;
});
if (!info.dropToGap) {
loop(data, dropKey, (item) => {
item.sonCategoryList = item.sonCategoryList || []
item.sonCategoryList.unshift(dragObj)
})
item.sonCategoryList = item.sonCategoryList || [];
item.sonCategoryList.unshift(dragObj);
});
} else if ((info.node.props.sonCategoryList || []).length > 0 && info.node.props.expanded && dropPosition === 1) {
loop(data, dropKey, (item) => {
item.sonCategoryList = item.children || []
item.sonCategoryList.unshift(dragObj)
})
item.sonCategoryList = item.children || [];
item.sonCategoryList.unshift(dragObj);
});
} else {
let ar
let i
let ar;
let i;
loop(data, dropKey, (item, index, arr) => {
ar = arr
i = index
})
ar = arr;
i = index;
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj)
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj)
ar.splice(i + 1, 0, dragObj);
}
}
data.shift()
let newTreeData = this.renderTreeNodes(this.handleLoop(data, 0))
this.setState({ treeData: newTreeData })
data.shift();
let newTreeData = this.renderTreeNodes(this.handleLoop(data, 0));
this.setState({ treeData: newTreeData });
let firstParentNode = {
categoryCount: 0,
categoryLevel: 0,
categoryName: '',
id: 0,
parentId: 0,
parentName: '',
rootId: 0,
sonCategoryList: [...newTreeData],
sort: 0,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
let movedCategory = this.movedNodeFind(newTreeData, info.dragNode.id);
let parentCategory = movedCategory.parentId === '0' ? firstParentNode : this.movedNodeFind(newTreeData, targetParentId);
let params = {
categoryList: newTreeData,
movedCategory,
parentCategory,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId()
userId: User.getStoreUserId(),
};
AidToolService.moveCategory(params).then((res) => {
this.queryCategoryTree('remain');
});
};
// 获取移动节点信息
movedNodeFind(categoryList, movedId) {
for (const item of categoryList) {
if (item.id === movedId) return item;
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
const node = this.movedNodeFind(item.sonCategoryList, movedId);
if (node) return node;
}
}
AidToolService.editCategoryTree(params).then((res) => {
this.queryCategoryTree('remain')
})
return null;
}
handleLoop = (data, level) => {
data.map((item, index) => {
item.sort = index
item.categoryLevel = level
item.sort = index;
item.categoryLevel = level;
if (item.sonCategoryList) {
item.children = this.handleLoop(item.sonCategoryList, level + 1)
item.sonCategoryList = this.handleLoop(item.sonCategoryList, level + 1)
item.children = this.handleLoop(item.sonCategoryList, level + 1);
item.sonCategoryList = this.handleLoop(item.sonCategoryList, level + 1);
}
return item
})
return data
}
return item;
});
return data;
};
// 树状展开事件
onExpand = (expandedKeys) => {
this.setState({ expandedKeys })
}
this.setState({ expandedKeys });
};
// 树状选中事件
onSelect = (selectedKeys) => {
this.setState({ selectedKeys })
}
this.setState({ selectedKeys });
};
render() {
const { treeData, originTreeData, expandedKeys, selectedKeys, autoExpandParent, operateCourseCategoryModal } = this.state
const { treeData, originTreeData, expandedKeys, selectedKeys, autoExpandParent, operateCourseCategoryModal } = this.state;
return (
<div className='page course-category-manage'>
{['aid', 'knowledge'].includes(getParameterByName('from')) ? (
......@@ -534,10 +556,10 @@ class CourseCategoryManage extends Component {
type='primary'
onClick={() => {
if (originTreeData.length >= 29) {
message.info('最多只能添加30个分类')
return
message.info('最多只能添加30个分类');
return;
}
this.newEditCourseCategory('newEqualLevelCategory', 'equal', 'new')
this.newEditCourseCategory('newEqualLevelCategory', 'equal', 'new');
}}>
新增一级分类
</Button>
......@@ -559,8 +581,8 @@ class CourseCategoryManage extends Component {
</div>
{operateCourseCategoryModal}
</div>
)
);
}
}
export default CourseCategoryManage
export default CourseCategoryManage;
src/modules/teach-tool/components/CourseCategorySiderTree.jsx
/*
* @Author: yuananting
* @Date: 2021-02-22 10:59:43
* @LastEditors: yuananting
* @LastEditTime: 2021-04-13 13:55:37
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-15 11:20:48
* @Description: 助学工具-侧边课程分类树
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Input, Button, Tree } from "antd";
import "./CourseCategorySiderTree.less";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import Bus from "@/core/bus";
import React, { Component } from 'react';
import { Input, Button, Tree } from 'antd';
import './CourseCategorySiderTree.less';
import User from '@/common/js/user';
import AidToolService from '@/domains/aid-tool-domain/AidToolService';
import Bus from '@/core/bus';
const { Search } = Input;
const { DirectoryTree } = Tree;
......@@ -20,31 +20,25 @@ class CourseCategorySiderTree extends Component {
constructor(props) {
super(props);
this.state = {
selectedKeys: ["QUESTION_INDEX", "PAPER_INDEX"].includes(props.fromModule)
? [getParameterByName("categoryId") || "null"]
: ["null"],
selectedKeys: ['QUESTION_INDEX', 'PAPER_INDEX'].includes(props.fromModule) ? [getParameterByName('categoryId') || 'null'] : ['null'],
treeData: props.treeData || [],
autoExpandParent: false,
};
}
componentDidMount() {
this.queryCategoryTree("init");
Bus.bind("queryCategoryTree", this.queryCategoryTree);
this.queryCategoryTree('init');
Bus.bind('queryCategoryTree', this.queryCategoryTree);
}
componentWillUnmount() {
Bus.unbind("queryCategoryTree", this.queryCategoryTree);
Bus.unbind('queryCategoryTree', this.queryCategoryTree);
}
// 查询分类树
queryCategoryTree = (type = "init", categoryName) => {
queryCategoryTree = (type = 'init', categoryName) => {
let query = {
bizType: ["QUESTION_INDEX", "QUESTION_MODAL"].includes(
this.props.fromModule
)
? "QUESTION"
: "PAPER",
bizType: ['QUESTION_INDEX', 'QUESTION_MODAL'].includes(this.props.fromModule) ? 'QUESTION' : 'PAPER',
categoryName,
count: true,
source: 0,
......@@ -53,7 +47,7 @@ class CourseCategorySiderTree extends Component {
};
AidToolService.queryCategoryTree(query).then((res) => {
const { categoryList = [], noCategoryCnt = 0 } = res.result;
let str = "未分类";
let str = '未分类';
if (categoryName) {
this.setState({ autoExpandParent: true });
if (str.indexOf(categoryName) < 0) {
......@@ -64,15 +58,15 @@ class CourseCategorySiderTree extends Component {
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
if (type === "init") {
if (type === 'init') {
this.setState({ expandedKeys: nodeId });
}
} else {
const defaultNode = {
id: "null",
categoryName: "未分类",
id: 'null',
categoryName: '未分类',
categoryCount: noCategoryCnt,
parentId: "0",
parentId: '0',
categoryLevel: 0,
};
categoryList.unshift(defaultNode);
......@@ -83,24 +77,24 @@ class CourseCategorySiderTree extends Component {
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
if (type === "init") {
if (type === 'init') {
this.setState({ expandedKeys: nodeId });
}
}
} else {
this.setState({ autoExpandParent: false });
const defaultNode = {
id: "null",
categoryName: "未分类",
id: 'null',
categoryName: '未分类',
categoryCount: noCategoryCnt,
parentId: "0",
parentId: '0',
categoryLevel: 0,
};
categoryList.unshift(defaultNode);
this.setState({
treeData: this.renderTreeNodes(categoryList, categoryName),
});
if (type === "init") {
if (type === 'init') {
this.setState({ expandedKeys: [] });
}
}
......@@ -126,12 +120,12 @@ class CourseCategorySiderTree extends Component {
// 树状选中事件
onSelect = (selectedKeys) => {
this.setState({ selectedKeys }, () => {
if (this.props.fromModule === "QUESTION_INDEX") {
Bus.trigger("queryQuestionPageList", selectedKeys[0]);
} else if (this.props.fromModule === "QUESTION_MODAL") {
Bus.trigger("queryQuestionPageListWithContent", selectedKeys[0]);
if (this.props.fromModule === 'QUESTION_INDEX') {
Bus.trigger('queryQuestionPageList', selectedKeys[0]);
} else if (this.props.fromModule === 'QUESTION_MODAL') {
Bus.trigger('queryQuestionPageListWithContent', selectedKeys[0]);
} else {
Bus.trigger("queryPaperPageList", selectedKeys[0], 0);
Bus.trigger('queryPaperPageList', selectedKeys[0], 0);
}
});
};
......@@ -144,39 +138,35 @@ class CourseCategorySiderTree extends Component {
item.title =
!value || (value && item.categoryName.indexOf(value) > -1) ? (
<span>
{item.categoryName}（{item.categoryCount}）
{item.categoryName}
{item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
</span>
) : (
<span style={{ opacity: 0.5 }}>
{item.categoryName}（{item.categoryCount}）
{item.categoryName}
{item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
</span>
);
item.icon =
item.categoryName === "未分类" ? (
item.categoryName === '未分类' ? (
<img
style={{
width: "24px",
height: "24px",
opacity:
!value || (value && item.categoryName.indexOf(value) > -1)
? 1
: 0.5,
width: '24px',
height: '24px',
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
src="https://image.xiaomaiketang.com/xm/defaultCategory.png"
alt=""
src='https://image.xiaomaiketang.com/xm/defaultCategory.png'
alt=''
/>
) : (
<img
style={{
width: "24px",
height: "24px",
opacity:
!value || (value && item.categoryName.indexOf(value) > -1)
? 1
: 0.5,
width: '24px',
height: '24px',
opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
}}
src="https://image.xiaomaiketang.com/xm/hasCategory.png"
alt=""
src='https://image.xiaomaiketang.com/xm/hasCategory.png'
alt=''
/>
);
if (item.sonCategoryList) {
......@@ -190,46 +180,34 @@ class CourseCategorySiderTree extends Component {
};
render() {
const {
treeData,
expandedKeys,
selectedKeys,
autoExpandParent,
} = this.state;
const { treeData, expandedKeys, selectedKeys, autoExpandParent } = this.state;
return (
<div className="category-tree-sider">
{["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule) && (
<div className="sider-title">
{this.props.fromModule === "QUESTION_INDEX"
? "题目分类"
: "试卷分类"}
</div>
<div className='category-tree-sider'>
{['QUESTION_INDEX', 'PAPER_INDEX'].includes(this.props.fromModule) && (
<div className='sider-title'>{this.props.fromModule === 'QUESTION_INDEX' ? '题目分类' : '试卷分类'}</div>
)}
<Search
className="sider-search"
placeholder="搜索名称分类"
className='sider-search'
placeholder='搜索名称分类'
onSearch={(value) => {
this.queryCategoryTree("init", value);
this.queryCategoryTree('init', value);
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
{["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule) &&
User.getUserRole() !== "CloudLecturer" &&
this.props.type !== "modal-select" && (
<div className="sider-btn">
<Button
onClick={() => {
window.RCHistory.push({
pathname: "/course-category-manage?from=aid",
});
}}
>
分类管理
</Button>
</div>
)}
<div className="sider-tree">
{['QUESTION_INDEX', 'PAPER_INDEX'].includes(this.props.fromModule) && User.getUserRole() !== 'CloudLecturer' && this.props.type !== 'modal-select' && (
<div className='sider-btn'>
<Button
onClick={() => {
window.RCHistory.push({
pathname: '/course-category-manage?from=aid',
});
}}>
分类管理
</Button>
</div>
)}
<div className='sider-tree'>
<DirectoryTree
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
......
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