# TCS 前端组件库
本目录包含TCS系统的前端组件库，提供了一系列可复用的组件，用于构建统一风格的用户界面。
## 组件列表
### TcsModal 模态框组件
`tcsModal.js` 提供了模态框组件，用于封装模态框相关的逻辑，提供统一的接口。
#### 使用方法
1. 在HTML中引入组件脚本：
```html
```
2. 创建模态框HTML结构（使用Bootstrap模态框结构）：
```html
```
3. 初始化模态框组件：
```javascript
// 添加订单模态框
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. 可用的方法：
```javascript
// 显示模态框
addOrderModal.show();
// 隐藏模态框
addOrderModal.hide();
// 销毁模态框实例（在不再需要时调用）
addOrderModal.destroy();
```
### TcsNotify 通知提示组件
`tcsModal.js` 中还包含了通知提示组件，用于显示操作结果的通知提示。
#### 使用方法
```javascript
// 显示成功通知
TcsNotify.show('操作成功！', 'success');
// 显示错误通知
TcsNotify.show('操作失败！', 'danger');
// 显示警告通知
TcsNotify.show('请注意！', 'warning');
// 显示信息通知
TcsNotify.show('提示信息', 'info');
// 自定义显示时间（毫秒）
TcsNotify.show('自定义显示时间', 'primary', 10000);
```
### TcsTable 表格组件
`tcsTable.js` 提供了表格组件，用于展示数据列表，支持分页、排序、筛选等功能。
#### 使用方法
请参考相关文档。
## 样式指南
组件库使用了以下样式类：
- `tcs-modal-footer`: 用于模态框底部的紧凑样式
- 更多样式请参考各组件的文档