front_Vue/ant-design-pro-vue3/src/views/front/platfrom/controls/ControlsHelper/TextBoxHelper.ts

import { DirectiveBinding, nextTick, ref, watch } from 'vue';

// 定义 PlaceholderAdorner 等装饰器类的模拟，这里简化处理
class PlaceholderAdorner {
  constructor(private textBox: HTMLInputElement, private placeholder: string) {}
}

class TextLengthAdorner {
  constructor(private textBox: HTMLInputElement) {}
}

class CircleAdorner {
  constructor(private textBox: HTMLInputElement) {}
}

// 定义 InputType 枚举
export enum InputType {
  String = 0,
  Date = 1,
  Int = 2,
  Decimal = 3,
  Email = 4,
  IDCard = 5,
}

// 定义 FocusHandledResult 枚举
enum FocusHandledResult {
  System,
  Self,
}

// 定义 RegexValidationRules 类
class RegexValidationRules {
  private _rules: { [key: string]: [string, string] } = {};
  private static _instance: RegexValidationRules;

  private constructor() {
    this.addRule('Date', '^(?:(?:(?:(?:(?:1[6-9]|[2-9]\\d)(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:0229))|(?:(?:(?:1[6-9]|[2-9]\\d)\\d{2})(?:(?:(?:0[13578]|1[02])31)|(?:(?:0[13-9]|1[0-2])(?:29|30))|(?:(?:0[1-9])|(?:1[0-2]))(?:0[1-9]|1\\d|2[0-8]))))$', '日期格式 20120101。');
    this.addRule('Decimal', '^[0-9]+\\.{0,1}[0-9]{0,2}$', '请输入数字，格式 000.00。');
    this.addRule('Int', '^\\d+$', '请输入整数数字。');
    this.addRule('Email', '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$', '请输入邮件地址类型。');
    this.addRule('IDCard', '^\\d{17}[\\d|x|X]$|^\\d{15}$', '请输入有效身份证号。');
    this.addRule('String', null, '');
  }

  static get Instance() {
    if (!this._instance) {
      this._instance = new RegexValidationRules();
    }
    return this._instance;
  }

  addRule(name: string, regex: string | null, errorMsg: string) {
    if (this._rules[name]) {
      delete this._rules[name];
    }
    this._rules[name] = [regex, errorMsg];
  }

  removeRule(name: string) {
    if (this._rules[name]) {
      delete this._rules[name];
    }
  }

  bindingRule(element: HTMLElement, name: string) {
    if (!element || !this._rules[name]) {
      return false;
    }
    // 这里模拟绑定验证规则
    return false;
  }
}

// 定义 TextBoxHelper 类
export class TextBoxHelper {
  // Placeholder 相关
  static placeholderOffset = ref<{ x: number; y: number }>({ x: 4, y: 2 });
  static placeholder = ref('');

  static onPlaceholderChanged(el: HTMLInputElement) {
    nextTick(() => {
      const updatePlaceholder = () => {
        const isShow = el.value.length === 0;
        // 这里简化处理装饰器的添加和移除
        if (isShow) {
          new PlaceholderAdorner(el, this.placeholder.value);
        }
      };

      el.addEventListener('input', updatePlaceholder);
      updatePlaceholder();
    });
  }

  // IsMultiLine 相关
  static isMultiLine = ref(false);

  static onIsMultiLineChanged(el: HTMLInputElement) {
    if (this.isMultiLine.value) {
      el.setAttribute('wrap', 'soft');
      el.setAttribute('rows', '2');
    } else {
      el.removeAttribute('wrap');
      el.setAttribute('rows', '1');
    }
  }

  // 其他功能类似实现，这里省略部分功能的完整实现，仅展示结构
  // ...

  // 输入类型验证
  static inputType = ref(InputType.String);

  static onInputTypeChanged(el: HTMLInputElement) {
    switch (this.inputType.value) {
      case InputType.Date:
        RegexValidationRules.Instance.bindingRule(el, 'Date');
        break;
      case InputType.Decimal:
        RegexValidationRules.Instance.bindingRule(el, 'Decimal');
        break;
      // 其他 case 类似
    }
  }
}

// 定义自定义指令，模拟附加属性
export const vTextBoxHelper = {
  mounted(el: HTMLInputElement, binding: DirectiveBinding) {
    const { value } = binding;

    if (value.placeholder) {
      TextBoxHelper.placeholder.value = value.placeholder;
      TextBoxHelper.onPlaceholderChanged(el);
    }

    if (value.isMultiLine !== undefined) {
      TextBoxHelper.isMultiLine.value = value.isMultiLine;
      TextBoxHelper.onIsMultiLineChanged(el);
    }

    if (value.inputType !== undefined) {
      TextBoxHelper.inputType.value = value.inputType;
      TextBoxHelper.onInputTypeChanged(el);
    }
  },
};