antd form表單數(shù)據(jù)回顯操作
更新時間：2020年11月02日 09:37:49 作者：Met_life
這篇文章主要介紹了antd form表單數(shù)據(jù)回顯操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
index頁面有一個表格，有一個新增按鈕，點擊新增按鈕或表格編輯彈出表單模塊，如果是編輯，會回顯對應(yīng)的表格中的數(shù)據(jù)
//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(props) {
super(props);
}
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" onClick={this.addOrEditClick.bind(this, record)}>編輯</a>
)
}
}
],
dataSource: [], //表格總數(shù)據(jù)
loading: false,
scroll: { x: 1600 },
//分頁初始數(shù)據(jù)
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
},
}
//編輯數(shù)據(jù)回顯
addOrEditClick(record) {
const self = this;
let { modalOption, dataForm } = this.state;
dataForm.param = JSON.parse(JSON.stringify(dataForm.model));
//如果是編輯彈出表單并且數(shù)據(jù)回顯，否則就是新增
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: "查詢參數(shù)"http://分公司名
}
}).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" onClick={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值就為表格當前的這一條數(shù)據(jù)對應(yīng)的值
//對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.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;
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實現(xiàn)文件列表上傳與更新回顯的前后端處理方案
前言
在企業(yè)應(yīng)用的快速開發(fā)中，我們需要盡快的完成一些功能。如果您使用了Ant Design Vue，在進行表單的文件上傳相關(guān)功能開發(fā)的時候，您肯定迫不及待地需要找到一篇包治百病的文章，正是如此，才有了該文的誕生，愿以此文解君憂。
方案設(shè)計
前端方案設(shè)計
重寫a-upload的文件上傳方式，使用axios來進行上傳
選擇一個文件后立即進行上傳，前端記錄上傳成功后的name和uid，并構(gòu)建一個File實例，用于a-upload組件的已上傳文件列表的回顯
提交前讓文件列表轉(zhuǎn)化為要后端要處理的uid列表
后端方案設(shè)計
提供一個統(tǒng)一上傳單個文件的接口，每個文件選擇后自動上傳都將上傳到該接口，并寫入到數(shù)據(jù)庫的file數(shù)據(jù)表中
對表單數(shù)據(jù)新建完成后，對上傳的文件列表進行當前實體記錄的綁定
對表單數(shù)據(jù)更新完成后，檢測該實體記錄的所有文件列表，對沒有在該列表中的uid的文件列表進行刪除，然后對該列表中所有的uid文件記錄進行當前實體記錄的綁定
新建與更新的一致性處理方案
因為更新表單在讀取舊數(shù)據(jù)后，需要與新選擇文件進行同樣的格式化處理，這里的處理流程一樣，進行回顯的數(shù)據(jù)是一樣的，提交表單也都是提交file表中已經(jīng)存在的uid列表，所以這里的數(shù)據(jù)結(jié)構(gòu)是一致的，處理起來將會更加簡潔明了。
讓代碼說話
為了讓各位看官老爺們便于理解，直接上代碼，希望能將整件事說明白。
構(gòu)建表單
<a-form :form="form">
<a-form-item label="名稱" style="margin-bottom: 0;">
<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 class="upload-btn"> <a-icon type="upload" > 相關(guān)下載 </a-button>
</a-upload>
</a-form-item>
</a-form>
編寫js代碼
請求后端接口的token、header以及baseUrl等我已默認您已經(jīng)在axios的統(tǒng)一設(shè)置中已經(jīng)配置好了
為了簡化axios相關(guān)操作，我們將axios進行了如下封裝（您也可以按此完全使用axios來直接對數(shù)據(jù)進行提交等）：
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), // 表單數(shù)據(jù)初始化，沒什么好說的
model: {}, // 如果是更新表單，之前的數(shù)據(jù)放到這里，來做數(shù)據(jù)初始化顯示之用
downloadFiles: [] // 已經(jīng)上傳的文件列表
},
methods: {
// 初始打開的表單時的處理（如果是更新表單，這里首先需要讀取出相關(guān)數(shù)據(jù)）
async open (id) {
if (id === undefined) {
// 沒有id數(shù)據(jù)則認為是新建
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: '獲取數(shù)據(jù)失敗',
description: res.msg
})
}
}
},
// 更新表單在讀取數(shù)據(jù)完成后的操作
afterOpen (id) {
// 獲取該記錄信息后，回顯文件列表相關(guān)操作
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)
}
})
},
// 對上傳成功返回的數(shù)據(jù)進行格式化處理，格式化a-upload能顯示在已上傳列表中的格式（這個格式官方文檔有給出的）
fileFormatter(data) {
let file = {
uid: data.uuid, // 文件唯一標識，建議設(shè)置為負數(shù)，防止和內(nèi)部產(chǎn)生的 id 沖突
name: data.name, // 文件名
status: 'done', // 狀態(tài)有：uploading done error removed
response: '{"status": "success"}', // 服務(wù)端響應(yīng)內(nèi)容
}
return file
},
// 沒錯，刪除某個已上傳的文件的時候，就是調(diào)用的這里
handleDownloadFileRemove (file) {
const index = this.downloadFiles.indexOf(file)
const newFileList = this.downloadFiles.slice()
newFileList.splice(index, 1)
this.downloadFiles = newFileList
},
// 表單校驗就靠他了，不過這里面還是可以對需要提交的一些數(shù)據(jù)做些手腳的
validate () {
return new Promise((resolve, reject) => {
this.form.validateFields((err, fieldsValue) => {
if (!err) {
// 設(shè)置上傳文件列表
const downloadFiles = this.downloadFiles.map(o => {
return o.uid
})
const values = {
...fieldsValue,
'downloadFiles': downloadFiles
}
resolve(values)
} else {
reject(err)
}
})
})
},
// 表單提交的相關(guān)操作
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)
}
// 執(zhí)行提交成功的一系列后續(xù)操作
this.submitSuccess(result)
} catch (e) {
// 執(zhí)行提交失敗的一系列后續(xù)操作
this.submitFailed(e)
}
},
// 新增數(shù)據(jù)的操作
async add (values) {
....
},
// 更新數(shù)據(jù)的操作
async update (values) {
...
}
}
}
編寫SpringBoot相關(guān)的接口代碼
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, "上傳文件成功");
}
/***
* 創(chuàng)建成功后的相關(guān)處理
* @param entity
* @return
*/
@Override
protected String afterCreated(BaseEntity entity) throws Exception {
DemoDTO demoDTO = (DemoDTO) entity;
// 更新文件關(guān)聯(lián)信息
demoService.updateFiles(new ArrayList<String>(){{
addAll(demoDTO.getDownloadFiles());
}}, demoDTO.getId(), true);
return null;
}
/***
* 更新成功后的相關(guān)處理
* @param entity
* @return
*/
@Override
protected String afterUpdated(BaseEntity entity) throws Exception {
DemoDTO demoDTO = (DemoDTO) entity;
// 更新文件關(guān)聯(lián)信息
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, "請上傳合法的文件類型");
};
// 說明：此處為我們的處理流程，看官們需要根據(jù)自己的需求來對文件進行保存及處理（之后我們的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);
boolean success = fileService.createEntity(fileEntity);
if (!success){
throw new BusinessException(Status.FAIL_OPERATION, "上傳文件失敗");
}
return fileEntity;
}
@Override
public void updateFiles(List<String> uuids, Long currentId, boolean isCreate) {
// 如果不是創(chuàng)建，需要刪除不在列表中的file記錄
if (!isCreate){
fileService.deleteEntities(Wrappers.<File>lambdaQuery().notIn(File::getUuid, uuids));
}
// 進行相關(guān)更新
boolean success = 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表單數(shù)據(jù)回顯操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
options是new Vue的參數(shù),我們一般稱之為選項或者構(gòu)造選項,下面這篇文章主要給大家介紹了關(guān)于Vue中options選項的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
vue的watch監(jiān)聽器取消的方法小結(jié)
在 Vue 中,watch 監(jiān)聽器是可以取消的,取消監(jiān)聽器的方式取決于你是如何使用 watch 的,所以本文給大家餓介紹了vue的watch監(jiān)聽器取消的方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2025-02-02
下面小編就為大家分享一篇快速解決vue-cli不能初始化webpack模板的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
當我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項目中如何使用百度地圖api(含實例)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue.js在標簽屬性中插入變量參數(shù)的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
在Vue項目中實現(xiàn)首頁布局,包括可收放的左側(cè)菜單和主體內(nèi)容區(qū),在store中管理菜單狀態(tài),通過修改isCollapse狀態(tài)控制菜單的展開與收起,在home.vue中編寫左側(cè)菜單欄的代碼和樣式,實現(xiàn)一個響應(yīng)式的用戶界面2024-09-09
electron + vue項目實現(xiàn)打印小票功能及實現(xiàn)代碼
這篇文章主要介紹了electron + vue項目實現(xiàn)打印小票功能,需要的朋友可以參考下2018-11-11
vue項目實現(xiàn)webpack配置代理,解決跨域問題
這篇文章主要介紹了vue項目實現(xiàn)webpack配置代理,解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
vue本地模擬服務(wù)器請求mock數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了關(guān)于vue本地模擬服務(wù)器請求mock數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03