images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2024-11-10 09:39:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

2023..03.31更新：

Browse Source 
1. 静态文本组件增加两个属性；
2. 表格单元格增加换行属性；
3. 修复下拉组件筛选后不能显示全部选项的bug。
This commit is contained in:
vdpAdmin 2023-03-01 11:22:46 +08:00
parent 52b3b33043
commit f54dada718
14 changed files with 139 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -8,8 +8,11 @@
### 立即体验VForm 3
[在线Demo](http://120.92.142.115:81/vform3/)
### 立即体验VForm 3 Pro高级版（提供商业支持）
[VForm 3 Pro Demo](https://vform666.com/pages/pro/)
### 立即体验VForm 3 Pro高级版（提供商业支持）
[VForm 3 Pro Demo](https://vform666.com/pages/pro/)
### 视频教程集合：
[B站观看](https://space.bilibili.com/626932375)
### 适合Vue 2的版本看这里
[点此查看](https://gitee.com/vdpadmin/variant-form)

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

@ -1,6 +1,6 @@
<template>
<td class="table-cell" :class="[selected ? 'selected' : '', customClass]"
:style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || ''}"
:style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}"
:colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
@click.stop="selectWidget(widget)">
<draggable :list="widget.widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"

10
src/components/form-designer/form-widget/field-widget/select-widget.vue
View File

@ -12,7 +12,7 @@
:automatic-dropdown="field.options.automaticDropdown"
:multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
:remote="field.options.remote" :remote-method="remoteQuery"
:remote="field.options.remote" :remote-method="remoteMethod"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent">
<el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"
@ -73,6 +73,14 @@
return (!!this.field.options.filterable && !!this.field.options.allowCreate)
},
remoteMethod() {
if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {
return this.remoteQuery
} else {
return undefined
}
},
},
beforeCreate() {
/* 这里不能访问方法和属性！！ */

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};`: ''">
<pre :style="{'white-space': !!field.options.preWrap ? 'pre-wrap' : 'pre', 'text-align': !!field.options.textAlign ? field.options.textAlign : 'left'}">{{field.options.textContent}}</pre></div>
</static-content-wrapper>
</template>

23
src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue Normal file
View File

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

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>

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

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

2
src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
View File

@ -1,6 +1,6 @@
<template>
<el-form-item :label="i18nt('designer.setting.textContent')">
<el-input v-model="optionModel.textContent"></el-input>
<el-input v-model="optionModel.textContent" type="textarea" :rows="3"></el-input>
</el-form-item>
</template>

35
src/components/form-designer/setting-panel/property-editor/textAlign-editor.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<el-form-item :label="i18nt('designer.setting.textAlign')" v-if="(selectedWidget.type === 'static-text')">
<el-radio-group v-model="optionModel.textAlign" class="radio-group-custom">
<el-radio-button label="left">
{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
<el-radio-button label="center">
{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
<el-radio-button label="right">
{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
</el-radio-group>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
export default {
name: "textAlign-editor",
mixins: [i18n],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style lang="scss" scoped>
.radio-group-custom {
::v-deep .el-radio-button__inner {
padding-left: 12px;
padding-right: 12px;
}
}
</style>

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

@ -34,6 +34,9 @@ const COMMON_PROPERTIES = {
'editable' : 'editable-editor',
'showPassword' : 'showPassword-editor',
'textContent' : 'textContent-editor',
'textAlign' : 'textAlign-editor',
'fontSize' : 'fontSize-editor',
'preWrap' : 'preWrap-editor',
'htmlContent' : 'htmlContent-editor',
'format' : 'format-editor',
'valueFormat' : 'valueFormat-editor',
@ -63,6 +66,7 @@ const COMMON_PROPERTIES = {
'cellWidth' : 'cellWidth-editor',
'cellHeight' : 'cellHeight-editor',
'colHeight' : 'colHeight-editor',
'wordBreak' : 'wordBreak-editor',
'gutter' : 'gutter-editor',
'responsive' : 'responsive-editor',
'span' : 'span-editor',

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

@ -73,6 +73,7 @@ export const containers = [
cellHeight: '',
colspan: 1,
rowspan: 1,
wordBreak: false, //是否自动换行
customClass: '', //自定义css类名
}
},
@ -669,6 +670,9 @@ export const basicFields = [
columnWidth: '200px',
hidden: false,
textContent: 'static text',
textAlign: 'left',
fontSize: '13px',
preWrap: false, //是否自动换行
//-------------------
customClass: '', //自定义css类名
//-------------------

2
src/components/form-render/container-item/table-cell-item.vue
View File

@ -1,7 +1,7 @@
<template>
<td class="table-cell" :class="[customClass]"
:colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
:style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
:style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}">
<template v-for="(subWidget, swIdx) in widget.widgetList">
<template v-if="'container' === subWidget.category">
<component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"

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

@ -179,6 +179,8 @@ export default {
endPlaceholder: 'End Placeholder',
widgetColumnWidth: 'Width',
widgetSize: 'Size',
fontSize: 'Font Size',
textAlign: 'Text Align',
autoFullWidth: 'Auto Full Width',
showStops: 'Show Stops',
displayStyle: 'Display Style',
@ -198,6 +200,7 @@ export default {
disabled: 'Disabled',
hidden: 'Hidden',
textContent: 'Text',
preWrap: 'Line Wrap',
htmlContent: 'HTML',
clearable: 'Clearable',
editable: 'Editable',
@ -235,6 +238,7 @@ export default {
cellWidth: 'Width',
cellHeight: 'Height',
wordBreak: 'Line Wrap',
gridColHeight: 'Height Of Col(px)',
gutter: 'Gutter(px)',
columnSetting: 'Cols Setting',

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

@ -179,6 +179,8 @@ export default {
endPlaceholder: '截止占位内容',
widgetColumnWidth: '组件列宽',
widgetSize: '组件大小',
fontSize: '字体大小',
textAlign: '文字对齐',
autoFullWidth: '自动拉伸宽度',
showStops: '显示间断点',
displayStyle: '显示样式',
@ -198,6 +200,7 @@ export default {
disabled: '禁用',
hidden: '隐藏',
textContent: '静态文字',
preWrap: '自动换行',
htmlContent: 'HTML',
clearable: '可清除',
editable: '可输入',
@ -235,6 +238,7 @@ export default {
cellWidth: '宽度',
cellHeight: '高度',
wordBreak: '文字自动换行',
gridColHeight: '栅格列统一高度(px)',
gutter: '栅格间隔(px)',
columnSetting: '栅格属性设置',