From e910554e5f5fdb3603ddae3bc2671d5f49c007a0 Mon Sep 17 00:00:00 2001 From: likunming Date: Thu, 27 Feb 2025 15:17:40 +0800 Subject: [PATCH] =?UTF-8?q?w-grid=E6=9F=A5=E8=AF=A2=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E5=85=83=E7=B4=A0=E6=94=AF=E6=8C=81showIf=3Dfalse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/platform/components/grid/Top.vue | 20 ++++--------------- .../extra/advanced-query/AdvancedQuery.vue | 1 + .../platform/components/grid/ts/GridTools.ts | 2 ++ .../src/platform/components/grid/ts/Init.ts | 15 ++++++++++++++ .../components/grid/ts/types/TableType.ts | 5 +++++ .../src/views/likm/Grid.vue | 7 ++++++- 6 files changed, 33 insertions(+), 17 deletions(-) diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue index 0b13bea3..b507b0cc 100644 --- a/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue +++ b/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue @@ -92,17 +92,12 @@ const queryFormColsNumComputed = computed(() => { const handleQueryFormShowField = () => { tools.table.queryFormDisplayFields = []; if (tools.table.moreQueryStatus) { - tools.props.queryFormFields.forEach((item: any) => { - tools.table.queryFormDisplayFields.push(item); - item.showIf = () => { - return true; - }; - }); + tools.table.queryFormDisplayFields = [...tools.table.queryFormFields]; } else { // 一行应该显示的字段个数 const rowColsNum = queryFormColsNumComputed.value * (tools.props.queryFormRowNum || 1); let currRowColsNum = 0; - tools.props.queryFormFields.forEach((item: any) => { + tools.table.queryFormFields.forEach((item: any) => { if (Tools.hasOwnProperty(item, 'colSpan')) { currRowColsNum += item.colSpan; } else { @@ -110,13 +105,6 @@ const handleQueryFormShowField = () => { } if (currRowColsNum <= rowColsNum) { tools.table.queryFormDisplayFields.push(item); - item.showIf = (form) => { - return true; - }; - } else { - item.showIf = (form) => { - return false; - }; } }); } @@ -166,7 +154,7 @@ const handleToolbarActions = () => { const rowColsNum = queryFormColsNumComputed.value * (tools.props.queryFormRowNum || 1); let currRowColsNum = 0; let showQueryFormFieldNum = 0; - tools.props.queryFormFields.forEach((item: any) => { + tools.table.queryFormFields.forEach((item: any) => { if (Tools.hasOwnProperty(item, 'colSpan')) { currRowColsNum += item.colSpan; } else { @@ -176,7 +164,7 @@ const handleToolbarActions = () => { showQueryFormFieldNum += 1; } }); - if (showQueryFormFieldNum < tools.props.queryFormFields.length) { + if (showQueryFormFieldNum < tools.table.queryFormFields.length) { moreQueryShow = true; } tools.props.toolbarActions.forEach((btn: any, index) => { diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue index 6ddf14ad..a4145745 100644 --- a/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue +++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue @@ -19,6 +19,7 @@ const buildOptions = () => { ...item, label: undefined, // 覆盖label name: undefined, // 覆盖name + showIf: true, // 覆盖showIf type: typeConversion(item['type']), // 覆盖类型 }, }; diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts index 2c59dd9b..65a60ee4 100644 --- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts +++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts @@ -105,6 +105,7 @@ export class GridTools { } const columns = Init.initColumn(props.columns, props); + const queryFormFields = Init.initQueryFormFields(props.queryFormFields); this.table = reactive({ originalColumns: [...props.columns], @@ -114,6 +115,7 @@ export class GridTools { moreQueryStatus: false, advancedQueryStatus: false, advancedQueryModelValue: undefined, + queryFormFields: queryFormFields, queryFormDisplayFields: [], componentRef: { getTableRef: () => {}, diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts index 4b4cc52c..03ca8e34 100644 --- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts +++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts @@ -196,6 +196,21 @@ export class Init { }; } + /** + * 查询表单字段初始化，（剔除 showIf = false 的数据） + * @param fields + */ + public static initQueryFormFields(fields: Array) { + return fields.filter((field) => { + if (!Tools.hasOwnProperty(field, 'showIf')) { + return true; + } else if (typeof field['showIf'] === 'boolean' && field['showIf'] === true) { + return true; + } + return false; + }); + } + /** * 列初始化，设置默认属性并将子列提取到同级 * @param columns 所有列配置 diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts index fd1f1fbc..1ee6e6ed 100644 --- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts +++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts @@ -33,6 +33,11 @@ export type TableType = { * 高级查询模型值 */ advancedQueryModelValue?: object, + /** + * 查询 Form 字段集（剔除 showIf = false 后） + */ + queryFormFields: Array; + /** /** * 查询 Form 当前显示的字段 */ diff --git a/io.sc.platform.core.frontend/src/views/likm/Grid.vue b/io.sc.platform.core.frontend/src/views/likm/Grid.vue index fd4d8c5c..50bac73d 100644 --- a/io.sc.platform.core.frontend/src/views/likm/Grid.vue +++ b/io.sc.platform.core.frontend/src/views/likm/Grid.vue @@ -5,7 +5,12 @@ :fetch-data-url="Environment.apiContextPath('/api/system/user')" :pageable="false" :toolbar-actions="['query', 'reset']" - :query-form-fields="[{ name: 'lastModifyDate', label: $t('lastModifyDate'), type: 'w-date-range' }]" + :advanced-query="true" + :query-form-fields="[ + { name: 'lastModifyDate', label: $t('lastModifyDate'), type: 'w-date-range' }, + { name: 'loginName', label: $t('loginName'), type: 'w-text', showIf: true }, + { name: 'userName', label: $t('userName'), type: 'w-text' }, + ]" :columns="[ { name: 'loginName', label: $t('loginName') }, { name: 'userName', label: $t('userName') },