cloud-web-corejs 1.0.54-dev.781 → 1.0.54-dev.783

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

@@ -14,6 +14,7 @@
     </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"
@@ -41,17 +42,47 @@
       optionModel: Object,
     },
     mounted() {
+      this.syncSelectLayout()
+    },
+    watch: {
+      selectedFileTypes() {
+        this.syncSelectLayout()
+      },
+    },
+    methods: {
       /*
-       * el-select 标签区的 max-width 是挂载那一刻按控件宽度算出来的内联样式，
-       * 这个编辑器常常挂载在还没完成布局的属性弹窗里，算出来的值偏小，
-       * 标签就会溢出到输入框外面。等布局稳定后让它重算一次。
+       * 两处都是 element 用 JS 量出来再写成内联样式的尺寸，在这里都不成立：
+       * 1. 标签区的 max-width 按挂载那一刻的控件宽度算，而本编辑器挂载在还没完成
+       *    布局的属性弹窗里，量到的值偏小；
+       * 2. 输入框高度由 resetInputHeight() 写成内联样式，但全局样式表里
+       *    body .el-input .el-input__inner 把 height 写死成 28px !important，
+       *    内联样式压不过它，标签一换行就溢出到框外，展开的下拉面板还会盖住溢出部分。
+       * 所以这里等布局稳定后让宽度重算，并用同等优先级把高度补回去。
        */
-      this.$nextTick(() => {
-        let select = this.$refs.fileTypesSelect
-        if (!!select && !!select.resetInputWidth) {
-          select.resetInputWidth()
-        }
-      })
+      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>
@@ -73,10 +104,9 @@
   }
 
   /*
-   * 全局样式表 src/resources/css/style.scss 里对 .el-form-item__content / .el-input
-   * 有大量固定宽度和 display 的 !important 覆盖，属性面板这一处正好被波及：
-   * 外面的 el-select 撑开了，里面画边框的 .el-input__inner 却还是窄的，
-   * 于是标签溢出到框外。这里从内容区一路 !important 压到最内层的 input。
+   * 全局样式表 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;
@@ -101,19 +131,14 @@
   }
 
   /*
-   * el-select 的标签区是绝对定位盖在输入框上的兄弟节点，max-width 为挂载时按控件
-   * 宽度算出的内联值；弹窗里挂载时控件还没有宽度，这个值会偏小导致标签溢出到框外。
-   * 这里用 !important 盖掉内联值，但必须和 element 一样留出右侧 32px：
-   * 清空按钮的显隐挂在 el-input 的 mouseenter/mouseleave 上，标签层一旦盖住图标区，
-   * 鼠标移过去就会触发 el-input 的 mouseleave，图标随即消失。
+   * 标签区是绝对定位盖在输入框上的兄弟节点：
+   * 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;
-    /*
-     * 标签层整体对鼠标透明：清空按钮的显隐挂在 el-input 的 mouseenter/mouseleave 上，
-     * 而标签层是盖在输入框上的兄弟节点，凡是它盖住的地方 hover 都算不到 el-input 头上，
-     * 清空按钮就只在没被盖住的图标区才出现。
-     */
     pointer-events: none;
   }
 
@@ -127,4 +152,25 @@
   .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-render/container-item/data-table-item.vue

@@ -74,7 +74,7 @@
             type="text"
             status="primary"
             plain
-            >{{ $t2("重置") }}
+            >{{ $t1("刷新") }}
           </vxe-button>
           <vxe-button
             status="warning"