@xjw_/vue2-npm-system 1.0.78 → 1.0.80

package/README.md

@@ -1,379 +1,379 @@
-# JC Vue Components
-
-基于 Element-UI 的 Vue2 组件库，二次封装常用组件，提供更丰富的业务功能。
-
-## 版本信息
-
-- Vue: 2.6.10
-- Element-UI: 2.13.2
-- VXE-Table: ^3.2.20
-
-## 安装
-
-```bash
-npm install @xjw_/vue2-npm-system
-```
-
-## 快速开始
-
-### 全局注册
-
-```javascript
-import Vue from 'vue'
-import ElementUI from 'element-ui'
-import JcComponents from '@xjw_/vue2-npm-system'
-
-// 注意：需要自行导入 Element-UI 样式
-import 'element-ui/lib/theme-chalk/index.css'
-
-Vue.use(ElementUI)
-Vue.use(JcComponents)
-```
-
-### 按需引入
-
-```javascript
-import Vue from 'vue'
-import { JcButton, JcInput, JcTable } from '@xjw_/vue2-npm-system'
-
-Vue.component('JcButton', JcButton)
-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 按钮
-
-增强的按钮组件，支持防抖、加载状态等功能。
-
-```vue
-<template>
-  <jc-button 
-    jc-type="primary" 
-    :debounce="1000"
-    :loading="loading"
-    @click="handleClick"
-  >
-    点击我
-  </jc-button>
-</template>
-```
-
-**Props:**
-- `jc-type`: 按钮类型 (default: 'primary')
-- `size`: 尺寸 (default: 'medium')
-- `disabled`: 是否禁用 (default: false)
-- `loading`: 是否加载中 (default: false)
-- `debounce`: 防抖时间（毫秒）(default: 0)
-
-**Events:**
-- `click`: 点击事件
-
-### JcInput 输入框
-
-增强的输入框组件，支持字数统计、密码显示等功能。
-
-```vue
-<template>
-  <jc-input
-    v-model="value"
-    type="password"
-    show-password
-    show-count
-    :maxlength="100"
-    placeholder="请输入"
-  />
-</template>
-```
-
-**Props:**
-- `value`: 绑定值
-- `type`: 输入框类型 (default: 'text')
-- `size`: 尺寸 (default: 'medium')
-- `disabled`: 是否禁用 (default: false)
-- `clearable`: 是否可清空 (default: true)
-- `showPassword`: 显示切换密码图标 (default: false)
-- `maxlength`: 最大长度
-- `showCount`: 显示字数统计 (default: false)
-
-**Events:**
-- `input`: 输入事件
-- `change`: 改变事件
-- `blur`: 失焦事件
-- `focus`: 聚焦事件
-
-### JcDialog 对话框
-
-增强的对话框组件，内置确认/取消按钮。
-
-```vue
-<template>
-  <jc-dialog
-    :visible.sync="dialogVisible"
-    title="标题"
-    width="50%"
-    @confirm="handleConfirm"
-    @cancel="handleCancel"
-  >
-    <p>对话框内容</p>
-  </jc-dialog>
-</template>
-```
-
-**Props:**
-- `visible`: 是否显示 (default: false)
-- `title`: 标题
-- `width`: 宽度 (default: '50%')
-- `showFooter`: 显示底部 (default: true)
-- `showCancelButton`: 显示取消按钮 (default: true)
-- `showConfirmButton`: 显示确认按钮 (default: true)
-- `confirmLoading`: 确认按钮加载中 (default: false)
-
-**Events:**
-- `open`: 打开事件
-- `close`: 关闭事件
-- `confirm`: 确认事件
-- `cancel`: 取消事件
-
-### JcSelect 选择器
-
-增强的选择器组件，支持数据配置和多选。
-
-```vue
-<template>
-  <jc-select
-    v-model="value"
-    :options="options"
-    multiple
-    filterable
-    placeholder="请选择"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      options: [
-        { value: '1', label: '选项一' },
-        { value: '2', label: '选项二' }
-      ]
-    }
-  }
-}
-</script>
-```
-
-**Props:**
-- `value`: 绑定值
-- `options`: 选项数组
-- `multiple`: 是否多选 (default: false)
-- `filterable`: 是否可搜索 (default: false)
-- `valueKey`: 值字段名 (default: 'value')
-- `labelKey`: 标签字段名 (default: 'label')
-
-**Events:**
-- `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 表格
-
-增强的表格组件，支持动态列配置和分页。
-
-```vue
-<template>
-  <jc-table
-    :data="tableData"
-    :columns="columns"
-    :show-index="true"
-    :show-selection="true"
-    :show-pagination="true"
-    :total="100"
-    @selection-change="handleSelectionChange"
-  >
-    <template slot="operation" slot-scope="{ row }">
-      <jc-button @click="handleEdit(row)">编辑</jc-button>
-    </template>
-  </jc-table>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [],
-      columns: [
-        { prop: 'name', label: '姓名', minWidth: 100 },
-        { prop: 'age', label: '年龄', width: 80 }
-      ]
-    }
-  }
-}
-</script>
-```
-
-**Props:**
-- `data`: 表格数据
-- `columns`: 列配置
-- `size`: 尺寸 (default: 'medium')
-- `border`: 边框 (default: true)
-- `showIndex`: 显示序号 (default: false)
-- `showSelection`: 显示选择列 (default: false)
-- `showOperation`: 显示操作列 (default: false)
-- `showPagination`: 显示分页 (default: false)
-
-**Events:**
-- `selection-change`: 选择变化事件
-- `sort-change`: 排序变化事件
-- `size-change`: 每页条数变化事件
-- `current-change-page`: 页码变化事件
-
-## 本地开发
-
-```bash
-# 安装依赖
-npm install
-
-# 开发模式
-npm run dev
-
-# 构建
-npm run build
-```
-
-## 发布到 npm
-
-```bash
-# 修改版本号
-npm version patch  # 或 minor/major
-
-# 发布
-npm publish
-```
-
-## License
-
-MIT
+# JC Vue Components
+
+基于 Element-UI 的 Vue2 组件库，二次封装常用组件，提供更丰富的业务功能。
+
+## 版本信息
+
+- Vue: 2.6.10
+- Element-UI: 2.13.2
+- VXE-Table: ^3.2.20
+
+## 安装
+
+```bash
+npm install @xjw_/vue2-npm-system
+```
+
+## 快速开始
+
+### 全局注册
+
+```javascript
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import JcComponents from '@xjw_/vue2-npm-system'
+
+// 注意：需要自行导入 Element-UI 样式
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI)
+Vue.use(JcComponents)
+```
+
+### 按需引入
+
+```javascript
+import Vue from 'vue'
+import { JcButton, JcInput, JcTable } from '@xjw_/vue2-npm-system'
+
+Vue.component('JcButton', JcButton)
+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 按钮
+
+增强的按钮组件，支持防抖、加载状态等功能。
+
+```vue
+<template>
+  <jc-button 
+    jc-type="primary" 
+    :debounce="1000"
+    :loading="loading"
+    @click="handleClick"
+  >
+    点击我
+  </jc-button>
+</template>
+```
+
+**Props:**
+- `jc-type`: 按钮类型 (default: 'primary')
+- `size`: 尺寸 (default: 'medium')
+- `disabled`: 是否禁用 (default: false)
+- `loading`: 是否加载中 (default: false)
+- `debounce`: 防抖时间（毫秒）(default: 0)
+
+**Events:**
+- `click`: 点击事件
+
+### JcInput 输入框
+
+增强的输入框组件，支持字数统计、密码显示等功能。
+
+```vue
+<template>
+  <jc-input
+    v-model="value"
+    type="password"
+    show-password
+    show-count
+    :maxlength="100"
+    placeholder="请输入"
+  />
+</template>
+```
+
+**Props:**
+- `value`: 绑定值
+- `type`: 输入框类型 (default: 'text')
+- `size`: 尺寸 (default: 'medium')
+- `disabled`: 是否禁用 (default: false)
+- `clearable`: 是否可清空 (default: true)
+- `showPassword`: 显示切换密码图标 (default: false)
+- `maxlength`: 最大长度
+- `showCount`: 显示字数统计 (default: false)
+
+**Events:**
+- `input`: 输入事件
+- `change`: 改变事件
+- `blur`: 失焦事件
+- `focus`: 聚焦事件
+
+### JcDialog 对话框
+
+增强的对话框组件，内置确认/取消按钮。
+
+```vue
+<template>
+  <jc-dialog
+    :visible.sync="dialogVisible"
+    title="标题"
+    width="50%"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <p>对话框内容</p>
+  </jc-dialog>
+</template>
+```
+
+**Props:**
+- `visible`: 是否显示 (default: false)
+- `title`: 标题
+- `width`: 宽度 (default: '50%')
+- `showFooter`: 显示底部 (default: true)
+- `showCancelButton`: 显示取消按钮 (default: true)
+- `showConfirmButton`: 显示确认按钮 (default: true)
+- `confirmLoading`: 确认按钮加载中 (default: false)
+
+**Events:**
+- `open`: 打开事件
+- `close`: 关闭事件
+- `confirm`: 确认事件
+- `cancel`: 取消事件
+
+### JcSelect 选择器
+
+增强的选择器组件，支持数据配置和多选。
+
+```vue
+<template>
+  <jc-select
+    v-model="value"
+    :options="options"
+    multiple
+    filterable
+    placeholder="请选择"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      options: [
+        { value: '1', label: '选项一' },
+        { value: '2', label: '选项二' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+**Props:**
+- `value`: 绑定值
+- `options`: 选项数组
+- `multiple`: 是否多选 (default: false)
+- `filterable`: 是否可搜索 (default: false)
+- `valueKey`: 值字段名 (default: 'value')
+- `labelKey`: 标签字段名 (default: 'label')
+
+**Events:**
+- `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 表格
+
+增强的表格组件，支持动态列配置和分页。
+
+```vue
+<template>
+  <jc-table
+    :data="tableData"
+    :columns="columns"
+    :show-index="true"
+    :show-selection="true"
+    :show-pagination="true"
+    :total="100"
+    @selection-change="handleSelectionChange"
+  >
+    <template slot="operation" slot-scope="{ row }">
+      <jc-button @click="handleEdit(row)">编辑</jc-button>
+    </template>
+  </jc-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        { prop: 'name', label: '姓名', minWidth: 100 },
+        { prop: 'age', label: '年龄', width: 80 }
+      ]
+    }
+  }
+}
+</script>
+```
+
+**Props:**
+- `data`: 表格数据
+- `columns`: 列配置
+- `size`: 尺寸 (default: 'medium')
+- `border`: 边框 (default: true)
+- `showIndex`: 显示序号 (default: false)
+- `showSelection`: 显示选择列 (default: false)
+- `showOperation`: 显示操作列 (default: false)
+- `showPagination`: 显示分页 (default: false)
+
+**Events:**
+- `selection-change`: 选择变化事件
+- `sort-change`: 排序变化事件
+- `size-change`: 每页条数变化事件
+- `current-change-page`: 页码变化事件
+
+## 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+```
+
+## 发布到 npm
+
+```bash
+# 修改版本号
+npm version patch  # 或 minor/major
+
+# 发布
+npm publish
+```
+
+## License
+
+MIT