Merge pull request #31 from lanyulei/dev

表单设计器支持文件上传功能。

Merge pull request #31 from lanyulei/dev
表单设计器支持文件上传功能。
a0427fb7 · lanyulei · GitHub · af83992b · cfc4c4e4 · a0427fb7
Commit a0427fb7 authored Sep 27, 2020 by lanyulei Committed by GitHub Sep 27, 2020
8 changed files
--- a/src/components/VueFormMaking/components/Container.vue
+++ b/src/components/VueFormMaking/components/Container.vue
@@ -95,7 +95,7 @@
              <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">{{ $t('fm.config.form.title') }}</div>
            </el-header>
            <el-main class="config-content">
-              <widget-config v-show="configTab=='widget'" :data="widgetFormSelect" />
+              <widget-config v-if="widgetFormSelect!==null" v-show="configTab=='widget'" :data="widgetFormSelect" />
              <form-config v-show="configTab=='form'" :data="widgetForm.config" />
            </el-main>
          </el-container>

--- a/src/components/VueFormMaking/components/GenerateFormItem.vue
+++ b/src/components/VueFormMaking/components/GenerateFormItem.vue
@@ -17,6 +17,14 @@
      <template v-else-if="widget.type === 'editor'">
        <div class="previewEditorDiv" v-html="dataModel" />
      </template>
+      <template v-if="widget.type=='file'">
+        <div v-for="(uploadUrlItem, uploadUrlIndex) of dataModel" :key="uploadUrlIndex">
+          <i style="color: #909399;" class="el-icon-document" />
+          <a :href="uploadUrlItem.url" target="_blank">{{ uploadUrlItem.name }}</a>
+        </div>
+      </template>
      <template v-else-if="widget.type=='imgupload'">
        <fm-upload
          v-model="dataModel"
@@ -246,6 +254,10 @@
        />
      </template>
+      <template v-if="widget.type=='file'">
+        <FileUpload :element="widget" />
+      </template>
      <template v-if="widget.type === 'editor'">
        <vue-editor
          v-model="dataModel"
@@ -302,11 +314,13 @@
 <script>
 import FmUpload from './Upload'
+import FileUpload from './Upload/file'
 export default {
  name: 'GenetateFormItem',
  components: {
-    FmUpload
+    FmUpload,
+    FileUpload
  },
  /* eslint-disable */
  props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled', 'preview', 'isLabel'],

--- a/src/components/VueFormMaking/components/Upload/file.vue
+++ b/src/components/VueFormMaking/components/Upload/file.vue
+<template>
+  <div>
+    <el-upload
+      :action="element.options.action"
+      :on-success="handleSuccess"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :before-remove="beforeRemove"
+      multiple
+      :limit="element.options.length"
+      :headers="element.options.headers"
+      :on-exceed="handleExceed"
+      :file-list="element.options.defaultValue"
+      :disabled="element.options.disabled"
+      :style="{'width': element.options.width}"
+    >
+      <div v-if="!preview">
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">{{ element.options.tip }}</div>
+      </div>
+    </el-upload>
+  </div>
+</template>
+<script>
+export default {
+  name: 'FileUpload',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['element', 'preview'],
+  data() {
+    return {
+      currentRemoveUid: ''
+    }
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      this.element.options.defaultValue = fileList
+    },
+    handlePreview(file) {
+      window.open(file.url, '_blank')
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`最多允许上传 ${this.element.options.length} 个文件。`)
+    },
+    beforeRemove(file, fileList) {
+      this.currentRemoveUid = file.uid
+      return this.$confirm(`确定要移除 ${file.name}？`)
+    },
+    handleSuccess(response, file, fileList) {
+      this.element.options.defaultValue.push({
+        name: file.name,
+        url: response.data
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+</style>
--- a/src/components/VueFormMaking/components/WidgetConfig.vue
+++ b/src/components/VueFormMaking/components/WidgetConfig.vue
@@ -36,6 +36,9 @@
          v-model="data.options.labelWidthStatus"
        />
      </el-form-item>
+      <el-form-item v-if="Object.keys(data.options).indexOf('tip')>=0" :label="$t('fm.config.widget.tip')">
+        <el-input v-model="data.options.tip" />
+      </el-form-item>
      <!-- 兰玉磊结束添加 -->
      <!-- 高度 -->
@@ -75,7 +78,7 @@
        <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1" />
      </el-form-item>
      <!-- 是否多选 -->
-      <el-form-item v-if="data.type=='select' || data.type=='imgupload'" :label="$t('fm.config.widget.multiple')">
+      <el-form-item v-if="data.type=='select'" :label="$t('fm.config.widget.multiple')">
        <el-switch v-model="data.options.multiple" @change="handleSelectMuliple" />
      </el-form-item>
      <!-- 是否可搜索 -->
@@ -263,12 +266,12 @@
        </el-form-item>
      </template>
      <!-- 图片上传 -->
-      <template v-if="data.type=='imgupload'">
+      <template v-if="data.type=='imgupload' || data.type=='file'">
        <el-form-item :label="$t('fm.config.widget.limit')">
          <el-input v-model.number="data.options.length" type="number" />
        </el-form-item>
-        <el-form-item :label="$t('fm.config.widget.isQiniu')">
+        <el-form-item v-if="Object.keys(data.options).indexOf('isQiniu')>0" :label="$t('fm.config.widget.isQiniu')">
          <el-switch v-model="data.options.isQiniu" />
        </el-form-item>
        <template v-if="data.options.isQiniu">
@@ -283,6 +286,37 @@
          <el-form-item :label="$t('fm.config.widget.imageAction')" :required="true">
            <el-input v-model="data.options.action" />
          </el-form-item>
+          <el-form-item :label="$t('fm.config.widget.setHeaders')">
+            <el-row v-for="(uploadItem, uploadIndex) in headers" :key="uploadIndex">
+              <el-col :span="10">
+                <el-input
+                  v-model="uploadItem.key"
+                  type="textarea"
+                  :rows="1"
+                  placeholder="KEY"
+                />
+              </el-col>
+              <el-col :span="10" style="float: left; margin-left: 10px">
+                <el-input
+                  v-model="uploadItem.value"
+                  type="textarea"
+                  :rows="1"
+                  placeholder="VALUE"
+                />
+              </el-col>
+              <el-col :span="2">
+                <el-button
+                  type="danger"
+                  icon="el-icon-delete"
+                  plain
+                  circle
+                  style="padding: 4px; margin-left: 5px;"
+                  @click="handleDelHeader(uploadIndex)"
+                />
+              </el-col>
+            </el-row>
+            <el-button type="text" style="font-size: 12px; color: #1890ff" @click="handleAddHeader">添加</el-button>
+          </el-form-item>
        </template>
      </template>
      <!-- 多行文本 -->
@@ -438,7 +472,8 @@ export default {
        pattern: null,
        range: null,
        length: null
-      }
+      },
+      headers: []
    }
  },
  computed: {
@@ -474,9 +509,44 @@ export default {
        this.validateDataType(this.data.options.dataType)
        this.valiatePattern(this.data.options.pattern)
      }
+    },
+    headers: {
+      handler: function (val) {
+        if (this.data.options) {
+          if (this.headers.length > 0) {
+            this.data.options.headers = {}
+            for (var headerValue of this.headers) {
+              this.data.options.headers[headerValue.key] = headerValue.value
+            }
+          } else {
+            this.data.options.headers = {}
+          }
+        }
+      },
+      deep: true
    }
  },
+  created() {
+    this.handleInitHeaders()
+  },
  methods: {
+    handleInitHeaders() {
+      for (var key in this.data.options.headers) {
+        this.headers.push({
+          key: key,
+          value: this.data.options.headers[key]
+        })
+      }
+    },
+    handleAddHeader() {
+      this.headers.push({
+        key: '',
+        value: ''
+      })
+    },
+    handleDelHeader(index) {
+      this.headers.splice(index, 1)
+    },
    handleOptionsRemove(index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)

--- a/src/components/VueFormMaking/components/WidgetFormFields.vue
+++ b/src/components/VueFormMaking/components/WidgetFormFields.vue
@@ -157,6 +157,10 @@
      />
    </template>
+    <template v-if="element.type=='file'">
+      <FileUpload :element="element" />
+    </template>
    <template v-if="element.type == 'cascader'">
      <el-cascader
        v-model="element.options.defaultValue"
@@ -214,12 +218,14 @@
 <script>
 import FmUpload from './Upload'
+import FileUpload from './Upload/file'
 export default {
  name: 'WidgetFormFields',
  /* eslint-disable */ 
-    props: ['element'],
+  props: ['element'],
-    components: {
+  components: {
-      FmUpload
+    FmUpload,
-    },
+    FileUpload
  }
+}
 </script>
--- a/src/components/VueFormMaking/components/componentsConfig.js
+++ b/src/components/VueFormMaking/components/componentsConfig.js
@@ -308,6 +308,26 @@ export const advanceComponents = [
    }
  },
  {
+    type: 'file',
+    icon: 'icon-wenjianshangchuan',
+    options: {
+      defaultValue: [],
+      width: '',
+      tokenFunc: 'funcGetToken',
+      token: '',
+      domain: 'http://pfp81ptt6.bkt.clouddn.com/',
+      disabled: false,
+      length: 9,
+      headers: {},
+      // isQiniu: false,
+      tip: '', // 提示说明
+      action: 'https://jsonplaceholder.typicode.com/photos/',
+      labelWidth: 100,
+      labelWidthDisabled: false,
+      labelWidthStatus: true
+    }
+  },
+  {
    type: 'editor',
    icon: 'icon-fuwenbenkuang',
    options: {

--- a/src/components/VueFormMaking/lang/zh-CN.js
+++ b/src/components/VueFormMaking/lang/zh-CN.js
@@ -24,7 +24,8 @@ export default {
        subform: '子表单',
        grid: '栅格布局',
        tabs: '标签页',
-        divider: '分割线'
+        divider: '分割线',
+        file: '文件'
      },
      basic: {
        title: '基础字段'
@@ -117,6 +118,7 @@ export default {
        limit: '最大上传数',
        isQiniu: '使用七牛上传',
        tokenFunc: '获取七牛Token方法',
+        setHeaders: '设置上传的请求头部',
        imageAction: '图片上传地址',
        tip: '提示说明文字',
        action: '上传地址',

--- a/src/views/process/admin/template-manager.vue
+++ b/src/views/process/admin/template-manager.vue
@@ -103,7 +103,7 @@
                  upload
                  generate-code
                  generate-json
-                  :advance-fields="['editor', 'cascader', 'imgupload']"
+                  :advance-fields="['editor', 'imgupload', 'file']"
                >
                  <template slot="action" />
                </fm-making-form>