skhj-variant 2.1.12

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

@@ -0,0 +1,80 @@
+<template>
+  <el-form-item :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">
+      <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
+    </template>
+    <template v-else>
+      <el-select v-model="optionModel.name" allow-create filterable @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'],
+    data() {
+      return {
+        nameRequiredRule: [{required: true, message: 'name required'}],
+      }
+    },
+    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) {
+          //检查newName是否已存在！！
+          let foundRef = this.designer.formWidget.getWidgetRef(newName)
+          if (!!foundRef) {
+            this.selectedWidget.options.name = oldName
+            this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
+            return
+          }
+
+          let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
+          if (!!fieldWidget && !!fieldWidget.registerToRefList) {
+            fieldWidget.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
+            let newLabel = this.getLabelByFieldName(newName)
+            this.designer.updateSelectedWidgetNameAndRef(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>

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

@@ -0,0 +1,28 @@
+<template>
+  <el-form-item label-width="0">
+    <el-divider class="custom-divider-margin-top">{{i18nt('designer.setting.optionsSetting')}}</el-divider>
+    <option-items-setting :designer="designer" :selected-widget="selectedWidget"></option-items-setting>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import OptionItemsSetting from "@/components/form-designer/setting-panel/option-items-setting"
+
+  export default {
+    name: "optionItems-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    components: {
+      OptionItemsSetting,
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+export default {
+  methods: {
+    hasConfig(configName) {
+      if (!this.designer || !this.designer.selectedWidget) {
+        return false
+      }
+
+      return this.designer.hasConfig(this.selectedWidget, configName)
+    },
+
+    emitDefaultValueChange() {
+      if (!!this.designer) {
+        if (!!this.designer.formWidget) {
+          let fieldWidget = this.designer.formWidget.getWidgetRef(this.designer.selectedWidget.options.name)
+          if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
+            fieldWidget.refreshDefaultValue()
+          }
+        }
+      }
+    },
+
+    inputNumberHandler({target}) {
+      target.value = target.value.replace(/[^0-9]/gi, '')
+    },
+
+    onRemoteChange(val) {
+      if (!!val) {
+        this.optionModel.filterable = true
+        this.optionModel.allowCreate = false
+      }
+    },
+
+    onMultipleSelected(val) {
+      if (val) {
+        this.optionModel.defaultValue = []  //清空原默认值!!
+      } else {
+        if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {
+          this.optionModel.defaultValue = this.optionModel.defaultValue[0]
+        } else {
+          this.optionModel.defaultValue = ''
+        }
+      }
+    },
+
+
+  }
+}

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

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

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

@@ -0,0 +1,25 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.remote')">
+    <el-checkbox v-model="optionModel.remote" @change="onRemoteChange"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "remote-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.widgetSize')">
+    <el-select v-model="optionModel.size">
+      <el-option v-for="item in widgetSizes" :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: "size-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        widgetSizes: [
+          {label: 'default', value: ''},
+          {label: 'large', value: 'large'},
+          {label: 'medium', value: 'medium'},
+          {label: 'small', value: 'small'},
+          {label: 'mini', value: 'mini'},
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayType')" v-if="selectedWidget.type === 'input'">
+    <el-select v-model="optionModel.type">
+      <el-option label="text" value="text"></el-option>
+      <!-- 当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！ -->
+      <!--
+      <el-option label="number" value="number"></el-option>
+      -->
+      <el-option label="password" value="password"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "type-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

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

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

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{i18nt('designer.setting.uploadSetting')}}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.uploadURL')">
+      <el-input type="text" v-model="optionModel.uploadURL"></el-input>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "uploadURL-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <el-form-item>
+    <span slot="label">{{i18nt('designer.setting.validation')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </span>
+    <el-select v-model="optionModel.validation" filterable allow-create default-first-option>
+      <el-option v-for="(fv, fvIdx) in fieldValidators"
+                 :key="fvIdx"
+                 :label="fv.label"
+                 :value="fv.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "validation-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        fieldValidators: [
+          {value: 'number', label: this.i18nt('designer.hint.numberValidator')},
+          {value: 'letter', label: this.i18nt('designer.hint.letterValidator')},
+          {value: 'letterAndNumber', label: this.i18nt('designer.hint.letterAndNumberValidator')},
+          {value: 'mobilePhone', label: this.i18nt('designer.hint.mobilePhoneValidator')},
+          {value: 'email', label: this.i18nt('designer.hint.emailValidator')},
+          {value: 'url', label: this.i18nt('designer.hint.urlValidator')},
+          {value: 'noChinese', label: this.i18nt('designer.hint.noChineseValidator')},
+          {value: 'chinese', label: this.i18nt('designer.hint.chineseValidator')},
+        ],
+      }
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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