Skip to content

X
xiaomai-cloud-class-web
Commit 985b02a5 by chenshu
Options

feat:初始化

parent 9aff52ac
Showing with 408 additions and 6 deletions
src/modules/teach-tool/modal/MoveModal.jsx 0 → 100644
import React from 'react';
import { Modal, TreeSelect } from 'antd';
import './MoveModal.less';
class MoveModal extends React.Component {
constructor(props) {
super(props);
this.state = {
categoryId: undefined,
};
}
handleChangeCatalogList = (value, label) => {
this.setState({ categoryId: value, categoryName: label[0] });
};
render() {
const { visible, title, onCancel, onOk, data, length } = this.props;
const { categoryId } = this.state;
return (
<Modal
title={`移动${title}`}
visible={visible}
onCancel={onCancel}
maskClosable={false}
className="common-move-modal"
onOk={() => onOk(categoryId)}
>
<div className="tip">
<span className="icon iconfont">&#xe6f2;</span>
<span className="text">已选择<span style={{ color: '#2966FF' }}>{length}</span>个{title}，移动后，原有分类将移除此{title}。</span>
</div>
<div className="move-item">
<span className="label">选择分类：</span>
<TreeSelect
showSearch
treeNodeFilterProp="title"
style={{ width: 240 }}
dropdownStyle={{ maxHeight: 220 }}
treeData={data}
placeholder="请选择分类"
allowClear
value={categoryId}
onChange={(value, label) => {
this.handleChangeCatalogList(value, label);
}}
/>
</div>
</Modal>
)
}
}
export default MoveModal;
\ No newline at end of file
src/modules/teach-tool/modal/MoveModal.less 0 → 100644
.common-move-modal {
.tip {
display: flex;
align-items: center;
margin-bottom: 16px;
.iconfont {
font-size: 14px;
color: #BFBFBF;
margin-right: 8px;
}
.text {
color: #999;
font-size: 14px;
}
}
.move-item {
.label {
color: #333;
}
}
}
\ No newline at end of file
src/modules/teach-tool/paper-manage/components/PaperList.jsx
......@@ -20,6 +20,7 @@ import {
ConfigProvider,
Empty,
} from "antd";
import { DownOutlined } from '@ant-design/icons';
import { PageControl } from "@/components";
import "./PaperList.less";
import { Route, withRouter } from "react-router-dom";
......@@ -370,6 +371,101 @@ class PaperList extends Component {
this.props.onSelect(selectedRows[0] || {});
};
/**
* 设置【更多操作】选项
*/
setMoreOperationOption() {
return (
<Menu>
<Menu.Item key="2">
<div
key="import"
onClick={() => {
this.batchMove();
}}
>
批量移动
</div>
</Menu.Item>
<Menu.Item key="1">
<div
key="import"
onClick={() => {
this.batchDelete();
}}
>
批量删除
</div>
</Menu.Item>
</Menu>
);
}
batchMove = () => {
const { selectedRowKeys } = this.state;
if (_.isEmpty(selectedRowKeys)) {
message.warning('请先选择要移动的题目');
return null;
}
this.setState({ openMoveModal: true });
}
batchMoveRemote = (categoryId) => {
const { selectedRowKeys } = this.state;
const data = {
categoryId,
id: selectedRowKeys,
source: 0,
tenantId: User.getStoreId(),
userId: User.getUserId(),
};
Service.Hades('public/hades/batchMoveQuestion', data).then((res) => {
if (res.success) {
message.success('移动成功');
this.queryQuestionPageList();
} else {
message.error('移动失败');
}
}).catch(() => {
message.error('移动失败');
})
}
batchDelete = () => {
const { selectedRowKeys } = this.state;
if (_.isEmpty(selectedRowKeys)) {
message.warning('请先选择要删除的题目');
return null;
}
Modal.confirm({
title: "确定要删除题目吗？",
content: "删除后，不可恢复。",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
cancelText: "取消",
onOk: () => {
const data = {
id: selectedRowKeys,
source: 0,
tenantId: User.getStoreId(),
userId: User.getUserId(),
};
Service.Hades('public/hades/batchDeleteQuestion', data).then((res) => {
if (res.success) {
message.success('删除成功');
this.queryQuestionPageList();
} else {
message.error('删除失败');
}
}).catch(() => {
message.error('删除失败');
})
},
})
}
render() {
const {
dataSource = [],
......@@ -419,6 +515,7 @@ class PaperList extends Component {
</Row>
</div>
{this.props.type !== "modal-select" && isPermiss && categoryId && (
[_.isEmpty(selectedRowKeys) ?
<Button
type="primary"
onClick={() => {
......@@ -429,6 +526,23 @@ class PaperList extends Component {
>
新建试卷
</Button>
: <div className="select-container">
<span className="con">
<div>
<span className="icon iconfont tip">&#xe6f2;</span>
<span className="text">已选择{selectedRowKeys.length}项</span>
</div>
<div>
<span className="clear" onClick={this.clearSelect}>清空</span>
</div>
</span>
</div>,
<Dropdown className="ml8" overlay={this.setMoreOperationOption()}>
<Button id="more_operate">
更多操作
<DownOutlined />
</Button>
</Dropdown>]
)}
<div className="paper-list-content">
......
src/modules/teach-tool/question-manage/components/QuestionList.jsx
......@@ -19,17 +19,23 @@ import {
Button,
Modal,
message,
Menu,
Dropdown,
} from "antd";
import _ from "underscore";
import { Route, withRouter } from "react-router-dom";
import { DownOutlined } from '@ant-design/icons';
import { PageControl } from "@/components";
import "./QuestionList.less";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import _ from "underscore";
import PreviewQuestionModal from "../modal/PreviewQuestionModal";
import BatchImportQuestionModal from "../modal/BatchImportQuestionModal";
import { Route, withRouter } from "react-router-dom";
import OperateQuestion from "../OperateQuestion";
import Bus from "@/core/bus";
import Service from "@/common/js/service";
import MoveModal from '../../modal/MoveModal';
import "./QuestionList.less";
import { data } from "jquery";
const { Search } = Input;
......@@ -82,10 +88,12 @@ class QuestionList extends Component {
dataSource: [], // 题库列表
previewQuestionModal: null, // 题目预览模态框
batchImportQuestionModal: null, // 批量导入模态框
selectedRowKeys: [],
};
}
componentDidMount() {
this.queryQuestionPageList();
this.queryCategoryTree();
Bus.bind("queryQuestionPageList", (selectedCategoryId) => {
selectedCategoryId =
selectedCategoryId === "null" ? null : selectedCategoryId;
......@@ -97,6 +105,35 @@ class QuestionList extends Component {
Bus.unbind("queryQuestionPageList", this.queryQuestionPageList);
}
// 查询分类树
queryCategoryTree = () => {
let query = {
bizType: 'QUESTION',
count: true,
source: 0,
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
AidToolService.queryCategoryTree(query).then((res) => {
const { categoryList = [] } = res.result;
let list = this.renderTreeNodes(categoryList);
this.setState({ questionData: list });
});
};
renderTreeNodes = (data) => {
let newTreeData = data.map((item) => {
item.title = item.categoryName;
item.value = item.id;
item.key = item.id;
if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList);
}
return item;
});
return newTreeData;
};
// 初始化列表查询
InitSearch = (categoryId) => {
const _query = {
......@@ -428,6 +465,113 @@ class QuestionList extends Component {
this.setState({ batchImportQuestionModal: m });
};
onSelectChange = (selectedRowKeys) => {
if (selectedRowKeys.length > 50) {
message.warning('最多只能选择50个题目');
return null;
}
this.setState({ selectedRowKeys });
};
/**
* 设置【更多操作】选项
*/
setMoreOperationOption() {
return (
<Menu>
<Menu.Item key="2">
<div
key="import"
onClick={() => {
this.batchMove();
}}
>
批量移动
</div>
</Menu.Item>
<Menu.Item key="1">
<div
key="import"
onClick={() => {
this.batchDelete();
}}
>
批量删除
</div>
</Menu.Item>
</Menu>
);
}
batchMove = () => {
const { selectedRowKeys } = this.state;
if (_.isEmpty(selectedRowKeys)) {
message.warning('请先选择要移动的题目');
return null;
}
this.setState({ openMoveModal: true });
}
batchMoveRemote = (categoryId) => {
const { selectedRowKeys } = this.state;
const data = {
categoryId,
id: selectedRowKeys,
source: 0,
tenantId: User.getStoreId(),
userId: User.getUserId(),
};
Service.Hades('public/hades/batchMoveQuestion', data).then((res) => {
if (res.success) {
message.success('移动成功');
this.queryQuestionPageList();
} else {
message.error('移动失败');
}
}).catch(() => {
message.error('移动失败');
})
}
batchDelete = () => {
const { selectedRowKeys } = this.state;
if (_.isEmpty(selectedRowKeys)) {
message.warning('请先选择要删除的题目');
return null;
}
Modal.confirm({
title: "确定要删除题目吗？",
content: "删除后，不可恢复。",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
cancelText: "取消",
onOk: () => {
const data = {
id: selectedRowKeys,
source: 0,
tenantId: User.getStoreId(),
userId: User.getUserId(),
};
Service.Hades('public/hades/batchDeleteQuestion', data).then((res) => {
if (res.success) {
message.success('删除成功');
this.queryQuestionPageList();
} else {
message.error('删除失败');
}
}).catch(() => {
message.error('删除失败');
})
},
})
}
clearSelect = () => {
this.setState({ selectedRowKeys: [] });
}
render() {
const {
dataSource = [],
......@@ -435,9 +579,16 @@ class QuestionList extends Component {
query,
previewQuestionModal,
batchImportQuestionModal,
selectedRowKeys,
openMoveModal,
questionData,
} = this.state;
const { current, size, categoryId, questionName, questionType } = query;
const { match } = this.props;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
return (
<div className="question-list">
<div className="question-list-filter">
......@@ -482,7 +633,7 @@ class QuestionList extends Component {
>
{_.map(questionTypeList, (item, index) => {
return (
<Select.Option value={item.value} key={item.key}>
<Select.Option value={item.value} key={item.value}>
{item.label}
</Select.Option>
);
......@@ -506,10 +657,31 @@ class QuestionList extends Component {
{["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
categoryId && (
<Space size={16}>
<Button type="primary" onClick={this.handleCreateQuestion}>
{_.isEmpty(selectedRowKeys) ?
[
<Button key="1" type="primary" onClick={this.handleCreateQuestion}>
新建题目
</Button>,
<Button key="2" onClick={this.batchImportQuestion}>批量导入</Button>
]
: <div className="select-container">
<span className="con">
<div>
<span className="icon iconfont tip">&#xe6f2;</span>
<span className="text">已选择{selectedRowKeys.length}项</span>
</div>
<div>
<span className="clear" onClick={this.clearSelect}>清空</span>
</div>
</span>
</div>
}
<Dropdown className="ml8" overlay={this.setMoreOperationOption()}>
<Button id="more_operate">
更多操作
<DownOutlined />
</Button>
<Button onClick={this.batchImportQuestion}>批量导入</Button>
</Dropdown>
</Space>
)}
<div className="question-list-content">
......@@ -521,6 +693,7 @@ class QuestionList extends Component {
pagination={false}
bordered
onChange={this.handleChangeTable}
rowSelection={rowSelection}
/>
</ConfigProvider>
{total > 0 && (
......@@ -542,6 +715,19 @@ class QuestionList extends Component {
)}
{previewQuestionModal}
{batchImportQuestionModal}
{openMoveModal &&
<MoveModal
visible={openMoveModal}
title="题目"
data={questionData}
length={selectedRowKeys.length}
onCancel={() => this.setState({ openMoveModal: false })}
onOk={(categoryId) => {
this.batchMoveRemote(categoryId);
this.setState({ openMoveModal: false });
}}
/>
}
</div>
<Route
path={`${match.url}/question-operate-page`}
......
src/modules/teach-tool/question-manage/components/QuestionList.less
......@@ -37,6 +37,31 @@
}
}
}
.select-container{
.con{
background: #FFF4DD;
border-radius: 4px;
padding:6px 16px;
display: inline-flex;
align-items: center;
justify-content: space-between;
.tip{
font-size:14px;
color:#FF9D14;
margin-right:8px;
}
.text{
font-size:14px;
color:#666;
margin-right:30px;
}
.clear{
color:#5289FA;
font-size:14px;
}
}
}
.data-icon {
cursor: pointer;
}
......
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