Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit dc14d7fd by lanyulei
Options

feat: 添加通过请求方式获取远端数据的功能。

parent f7bf98d3
Expand all
Inline Side-by-side
Showing with 100 additions and 40 deletions
src/components/VueFormMaking/App.vue
...@@ -9,13 +9,13 @@ ...@@ -9,13 +9,13 @@
<div class="fm-link"> <div class="fm-link">
<a target="_blank" href="http://form.xiaoyaoji.cn/pricing">{{ $t('header.pricing') }}</a> <a target="_blank" href="http://form.xiaoyaoji.cn/pricing">{{ $t('header.pricing') }}</a>
<a target="_blank" href="http://docs.form.xiaoyaoji.cn">{{ $t('header.document') }}</a> <a target="_blank" href="http://docs.form.xiaoyaoji.cn">{{ $t('header.document') }}</a>
<a v-if="$lang == 'zh-CN'" target="_blank" href="http://docs.form.xiaoyaoji.cn/zh/other/course.html">学习课程</a> <a v-if="$lang === 'zh-CN'" target="_blank" href="http://docs.form.xiaoyaoji.cn/zh/other/course.html">学习课程</a>
<a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GitHub</a> <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GitHub</a>
<div class="action-item"> <div class="action-item">
<el-dropdown trigger="click" @command="handleLangCommand"> <el-dropdown trigger="click" @command="handleLangCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{ $route.params.lang == 'zh-CN' ? '简体中文' : 'English' }}<i class="el-icon-arrow-down el-icon--right" /> {{ $route.params.lang === 'zh-CN' ? '简体中文' : 'English' }}<i class="el-icon-arrow-down el-icon--right" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh-CN">简体中文</el-dropdown-item> <el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<a class="ad" href="http://form.xiaoyaoji.cn" target="_blank">{{ $t('header.advanced') }}</a> <a class="ad" href="http://form.xiaoyaoji.cn" target="_blank">{{ $t('header.advanced') }}</a>
<a v-if="$lang == 'zh-CN'" class="ad" href="http://www.xiaoyaoji.cn" target="_blank">小幺鸡接口工具</a> <a v-if="$lang === 'zh-CN'" class="ad" href="http://www.xiaoyaoji.cn" target="_blank">小幺鸡接口工具</a>
</div> </div>
</div> </div>
<div class="fm-container"><router-view /></div> <div class="fm-container"><router-view /></div>
......
src/components/VueFormMaking/components/GenerateFormItem.vue
...@@ -329,6 +329,7 @@ ...@@ -329,6 +329,7 @@
<script> <script>
import FmUpload from './Upload' import FmUpload from './Upload'
import FileUpload from './Upload/file' import FileUpload from './Upload/file'
import axios from 'axios'
export default { export default {
name: 'GenetateFormItem', name: 'GenetateFormItem',
...@@ -388,7 +389,48 @@ export default { ...@@ -388,7 +389,48 @@ export default {
}, },
created() { created() {
if (this.widget.type !== 'cascader') { if (this.widget.type !== 'cascader') {
if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) { if (this.widget.options.remote === 99) {
let headers = JSON.parse(this.widget.options.requestMethod.headers)
headers["content-type"] = "application/json; charset=utf-8"
let params = JSON.parse(this.widget.options.requestMethod.params)
let axiosParams = {
url: this.widget.options.requestMethod.url,
method: this.widget.options.requestMethod.method,
headers: headers
}
if (this.widget.options.requestMethod.method === 'get') {
axiosParams["params"] = params
} else if (this.widget.options.requestMethod.method === 'post') {
axiosParams["data"] = params
}
axios(axiosParams).then(resp => {
let fields = []
if (this.widget.options.requestMethod.result) {
fields = this.widget.options.requestMethod.result.split(".")
} else {
fields = ["data"]
}
let result = resp.data
for (let f of fields) {
result = result[f]
}
this.widget.options.remoteOptions = result.map(item => {
return {
value: item[this.widget.options.props.value],
label: item[this.widget.options.props.label],
}
})
}).catch(err => {
console.log(err)
})
}
if (this.widget.options.remote !== 99 && this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
this.remote[this.widget.options.remoteFunc]((data) => { this.remote[this.widget.options.remoteFunc]((data) => {
if (this.widget.type !== 'cascader') { if (this.widget.type !== 'cascader') {
this.widget.options.remoteOptions = data.map(item => { this.widget.options.remoteOptions = data.map(item => {
...@@ -443,21 +485,21 @@ export default { ...@@ -443,21 +485,21 @@ export default {
this.dataModel = files this.dataModel = files
}, },
handleDisplayVerifiy() { handleDisplayVerifiy() {
if (Object.keys(this.widget.options).indexOf('displayVerifiy')>=0) { if (Object.keys(this.widget.options).indexOf('displayVerify')>=0) {
if (this.widget.options.displayVerifiy.type !== 'hide') { if (this.widget.options.displayVerify.type !== 'hide') {
var c = 0 var c = 0
for (var v of this.widget.options.displayVerifiy.list) { for (var v of this.widget.options.displayVerify.list) {
if (this.models[v.model].toString() === v.value) { if (this.models[v.model].toString() === v.value) {
c++ c++
} }
} }
if (this.widget.options.displayVerifiy.type === 'and') { if (this.widget.options.displayVerify.type === 'and') {
if (c !== this.widget.options.displayVerifiy.list.length) { if (c !== this.widget.options.displayVerify.list.length) {
this.showStatus = false this.showStatus = false
} else { } else {
this.showStatus = true this.showStatus = true
} }
} else if (this.widget.options.displayVerifiy.type === 'or') { } else if (this.widget.options.displayVerify.type === 'or') {
if (c === 0) { if (c === 0) {
this.showStatus = false this.showStatus = false
} else { } else {
......
src/components/VueFormMaking/components/WidgetForm.vue
<template> <template>
<div class="widget-form-container"> <div class="widget-form-container">
<div v-if="data.list.length == 0" class="form-empty">{{ $t('fm.description.containerEmpty') }}</div> <div v-if="data.list.length === 0" class="form-empty">{{ $t('fm.description.containerEmpty') }}</div>
<el-form :size="data.config.size" label-suffix=":" :label-position="data.config.labelPosition" :label-width="data.config.labelWidth + 'px'"> <el-form :size="data.config.size" label-suffix=":" :label-position="data.config.labelPosition" :label-width="data.config.labelWidth + 'px'">
<draggable <draggable
...@@ -14,13 +14,13 @@ ...@@ -14,13 +14,13 @@
<transition-group name="fade" tag="div" class="widget-form-list"> <transition-group name="fade" tag="div" class="widget-form-list">
<template v-for="(element, index) in data.list"> <template v-for="(element, index) in data.list">
<!-- 珊格 --> <!-- 珊格 -->
<template v-if="element.type == 'grid'"> <template v-if="element.type === 'grid'">
<el-row <el-row
v-if="element && element.key" v-if="element && element.key"
:key="element.key" :key="element.key"
class="widget-col widget-view" class="widget-col widget-view"
type="flex" type="flex"
:class="{active: selectWidget.key == element.key}" :class="{active: selectWidget.key === element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0" :gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify" :justify="element.options.justify"
:align="element.options.align" :align="element.options.align"
...@@ -52,18 +52,18 @@ ...@@ -52,18 +52,18 @@
</draggable> </draggable>
</el-col> </el-col>
<div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action"> <div v-if="selectWidget.key === element.key" class="widget-view-action widget-col-action">
<i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" /> <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
</div> </div>
<div v-if="selectWidget.key == element.key" class="widget-view-drag widget-col-drag"> <div v-if="selectWidget.key === element.key" class="widget-view-drag widget-col-drag">
<i class="iconfont icon-drag drag-widget" /> <i class="iconfont icon-drag drag-widget" />
</div> </div>
</el-row> </el-row>
</template> </template>
<!-- 子表单 --> <!-- 子表单 -->
<template v-else-if="element.type == 'subform'"> <template v-else-if="element.type === 'subform'">
<el-row <el-row
v-if="element && element.key" v-if="element && element.key"
:key="element.key" :key="element.key"
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
> >
<div <div
type="flex" type="flex"
:class="{active: selectWidget.key == element.key}" :class="{active: selectWidget.key === element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0" :gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify" :justify="element.options.justify"
:align="element.options.align" :align="element.options.align"
...@@ -117,11 +117,11 @@ ...@@ -117,11 +117,11 @@
</draggable> </draggable>
</el-col> </el-col>
<div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action"> <div v-if="selectWidget.key === element.key" class="widget-view-action widget-col-action">
<i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" /> <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
</div> </div>
<div v-if="selectWidget.key == element.key" class="widget-view-drag widget-col-drag"> <div v-if="selectWidget.key === element.key" class="widget-view-drag widget-col-drag">
<i class="iconfont icon-drag drag-widget" /> <i class="iconfont icon-drag drag-widget" />
</div> </div>
</div> </div>
...@@ -225,6 +225,14 @@ export default { ...@@ -225,6 +225,14 @@ export default {
}) })
} }
if (this.data.list[newIndex].options.requestMethod) {
this.data.list[newIndex].options.requestMethod = JSON.parse(JSON.stringify(this.data.list[newIndex].options.requestMethod))
}
if (this.data.list[newIndex].options.displayVerify) {
this.data.list[newIndex].options.displayVerify = JSON.parse(JSON.stringify(this.data.list[newIndex].options.displayVerify))
}
this.selectWidget = this.data.list[newIndex] this.selectWidget = this.data.list[newIndex]
}, },
handleWidgetColAdd($event, row, colIndex) { handleWidgetColAdd($event, row, colIndex) {
......
src/components/VueFormMaking/components/componentsConfig.js
...@@ -14,7 +14,7 @@ export const basicComponents = [ ...@@ -14,7 +14,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -36,7 +36,7 @@ export const basicComponents = [ ...@@ -36,7 +36,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -60,7 +60,7 @@ export const basicComponents = [ ...@@ -60,7 +60,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -103,7 +103,7 @@ export const basicComponents = [ ...@@ -103,7 +103,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -143,7 +143,7 @@ export const basicComponents = [ ...@@ -143,7 +143,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -208,7 +208,7 @@ export const basicComponents = [ ...@@ -208,7 +208,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -228,7 +228,7 @@ export const basicComponents = [ ...@@ -228,7 +228,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -262,6 +262,14 @@ export const basicComponents = [ ...@@ -262,6 +262,14 @@ export const basicComponents = [
remote: false, remote: false,
filterable: false, filterable: false,
remoteOptions: [], remoteOptions: [],
requestMethod: {
url: '',
method: 'get',
params: '{}',
headers: '{}',
result: 'data',
timeout: 10
},
props: { props: {
value: 'value', value: 'value',
label: 'label' label: 'label'
...@@ -270,7 +278,7 @@ export const basicComponents = [ ...@@ -270,7 +278,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -289,7 +297,7 @@ export const basicComponents = [ ...@@ -289,7 +297,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -314,7 +322,7 @@ export const basicComponents = [ ...@@ -314,7 +322,7 @@ export const basicComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -336,7 +344,7 @@ export const basicComponents = [ ...@@ -336,7 +344,7 @@ export const basicComponents = [
customClass: '', customClass: '',
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -356,7 +364,7 @@ export const advanceComponents = [ ...@@ -356,7 +364,7 @@ export const advanceComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -389,7 +397,7 @@ export const advanceComponents = [ ...@@ -389,7 +397,7 @@ export const advanceComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -416,7 +424,7 @@ export const advanceComponents = [ ...@@ -416,7 +424,7 @@ export const advanceComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -434,7 +442,7 @@ export const advanceComponents = [ ...@@ -434,7 +442,7 @@ export const advanceComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -486,7 +494,7 @@ export const advanceComponents = [ ...@@ -486,7 +494,7 @@ export const advanceComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -512,7 +520,7 @@ export const advanceComponents = [ ...@@ -512,7 +520,7 @@ export const advanceComponents = [
labelWidth: 100, labelWidth: 100,
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: true, labelWidthStatus: true,
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
...@@ -554,7 +562,7 @@ export const layoutComponents = [ ...@@ -554,7 +562,7 @@ export const layoutComponents = [
font_family: '', // 字体属性 font_family: '', // 字体属性
direction: 'horizontal', // horizontal / vertical 设置分割线方向 direction: 'horizontal', // horizontal / vertical 设置分割线方向
content_position: 'center', // left / right / center 设置分割线文案的位置 content_position: 'center', // left / right / center 设置分割线文案的位置
displayVerifiy: { displayVerify: {
type: 'hide', type: 'hide',
list: [{ list: [{
model: '字段标识', model: '字段标识',
......
src/components/VueFormMaking/lang/en-US.js
...@@ -102,6 +102,7 @@ export default { ...@@ -102,6 +102,7 @@ export default {
option: 'Option', option: 'Option',
staticData: 'Static Data', staticData: 'Static Data',
remoteData: 'Remote Date', remoteData: 'Remote Date',
requestMethod: 'Request Method',
remoteFunc: 'Remote Function', remoteFunc: 'Remote Function',
value: 'Value', value: 'Value',
label: 'Label', label: 'Label',
......
src/components/VueFormMaking/lang/zh-CN.js
...@@ -104,6 +104,7 @@ export default { ...@@ -104,6 +104,7 @@ export default {
option: '选项', option: '选项',
staticData: '静态数据', staticData: '静态数据',
remoteData: '远端数据', remoteData: '远端数据',
requestMethod: '请求方法',
remoteFunc: '远端方法', remoteFunc: '远端方法',
value: '值', value: '值',
label: '标签', label: '标签',
...@@ -178,9 +179,9 @@ export default { ...@@ -178,9 +179,9 @@ export default {
validatorType: '格式不正确', validatorType: '格式不正确',
validatorPattern: '格式不匹配', validatorPattern: '格式不匹配',
showAllLevels: '完整路径', showAllLevels: '完整路径',
displayVerifiy: '显示校验', displayVerify: '显示校验',
displayVerifiyPlaceholderModel: '请输入字段标识', displayVerifyPlaceholderModel: '请输入字段标识',
displayVerifiyPlaceholderValue: '请输入字段值' displayVerifyPlaceholderValue: '请输入字段值'
} }
}, },
upload: { upload: {
......
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