feat:培训计划模板空状态默认图替换

src/modules/plan-manage/components/EmployeeShareData.jsx

 import React from 'react';
-import { withRouter } from "react-router-dom";
-import {Table, Modal,Input,message} from 'antd';
-import { PageControl } from "@/components";
-import PlanService from '@/domains/plan-domain/planService'
+import { withRouter } from 'react-router-dom';
+import { Input } from 'antd';
+import { PageControl, XMTable } from '@/components';
+import college from '@/common/lottie/college';
+import PlanService from '@/domains/plan-domain/planService';
 import User from '@/common/js/user';
 import Bus from '@/core/bus';
 import './EmployeeShareData.less';
@@ -10,103 +11,129 @@ import './EmployeeShareData.less';
 const { Search } = Input;
 const UserRole = {
   Store_Manager: {
-    text: "学院管理员"
+    text: '学院管理员',
   },
   Cloud_Manager: {
-    text:"管理员"
+    text: '管理员',
   },
   Cloud_Operator: {
-    text:'运营师'
+    text: '运营师',
   },
   Cloud_Lecture: {
-    text:"讲师"
+    text: '讲师',
   },
 };
 
 class EmployeeShareData extends React.Component {
   constructor(props) {
     super(props);
-    const id = getParameterByName("id");
+    const id = getParameterByName('id');
     this.state = {
       id,
-      dataSource:[],
-      size:10,
+      dataSource: [],
+      size: 10,
       query: {
         current: 1,
       },
-      totalCount:0,
-    }
+      totalCount: 0,
+    };
   }
-  componentDidMount(){
+  componentDidMount() {
     this.handleFetchDataList();
   }
-  handleFetchDataList = ()=>{
-    const { query ,size,id}  = this.state;
-    const params ={
+  handleFetchDataList = () => {
+    const { query, size, id } = this.state;
+    const params = {
       ...query,
       size,
-      planId:id,
-      storeId:User.getStoreId(),
-    }
+      planId: id,
+      storeId: User.getStoreId(),
+    };
     PlanService.getPlanUserRecordPage(params).then((res) => {
-      const { result = {} } = res ;
+      const { result = {} } = res;
       const { records = [], total = 0 } = result;
       this.setState({
         dataSource: records,
-          totalCount: Number(total)
+        totalCount: Number(total),
       });
     });
-  }
+  };
 
   onShowSizeChange = (current, size) => {
     if (current == size) {
-      return
+      return;
     }
-    this.setState({
-      size
-    },()=>{this.handleFetchDataList()})
+    this.setState(
+      {
+        size,
+      },
+      () => {
+        this.handleFetchDataList();
       }
-  handleChangeTable = (pagination, filters, sorter)=> {
+    );
+  };
+  handleChangeTable = (pagination, filters, sorter) => {
     const { columnKey, order } = sorter;
     const { query } = this.state;
     let _columnKey;
     let _order;
-    if (columnKey === 'learnNum' && order === 'ascend') { _columnKey="LEARN_NUM"; _order = 'SORT_ASC'; }
-    if (columnKey === 'learnNum' && order === 'descend') { _columnKey="LEARN_NUM"; _order = 'SORT_DESC'; }
+    if (columnKey === 'learnNum' && order === 'ascend') {
+      _columnKey = 'LEARN_NUM';
+      _order = 'SORT_ASC';
+    }
+    if (columnKey === 'learnNum' && order === 'descend') {
+      _columnKey = 'LEARN_NUM';
+      _order = 'SORT_DESC';
+    }
 
-    if (columnKey === 'learnFinishNum' && order === 'ascend') { _columnKey="FINISH_NUM"; _order = 'SORT_ASC'; }
-    if (columnKey === 'learnFinishNum' && order === 'descend') { _columnKey="FINISH_NUM"; _order = 'SORT_DESC'; }
+    if (columnKey === 'learnFinishNum' && order === 'ascend') {
+      _columnKey = 'FINISH_NUM';
+      _order = 'SORT_ASC';
+    }
+    if (columnKey === 'learnFinishNum' && order === 'descend') {
+      _columnKey = 'FINISH_NUM';
+      _order = 'SORT_DESC';
+    }
 
-    if (columnKey === 'learnNoFinishNum' && order === 'ascend') { _columnKey="NOT_NUM"; _order = 'SORT_ASC'; }
-    if (columnKey === 'learnNoFinishNum' && order === 'descend') { _columnKey="NOT_NUM"; _order = 'SORT_DESC'; }
+    if (columnKey === 'learnNoFinishNum' && order === 'ascend') {
+      _columnKey = 'NOT_NUM';
+      _order = 'SORT_ASC';
+    }
+    if (columnKey === 'learnNoFinishNum' && order === 'descend') {
+      _columnKey = 'NOT_NUM';
+      _order = 'SORT_DESC';
+    }
 
     const _query = {
       ...query,
-      sortMap:{}
+      sortMap: {},
     };
-    _query.sortMap[_columnKey]=_order;
-    this.setState({
-      query:_query
-    },()=>this.handleFetchDataList())
-  }
-  handleChangNickname = (value)=>{
+    _query.sortMap[_columnKey] = _order;
+    this.setState(
+      {
+        query: _query,
+      },
+      () => this.handleFetchDataList()
+    );
+  };
+  handleChangNickname = (value) => {
     const isPhone = (value || '').match(/^\d+$/);
     const { query } = this.state;
-      if(isPhone){
+    if (isPhone) {
       query.userPhone = value;
       query.userName = null;
-      }else{
+    } else {
       query.userName = value;
       query.userPhone = null;
     }
     query.current = 1;
     this.setState({
-        query
-      })
-  }
-  watchDataView = (record)=>{
-    Bus.trigger('watchDataView',record);
-  } 
+      query,
+    });
+  };
+  watchDataView = (record) => {
+    Bus.trigger('watchDataView', record);
+  };
   // 请求表头
   parselumns = () => {
     const columns = [
@@ -115,24 +142,16 @@ class EmployeeShareData extends React.Component {
         key: 'storeUserName',
         dataIndex: 'storeUserName',
         render: (val, record) => {
-          return (
-            <div>
-              {val}
-            </div>
-          )
-        }
+          return <div>{val}</div>;
+        },
       },
       {
         title: '角色',
         key: 'roleEnum',
         dataIndex: 'roleEnum',
         render: (val, record) => {
-          return (
-            <div>
-              {UserRole[record.roleEnum].text}
-            </div>
-          )
-        }
+          return <div>{UserRole[record.roleEnum].text}</div>;
+        },
       },
       //产品暂时性隐藏
       // {
@@ -151,28 +170,20 @@ class EmployeeShareData extends React.Component {
         title: '最近分享成功时间',
         key: 'recentlyForwardTime',
         dataIndex: 'recentlyForwardTime',
-        width:240,
+        width: 240,
         render: (val, record) => {
-          return (
-            <div>
-              {formatDate('YYYY-MM-DD H:i', val)}
-            </div>
-          )
-        }
+          return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
+        },
       },
       {
         title: '学习人数',
         key: 'learnNum',
         dataIndex: 'learnNum',
-        width:110,
-        sorter:true,
+        width: 110,
+        sorter: true,
         render: (val, record) => {
-          return (
-            <div className="learn-num">
-              {val}
-            </div>
-          )
-        }
+          return <div className='learn-num'>{val}</div>;
+        },
       },
       // {
       //   title: '已学完',
@@ -208,24 +219,39 @@ class EmployeeShareData extends React.Component {
         dataIndex: 'operate',
         render: (val, record) => {
           return (
-            <span className="operate-item" onClick={()=>this.watchDataView(record)}>数据详情</span>
-          )
-        }
-      }
-
+            <span className='operate-item' onClick={() => this.watchDataView(record)}>
+              数据详情
+            </span>
+          );
+        },
+      },
     ];
     return columns;
-  }
+  };
   render() {
-    const { dataSource,query,size,totalCount} = this.state;
+    const { dataSource, query, size, totalCount } = this.state;
     return (
-      <div className="employee-share-data">
-        <div className="search-container">
-            <Search placeholder="搜索员工姓名或手机号"  onChange={(e) => { this.handleChangNickname(e.target.value)}}  onSearch={ () => { this.handleFetchDataList()}}  style={{ width: 200 }}  enterButton={<span className="icon iconfont">&#xe832;</span>}/>
+      <div className='employee-share-data'>
+        <div className='search-container'>
+          <Search
+            placeholder='搜索员工姓名或手机号'
+            onChange={(e) => {
+              this.handleChangNickname(e.target.value);
+            }}
+            onSearch={() => {
+              this.handleFetchDataList();
+            }}
+            style={{ width: 200 }}
+            enterButton={<span className='icon iconfont'>&#xe832;</span>}
+          />
         </div>
         <div>
-              <Table
-                  rowKey={record => record.id}
+          <XMTable
+            renderEmpty={{
+              image: college,
+              description: '暂无数据',
+            }}
+            rowKey={(record) => record.id}
             dataSource={dataSource}
             columns={this.parselumns()}
             pagination={false}
@@ -233,25 +259,30 @@ class EmployeeShareData extends React.Component {
             showSorterTooltip={false}
             bordered
           />
-              {dataSource.length >0 &&
-                <div className="box-footer">
+          {dataSource.length > 0 && (
+            <div className='box-footer'>
               <PageControl
                 current={query.current - 1}
                 pageSize={size}
                 total={totalCount}
                 toPage={(page) => {
-                            const _query = {...query, current: page + 1};
-                            this.setState({
-                              query:_query
-                            },()=>{ this.handleFetchDataList()})
+                  const _query = { ...query, current: page + 1 };
+                  this.setState(
+                    {
+                      query: _query,
+                    },
+                    () => {
+                      this.handleFetchDataList();
+                    }
+                  );
                 }}
                 onShowSizeChange={this.onShowSizeChange}
               />
             </div>
-                }
+          )}
         </div>
       </div>
-    )
+    );
   }
 }