Skip to content

F
ferry_web
Commit dc14d7fd by lanyulei
Options

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

parent f7bf98d3
Showing with 100 additions and 40 deletions
src/components/VueFormMaking/App.vue
......@@ -9,13 +9,13 @@
<div class="fm-link">
<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 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>
<div class="action-item">
<el-dropdown trigger="click" @command="handleLangCommand">
<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>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
......@@ -25,7 +25,7 @@
</div>
<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 class="fm-container"><router-view /></div>
......
src/components/VueFormMaking/components/GenerateFormItem.vue
......@@ -329,6 +329,7 @@
<script>
import FmUpload from './Upload'
import FileUpload from './Upload/file'
import axios from 'axios'
export default {
name: 'GenetateFormItem',
......@@ -388,7 +389,48 @@ export default {
},
created() {
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) => {
if (this.widget.type !== 'cascader') {
this.widget.options.remoteOptions = data.map(item => {
......@@ -443,21 +485,21 @@ export default {
this.dataModel = files
},
handleDisplayVerifiy() {
if (Object.keys(this.widget.options).indexOf('displayVerifiy')>=0) {
if (this.widget.options.displayVerifiy.type !== 'hide') {
if (Object.keys(this.widget.options).indexOf('displayVerify')>=0) {
if (this.widget.options.displayVerify.type !== 'hide') {
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) {
c++
}
}
if (this.widget.options.displayVerifiy.type === 'and') {
if (c !== this.widget.options.displayVerifiy.list.length) {
if (this.widget.options.displayVerify.type === 'and') {
if (c !== this.widget.options.displayVerify.list.length) {
this.showStatus = false
} else {
this.showStatus = true
}
} else if (this.widget.options.displayVerifiy.type === 'or') {
} else if (this.widget.options.displayVerify.type === 'or') {
if (c === 0) {
this.showStatus = false
} else {
......
src/components/VueFormMaking/components/WidgetForm.vue
<template>
<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'">
<draggable
......@@ -14,13 +14,13 @@
<transition-group name="fade" tag="div" class="widget-form-list">
<template v-for="(element, index) in data.list">
<!-- 珊格 -->
<template v-if="element.type == 'grid'">
<template v-if="element.type === 'grid'">
<el-row
v-if="element && element.key"
:key="element.key"
class="widget-col widget-view"
type="flex"
:class="{active: selectWidget.key == element.key}"
:class="{active: selectWidget.key === element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify"
:align="element.options.align"
......@@ -52,18 +52,18 @@
</draggable>
</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)" />
</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" />
</div>
</el-row>
</template>
<!-- 子表单 -->
<template v-else-if="element.type == 'subform'">
<template v-else-if="element.type === 'subform'">
<el-row
v-if="element && element.key"
:key="element.key"
......@@ -77,7 +77,7 @@
>
<div
type="flex"
:class="{active: selectWidget.key == element.key}"
:class="{active: selectWidget.key === element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify"
:align="element.options.align"
......@@ -117,11 +117,11 @@
</draggable>
</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)" />
</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" />
</div>
</div>
......@@ -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]
},
handleWidgetColAdd($event, row, colIndex) {
......
src/components/VueFormMaking/components/componentsConfig.js
......@@ -14,7 +14,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -36,7 +36,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -60,7 +60,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -103,7 +103,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -143,7 +143,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -208,7 +208,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -228,7 +228,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -262,6 +262,14 @@ export const basicComponents = [
remote: false,
filterable: false,
remoteOptions: [],
requestMethod: {
url: '',
method: 'get',
params: '{}',
headers: '{}',
result: 'data',
timeout: 10
},
props: {
value: 'value',
label: 'label'
......@@ -270,7 +278,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -289,7 +297,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -314,7 +322,7 @@ export const basicComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -336,7 +344,7 @@ export const basicComponents = [
customClass: '',
labelWidth: 100,
labelWidthDisabled: false,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -356,7 +364,7 @@ export const advanceComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -389,7 +397,7 @@ export const advanceComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -416,7 +424,7 @@ export const advanceComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -434,7 +442,7 @@ export const advanceComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -486,7 +494,7 @@ export const advanceComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -512,7 +520,7 @@ export const advanceComponents = [
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: true,
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......@@ -554,7 +562,7 @@ export const layoutComponents = [
font_family: '', // 字体属性
direction: 'horizontal', // horizontal / vertical 设置分割线方向
content_position: 'center', // left / right / center 设置分割线文案的位置
displayVerifiy: {
displayVerify: {
type: 'hide',
list: [{
model: '字段标识',
......
src/components/VueFormMaking/lang/en-US.js
......@@ -102,6 +102,7 @@ export default {
option: 'Option',
staticData: 'Static Data',
remoteData: 'Remote Date',
requestMethod: 'Request Method',
remoteFunc: 'Remote Function',
value: 'Value',
label: 'Label',
......
src/components/VueFormMaking/lang/zh-CN.js
......@@ -104,6 +104,7 @@ export default {
option: '选项',
staticData: '静态数据',
remoteData: '远端数据',
requestMethod: '请求方法',
remoteFunc: '远端方法',
value: '值',
label: '标签',
......@@ -178,9 +179,9 @@ export default {
validatorType: '格式不正确',
validatorPattern: '格式不匹配',
showAllLevels: '完整路径',
displayVerifiy: '显示校验',
displayVerifiyPlaceholderModel: '请输入字段标识',
displayVerifiyPlaceholderValue: '请输入字段值'
displayVerify: '显示校验',
displayVerifyPlaceholderModel: '请输入字段标识',
displayVerifyPlaceholderValue: '请输入字段值'
}
},
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 to comment