Commit dc14d7fd by lanyulei

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

parent f7bf98d3
......@@ -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>
......
......@@ -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 {
......
......@@ -108,8 +108,87 @@
<el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
<el-radio-button :label="false">{{ $t('fm.config.widget.staticData') }}</el-radio-button>
<el-radio-button :label="true">{{ $t('fm.config.widget.remoteData') }}</el-radio-button>
<el-radio-button :label="99">{{ $t('fm.config.widget.requestMethod') }}</el-radio-button>
</el-radio-group>
<template v-if="data.options.remote">
<template v-if="data.options.remote === 99">
<div class="form-request-method">
<div>
<div class="form-request-method-title">URL</div>
<div class="form-request-method-content">
<el-input v-model="data.options.requestMethod.url" placeholder="请输入URL" size="mini" />
</div>
</div>
<div>
<div class="form-request-method-title">请求方式</div>
<div class="form-request-method-content">
<el-radio-group v-model="data.options.requestMethod.method" size="mini">
<el-radio label="get">Get</el-radio>
<el-radio label="post">Post</el-radio>
</el-radio-group>
</div>
</div>
<div>
<div class="form-request-method-title" style="margin-bottom: 6px">参数(JSON)</div>
<div class="form-request-method-content">
<el-input
v-model="data.options.requestMethod.params"
size="mini"
type="textarea"
:rows="2"
placeholder="请输入内容"
/>
</div>
</div>
<div>
<div class="form-request-method-title" style="margin-bottom: 6px">请求头(JSON)</div>
<div class="form-request-method-content">
<el-input
v-model="data.options.requestMethod.headers"
size="mini"
type="textarea"
:rows="2"
placeholder="请输入内容"
/>
</div>
</div>
<div>
<div class="form-request-method-title" style="margin-bottom: 6px">超时时间</div>
<div class="form-request-method-content">
<el-input
v-model="data.options.requestMethod.timeout"
size="mini"
type="number"
placeholder="请输入内容"
/>
</div>
</div>
<div>
<div class="form-request-method-title" style="margin-bottom: 6px">返回字段</div>
<div class="form-request-method-content">
<el-input
v-model="data.options.requestMethod.result"
size="mini"
placeholder="请输入内容"
/>
</div>
</div>
<div>
<div class="form-request-method-title" style="margin-bottom: 6px">字段映射</div>
<div class="form-request-method-content">
<el-input v-model="data.options.props.value" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.value') }}</template>
</el-input>
<el-input v-model="data.options.props.label" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.label') }}</template>
</el-input>
<el-input v-if="data.type === 'cascader'" v-model="data.options.props.children" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.childrenOption') }}</template>
</el-input>
</div>
</div>
</div>
</template>
<template v-else-if="data.options.remote">
<div>
<el-input v-model="data.options.remoteFunc" size="mini" style="">
<template slot="prepend">{{ $t('fm.config.widget.remoteFunc') }}</template>
......@@ -221,21 +300,21 @@
</template>
</el-form-item>
<!-- 默认值 -->
<el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
<el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type === 'textarea' || data.type === 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
<el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />
<el-input v-if="data.type=='input'" v-model="data.options.defaultValue" />
<el-rate v-if="data.type == 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
<el-button v-if="data.type == 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{ $t('fm.actions.clear') }}</el-button>
<el-rate v-if="data.type === 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
<el-button v-if="data.type === 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{ $t('fm.actions.clear') }}</el-button>
<el-color-picker
v-if="data.type == 'color'"
v-if="data.type === 'color'"
v-model="data.options.defaultValue"
:show-alpha="data.options.showAlpha"
/>
<el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue" />
</el-form-item>
<!-- 显示类型 -->
<template v-if="data.type == 'time' || data.type == 'date'">
<el-form-item v-if="data.type == 'date'" :label="$t('fm.config.widget.showType')">
<template v-if="data.type === 'time' || data.type === 'date'">
<el-form-item v-if="data.type === 'date'" :label="$t('fm.config.widget.showType')">
<el-select v-model="data.options.type">
<el-option value="year" />
<el-option value="month" />
......@@ -247,29 +326,29 @@
<el-option value="daterange" />
</el-select>
</el-form-item>
<el-form-item v-if="data.type == 'time'" :label="$t('fm.config.widget.isRange')">
<el-form-item v-if="data.type === 'time'" :label="$t('fm.config.widget.isRange')">
<el-switch
v-model="data.options.isRange"
/>
</el-form-item>
<el-form-item v-if="data.type == 'date'" :label="$t('fm.config.widget.isTimestamp')">
<el-form-item v-if="data.type === 'date'" :label="$t('fm.config.widget.isTimestamp')">
<el-switch
v-model="data.options.timestamp"
/>
</el-form-item>
<el-form-item v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')" :label="$t('fm.config.widget.placeholder')">
<el-form-item v-if="(!data.options.isRange && data.type === 'time') || (data.type !== 'time' && data.options.type !== 'datetimerange' && data.options.type !== 'daterange')" :label="$t('fm.config.widget.placeholder')">
<el-input v-model="data.options.placeholder" />
</el-form-item>
<el-form-item v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'" :label="$t('fm.config.widget.startPlaceholder')">
<el-form-item v-if="(data.options.isRange) || data.options.type==='datetimerange' || data.options.type==='daterange'" :label="$t('fm.config.widget.startPlaceholder')">
<el-input v-model="data.options.startPlaceholder" />
</el-form-item>
<el-form-item v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'" :label="$t('fm.config.widget.endPlaceholder')">
<el-form-item v-if="data.options.isRange || data.options.type==='datetimerange' || data.options.type==='daterange'" :label="$t('fm.config.widget.endPlaceholder')">
<el-input v-model="data.options.endPlaceholder" />
</el-form-item>
<el-form-item :label="$t('fm.config.widget.format')">
<el-input v-model="data.options.format" />
</el-form-item>
<el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="$t('fm.config.widget.defaultValue')">
<el-form-item v-if="data.type==='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="$t('fm.config.widget.defaultValue')">
<el-time-picker
v-if="!data.options.isRange"
key="1"
......@@ -290,7 +369,7 @@
</el-form-item>
</template>
<!-- 图片上传 -->
<template v-if="data.type=='imgupload' || data.type=='file'">
<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" />
......@@ -476,19 +555,19 @@
</div>
</el-form-item>
</template>
<el-form-item v-if="Object.keys(data.options).indexOf('displayVerifiy')>=0" :label="$t('fm.config.widget.displayVerifiy')">
<el-radio-group v-model="data.options.displayVerifiy.type">
<el-form-item v-if="Object.keys(data.options).indexOf('displayVerify')>=0" :label="$t('fm.config.widget.displayVerify')">
<el-radio-group v-model="data.options.displayVerify.type">
<el-radio label="hide">不校验</el-radio>
<el-radio label="and"></el-radio>
<el-radio label="or"></el-radio>
</el-radio-group>
<div v-if="data.options.displayVerifiy.type !== 'hide'">
<template v-for="(item, index) in data.options.displayVerifiy.list">
<div v-if="data.options.displayVerify.type !== 'hide'">
<template v-for="(item, index) in data.options.displayVerify.list">
<div :key="item.model">
<el-input v-model="item.model" size="mini" :placeholder="$t('fm.config.widget.displayVerifiyPlaceholderModel')" />
<el-input v-model="item.value" size="mini" :placeholder="$t('fm.config.widget.displayVerifiyPlaceholderValue')" />
<el-input v-model="item.model" size="mini" :placeholder="$t('fm.config.widget.displayVerifyPlaceholderModel')" />
<el-input v-model="item.value" size="mini" :placeholder="$t('fm.config.widget.displayVerifyPlaceholderValue')" />
<el-button v-if="index > 0" type="text" icon="el-icon-remove-outline" @click="delDisplayVerifiy(index)">删 除</el-button>
<hr v-if="data.options.displayVerifiy.list.length > 1" style="background-color: #dcdfe6; border:none; height:1px;">
<hr v-if="data.options.displayVerify.list.length > 1" style="background-color: #dcdfe6; border:none; height:1px;">
</div>
</template>
<el-button type="text" icon="el-icon-circle-plus-outline" @click="addDisplayVerifiy">新 增</el-button>
......@@ -608,13 +687,13 @@ export default {
},
methods: {
addDisplayVerifiy() {
this.data.options.displayVerifiy.list.push({
this.data.options.displayVerify.list.push({
model: (new Date()).valueOf(),
value: '字段值'
})
},
delDisplayVerifiy(index) {
this.data.options.displayVerifiy.list.splice(index, 1)
this.data.options.displayVerify.list.splice(index, 1)
},
// 级联选择器
handleAddCascaderTopDialog() {
......@@ -767,7 +846,7 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
.custom-tree-node {
flex: 1;
display: flex;
......@@ -776,4 +855,13 @@ export default {
font-size: 14px;
padding-right: 8px;
}
.form-request-method {
.form-request-method-title {
font-size: 13px;
height: 25px;
}
.form-request-method-content {
}
}
</style>
<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) {
......
......@@ -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: '字段标识',
......
......@@ -102,6 +102,7 @@ export default {
option: 'Option',
staticData: 'Static Data',
remoteData: 'Remote Date',
requestMethod: 'Request Method',
remoteFunc: 'Remote Function',
value: 'Value',
label: 'Label',
......
......@@ -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 sign in to comment