Skip to content

X
xiaomai-cloud-class-web
Commit c34dccef by chenshu
Options

fix:修改样式

parent 02af41ef
Showing with 198 additions and 126 deletions
src/modules/knowledge-base/components/KnowledgeBaseList.jsx
...@@ -18,7 +18,7 @@ import ScanFileModal from "../../resource-disk/modal/ScanFileModal"; ...@@ -18,7 +18,7 @@ import ScanFileModal from "../../resource-disk/modal/ScanFileModal";
import WatchData from "./WatchData"; import WatchData from "./WatchData";
import KnowledgeAPI from "@/data-source/knowledge/request-api"; import KnowledgeAPI from "@/data-source/knowledge/request-api";
import ENUM from "../ENUM.js"; import ENUM from "../ENUM.js";
import * as studentData from '../../lottie/student/data.json'; import * as nodata from '../../lottie/nodata/data.json';
import "./KnowledgeBaseList.less"; import "./KnowledgeBaseList.less";
const DEFAULT_SIZE_UNIT = 1000 * 1000; // 将B转换成M const DEFAULT_SIZE_UNIT = 1000 * 1000; // 将B转换成M
...@@ -566,7 +566,7 @@ class KnowledgeBaseList extends React.Component { ...@@ -566,7 +566,7 @@ class KnowledgeBaseList extends React.Component {
const defaultOptions = { const defaultOptions = {
loop: true, loop: true,
autoplay: true, autoplay: true,
animationData: studentData, animationData: nodata,
rendererSettings: { rendererSettings: {
preserveAspectRatio: 'xMidYMid slice' preserveAspectRatio: 'xMidYMid slice'
} }
......
src/modules/knowledge-base/components/KnowledgeBaseOpt.less
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
justify-content: space-between; justify-content: space-between;
.tip{ .tip{
font-size:14px; font-size:14px;
color:#FF9D14; color:#2966FF;
margin-right:8px; margin-right:8px;
} }
.text{ .text{
......
src/modules/lottie/paperEmpty/demo/data.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/teach-tool/components/CourseCategorySiderTree.less
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
white-space: nowrap; white-space: nowrap;
} }
.ant-tree-node-content-wrapper.ant-tree-node-selected { .ant-tree-node-content-wrapper.ant-tree-node-selected {
color: #666666; color: #2966FF;
} }
} }
.ant-tree-treenode-selected:hover::before, .ant-tree-treenode-selected:hover::before,
......
src/modules/teach-tool/examination-manager/Index.tsx
import React, { useState, useRef, useEffect, useContext } from 'react' import React, { useState, useRef, useEffect, useContext } from 'react'
import { Input, Select, DatePicker, Tooltip, Button, Table, Dropdown, Menu, Modal } from 'antd'; import { Input, Select, DatePicker, Tooltip, Button, Table, Dropdown, Menu, Modal } from 'antd';
import Lottie from 'react-lottie';
import TeacherSelect from '@/modules/common/TeacherSelect'; import TeacherSelect from '@/modules/common/TeacherSelect';
import { Route, withRouter } from 'react-router-dom'; import { Route, withRouter } from 'react-router-dom';
import Service from "@/common/js/service"; import Service from "@/common/js/service";
import moment from 'moment'; import moment from 'moment';
import { PageControl } from "@/components"; import { PageControl, XMTable } from "@/components";
import AddExam from './AddExam'; import AddExam from './AddExam';
import User from "@/common/js/user"; import User from "@/common/js/user";
import { XMContext } from "@/store/context"; import { XMContext } from "@/store/context";
import ExamShareModal from './ExamShareModal' import ExamShareModal from './ExamShareModal'
import DataAnalysic from './DataAnalysic' import DataAnalysic from './DataAnalysic'
import PreviewModal from './PreviewModal' import PreviewModal from './PreviewModal'
import * as nodata from '../../lottie/nodata/data.json';
import './index.less' import './index.less'
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const { Search } = Input; const { Search } = Input;
...@@ -307,6 +309,14 @@ function ExaminationManager(props: any) { ...@@ -307,6 +309,14 @@ function ExaminationManager(props: any) {
setQuery(_query) setQuery(_query)
} }
const defaultOptions = {
loop: true,
autoplay: true,
animationData: nodata,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
}
return <div className="page examination-manager"> return <div className="page examination-manager">
<div className="content-header">考试</div> <div className="content-header">考试</div>
<div className="box content-body"> <div className="box content-body">
...@@ -401,7 +411,7 @@ function ExaminationManager(props: any) { ...@@ -401,7 +411,7 @@ function ExaminationManager(props: any) {
<div className="content"> <div className="content">
<Table <XMTable
bordered bordered
size="small" size="small"
columns={columns} columns={columns}
...@@ -410,8 +420,20 @@ function ExaminationManager(props: any) { ...@@ -410,8 +420,20 @@ function ExaminationManager(props: any) {
onChange={onChange} onChange={onChange}
pagination={false} pagination={false}
style={{ margin: '0px 0 16px' }} style={{ margin: '0px 0 16px' }}
renderEmpty={{
image: <div style={{ marginTop: 24 }}>
<Lottie
options={defaultOptions}
height={150}
width={150}
isStopped={false}
isPaused={false}
/>
</div>,
description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>
}}
> >
</Table> </XMTable>
{total > 0 && {total > 0 &&
<PageControl <PageControl
size="small" size="small"
......
src/modules/teach-tool/paper-manage/OperatePaper.jsx
...@@ -20,7 +20,9 @@ import { ...@@ -20,7 +20,9 @@ import {
Modal, Modal,
Spin, Spin,
} from "antd"; } from "antd";
import Lottie from 'react-lottie';
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from "@ant-design/icons";
import { XMTable } from "@/components";
import ShowTips from "@/components/ShowTips"; import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
import "./OperatePaper.less"; import "./OperatePaper.less";
...@@ -30,6 +32,7 @@ import User from "@/common/js/user"; ...@@ -30,6 +32,7 @@ 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";
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
import * as paperEmpty from '../../lottie/paperEmpty/data.json';
import AddExam from "@/modules/teach-tool/examination-manager/AddExam"; import AddExam from "@/modules/teach-tool/examination-manager/AddExam";
const questionTypeEnum = { const questionTypeEnum = {
...@@ -148,19 +151,6 @@ class OperatePaper extends Component { ...@@ -148,19 +151,6 @@ class OperatePaper extends Component {
); );
}; };
// 自定义表格空状态
customizeRenderEmpty = () => {
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={"请在左上角添加题目"}
></Empty>
);
};
setFormData = (list, sorter) => { setFormData = (list, sorter) => {
const { formData } = this.state; const { formData } = this.state;
const _selectQuestionList = [...list]; const _selectQuestionList = [...list];
...@@ -718,6 +708,14 @@ class OperatePaper extends Component { ...@@ -718,6 +708,14 @@ class OperatePaper extends Component {
totalScore, totalScore,
} = formData; } = formData;
const { match } = this.props; const { match } = this.props;
const defaultOptions = {
loop: true,
autoplay: true,
animationData: paperEmpty,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
}
return ( return (
<div> <div>
<div className="page operate-paper-page"> <div className="page operate-paper-page">
...@@ -819,16 +817,26 @@ class OperatePaper extends Component { ...@@ -819,16 +817,26 @@ class OperatePaper extends Component {
</div> </div>
)} )}
<ConfigProvider renderEmpty={this.customizeRenderEmpty}> <XMTable
<Table className="table-style"
className="table-style" scroll={{ y: 350 }}
scroll={{ y: 350 }} columns={this.parseColumns()}
columns={this.parseColumns()} dataSource={selectQuestionList}
dataSource={selectQuestionList} pagination={false}
pagination={false} onChange={this.sortByQuestionType}
onChange={this.sortByQuestionType} renderEmpty={{
/> image: <div style={{ marginTop: 24 }}>
</ConfigProvider> <Lottie
options={defaultOptions}
height={150}
width={150}
isStopped={false}
isPaused={false}
/>
</div>,
description: <span style={{ display: 'block', paddingBottom: 24 }}>请在左上角添加题目</span>
}}
/>
</Form> </Form>
</div> </div>
<div className="footer"> <div className="footer">
......
src/modules/teach-tool/paper-manage/OperatePaper.less
.operate-paper-page { .operate-paper-page {
.box { .box {
margin-bottom: 66px !important; margin-bottom: 52px !important;
.ant-form-item {
margin-bottom: 24px !important;
}
.table-style { .table-style {
border: 1px solid #f0f0f0 !important; border: 1px solid #f0f0f0 !important;
} }
...@@ -12,7 +15,6 @@ ...@@ -12,7 +15,6 @@
margin-left: 12px; margin-left: 12px;
} }
.choose-btn { .choose-btn {
margin-top: 8px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.paper-info-tip { .paper-info-tip {
...@@ -58,6 +60,25 @@ ...@@ -58,6 +60,25 @@
margin-left: 10px; margin-left: 10px;
} }
} }
.ant-table tbody tr {
&:nth-child(even) {
background: #fff;
}
&:nth-child(odd) {
background: #fafafa;
}
&:last-child {
td {
border-bottom: none!important;
}
}
}
.ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan]) {
&::before {
width: 0!important;
}
}
} }
.aid-tool-list { .aid-tool-list {
......
src/modules/teach-tool/paper-manage/components/PaperList.jsx
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import { import {
Table,
Dropdown, Dropdown,
Row, Row,
Input, Input,
...@@ -20,7 +19,8 @@ import { ...@@ -20,7 +19,8 @@ import {
ConfigProvider, ConfigProvider,
Empty, Empty,
} from "antd"; } from "antd";
import { PageControl } from "@/components"; import Lottie from 'react-lottie';
import { PageControl, XMTable } from "@/components";
import "./PaperList.less"; import "./PaperList.less";
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
import OperatePaper from "@/modules/teach-tool/paper-manage/OperatePaper"; import OperatePaper from "@/modules/teach-tool/paper-manage/OperatePaper";
...@@ -31,6 +31,7 @@ import Service from "@/common/js/service"; ...@@ -31,6 +31,7 @@ import Service from "@/common/js/service";
import _ from "underscore"; import _ from "underscore";
import PaperPreviewModal from "../modal/PreviewPaperModal"; import PaperPreviewModal from "../modal/PreviewPaperModal";
import MoveModal from '../../modal/MoveModal'; import MoveModal from '../../modal/MoveModal';
import * as nodata from '../../../lottie/nodata/data.json';
import Bus from "@/core/bus"; import Bus from "@/core/bus";
const { Search } = Input; const { Search } = Input;
...@@ -249,19 +250,6 @@ class PaperList extends Component { ...@@ -249,19 +250,6 @@ class PaperList extends Component {
} }
}; };
// 自定义表格空状态
customizeRenderEmpty = () => {
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={"还没有试卷"}
></Empty>
);
};
// 表头设置 // 表头设置
parseColumns = () => { parseColumns = () => {
const columns = [ const columns = [
...@@ -305,7 +293,7 @@ class PaperList extends Component { ...@@ -305,7 +293,7 @@ class PaperList extends Component {
}, },
}, },
{ {
title: "试卷数量", title: "题目数量",
key: "questionCnt", key: "questionCnt",
dataIndex: "questionCnt", dataIndex: "questionCnt",
width: this.props.type !== "modal-select" ? "12%" : "20%", width: this.props.type !== "modal-select" ? "12%" : "20%",
...@@ -559,6 +547,14 @@ class PaperList extends Component { ...@@ -559,6 +547,14 @@ class PaperList extends Component {
User.getUserRole() User.getUserRole()
); );
const { match } = this.props; const { match } = this.props;
const defaultOptions = {
loop: true,
autoplay: true,
animationData: nodata,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
}
return ( return (
<div className={"paper-list " + this.props.type}> <div className={"paper-list " + this.props.type}>
<div className="paper-list-filter"> <div className="paper-list-filter">
...@@ -629,32 +625,54 @@ class PaperList extends Component { ...@@ -629,32 +625,54 @@ class PaperList extends Component {
)} )}
<div className="paper-list-content"> <div className="paper-list-content">
<ConfigProvider renderEmpty={this.customizeRenderEmpty}> {this.props.type !== "modal-select" ? (
{this.props.type !== "modal-select" ? ( <XMTable
<Table rowKey={(record) => record.paperId}
rowKey={(record) => record.paperId} rowSelection={paperRowSelection}
rowSelection={paperRowSelection} dataSource={dataSource}
dataSource={dataSource} columns={this.parseColumns()}
columns={this.parseColumns()} pagination={false}
pagination={false} bordered
bordered loading={loading}
loading={loading} renderEmpty={{
/> image: <div style={{ marginTop: 24 }}>
) : ( <Lottie
<Table options={defaultOptions}
rowKey={(record) => record.paperId} height={150}
dataSource={dataSource} width={150}
size={this.props.type == "modal-select" ? "small" : "middle"} isStopped={false}
rowKey={(item) => { isPaused={false}
return item.paperId; />
}} </div>,
rowSelection={rowSelection} description: <span style={{ display: 'block', paddingBottom: 24 }}>还没有试卷</span>
columns={this.parseColumns()} }}
pagination={false} />
bordered ) : (
/> <XMTable
)} rowKey={(record) => record.paperId}
</ConfigProvider> dataSource={dataSource}
size={this.props.type == "modal-select" ? "small" : "middle"}
rowKey={(item) => {
return item.paperId;
}}
rowSelection={rowSelection}
columns={this.parseColumns()}
pagination={false}
bordered
renderEmpty={{
image: <div style={{ marginTop: 24 }}>
<Lottie
options={defaultOptions}
height={150}
width={150}
isStopped={false}
isPaused={false}
/>
</div>,
description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>
}}
/>
)}
{total > 0 && ( {total > 0 && (
<div className="box-footer"> <div className="box-footer">
......
src/modules/teach-tool/paper-manage/components/PaperList.less
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
justify-content: space-between; justify-content: space-between;
.tip{ .tip{
font-size:14px; font-size:14px;
color:#FF9D14; color:#2966FF;
margin-right:8px; margin-right:8px;
} }
.text{ .text{
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
} }
.paper-list-content { .paper-list-content {
position: relative; position: relative;
margin-top: 16px; margin-top: 12px;
.empty-list-tip { .empty-list-tip {
color: #ffb714; color: #ffb714;
cursor: pointer; cursor: pointer;
......
src/modules/teach-tool/question-manage/components/QuestionList.jsx
...@@ -23,10 +23,11 @@ import { ...@@ -23,10 +23,11 @@ import {
Dropdown, Dropdown,
DatePicker, DatePicker,
} from "antd"; } from "antd";
import Lottie from 'react-lottie';
import _ from "underscore"; import _ from "underscore";
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
import { DownOutlined } from '@ant-design/icons'; import { DownOutlined } from '@ant-design/icons';
import { PageControl } from "@/components"; import { PageControl, XMTable } from "@/components";
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 PreviewQuestionModal from "../modal/PreviewQuestionModal"; import PreviewQuestionModal from "../modal/PreviewQuestionModal";
...@@ -36,6 +37,7 @@ import Bus from "@/core/bus"; ...@@ -36,6 +37,7 @@ import Bus from "@/core/bus";
import moment from 'moment'; import moment from 'moment';
import Service from "@/common/js/service"; import Service from "@/common/js/service";
import MoveModal from '../../modal/MoveModal'; import MoveModal from '../../modal/MoveModal';
import * as nodata from '../../../lottie/nodata/data.json';
import "./QuestionList.less"; import "./QuestionList.less";
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
...@@ -193,39 +195,6 @@ class QuestionList extends Component { ...@@ -193,39 +195,6 @@ class QuestionList extends Component {
}); });
}; };
// 自定义表格空状态
customizeRenderEmpty = () => {
const { categoryId } = this.state.query;
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={
<span>
<span>还没有题目</span>
{["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
categoryId && (
<span>
，快去
<span
className="empty-list-tip"
onClick={() => {
this.handleCreateQuestion();
}}
>
新建一个
</span>
吧！
</span>
)}
</span>
}
></Empty>
);
};
// 排序 // 排序
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter; const { columnKey, order } = sorter;
...@@ -625,6 +594,14 @@ class QuestionList extends Component { ...@@ -625,6 +594,14 @@ class QuestionList extends Component {
preserveSelectedRowKeys: true, preserveSelectedRowKeys: true,
onChange: this.onSelectChange, onChange: this.onSelectChange,
}; };
const defaultOptions = {
loop: true,
autoplay: true,
animationData: nodata,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
}
return ( return (
<div className="question-list"> <div className="question-list">
<div className="question-list-filter"> <div className="question-list-filter">
...@@ -711,7 +688,7 @@ class QuestionList extends Component { ...@@ -711,7 +688,7 @@ class QuestionList extends Component {
</div> </div>
{["CloudManager", "StoreManager"].includes(User.getUserRole()) && {["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
( (
<Space size={16}> <Space size={8}>
{_.isEmpty(selectedRowKeys) ? {_.isEmpty(selectedRowKeys) ?
(!!categoryId && [ (!!categoryId && [
<Button key="1" type="primary" onClick={this.handleCreateQuestion}> <Button key="1" type="primary" onClick={this.handleCreateQuestion}>
...@@ -732,14 +709,14 @@ class QuestionList extends Component { ...@@ -732,14 +709,14 @@ class QuestionList extends Component {
</div> </div>
} }
{!!categoryId ? ( {!!categoryId ? (
<Dropdown className="ml8" overlay={this.setMoreOperationOption()}> <Dropdown overlay={this.setMoreOperationOption()}>
<Button id="more_operate"> <Button id="more_operate">
更多操作 更多操作
<DownOutlined /> <DownOutlined />
</Button> </Button>
</Dropdown> </Dropdown>
) : ( ) : (
<Space size={16}> <Space size={8}>
<Button onClick={() => this.batchMove()}>批量移动</Button> <Button onClick={() => this.batchMove()}>批量移动</Button>
<Button onClick={() => this.batchDelete()}>批量删除</Button> <Button onClick={() => this.batchDelete()}>批量删除</Button>
</Space> </Space>
...@@ -747,17 +724,43 @@ class QuestionList extends Component { ...@@ -747,17 +724,43 @@ class QuestionList extends Component {
</Space> </Space>
)} )}
<div className="question-list-content"> <div className="question-list-content">
<ConfigProvider renderEmpty={this.customizeRenderEmpty}> <XMTable
<Table rowKey={(record) => record.id}
rowKey={(record) => record.id} dataSource={dataSource}
dataSource={dataSource} columns={this.parseColumns()}
columns={this.parseColumns()} pagination={false}
pagination={false} bordered
bordered onChange={this.handleChangeTable}
onChange={this.handleChangeTable} rowSelection={rowSelection}
rowSelection={rowSelection} renderEmpty={{
/> image: <div style={{ marginTop: 24 }}>
</ConfigProvider> <Lottie
options={defaultOptions}
height={150}
width={150}
isStopped={false}
isPaused={false}
/>
</div>,
description: <span style={{ display: 'block', paddingBottom: 24 }}><span>还没有题目</span>
{["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
categoryId && (
<span>
，快去
<span
className="empty-list-tip"
onClick={() => {
this.handleCreateQuestion();
}}
>
新建一个
</span>
吧！
</span>
)}
</span>
}}
/>
{total > 0 && ( {total > 0 && (
<div className="box-footer"> <div className="box-footer">
<PageControl <PageControl
......
src/modules/teach-tool/question-manage/components/QuestionList.less
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
justify-content: space-between; justify-content: space-between;
.tip { .tip {
font-size: 14px; font-size: 14px;
color: #FF9D14; color: #2966FF;
margin-right: 8px; margin-right: 8px;
} }
.text { .text {
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
} }
.question-list-content { .question-list-content {
position: relative; position: relative;
margin-top: 16px; margin-top: 12px;
.empty-list-tip { .empty-list-tip {
color: #ffb714; color: #ffb714;
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