import React, { useState, useEffect } from 'react'; import { Input, Space, Tabs } from 'antd'; import AutoTable from '@/components/AutoTable'; import { DownloadOutlined } from '@ant-design/icons'; import { history } from 'umi'; function Tables({ extraparams }) { return ( <AutoTable path="/fileCenter/getFileCenterPage" extraparams={{ ...extraparams }} resizeable={false} columns={[ { title: '文件名称', dataIndex: 'fileName', key: 'fileName', }, { title: '文件分类', dataIndex: 'typeName', key: 'typeName', search: false, }, { title: '语言', dataIndex: 'languageName', key: 'languageName', search: false, }, { title: '下载', dataIndex: 'fileList', key: 'fileList', search: false, render: (dom, row) => { return ( <a href={row?.fileList[0]?.url} download={row?.fileList[0]?.name}> <DownloadOutlined style={{ fontSize: '0.8rem' }} /> </a> ); }, }, ]} /> ); } function Download({ location: { query } }) { const [fileType, setfileType] = useState(query.key); const items = [ { label: '硬件产品资料', key: '1', children: ( <Tables extraparams={{ fileType, }} /> ), }, { label: '软件产品资料', key: '2', children: ( <Tables extraparams={{ fileType, }} /> ), }, { label: '宣传画册及其他', key: '3', children: ( <Tables extraparams={{ fileType, }} /> ), }, ]; useEffect(() => { setfileType(query.key); }, [query]); return ( <div id="mesContainer"> <div style={{ position: 'relative' }}> <img src={require('@/assets/fac9.jpg')} alt="" style={{ width: '100%' }} /> <div className="diyinput" style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, margin: 'auto', width: '20vw', height: '3rem', minWidth: 320, }} > 下载中心 </div> </div> <div className="section"> <Tabs activeKey={fileType} onChange={(val) => { history.push({ pathname: '/download', query: { key: val, }, }); setfileType(val); }} items={items} /> </div> </div> ); } export default Download;