cloud-web-corejs 1.0.276 → 1.0.277

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

@@ -1,763 +1,879 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: https://www.vform666.com
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<template>
-  <div
-    class="field-wrapper"
-    :class="{ 'design-time-bottom-margin': !!this.designer }"
-    v-show="!field.options.hidden || designState === true"
-  >
-    <div>
-      <template v-if="formItemProp === 'false'">
-        <template v-if="!field.options.hidden">
-          <template v-if="isShowWidget()">
-            <slot></slot>
-          </template>
-          <template
-            v-else-if="
-              field.options.widgetTextFlag === 3 &&
-              field.options.widgetTextLinkConfig
-            "
-          >
-            <div class="ellipsis">
-              <a
-                class="a-link"
-                :class="getWidgetClass()"
-                @click.native="handleClick"
-              >
-                <span>
-                  <i
-                    :class="
-                      field.options.widgetTextLinkConfig.options.prefixIcon
-                    "
-                    v-if="
-                      !!field.options.widgetTextLinkConfig.options.prefixIcon
-                    "
-                  ></i>
-                  <span>{{ getWidgetValue() }}</span>
-                  <i
-                    :class="
-                      field.options.widgetTextLinkConfig.options.suffixIcon
-                    "
-                    v-if="
-                      !!field.options.widgetTextLinkConfig.options.suffixIcon
-                    "
-                  ></i>
-                </span>
-              </a>
-            </div>
-          </template>
-          <template v-else>
-            <span>{{ getShowValue() }}</span>
-          </template>
-        </template>
-      </template>
-      <template v-else>
-        <el-form-item
-          v-if="
-            !!field.formItemFlag &&
-            (!field.options.hidden || designState === true)
-          "
-          :label="label"
-          :label-width="labelWidth"
-          :rules="getRules()"
-          :prop="getPropName()"
-          :class="[
-            selected ? 'selected' : '',
-            labelAlign,
-            customClass,
-            field.options.required ? 'required' : '',
-          ]"
-          @click.native.stop="selectField(field)"
-        >
-          <span
-            v-if="!!field.options.labelIconClass"
-            slot="label"
-            class="custom-label"
-          >
-            <template v-if="field.options.labelIconPosition === 'front'">
-              <template v-if="!!field.options.labelTooltip">
-                <el-tooltip
-                  :content="field.options.labelTooltip"
-                  effect="dark"
-                  popper-class="label-tooltip-pre-line"
-                >
-                  <i :class="field.options.labelIconClass"></i></el-tooltip
-                ><span :style="{ color: field.options.labelColor }">{{
-                  label
-                }}</span></template
-              >
-              <template v-else>
-                <i :class="field.options.labelIconClass"></i
-                ><span :style="{ color: field.options.labelColor }">{{
-                  label
-                }}</span></template
-              >
-            </template>
-            <template v-else-if="field.options.labelIconPosition === 'rear'">
-              <template v-if="!!field.options.labelTooltip">
-                <span :style="{ color: field.options.labelColor }">{{
-                  label
-                }}</span
-                ><el-tooltip
-                  :content="field.options.labelTooltip"
-                  effect="dark"
-                  popper-class="label-tooltip-pre-line"
-                >
-                  <i :class="field.options.labelIconClass"></i></el-tooltip
-              ></template>
-              <template v-else>
-                <span :style="{ color: field.options.labelColor }">{{
-                  label
-                }}</span
-                ><i :class="field.options.labelIconClass"></i
-              ></template>
-            </template>
-          </span>
-          <span
-            v-else-if="!!field.options.labelColor"
-            slot="label"
-            :style="{ color: field.options.labelColor }"
-          >
-            {{ label }}
-          </span>
-          <template v-if="isShowWidget()">
-            <slot></slot>
-          </template>
-          <template
-            v-else-if="
-              field.options.widgetTextFlag === 3 &&
-              field.options.widgetTextLinkConfig
-            "
-          >
-            <div class="ellipsis">
-              <a class="a-link" :class="getWidgetClass()" @click="handleClick">
-                <span>
-                  <i
-                    :class="
-                      field.options.widgetTextLinkConfig.options.prefixIcon
-                    "
-                    v-if="
-                      !!field.options.widgetTextLinkConfig.options.prefixIcon
-                    "
-                  ></i>
-                  <span>{{ getWidgetValue() }}</span>
-                  <i
-                    :class="
-                      field.options.widgetTextLinkConfig.options.suffixIcon
-                    "
-                    v-if="
-                      !!field.options.widgetTextLinkConfig.options.suffixIcon
-                    "
-                  ></i>
-                </span>
-              </a>
-            </div>
-          </template>
-          <template v-else>
-            <span>{{ getShowValue() }}</span>
-          </template>
-        </el-form-item>
-      </template>
-    </div>
-    <template v-if="!!this.designer">
-      <div class="field-action" v-if="designer.selectedId === field.id">
-        <i
-          class="el-icon-back"
-          :title="i18nt('designer.hint.selectParentWidget')"
-          @click.stop="selectParentWidget(field)"
-        ></i>
-        <i
-          class="el-icon-top"
-          v-if="!!parentList && parentList.length > 1"
-          :title="i18nt('designer.hint.moveUpWidget')"
-          @click.stop="moveUpWidget(field)"
-        ></i>
-        <i
-          class="el-icon-bottom"
-          v-if="!!parentList && parentList.length > 1"
-          :title="i18nt('designer.hint.moveDownWidget')"
-          @click.stop="moveDownWidget(field)"
-        ></i>
-        <i
-          class="el-icon-delete"
-          :title="i18nt('designer.hint.remove')"
-          @click.stop="removeFieldWidget"
-        ></i>
-      </div>
-
-      <div
-        class="drag-handler background-opacity"
-        v-if="designer.selectedId === field.id"
-      >
-        <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-        <i>{{
-          i18n2t(
-            `designer.widgetLabel.${field.type}`,
-            `extension.widgetLabel.${field.type}`
-          )
-        }}</i>
-        <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../../components/xform/utils/i18n";
-import {
-  getSubFormNameByFieldId,
-  isVabsearchMultiWidget,
-} from "../../../../../components/xform/utils/util";
-import {
-  compareToList,
-  resolveTextMaskFlag,
-} from "../../../../../components/xform/utils/textMaskUtil";
-
-export default {
-  name: "form-item-wrapper",
-  mixins: [i18n],
-  props: {
-    field: Object,
-    designer: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-
-    designState: {
-      type: Boolean,
-      default: false,
-    },
-    subFormRowIndex: {
-      /* 子表单组件行索引，从0开始计数 */ type: Number,
-      default: -1,
-    },
-    subFormColIndex: {
-      /* 子表单组件列索引，从0开始计数 */ type: Number,
-      default: -1,
-    },
-    subFormRowId: {
-      /* 子表单组件行Id，唯一id且不可变 */ type: String,
-      default: "",
-    },
-
-    rules: Array,
-  },
-  inject: [
-    "getFormConfig",
-    "getSubFormFieldFlag",
-    "getSubFormName",
-    "tableParam",
-    "formItemProp",
-    "getObjectFieldFlag",
-    "getObjectName",
-  ],
-  data() {
-    return {
-      encryptFormula: null,
-    };
-  },
-  computed: {
-    formConfig: function () {
-      return this.getFormConfig();
-    },
-    selected() {
-      return !!this.designer && this.field.id === this.designer.selectedId;
-    },
-
-    label() {
-      if (this.shouldHideFieldLabel()) {
-        return "";
-      }
-      return this.getI18nLabel(this.field.options.label);
-      // let label = this.field.options.label
-      // return label ? this.$t2(label) : label;
-    },
-
-    labelWidth() {
-      if (this.shouldHideFieldLabel()) {
-        return (!!this.designState ? 5 : 0) + "px"; //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
-      }
-
-      if (!!this.field.options.labelWidth) {
-        return this.field.options.labelWidth + "px !important";
-      }
-
-      if (!!this.designer) {
-        return this.designer.formConfig.labelWidth + "px";
-      } else {
-        return this.formConfig.labelWidth + "px";
-      }
-    },
-
-    labelAlign() {
-      if (!this?.field?.options?.labelAlign) {
-        return "";
-      }
-      if (!!this.field.options.labelAlign) {
-        return this.field.options.labelAlign;
-      }
-
-      if (!!this.designer) {
-        return this.designer.formConfig.labelAlign || "label-left-align";
-      } else {
-        return this.formConfig.labelAlign || "label-left-align";
-      }
-    },
-
-    customClass() {
-      return !!this.field.options.customClass
-        ? this.field.options.customClass.join(" ")
-        : "";
-    },
-
-    subFormName() {
-      return !!this.parentWidget ? this.parentWidget.options.name : "";
-    },
-
-    subFormItemFlag() {
-      return (
-        this.isSubFormItem() ||
-        (!!this.parentWidget ? this.parentWidget.type === "sub-form" : false)
-      );
-    },
-  },
-  created() {
-    //
-    this.initShowType();
-  },
-  methods: {
-    shouldHideFieldLabel() {
-      if (!!this.field.options.labelHidden) {
-        return true;
-      }
-      // 仅 VXE 数据表格列内字段隐藏标签（表头已展示列名）；table2/table 等仍显示标签
-      return this.isDataTableColumnItem();
-    },
-    isDataTableColumnItem() {
-      return !!this.tableParam?.$table?.$parent?.$parent;
-    },
-    isSubFormItem() {
-      return !!this.tableParam;
-    },
-    selectField(field) {
-      if (!!this.designer) {
-        this.designer.setSelected(field);
-        this.designer.emitEvent("field-selected", this.parentWidget); //发送选中组件的父组件对象
-      }
-    },
-
-    selectParentWidget() {
-      if (this.parentWidget) {
-        this.designer.setSelected(this.parentWidget);
-      } else {
-        this.designer.clearSelected();
-      }
-    },
-
-    moveUpWidget() {
-      this.designer.moveUpWidget(this.parentList, this.indexOfParentList);
-      this.designer.emitHistoryChange();
-    },
-
-    moveDownWidget() {
-      this.designer.moveDownWidget(this.parentList, this.indexOfParentList);
-      this.designer.emitHistoryChange();
-    },
-
-    removeFieldWidget() {
-      if (!!this.parentList) {
-        const selectedWidgetName = this.designer.selectedWidgetName;
-        let selectedId = this.designer.selectedId;
-        let nextSelected = null;
-        if (this.parentList.length === 1) {
-          if (!!this.parentWidget) {
-            nextSelected = this.parentWidget;
-          }
-        } else if (this.parentList.length === 1 + this.indexOfParentList) {
-          nextSelected = this.parentList[this.indexOfParentList - 1];
-        } else {
-          nextSelected = this.parentList[this.indexOfParentList + 1];
-        }
-
-        this.$nextTick(() => {
-          const l = getSubFormNameByFieldId(
-            this.designer.widgetList,
-            selectedId
-          );
-          this.parentList.splice(this.indexOfParentList, 1);
-          //if (!!nextSelected) {
-          this.designer.setSelected(nextSelected);
-          //}
-          this.designer.formWidget.deleteWidgetRef(selectedWidgetName, l);
-          this.designer.emitHistoryChange();
-          this.designer.emitEvent("canvas-remove-field", selectedWidgetName);
-        });
-      }
-    },
-    getRules() {
-      return this.rules;
-    },
-    getPropName() {
-      if (this.formItemProp === "false") {
-        return null;
-      }
-      // if (this.formItemProp) {
-      //   return this.formItemProp;
-      // }
-      if (this.tableParam && !this.tableParam.$table?.$parent?.$parent) {
-        if (this.formItemProp) {
-          return this.formItemProp;
-        }
-        return null;
-      }
-      if (this.tableParam && !!this.tableParam.$table?.$parent?.$parent) {
-        return this.getColumnProp(this.field, this.tableParam);
-      }
-      let o = this.field.options.name;
-      let propName =
-        ((o =
-          (this.field.options.keyNameEnabled && this.field.options.keyName) ||
-          o),
-        this.subFormItemFlag && !this.designState
-          ? this.subFormName + "." + this.subFormRowIndex + "." + o
-          : this.getObjectFieldFlag() && !this.designState
-          ? this.getObjectName() + "." + o
-          : o);
-
-      return propName;
-    },
-    getFieldKeyName(widget) {
-      let o = widget.options.name;
-      return (widget.options.keyNameEnabled && widget.options.keyName) || o;
-    },
-    isVabsearchFlagWidget(widget) {
-      let type = widget?.type;
-      return (
-        type === "vabsearch" ||
-        type === "singerSearch" ||
-        type === "multiSearch"
-      );
-    },
-    getColumnProp(rowWidget, obj) {
-      let required = rowWidget.options.required || false;
-
-      let tableRef = obj.$table.$parent.$parent;
-      let tableWidget = tableRef.widget;
-      let fieldKeyName = this.getFieldKeyName(tableWidget);
-      let property = this.getFieldKeyName(rowWidget);
-      if (
-        this.isVabsearchFlagWidget(rowWidget) &&
-        !isVabsearchMultiWidget(rowWidget)
-      ) {
-        property = rowWidget.options.vabSearchName || property;
-      }
-      let rowIndex = Math.max(obj.rowIndex, 0);
-
-      let isTreeTable = tableWidget.options.isTreeTable || false;
-      if (isTreeTable) {
-        rowIndex = tableRef
-          .getValue()
-          .findIndex((item) => item._X_ROW_KEY === obj.row._X_ROW_KEY);
-        if (rowIndex < 0) {
-          return "false";
-        }
-      }
-
-      let propName = fieldKeyName + "." + rowIndex + "." + property;
-      if (!required) {
-        propName = "false";
-      }
-      return propName;
-    },
-    getI18nLabel(label, path, param) {
-      return !this.designState && label ? this.$t2(label, path, param) : label;
-    },
-    getProcessText(text, pattern) {
-      if (pattern == "" || pattern === null || pattern === undefined) {
-        return text;
-      }
-
-      let result = "";
-
-      // 处理固定模式
-      if (pattern === "-") {
-        result = "-";
-      } else if (pattern === "*") {
-        result = "*****";
-      }
-      // 处理自定义模式
-      else if (pattern.includes("*")) {
-        text = text ?? "";
-        const parts = pattern.split("*");
-
-        // 处理 A*B 模式
-        if (parts.length === 2 && parts[0] && parts[1]) {
-          const a = parseInt(parts[0]);
-          const b = parseInt(parts[1]);
-
-          if (!isNaN(a) && !isNaN(b) && a >= 0 && b >= 0) {
-            if (text.length >= a + b) {
-              const prefix = text.substring(0, a);
-              const suffix = text.substring(text.length - b);
-              const stars = "*".repeat(text.length - a - b);
-              result = prefix + stars + suffix;
-            } else {
-              result = "*****";
-            }
-          } else {
-            // result = '无效模式：A和B必须是数字';
-            result = text;
-          }
-        }
-        // 处理 A* 模式
-        else if (parts.length === 2 && parts[0] && !parts[1]) {
-          const a = parseInt(parts[0]);
-
-          if (!isNaN(a) && a >= 0) {
-            if (text.length >= a) {
-              const prefix = text.substring(0, a);
-              const stars = "*".repeat(text.length - a);
-              result = prefix + stars;
-            } else {
-              result = "*****";
-            }
-          } else {
-            // result = '无效模式：A必须是数字';
-            result = text;
-          }
-        }
-        // 处理 *B 模式
-        else if (parts.length === 2 && !parts[0] && parts[1]) {
-          const b = parseInt(parts[1]);
-
-          if (!isNaN(b) && b >= 0) {
-            if (text.length >= b) {
-              const suffix = text.substring(text.length - b);
-              const stars = "*".repeat(text.length - b);
-              result = stars + suffix;
-            } else {
-              result = "*****";
-            }
-          } else {
-            // result = '无效模式：B必须是数字';
-            result = text;
-          }
-        }
-        // 处理无效模式
-        else {
-          result = "*****";
-        }
-      }
-      // 处理其他无效模式
-      else {
-        result = "*****";
-      }
-
-      return result;
-    },
-    initShowType() {
-      if (!!this.designer) return;
-      let that = this.$parent;
-      let formRef = that.getFormRef ? that.getFormRef() : that;
-
-      if (!formRef) return;
-      //详情页，新增页面不加密
-      let fJson = formRef.formJson;
-      let formConfig = fJson.formConfig;
-      if (formConfig.isLoadEntity && !formRef.dataId) return;
-
-      let userRoleDTOs = formRef.userRoleDTOs || [];
-      // 判定逻辑与导出侧（数据表格按列剔除）共用 textMaskUtil，
-      // 否则会出现界面打码、导出放行两套结论
-      let { masked, encryptFormula } = resolveTextMaskFlag(this.field.options, {
-        bdService: formRef.bdService,
-        companyCode: this.$store.getters.companyCode,
-        roleCodeList: userRoleDTOs.map((item) => item.roleCode),
-      });
-
-      this.encryptFormula = encryptFormula;
-      //0 原本组件，1明文文本，2密文文本
-      this.field.options.widgetTextFlag = masked ? 2 : 0;
-    },
-    /* 实现已移入 textMaskUtil，此处保留方法名供下游调用（同名的是导入的模块函数） */
-    compareToList(list1, list2) {
-      return compareToList(list1, list2);
-    },
-    isShowWidget() {
-      let widgetTextFlag = this.field.options.widgetTextFlag;
-      return (
-        widgetTextFlag === undefined ||
-        widgetTextFlag === null ||
-        widgetTextFlag === 0
-      );
-    },
-    getShowValue() {
-      let widgetTextFlag = this.field.options.widgetTextFlag;
-      let fieldModel = this.$parent.fieldModel;
-      if (this.$parent.fieldModelLabel)
-        fieldModel = this.$parent.fieldModelLabel();
-      let showValue = fieldModel;
-      if (widgetTextFlag == 2) {
-        showValue = this.getProcessText(showValue, this.encryptFormula);
-      }
-
-      return showValue;
-    },
-    getWidgetClass() {
-      let list = [];
-      let optionModel = this.field.options.widgetTextLinkConfig?.options || {};
-      if (optionModel.colorClass) list.push(optionModel.colorClass);
-      if (optionModel.underline) list.push("underLine");
-      if (this.field.options.disabled) list.push("is-disabled");
-      return list;
-    },
-    handleClick(event) {
-      if (this.field.options.disabled) return;
-      this.$parent.handleButtonWidgetClick(event, true);
-      if (
-        !this.designState &&
-        this.field.options.widgetTextLinkConfig?.options.href
-      ) {
-        window.open(this.field.options.widgetTextLinkConfig?.options.href);
-      }
-    },
-    getWidgetValue() {
-      let fieldModel = this.$parent.fieldModel;
-      if (this.$parent.fieldModelLabel)
-        fieldModel = this.$parent.fieldModelLabel();
-      return fieldModel;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "~@/styles/global.scss";
-
-.design-time-bottom-margin {
-  margin-bottom: 5px;
-}
-
-.field-wrapper {
-  position: relative;
-
-  .field-action {
-    position: absolute;
-    //bottom: -24px;
-    bottom: 0;
-    right: -1px;
-    height: 22px;
-    line-height: 22px;
-    background: $--color-primary;
-    z-index: 9;
-
-    i {
-      font-size: 14px;
-      color: #fff;
-      margin: 0 5px;
-      cursor: pointer;
-    }
-  }
-
-  .drag-handler {
-    position: absolute;
-    top: 0;
-    //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
-    left: -1px;
-    height: 20px;
-    line-height: 18px;
-    //background: $--color-primary;
-    z-index: 9;
-
-    i {
-      font-size: 12px;
-      font-style: normal;
-      color: #fff;
-      margin: 4px;
-      cursor: move;
-    }
-
-    &:hover {
-      //opacity: 1;
-      background: $--color-primary;
-    }
-  }
-}
-
-.el-form-item {
-  //margin-bottom: 0 !important;
-  //margin-bottom: 6px;
-
-  //margin-top: 2px;
-  position: relative;
-
-  ::v-deep .el-form-item__label {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  ::v-deep .el-form-item__content {
-    //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
-  }
-
-  span.custom-label i {
-    margin: 0 3px;
-  }
-
-  /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
-  ::v-deep .hide-spin-button input::-webkit-outer-spin-button,
-  ::v-deep .hide-spin-button input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-
-  /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
-  ::v-deep .hide-spin-button input[type="number"] {
-    -moz-appearance: textfield;
-  }
-}
-
-.required ::v-deep .el-form-item__label::before {
-  content: "*";
-  color: #f56c6c;
-  margin-right: 4px;
-}
-
-.static-content-item {
-  min-height: 20px;
-  display: flex; /* 垂直居中 */
-  align-items: center; /* 垂直居中 */
-
-  ::v-deep .el-divider--horizontal {
-    margin: 0;
-  }
-}
-
-.el-form-item.selected,
-.static-content-item.selected {
-  outline: 2px solid $--color-primary;
-}
-
-::v-deep .label-left-align .el-form-item__label {
-  text-align: left;
-}
-
-::v-deep .label-center-align .el-form-item__label {
-  text-align: center;
-}
-
-::v-deep .label-right-align .el-form-item__label {
-  text-align: right;
-}
-
-.a-link.is-disabled {
-  cursor: no-drop;
-}
-</style>
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div
+    class="field-wrapper"
+    :class="{ 'design-time-bottom-margin': !!this.designer }"
+    v-show="!field.options.hidden || designState === true"
+  >
+    <div>
+      <template v-if="formItemProp === 'false'">
+        <template v-if="!field.options.hidden">
+          <template v-if="isShowWidget()">
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <slot></slot>
+            </compareView>
+            <slot v-else></slot>
+          </template>
+          <template
+            v-else-if="
+              field.options.widgetTextFlag === 3 &&
+              field.options.widgetTextLinkConfig
+            "
+          >
+            <div class="ellipsis">
+              <a
+                class="a-link"
+                :class="getWidgetClass()"
+                @click.native="handleClick"
+              >
+                <span>
+                  <i
+                    :class="
+                      field.options.widgetTextLinkConfig.options.prefixIcon
+                    "
+                    v-if="
+                      !!field.options.widgetTextLinkConfig.options.prefixIcon
+                    "
+                  ></i>
+                  <span>{{ getWidgetValue() }}</span>
+                  <i
+                    :class="
+                      field.options.widgetTextLinkConfig.options.suffixIcon
+                    "
+                    v-if="
+                      !!field.options.widgetTextLinkConfig.options.suffixIcon
+                    "
+                  ></i>
+                </span>
+              </a>
+            </div>
+          </template>
+          <template v-else>
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <span>{{ getShowValue() }}</span>
+            </compareView>
+            <span v-else>{{ getShowValue() }}</span>
+          </template>
+        </template>
+      </template>
+      <template v-else>
+        <el-form-item
+          v-if="
+            !!field.formItemFlag &&
+            (!field.options.hidden || designState === true)
+          "
+          :label="label"
+          :label-width="labelWidth"
+          :rules="getRules()"
+          :prop="getPropName()"
+          :class="[
+            selected ? 'selected' : '',
+            labelAlign,
+            customClass,
+            field.options.required ? 'required' : '',
+          ]"
+          @click.native.stop="selectField(field)"
+        >
+          <span
+            v-if="!!field.options.labelIconClass"
+            slot="label"
+            class="custom-label"
+          >
+            <template v-if="field.options.labelIconPosition === 'front'">
+              <template v-if="!!field.options.labelTooltip">
+                <el-tooltip
+                  :content="field.options.labelTooltip"
+                  effect="dark"
+                  popper-class="label-tooltip-pre-line"
+                >
+                  <i :class="field.options.labelIconClass"></i></el-tooltip
+                ><span :style="{ color: field.options.labelColor }">{{
+                  label
+                }}</span></template
+              >
+              <template v-else>
+                <i :class="field.options.labelIconClass"></i
+                ><span :style="{ color: field.options.labelColor }">{{
+                  label
+                }}</span></template
+              >
+            </template>
+            <template v-else-if="field.options.labelIconPosition === 'rear'">
+              <template v-if="!!field.options.labelTooltip">
+                <span :style="{ color: field.options.labelColor }">{{
+                  label
+                }}</span
+                ><el-tooltip
+                  :content="field.options.labelTooltip"
+                  effect="dark"
+                  popper-class="label-tooltip-pre-line"
+                >
+                  <i :class="field.options.labelIconClass"></i></el-tooltip
+              ></template>
+              <template v-else>
+                <span :style="{ color: field.options.labelColor }">{{
+                  label
+                }}</span
+                ><i :class="field.options.labelIconClass"></i
+              ></template>
+            </template>
+          </span>
+          <span
+            v-else-if="!!field.options.labelColor"
+            slot="label"
+            :style="{ color: field.options.labelColor }"
+          >
+            {{ label }}
+          </span>
+          <template v-if="isShowWidget()">
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <slot></slot>
+            </compareView>
+            <slot v-else></slot>
+          </template>
+          <template
+            v-else-if="
+              field.options.widgetTextFlag === 3 &&
+              field.options.widgetTextLinkConfig
+            "
+          >
+            <div class="ellipsis">
+              <a class="a-link" :class="getWidgetClass()" @click="handleClick">
+                <span>
+                  <i
+                    :class="
+                      field.options.widgetTextLinkConfig.options.prefixIcon
+                    "
+                    v-if="
+                      !!field.options.widgetTextLinkConfig.options.prefixIcon
+                    "
+                  ></i>
+                  <span>{{ getWidgetValue() }}</span>
+                  <i
+                    :class="
+                      field.options.widgetTextLinkConfig.options.suffixIcon
+                    "
+                    v-if="
+                      !!field.options.widgetTextLinkConfig.options.suffixIcon
+                    "
+                  ></i>
+                </span>
+              </a>
+            </div>
+          </template>
+          <template v-else>
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <span>{{ getShowValue() }}</span>
+            </compareView>
+            <span v-else>{{ getShowValue() }}</span>
+          </template>
+        </el-form-item>
+      </template>
+    </div>
+    <template v-if="!!this.designer">
+      <div class="field-action" v-if="designer.selectedId === field.id">
+        <i
+          class="el-icon-back"
+          :title="i18nt('designer.hint.selectParentWidget')"
+          @click.stop="selectParentWidget(field)"
+        ></i>
+        <i
+          class="el-icon-top"
+          v-if="!!parentList && parentList.length > 1"
+          :title="i18nt('designer.hint.moveUpWidget')"
+          @click.stop="moveUpWidget(field)"
+        ></i>
+        <i
+          class="el-icon-bottom"
+          v-if="!!parentList && parentList.length > 1"
+          :title="i18nt('designer.hint.moveDownWidget')"
+          @click.stop="moveDownWidget(field)"
+        ></i>
+        <i
+          class="el-icon-delete"
+          :title="i18nt('designer.hint.remove')"
+          @click.stop="removeFieldWidget"
+        ></i>
+      </div>
+
+      <div
+        class="drag-handler background-opacity"
+        v-if="designer.selectedId === field.id"
+      >
+        <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
+        <i>{{
+          i18n2t(
+            `designer.widgetLabel.${field.type}`,
+            `extension.widgetLabel.${field.type}`
+          )
+        }}</i>
+        <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../components/xform/utils/i18n";
+import {
+  getSubFormNameByFieldId,
+  isVabsearchMultiWidget,
+} from "../../../../../components/xform/utils/util";
+import compareView from "../../../../../components/xform/form-render/compareView.vue";
+import {
+  compareToList,
+  resolveTextMaskFlag,
+} from "../../../../../components/xform/utils/textMaskUtil";
+
+export default {
+  name: "form-item-wrapper",
+  mixins: [i18n],
+  components: { compareView },
+  props: {
+    field: Object,
+    designer: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+
+    designState: {
+      type: Boolean,
+      default: false,
+    },
+    subFormRowIndex: {
+      /* 子表单组件行索引，从0开始计数 */ type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      /* 子表单组件列索引，从0开始计数 */ type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      /* 子表单组件行Id，唯一id且不可变 */ type: String,
+      default: "",
+    },
+
+    rules: Array,
+  },
+  inject: {
+    getFormConfig: { default: () => () => ({}) },
+    getSubFormFieldFlag: { default: () => () => false },
+    getSubFormName: { default: () => () => "" },
+    tableParam: { default: null },
+    formItemProp: { default: null },
+    getObjectFieldFlag: { default: () => () => false },
+    getObjectName: { default: () => () => "" },
+    // 表单对比：非对比渲染场景(如设计器)给默认值，避免注入警告
+    getIsCompare: { default: () => () => false },
+    getOldFormData: { default: () => () => ({}) },
+    getCompareRowKey: { default: () => () => "uuid" },
+    getCompareExcludeTypes: { default: () => () => [] },
+    isCompareExcludeField: { default: () => () => false },
+  },
+  data() {
+    return {
+      encryptFormula: null,
+    };
+  },
+  computed: {
+    formConfig: function () {
+      return this.getFormConfig();
+    },
+    selected() {
+      return !!this.designer && this.field.id === this.designer.selectedId;
+    },
+
+    label() {
+      if (this.shouldHideFieldLabel()) {
+        return "";
+      }
+      return this.getI18nLabel(this.field.options.label);
+      // let label = this.field.options.label
+      // return label ? this.$t2(label) : label;
+    },
+
+    labelWidth() {
+      if (this.shouldHideFieldLabel()) {
+        return (!!this.designState ? 5 : 0) + "px"; //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
+      }
+
+      if (!!this.field.options.labelWidth) {
+        return this.field.options.labelWidth + "px !important";
+      }
+
+      if (!!this.designer) {
+        return this.designer.formConfig.labelWidth + "px";
+      } else { 
+        return this.formConfig.labelWidth + "px";
+      }
+    },
+
+    labelAlign() {
+      if (!this?.field?.options?.labelAlign) {
+        return "";
+      }
+      if (!!this.field.options.labelAlign) {
+        return this.field.options.labelAlign;
+      }
+
+      if (!!this.designer) {
+        return this.designer.formConfig.labelAlign || "label-left-align";
+      } else {
+        return this.formConfig.labelAlign || "label-left-align";
+      }
+    },
+
+    customClass() {
+      return !!this.field.options.customClass
+        ? this.field.options.customClass.join(" ")
+        : "";
+    },
+
+    subFormName() {
+      return !!this.parentWidget ? this.parentWidget.options.name : "";
+    },
+
+    subFormItemFlag() {
+      return (
+        this.isSubFormItem() ||
+        (!!this.parentWidget ? this.parentWidget.type === "sub-form" : false)
+      );
+    },
+
+    // ===================== 表单对比 =====================
+    // 所在明细表的属性名(keyName)；主表字段为空。用于按表取黑/白名单
+    compareSubName() {
+      if (!this.tableParam || !this.tableParam.row) return "";
+      let opts = this.parentWidget && this.parentWidget.options;
+      if (!opts) return "";
+      return (opts.keyNameEnabled && opts.keyName) || opts.name || "";
+    },
+    compareExcluded() {
+      // 按类型排除。附件类天然不参与对比，但开了「值存为URL」的附件字段存的是主表
+      // 普通列上的 URL 字符串，与普通字段无异，应照常参与对比
+      let types = this.getCompareExcludeTypes() || [];
+      if (
+        types.indexOf(this.field.type) !== -1 &&
+        !this.field.options.urlValueEnabled
+      ) {
+        return true;
+      }
+      // 按字段名排除（系统字段 + 主表黑白名单 + 所在明细表的黑白名单）
+      let fieldKeyName =
+        (this.field.options.keyNameEnabled && this.field.options.keyName) ||
+        this.field.options.name;
+      return !!this.isCompareExcludeField(fieldKeyName, this.compareSubName);
+    },
+    isCompareOn() {
+      return !this.designer && !this.compareExcluded && !!this.getIsCompare();
+    },
+    // 原单的行/主表对象（供关联类组件取伴随 label 字段）
+    compareOldRow() {
+      // 表格/子表单行内字段：取该行 hData 快照
+      if (this.tableParam && this.tableParam.row) {
+        return this.tableParam.row.hData || null;
+      }
+      // 主表字段
+      return this.getOldFormData() || null;
+    },
+    compareOldRaw() {
+      let property =
+        (this.field.options.keyNameEnabled && this.field.options.keyName) ||
+        this.field.options.name;
+      let row = this.compareOldRow;
+      return row ? row[property] : null;
+    },
+    compareNewRaw() {
+      return this.$parent ? this.$parent.fieldModel : null;
+    },
+    // 表格新增行（无原单匹配，hData 为空或缺失）：整行标识，不逐单元格显示感叹号
+    compareRowIsNew() {
+      if (!this.tableParam || !this.tableParam.row) return false;
+      let hData = this.tableParam.row.hData;
+      return !hData || Object.keys(hData).length === 0;
+    },
+    compareIsDiff() {
+      if (!this.isCompareOn) return false;
+      if (this.compareRowIsNew) return false;
+      let eq =
+        this.$parent && this.$parent.compareEquals
+          ? this.$parent.compareEquals(this.compareOldRaw, this.compareNewRaw)
+          : this.compareOldRaw === this.compareNewRaw;
+      return !eq;
+    },
+    compareOldDisplay() {
+      // 优先用 resolveCompareOldDisplay（可从 oldRow 取关联类的伴随 label 字段）
+      if (this.$parent && this.$parent.resolveCompareOldDisplay) {
+        return this.$parent.resolveCompareOldDisplay(this.compareOldRow);
+      }
+      if (this.$parent && this.$parent.resolveDisplayValue) {
+        return this.$parent.resolveDisplayValue(this.compareOldRaw);
+      }
+      return this.compareOldRaw;
+    },
+  },
+  created() {
+    //
+    this.initShowType();
+  },
+  methods: {
+    shouldHideFieldLabel() {
+      if (!!this.field.options.labelHidden) {
+        return true;
+      }
+      // 仅 VXE 数据表格列内字段隐藏标签（表头已展示列名）；table2/table 等仍显示标签
+      return this.isDataTableColumnItem();
+    },
+    isDataTableColumnItem() {
+      return !!this.tableParam?.$table?.$parent?.$parent;
+    },
+    isSubFormItem() {
+      return !!this.tableParam;
+    },
+    selectField(field) {
+      if (!!this.designer) {
+        this.designer.setSelected(field);
+        this.designer.emitEvent("field-selected", this.parentWidget); //发送选中组件的父组件对象
+      }
+    },
+
+    selectParentWidget() {
+      if (this.parentWidget) {
+        this.designer.setSelected(this.parentWidget);
+      } else {
+        this.designer.clearSelected();
+      }
+    },
+
+    moveUpWidget() {
+      this.designer.moveUpWidget(this.parentList, this.indexOfParentList);
+      this.designer.emitHistoryChange();
+    },
+
+    moveDownWidget() {
+      this.designer.moveDownWidget(this.parentList, this.indexOfParentList);
+      this.designer.emitHistoryChange();
+    },
+
+    removeFieldWidget() {
+      if (!!this.parentList) {
+        const selectedWidgetName = this.designer.selectedWidgetName;
+        let selectedId = this.designer.selectedId;
+        let nextSelected = null;
+        if (this.parentList.length === 1) {
+          if (!!this.parentWidget) {
+            nextSelected = this.parentWidget;
+          }
+        } else if (this.parentList.length === 1 + this.indexOfParentList) {
+          nextSelected = this.parentList[this.indexOfParentList - 1];
+        } else {
+          nextSelected = this.parentList[this.indexOfParentList + 1];
+        }
+
+        this.$nextTick(() => {
+          const l = getSubFormNameByFieldId(
+            this.designer.widgetList,
+            selectedId
+          );
+          this.parentList.splice(this.indexOfParentList, 1);
+          //if (!!nextSelected) {
+          this.designer.setSelected(nextSelected);
+          //}
+          this.designer.formWidget.deleteWidgetRef(selectedWidgetName, l);
+          this.designer.emitHistoryChange();
+          this.designer.emitEvent("canvas-remove-field", selectedWidgetName);
+        });
+      }
+    },
+    getRules() {
+      return this.rules;
+    },
+    getPropName() {
+      if (this.formItemProp === "false") {
+        return null;
+      }
+      // if (this.formItemProp) {
+      //   return this.formItemProp;
+      // }
+      if (this.tableParam && !this.tableParam.$table?.$parent?.$parent) {
+        if (this.formItemProp) {
+          return this.formItemProp;
+        }
+        return null;
+      }
+      if (this.tableParam && !!this.tableParam.$table?.$parent?.$parent) {
+        return this.getColumnProp(this.field, this.tableParam);
+      }
+      let o = this.field.options.name;
+      let propName =
+        ((o =
+          (this.field.options.keyNameEnabled && this.field.options.keyName) ||
+          o),
+        this.subFormItemFlag && !this.designState
+          ? this.subFormName + "." + this.subFormRowIndex + "." + o
+          : this.getObjectFieldFlag() && !this.designState
+          ? this.getObjectName() + "." + o
+          : o);
+
+      return propName;
+    },
+    getFieldKeyName(widget) {
+      let o = widget.options.name;
+      return (widget.options.keyNameEnabled && widget.options.keyName) || o;
+    },
+    isVabsearchFlagWidget(widget) {
+      let type = widget?.type;
+      return (
+        type === "vabsearch" ||
+        type === "singerSearch" ||
+        type === "multiSearch"
+      );
+    },
+    getColumnProp(rowWidget, obj) {
+      let required = rowWidget.options.required || false;
+
+      let tableRef = obj.$table.$parent.$parent;
+      let tableWidget = tableRef.widget;
+      let fieldKeyName = this.getFieldKeyName(tableWidget);
+      let property = this.getFieldKeyName(rowWidget);
+      if (
+        this.isVabsearchFlagWidget(rowWidget) &&
+        !isVabsearchMultiWidget(rowWidget)
+      ) {
+        property = rowWidget.options.vabSearchName || property;
+      }
+      let rowIndex = Math.max(obj.rowIndex, 0);
+
+      let isTreeTable = tableWidget.options.isTreeTable || false;
+      if (isTreeTable) {
+        rowIndex = tableRef
+          .getValue()
+          .findIndex((item) => item._X_ROW_KEY === obj.row._X_ROW_KEY);
+        if (rowIndex < 0) {
+          return "false";
+        }
+      }
+
+      let propName = fieldKeyName + "." + rowIndex + "." + property;
+      if (!required) {
+        propName = "false";
+      }
+      return propName;
+    },
+    getI18nLabel(label, path, param) {
+      return !this.designState && label ? this.$t2(label, path, param) : label;
+    },
+    getProcessText(text, pattern) {
+      if (pattern == "" || pattern === null || pattern === undefined) {
+        return text;
+      }
+
+      let result = "";
+
+      // 处理固定模式
+      if (pattern === "-") {
+        result = "-";
+      } else if (pattern === "*") {
+        result = "*****";
+      }
+      // 处理自定义模式
+      else if (pattern.includes("*")) {
+        text = text ?? "";
+        const parts = pattern.split("*");
+
+        // 处理 A*B 模式
+        if (parts.length === 2 && parts[0] && parts[1]) {
+          const a = parseInt(parts[0]);
+          const b = parseInt(parts[1]);
+
+          if (!isNaN(a) && !isNaN(b) && a >= 0 && b >= 0) {
+            if (text.length >= a + b) {
+              const prefix = text.substring(0, a);
+              const suffix = text.substring(text.length - b);
+              const stars = "*".repeat(text.length - a - b);
+              result = prefix + stars + suffix;
+            } else {
+              result = "*****";
+            }
+          } else {
+            // result = '无效模式：A和B必须是数字';
+            result = text;
+          }
+        }
+        // 处理 A* 模式
+        else if (parts.length === 2 && parts[0] && !parts[1]) {
+          const a = parseInt(parts[0]);
+
+          if (!isNaN(a) && a >= 0) {
+            if (text.length >= a) {
+              const prefix = text.substring(0, a);
+              const stars = "*".repeat(text.length - a);
+              result = prefix + stars;
+            } else {
+              result = "*****";
+            }
+          } else {
+            // result = '无效模式：A必须是数字';
+            result = text;
+          }
+        }
+        // 处理 *B 模式
+        else if (parts.length === 2 && !parts[0] && parts[1]) {
+          const b = parseInt(parts[1]);
+
+          if (!isNaN(b) && b >= 0) {
+            if (text.length >= b) {
+              const suffix = text.substring(text.length - b);
+              const stars = "*".repeat(text.length - b);
+              result = stars + suffix;
+            } else {
+              result = "*****";
+            }
+          } else {
+            // result = '无效模式：B必须是数字';
+            result = text;
+          }
+        }
+        // 处理无效模式
+        else {
+          result = "*****";
+        }
+      }
+      // 处理其他无效模式
+      else {
+        result = "*****";
+      }
+
+      return result;
+    },
+    initShowType() {
+      if (!!this.designer) return;
+      let that = this.$parent;
+      let formRef = that.getFormRef ? that.getFormRef() : that;
+
+      if (!formRef) return;
+      //详情页，新增页面不加密
+      let fJson = formRef.formJson;
+      let formConfig = fJson.formConfig;
+      if (formConfig.isLoadEntity && !formRef.dataId) return;
+
+      let userRoleDTOs = formRef.userRoleDTOs || [];
+      // 判定逻辑与导出侧（数据表格按列剔除）共用 textMaskUtil，
+      // 否则会出现界面打码、导出放行两套结论
+      let { masked, encryptFormula } = resolveTextMaskFlag(this.field.options, {
+        bdService: formRef.bdService,
+        companyCode: this.$store.getters.companyCode,
+        roleCodeList: userRoleDTOs.map((item) => item.roleCode),
+      });
+
+      this.encryptFormula = encryptFormula;
+      //0 原本组件，1明文文本，2密文文本
+      this.field.options.widgetTextFlag = masked ? 2 : 0;
+    },
+    /* 实现已移入 textMaskUtil，此处保留方法名供下游调用（同名的是导入的模块函数） */
+    compareToList(list1, list2) {
+      return compareToList(list1, list2);
+    },
+    isShowWidget() {
+      let widgetTextFlag = this.field.options.widgetTextFlag;
+      return (
+        widgetTextFlag === undefined ||
+        widgetTextFlag === null ||
+        widgetTextFlag === 0
+      );
+    },
+    getShowValue() {
+      let widgetTextFlag = this.field.options.widgetTextFlag;
+      let fieldModel = this.$parent.fieldModel;
+      if (this.$parent.fieldModelLabel)
+        fieldModel = this.$parent.fieldModelLabel();
+      let showValue = fieldModel;
+      if (widgetTextFlag == 2) {
+        showValue = this.getProcessText(showValue, this.encryptFormula);
+      }
+
+      return showValue;
+    },
+    getWidgetClass() {
+      let list = [];
+      let optionModel = this.field.options.widgetTextLinkConfig?.options || {};
+      if (optionModel.colorClass) list.push(optionModel.colorClass);
+      if (optionModel.underline) list.push("underLine");
+      if (this.field.options.disabled) list.push("is-disabled");
+      return list;
+    },
+    handleClick(event) {
+      if (this.field.options.disabled) return;
+      this.$parent.handleButtonWidgetClick(event, true);
+      if (
+        !this.designState &&
+        this.field.options.widgetTextLinkConfig?.options.href
+      ) {
+        window.open(this.field.options.widgetTextLinkConfig?.options.href);
+      }
+    },
+    getWidgetValue() {
+      let fieldModel = this.$parent.fieldModel;
+      if (this.$parent.fieldModelLabel)
+        fieldModel = this.$parent.fieldModelLabel();
+      return fieldModel;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.design-time-bottom-margin {
+  margin-bottom: 5px;
+}
+
+.field-wrapper {
+  position: relative;
+
+  .field-action {
+    position: absolute;
+    //bottom: -24px;
+    bottom: 0;
+    right: -1px;
+    height: 22px;
+    line-height: 22px;
+    background: $--color-primary;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+
+  .drag-handler {
+    position: absolute;
+    top: 0;
+    //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
+    left: -1px;
+    height: 20px;
+    line-height: 18px;
+    //background: $--color-primary;
+    z-index: 9;
+
+    i {
+      font-size: 12px;
+      font-style: normal;
+      color: #fff;
+      margin: 4px;
+      cursor: move;
+    }
+
+    &:hover {
+      //opacity: 1;
+      background: $--color-primary;
+    }
+  }
+}
+
+.el-form-item {
+  //margin-bottom: 0 !important;
+  //margin-bottom: 6px;
+
+  //margin-top: 2px;
+  position: relative;
+
+  ::v-deep .el-form-item__label {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  ::v-deep .el-form-item__content {
+    //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
+  }
+
+  span.custom-label i {
+    margin: 0 3px;
+  }
+
+  /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
+  ::v-deep .hide-spin-button input::-webkit-outer-spin-button,
+  ::v-deep .hide-spin-button input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+  }
+
+  /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
+  ::v-deep .hide-spin-button input[type="number"] {
+    -moz-appearance: textfield;
+  }
+}
+
+.required ::v-deep .el-form-item__label::before {
+  content: "*";
+  color: #f56c6c;
+  margin-right: 4px;
+}
+
+.static-content-item {
+  min-height: 20px;
+  display: flex; /* 垂直居中 */
+  align-items: center; /* 垂直居中 */
+
+  ::v-deep .el-divider--horizontal {
+    margin: 0;
+  }
+}
+
+.el-form-item.selected,
+.static-content-item.selected {
+  outline: 2px solid $--color-primary;
+}
+
+::v-deep .label-left-align .el-form-item__label {
+  text-align: left;
+}
+
+::v-deep .label-center-align .el-form-item__label {
+  text-align: center;
+}
+
+::v-deep .label-right-align .el-form-item__label {
+  text-align: right;
+}
+
+.a-link.is-disabled {
+  cursor: no-drop;
+}
+</style>