github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

设计器增加获取后端字段列表接口属性。

master
vdpAdmin 2021-11-05 14:19:25 +08:00
parent a7dcab5e9c
commit ad44e4bee1
13 changed files with 114 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "variant-form",
"version": "2.1.3",
"version": "2.1.4",
"private": false,
"scripts": {
"serve": "vue-cli-service serve --open src/main.js",

7
src/components/form-designer/designer.js
View File

@ -121,9 +121,12 @@ export function createDesigner(vueInstance) {
}
},
updateSelectedWidgetNameAndRef(selectedWidget, newName) {
updateSelectedWidgetNameAndRef(selectedWidget, newName, newLabel) {
this.selectedWidgetName = newName
selectedWidget.options.name = newName
//selectedWidget.options.name = newName //此行多余
if (!!newLabel && (Object.keys(selectedWidget.options).indexOf('label') > -1)) {
selectedWidget.options.label = newLabel
}
},
clearSelected() {

2
src/components/form-designer/form-widget/field-widget/fieldMixin.js
View File

@ -270,6 +270,8 @@ export default {
},
handleInputCustomEvent(value) {
this.syncUpdateFormModel(value)
if (!!this.field.options.onInput) {
let customFn = new Function('value', this.field.options.onInput)
customFn.call(this, value)

41
src/components/form-designer/index.vue
View File

@ -61,7 +61,7 @@
import SettingPanel from './setting-panel/index'
import VFormWidget from './form-widget/index'
import {createDesigner} from "@/components/form-designer/designer";
import {addWindowResizeHandler, getQueryParam} from "@/utils/util";
import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util";
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config";
import i18n, { changeLocale } from "@/utils/i18n";
@ -75,6 +75,12 @@
SettingPanel,
VFormWidget,
},
props: {
fieldListApi: {
type: Object,
default: null,
}
},
data() {
return {
vFormVersion: VARIANT_FORM_VERSION,
@ -91,11 +97,13 @@
scrollerHeight: 0,
designer: createDesigner(this),
fieldList: []
}
},
provide() {
return {
//
serverFieldList: this.fieldList,
}
},
created() {
@ -113,6 +121,8 @@
})
this.loadCase()
this.loadFieldListFromServer()
},
methods: {
openHome() {
@ -172,6 +182,26 @@
this.changeLanguage(curLocale)
},
loadFieldListFromServer() {
if (!this.fieldListApi) {
return
}
axios.get(this.fieldListApi.URL).then(res => {
let labelKey = this.fieldListApi.labelKey || 'label'
let nameKey = this.fieldListApi.nameKey || 'name'
res.data.forEach(fieldItem => {
this.fieldList.push({
label: fieldItem[labelKey],
name: fieldItem[nameKey]
})
})
}).catch(error => {
this.$message.error(error)
})
},
handleLanguageChanged(command) {
this.changeLanguage(command)
this.curLangName = this.i18nt('application.' + command)
@ -196,6 +226,13 @@
}
},
getFormJson() {
return {
widgetList: deepClone(this.designer.widgetList),
formConfig: deepClone(this.designer.formConfig)
}
},
//TODO: 增加更多方法！！
}

24
src/components/form-designer/setting-panel/property-editor/name-editor.vue
View File

@ -1,6 +1,13 @@
<template>
<el-form-item :label="i18nt('designer.setting.uniqueName')" :rules="nameRequiredRule">
<el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
<template v-if="!!selectedWidget.category">
<el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
</template>
<template v-else>
<el-select v-model="optionModel.name" allow-create filterable @change="updateWidgetNameAndRef">
<el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"></el-option>
</el-select>
</template>
</el-form-item>
</template>
@ -16,6 +23,7 @@
selectedWidget: Object,
optionModel: Object,
},
inject: ['serverFieldList'],
data() {
return {
nameRequiredRule: [{required: true, message: 'name required'}],
@ -41,12 +49,22 @@
let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
if (!!fieldWidget && !!fieldWidget.registerToRefList) {
fieldWidget.registerToRefList(oldName)
this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName)
fieldWidget.registerToRefList(oldName) //注册组件新的ref名称并删除老的ref！！
let newLabel = this.getLabelByFieldName(newName)
this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName, newLabel)
}
}
},
getLabelByFieldName(fieldName) {
for (let i = 0; i < this.serverFieldList.length; i++) {
if (this.serverFieldList[i].name === fieldName) {
return this.serverFieldList[i].label
}
}
return null
},
}
}

4
src/components/form-render/index.vue
View File

@ -201,7 +201,7 @@
this.buildDataFromWidget(childItem, wItem)
})
}
} else {
} else { //自定义容器组件
if (!!wItem.widgetList && (wItem.widgetList.length > 0)) {
wItem.widgetList.forEach((childItem) => {
this.buildDataFromWidget(childItem, wItem)
@ -217,8 +217,6 @@
this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue))
}
}
//TODO: 如果是自定义容器组件，需要特殊处理！！！
},
addFieldChangeEventHandler() {

3
src/extension/extension-loader.js
View File

@ -33,6 +33,9 @@ export const loadExtension = function () {
Vue.component(CardWidget.name, CardWidget) //注册设计期的容器组件
Vue.component(CardItem.name, CardItem) //注册运行期的容器组件
/* -------------------------------------------------- */
PERegister.registerCPEditor('folded', 'card-folded-editor',
PEFactory.createBooleanEditor('folded', 'extension.setting.cardFolded'))
PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor',
PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth'))

27
src/extension/samples/card/card-item.vue
View File

@ -1,9 +1,12 @@
<template>
<container-item-wrapper :widget="widget">
<el-card :key="widget.id" class="card-container" :class="[customClass]"
<el-card :key="widget.id" class="card-container" :class="[!!widget.options.folded ? 'folded' : '', customClass]"
:shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
:ref="widget.id" v-show="!widget.options.hidden">
<div slot="header"><span>{{widget.options.label}}</span></div>
<div slot="header" class="clear-fix">
<span>{{widget.options.label}}</span>
<i class="float-right" :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" @click="toggleCard"></i>
</div>
<template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
<template v-for="(subWidget, swIdx) in widget.widgetList">
<template v-if="'container' === subWidget.category">
@ -53,6 +56,9 @@
this.unregisterFromRefList()
},
methods: {
toggleCard() {
this.widget.options.folded = !this.widget.options.folded
},
},
}
@ -63,4 +69,21 @@
padding: 10px 12px;
}
.folded ::v-deep .el-card__body {
display: none;
}
.clear-fix:before, .clear-fix:after {
display: table;
content: "";
}
.clear-fix:after {
clear: both;
}
.float-right {
float: right;
}
</style>

16
src/extension/samples/card/card-widget.vue
View File

@ -3,10 +3,11 @@
:index-of-parent-list="indexOfParentList">
<el-card :key="widget.id" class="card-container" @click.native.stop="selectWidget(widget)"
:shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
:class="[selected ? 'selected' : '', customClass]">
:class="[selected ? 'selected' : '', !!widget.options.folded ? 'folded' : '', customClass]">
<div slot="header" class="clear-fix">
<span>{{widget.options.label}}</span>
<i class="el-icon-arrow-up float-right"></i>
<i class="float-right" :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"
@click="toggleCard"></i>
</div>
<draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
handle=".drag-handler"
@ -70,7 +71,12 @@
*/
checkContainerMove(evt) {
return true
}
},
toggleCard() {
this.widget.options.folded = !this.widget.options.folded
},
}
}
</script>
@ -84,6 +90,10 @@
padding: 10px 12px;
}
.folded ::v-deep .el-card__body {
display: none;
}
.clear-fix:before, .clear-fix:after {
display: table;
content: "";

1
src/extension/samples/extension-schema.js
View File

@ -7,6 +7,7 @@ export const cardSchema = {
name: '',
label: 'card',
hidden: false,
folded: false,
cardWidth: '100%',
shadow: 'never',
customClass: '',

1
src/lang/en-US_extension.js
View File

@ -6,6 +6,7 @@ export default {
},
setting: {
cardFolded: 'Folded',
cardWidth: 'Width Of Card',
cardShadow: 'Shadow',

1
src/lang/zh-CN_extension.js
View File

@ -6,6 +6,7 @@ export default {
},
setting: {
cardFolded: '是否收起',
cardWidth: '卡片宽度',
cardShadow: '显示阴影',

2
src/utils/config.js
View File

@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
}
export const VARIANT_FORM_VERSION = '2.1.3'
export const VARIANT_FORM_VERSION = '2.1.4'
export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'