@web-utils/component 2.7.30 → 2.7.31

package/dist/components/pageable-table/index.js

@@ -1,46 +1,62 @@
-var __defProp = Object.defineProperty, __defProps = Object.defineProperties;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
-    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b))
-      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
   return a;
-}, __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    __hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
   if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source))
-      exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop) && (target[prop] = source[prop]);
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
   return target;
 };
-var __async = (__this, __arguments, generator) => new Promise((resolve, reject) => {
-  var fulfilled = (value) => {
-    try {
-      step(generator.next(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, rejected = (value) => {
-    try {
-      step(generator.throw(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-  step((generator = generator.apply(__this, __arguments)).next());
-});
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { hasOwn } from "@web-utils/core";
 import { cloneDeep, merge } from "@web-utils/integrations/lodash";
-import { f as filterTableColumnProperties, h as filterTableProperties, i as filterTableEvents } from "../../chunks/utils.d7f73f8d.js";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { f as filterTableColumnProperties, h as filterTableProperties, i as filterTableEvents } from "../../chunks/utils.2a3ffac9.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     class: ["pageable-table", {
       "auto-height": _vm.autoHeight
@@ -53,8 +69,8 @@ var render = function() {
       "header-bold": _vm.headerBold
     }],
     attrs: {
-      data: _vm.records,
-      border: _vm.border
+      "data": _vm.records,
+      "border": _vm.border
     },
     on: {
       "hook:updated": _vm.updateTableScrollPosition,
@@ -73,67 +89,67 @@ var render = function() {
           }), _vm._v(" 加载中...")])] : _vm.tableStatus === _vm.TABLE_STATUS.error ? [_c("ElButton", {
             staticClass: "pageable-table-error",
             attrs: {
-              icon: "table-status-icon fa fa-frown-o"
+              "icon": "table-status-icon fa fa-frown-o"
             },
             on: {
-              click: _vm.refresh
+              "click": _vm.refresh
             }
           }, [_vm._v(" 加载失败，点击重试！ ")])] : [_vm._v(" 暂无数据 ")]];
         })];
       },
-      proxy: !0
+      proxy: true
     }, {
       key: "append",
       fn: function() {
         return [_vm._t("append")];
       },
-      proxy: !0
-    }], null, !0)
-  }, "ElTable", _vm.filterTableProperties(_vm.mergeAttrs), !1), _vm.filterTableEvents(_vm.$listeners)), [_vm.multiple && _vm.selection ? _c("TableColumn", {
+      proxy: true
+    }], null, true)
+  }, "ElTable", _vm.filterTableProperties(_vm.mergeAttrs), false), _vm.filterTableEvents(_vm.$listeners)), [_vm.multiple && _vm.selection ? _c("TableColumn", {
     key: "multiple",
     attrs: {
-      type: "selection",
-      width: "45",
-      align: "center"
+      "type": "selection",
+      "width": "45",
+      "align": "center"
     }
   }) : _vm._e(), !_vm.multiple && _vm.selection ? _c("TableColumn", {
     key: "single",
     attrs: {
-      type: "single-selection",
+      "type": "single-selection",
       "class-name": "single-select-column",
-      width: "45",
-      align: "center"
+      "width": "45",
+      "align": "center"
     },
     scopedSlots: _vm._u([{
       key: "header",
       fn: function() {
         return [_c("ElRadio", {
           attrs: {
-            value: !!_vm.currentRow,
-            label: !0
+            "value": !!_vm.currentRow,
+            "label": true
           }
         }, [_c("span")])];
       },
-      proxy: !0
+      proxy: true
     }, {
       key: "default",
       fn: function(_ref) {
         var row = _ref.row;
         return [_c("ElRadio", {
           attrs: {
-            label: !0,
-            value: _vm.currentRow && _vm.currentRow[_vm.$attrs["row-key"] || "id"] === row[_vm.$attrs["row-key"] || "id"]
+            "label": true,
+            "value": _vm.currentRow && _vm.currentRow[_vm.$attrs["row-key"] || "id"] === row[_vm.$attrs["row-key"] || "id"]
           }
         }, [_c("span")])];
       }
-    }], null, !1, 307797321)
+    }], null, false, 307797321)
   }) : _vm._e(), _vm.index ? _c("TableColumn", {
     key: "order",
     attrs: {
-      type: "index",
-      label: "序号",
-      width: _vm.indexWidth,
-      align: "center"
+      "type": "index",
+      "label": "序号",
+      "width": _vm.indexWidth,
+      "align": "center"
     },
     scopedSlots: _vm._u([{
       key: "default",
@@ -141,15 +157,15 @@ var render = function() {
         var $index = _ref2.$index;
         return [_vm._v(" " + _vm._s((_vm.page.page - 1) * _vm.page.limit + $index + 1 || $index + 1) + " ")];
       }
-    }], null, !1, 4238275121)
+    }], null, false, 4238275121)
   }) : _vm._e(), _vm._t("default", function() {
     return [_vm.columns && _vm.columns.length ? _vm._l(_vm.headers, function(item, headerIndex) {
       return _c("TableColumn", _vm._b({
         key: `${item.prop}-${headerIndex}`
-      }, "TableColumn", item, !1));
+      }, "TableColumn", item, false));
     }) : _c("TableColumn", {
       attrs: {
-        label: "点击表格行复制模板"
+        "label": "点击表格行复制模板"
       },
       scopedSlots: _vm._u([{
         key: "default",
@@ -167,9 +183,9 @@ var render = function() {
       "current-page": _vm.page.page,
       "hide-on-single-page": _vm.hideOnSinglePage,
       "page-size": _vm.page.limit,
-      total: _vm.page.total,
-      background: "",
-      layout: "total, prev, pager, next, jumper"
+      "total": _vm.page.total,
+      "background": "",
+      "layout": "total, prev, pager, next, jumper"
     },
     on: {
       "current-change": function(curPage) {
@@ -177,20 +193,25 @@ var render = function() {
       }
     }
   })], 2)]);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const PageableTable_vue_vue_type_style_index_0_lang = "";
 const TABLE_STATUS = {
   loading: 1,
   error: -1,
   empty: 2,
   success: 0
-}, __vue2_script = {
+};
+const __vue2_script = {
   name: "PageableTable",
   bus: {
     reloadTableView(viewId) {
-      viewId === this.viewId && this.getPage();
+      if (viewId === this.viewId) {
+        this.getPage();
+      }
     }
   },
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     viewId: {
       type: String
@@ -228,27 +249,27 @@ const TABLE_STATUS = {
     autoHeight: Boolean,
     immediate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     index: {
       type: Boolean,
-      default: !0
+      default: true
     },
     multiple: {
       type: Boolean,
-      default: !0
+      default: true
     },
     selection: {
       type: Boolean,
-      default: !0
+      default: true
     },
     border: {
       type: Boolean,
-      default: !0
+      default: true
     },
     reloadOnModelChange: {
       type: Boolean,
-      default: !1
+      default: false
     },
     columns: {
       type: Array
@@ -260,9 +281,19 @@ const TABLE_STATUS = {
   },
   data() {
     let filters = { rules: [] };
-    this.rules && this.rules.length > 0 && (filters.rules = this.rules), this.filters && (filters = this.filters), this.filter && (filters = Object.assign({}, filters, this.filter));
+    if (this.rules && this.rules.length > 0) {
+      filters.rules = this.rules;
+    }
+    if (this.filters) {
+      filters = this.filters;
+    }
+    if (this.filter) {
+      filters = Object.assign({}, filters, this.filter);
+    }
     let model = {};
-    this.model && (model = cloneDeep(this.model));
+    if (this.model) {
+      model = cloneDeep(this.model);
+    }
     const limit = this.pageSize;
     return {
       TABLE_STATUS: Object.freeze(TABLE_STATUS),
@@ -282,25 +313,33 @@ const TABLE_STATUS = {
   },
   computed: {
     guard() {
-      return this.reloadOnModelChange ? {
-        asc: this.page.ascs,
-        desc: this.page.descs,
-        page: this.page.page,
-        model: this.page.model,
-        filters: this.page.filters
-      } : {
-        asc: this.page.ascs,
-        desc: this.page.descs,
-        page: this.page.page,
-        filters: this.page.filters
-      };
+      if (this.reloadOnModelChange) {
+        return {
+          asc: this.page.ascs,
+          desc: this.page.descs,
+          page: this.page.page,
+          model: this.page.model,
+          filters: this.page.filters
+        };
+      } else {
+        return {
+          asc: this.page.ascs,
+          desc: this.page.descs,
+          page: this.page.page,
+          filters: this.page.filters
+        };
+      }
     },
     method() {
       return this.httpGet ? this.httpGet : this.httpPost;
     },
     indexWidth() {
       const indexStr = `${(this.page.page - 1) * this.page.limit + this.records.length}`;
-      return indexStr.length > 3 ? 50 + (indexStr.length - 3) * 10 : 50;
+      if (indexStr.length > 3) {
+        return 50 + (indexStr.length - 3) * 10;
+      } else {
+        return 50;
+      }
     },
     mergeAttrs() {
       return merge({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
@@ -317,7 +356,7 @@ const TABLE_STATUS = {
       this.getPage();
     },
     model: {
-      deep: !0,
+      deep: true,
       handler(newVal) {
         this.setModel(newVal);
       }
@@ -325,7 +364,7 @@ const TABLE_STATUS = {
   },
   created() {
     this.$watch(() => this.guard, this.getPage, {
-      deep: !0,
+      deep: true,
       immediate: this.immediate
     });
   },
@@ -342,24 +381,31 @@ const TABLE_STATUS = {
         var _a2;
         return ((_a2 = value.$options) == null ? void 0 : _a2.name) === "ElTableBody";
       });
-      body && ((_a = body.$refs.tooltip) == null || _a.hide()), this.$emit("row-dblclick", ...args);
+      if (body) {
+        (_a = body.$refs.tooltip) == null ? void 0 : _a.hide();
+      }
+      this.$emit("row-dblclick", ...args);
     },
     updateTableScrollPosition() {
       return __async(this, null, function* () {
-        this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
+        if (this.$refs.table.bodyWrapper) {
+          this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
+        }
       });
     },
     filterTableProperties,
     filterTableEvents,
     filterTableColumnProperties,
     onTableScroll() {
-      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
+      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop;
+      this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
     },
     onSortChange({
       prop,
       order
     }) {
-      this.page.ascs = order === "ascending" ? prop : "", this.page.descs = order === "descending" ? prop : "";
+      this.page.ascs = order === "ascending" ? prop : "";
+      this.page.descs = order === "descending" ? prop : "";
     },
     onCurrentChange(currentRow) {
       this.currentRow = currentRow;
@@ -369,7 +415,8 @@ const TABLE_STATUS = {
      * @param {FilterRule} rule
      */
     addRule(rule) {
-      this.removeRule(rule.field), this.page.filters.rules.push(rule);
+      this.removeRule(rule.field);
+      this.page.filters.rules.push(rule);
     },
     addRules(rules) {
       rules.forEach((value) => this.addRule(value));
@@ -378,14 +425,18 @@ const TABLE_STATUS = {
       this.$set(this.page.model, field, value);
     },
     setModel(model) {
-      this.page.page = 1, this.page.model = cloneDeep(model);
+      this.page.page = 1;
+      this.page.model = cloneDeep(model);
     },
     deleteModelField(field) {
       delete this.page.model[field];
     },
     removeRule(field) {
-      const rules = this.page.filters.rules, index = rules.findIndex((value) => value.field === field);
-      index > -1 && rules.splice(index, 1);
+      const rules = this.page.filters.rules;
+      const index = rules.findIndex((value) => value.field === field);
+      if (index > -1) {
+        rules.splice(index, 1);
+      }
     },
     addFilter({
       field,
@@ -408,24 +459,38 @@ const TABLE_STATUS = {
       this.$refs.table.clearSelection();
     },
     search() {
-      this.setModel(this.model), this.getPage();
+      this.setModel(this.model);
+      this.getPage();
     },
     getPage() {
       return __async(this, null, function* () {
         var _b;
         if (hasOwn(this.$attrs, "data")) {
-          this.records = this.$attrs.data, this.page.page = 1, this.page.total = this.records.length, this.page.limit = this.page.total;
+          this.records = this.$attrs.data;
+          this.page.page = 1;
+          this.page.total = this.records.length;
+          this.page.limit = this.page.total;
           return;
         }
         this.records = [];
         let res;
-        const _a = this.page, { filters } = _a, rest = __objRest(_a, ["filters"]), page = __spreadValues({}, rest);
-        if ((_b = filters == null ? void 0 : filters.rules) != null && _b.length && (page.filters = { rules: filters.rules }), this.api || this.url) {
+        const _a = this.page, { filters } = _a, rest = __objRest(_a, ["filters"]);
+        const page = __spreadValues({}, rest);
+        if ((_b = filters == null ? void 0 : filters.rules) == null ? void 0 : _b.length) {
+          page.filters = { rules: filters.rules };
+        }
+        if (this.api || this.url) {
           this.tableStatus = TABLE_STATUS.loading;
           try {
-            this.api && (res = yield this.api(page)), this.url && (res = yield this.method(this.url, page));
+            if (this.api) {
+              res = yield this.api(page);
+            }
+            if (this.url) {
+              res = yield this.method(this.url, page);
+            }
           } catch (e) {
-            this.tableStatus = TABLE_STATUS.error, console.error(e);
+            this.tableStatus = TABLE_STATUS.error;
+            console.error(e);
             return;
           }
         } else {
@@ -435,8 +500,17 @@ const TABLE_STATUS = {
           });
           return;
         }
-        const { data } = res || {}, { total, records } = data || {};
-        this.page.total = Number(total), this.records = records, !records || !records.length ? this.tableStatus = TABLE_STATUS.empty : this.tableStatus = TABLE_STATUS.success, this.$refs.table.doLayout(), this.$emit("page-loaded", data);
+        const { data } = res || {};
+        const { total, records } = data || {};
+        this.page.total = Number(total);
+        this.records = records;
+        if (!records || !records.length) {
+          this.tableStatus = TABLE_STATUS.empty;
+        } else {
+          this.tableStatus = TABLE_STATUS.success;
+        }
+        this.$refs.table.doLayout();
+        this.$emit("page-loaded", data);
       });
     },
     refresh() {
@@ -452,23 +526,30 @@ const TABLE_STATUS = {
       });
     },
     scrollTo(top, left) {
-      top && (this.$refs.table.bodyWrapper.scrollTop = top), left && (this.$refs.table.bodyWrapper.scrollLeft = left);
+      if (top) {
+        this.$refs.table.bodyWrapper.scrollTop = top;
+      }
+      if (left) {
+        this.$refs.table.bodyWrapper.scrollLeft = left;
+      }
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const PageableTable = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/pageable-table/style.css

@@ -1 +1,72 @@
-.pageable-table{flex:1 1 auto;position:relative;height:100%}.pageable-table .single-select-column .el-radio__label{padding:0}.pageable-table.auto-height{position:static;height:auto}.pageable-table.auto-height .el-table{position:static;min-height:200px}.pageable-table.auto-height .pageable-table-wrapper{position:static}.pageable-table .pageable-table-wrapper{display:flex;flex-direction:column;position:absolute;inset:0}.pageable-table .el-pagination{background-color:#fff}.pageable-table .table-status-icon{font-size:20px}.pageable-table .pageable-table-loading{display:inline-flex;align-items:center}.pageable-table .pageable-table-error{display:inline-flex;align-items:center;color:red;border:1px solid #fca4a4}.pageable-table .pageable-table-error:hover{background-color:#fff0f0}.pageable-table .pageable-table-total{padding:0 10px 10px}.pageable-table .underline{position:relative}.pageable-table .underline:after{position:absolute;bottom:0;left:0;z-index:1;width:100%;height:1px;background-color:#606266;content:""}.pageable-table .total{padding:10px}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.pageable-table {
+  flex: 1 1 auto;
+  position: relative;
+  height: 100%;
+}
+.pageable-table .single-select-column .el-radio__label {
+  padding: 0;
+}
+.pageable-table.auto-height {
+  position: static;
+  height: auto;
+}
+.pageable-table.auto-height .el-table {
+  position: static;
+  min-height: 200px;
+}
+.pageable-table.auto-height .pageable-table-wrapper {
+  position: static;
+}
+.pageable-table .pageable-table-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.pageable-table .el-pagination {
+  background-color: #fff;
+}
+.pageable-table .table-status-icon {
+  font-size: 20px;
+}
+.pageable-table .pageable-table-loading {
+  display: inline-flex;
+  align-items: center;
+}
+.pageable-table .pageable-table-error {
+  display: inline-flex;
+  align-items: center;
+  color: #f00;
+  border: 1px solid #fca4a4;
+}
+.pageable-table .pageable-table-error:hover {
+  background-color: #fff0f0;
+}
+.pageable-table .pageable-table-total {
+  padding: 0 10px 10px;
+}
+.pageable-table .underline {
+  position: relative;
+}
+.pageable-table .underline::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 1px;
+  background-color: #606266;
+  content: "";
+}
+.pageable-table .total {
+  padding: 10px;
+}