antd form表单数据回显操作

2023-07-12 22:47:03 79

index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据

//index页面
importReactfrom'react'
import{Table,Button,message,Input,Select,Modal,}from'antd';
constOption=Select.Option;
importAddOrEditfrom'./AddOrEdit'
classListextendsReact.Component{
constructor(props){
super(props);
}
state={
id:"",
selectOpt:{
getPopupContainer:()=>{
returnthis.refs.myForm
}
},
tableOption:{
//表头
columns:[
{title:'员工姓名',key:'workerName',dataIndex:'workerName'},
{title:'员工工号',key:'workNumber',dataIndex:'workNumber'},
{
title:"操作",key:'action',className:'columnsCenter',render:(text,record)=>{
return(
编辑
)
}
}
],
dataSource:[],//表格总数据
loading:false,
scroll:{x:1600},
//分页初始数据
pagination:{
current:1,pageSize:10,total:0,showTotal:total=>`共${total}条`
}
},
//编辑表单详细信息
dataForm:{
data:[],
model:{
id:{value:undefined},
workerName:{value:undefined},//员工姓名
workNumber:{value:undefined}//员工工号
},
param:{}
},
//form表单模块
modalOption:{
title:"新增/修改",
visible:false,
footer:null,
destroyOnClose:true,
width:900
},
}
//编辑数据回显
addOrEditClick(record){
constself=this;
let{modalOption,dataForm}=this.state;
dataForm.param=JSON.parse(JSON.stringify(dataForm.model));
//如果是编辑弹出表单并且数据回显，否则就是新增
if(record.id){
api.get(APIS.yluAssessTarget+record.id).then(function(response){
constdata=response.data.data;
dataForm.param.id.value=data.id;
//给
dataForm.param.workerName.value=data.workerName;
dataForm.param.workNumber.value=data.workNumber;
modalOption.visible=true;
self.setState({modalOption,dataForm});
});
}else{
modalOption.visible=true;
self.setState({modalOption});
}
}
//分页
onTableChange(pagination,filters,sorte){
if(pagination.current){
let{tableOption,searchObj}=this.state;
tableOption.pagination.current=pagination.current;
tableOption.pagination.pageSize=pagination.pageSize;
this.setState({tableOption});
}
this.loadTable();
};
/**
*初始化列表
*/
loadTable(){
letself=this,{tableOption}=this.state;
tableOption.loading=true;
self.setState({tableOption});
api.post(APIS.yluAssessTargetSearch+'?current='+tableOption.pagination.current+'&pageSize='+tableOption.pagination.pageSize,{
data:{
companyName:"查询参数"//分公司名
}
}).then(function(response){
tableOption.dataSource=response.data.data.
tableOption.pagination.total=response.data.data.total;
}).finally(()=>{
tableOption.loading=false;
self.setState({tableOption,notDataLevelGroup,searchObj});
});
}
render(){
constself=this;
let{tableOption,modalOption,dataForm}=this.state;
return(

新增


{modalOption.visible?:null}



)
}
componentDidMount(){
this.loadTable();
}
}

//form表单页,点击编辑或新增的时候会弹出，并且编辑的时候下拉框value值就为表格当前的这一条数据对应的值
//对select里面的value值用getFieldDecorator进行绑定
importReactfrom'react'
import{Table,Button,Select,Form,message,Row,Col,}from'antd';
constOption=Select.Option;
classAddOrEditextendsReact.Component{
//提交保存
handleSubmit(e){
e.preventDefault();
constself=this;
this.props.form.validateFieldsAndScroll((err,values)=>{
if(!err){
//提交保存
api.post(APIS.yluAssessTarget,{
data:{
...values,
}
}).then(res=>{
message.success(res.data.message)
}).finally(()=>{
self.setState({addOrEditFooterLoading:false})
})
}
});
}
render(){
const{workerNameList,workNumberList}=this.state;
const{getFieldDecorator}=this.props.form;
constreqMeg='不能为空';
constrenderOption=(arr,code,name)=>arr?arr.map((item,index)=>{
return({item[name]})
}):null

return(



{getFieldDecorator('workerName',{
rules:[{required:true,message:reqMeg}]
})()}




{getFieldDecorator('workNumber',{
rules:[{required:true,message:reqMeg}]
})()}



)
}
}
exportdefaultAddOrEdit;

补充知识：AntDesignVue中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言

在企业应用的快速开发中，我们需要尽快的完成一些功能。如果您使用了AntDesignVue，在进行表单的文件上传相关功能开发的时候，您肯定迫不及待地需要找到一篇包治百病的文章，正是如此，才有了该文的诞生，愿以此文解君忧。

方案设计

前端方案设计

重写a-upload的文件上传方式，使用axios来进行上传

选择一个文件后立即进行上传，前端记录上传成功后的name和uid，并构建一个File实例，用于a-upload组件的已上传文件列表的回显

提交前让文件列表转化为要后端要处理的uid列表

后端方案设计

提供一个统一上传单个文件的接口，每个文件选择后自动上传都将上传到该接口，并写入到数据库的file数据表中

对表单数据新建完成后，对上传的文件列表进行当前实体记录的绑定

对表单数据更新完成后，检测该实体记录的所有文件列表，对没有在该列表中的uid的文件列表进行删除，然后对该列表中所有的uid文件记录进行当前实体记录的绑定

新建与更新的一致性处理方案

因为更新表单在读取旧数据后，需要与新选择文件进行同样的格式化处理，这里的处理流程一样，进行回显的数据是一样的，提交表单也都是提交file表中已经存在的uid列表，所以这里的数据结构是一致的，处理起来将会更加简洁明了。

让代码说话

为了让各位看官老爷们便于理解，直接上代码，希望能将整件事说明白。

构建表单







相关下载

编写js代码

请求后端接口的token、header以及baseUrl等我已默认您已经在axios的统一设置中已经配置好了

为了简化axios相关操作，我们将axios进行了如下封装（您也可以按此完全使用axios来直接对数据进行提交等）：

constdibootApi={
get(url,params){
returnaxios.get(url,{
params
})
},
upload(url,formData){
returnservice({
url,
method:'POST',
data:formData
})
}
}
exportdefaultdibootApi

我们默认为demo实体中需要上传一些文件列表

exportdefault{
name:'demoForm',
data(){
title:'新建',//该表单的功能标题
form:this.$form.createForm(this),//表单数据初始化，没什么好说的
model:{},//如果是更新表单，之前的数据放到这里，来做数据初始化显示之用
downloadFiles:[]//已经上传的文件列表
},
methods:{
//初始打开的表单时的处理（如果是更新表单，这里首先需要读取出相关数据）
asyncopen(id){
if(id===undefined){
//没有id数据则认为是新建
this.model={}
this.afterOpen()
}else{
//否则作为更新处理
constres=awaitdibootApi.get(`/${this.name}/${id}`)
if(res.code===0){
this.model=res.data
this.title='编辑'
this.afterOpen(id)
}else{
this.$notification.error({
message:'获取数据失败',
description:res.msg
})
}
}
},
//更新表单在读取数据完成后的操作
afterOpen(id){
//获取该记录信息后，回显文件列表相关操作
dibootApi.post(`/demo/getFiles/${id}`).then(res=>{
if(res.code===0){
if(res.data.downloadFile!==undefined){
res.data.downloadFile.forEach(data=>{
this.downloadFiles.push(this.fileFormatter(data))
})
}
}
})
},
//重写a-upload的文件上传处理方式
downloadFilesCustomRequest(data){
this.saveFile(data)
},
//上传并保存文件
saveFile(data){
constformData=newFormData()
formData.append('file',data.file)
dibootApi.upload('/demo/upload',formData).then((res)=>{
if(res.code===0){
letfile=this.fileFormatter(res.data)
//上传单个文件后，将该文件会先到a-upload组件的已上传文件列表中的操作
this.downloadFiles.push(file)
}else{
this.$message.error(res.msg)
}
})
},
//对上传成功返回的数据进行格式化处理，格式化a-upload能显示在已上传列表中的格式（这个格式官方文档有给出的）
fileFormatter(data){
letfile={
uid:data.uuid,//文件唯一标识，建议设置为负数，防止和内部产生的id冲突
name:data.name,//文件名
status:'done',//状态有：uploadingdoneerrorremoved
response:'{"status":"success"}',//服务端响应内容
}
returnfile
},
//没错，删除某个已上传的文件的时候，就是调用的这里
handleDownloadFileRemove(file){
constindex=this.downloadFiles.indexOf(file)
constnewFileList=this.downloadFiles.slice()
newFileList.splice(index,1)
this.downloadFiles=newFileList
},
//表单校验就靠他了，不过这里面还是可以对需要提交的一些数据做些手脚的
validate(){
returnnewPromise((resolve,reject)=>{
this.form.validateFields((err,fieldsValue)=>{
if(!err){
//设置上传文件列表
constdownloadFiles=this.downloadFiles.map(o=>{
returno.uid
})
constvalues={
...fieldsValue,
'downloadFiles':downloadFiles
}
resolve(values)
}else{
reject(err)
}
})
})
},
//表单提交的相关操作
asynconSubmit(){
constvalues=awaitthis.validate()
try{
letresult={}
if(this.model.id===undefined){
//新增该记录
result=awaitthis.add(values)
}else{
//更新该记录
values['id']=this.model.id
result=awaitthis.update(values)
}

//执行提交成功的一系列后续操作
this.submitSuccess(result)
}catch(e){
//执行提交失败的一系列后续操作
this.submitFailed(e)
}
},
//新增数据的操作
asyncadd(values){
....
},
//更新数据的操作
asyncupdate(values){
...
}
}
}

编写SpringBoot相关的接口代码

DemoController

/***
*获取文件信息列表
*@paramid
*@return
*@throwsException
*/
@PostMapping("/getFiles/{id}")
publicJsonResultgetFilesMap(@PathVariable("id")Serializableid)throwsException{
Listfiles=fileService.getEntityList(
Wrappers.lambdaQuery()
.eq(File::getRelObjType,Demo.class.getSimpleName())
.eq(File::getRelObjId,id)
);
returnnewJsonResult(Status.OK,files);
}

/***
*上传文件
*@paramfile
*@paramrequest
*@return
*@throwsException
*/
@PostMapping("/upload")
publicJsonResultupload(@RequestParam("file")MultipartFilefile)throwsException{
FilefileEntity=demoService.uploadFile(file);
returnnewJsonResult(Status.OK,fileEntity,"上传文件成功");
}

/***
*创建成功后的相关处理
*@paramentity
*@return
*/
@Override
protectedStringafterCreated(BaseEntityentity)throwsException{
DemoDTOdemoDTO=(DemoDTO)entity;
//更新文件关联信息
demoService.updateFiles(newArrayList(){{
addAll(demoDTO.getDownloadFiles());
}},demoDTO.getId(),true);
returnnull;
}

/***
*更新成功后的相关处理
*@paramentity
*@return
*/
@Override
protectedStringafterUpdated(BaseEntityentity)throwsException{
DemoDTOdemoDTO=(DemoDTO)entity;
//更新文件关联信息
demoService.updateFiles(newArrayList(){{
addAll(demoDTO.getDownloadFiles());
}},demoDTO.getId(),false);
returnnull;
}

DemoService

@Override
publicFileuploadFile(MultipartFilefile){
if(V.isEmpty(file)){
thrownewBusinessException(Status.FAIL_OPERATION,"请上传图片");
}
StringfileName=file.getOriginalFilename();
Stringext=fileName.substring(fileName.lastIndexOf(".")+1);
StringnewFileName=S.newUuid()+"."+ext;
//TODO:需要对合法的文件类型进行验证
if(FileHelper.isImage(ext)){
thrownewBusinessException(Status.FAIL_OPERATION,"请上传合法的文件类型");
};

//说明：此处为我们的处理流程，看官们需要根据自己的需求来对文件进行保存及处理（之后我们的File组件开源之后也可以按照此处的处理）
StringfilePath=FileHelper.saveFile(file,newFileName);
if(V.isEmpty(filePath)){
thrownewBusinessException(Status.FAIL_OPERATION,"图片上传失败");
}

FilefileEntity=newFile();
fileEntity.setRelObjType(Demo.class.getSimpleName());
fileEntity.setFileType(ext);
fileEntity.setName(fileName);
fileEntity.setPath(filePath);
Stringlink="/file/download/"+D.getYearMonth()+"_"+newFileName;
fileEntity.setLink(link);

booleansuccess=fileService.createEntity(fileEntity);
if(!success){
thrownewBusinessException(Status.FAIL_OPERATION,"上传文件失败");
}
returnfileEntity;
}

@Override
publicvoidupdateFiles(Listuuids,LongcurrentId,booleanisCreate){
//如果不是创建，需要删除不在列表中的file记录
if(!isCreate){
fileService.deleteEntities(Wrappers.lambdaQuery().notIn(File::getUuid,uuids));
}
//进行相关更新
booleansuccess=fileService.updateEntity(
Wrappers.lambdaUpdate()
.in(File::getUuid,uuids)
.set(File::getRelObjType,Demo.class.getSimpleName())
.set(File::getRelObjId,currentId));
if(!success){
thrownewBusinessException(Status.FAIL_OPERATION,"更新文件信息失败");
}
}

提示

该文章所有代码皆为方案示例，其中有些许删减，不确保能直接运行，如果各位有好的想法，欢迎一起探讨。

以上这篇antdform表单数据回显操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

antd form表单数据回显操作

热门推荐

随机推荐