修复 form generator 组件上传文件、图片报错的问题

Author: YunaiV

src/components/generator/config.js

@@ -499,7 +499,8 @@ export const selectComponents = [
     __slot__: {
       'list-type': true
     },
-    action: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+    // action: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
+    action: '/infra/file/upload', // 请求地址
     disabled: false,
     accept: '',
     name: 'file',

src/components/parser/Parser.vue

@@ -1,6 +1,7 @@
 <script>
 import { deepClone } from '@/utils/index'
 import render from '@/components/render/render.js'
+import {getAccessToken} from "@/utils/auth";
 
 const ruleTrigger = {
   'el-input': 'blur',
@@ -79,10 +80,51 @@ function formBtns(h) {
 }
 
 function renderFormItem(h, elementList) {
+  const that = this
+  const data = this[this.formConf.formModel]
+  // const formRef = that.$refs[that.formConf.formRef] // 这里直接添加有问题，此时还找不到表单 $refs
   return elementList.map(scheme => {
     const config = scheme.__config__
     const layout = layouts[config.layout]
 
+    // edit by 芋道源码，解决 el-upload 上传的问题
+    // 参考 https://github.com/JakHuang/form-generator/blob/master/src/components/parser/example/Index.vue 实现
+    const vModel = scheme.__vModel__
+    const val = data[vModel]
+    if (scheme.__config__.tag === 'el-upload') {
+      // 回显图片
+      scheme['file-list'] = (val || []).map(url => ({ name: url, url }))
+      // 上传地址 + 请求头
+      scheme.action = process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload"
+      scheme.headers = { Authorization: "Bearer " + getAccessToken() }
+      // 注意 on-success 不能绑定箭头函数！！！
+      scheme['on-success'] = function (response, file, fileList) {
+        if (response.code !== 0) {
+          return;
+        }
+        // 添加到 data 中
+        const prev = data[vModel] || []
+        this.$set(data, vModel, [
+          ...prev,
+          response.data
+        ])
+        // 发起表单校验
+        that.$refs[that.formConf.formRef].validateField(vModel)
+      }
+      // 注意 on-remove 不能绑定箭头函数！！！
+      scheme['on-remove'] = function (file, fileList) {
+        // 移除从 data 中
+        const prev = data[vModel] || []
+        const index = prev.indexOf(file.response.data)
+        if (index === -1) {
+          return
+        }
+        prev.splice(index, 1) // 直接移除即可，无需重复 set，因为 array 是引用
+        // 发起表单校验
+        that.$refs[that.formConf.formRef].validateField(vModel)
+      }
+    }
+
     if (layout) {
       return layout.call(this, h, scheme)
     }

src/main.js

@@ -69,8 +69,9 @@ import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
 import Tinymce from '@/components/tinymce/index.vue'
 Vue.component('tinymce', Tinymce)
 import '@/icons'
-import axios from 'axios'
-Vue.prototype.$axios = axios
+import request from "@/utils/request" // 实现 form generator 使用自己定义的 axios request 对象
+console.log(request)
+Vue.prototype.$axios = request
 import '@/styles/index.scss'
 
 /**

src/views/bpm/model/index.vue

@@ -429,7 +429,7 @@ export default {
       this.$modal.confirm('是否删除该流程！！').then(function() {
         deleteModel(row.id).then(response => {
           that.getList();
-          that.msgSuccess("删除成功");
+          that.$modal.msgSuccess("删除成功");
         })
       }).catch(() => {});
     },
@@ -439,7 +439,7 @@ export default {
       this.$modal.confirm('是否部署该流程！！').then(function() {
         deployModel(row.id).then(response => {
           that.getList();
-          that.msgSuccess("部署成功");
+          that.$modal.msgSuccess("部署成功");
         })
       }).catch(() => {});
     },

src/views/bpm/processInstance/create.vue

@@ -55,10 +55,9 @@
 <script>
 import {getProcessDefinitionBpmnXML, getProcessDefinitionList} from "@/api/bpm/definition";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
-import {getForm} from "@/api/bpm/form";
 import {decodeFields} from "@/utils/formGenerator";
 import Parser from '@/components/parser/Parser'
-import {createProcessInstance, getMyProcessInstancePage} from "@/api/bpm/processInstance";
+import {createProcessInstance} from "@/api/bpm/processInstance";
 
 // 流程实例的发起
 export default {