@lambo-design/variant-form 2.2.9-beta.0

package/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.withCredentials')">
+    <el-switch v-model="optionModel.withCredentials"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "withCredentials-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor-factory.js

@@ -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-switch 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" />
+    }
+  }
+}
+

package/src/components/form-designer/setting-panel/propertyRegister.js

@@ -0,0 +1,215 @@
+import Vue from 'vue'
+
+/**
+ * 格式说明：属性名称==对应属性编辑器的组件名称
+ */
+const COMMON_PROPERTIES = {
+  //字段
+  'name'              :            'name-editor',
+  'label'             :            'label-editor',
+  'labelAlign'        :            'labelAlign-editor',
+  'type'              :            'type-editor',
+  'defaultValue'      :            'defaultValue-editor',
+  'placeholder'       :            'placeholder-editor',
+  'startPlaceholder'  :            'startPlaceholder-editor',
+  'endPlaceholder'    :            'endPlaceholder-editor',
+  'columnWidth'       :            'columnWidth-editor',
+  'size'              :            'size-editor',
+  'showStops'         :            'showStops-editor',
+  'displayStyle'      :            'displayStyle-editor',
+  'buttonStyle'       :            'buttonStyle-editor',
+  'border'            :            'border-editor',
+  'labelWidth'        :            'labelWidth-editor',
+  'labelHidden'       :            'labelHidden-editor',
+  'rows'              :            'rows-editor',
+  'required'          :            'required-editor',
+  'requiredHint'      :            'requiredHint-editor',
+  'validation'        :            'validation-editor',
+  'validationHint'    :            'validationHint-editor',
+  'readonly'          :            'readonly-editor',
+  'disabled'          :            'disabled-editor',
+  'hidden'            :            'hidden-editor',
+  'clearable'         :            'clearable-editor',
+  'editable'          :            'editable-editor',
+  'showPassword'      :            'showPassword-editor',
+  'textContent'       :            'textContent-editor',
+  'textAlign'         :            'textAlign-editor',
+  'fontSize'          :            'fontSize-editor',
+  'preWrap'           :            'preWrap-editor',
+  'htmlContent'       :            'htmlContent-editor',
+  'format'            :            'format-editor',
+  'valueFormat'       :            'valueFormat-editor',
+  'filterable'        :            'filterable-editor',
+  'allowCreate'       :            'allowCreate-editor',
+  'remote'            :            'remote-editor',
+  'automaticDropdown' :            'automaticDropdown-editor',
+  'checkStrictly'     :            'checkStrictly-editor',
+  'showAllLevels'     :            'showAllLevels-editor',
+  'multiple'          :            'multiple-editor',
+  'multipleLimit'     :            'multipleLimit-editor',
+  'contentPosition'   :            'contentPosition-editor',
+  'optionItems'       :            'optionItems-editor',
+  'uploadURL'         :            'uploadURL-editor',
+  'uploadTip'         :            'uploadTip-editor',
+  'withCredentials'   :            'withCredentials-editor',
+  'multipleSelect'    :            'multipleSelect-editor',
+  'limit'             :            'limit-editor',
+  'fileMaxSize'       :            'fileMaxSize-editor',
+  'fileTypes'         :            'fileTypes-editor',
+  'customClass'       :            'customClass-editor',
+
+  //容器
+  'showBlankRow'       :            'showBlankRow-editor',
+  'showRowNumber'      :            'showRowNumber-editor',
+  'cellWidth'          :            'cellWidth-editor',
+  'cellHeight'         :            'cellHeight-editor',
+  'colHeight'          :            'colHeight-editor',
+  'wordBreak'          :            'wordBreak-editor',
+  'gutter'             :            'gutter-editor',
+  'responsive'         :            'responsive-editor',
+  'span'               :            'span-editor',
+  'offset'             :            'offset-editor',
+  'push'               :            'push-editor',
+  'pull'               :            'pull-editor',
+
+}
+
+const ADVANCED_PROPERTIES = {
+  'min'               :            'min-editor',
+  'max'               :            'max-editor',
+  'precision'         :            'precision-editor',
+  'step'              :            'step-editor',
+  'controlsPosition'  :            'controlsPosition-editor',
+  'minLength'         :            'minLength-editor',
+  'maxLength'         :            'maxLength-editor',
+  'showWordLimit'     :            'showWordLimit-editor',
+  'prefixIcon'        :            'prefixIcon-editor',
+  'suffixIcon'        :            'suffixIcon-editor',
+  'switchWidth'       :            'switchWidth-editor',
+  'activeText'        :            'activeText-editor',
+  'inactiveText'      :            'inactiveText-editor',
+  'activeColor'       :            'activeColor-editor',
+  'inactiveColor'     :            'inactiveColor-editor',
+  'lowThreshold'      :            'lowThreshold-editor',
+  'highThreshold'     :            'highThreshold-editor',
+  'allowHalf'         :            'allowHalf-editor',
+  'showText'          :            'showText-editor',
+  'showScore'         :            'showScore-editor',
+  'range'             :            'range-editor',
+  'vertical'          :            'vertical-editor',
+  'plain'             :            'plain-editor',
+  'round'             :            'round-editor',
+  'circle'            :            'circle-editor',
+  'icon'              :            'icon-editor',
+  'labelIconClass'    :            'labelIconClass-editor',
+  'labelIconPosition' :            'labelIconPosition-editor',
+  'labelTooltip'      :            'labelTooltip-editor',
+  'appendButton'      :            'appendButton-editor',
+  'appendButtonDisabled':          'appendButtonDisabled-editor',
+  'buttonIcon'        :            'buttonIcon-editor',
+
+}
+
+const EVENT_PROPERTIES = {
+  //字段
+  'onCreated'         :            'onCreated-editor',
+  'onMounted'         :            'onMounted-editor',
+  'onClick'           :            'onClick-editor',
+  'onInput'           :            'onInput-editor',
+  'onChange'          :            'onChange-editor',
+  'onFocus'           :            'onFocus-editor',
+  'onBlur'            :            'onBlur-editor',
+  'onRemoteQuery'     :            'onRemoteQuery-editor',
+  'onBeforeUpload'    :            'onBeforeUpload-editor',
+  'onUploadSuccess'   :            'onUploadSuccess-editor',
+  'onUploadError'     :            'onUploadError-editor',
+  'onFileRemove'      :            'onFileRemove-editor',
+  'onValidate'        :            'onValidate-editor',
+  'onAppendButtonClick':           'onAppendButtonClick-editor',
+
+  //容器
+  'onSubFormRowAdd'   :            'onSubFormRowAdd-editor',
+  'onSubFormRowInsert':            'onSubFormRowInsert-editor',
+  'onSubFormRowDelete':            'onSubFormRowDelete-editor',
+  'onSubFormRowChange':            'onSubFormRowChange-editor',
+
+}
+
+/**
+ * 注册组件常见属性
+ * 如属性编辑器的组件名称propEditorName设置为null，则不显示该属性编辑器！！
+ * @param uniquePropName 属性名称（保证名称唯一，不跟其他组件属性冲突）
+ * @param propEditorName 对应属性编辑器的组件名称
+ */
+export function registerCommonProperty(uniquePropName, propEditorName) {
+  COMMON_PROPERTIES[uniquePropName] = propEditorName
+}
+
+/**
+ * 注册组件高级属性
+ * 如属性编辑器的组件名称propEditorName设置为null，则不显示该属性编辑器！！
+ * @param uniquePropName 属性名称（保证名称唯一，不跟其他组件属性冲突）
+ * @param propEditorName 对应属性编辑器的组件名称
+ */
+export function registerAdvancedProperty(uniquePropName, propEditorName) {
+  ADVANCED_PROPERTIES[uniquePropName] = propEditorName
+}
+
+/**
+ * 注册组件事件属性
+ * 如属性编辑器的组件名称propEditorName设置为null，则不显示该属性编辑器！！
+ * @param uniquePropName 属性名称（保证名称唯一，不跟其他组件属性冲突）
+ * @param propEditorName 对应属性编辑器的组件名称
+ */
+export function registerEventProperty(uniquePropName, propEditorName) {
+  EVENT_PROPERTIES[uniquePropName] = propEditorName
+}
+
+/**
+ * 判断属性是否已注册
+ * @param uniquePropName 属性名称（保证名称唯一，不跟其他组件属性冲突）
+ */
+export function propertyRegistered(uniquePropName) {
+  return !!COMMON_PROPERTIES[uniquePropName] || !!ADVANCED_PROPERTIES[uniquePropName] || !!EVENT_PROPERTIES[uniquePropName]
+}
+
+/**
+ * 注册常见属性对应的属性编辑器
+ * @param uniquePropName
+ * @param propEditorName
+ * @param editorComponent
+ */
+export function registerCPEditor(uniquePropName, propEditorName, editorComponent) {
+  Vue.component(propEditorName, editorComponent)
+  registerCommonProperty(uniquePropName, propEditorName)
+}
+
+/**
+ * 注册高级属性对应的属性编辑器
+ * @param uniquePropName
+ * @param propEditorName
+ * @param editorComponent
+ */
+export function registerAPEditor(uniquePropName, propEditorName, editorComponent) {
+  Vue.component(propEditorName, editorComponent)
+  registerAdvancedProperty(uniquePropName, propEditorName)
+}
+
+/**
+ * 注册事件属性对应的属性编辑器
+ * @param uniquePropName
+ * @param propEditorName
+ * @param editorComponent
+ */
+export function registerEPEditor(uniquePropName, propEditorName, editorComponent) {
+  Vue.component(propEditorName, editorComponent)
+  registerEventProperty(uniquePropName, propEditorName)
+}
+
+export default {
+  COMMON_PROPERTIES,
+  ADVANCED_PROPERTIES,
+  EVENT_PROPERTIES
+}
+
+