tcs-front-tabler/js/tcsModal.js

/**
 * TCS模态框组件
 * 用于封装模态框相关的逻辑，提供统一的接口
 */
class TcsModal {
  /**
   * 构造函数
   * @param {Object} options - 配置选项
   * @param {string} options.modalId - 模态框的ID
   * @param {string} [options.confirmBtnId] - 确认按钮的ID
   * @param {string} [options.formId] - 表单的ID（如果有）
   * @param {Function} [options.onConfirm] - 确认按钮点击时的回调函数
   * @param {Function} [options.onShow] - 模态框显示时的回调函数
   * @param {Function} [options.onHide] - 模态框隐藏时的回调函数
   * @param {Function} [options.onValidate] - 表单验证的回调函数（如果有表单）
   */
  constructor(options) {
    this.modalId = options.modalId;
    this.confirmBtnId = options.confirmBtnId;
    this.formId = options.formId;
    this.onConfirm = options.onConfirm || (() => {});
    this.onShow = options.onShow || (() => {});
    this.onHide = options.onHide || (() => {});
    this.onValidate = options.onValidate || (() => true);
    
    this.modalElement = document.getElementById(this.modalId);
    this.confirmBtn = this.confirmBtnId ? document.getElementById(this.confirmBtnId) : null;
    this.form = this.formId ? document.getElementById(this.formId) : null;
    
    this.modalInstance = null;
    
    this.init();
  }
  
  /**
   * 初始化模态框
   */
  init() {
    if (!this.modalElement) {
      console.error(`模态框元素 #${this.modalId} 不存在`);
      return;
    }
    
    // 初始化Bootstrap模态框实例
    this.modalInstance = new bootstrap.Modal(this.modalElement);
    
    // 绑定确认按钮事件
    if (this.confirmBtn) {
      this.confirmBtn.addEventListener('click', this.handleConfirm.bind(this));
    }
    
    // 绑定模态框事件
    this.modalElement.addEventListener('show.bs.modal', this.handleShow.bind(this));
    this.modalElement.addEventListener('hidden.bs.modal', this.handleHide.bind(this));
  }
  
  /**
   * 处理确认按钮点击事件
   * @param {Event} event - 事件对象
   */
  handleConfirm(event) {
    // 如果有表单，进行表单验证
    if (this.form) {
      if (!this.form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
        this.form.classList.add('was-validated');
        return;
      }
      
      // 自定义验证
      if (!this.onValidate()) {
        return;
      }
      
      // 获取表单数据
      const formData = new FormData(this.form);
      const data = Object.fromEntries(formData.entries());
      
      // 调用确认回调，传入表单数据
      this.onConfirm(data);
    } else {
      // 没有表单，直接调用确认回调
      this.onConfirm();
    }
    
    // 隐藏模态框
    this.hide();
  }
  
  /**
   * 处理模态框显示事件
   * @param {Event} event - 事件对象
   */
  handleShow(event) {
    // 获取触发模态框的元素（如果有）
    const relatedTarget = event.relatedTarget;
    this.onShow(relatedTarget);
  }
  
  /**
   * 处理模态框隐藏事件
   */
  handleHide() {
    // 如果有表单，重置表单
    if (this.form) {
      this.form.reset();
      this.form.classList.remove('was-validated');
    }
    
    this.onHide();
  }
  
  /**
   * 显示模态框
   */
  show() {
    this.modalInstance.show();
  }
  
  /**
   * 隐藏模态框
   */
  hide() {
    this.modalInstance.hide();
  }
  
  /**
   * 销毁模态框实例
   */
  destroy() {
    if (this.confirmBtn) {
      this.confirmBtn.removeEventListener('click', this.handleConfirm);
    }
    
    this.modalElement.removeEventListener('show.bs.modal', this.handleShow);
    this.modalElement.removeEventListener('hidden.bs.modal', this.handleHide);
    
    this.modalInstance.dispose();
  }
}

/**
 * 通知提示组件
 * 用于显示操作结果的通知提示
 */
class TcsNotify {
  /**
   * 显示通知提示
   * @param {string} message - 通知消息
   * @param {string} [type='success'] - 通知类型，可选值：success, danger, warning, info, primary
   * @param {number} [duration=5000] - 通知显示时间（毫秒）
   */
  static show(message, type = 'success', duration = 5000) {
    // 定义图标映射
    const icons = {
      'success': 'square-check',
      'danger': 'circle-x',
      'warning': 'alert-triangle',
      'info': 'info-circle',
      'primary': 'bell'
    };
    
    // 获取图标
    const icon = icons[type] || 'info-circle';
    
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible`;
    notification.style.paddingTop = '0.5rem';
    notification.style.paddingBottom = '0.5rem';
    
    // 设置通知内容
    notification.innerHTML = `
      <div class="d-flex align-items-center">
        <div class="d-flex align-items-center">
          <i class="ti ti-${icon} alert-icon me-2" style="font-size: 1.25rem;"></i>
        </div>
        <div>
          ${message}
        </div>
      </div>
      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    `;
    
    // 创建通知容器
    let notifyContainer = document.getElementById('notify-container');
    if (!notifyContainer) {
      notifyContainer = document.createElement('div');
      notifyContainer.id = 'notify-container';
      notifyContainer.className = 'position-fixed top-0 start-50 translate-middle-x p-2';
      notifyContainer.style.zIndex = '9999';
      notifyContainer.style.paddingTop = '0.5rem';
      notifyContainer.style.paddingBottom = '0.5rem';
      document.body.appendChild(notifyContainer);
    }
    
    // 添加到容器
    notifyContainer.appendChild(notification);
    
    // 指定时间后自动关闭
    setTimeout(() => {
      if (notification.parentNode) {
        // 使用Bootstrap的Alert API关闭
        const bsAlert = new bootstrap.Alert(notification);
        bsAlert.close();
        
        // 监听关闭完成事件
        notification.addEventListener('closed.bs.alert', function() {
          if (notification.parentNode) {
            notification.parentNode.removeChild(notification);
          }
          
          // 如果容器为空，也移除容器
          if (notifyContainer.children.length === 0) {
            notifyContainer.parentNode.removeChild(notifyContainer);
          }
        });
      }
    }, duration);
  }
}