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