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

简介: 基于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'); 
      })*/
    },


相关文章
|
7月前
|
UED
点晴OA办公系统如何实现业务表单的自定义设计
在点晴OA办公系统中,业务表单的自定义设计是一项重要的功能,它能够满足企业不同的业务需求,提高工作效率和协作能力。 随着企业的发展,不同的业务部门需要处理各种类型的表单,如人事表单、财务表单、项目表单等。如果这些表单无法根据实际需求进行自定义设计,就会导致工作效率低下、信息不准确、协作困难等问题。因此,实现业务表单的自定义设计是提高企业办公效率和协作能力的重要手段。
102 0
|
7月前
|
JSON 数据可视化 前端开发
可视化表单&试卷搭建平台技术详解
可视化表单&试卷搭建平台技术详解
120 0
|
7月前
|
前端开发 BI
jeecgboot中前端使用带有参数报表的方法
jeecgboot中前端使用带有参数报表的方法
352 0
|
5月前
|
前端开发 JavaScript 小程序
基于Vue开发的门户网站展示和后台数据管理系统
基于Vue开发的门户网站展示和后台数据管理系统
|
7月前
|
API 数据库
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(一)
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(一)
185 1
|
7月前
formdesigner支持jeecgboot的部门与人员组件
formdesigner支持jeecgboot的部门与人员组件
52 1
|
7月前
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(三)
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(三)
51 0
|
7月前
|
前端开发
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner正式发布
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner正式发布
51 0
|
7月前
|
前端开发
基于jeecgboot流程管理平台的自定义业务表单集成方法
基于jeecgboot流程管理平台的自定义业务表单集成方法
176 0
|
7月前
基于jeecgboot的flowable流程综合会签功能演示平台已经发布
基于jeecgboot的flowable流程综合会签功能演示平台已经发布
52 0