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

修复工具按钮栏宽度自适应问题；修复组件列宽属性不能正常显隐问题；按钮组件新增显示样式设置；静态文字组件新增字体大小设置。

master
vdpAdmin 2022-01-21 16:18:22 +08:00
parent 81cd87c2de
commit 40d0abdc30
18 changed files with 104 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/form-designer/form-widget/container-widget/containerMixin.js
View File

@ -15,6 +15,7 @@ export default {
}
this.designer.emitHistoryChange()
this.designer.emitEvent('field-selected', this.widget)
},
onContainerDragUpdate() {

1
src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
View File

@ -197,6 +197,7 @@
}
this.designer.emitHistoryChange()
this.designer.emitEvent('field-selected', this.widget)
},
onGridDragUpdate() {

1
src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
View File

@ -160,6 +160,7 @@
}
this.designer.emitHistoryChange()
this.designer.emitEvent('field-selected', this.widget)
},
onTableDragUpdate() {

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

@ -1,5 +1,5 @@
<template>
<static-content-wrapper :designer="designer" :field="field" :design-state="designState"
<static-content-wrapper :designer="designer" :field="field" :design-state="designState" :display-style="field.options.displayStyle"
: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">
<el-button ref="fieldEditor" :type="field.options.type" :size="field.options.size"

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

@ -84,7 +84,7 @@ export default {
initEventHandler() {
this.$on('setFormData', function (newFormData) {
console.log('formModel of globalModel----------', this.globalModel.formModel)
//console.log('formModel of globalModel----------', this.globalModel.formModel)
if (!this.subFormItemFlag) {
this.setValue(newFormData[this.field.options.name])
}

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

@ -139,7 +139,7 @@
}
fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
if (!fileSizeCheckResult) {
this.$message.error(this.$('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
return false;
}

9
src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
<div class="static-content-item" v-show="!field.options.hidden || (designState === true)"
<div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}" :style="{display: displayStyle}">
<div class="static-content-item" v-show="!field.options.hidden || (designState === true)" :style="{display: displayStyle}"
:class="[selected ? 'selected' : '', customClass]" @click.stop="selectField(field)">
<slot></slot>
</div>
@ -42,6 +42,11 @@
default: false
},
displayStyle: {
type: String,
default: 'block'
},
subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
type: Number,
default: -1

3
src/components/form-designer/form-widget/field-widget/static-text-widget.vue
View File

@ -2,7 +2,8 @@
<static-content-wrapper :designer="designer" :field="field" :design-state="designState"
: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">
<div ref="fieldEditor">{{field.options.textContent}}</div>
<div ref="fieldEditor" :style="!!field.options.fontSize ? `font-size: ${field.options.fontSize};`: ''">
{{field.options.textContent}}</div>
</static-content-wrapper>
</template>

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

@ -144,6 +144,7 @@
}
this.designer.emitHistoryChange()
this.designer.emitEvent('field-selected', null)
},
onDragUpdate() { /* 在VueDraggable内拖拽组件发生位置变化时会触发update，未发生组件位置变化不会触发！！ */

11
src/components/form-designer/setting-panel/index.vue
View File

@ -114,6 +114,11 @@
selectedWidget: Object,
formConfig: Object,
},
provide() {
return {
isSubFormChildWidget: () => this.subFormChildWidgetFlag,
}
},
inject: ['getDesignerConfig'],
data() {
return {
@ -181,6 +186,12 @@
this.designer.handleEvent('form-css-updated', (cssClassList) => {
this.designer.setCssClassList(cssClassList)
})
//监听字段组件选中事件
this.designer.handleEvent('field-selected', (parentWidget) => {
this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
//console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
})
},
mounted() {
if (!this.designer.selectedWidget) {

18
src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-show="!!subFormChildWidgetFlag">
<el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-show="!!isSubFormChildWidget()">
<el-input type="text" v-model="optionModel.columnWidth"></el-input>
</el-form-item>
</div>
@ -17,21 +17,7 @@
selectedWidget: Object,
optionModel: Object,
},
data() {
return {
//subFormChildWidgetFlag: false,
subFormChildWidgetFlag: true,
}
},
created() {
},
mounted() {
this.designer.handleEvent('field-selected', (parentWidget) => {
this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
//console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
})
}
inject: ['isSubFormChildWidget'],
}
</script>

23
src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<el-form-item :label="i18nt('designer.setting.fontSize')">
<el-input v-model="optionModel.fontSize"></el-input>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
export default {
name: "fontSize-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

@ -32,6 +32,7 @@ const COMMON_PROPERTIES = {
'editable' : 'editable-editor',
'showPassword' : 'showPassword-editor',
'textContent' : 'textContent-editor',
'fontSize' : 'fontSize-editor',
'htmlContent' : 'htmlContent-editor',
'format' : 'format-editor',
'valueFormat' : 'valueFormat-editor',

60
src/components/form-designer/toolbar-panel/index.vue
View File

@ -23,22 +23,24 @@
icon-class="el-icon-arrow-right" @node-click="onNodeTreeClick"></el-tree>
</el-drawer>
<div class="right-toolbar">
<el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
<i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
<el-button v-if="showToolButton('previewFormButton')" type="text" @click="previewForm">
<i class="el-icon-view" />{{i18nt('designer.toolbar.preview')}}</el-button>
<el-button v-if="showToolButton('importJsonButton')" type="text" @click="importJson">
{{i18nt('designer.toolbar.importJson')}}</el-button>
<el-button v-if="showToolButton('exportJsonButton')" type="text" @click="exportJson">
{{i18nt('designer.toolbar.exportJson')}}</el-button>
<el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">
{{i18nt('designer.toolbar.exportCode')}}</el-button>
<el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
<svg-icon icon-class="vue-sfc" />{{i18nt('designer.toolbar.generateSFC')}}</el-button>
<template v-for="(idx, slotName) in $slots">
<slot :name="slotName"></slot>
</template>
<div class="right-toolbar" :style="{width: toolBarWidth + 'px'}">
<div class="right-toolbar-con">
<el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
<i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
<el-button v-if="showToolButton('previewFormButton')" type="text" @click="previewForm">
<i class="el-icon-view" />{{i18nt('designer.toolbar.preview')}}</el-button>
<el-button v-if="showToolButton('importJsonButton')" type="text" @click="importJson">
{{i18nt('designer.toolbar.importJson')}}</el-button>
<el-button v-if="showToolButton('exportJsonButton')" type="text" @click="exportJson">
{{i18nt('designer.toolbar.exportJson')}}</el-button>
<el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">
{{i18nt('designer.toolbar.exportCode')}}</el-button>
<el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
<svg-icon icon-class="vue-sfc" />{{i18nt('designer.toolbar.generateSFC')}}</el-button>
<template v-for="(idx, slotName) in $slots">
<slot :name="slotName"></slot>
</template>
</div>
</div>
<el-dialog :title="i18nt('designer.toolbar.preview')" :visible.sync="showPreviewDialogFlag" v-if="showPreviewDialogFlag"
@ -165,8 +167,8 @@
copyToClipboard,
generateId,
getQueryParam,
traverseAllWidgets
} from "@/utils/util";
traverseAllWidgets, addWindowResizeHandler
} from "@/utils/util"
import i18n from '@/utils/i18n'
import {generateCode} from "@/utils/code-generator";
import {genSFC} from "@/utils/sfc-generator";
@ -190,6 +192,7 @@
return {
designerConfig: this.getDesignerConfig(),
toolBarWidth: 420,
showPreviewDialogFlag: false,
showImportJsonDialogFlag: false,
showExportJsonDialogFlag: false,
@ -267,6 +270,16 @@
},
},
mounted() {
let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80
this.toolBarWidth = newTBWidth >= 420 ? 420 : (newTBWidth <= 300 ? 300 : newTBWidth)
addWindowResizeHandler(() => {
this.$nextTick(() => {
let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80
this.toolBarWidth = newTBWidth2 >= 420 ? 420 : (newTBWidth2 <= 300 ? 300 : newTBWidth2)
})
})
},
methods: {
showToolButton(configName) {
@ -613,7 +626,8 @@
<style lang="scss" scoped>
div.toolbar-container {
min-width: 728px; /* 解决工具按钮栏换行的问题！！ */
//min-width: 728px; /* 解决工具按钮栏换行的问题 */
/* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
}
.left-toolbar {
@ -623,6 +637,14 @@
.right-toolbar {
float: right;
//width: 420px;
text-align: right;
overflow: hidden;
.right-toolbar-con {
text-align: left;
width: 600px;
}
::v-deep .el-button--text {
font-size: 14px !important;

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

@ -61,8 +61,8 @@
<template v-for="(ft, idx) in formTemplates">
<el-card :key="idx" :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
<el-popover placement="right" trigger="hover">
<img slot="reference" :src="ft.imgUrl" style="width: 200px">
<img :src="ft.imgUrl" style="height: 600px;width: 720px">
<img slot="reference" :src="ftImages[idx].imgUrl" style="width: 200px">
<img :src="ftImages[idx].imgUrl" style="height: 600px;width: 720px">
</el-popover>
<div class="bottom clear-fix">
<span class="ft-title">#{{idx+1}} {{ft.title}}</span>

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

@ -39,20 +39,6 @@ export const containers = [
}
},
/*
{
type: 'section',
category: 'container',
icon: 'section',
widgetList: [],
options: {
name: '',
hidden: false,
customClass: '', //自定义css类名
}
},
*/
{
type: 'grid-col',
category: 'container',
@ -665,6 +651,7 @@ export const basicFields = [
columnWidth: '200px',
hidden: false,
textContent: 'static text',
fontSize: '13px',
//-------------------
customClass: '', //自定义css类名
//-------------------
@ -699,6 +686,7 @@ export const basicFields = [
label: '',
columnWidth: '200px',
size: '',
displayStyle: 'block',
disabled: false,
hidden: false,
type: '',
@ -748,6 +736,7 @@ export const advancedFields = [
label: '',
labelWidth: null,
labelHidden: false,
columnWidth: '200px',
disabled: false,
hidden: false,
required: false,
@ -790,6 +779,7 @@ export const advancedFields = [
label: '',
labelWidth: null,
labelHidden: false,
columnWidth: '200px',
disabled: false,
hidden: false,
required: false,
@ -832,6 +822,7 @@ export const advancedFields = [
placeholder: '',
labelWidth: null,
labelHidden: false,
columnWidth: '200px',
disabled: false,
hidden: false,
required: false,
@ -865,6 +856,7 @@ export const advancedFields = [
size: '',
labelWidth: null,
labelHidden: false,
columnWidth: '200px',
disabled: false,
hidden: false,
clearable: true,

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

@ -177,6 +177,7 @@ export default {
endPlaceholder: 'End Placeholder',
widgetColumnWidth: 'Width',
widgetSize: 'Size',
fontSize: 'Font Size',
showStops: 'Show Stops',
displayStyle: 'Display Style',
inlineLayout: 'inline',

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

@ -177,6 +177,7 @@ export default {
endPlaceholder: '截止占位内容',
widgetColumnWidth: '组件列宽',
widgetSize: '组件大小',
fontSize: '字体大小',
showStops: '显示间断点',
displayStyle: '显示样式',
inlineLayout: '行内',