(*)培训资料库：文件列表分页、搜索过滤

api/app/lib/controllers/resourceRepository/index.js

@@ -125,16 +125,16 @@ async function getResourceClassify(ctx) {
 async function getResourceFileList(ctx, next) {
     try {
         const { models } = ctx.fs.dc;
-        const { limit, offset, type, departmentName, trainDate } = ctx.query;
+        const { limit, page, type, departmentName, trainDate, startTime, endTime, keyword } = ctx.query;
         let rlst = [];
         if (["公司培训资料", "部门培训资料"].includes(type)) {
             const findObj = {
                 attributes: ["id", "fileType", "fileName", "fileSize", "updateDate", "attachPath"],
                 order: [["departmentName", "desc"]]
             };
-            if (Number(limit) > 0 && Number(offset) >= 0) {
+            if (Number(limit) > 0 && Number(page) >= 0) {
                 findObj.limit = Number(limit);
-                findObj.offset = Number(offset);
+                findObj.offset = Number(page) * Number(limit);
             }
 
             if ("公司培训资料" == type) {
@@ -145,6 +145,12 @@ async function getResourceFileList(ctx, next) {
                 if (trainDate) {
                     findObj.where.trainDate = trainDate;
                 }
+                if (startTime && endTime) {
+                    findObj.where.updateDate = { $between: [startTime, endTime] };
+                }
+                if (keyword) {
+                    findObj.where.fileName = { $like: `%${keyword}%` };
+                }
                 rlst = await models.TrainingInformation.findAndCountAll(findObj);
             } else {
                 if (departmentName) {
@@ -154,6 +160,12 @@ async function getResourceFileList(ctx, next) {
                     if (trainDate) {
                         where.trainDate = { $between: [moment(trainDate).startOf('month').format('YYYY-MM-DD HH:mm:ss'), moment(trainDate).endOf('month').format('YYYY-MM-DD HH:mm:ss')] };
                     }
+                    if (startTime && endTime) {
+                        where.updateDate = { $between: [startTime, endTime] };
+                    }
+                    if (keyword) {
+                        where.fileName = { $like: `%${keyword}%` };
+                    }
                     findObj.where = where;
                 }
                 rlst = await models.DeptTraining.findAndCountAll(findObj);

web/client/src/sections/humanAffairs/containers/resourceRepository.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin, Popconfirm } from '@douyinfe/semi-ui';
+import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin, Popconfirm, Pagination, DatePicker } from '@douyinfe/semi-ui';
 import { IconSearch, IconEditStroked, IconMinusCircleStroked, IconPlusCircleStroked } from '@douyinfe/semi-icons';
 import {
     getResourceFileList, postResourceFile, delResourceFile,
@@ -14,11 +14,14 @@ import '../style.less';
 const ResourceRepository = (props) => {
     const { dispatch, clientHeight, apiRoot, user, resourceClassify, resourceFilelist, isRequesting } = props;
     const [treeData, setTreeData] = useState([]);
-    const [currentSelect, setCurrentSelect] = useState();
+    const [currentSelect, setCurrentSelect] = useState("公司培训资料");
     const [defaultExpandedKey, setDefaultExpandedKey] = useState();
     const [modelVisiable, setModelVisiable] = useState(false);
     const [modalData, setModalData] = useState();
     const [uploadModalVisiable, setUploadModalVisiable] = useState(false);
+    const [paginationQuery, setPaginatioQuery] = useState({ limit: 10, page: 0 }); //页码信息
+    const [keyword, setKeyword] = useState();//文件名称过滤
+    const [dataRange, setDataRange] = useState();//更新时间过滤
     const ref = useRef();
 
     useEffect(() => {
@@ -93,7 +96,10 @@ const ResourceRepository = (props) => {
     }
     const handleSelect = (e) => {
         setCurrentSelect(e);
-        getFile(e);
+        setPaginatioQuery({ limit: 10, page: 0 });
+        setKeyword(null);
+        setDataRange(null);
+        getFile(e, { limit: 10, page: 0 }, { restSearch: true });
     }
     const handleDataToSave = (add, body) => {
         if (add) {
@@ -154,11 +160,25 @@ const ResourceRepository = (props) => {
         })
 
     }
-    const getFile = (e) => {
+    const handleSearch = () => {
-        const arr = e.split("/");
+        setPaginatioQuery({ limit: 10, page: 0 });
-        const query = { type: arr[0] };
+        getFile(null, { limit: 10, page: 0 });
+    }
+    const getFile = (e, pagination, opt) => {
+        const arr = e ? e.split("/") : currentSelect.split("/");
+        const query = pagination ? { ...pagination, type: arr[0] } : { ...paginationQuery, type: arr[0] };
+        if (opt && opt.restSearch) {
+            //选中树节点重置
+        } else {
+            if (keyword) { query.keyword = keyword; }
+            if (dataRange) {
+                query.startTime = moment(dataRange[0]).format('YYYY-MM-DD HH:mm:ss');
+                query.endTime = moment(dataRange[1]).format('YYYY-MM-DD HH:mm:ss');
+            }
+        }
         if (arr[1]) { query.departmentName = arr[1]; }
         if (arr[2]) { query.trainDate = arr[2]; }
+
         dispatch(getResourceFileList(query));
     }
     const getClassify = () => {
@@ -212,7 +232,7 @@ const ResourceRepository = (props) => {
                                     defaultExpandAll={true}
                                     treeData={treeData}
                                     style={style}
-                                    value={currentSelect}
+                                    value={[currentSelect]}
                                     expandedKeys={defaultExpandedKey}
                                     filterTreeNode={true}
                                     searchRender={false}
@@ -225,21 +245,59 @@ const ResourceRepository = (props) => {
                             </Col>
                             {/* 右侧内容 */}
                             <Col span={18} className='right'>
-                                <Row type="flex" justify="space-around" align="middle">
+                                <Row> <span className="path-lable"><strong>当前文件夹：{currentSelect}</strong></span></Row>
-                                    <Col span={18}>
+                                <Row className='search'>
                                     <Space>
-                                            {currentSelect && currentSelect.includes("公司培训资料") && currentSelect.split("/").length == 3 ? <Button theme='solid' type='primary' onClick={() => { setUploadModalVisiable(true) }} >上传文件</Button> : null}
+                                        {currentSelect && currentSelect.includes("公司培训资料") && currentSelect.split("/").length == 3 ?
-                                            <span className="path-lable"><strong>当前文件夹：{currentSelect}</strong></span>
+                                            <Button theme='solid' type='primary' onClick={() => { setUploadModalVisiable(true) }} >上传文件</Button>
+                                            : null}
+                                        <span className='search-label'>关键字</span>
+                                        <Input
+                                            style={{ width: 160 }}
+                                            // suffix={<IconSearch />}
+                                            showClear
+                                            placeholder="文件名称"
+                                            value={keyword}
+                                            onChange={(value) => { setKeyword(value) }}
+                                        ></Input>
+                                        <span className='search-label'>更新时间范围</span>
+                                        <DatePicker
+                                            style={{ width: 350 }}
+                                            value={dataRange}
+                                            type="dateTimeRange"
+                                            density="compact"
+                                            onChange={(data) => { setDataRange(data) }}
+                                            onClear={() => { setDataRange(null) }}
+                                        />
+                                        <Button onClick={handleSearch}>搜索</Button>
                                     </Space>
-                                    </Col>
-                                    <Col span={6} >
-                                        <Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input>
-                                    </Col>
                                 </Row>
                                 <Table
                                     columns={columns}
                                     dataSource={resourceFilelist && resourceFilelist.rows || []}
                                     pagination={false} />
+                                <div style={{
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    padding: "20px 20px",
+                                }}>
+                                    <div></div>
+                                    <div style={{ display: 'flex', }}>
+                                        <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
+                                            共{resourceFilelist && resourceFilelist.count}条信息
+                                        </span>
+                                        <Pagination
+                                            total={resourceFilelist && resourceFilelist.count}
+                                            showSizeChanger
+                                            currentPage={paginationQuery.page + 1}
+                                            pageSizeOpts={[10, 20, 30, 40]}
+                                            onChange={(currentPage, pageSize) => {
+                                                setPaginatioQuery({ limit: pageSize, page: currentPage - 1 });
+                                                getFile(currentSelect, { limit: pageSize, page: currentPage - 1 });
+                                            }}
+                                        />
+                                    </div>
+                                </div>
                             </Col>
                         </Row>
                     </Spin>

web/client/src/sections/humanAffairs/style.less

@@ -20,6 +20,10 @@
             margin-top: 20px;
         }
 
+        .semi-button {
+            margin-bottom: 20px;
+        }
+
         .tree-icon {
             padding-left: 6px;
             opacity: 0;
@@ -41,13 +45,17 @@
             margin-bottom: 20px;
         }
 
-        .semi-input-wrapper {
+        .search {
+            margin-top: 20px;
             margin-bottom: 20px;
+
+            .search-label {
+                font-size: 14px;
             }
         }
 
-    .semi-button {
+        // .semi-input-wrapper {
-        margin-bottom: 20px;
+        //     margin-bottom: 20px;
+        // }
     }
-
 }