若依 springboot vue 将前端整个表单信息传到后端处理
若依 springboot vue 将前端整个表单信息传到后端处理
·
一 场景
将前端form表单中的内容整个传给后端,处理后导出为word文档
二 实现
前端表单
<!-- 导出数据内容对话框表单 -->
<el-dialog :title="title" :visible.sync="exportShow" width="500px" class="narrow" append-to-body v-if="exportShow" :close-on-click-modal="false">
<el-form ref="eform" :model="eform" :rules="exportRules" label-width="80px" v-if="exportShow">
<el-form-item label="编写日期" prop="writeDate">
<el-date-picker clearable
v-model="eform.writeDate"
type="date"
value-format="yyyyMMdd"
placeholder="请选择编写日期"
style="width:250px">
</el-date-picker>
</el-form-item>
<el-form-item label="编写人" prop="writer" >
<el-input v-model="eform.writer" placeholder="请输入编写人" style="width:250px"/>
</el-form-item>
<el-form-item label="批准日期" prop="approveDate" >
<el-date-picker clearable
v-model="eform.approveDate"
type="date"
value-format="yyyyMMdd"
placeholder="请选择批准日期"
style="width:250px">
</el-date-picker>
</el-form-item>
<el-form-item label="批准人" prop="approver">
<el-input v-model="eform.approver" placeholder="请输入批准人" style="width:250px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="exportSubmitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
前端导出操作代码
exportList(){
listContent().then(response =>{
// 导出
// console.log(this.eform);
exportContent(this.eform).then(response =>{
let data = new Blob([response], { type: 'application/msword,charset=utf-8' });
if (typeof window.chrome !== 'undefined') {undefined
// chrome
const link = document.createElement('a');
link.href = window.URL.createObjectURL(data);
link.download = this.getDateStringForFileName()+"期间核查计划";
link.click();
}
})
});
},
后端构建表单数据实体类DataPeriodInspectPublic
package com.ruoyi.system.domain;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.ruoyi.common.core.domain.entity.SysDictData;
import com.ruoyi.system.domain.vo.DataPeriodInspectContentVo;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.ruoyi.common.annotation.Excel;
import com.ruoyi.common.core.domain.BaseEntity;
/**
* 期间表对象 data_period_inspect_public
*
* @author ruoyi
* @date 2022-06-20
*/
public class DataPeriodInspectPublic extends BaseEntity
{
private static final long serialVersionUID = 1L;
/** 主键 */
private Long id;
/** 选择的主键数组 */
private Long[] ids;
/** 年度 */
@Excel(name = "年度")
private String year;
/** 编写 */
@Excel(name = "编写")
private String writer;
/** 编写日期 */
@JsonFormat(pattern = "yyyyMMdd")
@Excel(name = "编写日期", width = 30, dateFormat = "yyyy-MM-dd")
private String writeDate;
/** 批准 */
@Excel(name = "批准")
private String approver;
/** 批准日期 */
@JsonFormat(pattern = "yyyyMMdd")
@Excel(name = "批准日期", width = 30, dateFormat = "yyyy-MM-dd")
private String approveDate;
public Long[] getIds() {
return ids;
}
public void setIds(Long[] ids) {
this.ids = ids;
}
public void setId(Long id)
{
this.id = id;
}
public Long getId()
{
return id;
}
public void setYear(String year)
{
this.year = year;
}
public String getYear()
{
return year;
}
public void setWriter(String writer)
{
this.writer = writer;
}
public String getWriter()
{
return writer;
}
public void setWriteDate(String writeDate)
{
this.writeDate = writeDate;
}
public String getWriteDate()
{
return writeDate;
}
public void setApprover(String approver)
{
this.approver = approver;
}
public String getApprover()
{
return approver;
}
public void setApproveDate(String approveDate)
{
this.approveDate = approveDate;
}
public String getApproveDate()
{
return approveDate;
}
@Override
public String toString() {
return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
.append("year", getYear())
.append("writer", getWriter())
.append("writeDate", getWriteDate())
.append("approver", getApprover())
.append("approveDate", getApproveDate())
.toString();
}
}
后端controller接收表单数据并导出
/**
* 导出期间数据内容列表
*/
@PreAuthorize("@ss.hasPermi('system:content:export')")
@Log(title = "期间数据内容", businessType = BusinessType.EXPORT)
@PostMapping("/export")
public void export(HttpServletResponse resp, HttpServletRequest req, @RequestBody DataPeriodInspectPublic publicList)
{
//获取期间数据内容列表
List<DataPeriodInspectContentVo> list = dataPeriodInspectContentService.selectDataPeriodInspectContentByIds(publicList.getIds());
//获取字典
HashMap<String, ArrayList<SysDictData>> dictData = dictDataService.getAllDictDataMap();
//生成结果集
Map<String, Object> dataMap = new HashMap<String,Object>();
ArrayList<TempDataPeriodInspectContent> resultList=new ArrayList<TempDataPeriodInspectContent>();
for (DataPeriodInspectContentVo c:list){
resultList.add(new TempDataPeriodInspectContent(c,dictData));
}
dataMap.put("contentList",resultList);
dataMap.put("public",publicList);
//设置生成文件存储路径
String directory="/contentList";
WordUtil.CheckDownloadPath(directory);
//生成文件
WordUtil.CreateWord(resp,req,dataMap,RuoYiConfig.getTemplatePath()+"/dataPeriodInspectContent","BKJC-CX-006-1.ftl"
, RuoYiConfig.getDownloadPath()+directory+"/BKJC-CX-006-1.doc");
//下载后删除生成文件
FileUtils.deleteFile(RuoYiConfig.getDownloadPath()+directory+"/BKJC-CX-006-1.doc");
}
js文件连接前后端
// 导出期间数据内容
export function exportContent(data){
return request({
url:'/system/content/export' ,
method: 'post',
data: data
})
}
更多推荐
已为社区贡献7条内容
所有评论(0)