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

package/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-format-editor.vue

@@ -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>

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

@@ -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>

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

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.filterable')">
+    <el-switch v-model="optionModel.filterable"></el-switch>
+  </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>

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

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.hidden')">
+    <el-switch v-model="optionModel.hidden"></el-switch>
+  </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>

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

@@ -0,0 +1,10 @@
+const requireComponent = require.context('./', true, /\w+\.vue$/)  //遍历当前目录和子目录
+
+let comps = {}
+
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  comps[comp.name] = comp
+})
+
+export default comps;

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

@@ -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>

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

@@ -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 {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelHidden')">
+    <el-switch v-model="optionModel.labelHidden"></el-switch>
+  </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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -0,0 +1,25 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelWidth')">
+    <el-input type="number" v-model="optionModel.labelWidth" @input.native="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>

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

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.limit')">
+    <el-input-number v-model="optionModel.limit" :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: "limit-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.maxValue')">
+    <el-input-number v-model="maxValue" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "max-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      maxValue: {
+        get() {
+          return this.optionModel['max']
+        },
+
+        set(newValue) {
+          if (!newValue || isNaN(newValue)) {
+            this.optionModel.max = null
+          } else {
+            this.optionModel.max = Number(newValue)
+          }
+        }
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.maxLength')">
+    <el-input type="number" @input.native="inputNumberHandler" class="hide-spin-button"
+              min="1" v-model="maxLength" style="width: 100%"></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: "maxLength-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      maxLength: {
+        get() {
+          return this.optionModel['maxLength']
+        },
+
+        set(newValue) {
+          if (!newValue || isNaN(newValue)) {
+            this.optionModel.maxLength = null
+          } else {
+            this.optionModel.maxLength = Number(newValue)
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.minValue')">
+    <el-input-number v-model="minValue" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "min-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      minValue: {
+        get() {
+          return this.optionModel['min']
+        },
+
+        set(newValue) {
+          //if ((!newValue && (newValue !== 0)) || isNaN(newValue)) {
+          if ((newValue === undefined) || (newValue === null) || isNaN(newValue)) {
+            this.optionModel.min = null
+          } else {
+            this.optionModel.min = Number(newValue)
+          }
+        }
+      },
+
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.minLength')">
+    <el-input type="number" @input.native="inputNumberHandler" class="hide-spin-button"
+              min="0" v-model="minLength" style="width: 100%"></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: "minLength-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      minLength: {
+        get() {
+          return this.optionModel['minLength']
+        },
+
+        set(newValue) {
+          if (!newValue || isNaN(newValue)) {
+            this.optionModel.minLength = null
+          } else {
+            this.optionModel.minLength = Number(newValue)
+          }
+        }
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.multiple')">
+    <el-switch v-model="optionModel.multiple" @change="onMultipleSelected"></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: "multiple-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.multipleLimit')">
+    <el-input-number v-model="optionModel.multipleLimit" :min="0"
+                     class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "multipleLimit-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

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

@@ -0,0 +1,89 @@
+<template>
+  <el-form-item prop="name" :rules="nameRequiredRule">
+    <span slot="label">{{i18nt('designer.setting.uniqueName')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </span>
+    <template v-if="(!!selectedWidget.category && (selectedWidget.type !== 'sub-form')) || noFieldList">
+      <el-input type="text" v-model="optionModel.name" :readonly="widgetNameReadonly" @change="updateWidgetNameAndRef"></el-input>
+    </template>
+    <template v-else>
+      <el-select v-model="optionModel.name" allow-create filterable :disabled="widgetNameReadonly" @change="updateWidgetNameAndRef"
+                 :title="i18nt('designer.setting.editNameHelp')">
+        <el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"></el-option>
+      </el-select>
+    </template>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import {isEmptyStr} from "@/utils/util"
+
+  export default {
+    name: "name-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    inject: ['serverFieldList', 'getDesignerConfig'],
+    data() {
+      return {
+        nameRequiredRule: [{required: true, message: 'name required'}],
+      }
+    },
+    computed: {
+      noFieldList() {
+        return !this.serverFieldList || (this.serverFieldList.length <= 0)
+      },
+
+      widgetNameReadonly() {
+        return !!this.getDesignerConfig().widgetNameReadonly
+      },
+
+    },
+    methods: {
+      updateWidgetNameAndRef(newName) {
+        let oldName = this.designer.selectedWidgetName
+        if (isEmptyStr(newName)) {
+          this.selectedWidget.options.name = oldName
+          this.$message.info(this.i18nt('designer.hint.nameRequired'))
+          return
+        }
+
+        if (!!this.designer.formWidget) {
+          let foundRef = this.designer.formWidget.getWidgetRef(newName) // 检查newName是否已存在！！
+          if (!!foundRef) {
+            this.selectedWidget.options.name = oldName
+            this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
+            return
+          }
+
+          let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName)
+          if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
+            widgetInDesign.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
+            let newLabel = this.getLabelByFieldName(newName)
+            this.designer.updateSelectedWidgetNameAndLabel(this.selectedWidget, newName, newLabel)
+          }
+        }
+      },
+
+      getLabelByFieldName(fieldName) {
+        for (let i = 0; i < this.serverFieldList.length; i++) {
+          if (this.serverFieldList[i].name === fieldName) {
+            return this.serverFieldList[i].label
+          }
+        }
+
+        return null
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>