common-utils-kit 1.1.31 → 1.1.33

package/.eslintrc.js

@@ -25,10 +25,14 @@ module.exports = {
     'no-underscore-dangle': 'off',
     'new-cap': 'off',
     'no-plusplus': 'off',
-    'vue/multi-word-component-names':'off',
-    'vue/first-attribute-linebreak':'off',
-    'vue/component-definition-name-casing':'off',
-    'vue/attributes-order':'off'
+    'vue/multi-word-component-names': 'off',
+    'vue/first-attribute-linebreak': 'off',
+    'vue/component-definition-name-casing': 'off',
+    'vue/attributes-order': 'off',
+    'vue/no-mutating-props': 'off',
+    'vue/html-indent': 'off',
+    // 👇 新增这一行 👇
+    'vue/html-closing-bracket-newline': 'off'
   },
   overrides: [
     {

package/README.md

@@ -84,21 +84,7 @@ this.$test.email("200")  //false
 - `v-relative-time` - 指令接受以下参数：
 - **过去时间戳**：过去的时间戳（如 `1699795200000`）
 
-### 6. `v-replace`
-**描述**: 限制输入框的输入内容。
-```html
-<el-input v-replace:price="inputValue" />
-```
-**参数说明**:
-- `v-relative-time` - 指令接受以下参数：
-- **限制类型**：允许两位小数的金额`price`（如 price）
-- **限制类型**仅允许正数`plusPrice`（如 price）。
-- **限制类型**仅允许正整数`num`（如 price）。
-- **限制类型**仅允许自然数`natural`（如 price）。
-- **输入内容**限制输入的内容（如 inputValue）
-
-
-### 7. `v-el-drag-dialog`
+### 6. `v-el-drag-dialog`
 **描述**: 可拖拽的对话框（仅用于element-ui）。
 ```html
 <el-dialog v-el-drag-dialog>
@@ -107,6 +93,23 @@ this.$test.email("200")  //false
 </el-dialog>
 ```
 
+### 7. `v-input-rule`
+**描述**: 按规则限制输入框内容，兼容原生 input 和 Element UI `el-input`。
+```html
+<el-input v-model="amount" v-input-rule:priceRange="[0, 1000000]" placeholder="金额范围" />
+<el-input v-model="optionalCount" v-input-rule:range.empty="[0, 10000]" placeholder="允许清空的整数范围" />
+```
+**参数说明**:
+- `price`：允许正负金额，最多两位小数。
+- `plusPrice`：允许非负金额，最多两位小数。
+- `positivePrice`：允许正数金额，最终事件中小于等于 0 会清空。
+- `integer`：允许正负整数。
+- `plusInteger`：允许非负整数。
+- `positiveInteger`：允许正整数。
+- `range`：只允许数字，并按 `[min, max]` 限制范围。
+- `priceRange`：只允许金额，最多两位小数，并按 `[min, max]` 限制范围；最终事件会补齐两位小数。
+- `.empty`：用于 `range` / `priceRange`，传入最小值时仍允许最终值为空。
+
 ## 文件插件(files)
 ```html
  1. downloadBase64File(base64文件下载)
@@ -143,11 +146,276 @@ this.$test.email("200")  //false
  2. throttle(节流)
  3. sleep(睡眠阻塞延时)
  ```
+
+## 请求取消(request.AxiosCanceler)
+```js
+import { request } from 'common-utils-kit';
+
+const canceler = new request.AxiosCanceler({ type: 'abort' });
+const config = { method: 'get', url: '/api/list', params: { pageNum: 1 } };
+canceler.addPending(config);
+canceler.removePending(config);
+canceler.removeAllPending();
+```
+
+## 请求封装(request)
+```js
+import { request } from 'common-utils-kit';
+
+const http = new request.RequestHttp({
+  baseURL: '/api',
+  timeout: 60000,
+  withCredentials: true,
+}, {
+  getToken: () => localStorage.getItem('token'),
+  tokenHeader: 'token',
+  showLoading: () => {},
+  hideLoading: () => {},
+  message: Message,
+});
+
+http.get('/user/info', { id: 1 }, { cancel: true, loading: false });
+http.post('/user/save', { name: '张三' });
+```
+
+请求选项：
+
+- `cancel`：是否启用重复请求取消，默认启用。
+- `loading`：是否调用 loading 回调，默认启用。
+- `getToken`：业务项目注入的 token 获取函数。
+- `tokenHeader`：token 写入的请求头字段名，默认 `token`。
+- `message`：业务项目注入的提示对象，兼容 Element UI `Message`。
+
+## WebSocket(websocket)
+```js
+import { websocket } from 'common-utils-kit';
+
+const client = websocket.createSocketClient({
+  url: 'ws://example.com/socket',
+  heartMessage: 'ping',
+  heartTime: 60000,
+  reconnectTime: 5000,
+  onMessage: event => console.log(event.data),
+});
+
+client.connect();
+client.send({ type: 'hello' });
+client.close();
+```
+
+## 表格工具(table)
+
+示例工程可在 `/element/table` 页面查看合并行展示效果。
+
+```vue
+<template>
+  <el-table
+    :data="tableData"
+    :span-method="spanMethod"
+    border
+  >
+    <el-table-column prop="region" label="区域" />
+    <el-table-column prop="city" label="城市" />
+    <el-table-column prop="store" label="门店" />
+    <el-table-column prop="count" label="数量" />
+  </el-table>
+</template>
+
+<script>
+import { table } from 'common-utils-kit';
+
+export default {
+  data() {
+    return {
+      tableData: [],
+      spanMethod: () => [1, 1],
+      sourceData: [
+        { region: '华东', city: '杭州', store: '西湖店', count: 12 },
+        { region: '华南', city: '广州', store: '天河店', count: 8 },
+        { region: '华东', city: '上海', store: '浦东店', count: 15 }
+      ]
+    };
+  },
+  created() {
+    const sorted = table.sortMergeData(this.sourceData, 'region');
+    const spanList = table.getMergeSpanList(sorted, 'region');
+    this.tableData = sorted;
+    this.spanMethod = table.createMergeSpanMethod(spanList, 0);
+  }
+};
+</script>
+```
+
 ## 组件使用
+组件源码按依赖分类维护：不依赖 UI 框架的自定义 Vue 组件放在 `src/components`，Element UI 二次封装或强依赖 Element UI 的组件放在 `src/element-ui`。历史上已从 `common-utils-kit/element` 导出的自定义组件会先保留兼容导出。
+
+vue.config.js文件中设置别名
+  configureWebpack: {
+    resolve: {
+      alias: {
+        'common-utils-kit/element': 'common-utils-kit/lib/element/index.umd.js'
+      }
+    }
+  },
+页面
+import {View3D}  from 'common-utils-kit/element';
+直接使用
+如果是使用webpack5以上版本的可直接使用
+import {View3D}  from 'common-utils-kit/element';
+
+### ScrollTable 滚动表格
+
+```vue
+<template>
+  <scroll-table
+    :columns="columns"
+    :main-data="tableData"
+    :loading="loading"
+    :finished="finished"
+    height="460"
+    @load="loadMore"
+  />
+</template>
+
+<script>
+import { ScrollTable } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ScrollTable,
+  },
+};
+</script>
+```
+
+参数：
+
+- `columns`：列配置，字段使用 `param`、`label`、`width`、`minWidth`、`align`、`tooltip`。
+- `mainData`：表格数据。
+- `loading`：是否正在加载下一页。
+- `finished`：是否已无更多数据。
+- `loadDistance`：距离底部多少像素触发 `load`，默认 `40`。
+
+### ScreenScale 缩放容器
+
+```vue
+<template>
+  <screen-scale :width="1920" :height="1080">
+    <div style="width: 1920px; height: 1080px;">
+      设计稿内容
+    </div>
+  </screen-scale>
+</template>
+
+<script>
+import { ScreenScale } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ScreenScale,
+  },
+};
+</script>
+```
+
+参数：
+
+- `width`：设计稿宽度，默认 `1920`。
+- `height`：设计稿高度，默认 `1080`。
+
+### ResetDrawer 抽屉壳
+
+用于解决业务抽屉直接用 `v-if` 销毁整个组件时，`el-drawer append-to-body` 挂载异常的问题。`ResetDrawer` 会让外层 `el-drawer` 常驻并固定 `append-to-body`，只在打开时渲染默认插槽，关闭动画结束后再销毁默认插槽内容。
+
+```vue
+<template>
+  <reset-drawer
+    v-model="drawerVisible"
+    title="业务抽屉"
+    size="480px"
+    :wrapper-closable="false"
+  >
+    <business-drawer-content :id="currentId" />
+  </reset-drawer>
+</template>
+
+<script>
+import { ResetDrawer } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ResetDrawer,
+  },
+  data() {
+    return {
+      drawerVisible: false,
+      currentId: '',
+    };
+  },
+};
+</script>
+```
+
+使用说明：
+- 不要再给 `reset-drawer` 外层套 `v-if`，否则外层 `el-drawer` 仍会被销毁。
+- 默认插槽内容会在每次打开时重新创建，业务组件的 `created`、`mounted` 和 `data` 会自然重新执行。
+- 插槽内容会在 `closed` 事件后销毁，避免关闭动画过程中内容突然消失。
+- 组件会过滤 `destroy-on-close` 和 `append-to-body` 透传，销毁时机由 `ResetDrawer` 统一控制。
+- 常用 `el-drawer` 参数如 `title`、`size`、`direction`、`wrapper-closable`、`before-close` 可继续按原方式传入。
+
+### ResetDialog 对话框壳
+
+用于解决业务对话框直接用 `v-if` 销毁整个组件时，`el-dialog append-to-body` 挂载异常的问题。`ResetDialog` 会让外层 `el-dialog` 常驻并固定 `append-to-body`，只在打开时渲染默认插槽和 footer 插槽，关闭动画结束后再销毁插槽内容。
+
+```vue
+<template>
+  <reset-dialog
+    v-model="dialogVisible"
+    title="业务对话框"
+    width="560px"
+    :close-on-click-modal="false"
+  >
+    <business-dialog-content :id="currentId" />
+    <template slot="footer">
+      <el-button @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button type="primary" @click="dialogVisible = false">
+        确定
+      </el-button>
+    </template>
+  </reset-dialog>
+</template>
+
+<script>
+import { ResetDialog } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ResetDialog,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      currentId: '',
+    };
+  },
+};
+</script>
+```
+
+使用说明：
+- 不要再给 `reset-dialog` 外层套 `v-if`，否则外层 `el-dialog` 仍会被销毁。
+- 默认插槽和 `footer` 插槽内容会在每次打开时重新创建，业务组件状态会自然重置。
+- 插槽内容会在 `closed` 事件后销毁，避免关闭动画过程中内容突然消失。
+- 组件会过滤 `destroy-on-close` 和 `append-to-body` 透传，销毁时机由 `ResetDialog` 统一控制。
+- 常用 `el-dialog` 参数如 `title`、`width`、`fullscreen`、`top`、`close-on-click-modal`、`before-close` 可继续按原方式传入。
+
 ## 样式使用
 main.js文件中
 import 'common-utils-kit/lib/utils-kit.css';
 
+
 ### 文件预览（preview）
 需要安装 npm i docx-preview --save 预览docx
 需要安装 npm i axios --save 预览docx