tcs-front-tabler/js/tcsModal.md

TCS 前端组件库

本目录包含TCS系统的前端组件库，提供了一系列可复用的组件，用于构建统一风格的用户界面。

组件列表

TcsModal 模态框组件

tcsModal.js 提供了模态框组件，用于封装模态框相关的逻辑，提供统一的接口。

使用方法

1. 在HTML中引入组件脚本：

   <script src="../js/tcsModal.js"></script>
   

2. 创建模态框HTML结构（使用Bootstrap模态框结构）：

   <!-- 示例：添加订单模态框 -->
   <div class="modal modal-blur fade" id="addOrderModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">添加新订单</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
     <div class="modal-body">
       <form id="addOrderForm" class="needs-validation" novalidate>
         <!-- 表单内容 -->
       </form>
     </div>
     <div class="modal-footer tcs-modal-footer">
       <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
       <button type="button" class="btn btn-primary" id="saveOrderBtn">保存</button>
     </div>
   </div>
   </div>
   </div>
   

3. 初始化模态框组件：

   // 添加订单模态框
   const addOrderModal = new TcsModal({
   modalId: 'addOrderModal',        // 模态框的ID
   confirmBtnId: 'saveOrderBtn',    // 确认按钮的ID
   formId: 'addOrderForm',          // 表单的ID（如果有）
   onConfirm: function(data) {      // 确认按钮点击时的回调函数
   // 这里添加保存订单的逻辑
   console.log('保存新订单', data);
       
   // 显示成功提示
   TcsNotify.show('订单已添加成功！', 'success');
   },
   onShow: function(relatedTarget) { // 模态框显示时的回调函数
   // relatedTarget 是触发模态框的元素
   console.log('模态框显示', relatedTarget);
   },
   onHide: function() {              // 模态框隐藏时的回调函数
   console.log('模态框隐藏');
   },
   onValidate: function() {          // 表单验证的回调函数（如果有表单）
   // 返回true表示验证通过，返回false表示验证失败
   return true;
   }
   });
   

4. 可用的方法：

   // 显示模态框
   addOrderModal.show();
   
   // 隐藏模态框
   addOrderModal.hide();
   
   // 销毁模态框实例（在不再需要时调用）
   addOrderModal.destroy();
   

TcsNotify 通知提示组件

tcsModal.js 中还包含了通知提示组件，用于显示操作结果的通知提示。

使用方法

// 显示成功通知
TcsNotify.show('操作成功！', 'success');

// 显示错误通知
TcsNotify.show('操作失败！', 'danger');

// 显示警告通知
TcsNotify.show('请注意！', 'warning');

// 显示信息通知
TcsNotify.show('提示信息', 'info');

// 自定义显示时间（毫秒）
TcsNotify.show('自定义显示时间', 'primary', 10000);

TcsTable 表格组件

tcsTable.js 提供了表格组件，用于展示数据列表，支持分页、排序、筛选等功能。

使用方法

请参考相关文档。

样式指南

组件库使用了以下样式类：

• tcs-modal-footer: 用于模态框底部的紧凑样式
• 更多样式请参考各组件的文档