merge

config/plugin.config.js

@@ -8,6 +8,12 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const prodGzipList = ['js', 'css'];
 
 export default config => {
+  // config.module
+  //   .rule()
+  //   .test(/\.(pdf|svg|docx|doc)$/)
+  //   .use('file-loader?name=[path][name].[ext]')
+  //   .loader('file-loader')
+  //   .end();
   // pro 和 开发环境再添加这个插件
   if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
     // 将所有 less 合并为一个供 themePlugin使用
@@ -45,7 +51,7 @@ export default config => {
           //     return chunk.name !== 'my-excluded-chunk';
           // },
           minSize: 20000, //生成块的最小大小（以字节为单位）1024字节=1KB。
-          minChunks: 1,   //拆分前必须共享模块的最小块数。
+          minChunks: 1, //拆分前必须共享模块的最小块数。
           maxInitialRequests: 30, //入口点的最大并行请求数。
           automaticNameDelimiter: '.',
           cacheGroups: {
@@ -56,12 +62,12 @@ export default config => {
               enforce: true,
             },
             virtualized: {
-              name: "virtualized",
+              name: 'virtualized',
               test: /[\\/]node_modules[\\/]react-virtualized/,
               priority: 10,
             },
             antd: {
-              name: "antd",
+              name: 'antd',
               test: /[\\/]node_modules[\\/]antd[\\/]/,
               priority: 9,
             },
@@ -70,23 +76,24 @@ export default config => {
             //   test: /[\\/]node_modules[\\/]@antv[\\/]/,
             //   priority: 9,
             // },
-            echarts: { // 1.27MB
-              name: "echarts",
+            echarts: {
+              // 1.27MB
+              name: 'echarts',
               test: /[\\/]node_modules[\\/](echarts|echarts-gl)[\\/]/,
               priority: 10,
               enforce: true,
             },
             bizcharts: {
-              name: "bizcharts",
+              name: 'bizcharts',
               test: /[\\/]node_modules[\\/]bizcharts[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             hlsJs: {
-              name: "hlsJs",
+              name: 'hlsJs',
               test: /[\\/]node_modules[\\/]hls.js[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             // moment: {
             //   name: "moment",
@@ -95,22 +102,22 @@ export default config => {
             //   priority: 10
             // },
             fileManage: {
-              name: "fileManage",
+              name: 'fileManage',
               test: /[\\/]node_modules[\\/]@opuscapita[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             pdfJs: {
-              name: "pdfjs-dist",
+              name: 'pdfjs-dist',
               test: /[\\/]node_modules[\\/]pdfjs-dist[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             ggEditor: {
-              name: "ggEditor",
+              name: 'ggEditor',
               test: /[\\/]node_modules[\\/]gg-editor-core[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             // zrender: {
             //   name: "zrender",
@@ -119,22 +126,22 @@ export default config => {
             //   priority: 10
             // },
             swiper: {
-              name: "swiper",
+              name: 'swiper',
               test: /[\\/]node_modules[\\/]swiper[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             flv: {
-              name: "flv",
+              name: 'flv',
               test: /[\\/]node_modules[\\/]flv.js[\\/]/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
             xlsx: {
-              name: "xlsx",
+              name: 'xlsx',
               test: /[\\/]node_modules[\\/]xlsx[\\/]/,
-              chunks: "async",
-              priority: 10
+              chunks: 'async',
+              priority: 10,
             },
             // rctree: {
 
@@ -151,11 +158,10 @@ export default config => {
             //   priority: -1
             // },
             wang: {
-
-              name: "wang",
+              name: 'wang',
               test: /[\\/]node_modules[\\/]wangeditor[\\/]/,
-              chunks: "all",
-              priority: -1
+              chunks: 'all',
+              priority: -1,
             },
             // lodash: {
 
@@ -172,13 +178,12 @@ export default config => {
             //   priority: 10
             // },
             ag: {
-
-              name: "ag",
+              name: 'ag',
               test: /[\\/]node_modules[\\/]ag-grid-/,
-              chunks: "all",
-              priority: 10
+              chunks: 'all',
+              priority: 10,
             },
-          }
+          },
         },
       },
     });
@@ -192,15 +197,17 @@ export default config => {
         algorithm: 'gzip', // 指定生成gzip格式
         test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
         threshold: 10240, //对超过10k的数据进行压缩
-        minRatio: 0.6 // 压缩比例，值为0 ~ 1
+        minRatio: 0.6, // 压缩比例，值为0 ~ 1
       })
     );
   }
   //过滤掉momnet的那些不使用的国际化文件
-  config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => {
-
-    return [/moment[/\\]locale$/, /zh-cn/];
-  });
+  config
+    .plugin('replace')
+    .use(require('webpack').ContextReplacementPlugin)
+    .tap(() => {
+      return [/moment[/\\]locale$/, /zh-cn/];
+    });
 
   // config.output.filename = '[name].[contenthash].js'
 };

package.json

@@ -87,6 +87,7 @@
     "react-document-title": "^2.0.3",
     "react-dom": "^16.7.0",
     "react-excel-renderer": "^1.1.0",
+    "react-file-viewer": "^1.2.1",
     "react-fittext": "^1.0.0",
     "react-gantt-timeline": "^0.4.0",
     "react-grid-layout": "^1.2.5",

src/components/FileViewer/index.js

@@ -0,0 +1,28 @@
+import FileViewer from 'react-file-viewer';
+import { Modal } from 'antd';
+import { memo } from 'react';
+
+const FileViewerModal = ({ url = '', visible, onCancel }) => {
+  const type = url?.split('.')[url?.split('.').length - 1];
+  console.log(url, type);
+  return (
+    <Modal
+      title="预览"
+      open={visible}
+      width={1000}
+      onCancel={onCancel}
+      onOk={onCancel}
+      bodyStyle={{ height: '680px', overflowY: 'hidden' }}
+    >
+      <FileViewer
+        fileType={type}
+        filePath={url}
+        onError={() => console.log('Failed to load')}
+        errorComponent={console.log('出现错误')}
+        unsupportedComponent={console.log('不支持')}
+      />
+    </Modal>
+  );
+};
+
+export default FileViewerModal;

src/pages/Detail/CommitAuditModal.js

@@ -14,8 +14,11 @@ import {
   Button,
   Steps,
   Popover,
+  Upload,
+  Table,
+  Divider,
 } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import { connect } from 'dva';
 import { isArray, result, set } from 'lodash';
 import { useForm } from 'rc-field-form';
@@ -54,6 +57,7 @@ function CommitAuditModal(props) {
     currentUser,
     luckysheet,
     userList,
+    uploadProps,
   } = props;
   const [auditId, setAuditId] = useState();
   const [data, setData] = useState([]);
@@ -66,6 +70,8 @@ function CommitAuditModal(props) {
   const [selectUserList, setSelectUserList] = useState([]);
   const [curNodeIdx, setCurNodeIdx] = useState(-1);
 
+  const [dataSource, setDataSource] = useState([]);
+
   useEffect(() => {
     if (!visible) return;
     const { edges, nodes } = flowDetail;
@@ -515,6 +521,18 @@ function CommitAuditModal(props) {
     }
   };
 
+  const columns = [
+    {
+      title: '文件名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '操作',
+      render: record => <a>删除</a>,
+    },
+  ];
+
   return (
     <Modal
       confirmLoading={loading}
@@ -571,6 +589,15 @@ function CommitAuditModal(props) {
           </TabPane>
         ))}
       </Tabs>
+      <Divider />
+      <div style={{ marginTop: '20px' }}>
+        <Upload {...uploadProps}>
+          <Button type="primary" loading={loading}>
+            <UploadOutlined /> 上传文件
+          </Button>
+        </Upload>
+        <Table style={{ marginTop: '20px' }} dataSource={dataSource} columns={columns} />
+      </div>
     </Modal>
   );
 }

src/pages/Detail/FilesModal.js

@@ -8,6 +8,7 @@ const { confirm } = Modal;
 import moment from 'moment/moment';
 import PreviewFile from '@/components/PreviewFile';
 import { getToken, GetTokenFromUrl } from '@/utils/utils';
+import FileViewerModal from '@/components/FileViewer';
 // 历史清单
 function FilesModal(props) {
   const {
@@ -25,6 +26,8 @@ function FilesModal(props) {
   } = props;
   const [value, setValue] = useState();
   const [showData, setShowData] = useState();
+  const [exportUrl, setExportUrl] = useState();
+  const [fileVisible, setFileVisible] = useState(false);
 
   useEffect(() => {
     if (!value) {
@@ -104,6 +107,15 @@ function FilesModal(props) {
           >
             下载
           </a>
+          <a
+            style={{ marginLeft: 10 }}
+            onClick={() => {
+              setExportUrl(record.url);
+              setFileVisible(true);
+            }}
+          >
+            预览
+          </a>
           <a
             onClick={() => {
               confirm({
@@ -125,24 +137,34 @@ function FilesModal(props) {
     },
   ];
   return (
-    <Modal title="附件列表" width="70%" onCancel={onClose} visible={visible} footer={false}>
-      <Space style={{ display: 'flex', marginBottom: '20px' }}>
-        <div>附件类型:</div>
-        <Select
-          style={{ width: 400 }}
-          value={value}
-          allowClear
-          options={typeOptions}
-          onChange={value => setValue(value)}
-        />
-        <Upload {...uploadProps}>
-          <Button type="primary" loading={loading}>
-            <UploadOutlined /> 上传文件
-          </Button>
-        </Upload>
-      </Space>
-      <Table rowKey="id" columns={columns} dataSource={showData} loading={loading} />
-    </Modal>
+    <>
+      <Modal title="附件列表" width="70%" onCancel={onClose} visible={visible} footer={false}>
+        <Space style={{ display: 'flex', marginBottom: '20px' }}>
+          <div>附件类型:</div>
+          <Select
+            style={{ width: 400 }}
+            value={value}
+            allowClear
+            options={typeOptions}
+            onChange={value => setValue(value)}
+          />
+          <Upload {...uploadProps}>
+            <Button type="primary" loading={loading}>
+              <UploadOutlined /> 上传文件
+            </Button>
+          </Upload>
+        </Space>
+        <Table rowKey="id" columns={columns} dataSource={showData} loading={loading} />
+      </Modal>
+
+      <FileViewerModal
+        url={exportUrl}
+        visible={fileVisible}
+        onCancel={() => {
+          setFileVisible(false);
+        }}
+      />
+    </>
   );
 }
 export default FilesModal;

src/pages/Detail/Index.js

@@ -1,6 +1,18 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { UnorderedListOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Modal, message, Alert, Avatar, Spin, Select, Menu, Dropdown } from 'antd';
+import {
+  Button,
+  Modal,
+  message,
+  Alert,
+  Avatar,
+  Spin,
+  Select,
+  Menu,
+  Dropdown,
+  Row,
+  Col,
+} from 'antd';
 import { connect } from 'dva';
 import styles from './Index.less';
 import LuckySheet from './LuckySheet';
@@ -1149,6 +1161,10 @@ function Detail(props) {
         onSubmit={handleSubmitCell}
         loading={loading.effects['detail/queryComment'] || loading.effects['detail/addComment']}
       />
+      <Row style={{ marginTop: '20px' }}>
+        <Col span={12}>hahahh</Col>
+        <Col span={12}>hahahahh</Col>
+      </Row>
 
       <RightDrawer
         version={version}
@@ -1208,7 +1224,8 @@ function Detail(props) {
         onOk={values => onCommit(values)}
       />
       <CommitAuditModal
-        loading={getLoading()}
+        uploadProps={getUploadProps()}
+        loading={getFilesLoading()}
         visible={commitAuditVisible}
         version={version}
         onClose={() => setCommitAuditVisible(false)}

webpack.config.js

@@ -4,7 +4,9 @@ module.exports = {
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src/'),
-      'libs': path.resolve(__dirname, 'src/components/react-timeline-gantt-master/src/lib/'),
+      libs: path.resolve(__dirname, 'src/components/react-timeline-gantt-master/src/lib/'),
     },
   },
+  // test: /\.(pdf|svg|docx|doc)$/,
+  // use: 'file-loader', //如果不可以试试这个file-loader?name=[path][name].[ext]
 };