cloud-web-corejs 1.0.54-dev.797 → 1.0.54-dev.799

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

@@ -1,176 +1,176 @@
-<template>
-  <!-- 分类勾选行放不进 120px 标签剩下的宽度里，故整块用 label-width="0" 占满属性面板 -->
-  <el-form-item class="file-types-item" label-width="0">
-    <div class="file-types-title">{{i18nt('designer.setting.fileTypes')}}
-      <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesCategoryHelp')">
-        <i class="el-icon-info"></i></el-tooltip>
-    </div>
-    <div class="file-types-category">
-      <el-checkbox v-for="category in fileTypeCategories"
-                   :key="category.value"
-                   :value="isCategoryChecked(category)"
-                   :indeterminate="isCategoryIndeterminate(category)"
-                   @change="toggleCategory(category, $event)">{{ category.label }}</el-checkbox>
-    </div>
-    <div class="file-types-select">
-      <el-select ref="fileTypesSelect" multiple allow-create filterable default-first-option clearable
-                 popper-class="file-types-select-dropdown"
-                 :placeholder="i18nt('designer.setting.fileTypesPlaceholder')"
-                 v-model="selectedFileTypes" style="width: 100%">
-        <el-option-group v-for="category in fileTypeCategories"
-                         :key="category.value"
-                         :label="category.label">
-          <el-option v-for="fileType in category.types"
-                     :key="fileType"
-                     :label="fileType"
-                     :value="fileType">
-          </el-option>
-        </el-option-group>
-      </el-select>
-    </div>
-  </el-form-item>
-</template>
-
-<script>
-  import i18n from "../../../../../components/xform/utils/i18n"
-  import fileTypesEditorMixin from "./fileTypesEditorMixin"
-
-  export default {
-    name: "file-types-select",
-    mixins: [i18n, fileTypesEditorMixin],
-    props: {
-      optionModel: Object,
-    },
-    mounted() {
-      this.syncSelectLayout()
-    },
-    watch: {
-      selectedFileTypes() {
-        this.syncSelectLayout()
-      },
-    },
-    methods: {
-      /*
-       * 两处都是 element 用 JS 量出来再写成内联样式的尺寸，在这里都不成立：
-       * 1. 标签区的 max-width 按挂载那一刻的控件宽度算，而本编辑器挂载在还没完成
-       *    布局的属性弹窗里，量到的值偏小；
-       * 2. 输入框高度由 resetInputHeight() 写成内联样式，但全局样式表里
-       *    body .el-input .el-input__inner 把 height 写死成 28px !important，
-       *    内联样式压不过它，标签一换行就溢出到框外，展开的下拉面板还会盖住溢出部分。
-       * 所以这里等布局稳定后让宽度重算，并用同等优先级把高度补回去。
-       */
-      syncSelectLayout() {
-        this.$nextTick(() => {
-          let select = this.$refs.fileTypesSelect
-          if (!select || !select.$refs.reference) {
-            return
-          }
-          if (!!select.resetInputWidth) {
-            select.resetInputWidth()
-          }
-          let input = select.$refs.reference.$el.querySelector("input.el-input__inner")
-          let tags = select.$refs.tags
-          if (!input || !tags) {
-            return
-          }
-          let minHeight = select.initialInputHeight || input.offsetHeight
-          let tagsHeight = Math.round(tags.getBoundingClientRect().height)
-          let height = Math.max(tagsHeight > minHeight ? tagsHeight + 6 : tagsHeight, minHeight)
-          input.style.setProperty("height", height + "px", "important")
-          /* 高度变了要让下拉面板重新定位，否则还是按旧高度贴在原处 */
-          if (!!select.broadcast) {
-            select.broadcast("ElSelectDropdown", "updatePopper")
-          }
-        })
-      },
-    },
-  }
-</script>
-
-<style scoped>
-  .file-types-title {
-    color: #606266;
-    line-height: 22px;
-  }
-
-  .file-types-category {
-    margin-bottom: 4px;
-    line-height: 22px;
-  }
-
-  /* 独立的 el-checkbox 默认没有间距，且标签会跟着换行错位 */
-  .file-types-category .el-checkbox {
-    margin-right: 10px;
-  }
-
-  /*
-   * 全局样式表 src/resources/css/style.scss 在 body 作用域下写了
-   * .el-input{width:148px !important}，画边框的 .el-input__inner 也跟着只有 148px，
-   * 所以这里必须从内容区一路 !important 压到最内层的 input 才能铺满。
-   */
-  .file-types-item ::v-deep .el-form-item__content {
-    display: block !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    float: none;
-  }
-
-  .file-types-select {
-    display: block;
-    width: auto;
-  }
-
-  .file-types-select ::v-deep .el-select {
-    display: block !important;
-    width: 100% !important;
-  }
-
-  .file-types-select ::v-deep .el-select .el-input,
-  .file-types-select ::v-deep .el-select .el-input__inner {
-    width: 100% !important;
-  }
-
-  /*
-   * 标签区是绝对定位盖在输入框上的兄弟节点：
-   * max-width 是挂载时按控件宽度算出的内联值，弹窗里量到的偏小，用 !important 盖掉，
-   * 并和 element 一样留出右侧 32px 的图标位；
-   * pointer-events 置空则是因为清空按钮的显隐挂在 el-input 的 mouseenter/mouseleave 上，
-   * 标签层盖住的地方 hover 都算不到 el-input 头上，按钮就只在图标区才出现。
-   */
-  .file-types-select ::v-deep .el-select__tags {
-    max-width: calc(100% - 32px) !important;
-    pointer-events: none;
-  }
-
-  /* 标签上的删除按钮和手工输入框仍要能点 */
-  .file-types-select ::v-deep .el-select__tags .el-tag__close,
-  .file-types-select ::v-deep .el-select__input {
-    pointer-events: auto;
-  }
-
-  /* 手工输入用的内联 input 同样带着按旧宽度算出的内联 max-width，同样留出图标区 */
-  .file-types-select ::v-deep .el-select__input {
-    max-width: calc(100% - 42px) !important;
-  }
-
-  /*
-   * 全局样式表有 :focus-visible{outline:2px solid 主题色}，展开下拉时焦点落在这个
-   * 内联输入框上，Chrome 对文本框恒判定 focus-visible，于是框里又套出一圈蓝边。
-   * 外层输入框自己已有聚焦态边框，这圈去掉。
-   */
-  .file-types-select ::v-deep .el-select__input:focus,
-  .file-types-select ::v-deep .el-select__input:focus-visible {
-    outline: none;
-  }
-</style>
-
-<style>
-  /*
-   * 下拉面板是挂到 body 上的，scoped 样式够不到，只能靠 popper-class 做全局约束。
-   * 全局样式表把 .el-select-dropdown__wrap 的 max-height 放大到了 474px，
-   * 而这里有 9 个分组共 27 个后缀，面板会高到底部放不下、翻上来盖住整块属性面板。
-   */
-  .file-types-select-dropdown .el-select-dropdown__wrap {
-    max-height: 320px;
-  }
-</style>
+<template>
+  <!-- 分类勾选行放不进 120px 标签剩下的宽度里，故整块用 label-width="0" 占满属性面板 -->
+  <el-form-item class="file-types-item form-item-label-top" label-width="0">
+    <div class="file-types-title">{{i18nt('designer.setting.fileTypes')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesCategoryHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </div>
+    <div class="file-types-category">
+      <el-checkbox v-for="category in fileTypeCategories"
+                   :key="category.value"
+                   :value="isCategoryChecked(category)"
+                   :indeterminate="isCategoryIndeterminate(category)"
+                   @change="toggleCategory(category, $event)">{{ category.label }}</el-checkbox>
+    </div>
+    <div class="file-types-select">
+      <el-select ref="fileTypesSelect" multiple allow-create filterable default-first-option clearable
+                 popper-class="file-types-select-dropdown"
+                 :placeholder="i18nt('designer.setting.fileTypesPlaceholder')"
+                 v-model="selectedFileTypes" style="width: 100%">
+        <el-option-group v-for="category in fileTypeCategories"
+                         :key="category.value"
+                         :label="category.label">
+          <el-option v-for="fileType in category.types"
+                     :key="fileType"
+                     :label="fileType"
+                     :value="fileType">
+          </el-option>
+        </el-option-group>
+      </el-select>
+    </div>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "../../../../../components/xform/utils/i18n"
+  import fileTypesEditorMixin from "./fileTypesEditorMixin"
+
+  export default {
+    name: "file-types-select",
+    mixins: [i18n, fileTypesEditorMixin],
+    props: {
+      optionModel: Object,
+    },
+    mounted() {
+      this.syncSelectLayout()
+    },
+    watch: {
+      selectedFileTypes() {
+        this.syncSelectLayout()
+      },
+    },
+    methods: {
+      /*
+       * 两处都是 element 用 JS 量出来再写成内联样式的尺寸，在这里都不成立：
+       * 1. 标签区的 max-width 按挂载那一刻的控件宽度算，而本编辑器挂载在还没完成
+       *    布局的属性弹窗里，量到的值偏小；
+       * 2. 输入框高度由 resetInputHeight() 写成内联样式，但全局样式表里
+       *    body .el-input .el-input__inner 把 height 写死成 28px !important，
+       *    内联样式压不过它，标签一换行就溢出到框外，展开的下拉面板还会盖住溢出部分。
+       * 所以这里等布局稳定后让宽度重算，并用同等优先级把高度补回去。
+       */
+      syncSelectLayout() {
+        this.$nextTick(() => {
+          let select = this.$refs.fileTypesSelect
+          if (!select || !select.$refs.reference) {
+            return
+          }
+          if (!!select.resetInputWidth) {
+            select.resetInputWidth()
+          }
+          let input = select.$refs.reference.$el.querySelector("input.el-input__inner")
+          let tags = select.$refs.tags
+          if (!input || !tags) {
+            return
+          }
+          let minHeight = select.initialInputHeight || input.offsetHeight
+          let tagsHeight = Math.round(tags.getBoundingClientRect().height)
+          let height = Math.max(tagsHeight > minHeight ? tagsHeight + 6 : tagsHeight, minHeight)
+          input.style.setProperty("height", height + "px", "important")
+          /* 高度变了要让下拉面板重新定位，否则还是按旧高度贴在原处 */
+          if (!!select.broadcast) {
+            select.broadcast("ElSelectDropdown", "updatePopper")
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .file-types-title {
+    color: #606266;
+    line-height: 22px;
+  }
+
+  .file-types-category {
+    margin-bottom: 4px;
+    line-height: 22px;
+  }
+
+  /* 独立的 el-checkbox 默认没有间距，且标签会跟着换行错位 */
+  .file-types-category .el-checkbox {
+    margin-right: 10px;
+  }
+
+  /*
+   * 全局样式表 src/resources/css/style.scss 在 body 作用域下写了
+   * .el-input{width:148px !important}，画边框的 .el-input__inner 也跟着只有 148px，
+   * 所以这里必须从内容区一路 !important 压到最内层的 input 才能铺满。
+   */
+  .file-types-item ::v-deep .el-form-item__content {
+    display: block !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    float: none;
+  }
+
+  .file-types-select {
+    display: block;
+    width: auto;
+  }
+
+  .file-types-select ::v-deep .el-select {
+    display: block !important;
+    width: 100% !important;
+  }
+
+  .file-types-select ::v-deep .el-select .el-input,
+  .file-types-select ::v-deep .el-select .el-input__inner {
+    width: 100% !important;
+  }
+
+  /*
+   * 标签区是绝对定位盖在输入框上的兄弟节点：
+   * max-width 是挂载时按控件宽度算出的内联值，弹窗里量到的偏小，用 !important 盖掉，
+   * 并和 element 一样留出右侧 32px 的图标位；
+   * pointer-events 置空则是因为清空按钮的显隐挂在 el-input 的 mouseenter/mouseleave 上，
+   * 标签层盖住的地方 hover 都算不到 el-input 头上，按钮就只在图标区才出现。
+   */
+  .file-types-select ::v-deep .el-select__tags {
+    max-width: calc(100% - 32px) !important;
+    pointer-events: none;
+  }
+
+  /* 标签上的删除按钮和手工输入框仍要能点 */
+  .file-types-select ::v-deep .el-select__tags .el-tag__close,
+  .file-types-select ::v-deep .el-select__input {
+    pointer-events: auto;
+  }
+
+  /* 手工输入用的内联 input 同样带着按旧宽度算出的内联 max-width，同样留出图标区 */
+  .file-types-select ::v-deep .el-select__input {
+    max-width: calc(100% - 42px) !important;
+  }
+
+  /*
+   * 全局样式表有 :focus-visible{outline:2px solid 主题色}，展开下拉时焦点落在这个
+   * 内联输入框上，Chrome 对文本框恒判定 focus-visible，于是框里又套出一圈蓝边。
+   * 外层输入框自己已有聚焦态边框，这圈去掉。
+   */
+  .file-types-select ::v-deep .el-select__input:focus,
+  .file-types-select ::v-deep .el-select__input:focus-visible {
+    outline: none;
+  }
+</style>
+
+<style>
+  /*
+   * 下拉面板是挂到 body 上的，scoped 样式够不到，只能靠 popper-class 做全局约束。
+   * 全局样式表把 .el-select-dropdown__wrap 的 max-height 放大到了 474px，
+   * 而这里有 9 个分组共 27 个后缀，面板会高到底部放不下、翻上来盖住整块属性面板。
+   */
+  .file-types-select-dropdown .el-select-dropdown__wrap {
+    max-height: 320px;
+  }
+</style>

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

@@ -16,7 +16,7 @@
       <!--      <el-form-item label="请求表单编码" v-if="optionModel.formScriptEnabled">
         <el-input v-model="optionModel.httpFormCode" clearable></el-input>
       </el-form-item>-->
-      <el-form-item label="表单脚本编码" v-if="optionModel.formScriptEnabled">
+      <el-form-item label="表单脚本编码" v-if="optionModel.formScriptEnabled" class="form-item-label-top">
         <el-input v-model="optionModel.formScriptCode" clearable></el-input>
       </el-form-item>
       <el-form-item
@@ -45,6 +45,7 @@
       <el-form-item
         :label="i18nt('词汇编码')"
         v-if="optionModel.commonAttributeEnabled"
+        class="form-item-label-top"
       >
         <el-input
           type="text"

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-form-item label="格式化"> </el-form-item>
-    <el-form-item label-width="0">
+    <el-form-item label-width="0" class="form-item-label-top">
       <el-select v-model="optionModel.formatType" clearable style="width: 100%">
         <el-option-group v-for="t in op" :key="t.label" :label="t.label">
           <el-option
@@ -27,7 +27,7 @@
         <i class="el-icon-edit"></i>
       </a>
     </el-form-item>
-    <el-form-item :label="i18nt('格式化小数位')" v-if="optionModel.formatType === 'n0'">
+    <el-form-item :label="i18nt('格式化小数位')" v-if="optionModel.formatType === 'n0'" class="form-item-label-top">
       <el-input-number v-model="optionModel.formatDecimal" />
     </el-form-item>
   </div>