images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2025-10-31 08:41:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022.11.24更新：

Browse Source 
修复更新到element-plus 2.2.0以上版本的兼容性问题。
This commit is contained in:
vdpAdmin
2022-11-24 15:38:29 +08:00
parent b2dd6d6054
commit 5d61682431
8 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -116,7 +116,7 @@
exportCodeButton: true, //是否显示导出代码按钮
generateSFCButton: true, //是否显示生成SFC按钮
toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素）
toolbarMaxWidth: 450, //设计器工具按钮栏最大宽度（单位像素）
toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
presetCssCode: '', //设计器预设CSS样式代码

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

@@ -82,7 +82,7 @@
<div v-if="showFormEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
<code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode" ref="ecEditor"></code-editor>
@@ -100,7 +100,7 @@
<div v-if="showEditFormCssDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
<template #footer>
@@ -116,7 +116,7 @@
<div v-if="showEditFunctionsDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode" ref="gfEditor"></code-editor>
<template #footer>

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

@@ -1,6 +1,6 @@
<template>
<el-container class="panel-container">
<el-tabs :active-name="activeTab" style="height: 100%; overflow: hidden">
<el-tabs v-model="activeTab" style="height: 100%; overflow: hidden">
<el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
<el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
@@ -73,7 +73,7 @@
<div v-if="showWidgetEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" v-model="showWidgetEventDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
<code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode" ref="ecEditor"></code-editor>

14
src/components/form-designer/setting-panel/option-items-setting.vue
View File

@@ -41,19 +41,19 @@
</el-cascader>
</div>
<div v-if="(selectedWidget.type === 'cascader')">
<el-button type="text" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
<el-button link type="primary" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
<el-button link type="primary" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
</div>
<div v-if="(selectedWidget.type === 'radio') || (selectedWidget.type === 'checkbox') || (selectedWidget.type === 'select')">
<el-button type="text" @click="addOption">{{i18nt('designer.setting.addOption')}}</el-button>
<el-button type="text" @click="importOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
<el-button link type="primary" @click="addOption">{{i18nt('designer.setting.addOption')}}</el-button>
<el-button link type="primary" @click="importOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
<el-button link type="primary" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
</div>
<div v-if="showImportDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-form-item>
<el-input type="textarea" rows="10" v-model="optionLines"></el-input>
@@ -69,7 +69,7 @@
<div v-if="showImportCascaderDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportCascaderDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor v-model="cascaderOptions" mode="json" :readonly="false"></code-editor>
<template #footer>

2
src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue
View File

@@ -17,7 +17,7 @@
icon="el-icon-minus" class="col-delete-button"></el-button>
</li>
<div>
<el-button type="text" @click="addNewCol(selectedWidget)">{{i18nt('designer.setting.addColumn')}}</el-button>
<el-button link type="primary" @click="addNewCol(selectedWidget)">{{i18nt('designer.setting.addColumn')}}</el-button>
</div>
</el-form-item>
</div>

4
src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
View File

@@ -19,7 +19,7 @@
<!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
<el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
style="margin-right: 8px">{{i18nt('designer.setting.paneActive')}}</el-checkbox>
<el-input type="text" v-model="tpItem.options.label" style="width: 155px"></el-input>
<el-input link type="primary" v-model="tpItem.options.label" style="width: 155px"></el-input>
<i class="iconfont icon-drag drag-option"></i>
<el-button circle plain size="small" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
icon="el-icon-minus" class="col-delete-button"></el-button>
@@ -28,7 +28,7 @@
</draggable>
<div>
<el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
<el-button link type="primary" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
</div>
</el-form-item>
</div>

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

@@ -1,9 +1,9 @@
<template>
<div class="toolbar-container">
<div class="left-toolbar">
<el-button type="text" :disabled="undoDisabled" :title="i18nt('designer.toolbar.undoHint')" @click="undoHistory">
<el-button link type="primary" :disabled="undoDisabled" :title="i18nt('designer.toolbar.undoHint')" @click="undoHistory">
<svg-icon icon-class="undo" /></el-button>
<el-button type="text" :disabled="redoDisabled" :title="i18nt('designer.toolbar.redoHint')" @click="redoHistory">
<el-button link type="primary" :disabled="redoDisabled" :title="i18nt('designer.toolbar.redoHint')" @click="redoHistory">
<svg-icon icon-class="redo" /></el-button>
<el-button-group style="margin-left: 20px">
<el-button :type="layoutType === 'PC' ? 'info': ''" @click="changeLayoutType('PC')">
@@ -25,17 +25,17 @@
<div class="right-toolbar" :style="{width: toolbarWidth + 'px'}">
<div class="right-toolbar-con">
<el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
<el-button v-if="showToolButton('clearDesignerButton')" link type="primary" @click="clearFormWidget">
<svg-icon icon-class="el-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
<el-button v-if="showToolButton('previewFormButton')" type="text" @click="previewForm">
<el-button v-if="showToolButton('previewFormButton')" link type="primary" @click="previewForm">
<svg-icon icon-class="el-view" />{{i18nt('designer.toolbar.preview')}}</el-button>
<el-button v-if="showToolButton('importJsonButton')" type="text" @click="importJson">
<el-button v-if="showToolButton('importJsonButton')" link type="primary" @click="importJson">
{{i18nt('designer.toolbar.importJson')}}</el-button>
<el-button v-if="showToolButton('exportJsonButton')" type="text" @click="exportJson">
<el-button v-if="showToolButton('exportJsonButton')" link type="primary" @click="exportJson">
{{i18nt('designer.toolbar.exportJson')}}</el-button>
<el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">
<el-button v-if="showToolButton('exportCodeButton')" link type="primary" @click="exportCode">
{{i18nt('designer.toolbar.exportCode')}}</el-button>
<el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
<el-button v-if="showToolButton('generateSFCButton')" link type="primary" @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>
@@ -46,7 +46,7 @@
<div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
:destroy-on-close="true" :append-to-body="true" custom-class="drag-dialog small-padding-dialog" width="75%"
:destroy-on-close="true" :append-to-body="true" class="drag-dialog small-padding-dialog" width="75%"
:fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
@@ -75,7 +75,7 @@
<div v-if="showImportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.importJson')" v-model="showImportJsonDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" :append-to-body="true" center
:show-close="true" class="drag-dialog small-padding-dialog" :append-to-body="true" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :title="i18nt('designer.hint.importJsonHint')" show-icon class="alert-padding"></el-alert>
<code-editor :mode="'json'" :readonly="false" v-model="importTemplate"></code-editor>
@@ -92,7 +92,7 @@
<div v-if="showExportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" center append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" center append-to-body
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor>
<template #footer>
@@ -109,7 +109,7 @@
<div v-if="showExportCodeDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" center append-to-body
:show-close="true" class="drag-dialog small-padding-dialog" center append-to-body
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
<el-tab-pane label="Vue" name="vue">
@@ -136,7 +136,7 @@
<div v-if="showFormDataDialogFlag" class="" v-drag="['.nested-drag-dialog.el-dialog', '.nested-drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.hint.exportFormData')" v-model="showFormDataDialogFlag"
:show-close="true" custom-class="nested-drag-dialog dialog-title-light-bg" center
:show-close="true" class="nested-drag-dialog dialog-title-light-bg" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
:append-to-body="true">
<div style="border: 1px solid #DCDFE6">
@@ -156,7 +156,7 @@
<div v-if="showExportSFCDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.generateSFC')" v-model="showExportSFCDialogFlag" append-to-body
v-if="showExportSFCDialogFlag" :show-close="true" custom-class="drag-dialog small-padding-dialog" center
v-if="showExportSFCDialogFlag" :show-close="true" class="drag-dialog small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeSFCTab">
<el-tab-pane label="Vue2" name="vue2">
@@ -220,7 +220,7 @@
return {
designerConfig: this.getDesignerConfig(),
toolbarWidth: 420,
toolbarWidth: 460,
showPreviewDialogFlag: false,
showImportJsonDialogFlag: false,
showExportJsonDialogFlag: false,
@@ -307,7 +307,7 @@
},
mounted() {
let maxTBWidth = this.designerConfig.toolbarMaxWidth || 420
let maxTBWidth = this.designerConfig.toolbarMaxWidth || 460
let minTBWidth = this.designerConfig.toolbarMinWidth || 300
let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80
this.toolbarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= minTBWidth ? minTBWidth : newTBWidth)
@@ -719,9 +719,10 @@
</script>
<style lang="scss" scoped>
div.toolbar-container {
//min-width: 728px; /* 解决工具按钮栏换行的问题！！ */
/* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
.toolbar-container:after {
display: block;
content: "";
clear: both;
}
.left-toolbar {
@@ -733,8 +734,8 @@
.right-toolbar {
display: flex;
margin-top: 5px;
float: right;
line-height: 42px;
text-align: right;
overflow: hidden;

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

@@ -77,7 +77,7 @@
</el-popover>
<div class="bottom clear-fix">
<span class="ft-title">#{{idx+1}} {{ft.title}}</span>
<el-button type="text" class="right-button" @click="loadFormTemplate(ft.jsonUrl)">
<el-button link type="primary" class="right-button" @click="loadFormTemplate(ft.jsonUrl)">
{{i18nt('designer.hint.loadFormTemplate')}}</el-button>
</div>
</el-card>