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(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: [],//表格總資料 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" 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值就為表格當前的這一條資料對應的值 //對select裡面的value值用getFieldDecorator進行繫結 import React from 'react' import { Table,Form,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',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="名稱" 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" > 相關下載 </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) } // 執行提交成功的一系列後續操作 this.submitSuccess(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()); }},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); 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) { // 如果不是建立,需要刪除不在列表中的file記錄 if (!isCreate){ fileService.deleteEntities(Wrappers.<File>lambdaQuery().notIn(File::getUuid,uuids)); } // 進行相關更新 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表單資料回顯操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。