241 lines
8.0 KiB
JavaScript
241 lines
8.0 KiB
JavaScript
import React, { useEffect,useState } from 'react';
|
||
import { Form, Upload, Button,Row, Col, Select, Badge, message,Modal } from 'antd';
|
||
import {RightOutlined,LeftOutlined,FileExcelOutlined,DeleteOutlined} from '@ant-design/icons';
|
||
import moment from 'moment';
|
||
import { createCrudService } from '../../../components/crud/_';
|
||
import apiurl from '../../../service/apiurl';
|
||
import { httppost5 } from '../../../utils/request';
|
||
import { exportFile } from '../../../utils/tools';
|
||
const { Dragger } = Upload;
|
||
|
||
const ToolBar = ({ value, onChange, tm, callback,role }) => {
|
||
const exportBtn = role?.rule?.find(item => item.menuName == "导入");
|
||
const [yearRange,setYearRange] = useState([])
|
||
const [monthRange,setMonthRange] = useState([])
|
||
const [form] = Form.useForm();
|
||
const [exportOPen, setExportOPen] = useState(false)
|
||
const [fileList, setFileList] = useState([]) //上传文件列表
|
||
const [loading, setLoading] = useState(false)
|
||
useEffect(()=>{
|
||
getDefaultValue()
|
||
},[])
|
||
|
||
const deleteFile = (fileId) => {
|
||
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
|
||
setFileList(filterFile)
|
||
}
|
||
const beforeUpload = (file) => {
|
||
const accept = [".xlsx",".xls"]
|
||
const fileType = file?.name.split(".");
|
||
const fileDate = fileType.slice(-1);
|
||
const isEecel = accept.includes(`.${fileDate[0]}`)
|
||
if (!isEecel) {
|
||
message.error('请上传.xls .xlsx格式的文件！');
|
||
}
|
||
return isEecel ? true : Upload.LIST_IGNORE;
|
||
};
|
||
|
||
const download = (params) => {
|
||
let downloadLink = document.createElement("a");
|
||
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xfflood/bzPredictionScheme/file/download/${params}`;
|
||
downloadLink.download = `${params.fileName}`;
|
||
downloadLink.style.display = "none";
|
||
// 将链接添加到页面中
|
||
document.body.appendChild(downloadLink);
|
||
|
||
// 模拟点击事件，开始下载
|
||
downloadLink.click();
|
||
}
|
||
const fileChange = (info) => {
|
||
console.log(info);
|
||
if (info.file.status === "done") {
|
||
setLoading(false);
|
||
setExportOPen(false)
|
||
callback()
|
||
}
|
||
if (info.file.status === "uploading") {
|
||
setLoading(true);
|
||
}
|
||
if (info.file.status === "error") {
|
||
message.error("文件上传失败")
|
||
setLoading(false);
|
||
}
|
||
setFileList(info.fileList)
|
||
}
|
||
const getDefaultValue = ()=>{
|
||
const tm = moment()
|
||
const year = tm.year();
|
||
let linshi1 = [];
|
||
for (let i = year - 5; i <= year + 1; i++) {
|
||
linshi1.push(i);
|
||
}
|
||
setYearRange(linshi1)
|
||
let linshi2 = [];
|
||
for (let i = 0; i < 12; i++) {
|
||
linshi2.push(i);
|
||
}
|
||
setMonthRange(linshi2)
|
||
}
|
||
|
||
const down = ()=>{
|
||
const stm = tm.format('YYYY-MM')+'-01'
|
||
const etm = tm.endOf('months').format('YYYY-MM-DD')
|
||
createCrudService(apiurl.informationManagement.dutyPlan.down).downLoad({
|
||
stm:stm,
|
||
etm:etm,
|
||
})
|
||
}
|
||
|
||
const downTemplate = ()=>{
|
||
httppost5(apiurl.rcgl.zbgl.zbb.import, {}).then(res => {
|
||
exportFile(`值班表.xlsx`,res.data)
|
||
})
|
||
}
|
||
|
||
const handleGclqdFileFileChange = async()=>{
|
||
var files = document.getElementById("gclqdFile").files;
|
||
const resData = await createCrudService(apiurl.informationManagement.dutyPlan.upLoad).upLoad({file:files[0]})
|
||
console.log('resData',resData)
|
||
|
||
}
|
||
|
||
/**
|
||
* @description 回到今天
|
||
*/
|
||
const backToday = () => {
|
||
const now = moment();
|
||
onChange(now);
|
||
};
|
||
return (
|
||
<>
|
||
<div className="pagetoolbar">
|
||
<Form layout="inline">
|
||
<Form.Item >
|
||
<Button
|
||
type="primary"
|
||
className='but4'
|
||
onClick={() => onChange(moment().subtract(1, 'months'))}
|
||
icon={<LeftOutlined />}
|
||
>上一月</Button>
|
||
</Form.Item>
|
||
<Form.Item label="年份">
|
||
<Select
|
||
style={{ width: 80 }}
|
||
dropdownMatchSelectWidth={false}
|
||
onChange={newYear => {
|
||
const now = value.clone().year(newYear);
|
||
onChange(now);
|
||
}}
|
||
value={value.year()}
|
||
>
|
||
{
|
||
yearRange.map(o => <Select.Option key={o} value={o}>{o}</Select.Option>)
|
||
}
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item label="月份">
|
||
<Select
|
||
style={{ width: 80 }}
|
||
dropdownMatchSelectWidth={false}
|
||
onChange={newMonth => {
|
||
const now = value.clone().month(newMonth);
|
||
onChange(now);
|
||
}}
|
||
value={value.month()}
|
||
>
|
||
{
|
||
monthRange.map(o => <Select.Option key={o} value={o}>{o+1}</Select.Option>)
|
||
}
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item >
|
||
<Button
|
||
type="primary"
|
||
className='but4'
|
||
onClick={() => onChange(moment().startOf('month'))}
|
||
icon={<RightOutlined />}
|
||
>下一月</Button>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" onClick={() => {backToday()}}>今天</Button>
|
||
</Form.Item>
|
||
{exportBtn ?<Form.Item>
|
||
<Button
|
||
className='but4'
|
||
onClick={() => {setExportOPen(true)}}>导入</Button>
|
||
</Form.Item>: null}
|
||
<Form.Item style={{ marginLeft:"auto" }}>
|
||
<Badge status="error" text="带班领导" style={{ marginRight: 8 }} />
|
||
<Badge status="processing" text="值班领导" style={{ marginRight: 8 }} />
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
<Modal
|
||
open={exportOPen}
|
||
width={700}
|
||
title="仅支持表格文件上传，请按照模板示例数据填写"
|
||
destroyOnClose
|
||
onCancel={() => setExportOPen(false)}
|
||
footer={null}
|
||
>
|
||
<Row>
|
||
<Col span={24}>
|
||
<Dragger
|
||
name='file'
|
||
// multiple
|
||
action="/gunshiApp/tsg/rota/importData"
|
||
onChange={fileChange}
|
||
beforeUpload={beforeUpload}
|
||
onDrop={(info) => { console.log(info); }}
|
||
fileList={fileList}
|
||
disabled={loading}
|
||
accept=".xls, .xlsx"
|
||
>
|
||
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||
<p className="ant-upload-hint">
|
||
支持扩展名：.xls .xlsx
|
||
</p>
|
||
</Dragger>
|
||
</Col>
|
||
</Row>
|
||
{/* <Row gutter={[16]}>
|
||
{
|
||
loading ? <span>文件正在上传中，请等待</span> :
|
||
fileList.length > 0 && fileList.map(file => {
|
||
return (
|
||
<Col span={12}>
|
||
<div className='file-item' >
|
||
<div className='file-description'>
|
||
<div
|
||
onClick={() => { download(file.response?.data?.fileId) }}
|
||
style={{ cursor: 'pointer' }}
|
||
>
|
||
<FileExcelOutlined style={{ fontSize: 40 }} />
|
||
</div>
|
||
<span>{file.name}</span>
|
||
</div>
|
||
<div
|
||
className='delete-icon'
|
||
onClick={() => deleteFile(file.response?.data?.fileId)}
|
||
>
|
||
<DeleteOutlined />
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
)
|
||
})
|
||
}
|
||
|
||
</Row> */}
|
||
<Row>
|
||
<Col span={24} style={{ textAlign: 'right',marginTop:15 }}>
|
||
<Button onClick={downTemplate} type="primary" style={{marginRight:10}}>下载模板</Button>
|
||
{/* <Button type="primary" onClick={() => {}}>提交</Button> */}
|
||
</Col>
|
||
</Row>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default ToolBar; |