br-dionysus 1.5.1 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -12
- package/attributes.json +1 -1
- package/dist/br-dionysus.es.js +3526 -3506
- package/dist/br-dionysus.umd.js +8 -8
- package/dist/index.css +1 -1
- package/dist/packages/Hook/useTableConfig/useTableConfig.d.ts +18 -13
- package/dist/packages/MSelectTable/src/MSelectTable.vue.d.ts +1 -1
- package/dist/packages/MSelectTableV1/src/MSelectTableV1.vue.d.ts +1 -1
- package/dist/packages/MTable/src/MTable.vue.d.ts +1 -1
- package/dist/packages/MTableColumn/src/MTableColumn.vue.d.ts +9 -1
- package/package.json +1 -1
- package/packages/Hook/useTableConfig/demo.vue +110 -11
- package/packages/Hook/useTableConfig/useTableConfig.ts +36 -10
- package/packages/MTable/src/MTable.vue +7 -9
- package/packages/MTableColumn/docs/demo.vue +7 -6
- package/packages/MTableColumn/src/MTableColumn.vue +25 -4
- package/packages/Tool/moneyFormat/moneyFormat.ts +1 -1
- package/web-types.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";[data-v-aa54745e]:root{--br-dionysus-primary-color: #646CFFFF;--br-dionysus-primary-bg-color: #979fff}.u-icon-box[data-v-aa54745e]{display:none}.g-box[data-v-aa54745e]{position:relative;overflow:hidden;padding-left:16px;padding-right:16px;width:100%;background-color:#fff;box-sizing:border-box}.g-box .u-page-btn[data-v-aa54745e]{position:absolute;bottom:0;height:33px;border:0;box-sizing:border-box;background-color:#fff;opacity:.6;cursor:pointer}.g-box .s-previous-btn[data-v-aa54745e]{left:0}.g-box .s-next-btn[data-v-aa54745e]{right:0;transform:rotate(180deg)}.g-dionysus-box[data-v-aa54745e]{overflow:hidden;width:100%}.g-tab-page-box[data-v-aa54745e]{display:flex;color:#4a4a4a;white-space:nowrap;box-sizing:border-box;box-shadow:2px 0 8px #1d23290d;transform:translate(0);transition:.2s}.g-tab-page-box .u-li[data-v-aa54745e]{display:inline-block;position:relative;height:33px;font-size:14px;box-sizing:border-box;cursor:pointer}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]{display:flex;position:relative;z-index:1;padding:6px 8px;height:100%;align-items:center;background-color:#fff;border-radius:6px 6px 0 0;box-sizing:border-box}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 0;pointer-events:none}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 6px 0;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true] .u-gp[data-v-aa54745e]:after{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-hover-after=true] .u-gp[data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active-before=true] .u-gp[data-v-aa54745e]:after{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-active-after=true] .u-gp[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]{color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li .u-icon[data-v-aa54745e]{margin-right:8px;pointer-events:none}.g-tab-page-box .u-li .u-sn[data-v-aa54745e]{pointer-events:none}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]{position:relative;margin-left:4px;width:14px;height:14px;font-size:14px;border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:"";border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:#9ca3af}.g-tab-page-box .u-li[data-active=true] .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .s-icon[data-v-aa54745e]{display:block;position:relative;width:14px;height:14px}.g-tab-page-box .s-icon[data-v-aa54745e]:after{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(45deg)}.g-tab-page-box .s-icon[data-v-aa54745e]:before{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(-45deg)}.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=false][data-hover=false][data-active-before=false][data-hover-before=false] .u-sn[data-v-aa54745e]:after{position:absolute;top:50%;right:0;z-index:2;content:"";width:1px;height:50%;transform:translateY(-50%);background-color:#4a4a4a}.g-tab-page-box .u-li:nth-last-of-type(1)[data-active=false][data-hover=false] .u-sn[data-v-aa54745e]:after{background-color:#0000!important}.g-m-input-number-box[data-v-5002f7b6]{position:relative;width:100%}.g-m-input-number-box .m-input-number[data-v-5002f7b6]{width:100%}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]{display:inline-block;position:absolute;top:0;left:0;margin-bottom:0;padding-left:15px;padding-right:15px;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-feature-settings:normal;font-stretch:100%;font-weight:400;text-indent:0;color:#606266;text-align:left;letter-spacing:normal;word-spacing:0;background-color:#0000;border-radius:4px;border:1px solid rgba(0,0,0,0);box-sizing:border-box;cursor:text;pointer-events:none}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]:hover{border-color:#c0c4cc}.g-m-input-number-box .u-text[data-thousandth-place=true][data-size=mini][data-v-5002f7b6]{font-size:12px;height:28px;line-height:28px}.g-m-input-number-box .u-text[data-thousandth-place=true][data-disabled=true][data-v-5002f7b6]{color:#00000040}.g-m-input-number-box .u-text[data-thousandth-place=true][data-focus=true][data-v-5002f7b6]{color:#0000}.g-m-input-number-box[data-is-table-mini=true] .u-text[data-size=mini][data-v-5002f7b6]{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing] .u-text[data-v-5002f7b6]{padding-left:0}.g-m-input-number-box .m-input-number .el-input__inner{text-align:left}.g-m-input-number-box .m-input-number[data-thousandth-place=true] .el-input__inner{color:#0000}.g-m-input-number-box .m-input-number[data-focus=true] .el-input__inner{color:#606266}.g-m-input-number-box .m-input-number[no-border=true] .el-input__inner{border:0}.g-m-input-number-box[data-is-table-mini=true] .m-input-number .el-input__inner{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing=true] .m-input-number .el-input__inner{padding-left:0}.g-inline-box[data-v-fbfdbd5f]{margin-bottom:14px;padding-top:10px;border:1px solid var(--el-border-color-lighter);border-radius:4px}.m-inline-btn[data-v-fbfdbd5f]{padding:0 14px 10px}.m-inline[data-v-fbfdbd5f]{display:flex;position:relative;width:100%}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-fbfdbd5f]{padding-top:10px}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-fbfdbd5f]:before{position:absolute;top:0;left:50%;content:"";width:calc(100% - 28px);height:1px;background-color:var(--el-border-color-lighter);transform:translate(-50%)}.u-btn-gp[data-v-fbfdbd5f]{display:flex;padding-bottom:10px;padding-left:14px;padding-right:14px;align-items:center;box-sizing:border-box}.u-row[data-v-fbfdbd5f]{display:flex;overflow:hidden;max-height:34px;flex:1}.u-row[data-unfold=true][data-v-fbfdbd5f]{max-height:none!important}.u-btn-unfold[data-v-fbfdbd5f]{margin-left:8px;width:12px;height:24px;line-height:24px;text-align:center;color:var(--el-text-color-regular);transform:rotate(90deg);cursor:pointer}.u-btn-unfold[data-unfold=true][data-v-fbfdbd5f]{transform:rotate(270deg)}.g-inline-box .m-inline[dataCover] [data-box]{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--m-inline-min-width),1fr))}.g-inline-box .m-inline[dataCover] [data-box] [data-item]{padding-bottom:10px;min-width:var(--m-inline-min-width);max-width:var(--m-inline-max-width)}.g-inline-box .m-inline[dataCover] .el-form-item{margin-bottom:0;width:100%}.g-inline-box .m-inline[dataCover] .el-form-item .el-input,.g-inline-box .m-inline[dataCover] .el-form-item .el-cascader,.g-inline-box .m-inline[dataCover] .el-form{width:100%}.g-inline-box .m-inline[dataCover] .el-form .u-it-gp{display:flex}.g-inline-box .m-inline[dataCover] .u-row[data-single-line=true] .el-form{display:flex;justify-content:flex-start}.g-skin-config-box[data-v-56c57a90]{display:flex}.g-skin-config-box .u-tt[data-v-56c57a90]{padding:0 24px;line-height:50px;box-shadow:0 1px 2px #00152914}.g-skin-config-box .u-box[data-v-56c57a90]{display:flex;padding:20px 24px;height:calc(100% - 50px);flex-direction:column}.g-skin-config-box .u-box .u-box-tt[data-v-56c57a90]{margin:34px 0}.g-skin-config-box .u-box .u-group[data-v-56c57a90]{display:flex;margin-bottom:12px;justify-content:space-between;align-items:center;color:var(--m-fc-body)}.g-skin-config-box .u-box .u-gulp[data-v-56c57a90]{display:flex;margin:0 -10px;flex-direction:column;flex-wrap:wrap;flex:1}.g-skin-config-box .u-box .u-list[data-v-56c57a90]{display:flex;flex-wrap:wrap}.g-skin-config-box .u-box .u-list .u-li[data-v-56c57a90]{display:flex;margin-bottom:10px;width:12.5%;justify-content:center}.g-skin-config-box .u-box .u-list .u-li .u-color[data-v-56c57a90]{display:flex;width:20px;height:20px;color:#fff;align-items:center;justify-content:center;cursor:pointer}.g-skin-config-box .u-pc[data-v-56c57a90]{display:flex;margin-top:10px;width:100%;flex:1;justify-content:center}.u-btn[data-v-56c57a90]{display:flex;font-size:18px;color:var(--el-color-primary);cursor:pointer}.u-btn svg path[data-v-56c57a90]{stroke:var(--el-color-primary);fill:var(--el-color-primary)}.u-slt[data-v-56c57a90]{width:100px}.u-it[data-v-56c57a90]{width:106px}.g-skin-config-box .el-drawer__body{padding:0}.g-skin-config-box .el-switch{height:auto}.g-skin-config-box .u-pc{display:flex;justify-content:center}.g-skin-config-box .u-pc .el-color-picker{width:100%}.g-skin-config-box .u-pc .el-color-picker .el-color-picker__trigger{width:100%;height:34px}.g-skin-config-box .u-tabs .el-tabs__item{padding:0 10px}.el-table__empty-text img[data-v-d4e1f7ee]{width:15%}.u-icon[data-v-427c315c]{display:inline-block;position:relative;width:14px;height:14px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=);background-size:100% 100%;transform:translateY(2px);cursor:pointer}.u-filter-group[data-v-427c315c]{display:inline-block;position:relative}.m-filter-box[data-is-open=true]{opacity:1;pointer-events:auto}.m-filter-box[data-is-open=false]{opacity:0;pointer-events:none}.m-filter-box .u-filter-mask{position:fixed;top:0;left:0;z-index:2050;width:100%;height:100%}.m-filter-box .u-it-gp{padding:10px;border-bottom:1px solid var(--el-border-color-lighter)}.m-filter-box .u-list-box{overflow:hidden;position:fixed;top:0;left:0;z-index:2050;max-width:50%;background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-popper-border-radius, 4px);box-shadow:var(--el-box-shadow-light)}.m-filter-box .u-list-box .u-checkbox-group{overflow-y:auto;display:block;padding:10px;max-height:280px}.m-filter-box .u-list-box label.el-checkbox{display:flex;align-items:center;margin-right:5px;margin-bottom:12px;margin-left:5px;height:unset}.m-filter-box .u-list-box label.el-checkbox:last-child{margin-bottom:0}.m-filter-box .u-list-box .u-btn-gp{border-top:1px solid var(--el-border-color-lighter);padding:8px}.m-filter-box .u-list-box button.is-disabled{color:var(--el-disabled-text-color);cursor:not-allowed}.m-filter-box .u-list-box button{background:0 0;border:none;color:var(--el-text-color-regular);cursor:pointer;font-size:var(--el-font-size-small);padding:0 3px}.vab[data-v-5b0f10d6]{vertical-align:baseline}.g-m-table-column-set-box[data-v-5b0f10d6]{display:flex;position:relative}.g-m-table-column-set-box[data-fold=true][data-v-5b0f10d6]{overflow:hidden;width:10px;transition:width .3s}.g-m-table-column-set-box[data-fold=true][data-v-5b0f10d6]:hover{width:36px}.g-m-table-column-set-box[data-visible=true][data-v-5b0f10d6]{overflow:visible;width:auto!important}.m-panel-box[data-v-5b0f10d6]{display:none;overflow-y:auto;padding:6px 4px;position:absolute;top:30px;right:0;z-index:7;min-width:214px;max-height:300px;background-color:#fff;border-radius:8px;border:1px solid var(--el-border-color-lighter);box-shadow:2px 0 8px #1d23290d;box-sizing:border-box}.m-panel-box[data-active=true][data-v-5b0f10d6]{display:block}.m-panel-box .u-list .u-li[data-v-5b0f10d6]{display:flex;align-items:center;padding:4px}.m-panel-box .u-list .u-li .u-icon[data-v-5b0f10d6]{margin-right:8px;font-size:12px;color:var(--el-color-primary);cursor:move}.m-panel-box .u-tt[data-v-5b0f10d6],.m-panel-box .u-tc[data-v-5b0f10d6]{display:flex;padding-top:10px}.m-panel-box .u-tt .u-p[data-v-5b0f10d6],.m-panel-box .u-tc .u-p[data-v-5b0f10d6]{display:block;padding-left:4px;width:50px;align-self:auto;white-space:nowrap;line-height:24px;font-weight:700}.m-panel-box .u-tc[data-v-5b0f10d6]{padding-top:0}.m-panel-box .u-tc .u-p[data-v-5b0f10d6]{line-height:40px}.m-panel-box .u-divider[data-v-5b0f10d6]{margin-top:10px;margin-bottom:0}.m-masked[data-v-5b0f10d6],.g-m-table-column-set-teleport[data-v-5b0f10d6]{position:fixed;top:0;left:0;z-index:6;width:100%;height:100%}.u-group[data-v-88e3837e]{display:flex;align-items:center}.u-group .u-checkbox[data-v-88e3837e]{padding-right:4px;pointer-events:none;margin-right:0}.u-checkbox[data-v-ce4ca417]{height:var(--el-checkbox-height, 20px)}.g-select-table-box{width:100%}.u-img{width:80px}.m-select-table .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}.m-select-table .el-select-dropdown__empty{padding:0}.m-select-table .el-select-dropdown__empty .btn-box{text-align:right;padding-bottom:6px}.m-select-table .m-table-select{padding:6px;overflow-y:auto}.m-select-table .m-page{padding:4px}.g-select-table-box[data-v-bb9b01dd]{position:relative;line-height:normal}.g-select-table-box .u-input-gp[data-v-bb9b01dd]{position:relative}.g-select-table-box .u-input-gp:hover .el-icon-circle-close[data-v-bb9b01dd]{display:block}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]{display:none;position:absolute;top:50%;right:10px;font-size:14px;color:#c0c4cc;transform:translateY(-50%);cursor:pointer}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]:hover{color:#a4a7ad}.g-select-table-box .s-table[data-v-bb9b01dd]{width:100%}.btn-box[data-v-bb9b01dd]{text-align:right;padding-bottom:6px}.m-page[data-v-bb9b01dd]{padding-top:4px}.g-select-table-box .u-input-gp .el-input{display:flex}.g-select-table-box .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}
|
|
1
|
+
@charset "UTF-8";[data-v-aa54745e]:root{--br-dionysus-primary-color: #646CFFFF;--br-dionysus-primary-bg-color: #979fff}.u-icon-box[data-v-aa54745e]{display:none}.g-box[data-v-aa54745e]{position:relative;overflow:hidden;padding-left:16px;padding-right:16px;width:100%;background-color:#fff;box-sizing:border-box}.g-box .u-page-btn[data-v-aa54745e]{position:absolute;bottom:0;height:33px;border:0;box-sizing:border-box;background-color:#fff;opacity:.6;cursor:pointer}.g-box .s-previous-btn[data-v-aa54745e]{left:0}.g-box .s-next-btn[data-v-aa54745e]{right:0;transform:rotate(180deg)}.g-dionysus-box[data-v-aa54745e]{overflow:hidden;width:100%}.g-tab-page-box[data-v-aa54745e]{display:flex;color:#4a4a4a;white-space:nowrap;box-sizing:border-box;box-shadow:2px 0 8px #1d23290d;transform:translate(0);transition:.2s}.g-tab-page-box .u-li[data-v-aa54745e]{display:inline-block;position:relative;height:33px;font-size:14px;box-sizing:border-box;cursor:pointer}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]{display:flex;position:relative;z-index:1;padding:6px 8px;height:100%;align-items:center;background-color:#fff;border-radius:6px 6px 0 0;box-sizing:border-box}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 0;pointer-events:none}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 6px 0;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true] .u-gp[data-v-aa54745e]:after{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-hover-after=true] .u-gp[data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active-before=true] .u-gp[data-v-aa54745e]:after{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-active-after=true] .u-gp[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]{color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li .u-icon[data-v-aa54745e]{margin-right:8px;pointer-events:none}.g-tab-page-box .u-li .u-sn[data-v-aa54745e]{pointer-events:none}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]{position:relative;margin-left:4px;width:14px;height:14px;font-size:14px;border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:"";border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:#9ca3af}.g-tab-page-box .u-li[data-active=true] .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .s-icon[data-v-aa54745e]{display:block;position:relative;width:14px;height:14px}.g-tab-page-box .s-icon[data-v-aa54745e]:after{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(45deg)}.g-tab-page-box .s-icon[data-v-aa54745e]:before{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(-45deg)}.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=false][data-hover=false][data-active-before=false][data-hover-before=false] .u-sn[data-v-aa54745e]:after{position:absolute;top:50%;right:0;z-index:2;content:"";width:1px;height:50%;transform:translateY(-50%);background-color:#4a4a4a}.g-tab-page-box .u-li:nth-last-of-type(1)[data-active=false][data-hover=false] .u-sn[data-v-aa54745e]:after{background-color:#0000!important}.g-m-input-number-box[data-v-5002f7b6]{position:relative;width:100%}.g-m-input-number-box .m-input-number[data-v-5002f7b6]{width:100%}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]{display:inline-block;position:absolute;top:0;left:0;margin-bottom:0;padding-left:15px;padding-right:15px;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-feature-settings:normal;font-stretch:100%;font-weight:400;text-indent:0;color:#606266;text-align:left;letter-spacing:normal;word-spacing:0;background-color:#0000;border-radius:4px;border:1px solid rgba(0,0,0,0);box-sizing:border-box;cursor:text;pointer-events:none}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]:hover{border-color:#c0c4cc}.g-m-input-number-box .u-text[data-thousandth-place=true][data-size=mini][data-v-5002f7b6]{font-size:12px;height:28px;line-height:28px}.g-m-input-number-box .u-text[data-thousandth-place=true][data-disabled=true][data-v-5002f7b6]{color:#00000040}.g-m-input-number-box .u-text[data-thousandth-place=true][data-focus=true][data-v-5002f7b6]{color:#0000}.g-m-input-number-box[data-is-table-mini=true] .u-text[data-size=mini][data-v-5002f7b6]{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing] .u-text[data-v-5002f7b6]{padding-left:0}.g-m-input-number-box .m-input-number .el-input__inner{text-align:left}.g-m-input-number-box .m-input-number[data-thousandth-place=true] .el-input__inner{color:#0000}.g-m-input-number-box .m-input-number[data-focus=true] .el-input__inner{color:#606266}.g-m-input-number-box .m-input-number[no-border=true] .el-input__inner{border:0}.g-m-input-number-box[data-is-table-mini=true] .m-input-number .el-input__inner{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing=true] .m-input-number .el-input__inner{padding-left:0}.g-inline-box[data-v-fbfdbd5f]{margin-bottom:14px;padding-top:10px;border:1px solid var(--el-border-color-lighter);border-radius:4px}.m-inline-btn[data-v-fbfdbd5f]{padding:0 14px 10px}.m-inline[data-v-fbfdbd5f]{display:flex;position:relative;width:100%}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-fbfdbd5f]{padding-top:10px}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-fbfdbd5f]:before{position:absolute;top:0;left:50%;content:"";width:calc(100% - 28px);height:1px;background-color:var(--el-border-color-lighter);transform:translate(-50%)}.u-btn-gp[data-v-fbfdbd5f]{display:flex;padding-bottom:10px;padding-left:14px;padding-right:14px;align-items:center;box-sizing:border-box}.u-row[data-v-fbfdbd5f]{display:flex;overflow:hidden;max-height:34px;flex:1}.u-row[data-unfold=true][data-v-fbfdbd5f]{max-height:none!important}.u-btn-unfold[data-v-fbfdbd5f]{margin-left:8px;width:12px;height:24px;line-height:24px;text-align:center;color:var(--el-text-color-regular);transform:rotate(90deg);cursor:pointer}.u-btn-unfold[data-unfold=true][data-v-fbfdbd5f]{transform:rotate(270deg)}.g-inline-box .m-inline[dataCover] [data-box]{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--m-inline-min-width),1fr))}.g-inline-box .m-inline[dataCover] [data-box] [data-item]{padding-bottom:10px;min-width:var(--m-inline-min-width);max-width:var(--m-inline-max-width)}.g-inline-box .m-inline[dataCover] .el-form-item{margin-bottom:0;width:100%}.g-inline-box .m-inline[dataCover] .el-form-item .el-input,.g-inline-box .m-inline[dataCover] .el-form-item .el-cascader,.g-inline-box .m-inline[dataCover] .el-form{width:100%}.g-inline-box .m-inline[dataCover] .el-form .u-it-gp{display:flex}.g-inline-box .m-inline[dataCover] .u-row[data-single-line=true] .el-form{display:flex;justify-content:flex-start}.g-skin-config-box[data-v-56c57a90]{display:flex}.g-skin-config-box .u-tt[data-v-56c57a90]{padding:0 24px;line-height:50px;box-shadow:0 1px 2px #00152914}.g-skin-config-box .u-box[data-v-56c57a90]{display:flex;padding:20px 24px;height:calc(100% - 50px);flex-direction:column}.g-skin-config-box .u-box .u-box-tt[data-v-56c57a90]{margin:34px 0}.g-skin-config-box .u-box .u-group[data-v-56c57a90]{display:flex;margin-bottom:12px;justify-content:space-between;align-items:center;color:var(--m-fc-body)}.g-skin-config-box .u-box .u-gulp[data-v-56c57a90]{display:flex;margin:0 -10px;flex-direction:column;flex-wrap:wrap;flex:1}.g-skin-config-box .u-box .u-list[data-v-56c57a90]{display:flex;flex-wrap:wrap}.g-skin-config-box .u-box .u-list .u-li[data-v-56c57a90]{display:flex;margin-bottom:10px;width:12.5%;justify-content:center}.g-skin-config-box .u-box .u-list .u-li .u-color[data-v-56c57a90]{display:flex;width:20px;height:20px;color:#fff;align-items:center;justify-content:center;cursor:pointer}.g-skin-config-box .u-pc[data-v-56c57a90]{display:flex;margin-top:10px;width:100%;flex:1;justify-content:center}.u-btn[data-v-56c57a90]{display:flex;font-size:18px;color:var(--el-color-primary);cursor:pointer}.u-btn svg path[data-v-56c57a90]{stroke:var(--el-color-primary);fill:var(--el-color-primary)}.u-slt[data-v-56c57a90]{width:100px}.u-it[data-v-56c57a90]{width:106px}.g-skin-config-box .el-drawer__body{padding:0}.g-skin-config-box .el-switch{height:auto}.g-skin-config-box .u-pc{display:flex;justify-content:center}.g-skin-config-box .u-pc .el-color-picker{width:100%}.g-skin-config-box .u-pc .el-color-picker .el-color-picker__trigger{width:100%;height:34px}.g-skin-config-box .u-tabs .el-tabs__item{padding:0 10px}.el-table__empty-text img[data-v-849319e2]{width:15%}.u-icon[data-v-0ee214b6]{display:inline-block;position:relative;width:14px;height:14px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=);background-size:100% 100%;transform:translateY(2px);cursor:pointer}.u-filter-group[data-v-0ee214b6]{display:inline-block;position:relative}.m-filter-box[data-is-open=true]{opacity:1;pointer-events:auto}.m-filter-box[data-is-open=false]{opacity:0;pointer-events:none}.m-filter-box .u-filter-mask{position:fixed;top:0;left:0;z-index:2050;width:100%;height:100%}.m-filter-box .u-it-gp{padding:10px;border-bottom:1px solid var(--el-border-color-lighter)}.m-filter-box .u-list-box{overflow:hidden;position:fixed;top:0;left:0;z-index:2050;max-width:50%;background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-popper-border-radius, 4px);box-shadow:var(--el-box-shadow-light)}.m-filter-box .u-list-box .u-checkbox-group{overflow-y:auto;display:block;padding:10px;max-height:280px}.m-filter-box .u-list-box label.el-checkbox{display:flex;align-items:center;margin-right:5px;margin-bottom:12px;margin-left:5px;height:unset}.m-filter-box .u-list-box label.el-checkbox:last-child{margin-bottom:0}.m-filter-box .u-list-box .u-btn-gp{border-top:1px solid var(--el-border-color-lighter);padding:8px}.m-filter-box .u-list-box button.is-disabled{color:var(--el-disabled-text-color);cursor:not-allowed}.m-filter-box .u-list-box button{background:0 0;border:none;color:var(--el-text-color-regular);cursor:pointer;font-size:var(--el-font-size-small);padding:0 3px}.vab[data-v-5b0f10d6]{vertical-align:baseline}.g-m-table-column-set-box[data-v-5b0f10d6]{display:flex;position:relative}.g-m-table-column-set-box[data-fold=true][data-v-5b0f10d6]{overflow:hidden;width:10px;transition:width .3s}.g-m-table-column-set-box[data-fold=true][data-v-5b0f10d6]:hover{width:36px}.g-m-table-column-set-box[data-visible=true][data-v-5b0f10d6]{overflow:visible;width:auto!important}.m-panel-box[data-v-5b0f10d6]{display:none;overflow-y:auto;padding:6px 4px;position:absolute;top:30px;right:0;z-index:7;min-width:214px;max-height:300px;background-color:#fff;border-radius:8px;border:1px solid var(--el-border-color-lighter);box-shadow:2px 0 8px #1d23290d;box-sizing:border-box}.m-panel-box[data-active=true][data-v-5b0f10d6]{display:block}.m-panel-box .u-list .u-li[data-v-5b0f10d6]{display:flex;align-items:center;padding:4px}.m-panel-box .u-list .u-li .u-icon[data-v-5b0f10d6]{margin-right:8px;font-size:12px;color:var(--el-color-primary);cursor:move}.m-panel-box .u-tt[data-v-5b0f10d6],.m-panel-box .u-tc[data-v-5b0f10d6]{display:flex;padding-top:10px}.m-panel-box .u-tt .u-p[data-v-5b0f10d6],.m-panel-box .u-tc .u-p[data-v-5b0f10d6]{display:block;padding-left:4px;width:50px;align-self:auto;white-space:nowrap;line-height:24px;font-weight:700}.m-panel-box .u-tc[data-v-5b0f10d6]{padding-top:0}.m-panel-box .u-tc .u-p[data-v-5b0f10d6]{line-height:40px}.m-panel-box .u-divider[data-v-5b0f10d6]{margin-top:10px;margin-bottom:0}.m-masked[data-v-5b0f10d6],.g-m-table-column-set-teleport[data-v-5b0f10d6]{position:fixed;top:0;left:0;z-index:6;width:100%;height:100%}.u-group[data-v-88e3837e]{display:flex;align-items:center}.u-group .u-checkbox[data-v-88e3837e]{padding-right:4px;pointer-events:none;margin-right:0}.u-checkbox[data-v-ce4ca417]{height:var(--el-checkbox-height, 20px)}.g-select-table-box{width:100%}.u-img{width:80px}.m-select-table .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}.m-select-table .el-select-dropdown__empty{padding:0}.m-select-table .el-select-dropdown__empty .btn-box{text-align:right;padding-bottom:6px}.m-select-table .m-table-select{padding:6px;overflow-y:auto}.m-select-table .m-page{padding:4px}.g-select-table-box[data-v-bb9b01dd]{position:relative;line-height:normal}.g-select-table-box .u-input-gp[data-v-bb9b01dd]{position:relative}.g-select-table-box .u-input-gp:hover .el-icon-circle-close[data-v-bb9b01dd]{display:block}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]{display:none;position:absolute;top:50%;right:10px;font-size:14px;color:#c0c4cc;transform:translateY(-50%);cursor:pointer}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]:hover{color:#a4a7ad}.g-select-table-box .s-table[data-v-bb9b01dd]{width:100%}.btn-box[data-v-bb9b01dd]{text-align:right;padding-bottom:6px}.m-page[data-v-bb9b01dd]{padding-top:4px}.g-select-table-box .u-input-gp .el-input{display:flex}.g-select-table-box .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Ref } from 'vue';
|
|
2
|
+
import { Page } from '../../typings/class';
|
|
2
3
|
/** 表格列配置(单个) */
|
|
3
4
|
export interface TableConfigItem {
|
|
4
5
|
/** 最小列宽 */
|
|
@@ -19,23 +20,27 @@ export interface TableConfig {
|
|
|
19
20
|
export interface FilterValue {
|
|
20
21
|
[key: string]: Array<string | number>;
|
|
21
22
|
}
|
|
23
|
+
interface UseTableConfigReturn {
|
|
24
|
+
tableTitle: Ref<TableTitle[]>;
|
|
25
|
+
tableConfig: Ref<TableConfig>;
|
|
26
|
+
headerDragend: (newWidth: number, oldWidth: number, column: any) => void;
|
|
27
|
+
/** 初始化列筛选 */
|
|
28
|
+
initColumnFilter: (tableData: any[]) => void;
|
|
29
|
+
/** 过滤条件 */
|
|
30
|
+
filtersValue: Ref<FilterValue>;
|
|
31
|
+
/** 分页 */
|
|
32
|
+
page: Ref<Page>;
|
|
33
|
+
}
|
|
34
|
+
interface Config {
|
|
35
|
+
/** 过滤选项数组拆分模式(待实现) */
|
|
36
|
+
filterArrSplitMode?: boolean;
|
|
37
|
+
}
|
|
22
38
|
/**
|
|
23
39
|
* 表格配置
|
|
24
40
|
* @param {string} name 表格唯一标识
|
|
25
41
|
* @param {TableTitle} tableTitle 列配置
|
|
26
42
|
* @param {Ref<any[]>} tableData 表格数据
|
|
43
|
+
* @param {Config} config 表格数据
|
|
27
44
|
* */
|
|
28
|
-
declare const useTableConfig: (name: string, tableTitle: TableTitle[], tableData: Ref<any[]
|
|
29
|
-
tableTitle: import("vue").ComputedRef<TableTitle[]>;
|
|
30
|
-
tableConfig: Ref<TableConfig>;
|
|
31
|
-
headerDragend: (newWidth: number, oldWidth: number, column: any) => void;
|
|
32
|
-
initColumnFilter: (tableData: any[]) => void;
|
|
33
|
-
filtersValue: Ref<FilterValue>;
|
|
34
|
-
page: Ref<{
|
|
35
|
-
total: number;
|
|
36
|
-
pageSize: number;
|
|
37
|
-
currentPage: number;
|
|
38
|
-
pageSizesOptions: number[];
|
|
39
|
-
}>;
|
|
40
|
-
};
|
|
45
|
+
declare const useTableConfig: (name: string, tableTitle: TableTitle[], tableData: Ref<any[]>, config?: Config | undefined) => UseTableConfigReturn;
|
|
41
46
|
export default useTableConfig;
|
|
@@ -144,6 +144,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
144
144
|
name: string | number | Array<number | string>;
|
|
145
145
|
total: number | null;
|
|
146
146
|
filterMethod: Function | null;
|
|
147
|
+
tableTitle: TableTitle[];
|
|
147
148
|
modelValue: string | number | Array<number | string>;
|
|
148
149
|
disabled: boolean;
|
|
149
150
|
multiple: boolean;
|
|
@@ -153,7 +154,6 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
153
154
|
filterable: boolean;
|
|
154
155
|
remote: boolean;
|
|
155
156
|
remoteMethod: Function;
|
|
156
|
-
tableTitle: TableTitle[];
|
|
157
157
|
keywords: Option;
|
|
158
158
|
reserveSelection: boolean;
|
|
159
159
|
tableHeight: string | number;
|
|
@@ -75,13 +75,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
75
75
|
}, {
|
|
76
76
|
size: 'small' | 'large' | '';
|
|
77
77
|
total: number | null;
|
|
78
|
+
tableTitle: any[];
|
|
78
79
|
modelValue: string | number;
|
|
79
80
|
disabled: boolean;
|
|
80
81
|
placeholder: string;
|
|
81
82
|
clearable: boolean;
|
|
82
83
|
options: Option[];
|
|
83
84
|
remoteMethod: Function;
|
|
84
|
-
tableTitle: any[];
|
|
85
85
|
scrollbarAlwaysOn: boolean;
|
|
86
86
|
allowCreate: boolean;
|
|
87
87
|
focusShow: boolean;
|
|
@@ -69,8 +69,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
69
69
|
data: {
|
|
70
70
|
[key: string]: string | number;
|
|
71
71
|
}[];
|
|
72
|
-
sole: string;
|
|
73
72
|
filtersValue: FilterValue;
|
|
73
|
+
sole: string;
|
|
74
74
|
}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>> & {
|
|
75
75
|
default?(_: {}): any;
|
|
76
76
|
}>;
|
|
@@ -6,11 +6,14 @@ interface PropChildren {
|
|
|
6
6
|
children?: PropChildren[];
|
|
7
7
|
}
|
|
8
8
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
9
|
+
/** 过滤值 */
|
|
9
10
|
filtersValue?: FilterValue | undefined;
|
|
11
|
+
/** 过滤选项 */
|
|
10
12
|
filters?: {
|
|
11
13
|
text: string | number;
|
|
12
14
|
value: string | number;
|
|
13
15
|
}[] | undefined;
|
|
16
|
+
/** 过滤方法 */
|
|
14
17
|
filterMethod?: Function | undefined;
|
|
15
18
|
children?: PropChildren[] | undefined;
|
|
16
19
|
}>, {
|
|
@@ -21,11 +24,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
21
24
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
22
25
|
"update:filtersValue": (...args: any[]) => void;
|
|
23
26
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
27
|
+
/** 过滤值 */
|
|
24
28
|
filtersValue?: FilterValue | undefined;
|
|
29
|
+
/** 过滤选项 */
|
|
25
30
|
filters?: {
|
|
26
31
|
text: string | number;
|
|
27
32
|
value: string | number;
|
|
28
33
|
}[] | undefined;
|
|
34
|
+
/** 过滤方法 */
|
|
29
35
|
filterMethod?: Function | undefined;
|
|
30
36
|
children?: PropChildren[] | undefined;
|
|
31
37
|
}>, {
|
|
@@ -45,7 +51,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
45
51
|
filtersValue: FilterValue;
|
|
46
52
|
}, {}>, {
|
|
47
53
|
default?(_: {
|
|
48
|
-
row:
|
|
54
|
+
row: {
|
|
55
|
+
[x: number]: string | number;
|
|
56
|
+
};
|
|
49
57
|
column: any;
|
|
50
58
|
index: any;
|
|
51
59
|
}): any;
|
package/package.json
CHANGED
|
@@ -3,6 +3,39 @@
|
|
|
3
3
|
<el-button @click="page.pageSize = 50">设置50</el-button>
|
|
4
4
|
<el-button @click="page.pageSize = 100">设置100</el-button>
|
|
5
5
|
<el-button @click="getSize">获取pageSize</el-button>
|
|
6
|
+
<p>{{ filtersValue }}</p>
|
|
7
|
+
<div>
|
|
8
|
+
<MTable
|
|
9
|
+
:data="tableData"
|
|
10
|
+
:filtersValue="filtersValue"
|
|
11
|
+
@headerDragend="headerDragend"
|
|
12
|
+
>
|
|
13
|
+
<MTableColumn
|
|
14
|
+
v-for="item in tableTitle"
|
|
15
|
+
:key="item.prop"
|
|
16
|
+
:prop="item.prop"
|
|
17
|
+
:label="item.label"
|
|
18
|
+
:minWidth="item.minWidth"
|
|
19
|
+
:filters="item.filters"
|
|
20
|
+
:headerAlign="item.headerAlign"
|
|
21
|
+
v-model:filtersValue="filtersValue"
|
|
22
|
+
showOverflowTooltip
|
|
23
|
+
>
|
|
24
|
+
<template
|
|
25
|
+
#default="scope"
|
|
26
|
+
v-if="['tag'].includes(item.prop)"
|
|
27
|
+
>
|
|
28
|
+
<el-tag
|
|
29
|
+
v-if="item.prop === 'tag'"
|
|
30
|
+
v-for="item in scope.row.tag"
|
|
31
|
+
type="primary"
|
|
32
|
+
>
|
|
33
|
+
{{ item }}
|
|
34
|
+
</el-tag>
|
|
35
|
+
</template>
|
|
36
|
+
</MTableColumn>
|
|
37
|
+
</MTable>
|
|
38
|
+
</div>
|
|
6
39
|
</div>
|
|
7
40
|
</template>
|
|
8
41
|
|
|
@@ -10,26 +43,92 @@
|
|
|
10
43
|
import { ref } from 'vue'
|
|
11
44
|
import moneyFormat from '../../Tool/moneyFormat/moneyFormat'
|
|
12
45
|
import useTableConfig from 'packages/Hook/useTableConfig/useTableConfig'
|
|
46
|
+
|
|
13
47
|
const tableData = ref<any[]>([])
|
|
48
|
+
// const tableData = ref<any[]>([
|
|
49
|
+
// {
|
|
50
|
+
// date: '2016-05-03',
|
|
51
|
+
// name: 'Tom1',
|
|
52
|
+
// // address: 'No. 189, Grove St, Los Angeles',
|
|
53
|
+
// tag: ['Home1', 'Home2']
|
|
54
|
+
// },
|
|
55
|
+
// {
|
|
56
|
+
// date: '2016-05-02',
|
|
57
|
+
// name: 'Tom2',
|
|
58
|
+
// // address: 'No. 189, Grove St, Los Angeles',
|
|
59
|
+
// tag: ['Office']
|
|
60
|
+
// },
|
|
61
|
+
// {
|
|
62
|
+
// date: '2016-05-04',
|
|
63
|
+
// name: 'Tom3',
|
|
64
|
+
// // address: 'No. 189, Grove St, Los Angeles',
|
|
65
|
+
// tag: ['Home']
|
|
66
|
+
// },
|
|
67
|
+
// {
|
|
68
|
+
// date: '2016-05-01',
|
|
69
|
+
// name: 'Tom4',
|
|
70
|
+
// // address: 'No. 189, Grove St, Los Angeles',
|
|
71
|
+
// tag: ['Office']
|
|
72
|
+
// }
|
|
73
|
+
// ])
|
|
14
74
|
|
|
15
|
-
const { page } = useTableConfig(
|
|
16
|
-
'
|
|
17
|
-
[
|
|
75
|
+
const { tableTitle, headerDragend, filtersValue, page } = useTableConfig(
|
|
76
|
+
'testTableSize',
|
|
77
|
+
[{
|
|
78
|
+
label: '名称',
|
|
79
|
+
prop: 'name',
|
|
80
|
+
minWidth: '208px'
|
|
81
|
+
}, {
|
|
82
|
+
label: '单据日期',
|
|
83
|
+
prop: 'date',
|
|
84
|
+
minWidth: '110px'
|
|
85
|
+
}, {
|
|
86
|
+
label: '标签',
|
|
87
|
+
prop: 'tag',
|
|
88
|
+
minWidth: '110px'
|
|
89
|
+
}],
|
|
90
|
+
tableData
|
|
91
|
+
)
|
|
92
|
+
setTimeout(() => {
|
|
93
|
+
tableData.value = [
|
|
94
|
+
{
|
|
95
|
+
date: '2016-05-03',
|
|
96
|
+
name: 'Tom1',
|
|
97
|
+
// address: 'No. 189, Grove St, Los Angeles',
|
|
98
|
+
tag: ['Home1', 'Home2']
|
|
99
|
+
},
|
|
18
100
|
{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
101
|
+
date: '2016-05-03',
|
|
102
|
+
name: 'Tom2',
|
|
103
|
+
// address: 'No. 189, Grove St, Los Angeles',
|
|
104
|
+
tag: ['Office']
|
|
22
105
|
},
|
|
23
106
|
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
107
|
+
date: '2016-05-04',
|
|
108
|
+
name: 'Tom3',
|
|
109
|
+
// address: 'No. 189, Grove St, Los Angeles',
|
|
110
|
+
tag: ['Home']
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
date: '2016-05-01',
|
|
114
|
+
name: 'Tom4',
|
|
115
|
+
// address: 'No. 189, Grove St, Los Angeles',
|
|
116
|
+
tag: ['Office']
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
})
|
|
28
120
|
const getSize = () => {
|
|
29
121
|
console.log(moneyFormat(0.0556565, true, 8))
|
|
30
122
|
// console.log(page.value.pageSize)
|
|
31
123
|
}
|
|
32
124
|
|
|
125
|
+
const test = (data: any) => {
|
|
126
|
+
console.log('data', data.name)
|
|
127
|
+
}
|
|
33
128
|
</script>
|
|
34
129
|
|
|
35
|
-
<style lang="scss"
|
|
130
|
+
<style scoped lang="scss">
|
|
131
|
+
.u-p {
|
|
132
|
+
color: #c600fd;
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
@@ -31,22 +31,39 @@ interface Column {
|
|
|
31
31
|
export interface FilterValue {
|
|
32
32
|
[key: string]: Array<string | number>
|
|
33
33
|
}
|
|
34
|
+
|
|
35
|
+
interface UseTableConfigReturn {
|
|
36
|
+
tableTitle: Ref<TableTitle[]>,
|
|
37
|
+
tableConfig: Ref<TableConfig>,
|
|
38
|
+
headerDragend: (newWidth: number, oldWidth: number, column: any) => void,
|
|
39
|
+
/** 初始化列筛选 */
|
|
40
|
+
initColumnFilter: (tableData: any[]) => void,
|
|
41
|
+
/** 过滤条件 */
|
|
42
|
+
filtersValue: Ref<FilterValue>,
|
|
43
|
+
/** 分页 */
|
|
44
|
+
page: Ref<Page>
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
interface Config {
|
|
48
|
+
/** 过滤选项数组拆分模式(待实现) */
|
|
49
|
+
filterArrSplitMode?: boolean
|
|
50
|
+
}
|
|
51
|
+
|
|
34
52
|
/**
|
|
35
53
|
* 表格配置
|
|
36
54
|
* @param {string} name 表格唯一标识
|
|
37
55
|
* @param {TableTitle} tableTitle 列配置
|
|
38
56
|
* @param {Ref<any[]>} tableData 表格数据
|
|
57
|
+
* @param {Config} config 表格数据
|
|
39
58
|
* */
|
|
40
|
-
const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <any[]
|
|
59
|
+
const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <any[]>, config: Config | undefined = {}): UseTableConfigReturn => {
|
|
41
60
|
/** 表格列头 */
|
|
42
61
|
const _tableTitle: Ref<TableTitle[]> = ref<TableTitle[]>([])
|
|
43
62
|
const tableConfig: Ref<TableConfig> = ref<TableConfig>(packageConfig.get('tableConfig' + name))
|
|
44
63
|
const pageConfig = packageConfig.get('tablePage' + name)
|
|
45
64
|
const page = ref<Page>(new Page(pageConfig))
|
|
46
65
|
/** 列筛选 */
|
|
47
|
-
const filterMethod = (value: string, row: any, column: Column) =>
|
|
48
|
-
return row[column.property] === value
|
|
49
|
-
}
|
|
66
|
+
const filterMethod = (value: string, row: any, column: Column) => row[column.property] === value
|
|
50
67
|
|
|
51
68
|
/** 过滤条件 */
|
|
52
69
|
const filtersValue = ref<FilterValue>({})
|
|
@@ -78,7 +95,7 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
|
|
|
78
95
|
syncTableTitle()
|
|
79
96
|
|
|
80
97
|
/** 保存拖拽后的列宽度信息 */
|
|
81
|
-
const headerDragend = (newWidth: number, oldWidth: number, column: any) => {
|
|
98
|
+
const headerDragend = (newWidth: number, oldWidth: number, column: any): void => {
|
|
82
99
|
tableConfig.value[column.property].minWidth = newWidth
|
|
83
100
|
}
|
|
84
101
|
|
|
@@ -100,13 +117,22 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
|
|
|
100
117
|
)
|
|
101
118
|
|
|
102
119
|
/** 初始化列筛选 */
|
|
103
|
-
const initColumnFilter = (tableData: any[]) => {
|
|
120
|
+
const initColumnFilter = (tableData: any[]): void => {
|
|
104
121
|
_tableTitle.value = _tableTitle.value.map(item => {
|
|
105
|
-
const
|
|
122
|
+
const data = tableData.map(node => node[item.prop]).map(node => JSON.stringify(node))
|
|
123
|
+
// const isAllArray = !tableData.some(node => !checkType.isArray(node[item.prop]))
|
|
124
|
+
// let array: any[] = tableData.map(node => node[item.prop])
|
|
125
|
+
// if (config.filterArrSplitMode && isAllArray) {
|
|
126
|
+
// array = []
|
|
127
|
+
// data.forEach(node => {
|
|
128
|
+
// array.push(...node)
|
|
129
|
+
// })
|
|
130
|
+
// }
|
|
131
|
+
// array = array.map(node => JSON.stringify(node))
|
|
106
132
|
// 去重
|
|
107
|
-
const filters = [...new Set(
|
|
108
|
-
text: node,
|
|
109
|
-
value: node
|
|
133
|
+
const filters = [...new Set(data)].map(node => ({
|
|
134
|
+
text: JSON.parse(node),
|
|
135
|
+
value: JSON.parse(node)
|
|
110
136
|
}))
|
|
111
137
|
|
|
112
138
|
return {
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
<script setup lang="ts">
|
|
29
29
|
import { ref, onMounted, computed } from 'vue'
|
|
30
|
+
import checkType from '../../../tool/checkType'
|
|
30
31
|
interface FilterValue {
|
|
31
32
|
[key: string]: Array<string | number>
|
|
32
33
|
}
|
|
@@ -44,15 +45,12 @@ const props = withDefaults(defineProps<{
|
|
|
44
45
|
|
|
45
46
|
const tableData = computed(() => {
|
|
46
47
|
return props.data.filter(item => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
return check
|
|
48
|
+
for (const key in props.filtersValue) {
|
|
49
|
+
const node = props.filtersValue[key]
|
|
50
|
+
const colData = checkType.isObject(item[key]) || checkType.isArray(item[key]) ? JSON.stringify(item[key]) : item[key]
|
|
51
|
+
if (!node.includes(colData) && node.length) return false
|
|
52
|
+
}
|
|
53
|
+
return true
|
|
56
54
|
})
|
|
57
55
|
})
|
|
58
56
|
const createHash = (hashLength: number = 24) => {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
2
|
+
<div class="g-box">
|
|
3
3
|
<el-table
|
|
4
4
|
:data="tableData"
|
|
5
|
-
style="width: 100%"
|
|
6
5
|
>
|
|
7
6
|
<MTableColumn
|
|
8
7
|
v-for="item in tableTitle"
|
|
@@ -12,10 +11,8 @@
|
|
|
12
11
|
:minWidth="item.minWidth"
|
|
13
12
|
v-model:filtersValue="filtersValue"
|
|
14
13
|
showOverflowTooltip
|
|
15
|
-
:children="item.children||[]"
|
|
14
|
+
:children="item.children || []"
|
|
16
15
|
>
|
|
17
|
-
<template #default="aa">
|
|
18
|
-
</template>
|
|
19
16
|
</MTableColumn>
|
|
20
17
|
</el-table>
|
|
21
18
|
</div>
|
|
@@ -106,4 +103,8 @@ const tableTitle = [
|
|
|
106
103
|
]
|
|
107
104
|
</script>
|
|
108
105
|
|
|
109
|
-
<style lang="scss"
|
|
106
|
+
<style scoped lang="scss">
|
|
107
|
+
.g-box {
|
|
108
|
+
max-width: 1000px;
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<el-table-column
|
|
2
|
+
<el-table-column
|
|
3
|
+
v-bind="attrs"
|
|
4
|
+
:filterMethod="props.filterMethod"
|
|
5
|
+
>
|
|
3
6
|
<template
|
|
4
7
|
#default="scope"
|
|
5
8
|
v-if="slots.default"
|
|
@@ -45,6 +48,7 @@
|
|
|
45
48
|
<div
|
|
46
49
|
class="m-filter-box j-filter-box"
|
|
47
50
|
:data-is-open="filterBoxIsOpen"
|
|
51
|
+
v-if="filterBoxIsOpen"
|
|
48
52
|
>
|
|
49
53
|
<div
|
|
50
54
|
class="u-filter-mask"
|
|
@@ -72,7 +76,15 @@
|
|
|
72
76
|
:key="item.value"
|
|
73
77
|
:label="item.value"
|
|
74
78
|
>
|
|
75
|
-
|
|
79
|
+
<template v-if="slots.default">
|
|
80
|
+
<slot
|
|
81
|
+
name="default"
|
|
82
|
+
:row="{ [scope.column.property]: item.text }"
|
|
83
|
+
:column="scope.column"
|
|
84
|
+
:index="scope.$index"
|
|
85
|
+
></slot>
|
|
86
|
+
</template>
|
|
87
|
+
<template v-if="!slots.default">{{ item.text }}</template>
|
|
76
88
|
</el-checkbox>
|
|
77
89
|
</el-checkbox-group>
|
|
78
90
|
<div class="u-btn-gp">
|
|
@@ -102,6 +114,7 @@
|
|
|
102
114
|
|
|
103
115
|
<script setup lang="ts">
|
|
104
116
|
import { ref, useSlots, useAttrs } from 'vue'
|
|
117
|
+
import checkType from '../../../tool/checkType'
|
|
105
118
|
interface FilterValue {
|
|
106
119
|
[key: string]: Array<string | number>
|
|
107
120
|
}
|
|
@@ -112,10 +125,13 @@ interface PropChildren {
|
|
|
112
125
|
}
|
|
113
126
|
|
|
114
127
|
const props = withDefaults(defineProps<{
|
|
128
|
+
/** 过滤值 */
|
|
115
129
|
filtersValue?: FilterValue,
|
|
130
|
+
/** 过滤选项 */
|
|
116
131
|
filters?: Array<{ text: string | number, value: string | number }>,
|
|
132
|
+
/** 过滤方法 */
|
|
117
133
|
filterMethod?: Function,
|
|
118
|
-
children?: Array<PropChildren
|
|
134
|
+
children?: Array<PropChildren>,
|
|
119
135
|
}>(), {
|
|
120
136
|
filtersValue: () => ({}),
|
|
121
137
|
filters: () => [],
|
|
@@ -131,7 +147,12 @@ const emit = defineEmits(['update:filtersValue'])
|
|
|
131
147
|
const filterText = ref<string>('')
|
|
132
148
|
|
|
133
149
|
const getCheckboxOptions = (options: { text: string | number, value: string | number }[]) => {
|
|
134
|
-
return options
|
|
150
|
+
return options
|
|
151
|
+
.map(item => ({
|
|
152
|
+
...item,
|
|
153
|
+
value: checkType.isArray(item.value) || checkType.isObject(item.value) ? JSON.stringify(item.value) : item.value
|
|
154
|
+
}))
|
|
155
|
+
.filter(item => String(item.value).includes(filterText.value))
|
|
135
156
|
}
|
|
136
157
|
|
|
137
158
|
const filteredValue = ref<Array<string | number>>([])
|
|
@@ -56,7 +56,7 @@ const moneyFormat = (val: string | number | null | undefined = '', isThousands:
|
|
|
56
56
|
maximumFractionDigits: roundDTo,
|
|
57
57
|
useGrouping: true
|
|
58
58
|
}
|
|
59
|
-
result = base.toLocaleString('
|
|
59
|
+
result = base.toLocaleString('zh-CN', options)
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
if (moneySymbol) {
|