skhj-variant 2.1.12

package/src/components/form-designer/setting-panel/option-items-setting.vue

@@ -0,0 +1,234 @@
+<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'}">
+        <li v-for="(option, idx) in optionModel.optionItems" :key="idx">
+          <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>
+      </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'}">
+        <li v-for="(option, idx) in optionModel.optionItems" :key="idx">
+          <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>
+      </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')" :visible.sync="showImportDialogFlag"
+               v-if="showImportDialogFlag" :show-close="true" 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>
+      <div slot="footer" 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>
+    </el-dialog>
+
+    <el-dialog :title="i18nt('designer.setting.importOptions')" :visible.sync="showImportCascaderDialogFlag"
+               v-if="showImportCascaderDialogFlag" :show-close="true" 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>
+      <div slot="footer" 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>
+    </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 ::v-deep .el-dialog__body {
+    padding: 10px 15px;
+  }
+
+  .dialog-footer .el-button {
+    width: 100px;
+  }
+</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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