vue中添加附件以及表单内表格动态添加的功能实现

vue前端表单自动生成地址

form-generator

vue中添加附件以及表单内表格动态添加的功能实现

页面展示

 
    
    
    点击上传
    
    
 
 

:limit="1" 限制附件数量

action ="dev-api/order/createHardWord"：文件上传的地址

:data="formData" 绑定的表单数据

:file-list="fileList"：文件列表

:http-request="httpRequest"：请求方式

:on-change="handleChange"：对附件进行处理

:auto-upload="false"：是否自动提交 ：否

 参数 
formData: {
         orderID: '',
         zt: '',
         lcgdlx: '',
         sjdjsj: '',
         sjcssj: '',
         lxr: '',
         lxrdh: '',
         lxryx: '',
         zyc: '',
         yjbm: '',
         ejbm: '',
         sjwtly: '',
         yxj: '',
         sjflone: '',
         sjfltwo: '',
 }
       fileList: [],
     // 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件
 ​
 方法
     httpRequest(option) {
       this.fileList.push(option)
     },
  handleChange (file, fileList) {
       this.fileList = fileList
     },

提交按钮

 
    
      
      提交
     重置
    
 
 ​
 ​
   //提交的方法
     submitForm: function () {
       // 使用form表单的数据格式
       let file = ""
       file = this.fileList.length ? this.fileList[0].raw : ''
       let paramsData = new FormData()
       // 将上传文件数组依次添加到参数paramsData中
       paramsData.append('file', file)
       paramsData.append('data', JSON.stringify(this.formData));
       paramsData.append('dataArray', JSON.stringify(this.bcglXiangXiList));
       axios.post('dev-api/order/createHardWord', paramsData, {
         headers: {
           'Content-Type': 'multipart/form-data; charset=utf-8'
         },
       })
         .then(res => {
           // console.log(paramsData.get('orderID'))
          if (res.data = '1'){
            console.log("成功")
            this.$refs.elForm.resetFields()//清除表单信息
            this.$refs.upload.clearFiles()//清空上传列表
            this.fileList = []//集合清空
            this.bcglXiangXiList = [];
            this.dialogFormVisible = false//关闭对话框
            this.$message.success("创建成功！")
          }else {
            this.$message.error("失败！,请检查");
          }
         }).catch(() => {
         this.$message.error("失败！");
       });
     },
 ​

后端接收代码

使用MultipartFile 进行文件参数的接收，MultipartFile是一个接口，并继承于InputStreamSource，该方法的返回类型是InputStream输入流类型，然后根据需求对文件进行解析

 InputStream fileInputStream = file.getInputStream();
 Workbook workbook = new XSSFWorkbook(fileInputStream);

 

 @PostMapping("createHardWord")
 @LoginRequired
 public AjaxResult createHardWord(@RequestParam("file") MultipartFile file, @RequestParam("data") String data, @RequestParam("dataArray") String dataArray) {
         int i = orderService.createHardWord(file, data, dataArray);
         return AjaxResult.success(i);
     }

表格内的添加和删除，选中功能的实现,有些是参考其他的文章，添加了多选的功能

   
       
         添加
      
      删除
      清空
      
        
        
        
          
        
          
        
 ​
        
          
        
          
        
              
         
 ​
         
              
         
          
         
                
         
          
         
               
         
    
 

对表格内容进行处理

handleAddDetails() {
       if (this.bcglXiangXiList == undefined) {
         this.bcglXiangXiList = new Array();
       }
       let obj = {};
       obj.sbfl = "";
       obj.sblx = "";
       obj.ip = "";
       obj.bj = "";
       obj.sbxh = "";
       obj.cs = "";
       this.bcglXiangXiList.push(obj);
     },
       handleDeleteDetails() {
       if (this.checkedDetail.length == 0) {
         this.$alert("请先选择要删除的数据", "提示", {
           confirmButtonText: "确定",
         });
       } else {
         this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1);
       }
     },
      handleDeleteAllDetails() {
       this.bcglXiangXiList = undefined;
     },
     
      //d窗
     rowClassName({ row, rowIndex }) {
       row.xh = rowIndex + 1;
     },
     //框选中数据
     handleDetailSelectionChange(selection) {
       this.ghs = selection.map(item => item.xh)
       this.selectedNum = selection.length
 ​
     },
     
     参数：
     
     bcglXiangXiList: [], 
 ​