做门户类网站多少钱,京东网站建设,织梦本地做的网站内网访问不,科技网站建设公司这边记录我们公司后端做的导出接口和前端是如何对接的 这边的技术栈是#xff1a; 1#xff1a; react 2#xff1a; fetch 第一步#xff1a;简单封装--导出界面
import { DrawerForm } from ant-design/pro-components;
import { CloseOutlined } f…这边记录我们公司后端做的导出接口和前端是如何对接的 这边的技术栈是 1 react 2 fetch 第一步简单封装--导出界面
import { DrawerForm } from ant-design/pro-components;
import { CloseOutlined } from ant-design/icons;
import { Col, Input, Row, Select, DatePicker, message, InputNumber, Card, Button } from antd
import React, { useEffect, useState } from react;
import { connect } from react-redux;
import { DEPT_NAMESPACE } from /actions/dept;
import { getCurrentUser } from /utils/authority;
import { getDictBiz } from /utils/utils;
import { DICT_BIZ_NAMESPACE } from /actions/dictbiz;
import { clubSetMealSave, clubSetMealUpdate } from /services/club;
import { list } from /services/menu;import style from ./common.less;const { TextArea } Input;function NewExp(props) {//show 是根据需要是否展示下方的弹窗//hang 是根据返回结果关闭弹窗//changeHange 是根据需要把参数返回出去//title 是弹窗的标题//Component 是触发弹窗的关键const { title, Component, changeHange, hang, show } props// 时间const [startDate, setStartDate] useState(null)const [startDate1, setStartDate1] useState(null)const [flag, setflag] useState(false)const submit async () {// 判断时间if (!show) {if (startDate ! null || startDate1 ! null) {// 时间比较大小if (startDate1 startDate) {return message.error(结束时间不能小于开始时间)}let data {d1: startDate,d2: startDate1,}changeHange(data)if (hang() 1) {setflag(false)setStartDate(null)setStartDate1(null)}}} else {changeHange()if (hang() 1) {setflag(false)setStartDate(null)setStartDate1(null)}}// if (res?.success) {// message.success(保存成功)// setflag(false)// changeupadte()// }}const onChange (date, dateString) {setStartDate(dateString)};const onChange1 (date, dateString) {setStartDate1(dateString)};return ({!show ?DrawerFormclassName{style.common}submitter{{resetButtonProps: { type: dashed },submitButtonProps: { style: { display: none } },resetButtonRender: (_, dom) null,// Button keysubmit typeprimary onClick{() { submit() }}保存/Buttonrender: (props, defaultDoms) {return [Button keyclean onClick{() { setflag(false) }}取消/Button,Button keyclose typeprimary onClick{() { submit(pass) }}下载/Button,]}}} drawerProps{{closeIcon: null,destroyOnClose: true,extra: CloseOutlined onClick{() setflag(false)} /}}visible{flag}onVisibleChange{(e) {setflag(e)}}width{440}onFinish{() submit()}title{span style{{color: #1F1F1F,fontSize: 18px,fontWeight: 600,height: 22px,lineHeight: 22px}}{title}/span}trigger{Component}div style{{ ...style0 }}div style{{ ...style1 }}导出开始时间/divDatePicker placeholder请选择开始时间 style{{ ...style2 }} onChange{onChange} //divdiv style{{ ...style0, margin: 20px 0 }}div style{{ ...style1, }}导出结束结束/divDatePicker placeholder请选择结束时间 style{{ ...style2 }} onChange{onChange1} //div/DrawerForm/:ButtononClick{() { submit(pass) }}typeprimary导出/Button/}/)
}
const style0 {display: flex,justifyContent: space-between,alignItems: center,
}
const style1 {width: 22%
}
const style2 {width: 76%
}
const mapStateToProps (state) {return {};
};export default connect(mapStateToProps)(NewExp)第二步封装请求导出js-----utils
import { stringify } from qs;//引入qs库export async function download(url, params) {// /api/blade-cust/custhubAppointment/export-customerconst urls /api/${url}?${stringify(params)};const response await fetch(urls, {method: GET,headers: {Authorization: ,Blade-Auth: Bearer ${getAccessToken()} //请求token,Content-Type: application/json //JSON形式----有时候也是具体什么时候用看需求 //responseType:blob,}});if (!response.ok) {throw new Error(HTTP error! status: ${response.status});}const blob await response.blob();const contentDisposition response.headers.get(content-disposition);const filename contentDisposition ? contentDisposition.split(filename)[1].replace(//g, ) : exported_data.csv;const urlBlob window.URL.createObjectURL(blob);const a document.createElement(a);if (a) {
//创建了一个a 直接下载 a.href urlBlob;a.download filename;document.body.appendChild(a);a.click();a.remove();window.URL.revokeObjectURL(urlBlob);return true //这边是给我返回成功的状态}} 第三步导入封好的js---使用
import { download } from /utils/utilsconst hang () {return 1}const changeHange async (e) {try {
//这个都是 参数---接口需要const startTime e.d1;const endTime e.d2;const type userRole;const bigType defaultvalue;const params1 {startTime,endTime,type,bigType};let d await download(blade-cust/custhubCustomer/export-customer, params1)if (d) {message.success(导出成功,请保存)hang()}} catch (error) {console.error(Export failed:, error);}}//导出显示组件NewExps title{导出}hang{hang}Component{Button typeprimary导出/Button}changeHange{changeHange}/NewExps 上方是不用打开新的页面---直接可以点击下载的 这个是打开新界面---代码奉献上---弹窗一个 直接会弹出对应的下载框 import { Upload, Switch, Button, Card, Col, Input, message, Modal, Row, Tree } from antd;Modal.confirm({title: 用户导出确认,content: 是否导出用户数据?,okText: 确定,okType: danger,cancelText: 取消,onOk() {const account params.account || ;const realName params.realName || ;window.open(/api/blade-system/user/export-user?Blade-Authbearer ${getAccessToken()}account${account}realName${realName});},onCancel() {},});
