mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2024-09-20 04:44:45 +08:00
级联选择组件增加showAllLevels属性及属性编辑器。
This commit is contained in:
parent
08a0730672
commit
38fe46c3f1
@ -9,6 +9,8 @@
|
|||||||
:clearable="field.options.clearable"
|
:clearable="field.options.clearable"
|
||||||
:filterable="field.options.filterable"
|
:filterable="field.options.filterable"
|
||||||
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
|
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
|
||||||
|
:show-all-levels="showFullPath"
|
||||||
|
:props="{ checkStrictly: field.options.checkStrictly, multiple: field.options.multiple, expandTrigger: 'hover' }"
|
||||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||||
@change="handleChangeEvent">
|
@change="handleChangeEvent">
|
||||||
</el-cascader>
|
</el-cascader>
|
||||||
@ -63,6 +65,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
showFullPath() {
|
||||||
|
return (this.field.options.showAllLevels === undefined) || !!this.field.options.showAllLevels
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
<el-checkbox-group v-else-if="(selectedWidget.type === 'checkbox') || ((selectedWidget.type === 'select') && selectedWidget.options.multiple)"
|
<el-checkbox-group v-else-if="(selectedWidget.type === 'checkbox') || ((selectedWidget.type === 'select') && selectedWidget.options.multiple)"
|
||||||
v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
|
v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
|
||||||
<draggable tag="ul" :list="optionModel.optionItems" item-key="value"
|
<draggable tag="ul" :list="optionModel.optionItems" item-key="id"
|
||||||
v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
|
v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
|
||||||
<template #item="{ element: option, index: idx }">
|
<template #item="{ element: option, index: idx }">
|
||||||
<li>
|
<li>
|
||||||
@ -85,7 +85,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//import Draggable from 'vuedraggable'
|
|
||||||
import CodeEditor from '@/components/code-editor/index'
|
import CodeEditor from '@/components/code-editor/index'
|
||||||
import i18n from "@/utils/i18n";
|
import i18n from "@/utils/i18n";
|
||||||
|
|
||||||
@ -93,7 +92,6 @@
|
|||||||
name: "OptionItemsSetting",
|
name: "OptionItemsSetting",
|
||||||
mixins: [i18n],
|
mixins: [i18n],
|
||||||
components: {
|
components: {
|
||||||
//Draggable,
|
|
||||||
CodeEditor,
|
CodeEditor,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<el-form-item :label="i18nt('designer.setting.multiple')">
|
||||||
|
<el-switch v-model="optionModel.multiple"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import i18n from "@/utils/i18n"
|
||||||
|
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "cascader-multiple-editor",
|
||||||
|
mixins: [i18n, propertyMixin],
|
||||||
|
props: {
|
||||||
|
designer: Object,
|
||||||
|
selectedWidget: Object,
|
||||||
|
optionModel: Object,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<el-form-item :label="i18nt('designer.setting.checkStrictly')">
|
||||||
|
<el-switch v-model="optionModel.checkStrictly"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import i18n from "@/utils/i18n"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "checkStrictly-editor",
|
||||||
|
mixins: [i18n],
|
||||||
|
props: {
|
||||||
|
designer: Object,
|
||||||
|
selectedWidget: Object,
|
||||||
|
optionModel: Object,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<el-form-item :label="i18nt('designer.setting.showAllLevels')">
|
||||||
|
<el-switch v-model="optionModel.showAllLevels"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import i18n from "@/utils/i18n"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "showAllLevels-editor",
|
||||||
|
mixins: [i18n],
|
||||||
|
props: {
|
||||||
|
designer: Object,
|
||||||
|
selectedWidget: Object,
|
||||||
|
optionModel: Object,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -41,6 +41,8 @@ const COMMON_PROPERTIES = {
|
|||||||
'allowCreate' : 'allowCreate-editor',
|
'allowCreate' : 'allowCreate-editor',
|
||||||
'remote' : 'remote-editor',
|
'remote' : 'remote-editor',
|
||||||
'automaticDropdown' : 'automaticDropdown-editor',
|
'automaticDropdown' : 'automaticDropdown-editor',
|
||||||
|
'checkStrictly' : 'checkStrictly-editor',
|
||||||
|
'showAllLevels' : 'showAllLevels-editor',
|
||||||
'multiple' : 'multiple-editor',
|
'multiple' : 'multiple-editor',
|
||||||
'multipleLimit' : 'multipleLimit-editor',
|
'multipleLimit' : 'multipleLimit-editor',
|
||||||
'contentPosition' : 'contentPosition-editor',
|
'contentPosition' : 'contentPosition-editor',
|
||||||
|
@ -885,6 +885,9 @@ export const advancedFields = [
|
|||||||
hidden: false,
|
hidden: false,
|
||||||
clearable: true,
|
clearable: true,
|
||||||
filterable: false,
|
filterable: false,
|
||||||
|
multiple: false,
|
||||||
|
checkStrictly: false, //可选择任意一级选项,默认不开启
|
||||||
|
showAllLevels: true, //显示完整路径
|
||||||
optionItems: [
|
optionItems: [
|
||||||
{label: 'select 1', value: 1, children: [{label: 'child 1', value: 11}]},
|
{label: 'select 1', value: 1, children: [{label: 'child 1', value: 11}]},
|
||||||
{label: 'select 2', value: 2},
|
{label: 'select 2', value: 2},
|
||||||
|
@ -210,6 +210,8 @@ export default {
|
|||||||
automaticDropdown: 'Automatic Dropdown',
|
automaticDropdown: 'Automatic Dropdown',
|
||||||
multiple: 'Multiple',
|
multiple: 'Multiple',
|
||||||
multipleLimit: 'Multiple Limit',
|
multipleLimit: 'Multiple Limit',
|
||||||
|
checkStrictly: 'Any Level Selectable',
|
||||||
|
showAllLevels: 'Show All Levels',
|
||||||
contentPosition: 'Content Position',
|
contentPosition: 'Content Position',
|
||||||
plain: 'Plain',
|
plain: 'Plain',
|
||||||
round: 'Round',
|
round: 'Round',
|
||||||
|
@ -210,6 +210,8 @@ export default {
|
|||||||
automaticDropdown: '自动弹出选项',
|
automaticDropdown: '自动弹出选项',
|
||||||
multiple: '选项可多选',
|
multiple: '选项可多选',
|
||||||
multipleLimit: '多选数量限制',
|
multipleLimit: '多选数量限制',
|
||||||
|
checkStrictly: '任意级节点可选',
|
||||||
|
showAllLevels: '显示完整路径',
|
||||||
contentPosition: '文字位置',
|
contentPosition: '文字位置',
|
||||||
plain: '朴素按钮',
|
plain: '朴素按钮',
|
||||||
round: '圆角按钮',
|
round: '圆角按钮',
|
||||||
|
@ -35,8 +35,8 @@ export const generateCode = function(formJson, codeType= 'vue') {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submitForm: function() {
|
submitForm() {
|
||||||
this.$refs.vFormRef.getFormData().then( function(formData) {
|
this.$refs.vFormRef.getFormData().then( (formData) => {
|
||||||
// Form Validation OK
|
// Form Validation OK
|
||||||
alert( JSON.stringify(formData) )
|
alert( JSON.stringify(formData) )
|
||||||
}).catch( function(error) {
|
}).catch( function(error) {
|
||||||
|
@ -2,7 +2,7 @@ import {isEmptyStr, isNull} from "./util";
|
|||||||
|
|
||||||
export const getRegExp = function (validatorName) {
|
export const getRegExp = function (validatorName) {
|
||||||
const commonRegExp = {
|
const commonRegExp = {
|
||||||
number: '/^\\d+(\\.\\d+)?$/',
|
number: '/^[-]?\\d+(\\.\\d+)?$/',
|
||||||
letter: '/^[A-Za-z]+$/',
|
letter: '/^[A-Za-z]+$/',
|
||||||
letterAndNumber: '/^[A-Za-z0-9]+$/',
|
letterAndNumber: '/^[A-Za-z0-9]+$/',
|
||||||
mobilePhone: '/^[1][3-9][0-9]{9}$/',
|
mobilePhone: '/^[1][3-9][0-9]{9}$/',
|
||||||
|
Loading…
Reference in New Issue
Block a user