cloud-web-corejs 1.0.54-dev.8 → 1.0.54-dev.800

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

@@ -9,58 +9,237 @@
 -->
 
 <template>
-  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
+  <div
+    class="field-wrapper"
+    :class="{ 'design-time-bottom-margin': !!this.designer }"
+    v-show="!field.options.hidden || designState === true"
+  >
     <div>
-      <template v-if="formItemProp=='false'">
-        <slot></slot>
+      <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 + 'px'"
-                      :title="field.options.labelTooltip"
-                      :rules="rules" :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" :style="{'color':field.options.labelColor}">
+        <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="light">
-                  <i :class="field.options.labelIconClass"></i></el-tooltip>{{ label }}</template>
+                <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>{{ label }}</template>
+                <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">
-                {{ label }}<el-tooltip :content="field.options.labelTooltip" effect="light">
-                <i :class="field.options.labelIconClass"></i></el-tooltip></template>
+                <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>
-                {{ label }}<i :class="field.options.labelIconClass"></i></template>
+                <span :style="{ color: field.options.labelColor }">{{
+                  label
+                }}</span
+                ><i :class="field.options.labelIconClass"></i
+              ></template>
             </template>
           </span>
-          <span v-if="!!field.options.labelColor" slot="label"  :style="{'color':field.options.labelColor}">
+          <span
+            v-else-if="!!field.options.labelColor"
+            slot="label"
+            :style="{ color: field.options.labelColor }"
+          >
             {{ label }}
           </span>
-          <slot></slot>
+          <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>
+        <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">
+      <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>{{
+          i18n2t(
+            `designer.widgetLabel.${field.type}`,
+            `extension.widgetLabel.${field.type}`
+          )
+        }}</i>
         <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
       </div>
     </template>
@@ -69,12 +248,20 @@
 
 <script>
 import i18n from "../../../../../components/xform/utils/i18n";
-import {getSubFormNameByFieldId} from "../../../../../components/xform/utils/util";
-
+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,
@@ -84,127 +271,236 @@ export default {
 
     designState: {
       type: Boolean,
-      default: false
+      default: false,
     },
-    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
-      type: Number,
-      default: -1
+    subFormRowIndex: {
+      /* 子表单组件行索引，从0开始计数 */ type: Number,
+      default: -1,
     },
-    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
-      type: Number,
-      default: -1
+    subFormColIndex: {
+      /* 子表单组件列索引，从0开始计数 */ type: Number,
+      default: -1,
     },
-    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
-      type: String,
-      default: ''
+    subFormRowId: {
+      /* 子表单组件行Id，唯一id且不可变 */ type: String,
+      default: "",
     },
 
     rules: Array,
   },
-  inject: ["getFormConfig", "getSubFormFieldFlag", "getSubFormName", "tableParam", "formItemProp", "getObjectFieldFlag", "getObjectName"],
+  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()
+      return this.getFormConfig();
     },
     selected() {
-      return !!this.designer && this.field.id === this.designer.selectedId
+      return !!this.designer && this.field.id === this.designer.selectedId;
     },
 
     label() {
-      if (!!this.field.options.labelHidden) {
-        return ''
+      if (this.shouldHideFieldLabel()) {
+        return "";
       }
-      return this.getI18nLabel(this.field.options.label)
+      return this.getI18nLabel(this.field.options.label);
       // let label = this.field.options.label
       // return label ? this.$t2(label) : label;
     },
 
     labelWidth() {
-      if (!!this.field.options.labelHidden) {
-        return !!this.designState ? 5 : 0  //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
+      if (this.shouldHideFieldLabel()) {
+        return (!!this.designState ? 5 : 0) + "px"; //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
       }
 
       if (!!this.field.options.labelWidth) {
-        return this.field.options.labelWidth
+        return this.field.options.labelWidth + "px !important";
       }
 
       if (!!this.designer) {
-        return this.designer.formConfig.labelWidth
-      } else {
-        return this.formConfig.labelWidth
+        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
+        return this.field.options.labelAlign;
       }
 
       if (!!this.designer) {
-        return this.designer.formConfig.labelAlign || 'label-left-align'
+        return this.designer.formConfig.labelAlign || "label-left-align";
       } else {
-        return this.formConfig.labelAlign || 'label-left-align'
+        return this.formConfig.labelAlign || "label-left-align";
       }
     },
 
     customClass() {
-      return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
+      return !!this.field.options.customClass
+        ? this.field.options.customClass.join(" ")
+        : "";
     },
 
     subFormName() {
-      return !!this.parentWidget ? this.parentWidget.options.name : ''
+      return !!this.parentWidget ? this.parentWidget.options.name : "";
     },
 
     subFormItemFlag() {
-      return this.isSubFormItem() || (!!this.parentWidget ? this.parentWidget.type === 'sub-form' : false)
+      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)  //发送选中组件的父组件对象
+        this.designer.setSelected(field);
+        this.designer.emitEvent("field-selected", this.parentWidget); //发送选中组件的父组件对象
       }
     },
 
     selectParentWidget() {
       if (this.parentWidget) {
-        this.designer.setSelected(this.parentWidget)
+        this.designer.setSelected(this.parentWidget);
       } else {
-        this.designer.clearSelected()
+        this.designer.clearSelected();
       }
     },
 
     moveUpWidget() {
-      this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
-      this.designer.emitHistoryChange()
+      this.designer.moveUpWidget(this.parentList, this.indexOfParentList);
+      this.designer.emitHistoryChange();
     },
 
     moveDownWidget() {
-      this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
-      this.designer.emitHistoryChange()
+      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
+        let nextSelected = null;
         if (this.parentList.length === 1) {
           if (!!this.parentWidget) {
-            nextSelected = this.parentWidget
+            nextSelected = this.parentWidget;
           }
-        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
-          nextSelected = this.parentList[this.indexOfParentList - 1]
+        } else if (this.parentList.length === 1 + this.indexOfParentList) {
+          nextSelected = this.parentList[this.indexOfParentList - 1];
         } else {
-          nextSelected = this.parentList[this.indexOfParentList + 1]
+          nextSelected = this.parentList[this.indexOfParentList + 1];
         }
 
         this.$nextTick(() => {
@@ -212,50 +508,251 @@ export default {
             this.designer.widgetList,
             selectedId
           );
-          this.parentList.splice(this.indexOfParentList, 1)
+          this.parentList.splice(this.indexOfParentList, 1);
           //if (!!nextSelected) {
-          this.designer.setSelected(nextSelected)
+          this.designer.setSelected(nextSelected);
           //}
-          this.designer.formWidget.deleteWidgetRef(
-            selectedWidgetName,
-            l
-          );
-          this.designer.emitHistoryChange()
-          this.designer.emitEvent(
-            "canvas-remove-field",
-            selectedWidgetName
-          );
-        })
+          this.designer.formWidget.deleteWidgetRef(selectedWidgetName, l);
+          this.designer.emitHistoryChange();
+          this.designer.emitEvent("canvas-remove-field", selectedWidgetName);
+        });
       }
     },
-
+    getRules() {
+      return this.rules;
+    },
     getPropName() {
-      if (this.formItemProp) {
-        return this.formItemProp;
+      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 (
-        (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
+        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>
@@ -344,8 +841,8 @@ export default {
 }
 
 .required ::v-deep .el-form-item__label::before {
-  content: '*';
-  color: #F56C6C;
+  content: "*";
+  color: #f56c6c;
   margin-right: 4px;
 }
 
@@ -359,7 +856,8 @@ export default {
   }
 }
 
-.el-form-item.selected, .static-content-item.selected {
+.el-form-item.selected,
+.static-content-item.selected {
   outline: 2px solid $--color-primary;
 }
 
@@ -375,5 +873,7 @@ export default {
   text-align: right;
 }
 
-
+.a-link.is-disabled {
+  cursor: no-drop;
+}
 </style>