cloud-web-corejs 1.0.258 → 1.0.259

package/src/components/xform/form-designer/setting-panel/property-editor/field-cascader/showAllLevels-editor.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showAllLevels')">
+    <el-switch v-model="optionModel.showAllLevels"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+
+export default {
+  name: "showAllLevels-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
+</script>
+
+<style scoped></style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-date/date-dateLimit-editor.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <el-form-item label="关联开始字段">
+      <el-select
+        v-if="dateFieldOptions.length"
+        v-model="optionModel.limitStartField"
+        filterable
+        clearable
+        placeholder="不能小于该字段值"
+      >
+        <el-option
+          v-for="item in dateFieldOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-else
+        v-model="optionModel.limitStartField"
+        placeholder="请输入开始字段属性名"
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="关联结束字段">
+      <el-select
+        v-if="dateFieldOptions.length"
+        v-model="optionModel.limitEndField"
+        filterable
+        clearable
+        placeholder="不能大于该字段值"
+      >
+        <el-option
+          v-for="item in dateFieldOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-else
+        v-model="optionModel.limitEndField"
+        placeholder="请输入结束字段属性名"
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="最小日期">
+      <el-date-picker
+        v-model="optionModel.minDate"
+        :type="pickerType"
+        :format="optionModel.format"
+        :value-format="optionModel.valueFormat"
+        style="width: 100%"
+        clearable
+        placeholder="留空则不限制"
+      ></el-date-picker>
+    </el-form-item>
+    <el-form-item label="最大日期">
+      <el-date-picker
+        v-model="optionModel.maxDate"
+        :type="pickerType"
+        :format="optionModel.format"
+        :value-format="optionModel.valueFormat"
+        style="width: 100%"
+        clearable
+        placeholder="留空则不限制"
+      ></el-date-picker>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin";
+import { loopHandleWidget } from "../../../../../../components/xform/utils/util";
+
+export default {
+  name: "date-dateLimit-editor",
+  mixins: [i18n, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    tableColumns: Array,
+  },
+  computed: {
+    pickerType() {
+      return this.optionModel.type || "date";
+    },
+    currentFieldKey() {
+      return this.getFieldKeyByOptions(this.optionModel);
+    },
+    dateFieldOptions() {
+      let options = [];
+      if (this.tableColumns && this.tableColumns.length) {
+        this.collectDateFieldsFromColumns(this.tableColumns, options);
+      } else if (this.designer && this.designer.widgetList) {
+        loopHandleWidget(this.designer.widgetList, (widget) => {
+          if (widget.type !== "date" || widget.id === this.selectedWidget.id) {
+            return;
+          }
+          let fieldKey = this.getFieldKeyByOptions(widget.options);
+          if (fieldKey && fieldKey !== this.currentFieldKey) {
+            options.push({
+              value: fieldKey,
+              label: widget.options.label || fieldKey,
+            });
+          }
+        });
+      }
+      return options;
+    },
+  },
+  methods: {
+    getFieldKeyByOptions(options) {
+      if (!options) {
+        return "";
+      }
+      return (options.keyNameEnabled && options.keyName) || options.name || "";
+    },
+    collectDateFieldsFromColumns(columns, options) {
+      columns.forEach((col) => {
+        if (col.children && col.children.length) {
+          this.collectDateFieldsFromColumns(col.children, options);
+          return;
+        }
+        if (!this.isDateColumn(col)) {
+          return;
+        }
+        let fieldKey = col.prop;
+        if (col.columnOption) {
+          fieldKey = this.getFieldKeyByOptions(col.columnOption) || fieldKey;
+        }
+        if (col.editColumnOption) {
+          fieldKey =
+            this.getFieldKeyByOptions(col.editColumnOption) || fieldKey;
+        }
+        if (fieldKey && fieldKey !== this.currentFieldKey) {
+          options.push({
+            value: fieldKey,
+            label: col.label || fieldKey,
+          });
+        }
+      });
+    },
+    isDateColumn(col) {
+      return (
+        col.formatS === "date" ||
+        col.formatS === "editDate" ||
+        col.editFormatS === "editDate" ||
+        col.widget?.type === "date" ||
+        col.editWidget?.type === "date"
+      );
+    },
+  },
+};
+</script>

package/src/components/xform/form-designer/setting-panel/property-editor/field-script-input/script-input-editor.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <el-form-item label="编辑器语言">
+      <el-select v-model="optionModel.editorMode">
+        <el-option value="javascript" label="JavaScript"></el-option>
+        <el-option value="java" label="Java"></el-option>
+        <el-option value="json" label="JSON"></el-option>
+        <el-option value="text" label="文本"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="编辑器高度">
+      <el-input
+        v-model="optionModel.editorHeight"
+        placeholder="如 200px"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="最小行数">
+      <el-input-number
+        v-model="optionModel.editorMinLines"
+        :min="3"
+        :max="100"
+        controls-position="right"
+        style="width: 100%"
+      ></el-input-number>
+    </el-form-item>
+    <el-form-item label="最大行数">
+      <el-input-number
+        v-model="optionModel.editorMaxLines"
+        :min="3"
+        :max="200"
+        controls-position="right"
+        style="width: 100%"
+      ></el-input-number>
+    </el-form-item>
+    <el-form-item label="语法检查">
+      <el-switch v-model="optionModel.userWorker"></el-switch>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../utils/i18n";
+
+export default {
+  name: "script-input-editor",
+  mixins: [i18n],
+  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/setting-panel/property-editor/textFlag-editor.vue

@@ -315,9 +315,9 @@ export default {
         columnSelectedWidget: widget,
         // index: index,
         // columnEditFields: columnEditFields,
-        callback: (columnOption) => {
-          widget.options = columnOption
-          // this.confirmFormatConfigDialog(columnOption, row);
+        callback: (columnSelectedWidget) => {
+          widget.options = columnSelectedWidget.options
+          // this.confirmFormatConfigDialog(columnSelectedWidget, row);
         },
       });
     },

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

@@ -0,0 +1,19 @@
+<template>
+  <el-form-item label="UTC时差转换">
+    <el-switch v-model="optionModel.utcTransformEnabled"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../../components/xform/utils/i18n";
+
+export default {
+  name: "utcTransformEnabled-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
+</script>