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'); })*/ },