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

package/src/components/xform/form-designer/form-widget/field-widget/area-select-widget.vue

@@ -0,0 +1,272 @@
+<template>
+  <form-item-wrapper
+    :designer="designer"
+    :field="field"
+    :rules="rules"
+    :design-state="designState"
+    :parent-widget="parentWidget"
+    :parent-list="parentList"
+    :index-of-parent-list="indexOfParentList"
+    :sub-form-row-index="subFormRowIndex"
+    :sub-form-col-index="subFormColIndex"
+    :sub-form-row-id="subFormRowId"
+  >
+    <el-input
+      v-if="designState"
+      class="full-width-input design-area-preview"
+      :style="widgetStyle"
+      readonly
+      disabled
+      :size="field.options.size || 'small'"
+      :placeholder="getI18nLabel(field.options.placeholder || '请选择地区')"
+    />
+    <baseArea
+      v-else
+      ref="baseAreaRef"
+      v-show="!isReadMode"
+      class="full-width-input"
+      :style="widgetStyle"
+      :value="fieldModel"
+      :label-value="areaNameLabel"
+      @update:labelValue="handleAreaLabelUpdate"
+      :max-level="maxLevel"
+      :min-level="minLevel"
+      :locale="field.options.locale"
+      :disabled="field.options.disabled"
+      :readonly="field.options.readonly"
+      :clearable="field.options.clearable"
+      :placeholder="getI18nLabel(field.options.placeholder || '请选择地区')"
+      :size="field.options.size || 'small'"
+      @input="handleAreaInput"
+      @change="handleAreaChange"
+      @popover-open="handleAreaPopoverOpen"
+    />
+    <template v-if="isReadMode">
+      <span class="readonly-mode-field">{{ readModeText }}</span>
+    </template>
+  </form-item-wrapper>
+</template>
+
+<script>
+import FormItemWrapper from "./form-item-wrapper";
+import emitter from "../../../../../components/xform/utils/emitter";
+import i18n from "../../../../../components/xform/utils/i18n";
+import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+import baseArea from "@base/components/baseArea/index.vue";
+import { deepClone } from "../../../../../components/xform/utils/util";
+
+export default {
+  name: "area-select-widget",
+  componentName: "FieldWidget",
+  mixins: [emitter, fieldMixin, i18n],
+  components: {
+    FormItemWrapper,
+    baseArea,
+  },
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+    designState: {
+      type: Boolean,
+      default: false,
+    },
+    subFormRowIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      type: String,
+      default: "",
+    },
+  },
+  inject: ["refList", "globalOptionData", "globalModel"],
+  data() {
+    return {
+      oldFieldValue: null,
+      fieldModel: null,
+      areaLabel: null,
+      rules: [],
+    };
+  },
+  computed: {
+    currentData() {
+      let tableParam = this.tableParam;
+      return tableParam && tableParam.row ? tableParam.row : this.formModel;
+    },
+    areaNameField() {
+      return this.field.options.areaName || null;
+    },
+    maxLevel() {
+      const areaDataType = this.field.options.areaDataType;
+      const type =
+        areaDataType == null || areaDataType === "" ? 3 : areaDataType * 1;
+      if (type >= 0 && type <= 3) {
+        return type + 1;
+      }
+      return 4;
+    },
+    minLevel() {
+      const areaMinLevel = this.field.options.areaMinLevel;
+      if (areaMinLevel == null || areaMinLevel === "") {
+        return 1;
+      }
+      const type = areaMinLevel * 1;
+      if (type >= 0 && type <= 3) {
+        return type + 1;
+      }
+      return 1;
+    },
+    readModeText() {
+      return this.areaNameLabel || "--";
+    },
+    widgetStyle() {
+      const widgetWidth = this.field.options.widgetWidth;
+      if (widgetWidth != null && widgetWidth !== "") {
+        return { width: widgetWidth };
+      }
+      return { width: "100%" };
+    },
+    currentAreaNameValue() {
+      if (!this.areaNameField) {
+        return null;
+      }
+      return this.currentData[this.areaNameField] ?? null;
+    },
+    areaNameLabel() {
+      const formLabel = this.currentAreaNameValue;
+      if (formLabel != null && formLabel !== "") {
+        return formLabel;
+      }
+      return this.areaLabel;
+    },
+  },
+  created() {
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    handleAreaLabelUpdate(label) {
+      if (this.designState) {
+        return;
+      }
+      this.areaLabel = label;
+      this.syncAreaName(label);
+    },
+    syncAreaName(label) {
+      if (this.areaNameField) {
+        this.$set(this.currentData, this.areaNameField, label);
+      }
+    },
+    syncAreaLabelFromForm() {
+      if (this.areaNameField) {
+        this.areaLabel = this.currentData[this.areaNameField] ?? null;
+      }
+    },
+    commitAreaValue(value, label) {
+      this.fieldModel = value;
+      this.$set(this.currentData, this.fieldKeyName, value);
+      this.syncUpdateFormModel(value);
+      if (label !== undefined) {
+        this.areaLabel = label;
+        this.syncAreaName(label);
+      }
+    },
+    handleAreaInput(val) {
+      if (this.designState) {
+        return;
+      }
+      this.commitAreaValue(val);
+    },
+    handleAreaPopoverOpen() {
+      if (this.designState) {
+        return;
+      }
+      this.oldFieldValue = deepClone(this.fieldModel);
+    },
+    handleAreaChange(payload) {
+      if (this.designState) {
+        return;
+      }
+      const value =
+        payload && Object.prototype.hasOwnProperty.call(payload, "value")
+          ? payload.value
+          : this.fieldModel;
+      this.handleChangeEvent(value);
+    },
+    createEmptyAreaPathResult(value) {
+      return {
+        value: value != null && value !== "" ? value : null,
+        label: null,
+        path: [],
+        province: null,
+        city: null,
+        district: null,
+        town: null,
+      };
+    },
+    async getAreaPath(value) {
+      if (this.designState) {
+        return this.createEmptyAreaPathResult(value);
+      }
+      const areaRef = this.$refs.baseAreaRef;
+      if (areaRef && areaRef.getAreaPath) {
+        const targetValue =
+          value !== undefined && value !== null ? value : this.getValue();
+        return areaRef.getAreaPath(targetValue);
+      }
+      return this.createEmptyAreaPathResult(value);
+    },
+    getValue() {
+      const fieldKey = this.fieldKeyName;
+      if (this.fieldModel != null && this.fieldModel !== "") {
+        return this.fieldModel;
+      }
+      const formVal = this.currentData[fieldKey];
+      if (formVal != null && formVal !== "") {
+        return formVal;
+      }
+      return this.fieldModel;
+    },
+    setValue(val) {
+      if (!this.field.formItemFlag) {
+        return;
+      }
+      const oldVal = deepClone(this.fieldModel);
+      const value = val ?? null;
+      this.commitAreaValue(value);
+      this.syncAreaLabelFromForm();
+      this.emitFieldDataChange(value, oldVal);
+    },
+    fieldModelLabel() {
+      return this.areaNameLabel || this.getValue() || "";
+    },
+  },
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.full-width-input {
+  width: 100% !important;
+  display: block !important;
+  box-sizing: border-box;
+}
+</style>

package/src/components/xform/form-designer/form-widget/field-widget/autocomplete-widget.vue

@@ -0,0 +1,119 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex"
+                     :sub-form-row-id="subFormRowId">
+    <el-autocomplete
+      ref="fieldEditor"
+      v-model="displayValue"
+      v-show="!isReadMode"
+      class="full-width-input"
+      :disabled="field.options.disabled"
+      :readonly="field.options.readonly"
+      :size="field.options.size"
+      :placeholder="getI18nLabel(field.options.placeholder || '请输入关键词搜索')"
+      :clearable="field.options.clearable"
+      :fetch-suggestions="querySearchAsync"
+      :trigger-on-focus="false"
+      :debounce="field.options.debounce || 300"
+      :value-key="valueKey"
+      :prefix-icon="field.options.prefixIcon"
+      :suffix-icon="field.options.suffixIcon || 'el-icon-tickets'"
+      :popper-class="
+        'autocomplete-popper' +
+        (field.options.customClass ? ' ' + field.options.customClass.join(' ') : '')
+      "
+      @select="handleSelect"
+      @clear="handleClear"
+      @focus="handleFocusCustomEvent"
+      @blur="handleBlur"
+      @input="handleInputChange"
+      :style="'width:' + field.options.widgetWidth + ' !important;'"
+      :class="{'custom-width': field.options.widgetWidth != null}">
+      <template slot-scope="{ item }">
+        <template v-if="field.options.autocompleteItemTemplate">
+          <!-- 支持自定义下拉项模板脚本(返回 HTML 字符串) -->
+          <span v-html="renderItemTemplate(item)"></span>
+        </template>
+        <template v-else>
+          <span v-html="highlightKeyword(item[valueKey])"></span>
+        </template>
+      </template>
+    </el-autocomplete>
+    <template v-if="isReadMode">
+      <span class="readonly-mode-field">{{ displayValue }}</span>
+    </template>
+  </form-item-wrapper>
+</template>
+
+<script>
+import mixins from "@base/components/xform/form-designer/form-widget/field-widget/mixins/autocomplete-mixin";
+
+export default {
+  name: "autocomplete-widget",
+  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+  mixins: [mixins],
+  methods: {
+    /**
+     * 渲染自定义下拉项模板(可选)。
+     * autocompleteItemTemplate 为一段返回 HTML 字符串的脚本，入参为 item
+     */
+    renderItemTemplate(item) {
+      if (!this.field.options.autocompleteItemTemplate) return "";
+      try {
+        let fn = new Function("item", this.field.options.autocompleteItemTemplate);
+        return fn.call(this, item) || "";
+      } catch (e) {
+        return "";
+      }
+    },
+    /** HTML 转义，防止下拉项内容注入 */
+    escapeHtml(str) {
+      let map = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;",
+      };
+      return String(str == null ? "" : str).replace(/[&<>"']/g, (c) => map[c]);
+    },
+    /** 高亮下拉项中与当前搜索关键词匹配的部分 */
+    highlightKeyword(text) {
+      let escaped = this.escapeHtml(text);
+      let keyword = this.lastQueryKeyword;
+      if (!keyword) return escaped;
+      let kw = this.escapeHtml(keyword).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      if (!kw) return escaped;
+      let re = new RegExp("(" + kw + ")", "gi");
+      return escaped.replace(
+        re,
+        '<span class="autocomplete-highlight">$1</span>'
+      );
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.full-width-input {
+  width: 100% !important;
+}
+</style>
+
+<!-- 非 scoped：el-autocomplete 下拉浮层挂在 body 下，scoped 样式无法命中 -->
+<style lang="scss">
+.autocomplete-popper {
+  .el-autocomplete-suggestion__list li {
+    font-size: 13px;
+    line-height: 1.6;
+  }
+}
+
+.autocomplete-highlight {
+  color: #409eff;
+  font-weight: bold;
+}
+</style>