mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2025-09-17 19:53:02 +08:00
Vue 3版本初次提交，继续测试中。
This commit is contained in:
vdpAdmin
330
src/components/form-designer/setting-panel/form-setting.vue
Normal file
330
src/components/form-designer/setting-panel/form-setting.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="formConfig" size="mini" label-position="left" label-width="120px"
|
||||
class="setting-form" @submit.prevent>
|
||||
<el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
|
||||
<el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
|
||||
<el-form-item :label="i18nt('designer.setting.formSize')">
|
||||
<el-select v-model="formConfig.size">
|
||||
<el-option v-for="item in formSizes" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.labelPosition')">
|
||||
<el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
|
||||
<el-radio-button label="left">{{i18nt('designer.setting.leftPosition')}}</el-radio-button>
|
||||
<el-radio-button label="top">{{i18nt('designer.setting.topPosition')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.labelAlign')">
|
||||
<el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
|
||||
<el-radio-button label="label-left-align">{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
|
||||
<el-radio-button label="label-center-align">{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
|
||||
<el-radio-button label="label-right-align">{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.labelWidth')">
|
||||
<el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.formCss')">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{i18nt('designer.setting.addCss')}}</el-button>
|
||||
</el-form-item>
|
||||
<!-- -->
|
||||
<el-form-item :label="i18nt('designer.setting.customClass')">
|
||||
<el-select v-model="formConfig.customClass" multiple filterable allow-create
|
||||
default-first-option>
|
||||
<el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- -->
|
||||
<el-form-item :label="i18nt('designer.setting.globalFunctions')">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.formModelName')">
|
||||
<el-input type="text" v-model="formConfig.modelName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.formRefName')">
|
||||
<el-input type="text" v-model="formConfig.refName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.formRulesName')">
|
||||
<el-input type="text" v-model="formConfig.rulesName"></el-input>
|
||||
</el-form-item>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item v-if="showEventCollapse()" name="2" :title="i18nt('designer.setting.eventSetting')">
|
||||
<el-form-item label="onFormCreated" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormCreated')">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="onFormMounted" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormMounted')">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
<!-- -->
|
||||
<el-form-item label="onFormDataChange" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormDataChange')">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
<!-- -->
|
||||
<!--
|
||||
<el-form-item label="onFormValidate">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
-->
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
|
||||
<el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
|
||||
v-if="showFormEventDialogFlag" :show-close="true" custom-class="small-padding-dialog"
|
||||
: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"></code-editor>
|
||||
<el-alert type="info" :closable="false" title="}"></el-alert>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showFormEventDialogFlag = false">
|
||||
{{i18nt('designer.hint.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="saveFormEventHandler">
|
||||
{{i18nt('designer.hint.confirm')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag"
|
||||
v-if="showEditFormCssDialogFlag" :show-close="true" custom-class="small-padding-dialog"
|
||||
: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>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showEditFormCssDialogFlag = false">
|
||||
{{i18nt('designer.hint.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="saveFormCss">
|
||||
{{i18nt('designer.hint.confirm')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
|
||||
v-if="showEditFunctionsDialogFlag" :show-close="true" custom-class="small-padding-dialog"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
|
||||
<code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showEditFunctionsDialogFlag = false">
|
||||
{{i18nt('designer.hint.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="saveGlobalFunctions">
|
||||
{{i18nt('designer.hint.confirm')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import CodeEditor from '@/components/code-editor/index'
|
||||
import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "@/utils/util"
|
||||
|
||||
export default {
|
||||
name: "form-setting",
|
||||
mixins: [i18n],
|
||||
components: {
|
||||
CodeEditor,
|
||||
},
|
||||
props: {
|
||||
designer: Object,
|
||||
formConfig: Object,
|
||||
},
|
||||
inject: ['getDesignerConfig'],
|
||||
data() {
|
||||
return {
|
||||
designerConfig: this.getDesignerConfig(),
|
||||
|
||||
formActiveCollapseNames: ['1', '2'],
|
||||
|
||||
formSizes: [
|
||||
{label: 'default', value: ''},
|
||||
{label: 'large', value: 'large'},
|
||||
{label: 'medium', value: 'medium'},
|
||||
{label: 'small', value: 'small'},
|
||||
{label: 'mini', value: 'mini'},
|
||||
],
|
||||
|
||||
showEditFormCssDialogFlag: false,
|
||||
formCssCode: '',
|
||||
cssClassList: [],
|
||||
|
||||
showEditFunctionsDialogFlag: false,
|
||||
functionsCode: '',
|
||||
|
||||
showFormEventDialogFlag: false,
|
||||
formEventHandlerCode: '',
|
||||
curEventName: '',
|
||||
|
||||
eventParamsMap: {
|
||||
'onFormCreated': 'onFormCreated() {',
|
||||
'onFormMounted': 'onFormMounted() {',
|
||||
'onFormDataChange': 'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {',
|
||||
//'onFormValidate': 'onFormValidate() {',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//导入表单JSON后需要重新加载自定义CSS样式！！！
|
||||
this.designer.handleEvent('form-json-imported', () => {
|
||||
this.formCssCode = this.formConfig.cssCode
|
||||
insertCustomCssToHead(this.formCssCode)
|
||||
this.extractCssClass()
|
||||
this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
/* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
|
||||
此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
|
||||
setTimeout(() => {
|
||||
this.formCssCode = this.formConfig.cssCode
|
||||
insertCustomCssToHead(this.formCssCode)
|
||||
this.extractCssClass()
|
||||
this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
|
||||
}, 1200)
|
||||
},
|
||||
methods: {
|
||||
showEventCollapse() {
|
||||
if (this.designerConfig['eventCollapse'] === undefined) {
|
||||
return true
|
||||
}
|
||||
|
||||
return !!this.designerConfig['eventCollapse']
|
||||
},
|
||||
|
||||
editFormCss() {
|
||||
this.formCssCode = this.designer.formConfig.cssCode
|
||||
this.showEditFormCssDialogFlag = true
|
||||
},
|
||||
|
||||
extractCssClass() {
|
||||
let regExp = /\..*{/g
|
||||
let result = this.formCssCode.match(regExp)
|
||||
let cssNameArray = []
|
||||
|
||||
if (!!result && result.length > 0) {
|
||||
result.forEach((rItem) => {
|
||||
let classArray = rItem.split(',') //切分逗号分割的多个class
|
||||
if (classArray.length > 0) {
|
||||
classArray.forEach((cItem) => {
|
||||
let caItem = cItem.trim()
|
||||
if (caItem.indexOf('.', 1) !== -1) { //查找第二个.位置
|
||||
let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1)) //仅截取第一、二个.号之间的class
|
||||
if (!!newClass) {
|
||||
cssNameArray.push(newClass.trim())
|
||||
}
|
||||
} else if (caItem.indexOf(' ') !== -1) { //查找第一个空格位置
|
||||
let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' ')) //仅截取第一、二个.号之间的class
|
||||
if (!!newClass) {
|
||||
cssNameArray.push(newClass.trim())
|
||||
}
|
||||
} else {
|
||||
if (caItem.indexOf('{') !== -1) { //查找第一个{位置
|
||||
let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
|
||||
cssNameArray.push( newClass.trim() )
|
||||
} else {
|
||||
let newClass = caItem.substring(caItem.indexOf('.') + 1)
|
||||
cssNameArray.push( newClass.trim() )
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//this.cssClassList.length = 0
|
||||
this.cssClassList.splice(0, this.cssClassList.length) //清除数组必须用splice，length=0不会响应式更新！！
|
||||
this.cssClassList = Array.from( new Set(cssNameArray) ) //数组去重
|
||||
},
|
||||
|
||||
saveFormCss() {
|
||||
this.extractCssClass()
|
||||
this.designer.formConfig.cssCode = this.formCssCode
|
||||
insertCustomCssToHead(this.formCssCode)
|
||||
this.showEditFormCssDialogFlag = false
|
||||
|
||||
this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
|
||||
},
|
||||
|
||||
editGlobalFunctions() {
|
||||
this.functionsCode = this.designer.formConfig.functions
|
||||
this.showEditFunctionsDialogFlag = true
|
||||
},
|
||||
|
||||
saveGlobalFunctions() {
|
||||
this.designer.formConfig.functions = this.functionsCode
|
||||
insertGlobalFunctionsToHtml(this.functionsCode)
|
||||
this.showEditFunctionsDialogFlag = false
|
||||
},
|
||||
|
||||
editFormEventHandler(eventName) {
|
||||
this.curEventName = eventName
|
||||
this.formEventHandlerCode = this.formConfig[eventName]
|
||||
this.showFormEventDialogFlag = true
|
||||
},
|
||||
|
||||
saveFormEventHandler() {
|
||||
this.formConfig[this.curEventName] = this.formEventHandlerCode
|
||||
this.showFormEventDialogFlag = false
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-form {
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 13px;
|
||||
//text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.el-form-item--mini.el-form-item) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.radio-group-custom {
|
||||
:deep(.el-radio-button__inner) {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-divider.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-collapse {
|
||||
:deep(.el-collapse-item__content) {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.small-padding-dialog {
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 6px 15px 12px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
331
src/components/form-designer/setting-panel/index.vue
Normal file
331
src/components/form-designer/setting-panel/index.vue
Normal file
@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<el-container class="panel-container">
|
||||
<el-tabs :active-name="activeTab" style="height: 100%; overflow: hidden">
|
||||
<el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
|
||||
<el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
|
||||
|
||||
<template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
|
||||
<el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
|
||||
@submit.prevent>
|
||||
<el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
|
||||
<el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
|
||||
<template v-for="(editorName, propName) in commonProps">
|
||||
<component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
|
||||
:designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
|
||||
<template v-for="(editorName, propName) in advProps">
|
||||
<component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
|
||||
:designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
|
||||
<template v-for="(editorName, propName) in eventProps">
|
||||
<component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
|
||||
:designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<template v-if="(!!designer.selectedWidget && !!designer.selectedWidget.category)">
|
||||
<el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
|
||||
@submit.prevent>
|
||||
<el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
|
||||
<el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
|
||||
<template v-for="(editorName, propName) in commonProps">
|
||||
<component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
|
||||
:designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
|
||||
<template v-for="(editorName, propName) in advProps">
|
||||
<component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
|
||||
:designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
|
||||
<template v-for="(editorName, propName) in eventProps">
|
||||
<component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
|
||||
:designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
|
||||
<el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
|
||||
<form-setting :designer="designer" :form-config="formConfig"></form-setting>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" v-model="showWidgetEventDialogFlag"
|
||||
v-if="showWidgetEventDialogFlag" :show-close="true" custom-class="small-padding-dialog"
|
||||
: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"></code-editor>
|
||||
<el-alert type="info" :closable="false" title="}"></el-alert>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showWidgetEventDialogFlag = false">
|
||||
{{i18nt('designer.hint.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="saveEventHandler">
|
||||
{{i18nt('designer.hint.confirm')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeEditor from '@/components/code-editor/index'
|
||||
import PropertyEditors from './property-editor/index'
|
||||
import FormSetting from './form-setting'
|
||||
import WidgetProperties from './propertyRegister'
|
||||
import {
|
||||
addWindowResizeHandler,
|
||||
} from "@/utils/util"
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventBus from "@/utils/event-bus"
|
||||
|
||||
const {COMMON_PROPERTIES, ADVANCED_PROPERTIES, EVENT_PROPERTIES} = WidgetProperties
|
||||
|
||||
export default {
|
||||
name: "SettingPanel",
|
||||
componentName: "SettingPanel",
|
||||
mixins: [i18n],
|
||||
components: {
|
||||
CodeEditor,
|
||||
FormSetting,
|
||||
...PropertyEditors,
|
||||
},
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
formConfig: Object,
|
||||
},
|
||||
inject: ['getDesignerConfig'],
|
||||
data() {
|
||||
return {
|
||||
designerConfig: this.getDesignerConfig(),
|
||||
|
||||
scrollerHeight: 0,
|
||||
|
||||
activeTab: "2",
|
||||
widgetActiveCollapseNames: ['1', '3'], //['1', '2', '3'],
|
||||
formActiveCollapseNames: ['1', '2'],
|
||||
|
||||
commonProps: COMMON_PROPERTIES,
|
||||
advProps: ADVANCED_PROPERTIES,
|
||||
eventProps: EVENT_PROPERTIES,
|
||||
|
||||
showWidgetEventDialogFlag: false,
|
||||
eventHandlerCode: '',
|
||||
curEventName: '',
|
||||
eventHeader: '',
|
||||
|
||||
subFormChildWidgetFlag: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
optionModel: {
|
||||
get() {
|
||||
return this.selectedWidget.options
|
||||
},
|
||||
|
||||
set(newValue) {
|
||||
this.selectedWidget.options = newValue
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
'designer.selectedWidget': {
|
||||
handler(val) {
|
||||
if (!!val) {
|
||||
this.activeTab = "1"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
'selectedWidget.options': { //组件属性变动后，立即保存表单JSON！！
|
||||
deep: true,
|
||||
handler() {
|
||||
this.designer.saveCurrentHistoryStep()
|
||||
}
|
||||
},
|
||||
|
||||
formConfig: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.designer.saveCurrentHistoryStep()
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
eventBus.$on('editEventHandler', function (eventName, eventParams) {
|
||||
this.editEventHandler(eventName, eventParams)
|
||||
})
|
||||
|
||||
this.designer.handleEvent('form-css-updated', (cssClassList) => {
|
||||
this.designer.setCssClassList(cssClassList)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
if (!this.designer.selectedWidget) {
|
||||
this.activeTab = "2"
|
||||
} else {
|
||||
this.activeTab = "1"
|
||||
}
|
||||
|
||||
this.scrollerHeight = window.innerHeight - 56 - 48 + 'px'
|
||||
addWindowResizeHandler(() => {
|
||||
this.$nextTick(() => {
|
||||
this.scrollerHeight = window.innerHeight - 56 - 48 + 'px'
|
||||
//console.log(this.scrollerHeight)
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showEventCollapse() {
|
||||
if (this.designerConfig['eventCollapse'] === undefined) {
|
||||
return true
|
||||
}
|
||||
|
||||
return !!this.designerConfig['eventCollapse']
|
||||
},
|
||||
|
||||
hasPropEditor(propName, editorName) {
|
||||
if (!editorName) {
|
||||
return false
|
||||
}
|
||||
|
||||
let originalPropName = propName.replace(this.selectedWidget.type + '-', '') //去掉组件名称前缀-，如果有的话！！
|
||||
return this.designer.hasConfig(this.selectedWidget, originalPropName)
|
||||
},
|
||||
|
||||
getPropEditor(propName, editorName) {
|
||||
let originalPropName = propName.replace(this.selectedWidget.type + '-', '') //去掉组件名称前缀-，如果有的话！！
|
||||
let ownPropEditorName = `${this.selectedWidget.type}-${originalPropName}-editor`
|
||||
//console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
|
||||
if (!!this.$options.components[ownPropEditorName]) { //局部注册的属性编辑器组件
|
||||
return ownPropEditorName
|
||||
}
|
||||
|
||||
return !!this.$root.$options.components[ownPropEditorName] ? ownPropEditorName : editorName //全局注册的属性编辑器组件
|
||||
},
|
||||
|
||||
showCollapse(propsObj) {
|
||||
let result = false
|
||||
|
||||
for (let propName in propsObj) {
|
||||
if (!propsObj.hasOwnProperty(propName)) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (this.hasPropEditor(propName, propsObj[propName])) {
|
||||
result = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
editEventHandler(eventName, eventParams) {
|
||||
this.curEventName = eventName
|
||||
this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`
|
||||
this.eventHandlerCode = this.selectedWidget.options[eventName] || ''
|
||||
|
||||
// 设置字段校验函数示例代码
|
||||
if ((eventName === 'onValidate') && (!this.optionModel['onValidate'])) {
|
||||
this.eventHandlerCode = " /* sample code */\n /*\n if ((value > 100) || (value < 0)) {\n callback(new Error('error message')) //fail\n } else {\n callback(); //pass\n }\n */"
|
||||
}
|
||||
|
||||
this.showWidgetEventDialogFlag = true
|
||||
},
|
||||
|
||||
saveEventHandler() {
|
||||
this.selectedWidget.options[this.curEventName] = this.eventHandlerCode
|
||||
this.showWidgetEventDialogFlag = false
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-container {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.setting-scrollbar {
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
|
||||
}
|
||||
}
|
||||
|
||||
.setting-collapse {
|
||||
:deep(.el-collapse-item__content) {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-form {
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 13px;
|
||||
//text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.el-form-item--mini.el-form-item) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
|
||||
:deep(.hide-spin-button) input::-webkit-outer-spin-button,
|
||||
:deep(.hide-spin-button) input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
|
||||
:deep(.hide-spin-button) input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
:deep(.custom-divider.el-divider--horizontal) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
:deep(.custom-divider-margin-top.el-divider--horizontal) {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.small-padding-dialog {
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 6px 15px 12px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="option-items-pane">
|
||||
<el-radio-group v-if="(selectedWidget.type === 'radio') || ((selectedWidget.type === 'select') && !selectedWidget.options.multiple)"
|
||||
v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
|
||||
<draggable tag="ul" :list="optionModel.optionItems"
|
||||
v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
|
||||
<template #item="{ element: option, index: idx }">
|
||||
<li>
|
||||
<el-radio :label="option.value">
|
||||
<el-input v-model="option.value" size="mini" style="width: 100px"></el-input>
|
||||
<el-input v-model="option.label" size="mini" style="width: 100px"></el-input>
|
||||
<i class="iconfont icon-drag drag-option"></i>
|
||||
<el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)"
|
||||
icon="el-icon-minus" class="col-delete-button"></el-button>
|
||||
</el-radio>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group v-else-if="(selectedWidget.type === 'checkbox') || ((selectedWidget.type === 'select') && selectedWidget.options.multiple)"
|
||||
v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
|
||||
<draggable tag="ul" :list="optionModel.optionItems"
|
||||
v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
|
||||
<template #item="{ element: option, index: idx }">
|
||||
<li>
|
||||
<el-checkbox :label="option.value">
|
||||
<el-input v-model="option.value" size="mini" style="width: 100px"></el-input>
|
||||
<el-input v-model="option.label" size="mini" style="width: 100px"></el-input>
|
||||
<i class="iconfont icon-drag drag-option"></i>
|
||||
<el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)"
|
||||
icon="el-icon-minus" class="col-delete-button"></el-button>
|
||||
</el-checkbox>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-checkbox-group>
|
||||
<el-cascader v-else-if="(selectedWidget.type === 'cascader')"
|
||||
v-model="optionModel.defaultValue" :options="optionModel.optionItems"
|
||||
@change="emitDefaultValueChange"
|
||||
:placeholder="i18nt('render.hint.selectPlaceholder')" style="width: 100%">
|
||||
</el-cascader>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag"
|
||||
v-if="showImportDialogFlag" :show-close="true" custom-class="small-padding-dialog"
|
||||
: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>
|
||||
</el-form-item>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button>
|
||||
<el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportCascaderDialogFlag"
|
||||
v-if="showImportCascaderDialogFlag" :show-close="true" custom-class="small-padding-dialog"
|
||||
: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>
|
||||
<div class="dialog-footer">
|
||||
<el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
|
||||
<el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Draggable from 'vuedraggable'
|
||||
import CodeEditor from '@/components/code-editor/index'
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "OptionItemsSetting",
|
||||
mixins: [i18n],
|
||||
components: {
|
||||
Draggable,
|
||||
//CodeEditor: () => import('@/components/code-editor/index'),
|
||||
CodeEditor,
|
||||
},
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showImportDialogFlag: false,
|
||||
optionLines: '',
|
||||
|
||||
cascaderOptions: '',
|
||||
showImportCascaderDialogFlag: false,
|
||||
|
||||
//separator: '||',
|
||||
separator: ',',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
optionModel() {
|
||||
return this.selectedWidget.options
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
'selectedWidget.options': {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
//console.log('888888', 'Options change!')
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
emitDefaultValueChange() {
|
||||
if (!!this.designer && !!this.designer.formWidget) {
|
||||
let fieldWidget = this.designer.formWidget.getWidgetRef(this.selectedWidget.options.name)
|
||||
if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
|
||||
fieldWidget.refreshDefaultValue()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
deleteOption(option, index) {
|
||||
this.optionModel.optionItems.splice(index, 1)
|
||||
},
|
||||
|
||||
addOption() {
|
||||
let newValue = this.optionModel.optionItems.length + 1
|
||||
this.optionModel.optionItems.push({
|
||||
value: newValue,
|
||||
label: 'new option'
|
||||
})
|
||||
},
|
||||
|
||||
importOptions() {
|
||||
this.optionLines = ''
|
||||
if (this.optionModel.optionItems.length > 0) {
|
||||
this.optionModel.optionItems.forEach((opt) => {
|
||||
if (opt.value === opt.label) {
|
||||
this.optionLines += opt.value + '\n'
|
||||
} else {
|
||||
this.optionLines += opt.value + this.separator + opt.label + '\n'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.showImportDialogFlag = true
|
||||
},
|
||||
|
||||
saveOptions() {
|
||||
let lineArray = this.optionLines.split('\n')
|
||||
//console.log('test', lineArray)
|
||||
if (lineArray.length > 0) {
|
||||
this.optionModel.optionItems = []
|
||||
lineArray.forEach((optLine) => {
|
||||
if (!!optLine && !!optLine.trim()) {
|
||||
if (optLine.indexOf(this.separator) !== -1) {
|
||||
this.optionModel.optionItems.push({
|
||||
value: optLine.split(this.separator)[0],
|
||||
label: optLine.split(this.separator)[1]
|
||||
})
|
||||
} else {
|
||||
this.optionModel.optionItems.push({
|
||||
value: optLine,
|
||||
label: optLine
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.optionModel.optionItems = []
|
||||
}
|
||||
|
||||
this.showImportDialogFlag = false
|
||||
},
|
||||
|
||||
resetDefault() {
|
||||
if ((this.selectedWidget.type === 'checkbox') ||
|
||||
((this.selectedWidget.type === 'select') && this.selectedWidget.options.multiple)) {
|
||||
this.optionModel.defaultValue = []
|
||||
} else {
|
||||
this.optionModel.defaultValue = ''
|
||||
}
|
||||
|
||||
this.emitDefaultValueChange()
|
||||
},
|
||||
|
||||
importCascaderOptions() {
|
||||
this.cascaderOptions = JSON.stringify(this.optionModel.optionItems, null, ' ')
|
||||
this.showImportCascaderDialogFlag = true
|
||||
},
|
||||
|
||||
saveCascaderOptions() {
|
||||
try {
|
||||
let newOptions = JSON.parse(this.cascaderOptions)
|
||||
this.optionModel.optionItems = newOptions
|
||||
//TODO: 是否需要重置选项默认值？？
|
||||
|
||||
this.showImportCascaderDialogFlag = false
|
||||
} catch (ex) {
|
||||
this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + ex.message)
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option-items-pane ul {
|
||||
padding-inline-start: 6px;
|
||||
padding-left: 6px; /* 重置IE11默认样式 */
|
||||
}
|
||||
|
||||
li.ghost{
|
||||
background: #fff;
|
||||
border: 2px dotted $--color-primary;
|
||||
}
|
||||
|
||||
.drag-option {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.small-padding-dialog :deep(.el-dialog__body) {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.dialog-footer .el-button {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,173 @@
|
||||
import {translate} from "@/utils/i18n"
|
||||
import emitter from '@/utils/emitter'
|
||||
|
||||
export const createInputTextEditor = function (propName, propLabelKey) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-input type="text" v-model={this.optionModel[propName]} />
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createInputNumberEditor = function (propName, propLabelKey) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
methods: {
|
||||
updateValue(newValue) {
|
||||
if ((newValue === undefined) || (newValue === null) || isNaN(newValue)) {
|
||||
this.optionModel[propName] = null
|
||||
} else {
|
||||
this.optionModel[propName] = Number(newValue)
|
||||
}
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-input-number type="text" v-model={this.optionModel[propName]}
|
||||
onChange={this.updateValue} style="width: 100%" />
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createBooleanEditor = function (propName, propLabelKey) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-checkbox v-model={this.optionModel[propName]} />
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createCheckboxGroupEditor = function (propName, propLabelKey, configs) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-checkbox-group v-model={this.optionModel[propName]}>
|
||||
{
|
||||
configs.optionItems.map(item => {
|
||||
return <el-checkbox label={item.value}>{item.label}</el-checkbox>
|
||||
})
|
||||
}
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const createRadioGroupEditor = function (propName, propLabelKey, configs) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-radio-group v-model={this.optionModel[propName]}>
|
||||
{
|
||||
configs.optionItems.map(item => {
|
||||
return <el-radio label={item.value}>{item.label}</el-radio>
|
||||
})
|
||||
}
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createRadioButtonGroupEditor = function (propName, propLabelKey, configs) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-radio-group v-model={this.optionModel[propName]}>
|
||||
{
|
||||
configs.optionItems.map(item => {
|
||||
return <el-radio-button label={item.value}>{item.label}</el-radio-button>
|
||||
})
|
||||
}
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createSelectEditor = function (propName, propLabelKey, configs) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={translate(propLabelKey)}>
|
||||
<el-select v-model={this.optionModel[propName]}>
|
||||
{
|
||||
configs.optionItems.map(item => {
|
||||
return <el-option label={item.label} value={item.value} />
|
||||
})
|
||||
}
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createEventHandlerEditor = function (eventPropName, eventParams) {
|
||||
return {
|
||||
props: {
|
||||
optionModel: Object,
|
||||
},
|
||||
mixins: [emitter],
|
||||
methods: {
|
||||
editEventHandler() {
|
||||
this.dispatch('SettingPanel', 'editEventHandler', [eventPropName, [...eventParams]])
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<el-form-item label={eventPropName} label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round onClick={this.editEventHandler}>
|
||||
{translate('designer.setting.addEventHandler')}</el-button>
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createEmptyEditor = function () {
|
||||
return {
|
||||
render() {
|
||||
return <div style="display: none" />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.allowCreate')">
|
||||
<el-checkbox v-model="optionModel.allowCreate"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "allowCreate-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item label-width="0">
|
||||
<el-divider class="custom-divider">{{i18nt('designer.setting.inputButton')}}</el-divider>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.appendButton')">
|
||||
<el-checkbox v-model="optionModel.appendButton"></el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "appendButton-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.appendButtonDisabled')">
|
||||
<el-checkbox v-model="optionModel.appendButtonDisabled"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "appendButtonDisabled-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.automaticDropdown')">
|
||||
<el-checkbox v-model="optionModel.automaticDropdown"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "automaticDropdown-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.border')">
|
||||
<el-checkbox v-model="optionModel.border"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "border-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.appendButtonIcon')">
|
||||
<el-input type="text" v-model="optionModel.buttonIcon"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "buttonIcon-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.buttonStyle')">
|
||||
<el-checkbox v-model="optionModel.buttonStyle"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "buttonStyle-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.clearable')">
|
||||
<el-checkbox v-model="optionModel.clearable"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "clearable-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-show="!!subFormChildWidgetFlag">
|
||||
<el-input type="text" v-model="optionModel.columnWidth"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "columnWidth-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//subFormChildWidgetFlag: false,
|
||||
subFormChildWidgetFlag: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.designer.handleEvent('field-selected', (parentWidget) => {
|
||||
this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
|
||||
//console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.colOffsetTitle')">
|
||||
<el-input-number v-model.number="optionModel.offset" :min="0" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "grid-col-offset-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.colPullTitle')">
|
||||
<el-input-number v-model.number="optionModel.pull" :min="0" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "grid-col-pull-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.colPushTitle')">
|
||||
<el-input-number v-model.number="optionModel.push" :min="0" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "grid-col-push-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.responsive')">
|
||||
<el-checkbox v-model="optionModel.responsive"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "grid-col-responsive-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item :label="i18nt('designer.setting.colSpanTitle')" v-if="!optionModel.responsive">
|
||||
<el-input-number v-model.number="optionModel.span" :min="1" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(PC)'"
|
||||
v-if="!!optionModel.responsive && (formConfig.layoutType === 'PC')">
|
||||
<el-input-number v-model.number="optionModel.md" :min="1" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(Pad)'"
|
||||
v-if="!!optionModel.responsive && (formConfig.layoutType === 'Pad')">
|
||||
<el-input-number v-model.number="optionModel.sm" :min="1" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(H5)'"
|
||||
v-if="!!optionModel.responsive && (formConfig.layoutType === 'H5')">
|
||||
<el-input-number v-model.number="optionModel.xs" :min="1" :max="24"
|
||||
style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "grid-col-span-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return this.designer.formConfig
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item :label="i18nt('designer.setting.gridColHeight')">
|
||||
<el-input type="number" v-model="optionModel.colHeight" @input="inputNumberHandler"
|
||||
min="0" class="hide-spin-button"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "colHeight-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item label-width="0">
|
||||
<el-divider class="custom-divider">{{i18nt('designer.setting.columnSetting')}}</el-divider>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.gutter')">
|
||||
<el-input-number v-model="optionModel.gutter" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
|
||||
<span class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
|
||||
<el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
|
||||
@change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
|
||||
class="cell-span-input"></el-input-number>
|
||||
<el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
|
||||
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>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "gutter-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
methods: {
|
||||
spanChanged(curGrid) {
|
||||
let spanSum = 0
|
||||
curGrid.cols.forEach((colItem) => {
|
||||
spanSum += colItem.options.span
|
||||
})
|
||||
if (spanSum > 24) {
|
||||
//this.$message.info('列栅格之和超出24')
|
||||
console.log('列栅格之和超出24')
|
||||
//TODO: 语言字符串资源化
|
||||
}
|
||||
|
||||
this.designer.saveCurrentHistoryStep()
|
||||
},
|
||||
|
||||
deleteCol(curGrid, colIdx) {
|
||||
this.designer.deleteColOfGrid(curGrid, colIdx)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
addNewCol(curGrid) {
|
||||
this.designer.addNewColOfGrid(curGrid)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
li.col-item {
|
||||
list-style: none;
|
||||
|
||||
span.col-span-title {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.col-delete-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.showBlankRow')">
|
||||
<el-checkbox v-model="optionModel.showBlankRow"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "showBlankRow-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.showRowNumber')">
|
||||
<el-checkbox v-model="optionModel.showRowNumber"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "showRowNumber-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.labelAlign')">
|
||||
<el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
|
||||
<el-radio-button label="label-left-align">
|
||||
{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
|
||||
<el-radio-button label="label-center-align">
|
||||
{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
|
||||
<el-radio-button label="label-right-align">
|
||||
{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "sub-form-labelAlign-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.radio-group-custom {
|
||||
:deep(.el-radio-button__inner) {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<!--
|
||||
因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item :label="i18nt('designer.setting.customClass')">
|
||||
<el-select v-model="optionModel.customClass" multiple filterable allow-create
|
||||
default-first-option>
|
||||
<el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
|
||||
<el-form-item label-width="0" class="panes-setting">
|
||||
<draggable tag="ul" :list="selectedWidget.tabs" item-key="id"
|
||||
v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}">
|
||||
<template #item="{ element: tpItem, index: tpIdx }">
|
||||
<li class="col-item">
|
||||
<!-- 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>
|
||||
<i class="iconfont icon-drag drag-option"></i>
|
||||
<el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
|
||||
icon="el-icon-minus" class="col-delete-button"></el-button>
|
||||
</li>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
|
||||
</div>
|
||||
</draggable>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import Draggable from 'vuedraggable'
|
||||
import {deepClone} from "@/utils/util";
|
||||
|
||||
export default {
|
||||
name: "tab-customClass-editor",
|
||||
componentName: 'PropertyEditor',
|
||||
mixins: [i18n],
|
||||
components: {
|
||||
Draggable,
|
||||
},
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cssClassList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.cssClassList = deepClone(this.designer.getCssClassList())
|
||||
//监听表单css代码改动事件并重新加载！
|
||||
this.designer.handleEvent('form-css-updated', (cssClassList) => {
|
||||
this.cssClassList = cssClassList
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onTabPaneActiveChange(evt, tpItem) {
|
||||
//TODO: !!!
|
||||
},
|
||||
|
||||
addTabPane(curTabs) {
|
||||
this.designer.addTabPaneOfTabs(curTabs)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
deleteTabPane(curTabs, tpIdx) {
|
||||
if (curTabs.tabs.length === 1) {
|
||||
this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
|
||||
return
|
||||
}
|
||||
|
||||
this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
|
||||
this.designer.emitHistoryChange()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
li.col-item {
|
||||
list-style: none;
|
||||
|
||||
span.col-span-title {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.col-delete-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.panes-setting {
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
padding-left: 0; /* 重置IE11默认样式 */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drag-option {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
li.ghost {
|
||||
background: #fff;
|
||||
border: 2px dotted $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.cellHeight')">
|
||||
<el-input type="text" v-model="optionModel.cellHeight"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "cellHeight-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.cellWidth')">
|
||||
<el-input type="text" v-model="optionModel.cellWidth"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "cellWidth-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.customClass')">
|
||||
<el-select v-model="optionModel.customClass" multiple filterable allow-create
|
||||
default-first-option>
|
||||
<el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
import {deepClone} from "@/utils/util";
|
||||
|
||||
export default {
|
||||
name: "customClass-editor",
|
||||
componentName: 'PropertyEditor',
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cssClassList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.cssClassList = deepClone(this.designer.getCssClassList())
|
||||
//监听表单css代码改动事件并重新加载！
|
||||
this.designer.handleEvent('form-css-updated', (cssClassList) => {
|
||||
this.cssClassList = cssClassList
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.defaultValue')">
|
||||
<el-input v-if="!hasConfig('optionItems')" type="text" v-model="optionModel.defaultValue"
|
||||
@change="emitDefaultValueChange"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "defaultValue-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.disabled')">
|
||||
<el-checkbox v-model="optionModel.disabled"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "disabled-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.displayStyle')">
|
||||
<el-radio-group v-model="optionModel.displayStyle">
|
||||
<el-radio label="inline">{{i18nt('designer.setting.inlineLayout')}}</el-radio>
|
||||
<el-radio label="block">{{i18nt('designer.setting.blockLayout')}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "displayStyle-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.editable')">
|
||||
<el-checkbox v-model="optionModel.editable"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "editable-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.endPlaceholder')">
|
||||
<el-input type="text" v-model="optionModel.endPlaceholder"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "endPlaceholder-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,12 @@
|
||||
import emitter from '@/utils/emitter'
|
||||
|
||||
export default {
|
||||
mixins: [emitter],
|
||||
created() {},
|
||||
methods: {
|
||||
editEventHandler(eventName, eventParams) {
|
||||
this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onBeforeUpload" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBeforeUpload', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onBeforeUpload-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['file'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onBlur" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBlur', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onBlur-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['event'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onChange" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onChange', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onChange-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['value', 'oldValue', 'subFormData', 'rowId'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onClick" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onClick', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onClick-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: [],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<el-form-item label="onCreated" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onCreated', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onCreated-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: [],
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onFocus" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFocus', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onFocus-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['event'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onInput" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onInput', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onInput-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['value'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onMounted" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onMounted', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onMounted-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: [],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onRemoteQuery" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onRemoteQuery', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onRemoteQuery-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['keyword'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onSubFormRowAdd" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowAdd', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onSubFormRowAdd-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['subFormData', 'newRowId'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onSubFormRowChange" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowChange', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onSubFormRowChange-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['subFormData'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onSubFormRowDelete" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowDelete', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onSubFormRowDelete-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['subFormData', 'deletedDataRow'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onSubFormRowInsert" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowInsert', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onSubFormRowInsert-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['subFormData', 'newRowId'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onUploadError" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadError', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onUploadError-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['error', 'file', 'fileList'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onUploadSuccess" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadSuccess', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onUploadSuccess-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['result', 'file', 'fileList'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item label="onValidate" label-width="150px">
|
||||
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onValidate', eventParams)">
|
||||
{{i18nt('designer.setting.addEventHandler')}}</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
|
||||
|
||||
export default {
|
||||
name: "onValidate-editor",
|
||||
mixins: [i18n, eventMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventParams: ['rule', 'value', 'callback'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.displayType')">
|
||||
<el-select v-model="optionModel.type">
|
||||
<el-option label="default" value=""></el-option>
|
||||
<el-option label="primary" value="primary"></el-option>
|
||||
<el-option label="success" value="success"></el-option>
|
||||
<el-option label="warning" value="warning"></el-option>
|
||||
<el-option label="danger" value="danger"></el-option>
|
||||
<el-option label="info" value="info"></el-option>
|
||||
<el-option label="text" value="text"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "button-type-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.circle')">
|
||||
<el-checkbox v-model="optionModel.circle"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "circle-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.buttonIcon')">
|
||||
<el-input type="text" v-model="optionModel.icon"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "icon-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.plain')">
|
||||
<el-checkbox v-model="optionModel.plain"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "plain-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.round')">
|
||||
<el-checkbox v-model="optionModel.round"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "round-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-color-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
|
||||
</el-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "color-defaultValue-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
|
||||
:format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "date-range-defaultValue-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.format')">
|
||||
<el-select v-model="optionModel.format" filterable allow-create>
|
||||
<el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
|
||||
<el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
|
||||
<el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
|
||||
<el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
|
||||
<el-option label="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm:ss"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "date-range-format-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.displayType')">
|
||||
<el-select v-model="optionModel.type">
|
||||
<el-option label="daterange" value="daterange"></el-option>
|
||||
<el-option label="datetimerange" value="datetimerange"></el-option>
|
||||
<el-option label="monthrange" value="monthrange"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "date-range-type-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.valueFormat')">
|
||||
<el-select v-model="optionModel.valueFormat" filterable allow-create>
|
||||
<el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
|
||||
<el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "date-range-valueFormat-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
|
||||
:format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "date-defaultValue-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.format')">
|
||||
<el-select v-model="optionModel.format" filterable allow-create>
|
||||
<el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
|
||||
<el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
|
||||
<el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
|
||||
<el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
|
||||
<el-option label="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm:ss"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "date-format-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.displayType')">
|
||||
<el-select v-model="optionModel.type">
|
||||
<el-option label="datetime" value="datetime"></el-option>
|
||||
<el-option label="date" value="date"></el-option>
|
||||
<el-option label="dates" value="dates"></el-option>
|
||||
<el-option label="year" value="year"></el-option>
|
||||
<el-option label="month" value="month"></el-option>
|
||||
<el-option label="week" value="week"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "date-type-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.valueFormat')">
|
||||
<el-select v-model="optionModel.valueFormat" filterable allow-create>
|
||||
<el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
|
||||
<el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "date-valueFormat-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.contentPosition')">
|
||||
<el-select v-model="optionModel.contentPosition">
|
||||
<el-option label="center" value="center"></el-option>
|
||||
<el-option label="left" value="left"></el-option>
|
||||
<el-option label="right" value="right"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "contentPosition-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>{{i18nt('designer.setting.fileTypes')}}
|
||||
<el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
|
||||
<i class="el-icon-info"></i></el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<el-select multiple allow-create filterable default-first-option
|
||||
v-model="optionModel.fileTypes" style="width: 100%">
|
||||
<el-option v-for="(ft, ftIdx) in uploadFileTypes"
|
||||
:key="ftIdx"
|
||||
:label="ft.label"
|
||||
:value="ft.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "fileTypes-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadFileTypes: [
|
||||
{value: 'doc', label: 'doc'},
|
||||
{value: 'xls', label: 'xls'},
|
||||
{value: 'docx', label: 'docx'},
|
||||
{value: 'xlsx', label: 'xlsx'},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.htmlContent')">
|
||||
<el-input v-model="optionModel.htmlContent"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "htmlContent-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.controlsPosition')">
|
||||
<el-select v-model="optionModel.controlsPosition">
|
||||
<el-option label="default" value=""></el-option>
|
||||
<el-option label="right" value="right"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "controlsPosition-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>{{i18nt('designer.setting.fileTypes')}}
|
||||
<el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
|
||||
<i class="el-icon-info"></i></el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<el-select multiple allow-create filterable default-first-option
|
||||
v-model="optionModel.fileTypes" style="width: 100%">
|
||||
<el-option v-for="(ft, ftIdx) in uploadPictureTypes"
|
||||
:key="ftIdx"
|
||||
:label="ft.label"
|
||||
:value="ft.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "fileTypes-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadPictureTypes: [
|
||||
{value: 'jpeg', label: 'JPG'},
|
||||
{value: 'png', label: 'PNG'},
|
||||
{value: 'gif', label: 'GIF'},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.allowHalf')">
|
||||
<el-checkbox v-model="optionModel.allowHalf"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "allowHalf-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.highThreshold')">
|
||||
<el-input-number v-model="optionModel.highThreshold" :min="optionModel.lowThreshold" :max="optionModel.max"
|
||||
class="hide-spin-button" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "highThreshold-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.lowThreshold')">
|
||||
<el-input-number v-model="optionModel.lowThreshold" :min="1" :max="optionModel.highThreshold"
|
||||
class="hide-spin-button" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "lowThreshold-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.defaultValue')">
|
||||
<el-input-number v-model="optionModel.defaultValue" :min="0" :max="optionModel.max" style="width: 100%"
|
||||
@change="emitDefaultValueChange">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "rate-defaultValue-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.maxStars')">
|
||||
<el-input-number v-model="optionModel.max" :min="1" :max="10"
|
||||
class="hide-spin-button" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "rate-max-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.showScore')">
|
||||
<el-checkbox v-model="optionModel.showScore"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "showScore-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.showText')">
|
||||
<el-checkbox v-model="optionModel.showText"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "showText-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.range')">
|
||||
<el-checkbox v-model="optionModel.range"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n";
|
||||
|
||||
export default {
|
||||
name: "range-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.showStops')">
|
||||
<el-checkbox v-model="optionModel.showStops"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "showStops-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.vertical')">
|
||||
<el-checkbox v-model="optionModel.vertical"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "vertical-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.textContent')">
|
||||
<el-input v-model="optionModel.textContent"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "textContent-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.activeColor')">
|
||||
<el-color-picker v-model="optionModel.activeColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "activeColor-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.activeText')">
|
||||
<el-input v-model="optionModel.activeText"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "activeText-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.inactiveColor')">
|
||||
<el-color-picker v-model="optionModel.inactiveColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "inactiveColor-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.inactiveText')">
|
||||
<el-input v-model="optionModel.inactiveText"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "inactiveText-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.defaultValue')">
|
||||
<el-switch v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
|
||||
active-text="true" inactive-text="false"></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: "switch-defaultValue-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.switchWidth')">
|
||||
<el-input-number v-model="optionModel.switchWidth" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "switchWidth-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-time-picker v-model="optionModel.defaultValue" is-range @change="emitDefaultValueChange"
|
||||
:format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "time-range-defaultValue-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.format')">
|
||||
<el-select v-model="optionModel.format" filterable allow-create>
|
||||
<el-option label="HH:mm:ss" value="HH:mm:ss"></el-option>
|
||||
<el-option label="HH时mm分ss秒" value="HH时mm分ss秒"></el-option>
|
||||
<el-option label="hh:mm:ss" value="hh:mm:ss"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "time-range-format-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-time-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
|
||||
:format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "time-defaultValue-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.format')">
|
||||
<el-select v-model="optionModel.format" filterable allow-create>
|
||||
<el-option label="HH:mm:ss" value="HH:mm:ss"></el-option>
|
||||
<el-option label="HH时mm分ss秒" value="HH时mm分ss秒"></el-option>
|
||||
<el-option label="hh:mm:ss" value="hh:mm:ss"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "time-format-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.fileMaxSize')">
|
||||
<el-input-number v-model="optionModel.fileMaxSize" :min="1" class="hide-spin-button" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "fileMaxSize-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.filterable')">
|
||||
<el-checkbox v-model="optionModel.filterable"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "filterable-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.hidden')">
|
||||
<el-checkbox v-model="optionModel.hidden"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "hidden-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
let comps = {}
|
||||
|
||||
const modules = import.meta.globEager('./**/*.vue')
|
||||
for (const path in modules) {
|
||||
let cname = modules[path].default.name
|
||||
comps[cname] = modules[path].default
|
||||
}
|
||||
|
||||
export default comps
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.label')" v-if="!noLabelSetting">
|
||||
<el-input type="text" v-model="optionModel.label"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "label-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
computed: {
|
||||
noLabelSetting() {
|
||||
return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
|
||||
//|| (this.selectedWidget.type === 'divider')
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.labelAlign')" v-if="!noLabelSetting && (selectedWidget.type !== 'button')">
|
||||
<el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
|
||||
<el-radio-button label="label-left-align">
|
||||
{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
|
||||
<el-radio-button label="label-center-align">
|
||||
{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
|
||||
<el-radio-button label="label-right-align">
|
||||
{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "labelAlign-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
computed: {
|
||||
noLabelSetting() {
|
||||
return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
|
||||
//|| (this.selectedWidget.type === 'divider')
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.radio-group-custom {
|
||||
:deep(.el-radio-button__inner) {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.labelHidden')">
|
||||
<el-checkbox v-model="optionModel.labelHidden"></el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "labelHidden-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item label-width="0">
|
||||
<el-divider class="custom-divider">{{i18nt('designer.setting.customLabelIcon')}}</el-divider>
|
||||
</el-form-item>
|
||||
<el-form-item :label="i18nt('designer.setting.labelIconClass')">
|
||||
<el-input type="text" v-model="optionModel.labelIconClass"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "labelIconClass-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.labelIconPosition')">
|
||||
<el-select v-model="optionModel.labelIconPosition">
|
||||
<el-option v-for="item in labelIconPosition" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "labelIconPosition-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelIconPosition: [
|
||||
{label: 'front', value: 'front'},
|
||||
{label: 'rear', value: 'rear'},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.labelTooltip')">
|
||||
<el-input type="text" v-model="optionModel.labelTooltip"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
|
||||
export default {
|
||||
name: "labelTooltip-editor",
|
||||
mixins: [i18n],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-form-item :label="i18nt('designer.setting.labelWidth')">
|
||||
<el-input type="number" v-model="optionModel.labelWidth" @input="inputNumberHandler"
|
||||
min="0" class="hide-spin-button"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/utils/i18n"
|
||||
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
|
||||
|
||||
export default {
|
||||
name: "labelWidth-editor",
|
||||
mixins: [i18n, propertyMixin],
|
||||
props: {
|
||||
designer: Object,
|
||||
selectedWidget: Object,
|
||||
optionModel: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user