cloud-web-corejs 1.0.54-dev.780 → 1.0.54-dev.782

package/src/components/xform/form-designer/setting-panel/property-editor/field-baseAttachment/baseAttachment-fileTypes-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <file-types-select :option-model="optionModel"></file-types-select>
+</template>
+
+<script>
+  import FileTypesSelect from "../fileTypesSelect.vue"
+
+  export default {
+    name: "baseAttachment-fileTypes-editor",
+    components: {
+      FileTypesSelect,
+    },
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-vabUpload/vabUpload-fileTypes-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <file-types-select :option-model="optionModel"></file-types-select>
+</template>
+
+<script>
+  import FileTypesSelect from "../fileTypesSelect.vue"
+
+  export default {
+    name: "vabUpload-fileTypes-editor",
+    components: {
+      FileTypesSelect,
+    },
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,116 @@
+/**
+ * 上传格式属性编辑器的共用逻辑。
+ *
+ * 存储格式仍是扁平的后缀数组（如 ['jpg','png','mp4']），分类只是勾选时的快捷方式：
+ * 勾"图片"等于把该分类下的后缀一次性并入，取消勾选则整组移除。这样运行期的格式
+ * 校验与 accept 生成都不必感知分类，已保存的老表单里的后缀数组也能原样沿用。
+ */
+
+/* 每个分类内的后缀顺序即下拉分组里的展示顺序 */
+export const FILE_TYPE_CATEGORIES = [
+  {
+    value: "image",
+    labelKey: "designer.setting.fileTypeCategory.image",
+    types: ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"],
+  },
+  {
+    value: "video",
+    labelKey: "designer.setting.fileTypeCategory.video",
+    types: ["mp4", "avi", "mov", "wmv", "flv", "mkv", "rmvb"],
+  },
+  {
+    value: "audio",
+    labelKey: "designer.setting.fileTypeCategory.audio",
+    types: ["mp3", "wav", "wma", "aac", "flac"],
+  },
+  {
+    value: "word",
+    labelKey: "designer.setting.fileTypeCategory.word",
+    types: ["doc", "docx"],
+  },
+  {
+    value: "excel",
+    labelKey: "designer.setting.fileTypeCategory.excel",
+    types: ["xls", "xlsx", "csv"],
+  },
+  {
+    value: "ppt",
+    labelKey: "designer.setting.fileTypeCategory.ppt",
+    types: ["ppt", "pptx"],
+  },
+  {
+    value: "pdf",
+    labelKey: "designer.setting.fileTypeCategory.pdf",
+    types: ["pdf"],
+  },
+  {
+    value: "text",
+    labelKey: "designer.setting.fileTypeCategory.text",
+    types: ["txt"],
+  },
+  {
+    value: "archive",
+    labelKey: "designer.setting.fileTypeCategory.archive",
+    types: ["zip", "rar", "7z", "tar", "gz"],
+  },
+];
+
+export default {
+  computed: {
+    fileTypeCategories() {
+      return FILE_TYPE_CATEGORIES.map((category) => {
+        return {
+          ...category,
+          label: this.i18nt(category.labelKey),
+        };
+      });
+    },
+    selectedFileTypes: {
+      get() {
+        return this.optionModel.fileTypes || [];
+      },
+      set(value) {
+        /* 老表单可能没有 fileTypes 键，用 $set 保证可响应 */
+        this.$set(this.optionModel, "fileTypes", this.normalizeFileTypes(value));
+      },
+    },
+  },
+  methods: {
+    /* 允许手工输入，统一成小写、去点号、去重的后缀 */
+    normalizeFileTypes(value) {
+      let result = [];
+      (value || []).forEach((item) => {
+        let fileType = String(item).trim().replace(/^\./, "").toLowerCase();
+        if (!!fileType && result.indexOf(fileType) < 0) {
+          result.push(fileType);
+        }
+      });
+      return result;
+    },
+    isCategoryChecked(category) {
+      let selected = this.selectedFileTypes;
+      return category.types.every((fileType) => {
+        return selected.indexOf(fileType) > -1;
+      });
+    },
+    isCategoryIndeterminate(category) {
+      if (this.isCategoryChecked(category)) {
+        return false;
+      }
+      let selected = this.selectedFileTypes;
+      return category.types.some((fileType) => {
+        return selected.indexOf(fileType) > -1;
+      });
+    },
+    toggleCategory(category, checked) {
+      let selected = this.selectedFileTypes;
+      if (checked) {
+        this.selectedFileTypes = [...selected, ...category.types];
+      } else {
+        this.selectedFileTypes = selected.filter((fileType) => {
+          return category.types.indexOf(fileType) < 0;
+        });
+      }
+    },
+  },
+};

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

@@ -0,0 +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>

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -2942,6 +2942,7 @@ export const advancedFields = [
       labelWidth: null,
       labelHidden: !0,
       limit: null,
+      fileTypes: [],
       hideRemoveButton: false,
       accessType: "1",
       entityTableCode: null,
@@ -2960,12 +2961,14 @@ export const advancedFields = [
       showRuleEnabled: 1,
       showRules: [],
 
-      hiddenFileInfo: false,
-      hiddenFileName: false,
+      /* 键名须与 field-vabUpload-editor、vabUpload-widget 读取的一致；
+         早期的 hiddenFileInfo/hiddenFileName/widgetSize 无处读取，已改名 */
+      hideFileInfo: false,
+      hideFileName: false,
       showFileSize: false,
       showFileCreateBy: false,
       showFileCreateDate: false,
-      widgetSize: 2,
+      fileShowImageSize: 2,
 
       customUploadEnabled: false,
       uploadUrl: null,
@@ -3468,6 +3471,7 @@ export const advancedFields = [
       labelWidth: null,
       labelHidden: !0,
       limit: null,
+      fileTypes: [],
       showViewButton: true,
       accessType: "1",
       entityTableCode: null,

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"