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

v-form-designer新增两个API方法：getWidgetRef、getSelectedWidgetRef。

Browse Source
This commit is contained in:
vdpAdmin 2022-04-12 18:20:15 +08:00
parent 8cdafa4136
commit fba05b946d
14 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,7 +100,8 @@ export function createDesigner(vueInstance) {
getImportTemplate() {
return {
widgetList: [],
formConfig: deepClone(this.formConfig)
// formConfig: deepClone(this.formConfig)
formConfig: deepClone(defaultFormConfig)
}
},
@ -133,9 +134,8 @@ export function createDesigner(vueInstance) {
}
},
updateSelectedWidgetNameAndRef(selectedWidget, newName, newLabel) {
updateSelectedWidgetNameAndLabel(selectedWidget, newName, newLabel) {
this.selectedWidgetName = newName
//selectedWidget.options.name = newName //此行多余
if (!!newLabel && (Object.keys(selectedWidget.options).indexOf('label') > -1)) {
selectedWidget.options.label = newLabel
}

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

@ -43,16 +43,16 @@
</template>
<script>
//import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n";
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
export default {
name: "GridColWidget",
componentName: "GridColWidget",
mixins: [i18n],
mixins: [i18n, refMixinDesign],
inject: ['refList'],
components: {
//Draggable,
...FieldComponents,
},
props: {
@ -173,6 +173,7 @@
},
created() {
this.initRefList()
this.initLayoutProps()
},
methods: {

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

@ -30,11 +30,13 @@
import GridColWidget from "@/components/form-designer/form-widget/container-widget/grid-col-widget"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper";
import refMixinDesign from "@/components/form-designer/refMixinDesign"
export default {
name: "grid-widget",
componentName: 'ContainerWidget',
mixins: [i18n, containerMixin],
mixins: [i18n, containerMixin, refMixinDesign],
inject: ['refList'],
components: {
ContainerWrapper,
GridColWidget
@ -59,6 +61,9 @@
watch: {
//
},
created() {
this.initRefList()
},
mounted() {
//
},

10
src/components/form-designer/form-widget/container-widget/tab-widget.vue
View File

@ -44,20 +44,19 @@
</template>
<script>
//import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
export default {
name: "tab-widget",
componentName: 'ContainerWidget',
mixins: [i18n, containerMixin],
mixins: [i18n, containerMixin, refMixinDesign],
inject: ['refList'],
components: {
ContainerWrapper,
//Draggable,
...FieldComponents,
},
props: {
@ -86,6 +85,9 @@
watch: {
//
},
created() {
this.initRefList()
},
mounted() {
//
},

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

@ -55,16 +55,16 @@
</template>
<script>
//import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
export default {
name: "TableCellWidget",
componentName: "TableCellWidget",
mixins: [i18n],
mixins: [i18n, refMixinDesign],
inject: ['refList'],
components: {
//Draggable,
...FieldComponents,
},
props: {
@ -143,6 +143,9 @@
watch: {
//
},
created() {
this.initRefList()
},
methods: {
selectWidget(widget) {
this.designer.setSelected(widget)

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

@ -38,11 +38,13 @@
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
import TableCellWidget from "@/components/form-designer/form-widget/container-widget/table-cell-widget"
import refMixinDesign from "@/components/form-designer/refMixinDesign"
export default {
name: "table-widget",
componentName: 'ContainerWidget',
mixins: [i18n, containerMixin],
mixins: [i18n, containerMixin, refMixinDesign],
inject: ['refList'],
components: {
ContainerWrapper,
TableCellWidget,
@ -67,6 +69,9 @@
watch: {
//
},
created() {
this.initRefList()
},
mounted() {
//
},

2
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="this.field.options.remote" :remote-method="remoteQuery"
:remote="field.options.remote" :remote-method="remoteQuery"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent">
<el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"

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

@ -158,7 +158,7 @@
return this.formModel
},
getWidgetRef(widgetName, showError) {
getWidgetRef(widgetName, showError = false) {
let foundRef = this.widgetRefList[widgetName]
if (!foundRef && !!showError) {
this.$message.error(this.i18nt('designer.hint.refNotFound') + widgetName)
@ -166,6 +166,11 @@
return foundRef
},
getSelectedWidgetRef() {
let wName = this.designer.selectedWidgetName
return this.getWidgetRef(wName)
},
}
}
</script>

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

@ -107,12 +107,15 @@
externalLink: true, //是否显示GitHub、文档等外部链接
formTemplates: true, //是否显示表单模板
eventCollapse: true, //是否显示组件事件属性折叠面板
widgetNameReadonly: false, //禁止修改组件名称
clearDesignerButton: true, //是否显示清空设计器按钮
previewFormButton: true, //是否显示预览表单按钮
importJsonButton: true, //是否显示导入JSON按钮
exportJsonButton: true, //是否显示导出JSON器按钮
exportCodeButton: true, //是否显示导出代码按钮
generateSFCButton: true, //是否显示生成SFC按钮
toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素）
toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
@ -361,6 +364,14 @@
return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
},
getWidgetRef(widgetName, showError = false) {
return this.$refs['formRef'].getWidgetRef(widgetName, showError)
},
getSelectedWidgetRef() {
return this.$refs['formRef'].getSelectedWidgetRef()
},
//TODO: 增加更多方法！！
}
@ -368,6 +379,16 @@
</script>
<style lang="scss" scoped>
.el-container.main-container {
background: #fff;
::v-deep aside { /* 防止aside样式被外部样式覆盖！！ */
margin: 0;
padding: 0;
background: inherit;
}
}
.el-container.full-height {
height: 100%;
overflow-y: hidden;

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

@ -7,10 +7,10 @@
</span>
</template>
<template v-if="!!selectedWidget.category || noFieldList">
<el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
<el-input type="text" v-model="optionModel.name" :readonly="widgetNameReadonly" @change="updateWidgetNameAndRef"></el-input>
</template>
<template v-else>
<el-select v-model="optionModel.name" allow-create filterable @change="updateWidgetNameAndRef"
<el-select v-model="optionModel.name" allow-create filterable :disabled="widgetNameReadonly" @change="updateWidgetNameAndRef"
:title="i18nt('designer.setting.editNameHelp')">
<el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"></el-option>
</el-select>
@ -30,7 +30,7 @@
selectedWidget: Object,
optionModel: Object,
},
inject: ['serverFieldList'],
inject: ['serverFieldList', 'getDesignerConfig'],
data() {
return {
nameRequiredRule: [{required: true, message: 'name required'}],
@ -41,6 +41,10 @@
return !this.serverFieldList || (this.serverFieldList.length <= 0)
},
widgetNameReadonly() {
return !!this.getDesignerConfig().widgetNameReadonly
},
},
methods: {
updateWidgetNameAndRef(newName) {
@ -52,19 +56,18 @@
}
if (!!this.designer.formWidget) {
//检查newName是否已存在！！
let foundRef = this.designer.formWidget.getWidgetRef(newName)
let foundRef = this.designer.formWidget.getWidgetRef(newName) // 检查newName是否已存在！！
if (!!foundRef) {
this.selectedWidget.options.name = oldName
this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
return
}
let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
if (!!fieldWidget && !!fieldWidget.registerToRefList) {
fieldWidget.registerToRefList(oldName) //注册组件新的ref名称并删除老的ref！！
let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName)
if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
widgetInDesign.registerToRefList(oldName) //注册组件新的ref名称并删除老的ref！！
let newLabel = this.getLabelByFieldName(newName)
this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName, newLabel)
this.designer.updateSelectedWidgetNameAndLabel(this.selectedWidget, newName, newLabel)
}
}
},

3
src/components/form-render/container-item/grid-col-item.vue
View File

@ -35,11 +35,12 @@
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import emitter from "@/utils/emitter";
export default {
name: "GridColItem",
componentName: 'ContainerItem',
mixins: [i18n, refMixin],
mixins: [emitter, i18n, refMixin],
components: {
...FieldComponents,
},

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

@ -29,11 +29,12 @@
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import emitter from "@/utils/emitter";
export default {
name: "TableCellItem",
componentName: "ContainerItem",
mixins: [i18n, refMixin],
mixins: [emitter, i18n, refMixin],
components: {
...FieldComponents,
},

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

@ -41,17 +41,17 @@
<script>
import i18n from "@/utils/i18n"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
//import Draggable from 'vuedraggable'
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
export default {
name: "card-widget",
componentName: 'ContainerWidget',
mixins: [i18n, containerMixin],
mixins: [i18n, containerMixin, refMixinDesign],
inject: ['refList'],
components: {
//Draggable,
ContainerWrapper,
...FieldComponents,
ArrowDown,
@ -74,6 +74,9 @@
},
},
created() {
this.initRefList()
},
methods: {
/**
* 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false

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

@ -156,9 +156,9 @@ export default {
nodeTreeTitle: 'Tree View Of Component Hierarchy',
clear: 'Clear',
preview: 'Preview',
importJson: 'Import JSON',
exportJson: 'Export JSON',
exportCode: 'Export Code',
importJson: 'Import',
exportJson: 'Export',
exportCode: 'Codes',
generateCode: 'Generate Code',
generateSFC: 'Generate SFC',
},