!10 【Fix】修复文件上传成功触发非空校验的问题；增加文件预览和下载；

Merge pull request !10 from 逸尘/master

ruoyi-ui/src/components/parser/Parser.vue

@@ -104,18 +104,75 @@ function setValue(event, config, scheme) {
 }
 
 function buildListeners(scheme) {
-  const config = scheme.__config__
-  const methods = this.formConf.__methods__ || {}
-  const listeners = {}
+  const config = scheme.__config__;
+  const methods = this.formConf.__methods__ || {};
+  const listeners = {};
 
   // 给__methods__中的方法绑定this和event
-  Object.keys(methods).forEach(key => {
-    listeners[key] = event => methods[key].call(this, event)
-  })
-  // 响应 render.js 中的 vModel $emit('input', val)
-  listeners.input = event => setValue.call(this, event, config, scheme)
+  Object.keys(methods).forEach((key) => {
+    listeners[key] = (event) => methods[key].call(this, event);
+  });
 
-  return listeners
+  // 响应 render.js 中的 vModel $emit('input', val)
+  listeners.input = (event) => setValue.call(this, event, config, scheme);
+
+  // 上传表单元素组件的成功、移除和预览事件
+  if (config.tag === "el-upload") {
+    listeners.upload = (response, file, fileList) =>
+      setUpload.call(this, config, scheme, response, file, fileList);
+
+    listeners.deleteUpload = (file, fileList) =>
+      deleteUpload.call(this, config, scheme, file, fileList);
+
+    listeners.previewUpload = (file, fileList) =>
+      window.open(file.url, "_blank");
+  }
+
+  return listeners;
+}
+
+//获取上传表单元素组件 上传的文件
+function setUpload(config, scheme, response, file, fileList) {
+  //response: 上传接口返回的数据
+  let fileObj = {
+    name: response.fileName,
+    url: response.url,
+    fileType: response.contentType,
+  };
+  let oldValue = "";
+  try {
+    oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]);
+  } catch (err) {
+    console.warn(err);
+  }
+
+  if (oldValue) {
+    oldValue.push(fileObj);
+  } else {
+    oldValue = [fileObj];
+  }
+
+  this.$set(config, "defaultValue", JSON.stringify(oldValue));
+  this.$set(
+    this[this.formConf.formModel],
+    scheme.__vModel__,
+    JSON.stringify(oldValue)
+  );
+}
+
+//获取上传表单元素组件 删除文件后的文件列表
+function deleteUpload(config, scheme, file, fileList) {
+  let oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]);
+
+  //file 删除的文件
+  //过滤掉删除的文件
+  let newValue = oldValue.filter((item) => item.name !== file.name);
+  this.$set(config, "defaultValue", JSON.stringify(newValue));
+  this.$set(
+    this[this.formConf.formModel],
+    scheme.__vModel__,
+    JSON.stringify(newValue)
+  );
 }
 
 export default {

ruoyi-ui/src/components/render/render.js

@@ -14,12 +14,37 @@ keys.forEach(key => {
   componentChild[tag] = value
 })
 
-function vModel(dataObject, defaultValue) {
-  dataObject.props.value = defaultValue
+function vModel(dataObject, defaultValue, config) {
+  // 获取上传表单元素组件上传的文件
+  if (config.tag === "el-upload") {
+    // 上传表单元素组件的成功和移除事件
+    dataObject.attrs["on-success"] = (response, file, fileList) => {
+      this.$emit("upload", response, file, fileList);
+    };
 
-  dataObject.on.input = val => {
-    this.$emit('input', val)
+    dataObject.attrs["on-remove"] = (file, fileList) => {
+      this.$emit("deleteUpload", file, fileList);
+    };
+
+    dataObject.attrs["on-preview"] = (file, fileList) => {
+      this.$emit("previewUpload", file, fileList);
+    };
+
+    // 获取上传表单元素的默认值
+    try {
+      dataObject.props["file-list"] = JSON.parse(defaultValue);
+    } catch (err) {
+      console.warn(err);
+    }
+
+    return;
   }
+
+  // 获取普通表单元素的值
+  dataObject.props.value = defaultValue;
+  dataObject.on.input = (val) => {
+    this.$emit("input", val);
+  };
 }
 
 function mountSlotFiles(h, confClone, children) {
@@ -50,7 +75,7 @@ function buildDataObject(confClone, dataObject) {
   Object.keys(confClone).forEach(key => {
     const val = confClone[key]
     if (key === '__vModel__') {
-      vModel.call(this, dataObject, confClone.__config__.defaultValue)
+      vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone.__config__)
     } else if (dataObject[key] !== undefined) {
       if (dataObject[key] === null
         || dataObject[key] instanceof RegExp

ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue

@@ -154,12 +154,23 @@ export default {
       })
     },
     fillFormData(form, data) {
-      form.fields.forEach(item => {
-        const val = data[item.__vModel__]
-        if (val) {
-          item.__config__.defaultValue = val
+      form.fields.forEach((item) => {
+        const vModel = item.__vModel__;
+        const val = data[item.__vModel__];
+
+        // 特殊处理el-upload，回显图片
+        if (item.__config__.tag === "el-upload") {
+          // 回显图片
+          item["file-list"] = (val || []).map((url) => ({
+            name: `${vModel}${i}`,
+            url,
+          }));
         }
-      })
+
+        if (val) {
+          item.__config__.defaultValue = val;
+        }
+      });
     },
     /** 获取流程变量内容 */
     processVariables(taskId) {