基于jeecgboot流程管理平台的在线表单设计修改成formdesigner（二）

5、表单配置与流程模型里的表单预览功能修改

SysFormList.vue

增加预览表单 如下

<el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
         <div class="test-form">
           <preview :itemList="itemList"  :formConf="formConf" v-if="formConfOpen"/>
         </div>
  </el-dialog>

其中

this.formConf = JSON.parse(row.formContent)
this.itemList = this.formConf.list

界面类似如下： 

modelerDesign.vue 也是类似上面修改就好了6、

6、附件上传修改

主要修改文件previewRender.js
//先修改在这里,后续需要优化
 function vModel(self, dataObject) {
   dataObject.props.value = self.value;
   dataObject.on.input = val => {
     self.$emit('input', val)
   }
   //判断是否为上传组件
   if(self.conf.compType === 'upload'){
     //for token add by nbacheng 2022-09-07
     const token = Vue.ls.get(ACCESS_TOKEN);
     dataObject.attrs['headers'] = {"X-Access-Token":token};
     dataObject.attrs['before-upload'] = file=>{
       //非限定后缀不允许上传
       const fileName = file.name;
       const suffixName = fileName.split('.').pop();
       
       if(!self.conf.accept.includes(suffixName)){ 
         self.$message.error('该后缀文件不允许上传');
         return false;
       }
       const fileSize = file.size;
       if(fileSize>dataObject.props.fileSize*1024*1024){
         self.$message.error('文件大小超出限制，请检查！');
         return false;
       }
     }    //for get return file url add by nbacheng 2022-09-07
     dataObject.attrs['on-success'] = file=>{
         //console.log("on-success",file);
         var filename=file.message.substring(file.message.lastIndexOf('/')+1)  //获取文件名称
         let fileObj = {name: filename, url: file.message}
         console.log("dataObject=",dataObject);
         console.log("self.conf=",self.conf);
         let oldValue = [];
         if(dataObject.props.value) {
            oldValue = JSON.parse(dataObject.props.value);
         }else {
           oldValue = [];
         }
         if (oldValue) {
           oldValue.push(fileObj)
         } else {
           oldValue = [fileObj]
         }
         self.$emit('input',JSON.stringify(oldValue));
         console.log("on-success value",oldValue);
     } 
     dataObject.attrs['on-remove'] = (file, fileList) => {
       console.log("on-remove file,fileList",file,fileList);
       let oldValue = JSON.parse(dataObject.props.value);
       console.log("on-remove oldValue",oldValue);
       //file 删除的文件
       //过滤掉删除的文件  
       let newValue = oldValue.filter(item => item.name !== file.name)
       self.$emit('input',JSON.stringify(newValue));
       console.log("on-remove newValue",newValue);
     }
     
     dataObject.attrs['on-error'] = (file) => {
       console.log("on-error file",file);
     }
     
     dataObject.attrs['on-preview'] = (file) => {
       console.log("on-preview file",file);
       //download(file);
     }
     //for get return file url add by nbacheng 2022-09-07

7、修改一些bug

清空下载下来的源代码功能也有问题，可能跟我的组件版本相关吧

Error in v-on handler: "TypeError: this.$confirm(...).then is not a function"

把原来注释掉，修改如下

clear(){
       let that = this;
       that.$confirm({
         title: '确认删除',
         content: '此操作将清空整个表单,是否继续?',
         onOk: function () {
           that.$emit('clear'); 
         }
       })  
       /*this.$confirm('此操作将清空整个表单,是否继续?','提示').then(() => {
           this.$emit('clear'); 
       })*/
     },