skhj-variant 2.1.12

package/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue

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

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

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

package/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue

@@ -0,0 +1,119 @@
+<!--
+  因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"
+                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}">
+        <li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :key="tpIdx" 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>
+        <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>

package/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js

@@ -0,0 +1,12 @@
+import emitter from 'element-ui/lib/mixins/emitter'
+
+export default {
+  mixins: [emitter],
+  created() {},
+  methods: {
+    editEventHandler(eventName, eventParams) {
+      this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
+    },
+
+  }
+}

package/src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue

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