@xjw_/vue2-npm-system 1.0.65 → 1.0.66

package/README.md

@@ -41,6 +41,56 @@ Vue.component('JcInput', JcInput)
 Vue.component('JcTable', JcTable)
 ```
 
+## 工具函数
+
+### createRequest 请求封装
+
+基于 axios 的通用请求封装，支持统一的错误处理和 token 管理。
+
+```javascript
+import { createRequest } from '@xjw_/vue2-npm-system'
+
+// 创建请求实例
+const request = createRequest({
+  baseURL: 'http://api.example.com',
+  timeout: 30000,
+  // 获取 token 的方法
+  getToken: () => {
+    return localStorage.getItem('token')
+  },
+  // Token 过期回调
+  onTokenExpired: () => {
+    // 清除 token，跳转登录页等
+    localStorage.removeItem('token')
+    window.location.href = '/login'
+  },
+  // 自定义成功状态码
+  successCodes: [200, 2000, 3000]
+})
+
+// 使用请求实例
+export function getUserList(params, pageSize, pageNum) {
+  return request({
+    url: '/api/user/list',
+    method: 'post',
+    data: {
+      ...params,
+      pageSize,
+      pageNum
+    }
+  })
+}
+```
+
+**配置项:**
+- `baseURL`: API 基础地址
+- `timeout`: 超时时间（毫秒）
+- `getToken`: 获取 token 的函数
+- `onTokenExpired`: Token 过期时的回调
+- `successCodes`: 成功的状态码数组 (默认: [200, 2000, 3000])
+- `errorHandler`: 自定义错误处理函数
+- `headers`: 额外的请求头
+
 ## 组件列表
 
 ### JcButton 按钮
@@ -178,6 +228,77 @@ export default {
 - `change`: 改变事件
 - `visible-change`: 显示/隐藏事件
 
+### XBusinessLog 业务日志查询
+
+集成的业务日志查询组件，包含搜索栏和数据表格。
+
+```vue
+<template>
+  <div class="app-container">
+    <x-business-log 
+      ref="businessLog"
+      :api-method="selectSysBusinessLogList"
+      :page-size="10"
+      :parse-time-method="parseTime"
+    />
+  </div>
+</template>
+
+<script>
+import { selectSysBusinessLogList } from "@/api/system/log"
+
+export default {
+  name: "BusinessLog",
+  methods: {
+    // 自定义时间格式化（可选）
+    parseTime(time) {
+      if (!time) return ''
+      const date = new Date(time)
+      // 你的格式化逻辑
+      return formattedTime
+    }
+  }
+}
+</script>
+```
+
+**Props:**
+- `apiMethod`: API 请求方法 (必需)，接收 `(params, pageSize, pageNum)` 参数
+- `pageSize`: 每页条数 (默认: 10)
+- `parseTimeMethod`: 自定义时间格式化函数 (可选)
+
+**Methods:**
+- `resetForm()`: 重置表单并重新查询
+- `refresh()`: 刷新列表
+- `getList()`: 获取数据列表
+
+**API 方法要求:**
+
+传入的 `apiMethod` 应该返回 Promise，响应格式为：
+```javascript
+{
+  rows: [],  // 数据列表
+  total: 0   // 总条数
+}
+```
+
+示例 API 封装：
+```javascript
+import request from '@/utils/request'
+
+export function selectSysBusinessLogList(params, pageSize, pageNum) {
+  return request({
+    url: '/system/business-log/list',
+    method: 'post',
+    data: {
+      ...params,
+      pageSize,
+      pageNum
+    }
+  })
+}
+```
+
 ### JcTable 表格
 
 增强的表格组件，支持动态列配置和分页。