From a74436ac1f6138e40e23fa53cc14f6d135a668bb Mon Sep 17 00:00:00 2001 From: Tsanie Date: Sun, 4 Feb 2024 13:15:42 +0800 Subject: [PATCH] feature: add col.filterAllowNull --- lib/app/communications/lib.js | 55 +------------------------------ lib/app/communications/style.scss | 10 +++--- lib/ui/grid/grid.js | 48 ++++++++++++++++----------- 3 files changed, 34 insertions(+), 79 deletions(-) diff --git a/lib/app/communications/lib.js b/lib/app/communications/lib.js index 64bb325..3dbf581 100644 --- a/lib/app/communications/lib.js +++ b/lib/app/communications/lib.js @@ -200,59 +200,6 @@ function getStatusText(status, dict) { } } -const SymbolDropdown = Symbol.for('ui-dropdown'); - -class DropdownColumn { - static create(col, trigger, parent) { - const drop = new Dropdown({ ...col.dropOptions, parent }); - drop.onSelected = trigger; - return drop.create(); - } - - static _getDrop(element) { - const dropGlobal = global[SymbolDropdown]; - if (dropGlobal == null) { - return null; - } - const dropId = element.dataset.dropId; - const drop = dropGlobal[dropId]; - if (drop == null) { - return null; - } - return drop; - } - - static _setValue(source, element, val) { - const data = source?.find(v => v.value === val); - if (data != null) { - val = data.text; - } - super.setValue(element, val); - } - - static setValue(element, val, _item, col) { - if (element.tagName !== 'DIV') { - this._setValue(col.source, element, val); - return; - } - const drop = this._getDrop(element); - if (drop == null) { - return; - } - if (drop.source == null || drop.source.length === 0) { - let source = col.source; - if (source != null) { - drop.source = source; - } - } - drop.select(val, true); - } - - static getValue(e) { - return e.value; - } -} - export function getMessageStatus(comm, r, _var) { const messageStatus = { 0: r('P_CU_PENDING', 'Pending'), @@ -411,7 +358,7 @@ export function getMessageStatus(comm, r, _var) { key: 'statusChanged', caption: r('P_CU_REVISEDSTATUS', 'Revised Status'), width: 155, - type: DropdownColumn, + type: Grid.ColumnTypes.Dropdown, source: [ { value: '-1', text: messageStatus[9999] }, { value: '0', text: messageStatus[0] }, diff --git a/lib/app/communications/style.scss b/lib/app/communications/style.scss index eae7209..318b475 100644 --- a/lib/app/communications/style.scss +++ b/lib/app/communications/style.scss @@ -12,12 +12,10 @@ .status-grid, .contacts-record, .contacts-wo { + position: relative; + >.ui-grid { overflow-x: visible; - - >.ui-grid-body { - overflow: visible; - } } } } @@ -496,7 +494,7 @@ height: 100%; min-height: 120px; - >.ui-grid-body .ui-grid-body-content>.ui-grid-row>td { + >.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td { vertical-align: top; .col-icon { @@ -522,12 +520,14 @@ .contact-name { overflow: hidden; text-overflow: ellipsis; + line-height: 30px; } .contact-note { color: #999; overflow: hidden; text-overflow: ellipsis; + margin: 3px 0 3px; } } } diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js index 3b1ec21..d98a3c4 100644 --- a/lib/ui/grid/grid.js +++ b/lib/ui/grid/grid.js @@ -212,6 +212,7 @@ let r = lang; * @property {GridItem} attrs.item - 行数据对象 * @property {object} attrs.{returns} - 返回附加属性对象 * @property {boolean} [allowFilter=false] - 是否允许进行列头过滤 + * @property {boolean} [filterAllowNull=false] - 是否区分 `null` 与空字符串 * @property {(GridItem[] | GridColumnFilterSourceCallback)} [filterSource] - 自定义列过滤器的数据源，允许调用如下函数 * @property {Grid} filterSource.{this} - 上下文为 Grid * @property {GridColumnDefinition} filterSource.col - 列定义对象 @@ -1109,8 +1110,9 @@ export class Grid { if (this._var.colAttrs.__filtered === true) { this._var.currentSource = list.filter(it => { for (let col of this.columns) { + const nullValue = col.filterAllowNull ? null : ''; if (Array.isArray(col.filterValues)) { - const v = this._getItemProp(it.values, false, col); + const v = this._getItemProp(it.values, false, col) ?? nullValue; if (col.filterValues.indexOf(v) < 0) { return false; } @@ -2650,7 +2652,7 @@ export class Grid { for (let item of this._var.source) { let displayValue = this._getItemProp(item.values, false, col); if (displayValue == null) { - displayValue = this.langs.null; + displayValue = col.filterAllowNull ? this.langs.null : ''; } if (!Object.hasOwnProperty.call(dict, displayValue)) { const val = this._getItemProp(item.values, true, col); @@ -2662,22 +2664,23 @@ export class Grid { } array = Object.values(dict) .sort((a, b) => { - if (a == null && b == null) { - return 0; - } - if (a == null && b != null) { - return -1; - } - if (a != null && b == null) { - return 1; - } - if (Object.prototype.hasOwnProperty.call(a, 'Value')) { - a = a.Value; - } - if (Object.prototype.hasOwnProperty.call(b, 'Value')) { - b = b.Value; - } - return a > b ? 1 : a < b ? -1 : 0; + // if (a == null && b == null) { + // return 0; + // } + // if (a == null && b != null) { + // return -1; + // } + // if (a != null && b == null) { + // return 1; + // } + // if (Object.prototype.hasOwnProperty.call(a, 'Value')) { + // a = a.Value; + // } + // if (Object.prototype.hasOwnProperty.call(b, 'Value')) { + // b = b.Value; + // } + // return a > b ? 1 : a < b ? -1 : 0; + return a.Value > b.Value ? 1 : a.Value < b.Value ? -1 : 0; }); } array = array.map(i => { @@ -2724,7 +2727,8 @@ export class Grid { if (GridColumnTypeEnum.isCheckbox(col.type)) { col.filterValues = array.map(a => a.Value); } else { - col.filterValues = array.map(a => a.DisplayValue); + const nullValue = col.filterAllowNull ? null : ''; + col.filterValues = array.map(a => a.Value == null ? nullValue : a.DisplayValue); } } this._var.colAttrs.__filtered = true; @@ -2770,8 +2774,12 @@ export class Grid { content.style.top = `${rowHeight}px`; this._set(col.key, 'filterSource', array); const propKey = GridColumnTypeEnum.isCheckbox(col.type) ? 'Value' : 'DisplayValue'; + const nullValue = col.filterAllowNull ? null : ''; for (let item of array) { - const v = Object.prototype.hasOwnProperty.call(item, propKey) ? item[propKey] : item; + let v = item.Value ?? nullValue; + if (v != null) { + v = Object.prototype.hasOwnProperty.call(item, propKey) ? item[propKey] : item; + } item.__checked = !Array.isArray(col.filterValues) || col.filterValues.includes(v); } if (array.length > 12) {