Merge remote-tracking branch 'origin/dev'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "private": true,
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {
@@ -69,6 +69,7 @@
     "react-dev-inspector": "^1.1.1",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
+    "react-window": "^1.8.10",
     "umi": "^3.5.0",
     "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1"

src/components/Common/selectorModal/AlbumSelectModal.tsx

@@ -4,9 +4,11 @@ import { Input, Modal } from 'antd';
 import Table, { ColumnType } from 'antd/lib/table';
 import React, { useEffect, useState } from 'react';
 import { connect, useDispatch } from 'umi';
+import './style.less';
 
 interface PropsType {
   albumList: AlbumVo[];
+  onSelect: (data: AlbumVo) => void;
   total: number;
   resourceId: string;
   visible: boolean;
@@ -15,19 +17,19 @@ interface PropsType {
 }
 
 const AlbumSelectModal: React.FC<PropsType> = (props) => {
-  const { albumList, total, resourceId, visible, onCancel, resourceName } = props;
+  const { albumList, total, visible, onCancel, resourceName, onSelect, resourceId } = props;
   const dispatch = useDispatch();
   const [current, setCurrent] = useState(1);
-  const [name, setName] = useState('');
 
   useEffect(() => {
     dispatch({
       type: 'selectModal/albumSelectModal/queryAlbumList',
       payload: {
         params: {
           current: current,
-          pageSize: 5,
-          albumName: name,
+          pageSize: 10,
+          selectModal: true,
+          resourceId,
         },
       },
     });
@@ -40,24 +42,16 @@ const AlbumSelectModal: React.FC<PropsType> = (props) => {
     },
   ];
 
+  const rowClassName = (record: AlbumVo) => {
+    if (record.resourceId) {
+      return 'selectRow';
+    }
+    return '';
+  };
+
   const onRow: (data: AlbumVo) => React.HTMLAttributes<any> = (data: AlbumVo) => ({
     onClick: () => {
-      dispatch({
-        type: 'resource/setAlbum',
-        payload: {
-          resourceId: resourceId,
-          albumId: data.id,
-        },
-      });
-      onCancel();
-      dispatch({
-        type: 'resource/queryAlbumList',
-        payload: {
-          params: {
-            resourceId: resourceId,
-          },
-        },
-      });
+      onSelect(data);
     },
   });
 
@@ -68,22 +62,24 @@ const AlbumSelectModal: React.FC<PropsType> = (props) => {
       payload: {
         params: {
           current: page,
-          pageSize: 5,
-          albumName: name,
+          pageSize: 10,
+          selectModal: true,
+          resourceId,
         },
       },
     });
   };
 
   const onSearch = (value: string) => {
-    setName(value);
     dispatch({
       type: 'selectModal/albumSelectModal/queryAlbumList',
       payload: {
         params: {
           current: current,
-          pageSize: 5,
+          pageSize: 10,
+          selectModal: true,
           albumName: value,
+          resourceId,
         },
       },
     });
@@ -98,14 +94,17 @@ const AlbumSelectModal: React.FC<PropsType> = (props) => {
     >
       <Input.Search onSearch={onSearch} />
       <Table
+        rowClassName={rowClassName}
         size="small"
         rowKey="id"
         columns={columns}
         dataSource={albumList}
         pagination={{
           current: current,
+          showTotal: (total) => `总计:${total}`,
           total: total,
           onChange: onPageChange,
+          pageSize: 10,
         }}
         onRow={onRow}
       />

src/components/Common/selectorModal/AuthorSelectorModal.tsx

@@ -62,7 +62,7 @@ const AuthorSelectorModal: React.FC<PropsType> = (props: PropsType) => {
         filter: {},
         params: {
           current: currentPage,
-          pageSize: 5,
+          pageSize: 10,
         },
         sort: {},
       },
@@ -99,7 +99,7 @@ const AuthorSelectorModal: React.FC<PropsType> = (props: PropsType) => {
         params: {
           ...values,
           current: page,
-          pageSize: 5,
+          pageSize: 10,
         },
         sort: {},
       },
@@ -108,8 +108,9 @@ const AuthorSelectorModal: React.FC<PropsType> = (props: PropsType) => {
   };
 
   const pagination: TablePaginationConfig = {
+    showTotal: (total) => `总计:${total}`,
     current: currentPage,
-    pageSize: 5,
+    pageSize: 10,
     onChange: onPageChange,
     total: total,
   };
@@ -123,7 +124,7 @@ const AuthorSelectorModal: React.FC<PropsType> = (props: PropsType) => {
         sort: {},
         params: {
           current: currentPage,
-          pageSize: 5,
+          pageSize: 10,
           ...values,
         },
       },

src/components/Common/selectorModal/ResourceSelectModal.tsx

@@ -0,0 +1,141 @@
+import { ResourceVo } from '@/types/entity';
+import { ModelType } from '@/types/model';
+import { TableResponse } from '@/types/response/table';
+import {
+  Button,
+  Col,
+  Input,
+  Modal,
+  Row,
+  Table,
+  TableColumnType,
+  TablePaginationConfig,
+} from 'antd';
+import React, { useEffect, useState } from 'react';
+import { connect, useDispatch } from 'umi';
+import './style.less';
+
+interface PropsType {
+  onSelect: (data: ResourceVo) => void;
+  onCancel: () => void;
+  response?: TableResponse<ResourceVo>;
+  visible: boolean;
+  albumId?: string;
+}
+
+const ResourceSelectModal: React.FC<PropsType> = (props) => {
+  const { onCancel, onSelect, response, visible, albumId } = props;
+  const [current, setCurrent] = useState(1);
+  const [name, setName] = useState('');
+  const [dir, setDir] = useState('');
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch({
+      type: 'selectModal/resource/queryList',
+      payload: {
+        params: {
+          current,
+          pageSize: 10,
+          filename: name,
+          dir,
+          albumId,
+        },
+      },
+    });
+  }, [dispatch]);
+
+  const columns: TableColumnType<ResourceVo>[] = [
+    {
+      title: '文件名',
+      ellipsis: true,
+      dataIndex: 'filename',
+    },
+    {
+      title: '路径',
+      ellipsis: true,
+      dataIndex: 'dir',
+    },
+  ];
+
+  const pagination: TablePaginationConfig = {
+    showTotal: (total) => `总计:${total}`,
+    onChange: (page) => {
+      setCurrent(page);
+      dispatch({
+        type: 'selectModal/resource/queryList',
+        payload: {
+          params: {
+            current: page,
+            pageSize: 10,
+            filename: name,
+            dir,
+            albumId,
+          },
+        },
+      });
+    },
+    total: response?.total,
+    current: current,
+  };
+
+  const onRow = (data: ResourceVo) => ({
+    onClick: () => {
+      onSelect(data);
+    },
+  });
+
+  const onSearch = () => {
+    dispatch({
+      type: 'selectModal/resource/queryList',
+      payload: {
+        params: {
+          current,
+          pageSize: 10,
+          filename: name,
+          dir,
+          albumId,
+        },
+      },
+    });
+  };
+
+  const rowClassName = (record: ResourceVo) => {
+    if (record.albumId) {
+      return 'selectRow';
+    }
+    return '';
+  };
+
+  return (
+    <Modal visible={visible} title="选择资源" onCancel={onCancel} onOk={onCancel}>
+      <Row gutter={[5, 5]}>
+        <Col>
+          <Input placeholder="文件名" value={name} onChange={(e) => setName(e.target.value)} />
+        </Col>
+        <Col>
+          <Input placeholder="目录" value={dir} onChange={(e) => setDir(e.target.value)} />
+        </Col>
+        <Col>
+          <Button type="primary" onClick={onSearch}>
+            搜索
+          </Button>
+        </Col>
+      </Row>
+
+      <Table
+        rowClassName={rowClassName}
+        size="small"
+        columns={columns}
+        pagination={pagination}
+        dataSource={response?.data}
+        onRow={onRow}
+      />
+    </Modal>
+  );
+};
+
+export default connect(({ 'selectModal/resource': { response } }: ModelType) => ({
+  response,
+}))(ResourceSelectModal);

src/components/Common/selectorModal/SiteSelectorModal.tsx

@@ -68,7 +68,7 @@ const SiteSelectorModal: React.FC<PropsType> = (props: PropsType) => {
         sort: {},
         params: {
           current: currentPage,
-          pageSize: 5,
+          pageSize: 10,
         },
       },
     });
@@ -114,7 +114,7 @@ const SiteSelectorModal: React.FC<PropsType> = (props: PropsType) => {
         sort: {},
         params: {
           current: currentPage,
-          pageSize: 5,
+          pageSize: 10,
           ...values,
         },
       },
@@ -188,8 +188,9 @@ const SiteSelectorModal: React.FC<PropsType> = (props: PropsType) => {
         size="small"
         pagination={{
           current: currentPage,
-          pageSize: 5,
+          pageSize: 10,
           total,
+          showTotal: (total) => `总计:${total}`,
           onChange: onPageChange,
         }}
         rowSelection={rowSelection}

src/components/Common/selectorModal/style.less

@@ -0,0 +1,3 @@
+.selectRow {
+  background-color: green;
+}

src/components/Common/upload/ImageUpload.tsx

@@ -93,6 +93,8 @@ const ImageUpload: React.FC<PropsType> = (props) => {
         onChange={handleFileChange}
         onPreview={handlePreview}
         onRemove={onRemove}
+        // todo 开启后可以选多个但是一个文件会上传多次
+        // multiple
       >
         <Button>上传</Button>
       </Upload>

src/components/GlobalHeader/RightContent.tsx

@@ -40,22 +40,7 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
 
   return (
     <div className={className}>
-      <Tooltip title={version}>
-        <Link to="/release-note">发行说明</Link>
-      </Tooltip>
-      <Tooltip title="使用文档">
-        <a
-          style={{
-            color: 'inherit',
-          }}
-          target="_blank"
-          href="https://pro.ant.design/docs/getting-started"
-          rel="noopener noreferrer"
-          className={styles.action}
-        >
-          <QuestionCircleOutlined />
-        </a>
-      </Tooltip>
+      <Link to="/release-note">{version}</Link>
     </div>
   );
 };