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 183 additions and 10 deletions
src/components/VueFormMaking/components/Container.vue
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">{{ $t('fm.config.form.title') }}</div> <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">{{ $t('fm.config.form.title') }}</div>
</el-header> </el-header>
<el-main class="config-content"> <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" /> <form-config v-show="configTab=='form'" :data="widgetForm.config" />
</el-main> </el-main>
</el-container> </el-container>
......
src/components/VueFormMaking/components/GenerateFormItem.vue
...@@ -17,6 +17,14 @@ ...@@ -17,6 +17,14 @@
<template v-else-if="widget.type === 'editor'"> <template v-else-if="widget.type === 'editor'">
<div class="previewEditorDiv" v-html="dataModel" /> <div class="previewEditorDiv" v-html="dataModel" />
</template> </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'"> <template v-else-if="widget.type=='imgupload'">
<fm-upload <fm-upload
v-model="dataModel" v-model="dataModel"
...@@ -246,6 +254,10 @@ ...@@ -246,6 +254,10 @@
/> />
</template> </template>
<template v-if="widget.type=='file'">
<FileUpload :element="widget" />
</template>
<template v-if="widget.type === 'editor'"> <template v-if="widget.type === 'editor'">
<vue-editor <vue-editor
v-model="dataModel" v-model="dataModel"
...@@ -302,11 +314,13 @@ ...@@ -302,11 +314,13 @@
<script> <script>
import FmUpload from './Upload' import FmUpload from './Upload'
import FileUpload from './Upload/file'
export default { export default {
name: 'GenetateFormItem', name: 'GenetateFormItem',
components: { components: {
FmUpload FmUpload,
FileUpload
}, },
/* eslint-disable */ /* eslint-disable */
props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled', 'preview', 'isLabel'], 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 @@ ...@@ -36,6 +36,9 @@
v-model="data.options.labelWidthStatus" v-model="data.options.labelWidthStatus"
/> />
</el-form-item> </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 @@ ...@@ -75,7 +78,7 @@
<el-input-number v-model="data.options.step" :min="0" :max="100" :step="1" /> <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1" />
</el-form-item> </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-switch v-model="data.options.multiple" @change="handleSelectMuliple" />
</el-form-item> </el-form-item>
<!-- 是否可搜索 --> <!-- 是否可搜索 -->
...@@ -263,12 +266,12 @@ ...@@ -263,12 +266,12 @@
</el-form-item> </el-form-item>
</template> </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-form-item :label="$t('fm.config.widget.limit')">
<el-input v-model.number="data.options.length" type="number" /> <el-input v-model.number="data.options.length" type="number" />
</el-form-item> </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-switch v-model="data.options.isQiniu" />
</el-form-item> </el-form-item>
<template v-if="data.options.isQiniu"> <template v-if="data.options.isQiniu">
...@@ -283,6 +286,37 @@ ...@@ -283,6 +286,37 @@
<el-form-item :label="$t('fm.config.widget.imageAction')" :required="true"> <el-form-item :label="$t('fm.config.widget.imageAction')" :required="true">
<el-input v-model="data.options.action" /> <el-input v-model="data.options.action" />
</el-form-item> </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>
</template> </template>
<!-- 多行文本 --> <!-- 多行文本 -->
...@@ -438,7 +472,8 @@ export default { ...@@ -438,7 +472,8 @@ export default {
pattern: null, pattern: null,
range: null, range: null,
length: null length: null
} },
headers: []
} }
}, },
computed: { computed: {
...@@ -474,9 +509,44 @@ export default { ...@@ -474,9 +509,44 @@ export default {
this.validateDataType(this.data.options.dataType) this.validateDataType(this.data.options.dataType)
this.valiatePattern(this.data.options.pattern) 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: { 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) { handleOptionsRemove(index) {
if (this.data.type === 'grid') { if (this.data.type === 'grid') {
this.data.columns.splice(index, 1) this.data.columns.splice(index, 1)
......
src/components/VueFormMaking/components/WidgetFormFields.vue
...@@ -157,6 +157,10 @@ ...@@ -157,6 +157,10 @@
/> />
</template> </template>
<template v-if="element.type=='file'">
<FileUpload :element="element" />
</template>
<template v-if="element.type == 'cascader'"> <template v-if="element.type == 'cascader'">
<el-cascader <el-cascader
v-model="element.options.defaultValue" v-model="element.options.defaultValue"
...@@ -214,12 +218,14 @@ ...@@ -214,12 +218,14 @@
<script> <script>
import FmUpload from './Upload' import FmUpload from './Upload'
import FileUpload from './Upload/file'
export default { export default {
name: 'WidgetFormFields', name: 'WidgetFormFields',
/* eslint-disable */ /* eslint-disable */
props: ['element'], props: ['element'],
components: { components: {
FmUpload FmUpload,
}, FileUpload
} }
}
</script> </script>
src/components/VueFormMaking/components/componentsConfig.js
...@@ -308,6 +308,26 @@ export const advanceComponents = [ ...@@ -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', type: 'editor',
icon: 'icon-fuwenbenkuang', icon: 'icon-fuwenbenkuang',
options: { options: {
......
src/components/VueFormMaking/lang/zh-CN.js
...@@ -24,7 +24,8 @@ export default { ...@@ -24,7 +24,8 @@ export default {
subform: '子表单', subform: '子表单',
grid: '栅格布局', grid: '栅格布局',
tabs: '标签页', tabs: '标签页',
divider: '分割线' divider: '分割线',
file: '文件'
}, },
basic: { basic: {
title: '基础字段' title: '基础字段'
...@@ -117,6 +118,7 @@ export default { ...@@ -117,6 +118,7 @@ export default {
limit: '最大上传数', limit: '最大上传数',
isQiniu: '使用七牛上传', isQiniu: '使用七牛上传',
tokenFunc: '获取七牛Token方法', tokenFunc: '获取七牛Token方法',
setHeaders: '设置上传的请求头部',
imageAction: '图片上传地址', imageAction: '图片上传地址',
tip: '提示说明文字', tip: '提示说明文字',
action: '上传地址', action: '上传地址',
......
src/views/process/admin/template-manager.vue
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
upload upload
generate-code generate-code
generate-json generate-json
:advance-fields="['editor', 'cascader', 'imgupload']" :advance-fields="['editor', 'imgupload', 'file']"
> >
<template slot="action" /> <template slot="action" />
</fm-making-form> </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