common-utils-kit 1.1.32 → 1.1.34

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,287 @@ 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';
+
+当前 `common-utils-kit/element` 统一导出的组件包括：
+
+- `View3D`
+- `ScreenScale`
+- `ConfirmDialog`
+- `ElementForm`
+- `ElementTable`
+- `ScrollTable`
+- `ResetDrawer`
+- `ResetDialog`
+
+### 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

package/lib/element/index.common.127.js

@@ -0,0 +1,169 @@
+((typeof self !== 'undefined' ? self : this)["webpackChunkcommon_utils_kit"] = (typeof self !== 'undefined' ? self : this)["webpackChunkcommon_utils_kit"] || []).push([[127],{
+
+/***/ 6657:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5522);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7643);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".spill[data-v-0922a6c0]{white-space:normal;word-wrap:break-word}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 5127:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": function() { return /* binding */ viewText; }
+});
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/element-ui/elementForm/formViews/viewText.vue?vue&type=template&id=0922a6c0&scoped=true
+var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "spill",
+    attrs: {
+      "title": _vm.formData[_vm.item.param] && _vm.formData[_vm.item.param] !== 'null' ? _vm.formData[_vm.item.param] : ''
+    }
+  }, [_vm._v(" " + _vm._s(_vm.formData[_vm.item.param] === "null" ? "" : _vm.formData[_vm.item.param]) + " ")]);
+};
+var staticRenderFns = [];
+
+// EXTERNAL MODULE: ./src/element-ui/elementForm/utils/formMixin.js
+var formMixin = __webpack_require__(7417);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/element-ui/elementForm/formViews/viewText.vue?vue&type=script&lang=js
+
+/* harmony default export */ var viewTextvue_type_script_lang_js = ({
+  mixins: [formMixin/* default */.A],
+  props: {
+    formData: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    item: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  methods: {}
+});
+;// CONCATENATED MODULE: ./src/element-ui/elementForm/formViews/viewText.vue?vue&type=script&lang=js
+ /* harmony default export */ var formViews_viewTextvue_type_script_lang_js = (viewTextvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/element-ui/elementForm/formViews/viewText.vue?vue&type=style&index=0&id=0922a6c0&prod&scoped=true&lang=scss
+var viewTextvue_type_style_index_0_id_0922a6c0_prod_scoped_true_lang_scss = __webpack_require__(7451);
+;// CONCATENATED MODULE: ./src/element-ui/elementForm/formViews/viewText.vue?vue&type=style&index=0&id=0922a6c0&prod&scoped=true&lang=scss
+
+// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__(1656);
+;// CONCATENATED MODULE: ./src/element-ui/elementForm/formViews/viewText.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var component = (0,componentNormalizer/* default */.A)(
+  formViews_viewTextvue_type_script_lang_js,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  "0922a6c0",
+  null
+  
+)
+
+/* harmony default export */ var viewText = (component.exports);
+
+/***/ }),
+
+/***/ 7417:
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3110);
+/* harmony import */ var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var core_js_modules_es_regexp_constructor_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4864);
+/* harmony import */ var core_js_modules_es_regexp_constructor_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_constructor_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var core_js_modules_es_regexp_dot_all_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7465);
+/* harmony import */ var core_js_modules_es_regexp_dot_all_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_dot_all_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7495);
+/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_regexp_sticky_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7745);
+/* harmony import */ var core_js_modules_es_regexp_sticky_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_sticky_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_js_modules_es_regexp_test_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(906);
+/* harmony import */ var core_js_modules_es_regexp_test_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_test_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8781);
+/* harmony import */ var core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_6__);
+
+
+
+
+
+
+
+/* harmony default export */ __webpack_exports__.A = ({
+  methods: {
+    translate: function translate(value) {
+      return !(JSON.stringify(value) === 'false');
+    },
+    label: function label(item, select) {
+      var _item$props;
+      return (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.label ? select[item.props.label] : select.label;
+    },
+    value: function value(item, select) {
+      var _item$props2;
+      return (_item$props2 = item.props) !== null && _item$props2 !== void 0 && _item$props2.value ? select[item.props.value] : select.value;
+    },
+    eval: function _eval(row, condition) {
+      if (row) {
+        var pattern = new RegExp("[<>=+-]");
+        // eslint-disable-next-line no-eval
+        return eval(pattern.test(condition) ? condition : JSON.stringify(condition));
+      }
+    }
+  }
+});
+
+/***/ }),
+
+/***/ 7451:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(6657);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(9548)/* ["default"] */ .A)
+var update = add("0ad062fa", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ })
+
+}]);