GovernmentDataResourceCenter/web/client/src/sections/safetySpecification/containers/specificationLibrary.js

import React, { useEffect, useState, useRef } from 'react'
import { connect } from 'react-redux';
import moment from 'moment';
import { RouteRequest } from '@peace/utils';
import { RouteTable } from '$utils'
import SimpleBar from 'simplebar-react';
import FileModal from '../components/fileModal';
import { Tabs, Form, Input, Space, Button, Table, Checkbox, message, Pagination } from 'antd';
const { Search } = Input;
import { CreditCardFilled, FilePdfOutlined } from '@ant-design/icons';
import { agent } from 'superagent';
const CheckboxGroup = Checkbox.Group;


function SpecificationLibrary ({ loading, clientHeight, actions, dispatch, }) {

   const { resourceRetrieval } = actions
   const [checkAll, setCheckAll] = useState(false)
   const [query, setQuery] = useState({ page: 0, limit: 20 });
   const [folderData, setFolderData] = useState([]);
   const [fileData, setFileData] = useState({ data: [], count: 0 })
   const [groupModal, setGroupModal] = useState(false)
   const [fileModal, setFileModal] = useState(false)

   const [keyword, setKeywords] = useState()
   const [fileIds, setFileIds] = useState([])
   const fileId = useRef([])


   useEffect(() => {
      resourceData()
   }, [])


   let resourceData = (data) => {
      let params = data || query
      dispatch(resourceRetrieval.getSpecifications({ keyword: keyword, ...params, })).then(res => {
         if (res.success) {
            setFileData({ data: res.payload.data?.rows, count: res.payload.data?.count })

         }
      })
   }

   return <>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
         <Space size={'small'}>
            <Button onClick={() => {
               if (!checkAll) {
                  let fileAll = fileData?.data?.map(s => s.id)
                  fileId.current = fileAll
                  setFileIds(fileAll)
               } else {
                  fileId.current = []
                  setFileIds([])
               }
               setCheckAll(!checkAll)
            }}>{checkAll ? "取消全选" : "全选"}</Button>
            <Button type="primary" onClick={() => {
               setFileModal(true)
            }}>上传</Button>
            <Button type="primary">下载</Button>
            <Button type="primary" onClick={() => {
               if (fileId.current?.length) {
                  dispatch(resourceRetrieval.delSpecifications(fileId.current)).then(res => {
                     if (res.success) {
                        let url = []
                        fileData?.data?.map(f => {
                           if (fileId.current?.includes(f.id)) {
                              url.push(f.path)
                           }
                        })
                        url.map(d => {
                           RouteRequest.delete(RouteTable.cleanUpUploadTrash, { url: d });
                        })
                        resourceData({ page: 0, limit: 10 })
                        fileId.current = []
                        setFileIds([])
                        setFileIds(false)
                        setCheckAll(false)
                     }
                  })
               } else {
                  message.warning({
                     duration: 1,
                     content: '未选择文件',
                  });
               }
            }}>删除</Button>
         </Space>

         <Search
            placeholder="文件名称关键字"
            value={keyword}
            onChange={e => {
               setKeywords(e?.target?.value)
            }}
            onSearch={(value, event) => {
               setKeywords(value)
               resourceData({ page: 0, limit: 10, keyword: value })
            }}

            style={{
               width: 266,
            }}
         />
      </div >

      <SimpleBar
         style={{
            // 容器高度
            maxHeight: clientHeight - 130,
         }}
         // 允许的滚动方向
         forceVisible="y"
      >
         {
            fileData?.data?.map((v, i) => {
               return <div style={{ width: 310, display: 'inline-block', margin:'0 18px 10px 0', }}>
                  <div style={{ display: 'flex', padding: '10px 0', border: `1px solid ${fileId.current?.includes(v.id) ? 'rgb(42 207 98)' : '#fff'}` }} onClick={() => {
                     if (fileId.current?.includes(v.id)) {
                        fileId.current = fileId.current?.filter(c => c != v.id)
                        setFileIds(fileId.current?.filter(c => c != v.id))
                     } else {
                        fileId.current = [...fileId.current, v.id]
                        setFileIds([...fileId.current, v.id])
                     }
                  }}>
                     <FilePdfOutlined style={{ fontSize: 96, color: 'rgb(33 211 180)', marginRight: 8 }} />
                     <div style={{ width: 200, display: 'flex', flexDirection: 'column', justifyContent: 'space-evenly' }}>
                        <div style={{
                           width: 100, whiteSpace: 'nowrap', overflow: 'hidden', fontWeight: 400,
                           textOverflow: 'ellipsis', fontSize: 18, color: 'rgb(51 161 34)'
                        }}>
                           {v.fileName}
                        </div>
                        <div>标签：{v.tags || '--'}</div>
                        <div>创建时间：{v.createAt && moment(v.createAt).format('YYYY-MM-DD HH:mm:ss') || '--'}</div>
                     </div>
                  </div>
               </div>
            })
         }
         {fileData?.count > 20 && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Pagination
               total={fileData?.count || 0}
               showSizeChanger
               showQuickJumper
               current={query?.page + 1 || 1}
               pageSizeOptions={[20, 30, 50]}
               showTotal={(total) => `共 ${total} 个文件`}
               onChange={(page, pageSize) => {
                  console.log({ page: page - 1, limit: pageSize, });
                  setQuery({ page: page - 1, limit: pageSize, })
                  resourceData({ page: page - 1, limit: pageSize, keyword: keyword })
               }}
            />
         </div>}

      </SimpleBar>

      {
         fileModal ?
            <FileModal
               close={() => {
                  setFileModal(false);
               }}
               success={() => {
                  resourceData({ page: 0, limit: 10, keyword: keyword })
               }}
               remove={url => {
                  RouteRequest.delete(RouteTable.cleanUpUploadTrash, { url: url });
               }}
            /> : ""
      }

   </>
}
function mapStateToProps (state) {
   const { global, auth, resourceCatalog } = state;
   return {
      user: auth.user,
      actions: global.actions,
      clientHeight: global.clientHeight,
      //  resourceCatalog: resourceCatalog?.data || [],
      //  isRequesting: resourceCatalog.isRequesting
   };
}
export default connect(mapStateToProps)(SpecificationLibrary)