Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit cfc4c4e4 by Mr. Lan
Options

feat: 表单设计器添加文件上传功能。

parent af83992b
Inline Side-by-side
Showing with 185 additions and 12 deletions
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>
......
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'],
......
src/components/VueFormMaking/components/Upload/file.vue 0 → 100644
<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>
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)
......
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'],
components: {
FmUpload
},
props: ['element'],
components: {
FmUpload,
FileUpload
}
}
</script>
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: {
......
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: '上传地址',
......
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment