电商小程序有什么特点_antd form表奇数据回显操作

2021-01-05 09:55 admin
antd form表单数据回显操作       这篇文章主要介绍了antd form表单数据回显操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

//index页面
import React from 'react'
import { Table, Button, message, Input, Select, Modal, } from 'antd';
const Option = Select.Option;
import AddOrEdit from './AddOrEdit '
class List extends React.Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 state = {
 id: "",
 selectOpt: {
 getPopupContainer: () = {
 return this.refs.myForm
 tableOption: {
 //表头
 columns: [
 { title: '员工姓名', key: 'workerName', dataIndex: 'workerName' },
 { title: '员工工号', key: 'workNumber', dataIndex: 'workNumber' },
 title: "操作", key: 'action', className: 'columnsCenter', render: (text, record) = {
 return (
 a title="编辑" type="edit" this.addOrEditClick.bind(this, record)} 编辑 /a 
 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) {
 const self = 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) {
 const data = 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() {
 let self = 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() {
 const self = this;
 let { tableOption, modalOption, dataForm } = this.state;
 return (
 div 
 Button size="small" type="primary" this.addOrEditClick.bind(this, 0)} 新增 /Button 
 Table {...tableOption} bordered onChange={this.onTableChange.bind(this)} / 
 Modal {...modalOption} 
 {modalOption.visible AddOrEdit {...dataForm} / : null}
 /Modal 
 /div 
 componentDidMount() {
 this.loadTable();

//form表单页,点击编辑或新增的时候会弹出,并且编辑的时候下拉框value值就为表格当前的这一条数据对应的值
//对select里面的value值用getFieldDecorator进行绑定
import React from 'react'
import { Table, Button, Select, Form, message, Row, Col, } from 'antd';
const Option = Select.Option;
class AddOrEdit extends React.Component {
 //提交保存
 handleSubmit(e) {
 e.preventDefault();
 const self = this;
 this.pro凡科抠图.form.validateFieldsAndScroll((err, values) = {
 if (!err) {
 //提交保存
 api.post(APIS.yluAssessTarget, {
 data: {
 ...values,
 }).then(res = {
 ess(res.data.message)
 }).finally(() = {
 self.setState({ addOrEditFooterLoading: false })
 render() {
 const { workerNameList, workNumberList} = this.state;
 const { getFieldDecorator } = this.pro凡科抠图.form;
 const reqMeg = '不能为空';
 const renderOption = (arr, code, name) = arr arr.map((item, index) = {
 return ( Option key={index + item[code]} value={typeof (item[code]) === 'number' item[code].toString() : item[code]} {item[name]} /Option )
 }) : null
 return (
 Form styleName="form_box" onSubmit={this.handleSubmit.bind(this)} 
 Col {...span24} 
 FormItem label="员工姓名" {...formItemLayout} hasFeedback 
 {getFieldDecorator('workerName', {
 rules: [{ required: true, message: reqMeg }]
 })( Select
 placeholder="请选择"
 {renderOption(workerNameList, 'workCode', 'name')}
 /Select )}
 /FormItem 
 /Col 
 Col {...span24} 
 FormItem label="员工工号" {...formItemLayout} hasFeedback 
 {getFieldDecorator('workNumber', {
 rules: [{ required: true, message: reqMeg }]
 })( Select
 placeholder="请选择"
 {renderOption(workNumberList, 'workNumber', 'name')}
 /Select )}
 /FormItem 
 /Col 
 /Form 
export default AddOrEdit;

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

前言

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

方案设计

前端方案设计

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

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

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

后端方案设计

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

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

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

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

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

让代码说话

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

构建表单

 a-form :form="form" 
 a-form-item label="名称" 
 a-input v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" / 
 /a-form-item 
 a-form-item 
 a-upload 
 :multiple="true" 
 :fileList="downloadFiles" 
 :remove="handleDownloadFileRemove" 
 :customRequest="downloadFilesCustomRequest" 
 a-button a-icon type="upload" 相关下载 /a-button 
 /a-upload 
 /a-form-item 
 /a-form 

编写js代码

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

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

const dibootApi = {
 get (url, params) { 
 return axios.get(url, { 
 params 
 upload(url, formData) { 
 return service({ 
 url, 
 method: 'POST', 
 data: formData 
export default dibootApi

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

export default {
 name: 'demoForm',
 data () {
 title: '新建', // 该表单的功能标题
 form: this.$form.createForm(this), // 表单数据初始化,没什么好说的
 model: {}, // 如果是更新表单,之前的数据放到这里,来做数据初始化显示之用
 downloadFiles: [] // 已经上传的文件列表
 methods: {
 // 初始打开的表单时的处理(如果是更新表单,这里首先需要读取出相关数据)
 async open (id) { 
 if (id === undefined) { 
 // 没有id数据则认为是新建 
 this.model = {} 
 this.afterOpen() 
 } else { 
 // 否则作为更新处理 
 const res = await dibootApi.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){ 
 const formData = new FormData() 
 formData.append('file', data.file) 
 dibootApi.upload('/demo/upload', formData).then((res) = { 
 if (res.code === 0){ 
 let file = this.fileFormatter(res.data) 
 // 上传单个文件后,将该文件会先到a-upload组件的已上传文件列表中的操作
 this.downloadFiles.push(file) 
 } else { 
 this.$message.error(res.msg) 
 // 对上传成功返回的数据进行格式化处理,格式化a-upload能显示在已上传列表中的格式(这个格式官方文档有给出的)
 fileFormatter(data) { 
 let file = { 
 uid: data.uuid, // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突 
 name: data.name, // 文件名 
 status: 'done', // 状态有:uploading done error removed 
 response: '{"status": "success"}', // 服务端响应内容 
 return file 
 // 没错,删除某个已上传的文件的时候,就是调用的这里
 handleDownloadFileRemove (file) { 
 const index = this.downloadFiles.indexOf(file) 
 const newFileList = this.downloadFiles.slice() 
 newFileList.splice(index, 1) 
 this.downloadFiles = newFileList 
 // 表单校验就靠他了,不过这里面还是可以对需要提交的一些数据做些手脚的
 validate () { 
 return new Promise((resolve, reject) = { 
 this.form.validateFields((err, fieldsValue) = { 
 if (!err) { 
 // 设置上传文件列表 
 const downloadFiles = this.downloadFiles.map(o = { 
 return o.uid 
 const values = { 
 ...fieldsValue, 
 'downloadFiles': downloadFiles
 resolve(values) 
 } else { 
 reject(err) 
 // 表单提交的相关操作
 async onSubmit () { 
 const values = await this.validate() 
 try { 
 let result = {} 
 if (this.model.id === undefined) { 
 // 新增该记录 
 result = await this.add(values) 
 } else { 
 // 更新该记录 
 values['id'] = this.model.id 
 result = await this.update(values) 
 // 执行提交成功的一系列后续操作 
 ess(result) 
 } catch (e) { 
 // 执行提交失败的一系列后续操作 
 this.submitFailed(e) 
 // 新增数据的操作
 async add (values) {
 ....
 // 更新数据的操作
 async update (values) {

编写SpringBoot相关的接口代码

DemoController

/*** 
 * 获取文件信息列表 
 * @param id 
 * @return 
 * @throws Exception 
@PostMapping("/getFiles/{id}") 
public JsonResult getFilesMap(@PathVariable("id") Serializable id) throws Exception{ 
 List File files = fileService.getEntityList( 
 Wrappers. File lambdaQuery() 
 .eq(File::getRelObjType, Demo.class.getSimpleName()) 
 .eq(File::getRelObjId, id) 
 return new JsonResult(Status.OK, files); 
/*** 
 * 上传文件 
 * @param file 
 * @param request 
 * @return 
 * @throws Exception 
@PostMapping("/upload") 
public JsonResult upload(@RequestParam("file") MultipartFile file) throws Exception { 
 File fileEntity = demoService.uploadFile(file); 
 return new JsonResult(Status.OK, fileEntity, "上传文件成功"); 
* 创建成功后的相关处理
* @param entity
* @return
@Override
protected String afterCreated(BaseEntity entity) throws Exception {
 DemoDTO demoDTO = (DemoDTO) entity;
 // 更新文件关联信息
 demoService.updateFiles(new ArrayList String (){{
 addAll(demoDTO.getDownloadFiles());
 }}, demoDTO.getId(), true);
 return null;
* 更新成功后的相关处理
* @param entity
* @return
@Override
protected String afterUpdated(BaseEntity entity) throws Exception {
 DemoDTO demoDTO = (DemoDTO) entity;
 // 更新文件关联信息
 demoService.updateFiles(new ArrayList String (){{
 addAll(demoDTO.getDownloadFiles());
 }}, demoDTO.getId(), false);
 return null;

DemoService

@Override 
public File uploadFile(MultipartFile file) { 
 if(V.isEmpty(file)){ 
 throw new BusinessException(Status.FAIL_OPERATION, "请上传图片"); 
 String fileName = file.getOriginalFilename(); 
 String ext = fileName.substring(fileName.lastIndexOf(".")+1); 
 String newFileName = S.newUuid() + "." + ext; 
 //TODO: 需要对合法的文件类型进行验证 
 if(FileHelper.isImage(ext)){ 
 throw new BusinessException(Status.FAIL_OPERATION, "请上传合法的文件类型"); 
 // 说明:此处为我们的处理流程,看官们需要根据自己的需求来对文件进行保存及处理(之后我们的File组件开源之后也可以按照此处的处理)
 String filePath = FileHelper.saveFile(file, newFileName); 
 if(V.isEmpty(filePath)){ 
 throw new BusinessException(Status.FAIL_OPERATION, "图片上传失败"); 
 File fileEntity = new File(); 
 fileEntity.setRelObjType(Demo.class.getSimpleName()); 
 fileEntity.setFileType(ext); 
 fileEntity.setName(fileName); 
 fileEntity.setPath(filePath); 
 String link = "/file/download/" + D.getYearMonth() + "_" + newFileName; 
 fileEntity.setLink(link); 
 ess = fileService.createEntity(fileEntity); 
 if (!success){ 
 throw new BusinessException(Status.FAIL_OPERATION, "上传文件失败"); 
 return fileEntity; 
@Override 
public void updateFiles(List String uuids, Long currentId, boolean isCreate) { 
 // 如果不是创建,需要删除不在列表中的file记录 
 if (!isCreate){ 
 fileService.deleteEntities(Wrappers. File lambdaQuery().notIn(File::getUuid, uuids)); 
 // 进行相关更新 
 ess = fileService.updateEntity( 
 Wrappers. File lambdaUpdate() 
 .in(File::getUuid, uuids) 
 .set(File::getRelObjType, Demo.class.getSimpleName()) 
 .set(File::getRelObjId, currentId)); 
 if (!success){ 
 throw new BusinessException(Status.FAIL_OPERATION, "更新文件信息失败"); 
}

提示

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

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