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

修复部分bug。

master
vdpAdmin 2021-11-14 16:03:42 +08:00
parent 1414bce040
commit 85aaca2dd0
17 changed files with 113 additions and 31 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", "name": "variant-form",
"version": "2.1.5", "version": "2.1.6",
"private": false, "private": false,
"scripts": { "scripts": {
"serve": "vue-cli-service serve --open src/main.js", "serve": "vue-cli-service serve --open src/main.js",

11
public/index.html
View File

@ -5,24 +5,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 禁止浏览器缓存index.html begin -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<!-- 禁止浏览器缓存index.html end -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body> </body>
</html> </html>

2
src/components/form-designer/form-widget/field-widget/slider-widget.vue
View File

@ -3,7 +3,7 @@
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId"> :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-slider ref="fieldEditor" v-model="fieldModel" <el-slider ref="fieldEditor" v-model="fieldModel"
:disabled="field.options.disabled" :disabled="field.options.disabled" :show-stops="field.options.showStops"
:min="field.options.min" :max="field.options.max" :step="field.options.step" :min="field.options.min" :max="field.options.max" :step="field.options.step"
:range="field.options.range" :vertical="field.options.vertical" :range="field.options.range" :vertical="field.options.vertical"
@change="handleChangeEvent"> @change="handleChangeEvent">

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

@ -13,7 +13,7 @@
<el-header class="main-header"> <el-header class="main-header">
<div class="float-left main-title"> <div class="float-left main-title">
<img src="../../assets/vform-logo.png" @click="openHome"> <img src="../../assets/vform-logo.png" @click="openHome">
<span class="bold">VariantForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div> <span class="bold">VForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
<div class="float-right external-link"> <div class="float-right external-link">
<el-dropdown @command="handleLanguageChanged"> <el-dropdown @command="handleLanguageChanged">
<span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span> <span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span>

23
src/components/form-designer/setting-panel/property-editor/field-slider/showStops-editor.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<el-form-item :label="i18nt('designer.setting.showStops')">
<el-checkbox v-model="optionModel.showStops"></el-checkbox>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
export default {
name: "showStops-editor",
mixins: [i18n],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

1
src/components/form-designer/setting-panel/propertyRegister.js
View File

@ -15,6 +15,7 @@ const COMMON_PROPERTIES = {
'endPlaceholder' : 'endPlaceholder-editor', 'endPlaceholder' : 'endPlaceholder-editor',
'columnWidth' : 'columnWidth-editor', 'columnWidth' : 'columnWidth-editor',
'size' : 'size-editor', 'size' : 'size-editor',
'showStops' : 'showStops-editor',
'displayStyle' : 'displayStyle-editor', 'displayStyle' : 'displayStyle-editor',
'buttonStyle' : 'buttonStyle-editor', 'buttonStyle' : 'buttonStyle-editor',
'border' : 'border-editor', 'border' : 'border-editor',

27
src/components/form-designer/widget-panel/index.vue
View File

@ -2,6 +2,10 @@
<el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}"> <el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}">
<div class="panel-container"> <div class="panel-container">
<el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
<el-tab-pane name="componentLib">
<span slot="label"><i class="el-icon-set-up"></i> {{i18nt('designer.componentLib')}}</span>
<el-collapse v-model="activeNames" class="widget-collapse"> <el-collapse v-model="activeNames" class="widget-collapse">
<el-collapse-item name="1" :title="i18nt('designer.containerTitle')"> <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
<draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}" <draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
@ -49,6 +53,15 @@
</el-collapse> </el-collapse>
</el-tab-pane>
<el-tab-pane name="formLib" v-if="false">
<span slot="label"><i class="el-icon-c-scale-to-original"></i> {{i18nt('designer.formLib')}}</span>
</el-tab-pane>
</el-tabs>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
@ -70,6 +83,8 @@
}, },
data() { data() {
return { return {
firstTab: 'componentLib',
scrollerHeight: 0, scrollerHeight: 0,
activeNames: ['1', '2', '3', '4'], activeNames: ['1', '2', '3', '4'],
@ -179,11 +194,23 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
.no-bottom-margin ::v-deep .el-tabs__header {
margin-bottom: 0;
}
.indent-left-margin {
::v-deep .el-tabs__nav {
margin-left: 20px;
}
}
.el-collapse-item ::v-deep ul > li { .el-collapse-item ::v-deep ul > li {
list-style: none; list-style: none;
} }
.widget-collapse { .widget-collapse {
border-top-width: 0;
::v-deep .el-collapse-item__header { ::v-deep .el-collapse-item__header {
margin-left: 8px; margin-left: 8px;
font-style: italic; font-style: italic;

5
src/components/form-designer/widget-panel/widgetsConfig.js
View File

@ -102,7 +102,7 @@ export const containers = [
} }
}, },
/* /*
{ {
type: 'data-table', type: 'data-table',
category: 'container', category: 'container',
@ -662,6 +662,7 @@ export const basicFields = [
label: '', label: '',
labelAlign: '', labelAlign: '',
columnWidth: '200px', columnWidth: '200px',
showStops: true,
size: '', size: '',
labelWidth: null, labelWidth: null,
labelHidden: false, labelHidden: false,
@ -677,7 +678,7 @@ export const basicFields = [
labelTooltip: null, labelTooltip: null,
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 10,
range: false, range: false,
//vertical: false, //vertical: false,
height: null, height: null,

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

@ -118,6 +118,7 @@
// //
}, },
created() { created() {
this.buildFormModel(!this.formJsonObj ? null : this.formJsonObj.widgetList)
this.initFormObject() this.initFormObject()
}, },
mounted() { mounted() {
@ -127,7 +128,7 @@
methods: { methods: {
initFormObject() { initFormObject() {
this.insertCustomStyleAndScriptNode() this.insertCustomStyleAndScriptNode()
this.buildFormModel() //this.buildFormModel()
this.addFieldChangeEventHandler() this.addFieldChangeEventHandler()
this.registerFormToRefList() this.registerFormToRefList()
this.handleOnCreated() this.handleOnCreated()
@ -156,14 +157,20 @@
} }
}, },
buildFormModel() { buildFormModel(widgetList) {
if (!this.formJsonObj || !this.widgetList) { if (!!widgetList && (widgetList.length > 0)) {
return widgetList.forEach((wItem) => {
this.buildDataFromWidget(wItem)
})
} }
this.widgetList.forEach((wItem) => { // if (!this.formJsonObj || !this.widgetList) {
this.buildDataFromWidget(wItem, null) // return
}) // }
//
// this.widgetList.forEach((wItem) => {
// this.buildDataFromWidget(wItem)
// })
}, },
buildDataFromWidget(wItem) { buildDataFromWidget(wItem) {
@ -171,7 +178,7 @@
if (wItem.type === 'grid') { if (wItem.type === 'grid') {
if (!!wItem.cols && (wItem.cols.length > 0)) { if (!!wItem.cols && (wItem.cols.length > 0)) {
wItem.cols.forEach((childItem) => { wItem.cols.forEach((childItem) => {
this.buildDataFromWidget(childItem, wItem) this.buildDataFromWidget(childItem)
}) })
} }
} else if (wItem.type === 'table') { } else if (wItem.type === 'table') {
@ -179,7 +186,7 @@
wItem.rows.forEach((rowItem) => { wItem.rows.forEach((rowItem) => {
if (!!rowItem.cols && (rowItem.cols.length > 0)) { if (!!rowItem.cols && (rowItem.cols.length > 0)) {
rowItem.cols.forEach((colItem) => { rowItem.cols.forEach((colItem) => {
this.buildDataFromWidget(colItem, wItem) this.buildDataFromWidget(colItem)
}) })
} }
}) })
@ -189,7 +196,7 @@
wItem.tabs.forEach((tabItem) => { wItem.tabs.forEach((tabItem) => {
if (!!tabItem.widgetList && (tabItem.widgetList.length > 0)) { if (!!tabItem.widgetList && (tabItem.widgetList.length > 0)) {
tabItem.widgetList.forEach((childItem) => { tabItem.widgetList.forEach((childItem) => {
this.buildDataFromWidget(childItem, wItem) this.buildDataFromWidget(childItem)
}) })
} }
}) })
@ -216,13 +223,13 @@
} else if ((wItem.type === 'grid-col') || (wItem.type === 'table-cell')) { } else if ((wItem.type === 'grid-col') || (wItem.type === 'table-cell')) {
if (!!wItem.widgetList && (wItem.widgetList.length > 0)) { if (!!wItem.widgetList && (wItem.widgetList.length > 0)) {
wItem.widgetList.forEach((childItem) => { wItem.widgetList.forEach((childItem) => {
this.buildDataFromWidget(childItem, wItem) this.buildDataFromWidget(childItem)
}) })
} }
} else { //自定义容器组件 } else { //自定义容器组件
if (!!wItem.widgetList && (wItem.widgetList.length > 0)) { if (!!wItem.widgetList && (wItem.widgetList.length > 0)) {
wItem.widgetList.forEach((childItem) => { wItem.widgetList.forEach((childItem) => {
this.buildDataFromWidget(childItem, wItem) this.buildDataFromWidget(childItem)
}) })
} }
} }
@ -305,6 +312,12 @@
return foundRef return foundRef
}, },
clearFormDataModel() {
for (let pkey in this.formDataModel) {
delete this.formDataModel[pkey]
}
},
/** /**
* 动态加载表单JSON * 动态加载表单JSON
* @param newFormJson * @param newFormJson
@ -312,7 +325,7 @@
setFormJson(newFormJson) { setFormJson(newFormJson) {
if (!!newFormJson) { if (!!newFormJson) {
if ((typeof newFormJson === 'string') || (newFormJson.constructor === Object)) { if ((typeof newFormJson === 'string') || (newFormJson.constructor === Object)) {
let newFormJsonObj = null let newFormJsonObj = null
if (typeof newFormJson === 'string') { if (typeof newFormJson === 'string') {
newFormJsonObj = JSON.parse(newFormJson) newFormJsonObj = JSON.parse(newFormJson)
} else { } else {
@ -320,10 +333,15 @@
} }
if (!newFormJsonObj.formConfig || !newFormJsonObj.widgetList) { if (!newFormJsonObj.formConfig || !newFormJsonObj.widgetList) {
this.$message.error('Set form json failed.') this.$message.error('Invalid format of form json.')
return return
} }
/* formDataModel必须在widgetList赋值完成初始化，因为widgetList赋值意味着子组件开始创建！！！ */
//this.formDataModel = {} //清空表单数据对象（有bug，会导致表单校验失败！！）
this.clearFormDataModel() //上行代码有问题，会导致表单校验失败，故保留原对象引用只清空对象属性！！
this.buildFormModel(newFormJsonObj.widgetList)
this.$set(this.formJsonObj, 'formConfig', newFormJsonObj.formConfig) this.$set(this.formJsonObj, 'formConfig', newFormJsonObj.formConfig)
this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象 this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
this.$set(this.formJsonObj, 'widgetList', newFormJsonObj.widgetList) this.$set(this.formJsonObj, 'widgetList', newFormJsonObj.widgetList)

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

@ -36,6 +36,9 @@ export const loadExtension = function () {
PERegister.registerCPEditor('folded', 'card-folded-editor', PERegister.registerCPEditor('folded', 'card-folded-editor',
PEFactory.createBooleanEditor('folded', 'extension.setting.cardFolded')) PEFactory.createBooleanEditor('folded', 'extension.setting.cardFolded'))
PERegister.registerCPEditor('showFold', 'card-showFold-editor',
PEFactory.createBooleanEditor('showFold', 'extension.setting.cardShowFold'))
PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor', PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor',
PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth')) PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth'))

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

@ -6,7 +6,8 @@
:class="[selected ? 'selected' : '', !!widget.options.folded ? 'folded' : '', customClass]"> :class="[selected ? 'selected' : '', !!widget.options.folded ? 'folded' : '', customClass]">
<div slot="header" class="clear-fix"> <div slot="header" class="clear-fix">
<span>{{widget.options.label}}</span> <span>{{widget.options.label}}</span>
<i class="float-right" :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" <i v-if="widget.options.showFold" class="float-right"
:class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"
@click="toggleCard"></i> @click="toggleCard"></i>
</div> </div>
<draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}" <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
@ -77,6 +78,14 @@
this.widget.options.folded = !this.widget.options.folded this.widget.options.folded = !this.widget.options.folded
}, },
/**
* 设置折叠/打开状态
* @param folded
*/
setFolded(folded) {
this.widget.options.folded = !!folded
}
} }
} }
</script> </script>

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

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

3
src/lang/en-US.js
View File

@ -11,6 +11,8 @@ export default {
}, },
designer: { designer: {
componentLib: 'Components',
formLib: 'Templates',
containerTitle: 'Container', containerTitle: 'Container',
dragHandlerHint: 'drag container or field to layout center', dragHandlerHint: 'drag container or field to layout center',
dragAction: 'drag', dragAction: 'drag',
@ -164,6 +166,7 @@ export default {
endPlaceholder: 'End Placeholder', endPlaceholder: 'End Placeholder',
widgetColumnWidth: 'Width', widgetColumnWidth: 'Width',
widgetSize: 'Size', widgetSize: 'Size',
showStops: 'Show Stops',
displayStyle: 'Display Style', displayStyle: 'Display Style',
inlineLayout: 'inline', inlineLayout: 'inline',
blockLayout: 'block', blockLayout: 'block',

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

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

3
src/lang/zh-CN.js
View File

@ -11,6 +11,8 @@ export default {
}, },
designer: { designer: {
componentLib: '组件库',
formLib: '表单模板',
containerTitle: '容器', containerTitle: '容器',
dragHandlerHint: '鼠标拖拽容器组件或字段组件并放置于表单中', dragHandlerHint: '鼠标拖拽容器组件或字段组件并放置于表单中',
dragAction: '拖动', dragAction: '拖动',
@ -164,6 +166,7 @@ export default {
endPlaceholder: '截止占位内容', endPlaceholder: '截止占位内容',
widgetColumnWidth: '组件列宽', widgetColumnWidth: '组件列宽',
widgetSize: '组件大小', widgetSize: '组件大小',
showStops: '显示间断点',
displayStyle: '显示样式', displayStyle: '显示样式',
inlineLayout: '行内', inlineLayout: '行内',
blockLayout: '块', blockLayout: '块',

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

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

2
src/utils/config.js
View File

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