fix:修改样式

87bc40cb · chenshu · 7cf4fa0f · 87bc40cb · 87bc40cb · 87bc40cb
Commit 87bc40cb authored Jun 08, 2021 by chenshu
15 changed files
--- a/src/components/XMTable.jsx
+++ b/src/components/XMTable.jsx
 import React, { useEffect, useState } from 'react';
 import { Empty, ConfigProvider, Table } from 'antd';
+import Lottie from 'react-lottie';
+import * as noData from '../modules/lottie/noData/data.json';
 function XMTable(props) {
  const [empty, setEmpty] = useState(props.renderEmpty || {});
@@ -12,9 +14,25 @@ function XMTable(props) {
  // 自定义表格空状态
  function customizeRenderEmpty() {
+    const defaultOptions = {
+      loop: true,
+      autoplay: true,
+      animationData: empty.image || noData,
+      rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice'
+      }
+    }
    return (
      <Empty
-        image={empty.image || Empty.PRESENTED_IMAGE_SIMPLE}
+        image={<div style={{ marginTop: 24 }}>
+        <Lottie
+          options={defaultOptions}
+          height={150}
+          width={150}
+          isStopped={false}
+          isPaused={false}
+        />
+      </div>}
        imageStyle={{
          height: 150,
        }}

--- a/src/modules/college-manage/modal/ChooseMembersModal.jsx
+++ b/src/modules/college-manage/modal/ChooseMembersModal.jsx
@@ -6,9 +6,11 @@
 import React from 'react';
 import { Modal, Input, Table, message, Tooltip, Empty } from 'antd';
+import { XMTable } from '@/components';
 import Service from '@/common/js/service';
 import User from '@/common/js/user'
 import SetEmployeeModal from "./SetEmployeeModal";
+import search from '../../lottie/search/data.json';
 import './ChooseMembersModal.less';
 import _ from 'underscore';
@@ -311,19 +313,18 @@ class ChooseMembersModal extends React.Component {
                  enterButton={<span className="icon iconfont">&#xe832;</span>}
                />
                <div className='container-left-body-table'>
-                  <Table 
+                  <XMTable 
                    rowKey={(record) => record.enterpriseVisibleUserId}
                    dataSource={allUserList}
                    columns={this.selectedColumnsLeft()}               
                    pagination={false}
                    scroll={{ y: 290}}
-                    // bordered={true}
+                    renderEmpty={{
-                    locale={{
+                      image: searchKey ? search : '',
-                      emptyText: <div>
+                      description: <div>
-                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={false} />
+                        <div style={{ color: '#333' }}>暂无数据</div>
-                        <div style={{ color: '#333', marginTop: -70 }}>暂无数据</div>
                        <div style={{ color: '#666', padding: '0 32px', fontSize: '12px' }}>需要先将员工添加到企微可见范围后，员工才会出现在这里</div>
-                      </div>,
+                      </div>
                    }}
                    size={'small'}
                    rowSelection={{

--- a/src/modules/course-manage/modal/ManageCoursewareModal.jsx
+++ b/src/modules/course-manage/modal/ManageCoursewareModal.jsx
 /*
 * @Author: 吴文洁 
 * @Date: 2020-06-22 14:26:37 
- * @Last Modified by: 吴文洁
+ * @Last Modified by: chenshu
- * @Last Modified time: 2020-07-23 09:33:02
+ * @Last Modified time: 2021-06-08 18:18:46
 */
 import React, { useEffect, useState } from 'react';
 import { Modal, Button, Table, Progress, message, Tooltip, Spin, Popconfirm } from 'antd';
@@ -40,7 +40,7 @@ class ManageCoursewareModal extends React.Component {
  componentDidMount() {
    this.getCoursewareList();
    var animation = Lottie.loadAnimation({
-      path: "https://image.xiaomaiketang.com/xm/MQwp2aJaxf.json",
+      path: "https://image.xiaomaiketang.com/xm/SDBkP7mbJX.json",
      name: "test",
      renderer: "svg",
      loop: true,

--- a/src/modules/knowledge-base/components/KnowledgeBaseList.jsx
+++ b/src/modules/knowledge-base/components/KnowledgeBaseList.jsx
@@ -10,7 +10,6 @@
 import React from "react";
 import { Modal, message, Tooltip, Switch, Dropdown, Button } from "antd";
 import { Route, withRouter } from "react-router-dom";
-import Lottie from 'react-lottie';
 import { PageControl, XMTable } from "@/components";
 import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass";
 import { appId, shareUrl, LIVE_SHARE } from "@/domains/course-domain/constants";
@@ -18,7 +17,6 @@ import ScanFileModal from "../../resource-disk/modal/ScanFileModal";
 import WatchData from "./WatchData";
 import KnowledgeAPI from "@/data-source/knowledge/request-api";
 import ENUM from "../ENUM.js";
-import * as nodata from '../../lottie/nodata/data.json';
 import "./KnowledgeBaseList.less";
 const DEFAULT_SIZE_UNIT = 1000 * 1000 // 将B转换成M
@@ -494,14 +492,6 @@ class KnowledgeBaseList extends React.Component {
      preserveSelectedRowKeys: true,
      onChange: onSelectChange,
    }
-    const defaultOptions = {
-      loop: true,
-      autoplay: true,
-      animationData: nodata,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    }
    return (
      <div className="knowledge-base-list">
        <XMTable
@@ -515,15 +505,6 @@ class KnowledgeBaseList extends React.Component {
          bordered
          className="knowledge-list-table"
          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>
          }}
        />

--- a/src/modules/lottie/addData/data.json
+++ b/src/modules/lottie/addData/data.json
--- a/src/modules/lottie/addData/demo/data.html
+++ b/src/modules/lottie/addData/demo/data.html
--- a/src/modules/lottie/search/data.json
+++ b/src/modules/lottie/search/data.json
--- a/src/modules/lottie/search/demo/data.html
+++ b/src/modules/lottie/search/demo/data.html
--- a/src/modules/resource-disk/components/FolderList.jsx
+++ b/src/modules/resource-disk/components/FolderList.jsx
 /*
 * @Author: 吴文洁 
 * @Date: 2020-06-09 10:47:51 
- * @Last Modified by: 吴文洁
+ * @Last Modified by: chenshu
- * @Last Modified time: 2020-07-23 09:33:09
+ * @Last Modified time: 2021-06-08 18:10:25
 * @Description: 文件夹列表
 */
@@ -11,12 +11,13 @@ import { Table, Menu, Dropdown, Modal, message,Tooltip } from 'antd';
 import _ from 'underscore';
 // import * as lodash from 'lodash';
 import { PageControl, LottieIcon } from 'xiaomai-b-components';
+import { XMTable } from '@/components';
 import Service from '@/common/js/service';
 import { formatDate } from '@/domains/basic-domain/utils';
 import { FILE_TYPE_ICON_MAP, SUPPORT_FILE_TYPE_MAP, DEFAULT_SIZE_UNIT } from '@/domains/resource-disk/constants';
 import { getFileTypeByName } from '@/domains/resource-disk/utils';
+import addData from '../../lottie/addData/data.json';
+import search from '../../lottie/search/data.json';
 import UploadProgressModal from '@/bu-components/UploadProgressModal';
 import SelectPrepareFileModal from '@/bu-components/SelectPrepareFileModal';
 import CopyFileModal from '@/bu-components/CopyFileModal';
@@ -693,9 +694,11 @@ class FolderList extends React.Component {
          </When>
          <Otherwise>
-            <LottieIcon
+            <XMTable
-              title={
+              className="add-empty"
-                <Choose>
+              renderEmpty={{
+                image: !showResultPage ? addData : search,
+                description: <Choose>
                  <When condition={!showResultPage}>
                    <input
                      multiple
@@ -709,7 +712,7 @@ class FolderList extends React.Component {
                    {
                      <Choose>
                        <When condition={hasManagementAuthority}>
-                          <div>你还没有上传文件，点击
+                          <div className="lottie-icon-title">你还没有上传文件，点击
                            <Tooltip title="支持文件类型：ppt、word、excel、pdf、jpg、mp3、mp4">
                              <span
                                className="upload-btn"
@@ -729,7 +732,7 @@ class FolderList extends React.Component {
                    <div className="desc">搜索无结果</div>
                  </Otherwise>
                </Choose>
-              }
+              }}
            />
          </Otherwise>
        </Choose>

--- a/src/modules/resource-disk/index.less
+++ b/src/modules/resource-disk/index.less
@@ -215,14 +215,12 @@
        cursor: pointer;
      }
-      .lottie-icon {
+      .lottie-icon-title {
-        &__title {
+        color: #999;
-          color: #999;
+        .upload-btn {
-          .upload-btn {
+          color: #5A8EFA;
-            color: #5A8EFA;
+          margin: 0 4px;
-            margin: 0 4px;
+          cursor: pointer;
-            cursor: pointer;
-          }
        }
      }
      // td.ant-table-column-sort{
@@ -230,6 +228,11 @@
      // }
    }
  }
+  .add-empty {
+    .ant-table-cell {
+      border: none;
+    }
+  }
 }

--- a/src/modules/root/ErrorCollege.jsx
+++ b/src/modules/root/ErrorCollege.jsx
 import User from '@/common/js/user';
 import React from 'react';
+import Lottie from "lottie-web";
 import Header from './Header'
 import Service from "@/common/js/service";
 import './ErrorCollege.less';
@@ -14,6 +15,14 @@ export default class ErrorCollege extends React.Component {
  componentDidMount() {
    this.getStorePermission();
+    var animation = Lottie.loadAnimation({
+      path: "https://image.xiaomaiketang.com/xm/AhcJZHdMZf.json",
+      name: "test",
+      renderer: "svg",
+      loop: true,
+      autoplay: true,
+      container: document.getElementById("lottie-box")
+    });
  }
  getStorePermission() {
@@ -39,7 +48,7 @@ export default class ErrorCollege extends React.Component {
      <div className="error-college-page">
        <Header id="error" handleMenuType={this.handleMenuType} menuType={menuType} />
        <div className="error-college-box">
-          <img src="https://image.xiaomaiketang.com/xm/MQRaYkbr6J.png" className="error-college-image" />
+          <div id="lottie-box" className="error-college-image"></div>
          <span className="error-college-tip">{User.getStoreName()}已停用</span>
        </div>
      </div>

--- a/src/modules/teach-tool/examination-manager/Index.tsx
+++ b/src/modules/teach-tool/examination-manager/Index.tsx
 import React, { useState, useRef, useEffect, useContext } from 'react'
 import { Input, Select, DatePicker, Tooltip, Button, Table, Dropdown, Menu, Modal } from 'antd';
-import Lottie from 'react-lottie';
 import TeacherSelect from '@/modules/common/TeacherSelect';
 import { Route, withRouter } from 'react-router-dom';
 import Service from "@/common/js/service";
@@ -12,7 +11,6 @@ import { XMContext } from "@/store/context";
 import ExamShareModal from './ExamShareModal'
 import DataAnalysic from './DataAnalysic'
 import PreviewModal from './PreviewModal'
-import * as nodata from '../../lottie/nodata/data.json';
 import './index.less'
 const { RangePicker } = DatePicker;
 const { Search } = Input;
@@ -310,15 +308,7 @@ function ExaminationManager(props: any) {
        _query.order = (orderEnum as any)[sorter.field][sorter.order] || 'EXAM_START_TIME_DESC'
        setQuery(_query)
    }
-    const defaultOptions = {
-        loop: true,
-        autoplay: true,
-        animationData: nodata,
-        rendererSettings: {
-          preserveAspectRatio: 'xMidYMid slice'
-        }
-      }
    return <div className="page examination-manager">
        <div className="content-header">考试</div>
        <div className="box content-body">
@@ -423,15 +413,6 @@ function ExaminationManager(props: any) {
                    pagination={false}
                    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>
                    }}
                >

--- a/src/modules/teach-tool/paper-manage/OperatePaper.jsx
+++ b/src/modules/teach-tool/paper-manage/OperatePaper.jsx
@@ -20,7 +20,6 @@ import {
  Modal,
  Spin,
 } from "antd";
-import Lottie from 'react-lottie';
 import { PlusOutlined } from "@ant-design/icons";
 import { XMTable } from "@/components";
 import ShowTips from "@/components/ShowTips";
@@ -709,14 +708,6 @@ class OperatePaper extends Component {
      totalScore,
    } = formData;
    const { match } = this.props;
-    const defaultOptions = {
-      loop: true,
-      autoplay: true,
-      animationData: paperEmpty,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    }
    return (
      <div>
        <div className="page operate-paper-page">
@@ -826,15 +817,7 @@ class OperatePaper extends Component {
                  pagination={false}
                  onChange={this.sortByQuestionType}
                  renderEmpty={{
-                    image: <div style={{ marginTop: 24 }}>
+                    image: paperEmpty,
-                      <Lottie
-                        options={defaultOptions}
-                        height={150}
-                        width={150}
-                        isStopped={false}
-                        isPaused={false}
-                      />
-                    </div>,
                    description: <span style={{ display: 'block', paddingBottom: 24 }}>请在左上角添加题目</span>
                  }}
                />

--- a/src/modules/teach-tool/paper-manage/components/PaperList.jsx
+++ b/src/modules/teach-tool/paper-manage/components/PaperList.jsx
@@ -19,7 +19,6 @@ import {
  ConfigProvider,
  Empty,
 } from "antd";
-import Lottie from 'react-lottie';
 import { PageControl, XMTable } from "@/components";
 import "./PaperList.less";
 import { Route, withRouter } from "react-router-dom";
@@ -31,7 +30,6 @@ import Service from "@/common/js/service";
 import _ from "underscore";
 import PaperPreviewModal from "../modal/PreviewPaperModal";
 import MoveModal from '../../modal/MoveModal';
-import * as nodata from '../../../lottie/nodata/data.json';
 import Bus from "@/core/bus";
 const { Search } = Input;
@@ -547,14 +545,6 @@ class PaperList extends Component {
      User.getUserRole()
    );
    const { match } = this.props;
-    const defaultOptions = {
-      loop: true,
-      autoplay: true,
-      animationData: nodata,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    }
    return (
      <div className={"paper-list " + this.props.type}>
        <div className="paper-list-filter">
@@ -635,15 +625,6 @@ class PaperList extends Component {
              bordered
              loading={loading}
              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>
              }}
            />
@@ -660,16 +641,7 @@ class PaperList extends Component {
              pagination={false}
              bordered
              renderEmpty={{
-                image: <div style={{ marginTop: 24 }}>
+                description: <span style={{ display: 'block', paddingBottom: 24 }}>还没有试卷</span>
-                  <Lottie
-                    options={defaultOptions}
-                    height={150}
-                    width={150}
-                    isStopped={false}
-                    isPaused={false}
-                  />
-                </div>,
-                description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>
              }}
            />
          )}

--- a/src/modules/teach-tool/question-manage/components/QuestionList.jsx
+++ b/src/modules/teach-tool/question-manage/components/QuestionList.jsx
@@ -23,7 +23,6 @@ import {
  Dropdown,
  DatePicker,
 } from "antd";
-import Lottie from 'react-lottie';
 import _ from "underscore";
 import { Route, withRouter } from "react-router-dom";
 import { DownOutlined } from '@ant-design/icons';
@@ -37,7 +36,6 @@ import Bus from "@/core/bus";
 import moment from 'moment';
 import Service from "@/common/js/service";
 import MoveModal from '../../modal/MoveModal';
-import * as nodata from '../../../lottie/nodata/data.json';
 import "./QuestionList.less";
 const { RangePicker } = DatePicker;
@@ -594,14 +592,6 @@ class QuestionList extends Component {
      preserveSelectedRowKeys: true,
      onChange: this.onSelectChange,
    };
-    const defaultOptions = {
-      loop: true,
-      autoplay: true,
-      animationData: nodata,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    }
    return (
      <div className="question-list">
        <div className="question-list-filter">
@@ -733,15 +723,6 @@ class QuestionList extends Component {
            onChange={this.handleChangeTable}
            rowSelection={rowSelection}
            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>还没有题目</span>
                {["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
                  categoryId && (