Skip to content

X
xiaomai-cloud-class-web
Commit 93a24d95 by yuananting
Options

style:助学工具模块弹窗样式调整

parent b7abc31c
Showing with 82 additions and 60 deletions
src/modules/teach-tool/components/CourseCategorySiderTree.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-22 10:59:43
* @LastEditors: yuananting
* @LastEditTime: 2021-07-13 11:54:21
* @LastEditTime: 2021-07-27 13:37:07
* @Description: 助学工具-侧边课程分类树
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -184,7 +184,7 @@ class CourseCategorySiderTree extends Component {
return (
<div className='category-tree-sider'>
{['QUESTION_INDEX', 'PAPER_INDEX'].includes(this.props.fromModule) && (
{this.props.type !== 'modal-select' && (
<div className='sider-title'>{this.props.fromModule === 'QUESTION_INDEX' ? '题目分类' : '试卷分类'}</div>
)}
<Search
......@@ -195,7 +195,7 @@ class CourseCategorySiderTree extends Component {
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
{['QUESTION_INDEX', 'PAPER_INDEX'].includes(this.props.fromModule) && User.getUserRole() !== 'CloudLecturer' && this.props.type !== 'modal-select' && (
{['QUESTION_INDEX', 'PAPER'].includes(this.props.fromModule) && User.getUserRole() !== 'CloudLecturer' && this.props.type !== 'modal-select' && (
<div className='sider-btn'>
<Button
onClick={() => {
......@@ -207,7 +207,7 @@ class CourseCategorySiderTree extends Component {
</Button>
</div>
)}
<div className='sider-tree'>
<div className={`sider-tree ${this.props.type === 'modal-select' ? 'modal-sider-tree' : 'page-sider-tree'}`}>
<DirectoryTree
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
......
src/modules/teach-tool/components/CourseCategorySiderTree.less
......@@ -16,10 +16,16 @@
margin-bottom: 16px;
}
.modal-sider-tree {
height: calc(60vh - 61px);
}
.page-sider-tree {
height: calc(100vh - 300px);
}
.sider-tree {
width: 244px;
overflow: scroll;
height: calc(100vh - 300px);
.empty-tree-tip {
text-align: center;
margin-top: 100%;
......@@ -33,6 +39,7 @@
font-weight: 400;
color: #666666;
width: 234px;
overflow-x: scroll;
.anticon {
color: #999999;
}
......
src/modules/teach-tool/examination-manager/SelectPaperModal.tsx
/*
* @Author: yuananting
* @Date: 2021-06-16 10:14:37
* @LastEditors: yuananting
* @LastEditTime: 2021-07-27 14:04:03
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useRef, useEffect, useContext } from 'react'
import { message, Modal } from 'antd';
import { withRouter } from 'react-router-dom';
......@@ -12,14 +20,14 @@ function SelectPaperModal(props: any) {
useEffect(() => {
itemRef.current = item
console.log(item, 'khjkhjkhjk')
}, [item])
return <Modal
maskClosable={false}
width={900}
width={1080}
title="选择试卷"
visible={true}
centered={true}
onOk={() => {
props.onSelect(itemRef.current);
props.close();
......@@ -27,9 +35,7 @@ function SelectPaperModal(props: any) {
}
onCancel={() => { props.close() }}
>
<div style={{ maxHeight: 500 }}>
<PaperContent paperId={item.paperId} onSelect={(item: any) => { setItem(item) }} type='modal-select'></PaperContent>
</div>
<PaperContent paperId={item.paperId} onSelect={(item: any) => { setItem(item) }} type='modal-select'></PaperContent>
</Modal >
}
......
src/modules/teach-tool/paper-manage/PaperContent.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-27 14:55:14
* @LastEditors: yuananting
* @LastEditTime: 2021-04-07 10:25:44
* @LastEditTime: 2021-07-27 13:33:51
* @Description: 助学工具-试卷主页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -19,14 +19,14 @@ class PaperContent extends Component {
render() {
return (
<div className={this.props.type == "modal-select"? "paper-content-page paper-content-modal":"paper-content-page"} >
<div className="paper-content-page" >
<div
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider" >
<CourseCategorySiderTree
type={this.props.type}
fromModule="PAPER_INDEX"
fromModule="PAPER"
/>
</div>
</div>
......
src/modules/teach-tool/paper-manage/PaperContent.less
.paper-content-page {
display: flex;
&.paper-content-modal{
max-height: 500px;
.sider,.content{
max-height: 100%;
overflow: auto;
}
.content{
height: auto;
overflow: auto;
}
}
.sider {
min-width: 244px;
}
.content {
width: 100%;
margin-left: 24px;
height: calc(100vh - 160px);
.modal-paper-list {
.ant-table-wrapper {
overflow: scroll;
height: calc(60vh - 109px);
border: 1px solid #e8e8e8;
}
}
.page-paper-list {
height: calc(100vh - 260px);
overflow: scroll;
}
.ant-table-column-sorters {
padding: 0;
}
.ant-table-tbody > tr > td {
border: none;
}
}
}
\ No newline at end of file
}
src/modules/teach-tool/paper-manage/components/PaperList.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-07-13 15:16:52
* @LastEditTime: 2021-07-27 13:59:01
* @Description: 助学工具-题库-试卷列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -616,7 +616,7 @@ class PaperList extends Component {
</div>
)}
<div className="paper-list-content">
<div className={`paper-list-content ${this.props.type == "modal-select" ? "modal-paper-list" : "page-paper-list"}`}>
{this.props.type !== "modal-select" ? (
<XMTable
rowKey={(record) => record.paperId}
......@@ -642,7 +642,6 @@ class PaperList extends Component {
rowSelection={rowSelection}
columns={this.parseColumns()}
pagination={false}
bordered
renderEmpty={{
image: college,
description: <span style={{ display: 'block', paddingBottom: 24 }}>还没有试卷</span>
......@@ -656,7 +655,6 @@ class PaperList extends Component {
current={current - 1}
pageSize={size}
total={total}
size={this.props.type == "modal-select" ? "small" : "middle"}
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.setState({ query: _query }, () =>
......
src/modules/teach-tool/paper-manage/components/PaperList.less
......@@ -2,6 +2,7 @@
.select-box {
display: flex;
align-items: center;
margin-bottom: 12px;
.select-container {
margin-right: 24px;
.con {
......@@ -74,9 +75,6 @@
}
.paper-list-content {
position: relative;
margin-top: 12px;
height: calc(100vh - 260px);
overflow: scroll;
.empty-list-tip {
color: #2966ff;
cursor: pointer;
......
src/modules/teach-tool/paper-manage/components/SelectQuestionList.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-05-30 18:17:05
* @LastEditTime: 2021-07-27 14:00:12
* @Description: 助学工具-新建试卷-选择题目列表
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -420,19 +420,18 @@ class SelectQuestionList extends Component {
)}
</div>
<div className="select-question-content">
<XMTable
renderEmpty={{
image: college,
description: '还没有题目'
}}
rowSelection={rowSelection}
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
onChange={this.handleChangeTable}
bordered
/>
<XMTable
renderEmpty={{
image: college,
description: '还没有题目'
}}
rowSelection={rowSelection}
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
onChange={this.handleChangeTable}
/>
<div className="box-footer">
<PageControl
current={current - 1}
......
src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-29 10:52:26
* @LastEditors: yuananting
* @LastEditTime: 2021-06-07 14:45:02
* @LastEditTime: 2021-07-27 13:53:14
* @Description: 助学工具-试卷-新建选择题目弹窗
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -40,6 +40,7 @@ class SelectQuestionModal extends Component {
title="选择题目"
visible={true}
width={1080}
centered={true}
onOk={() => {
this.props.setSelectedQuestion(
this.listRef.current.state.selectQuestionKeys.map((item, index) => {
......@@ -60,15 +61,15 @@ class SelectQuestionModal extends Component {
}}
onCancel={this.props.close}
>
<div className="box content-body" style={{maxHeight:500}}>
<div className="box content-body">
<div
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px",overflowY:'auto',overflowX:'hidden'}}
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider">
<CourseCategorySiderTree fromModule="QUESTION_MODAL" />
<CourseCategorySiderTree fromModule="QUESTION_MODAL" type="modal-select" />
</div>
</div>
<div className="content" style={{height:'auto',overflowY:'auto'}}>
<div className="content">
<SelectQuestionList ref={this.listRef} />
</div>
</div>
......
src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.less
.select-question-modal {
.content-body {
display: flex;
height: calc(~'100% - 48px');
.sider {
min-width: 244px;
}
.content {
width: 100%;
margin-left: 24px;
height: calc(100vh - 160px);
.select-question-list {
.select-question-content {
.ant-table-wrapper {
overflow: scroll;
height: calc(60vh - 159px);
border: 1px solid #E8E8E8;
}
}
}
}
}
.ant-table-column-sorters {
padding: 0;
}
}
.select-question-modal.ant-modal {
max-height: 70% !important;
.ant-table-tbody > tr > td {
border: none;
}
}
\ No newline at end of file
src/modules/teach-tool/question-manage/Index.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-21 17:51:01
* @LastEditors: yuananting
* @LastEditTime: 2021-04-07 10:45:07
* @LastEditTime: 2021-07-27 13:11:51
* @Description: 助学工具-题库
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -26,7 +26,7 @@ class QuestionIndex extends Component {
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider">
<CourseCategorySiderTree fromModule="QUESTION_INDEX" />
<CourseCategorySiderTree fromModule="QUESTION_INDEX" type="" />
</div>
</div>
<div className="content">
......
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