style:全局按钮样式修改

src/core/antd.less

@@ -659,7 +659,7 @@ td.ant-table-column-sort{
   }
   &:focus,
   &:active{
-    color:#C6C6C6 !important;
+    color:#666 !important;
     border:1px solid #C6C6C6 !important;
   }
 }

src/modules/knowledge-base/components/KnowledgeBaseList.jsx

@@ -3,7 +3,7 @@
  * @Author: zangsuyun
  * @Date: 2021-03-12 14:49:40
  * @LastEditors: zangsuyun
- * @LastEditTime: 2021-04-07 13:49:59
+ * @LastEditTime: 2021-04-09 10:18:44
  * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
  */
 
@@ -13,11 +13,13 @@ import { Route, withRouter } from "react-router-dom";
 import { PageControl } from "@/components";
 import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass";
 import { appId, shareUrl, LIVE_SHARE } from "@/domains/course-domain/constants";
+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 "./KnowledgeBaseList.less";
 
+const DEFAULT_SIZE_UNIT = 1000 * 1000; // 将B转换成M
 const { confirm } = Modal;
 const ENV = process.env.DEPLOY_ENV || "dev";
 
@@ -25,8 +27,8 @@ class KnowledgeBaseList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      id: "", // 视频课ID
-      studentIds: [],
+      id: "", 
+      scanFileModal:null
     };
   }
 
@@ -81,6 +83,62 @@ class KnowledgeBaseList extends React.Component {
     });
   };
 
+  // 预览文件
+  handleScanFile = (folder) => {
+    console.log(folder);
+    const { folderFormat, folderSize, ossUrl } = folder;
+    switch (folderFormat) {
+      case "PDF":
+        window.open(ossUrl, "_blank");
+        break;
+      case "WORD":
+      case "DOCX":
+      case "DOC":
+      case "EXCEL":
+      case "PPT":
+      case "PPTX":
+      case "PDF":
+        if (
+          ((folderFormat === "PPT" ||
+            folderFormat === "PPTX" ||
+            folderFormat === "DOCX" ||
+            folderFormat === "WORD" ||
+            folderFormat === "DOC") &&
+            folderSize > 10 * DEFAULT_SIZE_UNIT) ||
+          (folderFormat === "EXCEL" && folderSize > 5 * DEFAULT_SIZE_UNIT)
+        ) {
+          Modal.confirm({
+            title: "抱歉，不能在线预览",
+            content: "由于文件较大，不支持在线预览，请下载后再查看",
+            // icon: <Icon type="question-circle" theme="filled" style={{ color: '#FF8534' }}></Icon>,
+            okText: "下载",
+            onOk: () => {
+              const a = document.createElement("a");
+              a.href = ossUrl;
+              a.click();
+            },
+          });
+          break;
+        }
+        const prefixUrl = "https://view.officeapps.live.com/op/view.aspx?src=";
+        const scanUrl = `${prefixUrl}${encodeURIComponent(ossUrl)}`;
+        window.open(scanUrl, "_blank");
+        break;
+      default:
+        const scanFileModal = (
+          <ScanFileModal
+            fileType={folderFormat}
+            item={folder}
+            close={() => {
+              this.setState({ scanFileModal: null });
+            }}
+          />
+        );
+        this.setState({ scanFileModal });
+        break;
+    }
+  };
+
   // 请求表头
   parseColumns = () => {
     const { query, totalCount } = this.props;
@@ -268,7 +326,12 @@ class KnowledgeBaseList extends React.Component {
               )}
 
               {type === "FOLDER" && (
-                <div className="record__item">
+                <div
+                  className="record__item"
+                  onClick={() => {
+                    this.handleScanFile(record.source);
+                  }}
+                >
                   <div
                     className={`folder-type ${
                       record.source && record.source.folderFormat
@@ -341,7 +404,7 @@ class KnowledgeBaseList extends React.Component {
         // fixed: "right",
         render: (val, record, index) => {
           console.log(this.props.categoryId);
-          return this.props.categoryId === '0' ? (
+          return this.props.categoryId === "0" ? (
             <div className="operate">
               <div
                 className="operate__item"
@@ -442,7 +505,6 @@ class KnowledgeBaseList extends React.Component {
 
   render() {
     const { dataSource = [], totalCount, query, match } = this.props;
-
     const { current, size } = query;
     return (
       <div className="knowledge-base-list">
@@ -473,6 +535,9 @@ class KnowledgeBaseList extends React.Component {
         </div>
 
         <Route path={`${match.url}/course-data`} component={WatchData} />
+
+        {this.state.scanFileModal}
+
       </div>
     );
   }