@web-utils/component 1.2.5 → 1.2.7

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

@@ -1 +1,429 @@
-var v=Object.defineProperty,w=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var r=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var u=(e,t,a)=>t in e?v(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,n=(e,t)=>{for(var a in t||(t={}))c.call(t,a)&&u(e,a,t[a]);if(r)for(var a of r(t))g.call(t,a)&&u(e,a,t[a]);return e},b=(e,t)=>w(e,x(t));var f=(e,t)=>{var a={};for(var l in e)c.call(e,l)&&t.indexOf(l)<0&&(a[l]=e[l]);if(e!=null&&r)for(var l of r(e))t.indexOf(l)<0&&g.call(e,l)&&(a[l]=e[l]);return a};import{cloneDeep as m,merge as $,hasOwn as C}from"@web-utils/core";import{f as y,d as k,e as P}from"../../chunks/8473fc69.js";import{n as B}from"../../chunks/6499de3a.js";var E=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{class:["pageable-table",{"auto-height":e.autoHeight}]},[a("div",{staticClass:"pageable-table-wrapper"},[e._t("toolbar"),a("ElTable",e._g(e._b({ref:"table",class:["flex-item",{"header-bold":e.headerBold}],attrs:{data:e.records,border:e.border},on:{"hook:updated":e.updateTableScrollPosition,"sort-change":e.onSortChange,"row-dblclick":e.rowDbClick,"current-change":e.onCurrentChange},scopedSlots:e._u([{key:"empty",fn:function(){return[e._t("empty",function(){return[e.tableStatus===e.TABLE_STATUS.loading?[a("span",{staticClass:"pageable-table-loading"},[a("i",{staticClass:"table-status-icon el-icon-loading"}),e._v(" \u52A0\u8F7D\u4E2D...")])]:e.tableStatus===e.TABLE_STATUS.error?[a("ElButton",{staticClass:"pageable-table-error",attrs:{icon:"table-status-icon fa fa-frown-o"},on:{click:e.refresh}},[e._v(" \u52A0\u8F7D\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u8BD5\uFF01 ")])]:[e._v(" \u6682\u65E0\u6570\u636E ")]]})]},proxy:!0},{key:"append",fn:function(){return[e._t("append")]},proxy:!0}],null,!0)},"ElTable",e.filterTableProperties(e.mergeAttrs),!1),e.filterTableEvents(e.$listeners)),[e.multiple&&e.selection?a("TableColumn",{key:"multiple",attrs:{type:"selection",width:"45",align:"center"}}):e._e(),!e.multiple&&e.selection?a("TableColumn",{key:"single",attrs:{type:"single-selection","class-name":"single-select-column",width:"45",align:"center"},scopedSlots:e._u([{key:"header",fn:function(){return[a("ElRadio",{attrs:{value:!!e.currentRow,label:!0}},[a("span")])]},proxy:!0},{key:"default",fn:function(l){var s=l.row;return[a("ElRadio",{attrs:{label:!0,value:e.currentRow&&e.currentRow[e.$attrs["row-key"]||"id"]===s[e.$attrs["row-key"]||"id"]}},[a("span")])]}}],null,!1,307797321)}):e._e(),e.index?a("TableColumn",{key:"order",attrs:{type:"index",label:"\u5E8F\u53F7",width:e.indexWidth,align:"center"},scopedSlots:e._u([{key:"default",fn:function(l){var s=l.$index;return[e._v(" "+e._s((e.page.page-1)*e.page.limit+s+1||s+1)+" ")]}}],null,!1,4238275121)}):e._e(),e._t("default",function(){return[e.columns&&e.columns.length?e._l(e.headers,function(l,s){return a("TableColumn",e._b({key:`${l.prop}-${s}`},"TableColumn",l,!1))}):a("TableColumn",{attrs:{label:"\u70B9\u51FB\u8868\u683C\u884C\u590D\u5236\u6A21\u677F"},scopedSlots:e._u([{key:"default",fn:function(l){var s=l.row;return[a("pre",{staticClass:"pointer"},[e._v(e._s(JSON.stringify(s,null,"	")))])]}}])})]})],2),a("ElPagination",{staticClass:"flex-not-shrink",attrs:{"current-page":e.page.page,"hide-on-single-page":e.hideOnSinglePage,"page-size":e.page.limit,total:e.page.total,background:"",layout:"total, prev, pager, next, jumper"},on:{"current-change":function(l){e.page.page=l}}})],2)])},A=[];const i={loading:1,error:-1,empty:2,success:0},R={name:"PageableTable",bus:{reloadTableView(e){e===this.viewId&&this.getPage()}},inheritAttrs:!1,props:{viewId:{type:String},url:{type:String},httpGet:Boolean,hideOnSinglePage:Boolean,api:{type:Function},filters:{type:Object},filter:{type:Object},rules:{type:Array,default:()=>[]},model:{type:Object},ascs:{type:String,default:""},descs:{type:String,default:""},headerBold:Boolean,autoHeight:Boolean,immediate:{type:Boolean,default:!0},index:{type:Boolean,default:!0},multiple:{type:Boolean,default:!0},selection:{type:Boolean,default:!0},border:{type:Boolean,default:!0},reloadOnModelChange:{type:Boolean,default:!1},columns:{type:Array},pageSize:{type:Number,default:25}},data(){let e={rules:[]};this.rules&&this.rules.length>0&&(e.rules=this.rules),this.filters&&(e=this.filters),this.filter&&(e=Object.assign({},e,this.filter));let t={};this.model&&(t=m(this.model));const a=this.pageSize;return{TABLE_STATUS:Object.freeze(i),tableStatus:i.empty,records:[],currentRow:null,page:{total:0,page:1,limit:a,ascs:this.ascs,descs:this.descs,model:t,filters:e}}},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}},method(){return this.httpGet?httpGet:httpPost},indexWidth(){const e=`${(this.page.page-1)*this.page.limit+this.records.length}`;return e.length>3?50+(e.length-3)*10:50},mergeAttrs(){return $({},this.$attrs,{height:this.autoHeight?null:"auto"})},headers(){var e;return((e=this.columns)==null?void 0:e.map(y))||[]}},watch:{url:{handler:"reload"},api:{handler:"reload"},"$attrs.data"(){this.getPage()},model:{deep:!0,handler(e){this.setModel(e)}}},created(){this.$watch(()=>this.guard,this.getPage,{deep:!0,immediate:this.immediate})},mounted(){this.$refs.table.bodyWrapper.addEventListener("scroll",this.onTableScroll)},beforeDestroy(){this.$refs.table.bodyWrapper.removeEventListener("scroll",this.onTableScroll)},methods:{rowDbClick(...e){var a;const t=this.$refs.table.$children.find(l=>{var s;return((s=l.$options)==null?void 0:s.name)==="ElTableBody"});t&&((a=t.$refs.tooltip)==null||a.hide()),this.$emit("row-dblclick",...e)},async updateTableScrollPosition(){this.$refs.table.bodyWrapper&&this.scrollTo(this.tableScrollTop,this.tableScrollLeft)},filterTableProperties:k,filterTableEvents:P,filterTableColumnProperties:y,onTableScroll(){this.tableScrollTop=this.$refs.table.bodyWrapper.scrollTop,this.tableScrollLeft=this.$refs.table.bodyWrapper.scrollLeft},onSortChange({prop:e,order:t}){this.page.ascs=t==="ascending"?e:"",this.page.descs=t==="descending"?e:""},onCurrentChange(e){this.currentRow=e},addRule(e){this.removeRule(e.field),this.page.filters.rules.push(e)},addRules(e){e.forEach(t=>this.addRule(t))},setModelField(e,t){this.$set(this.page.model,e,t)},setModel(e){this.page.page=1,this.page.model=m(e)},deleteModelField(e){delete this.page.model[e]},removeRule(e){const t=this.page.filters.rules,a=t.findIndex(l=>l.field===e);a>-1&&t.splice(a,1)},addFilter({field:e,op:t,value:a}){this.page.filters=Object.assign({},this.page.filters,{rules:[{field:e,op:t,value:a}],op:"and"})},clearFilters(){this.page.filters={}},clearSelection(){this.$refs.table.clearSelection()},search(){this.setModel(this.model),this.getPage()},async getPage(){var h;if(C(this.$attrs,"data")){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 e;const d=this.page,{filters:t,total:a}=d,l=f(d,["filters","total"]),s=n({},l);if((h=t==null?void 0:t.rules)!=null&&h.length&&(s.filters={rules:t.rules}),this.api||this.url){this.tableStatus=i.loading;try{this.api&&(e=await this.api(s)),this.url&&(e=await this.method(this.url,s))}catch(T){this.tableStatus=i.error,console.error(T);return}}else{this.$notify.warning({title:"\u5F00\u53D1\u63D0\u793A\uFF01",message:"PageableTable \u8BF7\u63D0\u4F9B url(String) \u6216 api(Function) \u5C5E\u6027"});return}const{data:p}=e||{},{total:S,records:o}=p||{};this.page.total=Number(S),this.records=o,!o||!o.length?this.tableStatus=i.empty:this.tableStatus=i.success,this.$refs.table.doLayout(),this.$emit("page-loaded",p)},async refresh(){await this.getPage()},async reload(){this.page=b(n({},this.$options.data.call(this).page),{total:this.page.total})},scrollTo(e,t){e&&(this.$refs.table.bodyWrapper.scrollTop=e),t&&(this.$refs.table.bodyWrapper.scrollLeft=t)}}},_={};var O=B(R,E,A,!1,L,null,null,null);function L(e){for(let t in _)this[t]=_[t]}var W=function(){return O.exports}();export{W as default};
+import { cloneDeep as n, merge as c, hasOwn as g } from "@web-utils/core";
+import { f as d, d as f, e as b } from "../../chunks/2bd4e340.js";
+import { n as m } from "../../chunks/6499de3a.js";
+var y = function() {
+  var e = this, t = e.$createElement, a = e._self._c || t;
+  return a("div", {
+    class: ["pageable-table", {
+      "auto-height": e.autoHeight
+    }]
+  }, [a("div", {
+    staticClass: "pageable-table-wrapper"
+  }, [e._t("toolbar"), a("ElTable", e._g(e._b({
+    ref: "table",
+    class: ["flex-item", {
+      "header-bold": e.headerBold
+    }],
+    attrs: {
+      data: e.records,
+      border: e.border
+    },
+    on: {
+      "hook:updated": e.updateTableScrollPosition,
+      "sort-change": e.onSortChange,
+      "row-dblclick": e.rowDbClick,
+      "current-change": e.onCurrentChange
+    },
+    scopedSlots: e._u([{
+      key: "empty",
+      fn: function() {
+        return [e._t("empty", function() {
+          return [e.tableStatus === e.TABLE_STATUS.loading ? [a("span", {
+            staticClass: "pageable-table-loading"
+          }, [a("i", {
+            staticClass: "table-status-icon el-icon-loading"
+          }), e._v(" \u52A0\u8F7D\u4E2D...")])] : e.tableStatus === e.TABLE_STATUS.error ? [a("ElButton", {
+            staticClass: "pageable-table-error",
+            attrs: {
+              icon: "table-status-icon fa fa-frown-o"
+            },
+            on: {
+              click: e.refresh
+            }
+          }, [e._v(" \u52A0\u8F7D\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u8BD5\uFF01 ")])] : [e._v(" \u6682\u65E0\u6570\u636E ")]];
+        })];
+      },
+      proxy: !0
+    }, {
+      key: "append",
+      fn: function() {
+        return [e._t("append")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "ElTable", e.filterTableProperties(e.mergeAttrs), !1), e.filterTableEvents(e.$listeners)), [e.multiple && e.selection ? a("TableColumn", {
+    key: "multiple",
+    attrs: {
+      type: "selection",
+      width: "45",
+      align: "center"
+    }
+  }) : e._e(), !e.multiple && e.selection ? a("TableColumn", {
+    key: "single",
+    attrs: {
+      type: "single-selection",
+      "class-name": "single-select-column",
+      width: "45",
+      align: "center"
+    },
+    scopedSlots: e._u([{
+      key: "header",
+      fn: function() {
+        return [a("ElRadio", {
+          attrs: {
+            value: !!e.currentRow,
+            label: !0
+          }
+        }, [a("span")])];
+      },
+      proxy: !0
+    }, {
+      key: "default",
+      fn: function(s) {
+        var l = s.row;
+        return [a("ElRadio", {
+          attrs: {
+            label: !0,
+            value: e.currentRow && e.currentRow[e.$attrs["row-key"] || "id"] === l[e.$attrs["row-key"] || "id"]
+          }
+        }, [a("span")])];
+      }
+    }], null, !1, 307797321)
+  }) : e._e(), e.index ? a("TableColumn", {
+    key: "order",
+    attrs: {
+      type: "index",
+      label: "\u5E8F\u53F7",
+      width: e.indexWidth,
+      align: "center"
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function(s) {
+        var l = s.$index;
+        return [e._v(" " + e._s((e.page.page - 1) * e.page.limit + l + 1 || l + 1) + " ")];
+      }
+    }], null, !1, 4238275121)
+  }) : e._e(), e._t("default", function() {
+    return [e.columns && e.columns.length ? e._l(e.headers, function(s, l) {
+      return a("TableColumn", e._b({
+        key: `${s.prop}-${l}`
+      }, "TableColumn", s, !1));
+    }) : a("TableColumn", {
+      attrs: {
+        label: "\u70B9\u51FB\u8868\u683C\u884C\u590D\u5236\u6A21\u677F"
+      },
+      scopedSlots: e._u([{
+        key: "default",
+        fn: function(s) {
+          var l = s.row;
+          return [a("pre", {
+            staticClass: "pointer"
+          }, [e._v(e._s(JSON.stringify(l, null, "	")))])];
+        }
+      }])
+    })];
+  })], 2), a("ElPagination", {
+    staticClass: "flex-not-shrink",
+    attrs: {
+      "current-page": e.page.page,
+      "hide-on-single-page": e.hideOnSinglePage,
+      "page-size": e.page.limit,
+      total: e.page.total,
+      background: "",
+      layout: "total, prev, pager, next, jumper"
+    },
+    on: {
+      "current-change": function(s) {
+        e.page.page = s;
+      }
+    }
+  })], 2)]);
+}, _ = [];
+const r = {
+  loading: 1,
+  error: -1,
+  empty: 2,
+  success: 0
+}, S = {
+  name: "PageableTable",
+  bus: {
+    reloadTableView(e) {
+      e === this.viewId && this.getPage();
+    }
+  },
+  inheritAttrs: !1,
+  props: {
+    viewId: {
+      type: String
+    },
+    url: {
+      type: String
+    },
+    httpGet: Boolean,
+    hideOnSinglePage: Boolean,
+    api: {
+      type: Function
+    },
+    filters: {
+      type: Object
+    },
+    filter: {
+      type: Object
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    model: {
+      type: Object
+    },
+    ascs: {
+      type: String,
+      default: ""
+    },
+    descs: {
+      type: String,
+      default: ""
+    },
+    headerBold: Boolean,
+    autoHeight: Boolean,
+    immediate: {
+      type: Boolean,
+      default: !0
+    },
+    index: {
+      type: Boolean,
+      default: !0
+    },
+    multiple: {
+      type: Boolean,
+      default: !0
+    },
+    selection: {
+      type: Boolean,
+      default: !0
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    reloadOnModelChange: {
+      type: Boolean,
+      default: !1
+    },
+    columns: {
+      type: Array
+    },
+    pageSize: {
+      type: Number,
+      default: 25
+    }
+  },
+  data() {
+    let e = { rules: [] };
+    this.rules && this.rules.length > 0 && (e.rules = this.rules), this.filters && (e = this.filters), this.filter && (e = Object.assign({}, e, this.filter));
+    let t = {};
+    this.model && (t = n(this.model));
+    const a = this.pageSize;
+    return {
+      TABLE_STATUS: Object.freeze(r),
+      tableStatus: r.empty,
+      records: [],
+      currentRow: null,
+      page: {
+        total: 0,
+        page: 1,
+        limit: a,
+        ascs: this.ascs,
+        descs: this.descs,
+        model: t,
+        filters: e
+      }
+    };
+  },
+  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
+      };
+    },
+    method() {
+      return this.httpGet ? httpGet : httpPost;
+    },
+    indexWidth() {
+      const e = `${(this.page.page - 1) * this.page.limit + this.records.length}`;
+      return e.length > 3 ? 50 + (e.length - 3) * 10 : 50;
+    },
+    mergeAttrs() {
+      return c({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
+    },
+    headers() {
+      var e;
+      return ((e = this.columns) == null ? void 0 : e.map(d)) || [];
+    }
+  },
+  watch: {
+    url: { handler: "reload" },
+    api: { handler: "reload" },
+    "$attrs.data"() {
+      this.getPage();
+    },
+    model: {
+      deep: !0,
+      handler(e) {
+        this.setModel(e);
+      }
+    }
+  },
+  created() {
+    this.$watch(() => this.guard, this.getPage, {
+      deep: !0,
+      immediate: this.immediate
+    });
+  },
+  mounted() {
+    this.$refs.table.bodyWrapper.addEventListener("scroll", this.onTableScroll);
+  },
+  beforeDestroy() {
+    this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
+  },
+  methods: {
+    rowDbClick(...e) {
+      var a;
+      const t = this.$refs.table.$children.find((s) => {
+        var l;
+        return ((l = s.$options) == null ? void 0 : l.name) === "ElTableBody";
+      });
+      t && ((a = t.$refs.tooltip) == null || a.hide()), this.$emit("row-dblclick", ...e);
+    },
+    async updateTableScrollPosition() {
+      this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
+    },
+    filterTableProperties: f,
+    filterTableEvents: b,
+    filterTableColumnProperties: d,
+    onTableScroll() {
+      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
+    },
+    onSortChange({
+      prop: e,
+      order: t
+    }) {
+      this.page.ascs = t === "ascending" ? e : "", this.page.descs = t === "descending" ? e : "";
+    },
+    onCurrentChange(e) {
+      this.currentRow = e;
+    },
+    addRule(e) {
+      this.removeRule(e.field), this.page.filters.rules.push(e);
+    },
+    addRules(e) {
+      e.forEach((t) => this.addRule(t));
+    },
+    setModelField(e, t) {
+      this.$set(this.page.model, e, t);
+    },
+    setModel(e) {
+      this.page.page = 1, this.page.model = n(e);
+    },
+    deleteModelField(e) {
+      delete this.page.model[e];
+    },
+    removeRule(e) {
+      const t = this.page.filters.rules, a = t.findIndex((s) => s.field === e);
+      a > -1 && t.splice(a, 1);
+    },
+    addFilter({
+      field: e,
+      op: t,
+      value: a
+    }) {
+      this.page.filters = Object.assign({}, this.page.filters, {
+        rules: [{
+          field: e,
+          op: t,
+          value: a
+        }],
+        op: "and"
+      });
+    },
+    clearFilters() {
+      this.page.filters = {};
+    },
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
+    search() {
+      this.setModel(this.model), this.getPage();
+    },
+    async getPage() {
+      var o;
+      if (g(this.$attrs, "data")) {
+        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 e;
+      const { filters: t, ...a } = this.page, s = { ...a };
+      if ((o = t == null ? void 0 : t.rules) != null && o.length && (s.filters = { rules: t.rules }), this.api || this.url) {
+        this.tableStatus = r.loading;
+        try {
+          this.api && (e = await this.api(s)), this.url && (e = await this.method(this.url, s));
+        } catch (p) {
+          this.tableStatus = r.error, console.error(p);
+          return;
+        }
+      } else {
+        this.$notify.warning({
+          title: "\u5F00\u53D1\u63D0\u793A\uFF01",
+          message: "PageableTable \u8BF7\u63D0\u4F9B url(String) \u6216 api(Function) \u5C5E\u6027"
+        });
+        return;
+      }
+      const { data: l } = e || {}, { total: u, records: i } = l || {};
+      this.page.total = Number(u), this.records = i, !i || !i.length ? this.tableStatus = r.empty : this.tableStatus = r.success, this.$refs.table.doLayout(), this.$emit("page-loaded", l);
+    },
+    async refresh() {
+      await this.getPage();
+    },
+    async reload() {
+      this.page = {
+        ...this.$options.data.call(this).page,
+        total: this.page.total
+      };
+    },
+    scrollTo(e, t) {
+      e && (this.$refs.table.bodyWrapper.scrollTop = e), t && (this.$refs.table.bodyWrapper.scrollLeft = t);
+    }
+  }
+}, h = {};
+var T = /* @__PURE__ */ m(
+  S,
+  y,
+  _,
+  !1,
+  v,
+  null,
+  null,
+  null
+);
+function v(e) {
+  for (let t in h)
+    this[t] = h[t];
+}
+const k = /* @__PURE__ */ function() {
+  return T.exports;
+}();
+export {
+  k as default
+};