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

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

master
vdpAdmin 2022-04-12 19:29:04 +08:00
parent 72a7f402b3
commit 1d85321f85
15 changed files with 139 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,7 +98,8 @@ export function createDesigner(vueInstance) {
getImportTemplate() {
return {
widgetList: [],
formConfig: deepClone(this.formConfig)
// formConfig: deepClone(this.formConfig)
formConfig: deepClone(defaultFormConfig)
}
},
@ -131,7 +132,7 @@ 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)) {
@ -637,6 +638,33 @@ export function createDesigner(vueInstance) {
return Object.keys(originalWidget.options).indexOf(configName) > -1
},
upgradeWidgetConfig(oldWidget) {
let newWidget = null
if (!!oldWidget.category) {
newWidget = this.getContainerByType(oldWidget.type)
} else {
newWidget = this.getFieldWidgetByType(oldWidget.type)
}
if (!newWidget || !newWidget.options) {
return
}
Object.keys(newWidget.options).forEach(ck => {
if (!oldWidget.hasOwnProperty(ck)) {
oldWidget.options[ck] = deepClone(newWidget.options[ck])
}
})
},
upgradeFormConfig(oldFormConfig) {
Object.keys(this.formConfig).forEach(fc => {
if (!oldFormConfig.hasOwnProperty(fc)) {
oldFormConfig[fc] = deepClone(this.formConfig[fc])
}
})
},
cloneGridCol(widget, parentWidget) {
let newGridCol = deepClone(this.getContainerByType('grid-col'))
newGridCol.options.span = widget.options.span

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

@ -41,11 +41,13 @@
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,
@ -168,6 +170,7 @@
},
created() {
this.initRefList()
this.initLayoutProps()
},
methods: {

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

@ -28,13 +28,15 @@
<script>
import i18n from "@/utils/i18n"
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 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,12 +61,14 @@
watch: {
//
},
created() {
this.initRefList()
},
mounted() {
//
},
methods: {
}
}
</script>

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

@ -49,11 +49,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 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,
@ -86,6 +88,9 @@
watch: {
//
},
created() {
this.initRefList()
},
mounted() {
//
},

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

@ -55,11 +55,13 @@
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,
@ -140,6 +142,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"

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

@ -159,14 +159,19 @@
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)
this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
}
return foundRef
},
getSelectedWidgetRef() {
let wName = this.designer.selectedWidgetName
return this.getWidgetRef(wName)
},
}
}
</script>

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

@ -45,7 +45,7 @@
</el-header>
<el-main class="form-widget-main">
<el-scrollbar class="container-scroll-bar" :style="{height: scrollerHeight}">
<v-form-widget :designer="designer" :form-config="designer.formConfig">
<v-form-widget :designer="designer" :form-config="designer.formConfig" ref="formRef">
</v-form-widget>
</el-scrollbar>
</el-main>
@ -70,7 +70,7 @@
deepClone,
getAllContainerWidgets,
getAllFieldWidgets,
getQueryParam
getQueryParam, traverseAllWidgets
} from "@/utils/util"
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
import i18n, { changeLocale } from "@/utils/i18n"
@ -357,6 +357,32 @@
return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
},
/**
* 升级表单json，以补充最新的组件属性
* @param formJson
*/
upgradeFormJson(formJson) {
if (!formJson.widgetList || !formJson.formConfig) {
this.$message.error('Invalid form json!')
return
}
traverseAllWidgets(formJson.widgetList, (w) => {
this.designer.upgradeWidgetConfig(w)
})
this.designer.upgradeFormConfig(formJson.formConfig)
return formJson
},
getWidgetRef(widgetName, showError = false) {
return this.$refs['formRef'].getWidgetRef(widgetName, showError)
},
getSelectedWidgetRef() {
return this.$refs['formRef'].getSelectedWidgetRef()
},
//TODO: 增加更多方法！！
}
@ -365,6 +391,8 @@
<style lang="scss" scoped>
.el-container.main-container {
background: #fff;
::v-deep aside { /* 防止aside样式被外部样式覆盖！！ */
margin: 0;
padding: 0;

28
src/components/form-designer/refMixinDesign.js Normal file
View File

@ -0,0 +1,28 @@
export default {
methods: {
initRefList() {
if ((this.refList !== null) && !!this.widget.options.name) {
this.refList[this.widget.options.name] = this
}
},
getWidgetRef(widgetName, showError = false) {
let foundRef = this.refList[widgetName]
if (!foundRef && !!showError) {
this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
}
return foundRef
},
/* 该方法用于组件重名检查！！ */
registerToRefList(oldRefName) {
if ((this.refList !== null) && !!this.widget.options.name) {
if (!!oldRefName) {
delete this.refList[oldRefName]
}
this.refList[this.widget.options.name] = this
}
},
}
}

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

@ -54,19 +54,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

@ -32,6 +32,7 @@
</template>
<script>
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
@ -39,7 +40,7 @@
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

@ -26,6 +26,7 @@
</template>
<script>
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
@ -33,7 +34,7 @@
export default {
name: "TableCellItem",
componentName: "ContainerItem",
mixins: [i18n, refMixin],
mixins: [emitter, i18n, refMixin],
components: {
...FieldComponents,
},

2
src/components/form-render/refMixin.js
View File

@ -6,7 +6,7 @@ export default {
}
},
getWidgetRef(widgetName, showError) {
getWidgetRef(widgetName, showError = false) {
let foundRef = this.refList[widgetName]
if (!foundRef && !!showError) {
this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)

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

@ -154,9 +154,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',
},