Skip to content

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

feat:初始化

parent 9aff52ac
Showing with 420 additions and 18 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 { ...@@ -20,6 +20,7 @@ import {
ConfigProvider, ConfigProvider,
Empty, Empty,
} from "antd"; } from "antd";
import { DownOutlined } from '@ant-design/icons';
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import "./PaperList.less"; import "./PaperList.less";
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
...@@ -370,6 +371,101 @@ class PaperList extends Component { ...@@ -370,6 +371,101 @@ class PaperList extends Component {
this.props.onSelect(selectedRows[0] || {}); 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() { render() {
const { const {
dataSource = [], dataSource = [],
...@@ -419,16 +515,34 @@ class PaperList extends Component { ...@@ -419,16 +515,34 @@ class PaperList extends Component {
</Row> </Row>
</div> </div>
{this.props.type !== "modal-select" && isPermiss && categoryId && ( {this.props.type !== "modal-select" && isPermiss && categoryId && (
<Button [_.isEmpty(selectedRowKeys) ?
type="primary" <Button
onClick={() => { type="primary"
window.RCHistory.push({ onClick={() => {
pathname: `${match.url}/paper-operate-page?type=new&categoryId=${categoryId}`, window.RCHistory.push({
}); pathname: `${match.url}/paper-operate-page?type=new&categoryId=${categoryId}`,
}} });
> }}
新建试卷 >
</Button> 新建试卷
</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"> <div className="paper-list-content">
......
src/modules/teach-tool/question-manage/components/QuestionList.jsx
...@@ -19,17 +19,23 @@ import { ...@@ -19,17 +19,23 @@ import {
Button, Button,
Modal, Modal,
message, message,
Menu,
Dropdown,
} from "antd"; } from "antd";
import _ from "underscore";
import { Route, withRouter } from "react-router-dom";
import { DownOutlined } from '@ant-design/icons';
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import "./QuestionList.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 _ from "underscore";
import PreviewQuestionModal from "../modal/PreviewQuestionModal"; import PreviewQuestionModal from "../modal/PreviewQuestionModal";
import BatchImportQuestionModal from "../modal/BatchImportQuestionModal"; import BatchImportQuestionModal from "../modal/BatchImportQuestionModal";
import { Route, withRouter } from "react-router-dom";
import OperateQuestion from "../OperateQuestion"; import OperateQuestion from "../OperateQuestion";
import Bus from "@/core/bus"; 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; const { Search } = Input;
...@@ -82,10 +88,12 @@ class QuestionList extends Component { ...@@ -82,10 +88,12 @@ class QuestionList extends Component {
dataSource: [], // 题库列表 dataSource: [], // 题库列表
previewQuestionModal: null, // 题目预览模态框 previewQuestionModal: null, // 题目预览模态框
batchImportQuestionModal: null, // 批量导入模态框 batchImportQuestionModal: null, // 批量导入模态框
selectedRowKeys: [],
}; };
} }
componentDidMount() { componentDidMount() {
this.queryQuestionPageList(); this.queryQuestionPageList();
this.queryCategoryTree();
Bus.bind("queryQuestionPageList", (selectedCategoryId) => { Bus.bind("queryQuestionPageList", (selectedCategoryId) => {
selectedCategoryId = selectedCategoryId =
selectedCategoryId === "null" ? null : selectedCategoryId; selectedCategoryId === "null" ? null : selectedCategoryId;
...@@ -97,6 +105,35 @@ class QuestionList extends Component { ...@@ -97,6 +105,35 @@ class QuestionList extends Component {
Bus.unbind("queryQuestionPageList", this.queryQuestionPageList); 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) => { InitSearch = (categoryId) => {
const _query = { const _query = {
...@@ -428,6 +465,113 @@ class QuestionList extends Component { ...@@ -428,6 +465,113 @@ class QuestionList extends Component {
this.setState({ batchImportQuestionModal: m }); 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() { render() {
const { const {
dataSource = [], dataSource = [],
...@@ -435,9 +579,16 @@ class QuestionList extends Component { ...@@ -435,9 +579,16 @@ class QuestionList extends Component {
query, query,
previewQuestionModal, previewQuestionModal,
batchImportQuestionModal, batchImportQuestionModal,
selectedRowKeys,
openMoveModal,
questionData,
} = this.state; } = this.state;
const { current, size, categoryId, questionName, questionType } = query; const { current, size, categoryId, questionName, questionType } = query;
const { match } = this.props; const { match } = this.props;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
return ( return (
<div className="question-list"> <div className="question-list">
<div className="question-list-filter"> <div className="question-list-filter">
...@@ -482,7 +633,7 @@ class QuestionList extends Component { ...@@ -482,7 +633,7 @@ class QuestionList extends Component {
> >
{_.map(questionTypeList, (item, index) => { {_.map(questionTypeList, (item, index) => {
return ( return (
<Select.Option value={item.value} key={item.key}> <Select.Option value={item.value} key={item.value}>
{item.label} {item.label}
</Select.Option> </Select.Option>
); );
...@@ -506,10 +657,31 @@ class QuestionList extends Component { ...@@ -506,10 +657,31 @@ class QuestionList extends Component {
{["CloudManager", "StoreManager"].includes(User.getUserRole()) && {["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
categoryId && ( categoryId && (
<Space size={16}> <Space size={16}>
<Button type="primary" onClick={this.handleCreateQuestion}> {_.isEmpty(selectedRowKeys) ?
新建题目 [
</Button> <Button key="1" type="primary" onClick={this.handleCreateQuestion}>
<Button onClick={this.batchImportQuestion}>批量导入</Button> 新建题目
</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>
</Dropdown>
</Space> </Space>
)} )}
<div className="question-list-content"> <div className="question-list-content">
...@@ -521,6 +693,7 @@ class QuestionList extends Component { ...@@ -521,6 +693,7 @@ class QuestionList extends Component {
pagination={false} pagination={false}
bordered bordered
onChange={this.handleChangeTable} onChange={this.handleChangeTable}
rowSelection={rowSelection}
/> />
</ConfigProvider> </ConfigProvider>
{total > 0 && ( {total > 0 && (
...@@ -542,6 +715,19 @@ class QuestionList extends Component { ...@@ -542,6 +715,19 @@ class QuestionList extends Component {
)} )}
{previewQuestionModal} {previewQuestionModal}
{batchImportQuestionModal} {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> </div>
<Route <Route
path={`${match.url}/question-operate-page`} path={`${match.url}/question-operate-page`}
......
src/modules/teach-tool/question-manage/components/QuestionList.less
...@@ -37,6 +37,31 @@ ...@@ -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 { .data-icon {
cursor: pointer; 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