From 5f04d540459c12b2bb1c6b43cbdbf488e80c889b Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Wed, 27 Nov 2024 21:11:02 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E5=8F=AF=E6=A0=B9=E6=8D=AE=E5=85=A8=E5=B1=80=E5=8F=82=E6=95=B0?= =?UTF-8?q?emptyHiddenUnit=E6=88=96=E8=80=85=E9=83=A8=E4=BB=B6=E5=8F=82?= =?UTF-8?q?=E6=95=B0emptyhiddenunit=EF=BC=8C=E4=BB=A5=E5=8F=8A=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=8F=82=E6=95=B0EMPTYHIDDENUNIT=E5=86=B3?= =?UTF-8?q?=E5=AE=9A=E5=BD=93=E5=89=8D=E9=A1=B9=E6=97=A0=E5=80=BC=E6=97=B6?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E8=BF=98=E6=98=BE=E7=A4=BA=E5=8D=95=E4=BD=8D?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=85=88=E7=BA=A7=E4=BE=9D=E6=AC=A1=E9=80=92?= =?UTF-8?q?=E5=A2=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 ++ .../form/form-detail/form-item/form-item.tsx | 30 ++++++++++++++-- .../grid-field-column/grid-field-column.tsx | 24 ++++++++++++- .../tree-grid-ex-field-column.tsx | 22 +++++++++--- src/editor/span/span-editor.controller.ts | 11 ++++++ src/editor/span/span/span.tsx | 8 ++++- .../ibiz-input-number/ibiz-input-number.scss | 16 +++++++++ .../ibiz-input-number/ibiz-input-number.tsx | 36 ++++++++++++++----- src/editor/text-box/input/input.tsx | 36 ++++++++++++++++--- .../text-box/text-box-editor.controller.ts | 11 ++++++ 10 files changed, 175 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 692885d2f..5c0903e9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ ### Added + +- 编辑器可根据全局参数emptyHiddenUnit或者部件参数emptyhiddenunit，以及编辑器参数EMPTYHIDDENUNIT决定当前项无值时是否还显示单位，优先级依次递增 - 协同编辑消息占位支持显示头像 ## [0.7.38-alpha.28] - 2024-11-25 diff --git a/src/control/form/form-detail/form-item/form-item.tsx b/src/control/form/form-detail/form-item/form-item.tsx index 7e1ad2f8e..6bf86be7a 100644 --- a/src/control/form/form-detail/form-item/form-item.tsx +++ b/src/control/form/form-detail/form-item/form-item.tsx @@ -1,4 +1,4 @@ -import { defineComponent, h, PropType, resolveComponent } from 'vue'; +import { defineComponent, h, PropType, ref, resolveComponent } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; import './form-item.scss'; import { IDEFormItem } from '@ibiz/model-core'; @@ -27,7 +27,31 @@ export const FormItem = defineComponent({ props.controller.setDataValue(val, name); }; - return { ns, c, onValueChange }; + // 额外参数 + const extraParams = ref({}); + + // 是否隐藏无值的单位 + let emptyHiddenUnit = ibiz.config.form.emptyHiddenUnit; + const emptyhiddenunit = + props.controller.form?.controlParams?.emptyhiddenunit; + + if (emptyhiddenunit) { + emptyHiddenUnit = Object.is(emptyhiddenunit, 'true'); + } + + // 编辑器参数优先级最高 + const editorParams = props.controller.editor?.model?.editorParams || {}; + const { EMPTYHIDDENUNIT } = editorParams; + + if (EMPTYHIDDENUNIT) { + emptyHiddenUnit = Object.is(EMPTYHIDDENUNIT, 'true'); + } + + Object.assign(extraParams.value, { + emptyHiddenUnit, + }); + + return { ns, c, extraParams, onValueChange }; }, render() { if ( @@ -47,6 +71,7 @@ export const FormItem = defineComponent({ disabled: this.controller.state.disabled, readonly: this.controller.state.readonly, onChange: this.onValueChange, + extraParams: this.extraParams, controlParams: editMode ? { ...this.controller.form.controlParams, editmode: editMode } : this.controller.form.controlParams, @@ -80,6 +105,7 @@ export const FormItem = defineComponent({ this.ns.m(this.modelData.id), ...this.controller.containerClass, ]} + controller={this.controller.editor} style={this.modelData.cssStyle} required={this.c.state.required} error={this.c.state.error} diff --git a/src/control/grid/grid-column/grid-field-column/grid-field-column.tsx b/src/control/grid/grid-column/grid-field-column/grid-field-column.tsx index c084865b4..bf5bdb031 100644 --- a/src/control/grid/grid-column/grid-field-column/grid-field-column.tsx +++ b/src/control/grid/grid-column/grid-field-column/grid-field-column.tsx @@ -25,6 +25,13 @@ export const GridFieldColumn = defineComponent({ }, setup(props) { const ns = useNamespace('grid-field-column'); + // 是否隐藏无值的单位 + let emptyHiddenUnit = ibiz.config.grid.emptyHiddenUnit; + const { emptyhiddenunit } = props.controller.grid.controlParams; + + if (emptyhiddenunit) { + emptyHiddenUnit = Object.is(emptyhiddenunit, 'true'); + } const zIndex = props.controller.grid.state.zIndex; /** @@ -94,6 +101,20 @@ export const GridFieldColumn = defineComponent({ return ''; }); + // 无值隐藏单位 + const hiddenEmpty = computed(() => { + if (fieldValue.value) { + if (emptyHiddenUnit) { + if (formatValue.value) { + return true; + } + return false; + } + return true; + } + return false; + }); + /** * 代码表值 * - 根据valueType计算当前列的代码表值，之后再传递给代码表翻译 @@ -184,6 +205,7 @@ export const GridFieldColumn = defineComponent({ tooltip, zIndex, codeListItems, + hiddenEmpty, findLayoutPanel, renderPanelItemLayout, }; @@ -239,7 +261,7 @@ export const GridFieldColumn = defineComponent({ onClick={this.onTextClick} > {this.formatValue} - {this.fieldValue != null && c.model.unitName} + {this.hiddenEmpty && c.model.unitName} {this.percent && `(${this.percent})`} ); diff --git a/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.tsx b/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.tsx index 3d7e97891..357395ed0 100644 --- a/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.tsx +++ b/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.tsx @@ -24,6 +24,13 @@ export const TreeGridExFieldColumn = defineComponent({ setup(props) { const ns = useNamespace('tree-grid-ex-field-column'); + let emptyHiddenUnit = ibiz.config.grid.emptyHiddenUnit; + const { emptyhiddenunit } = props.controller.treeGrid.controlParams; + + if (emptyhiddenunit) { + emptyHiddenUnit = Object.is(emptyhiddenunit, 'true'); + } + /** 行数据对应属性列的值 */ const fieldValue = computed(() => { // 非实体节点行的第一列显示文本值 @@ -61,11 +68,18 @@ export const TreeGridExFieldColumn = defineComponent({ return codeListText.value; } + let text = nodeColumnC.formatValue(fieldValue.value); + if (emptyHiddenUnit) { + if (text) { + text += + nodeColumnC.unitName || nodeColumnC.nodeColumn?.unitName || ''; + } + } else { + text += + nodeColumnC.unitName || nodeColumnC.nodeColumn?.unitName || ''; + } // 格式化的值 - return ( - nodeColumnC.formatValue(fieldValue.value) + - (nodeColumnC.unitName || '') - ); + return text; } return fieldValue.value; }); diff --git a/src/editor/span/span-editor.controller.ts b/src/editor/span/span-editor.controller.ts index b98fddc07..b3cb6ddde 100644 --- a/src/editor/span/span-editor.controller.ts +++ b/src/editor/span/span-editor.controller.ts @@ -17,6 +17,14 @@ export class SpanEditorController extends CodeListEditorController { */ public valueItem = ''; + /** + * 无值隐藏单位 + * + * @type {boolean} + * @memberof SpanEditorController + */ + public emptyHiddenUnit: boolean = true; + /** * 代码表模型 * @return {*} @@ -36,6 +44,9 @@ export class SpanEditorController extends CodeListEditorController { const app = await ibiz.hub.getApp(this.context.srfappid); this.codeList = app.codeList.getCodeList(this.model.appCodeListId); } + if (this.extraParams) { + this.emptyHiddenUnit = this.extraParams.emptyHiddenUnit; + } } /** diff --git a/src/editor/span/span/span.tsx b/src/editor/span/span/span.tsx index 75711dda2..0bebda29b 100644 --- a/src/editor/span/span/span.tsx +++ b/src/editor/span/span/span.tsx @@ -121,7 +121,13 @@ export const IBizSpan = defineComponent({ text.value = `${newVal}`; } if (unitName) { - text.value += unitName; + if (c.emptyHiddenUnit) { + if (text.value) { + text.value += unitName; + } + } else { + text.value += unitName; + } } } }, diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss index 90f7484c2..5f5c75421 100644 --- a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss +++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss @@ -65,6 +65,11 @@ @include when(show-default){ // 悬浮显示编辑器 &:hover{ + + @include e('unit'){ + display: block; + } + @include b(input-number-form-default-content){ display: none; } @@ -76,8 +81,10 @@ top: getCssVar('spacing', 'super-tight'); } } + } + // 不悬浮时显示信息态 @include b(input-number-form-default-content){ display: flex; @@ -92,9 +99,18 @@ @include b(input-number-input){ display: none; } + + .#{bem('input-number','unit')}{ + display: none; + } + // 输入态 @include when(editable){ + .#{bem('input-number','unit')}{ + display: block; + } + @include b(input-number-form-default-content){ display: none; } diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx b/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx index ad6ca1edc..17f405714 100644 --- a/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx +++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx @@ -205,8 +205,14 @@ export const IBizInputNumber = defineComponent({ // 只读显示 content = isNilOrEmpty(this.currentVal) ? '' : `${this.currentFormatVal}`; // 当有值且单位存在时才显示单位 - if (content && unitName) { - content += unitName; + if (unitName) { + if (this.c.emptyHiddenUnit) { + if (content) { + content += unitName; + } + } else { + content += unitName; + } } } else { // 编辑态显示 @@ -249,11 +255,25 @@ export const IBizInputNumber = defineComponent({ } // 表单默认内容 - const formDefaultContent = ( -
- {this.currentVal || this.currentVal === 0 ? this.currentFormatVal : '-'} -
- ); + const formDefaultContent = () => { + let unit = ''; + if (unitName) { + if (this.c.emptyHiddenUnit) { + if (this.currentFormatVal) { + unit = unitName; + } + } else { + unit = unitName; + } + } + return ( +
+ {this.currentVal || this.currentVal === 0 + ? this.currentFormatVal + unit + : '-'} +
+ ); + }; return (
- {this.showFormDefaultContent && formDefaultContent} + {this.showFormDefaultContent && formDefaultContent()} {content}
); diff --git a/src/editor/text-box/input/input.tsx b/src/editor/text-box/input/input.tsx index 0c37bbda7..19fa7c8f0 100644 --- a/src/editor/text-box/input/input.tsx +++ b/src/editor/text-box/input/input.tsx @@ -101,10 +101,22 @@ export const IBizInput = defineComponent({ // 当前格式化文本值 const currentFormatVal = computed(() => { + let text = ''; + const { unitName } = props.controller.parent; if (currentVal.value) { - return props.controller.formatValue(currentVal.value); + text = props.controller.formatValue(currentVal.value); } - return ''; + + if (unitName) { + if (c.emptyHiddenUnit) { + if (text) { + text += unitName; + } + } else { + text += unitName; + } + } + return text; }); const onEmit = ( @@ -299,8 +311,14 @@ export const IBizInput = defineComponent({ // 只读显示 let text = `${props.controller.formatValue(currentVal.value)}`; // 当有值且单位存在时才显示单位 - if (text && unitName) { - text += unitName; + if (unitName) { + if (c.emptyHiddenUnit) { + if (text) { + text += unitName; + } + } else { + text += unitName; + } } return text; }); @@ -388,7 +406,15 @@ export const IBizInput = defineComponent({ const slots: IData = {}; if (unitName) { slots.suffix = () => { - return {unitName}; + let unitText = ''; + if (this.c.emptyHiddenUnit) { + if (this.currentVal) { + unitText = unitName; + } + } else { + unitText = unitName; + } + return {unitText}; }; } if (predefinedType === 'AUTH_USERID') { diff --git a/src/editor/text-box/text-box-editor.controller.ts b/src/editor/text-box/text-box-editor.controller.ts index 99d1660f7..7ad655f66 100644 --- a/src/editor/text-box/text-box-editor.controller.ts +++ b/src/editor/text-box/text-box-editor.controller.ts @@ -101,6 +101,14 @@ export class TextBoxEditorController extends CodeListEditorController */ public codeList: IAppCodeList | undefined = undefined; + /** + * 无值隐藏单位 + * + * @type {boolean} + * @memberof TextBoxEditorController + */ + public emptyHiddenUnit: boolean = true; + protected async onInit(): Promise { await super.onInit(); this.precision = this.editorParams.precision @@ -164,5 +172,8 @@ export class TextBoxEditorController extends CodeListEditorController const app = await ibiz.hub.getApp(this.context.srfappid); this.codeList = app.codeList.getCodeList(this.model.appCodeListId); } + if (this.extraParams) { + this.emptyHiddenUnit = this.extraParams.emptyHiddenUnit; + } } } -- Gitee From e6427cf56587de26b37b90041e360c17080106b3 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Wed, 27 Nov 2024 21:12:33 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B0=83=E7=94=A8?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=B7=A5=E5=85=B7=E8=BF=9B=E8=A1=8C=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E6=97=B6=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 5 ++++- src/util/fullscreen/fullscreen-util.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c0903e9f..db9fe4012 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,10 +9,13 @@ ### Added - - 编辑器可根据全局参数emptyHiddenUnit或者部件参数emptyhiddenunit，以及编辑器参数EMPTYHIDDENUNIT决定当前项无值时是否还显示单位，优先级依次递增 - 协同编辑消息占位支持显示头像 +### Fixed + +- 修复调用全屏工具进行全屏时背景颜色异常的问题 + ## [0.7.38-alpha.28] - 2024-11-25 ### Changed diff --git a/src/util/fullscreen/fullscreen-util.ts b/src/util/fullscreen/fullscreen-util.ts index 564d5bd89..4969f6dcb 100644 --- a/src/util/fullscreen/fullscreen-util.ts +++ b/src/util/fullscreen/fullscreen-util.ts @@ -52,7 +52,7 @@ export class FullscreenUtil { if (this.FullscreenClass) { div.classList.toggle(this.FullscreenClass); } - div.style.background = `var(--${defaultNamespace}-bg-1)`; + div.style.background = `var(--${defaultNamespace}-color-bg-1)`; const content = document.createElement('div'); content.id = 'fullscreen'; content.style.position = 'absolute'; -- Gitee From 1af6eba4270275c45670ec5f1a6c1a3c35328617 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Thu, 28 Nov 2024 10:56:01 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=92=8C?= =?UTF-8?q?=E7=94=98=E7=89=B9=E8=A1=A8=E6=A0=BC=E6=94=AF=E6=8C=81=E5=88=97?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E6=8E=92=E5=BA=8F=E4=BB=A5=E5=8F=8A=E5=88=97?= =?UTF-8?q?=E5=AE=BD=E6=8C=81=E4=B9=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + package.json | 2 +- pnpm-lock.yaml | 16 ++-- src/common/gantt-setting/gantt-setting.scss | 18 +++++ src/common/gantt-setting/gantt-setting.tsx | 82 +++++++++++++++++++-- src/common/grid-setting/grid-setting.tsx | 6 +- src/control/gantt/gantt.tsx | 37 +++++++++- src/control/grid/grid/grid-control.util.ts | 11 +++ src/control/grid/grid/grid.tsx | 6 +- src/locale/en/index.ts | 1 + src/locale/zh-CN/index.ts | 1 + 11 files changed, 162 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db9fe4012..d1a515f7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Added +- 表格和甘特表格支持列字段排序以及列宽持久化 - 编辑器可根据全局参数emptyHiddenUnit或者部件参数emptyhiddenunit，以及编辑器参数EMPTYHIDDENUNIT决定当前项无值时是否还显示单位，优先级依次递增 - 协同编辑消息占位支持显示头像 diff --git a/package.json b/package.json index f1a915629..fdb2b7521 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "dependencies": { "@floating-ui/dom": "^1.5.3", "@ibiz-template-plugin/ai-chat": "^0.0.5", - "@ibiz-template-plugin/gantt": "0.1.8-alpha.87", + "@ibiz-template-plugin/gantt": "0.1.8-alpha.92", "@ibiz-template-plugin/bi-report": "0.0.25", "@ibiz-template-plugin/data-view": "0.0.3", "@ibiz-template/core": "0.7.38-alpha.29", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 325ec0c8c..8b535bc39 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: '@floating-ui/dom': specifier: ^1.5.3 @@ -18,8 +14,8 @@ dependencies: specifier: 0.0.3 version: 0.0.3(@ibiz-template/core@0.7.38-alpha.29)(@ibiz-template/runtime@0.7.38-alpha.30)(@ibiz-template/theme@0.7.0)(@ibiz-template/vue3-util@0.7.38-alpha.30)(@ibiz/model-core@0.1.59)(axios@1.6.8)(dayjs@1.11.10)(element-plus@2.4.4)(qx-util@0.4.8)(ramda@0.29.1)(vue@3.3.8)(vuedraggable@4.1.0) '@ibiz-template-plugin/gantt': - specifier: 0.1.8-alpha.87 - version: 0.1.8-alpha.87(async-validator@4.2.5)(axios@1.6.8)(dayjs@1.11.10)(lodash-es@4.17.21)(nprogress@0.2.0)(vue@3.3.8) + specifier: 0.1.8-alpha.92 + version: 0.1.8-alpha.92(async-validator@4.2.5)(axios@1.6.8)(dayjs@1.11.10)(lodash-es@4.17.21)(nprogress@0.2.0)(vue@3.3.8) '@ibiz-template/core': specifier: 0.7.38-alpha.29 version: 0.7.38-alpha.29(axios@1.6.8)(lodash-es@4.17.21)(qs@6.11.2)(qx-util@0.4.8)(ramda@0.29.1) @@ -2043,8 +2039,8 @@ packages: vuedraggable: 4.1.0(vue@3.3.8) dev: false - /@ibiz-template-plugin/gantt@0.1.8-alpha.87(async-validator@4.2.5)(axios@1.6.8)(dayjs@1.11.10)(lodash-es@4.17.21)(nprogress@0.2.0)(vue@3.3.8): - resolution: {integrity: sha512-URXbxm3ppT7SqZW7na6c3E/8geqhNVSu7/j7PPWMcCapbf5g8k2qI51XZwl0WdH5oBcQxxD3Dwtc6lZ0qP9bug==} + /@ibiz-template-plugin/gantt@0.1.8-alpha.92(async-validator@4.2.5)(axios@1.6.8)(dayjs@1.11.10)(lodash-es@4.17.21)(nprogress@0.2.0)(vue@3.3.8): + resolution: {integrity: sha512-wmtr/qxHCL0eLgMaxhsVFUI54BrE93mW4NZg9JlGJSZC+ebt0wRz8rJtgkxgcDbM9K6poK63Y+U7BcmQVI9U1A==} peerDependencies: dayjs: ^1.11.10 lodash-es: ^4.17.21 @@ -11928,3 +11924,7 @@ packages: dependencies: tslib: 2.3.0 dev: false + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/src/common/gantt-setting/gantt-setting.scss b/src/common/gantt-setting/gantt-setting.scss index 828b02ad4..9f3caaf5c 100644 --- a/src/common/gantt-setting/gantt-setting.scss +++ b/src/common/gantt-setting/gantt-setting.scss @@ -58,6 +58,7 @@ $gantt-setting: ( @include b('gantt-setting-search-list') { width: 100%; + user-select: none; @include e('caption') { margin-bottom: getCssVar('spacing', 'tight'); @@ -84,6 +85,12 @@ $gantt-setting: ( padding-bottom: getCssVar('spacing', 'tight'); overflow-y: auto; } + + @include e('drag-list'){ + @include m('item'){ + background-color: getCssVar(color,fill,1); + } + } } @include b('gantt-setting-list-item') { @@ -99,6 +106,9 @@ $gantt-setting: ( &:hover { background-color: getCssVar('color', 'fill', 2); + .#{bem('gantt-setting-list-item','drag-icon')}{ + opacity: 1; + } } @include e('caption') { @@ -132,6 +142,10 @@ $gantt-setting: ( } } + @include e('drag-icon'){ + opacity: 0; + } + @include when('optional') { @include e('end-icon') { cursor: pointers; @@ -147,6 +161,10 @@ $gantt-setting: ( background: none; opacity: getCssVar('gantt-setting', disabled-opacity); } + + @include when('filter-item'){ + display: none + } } @media (width >=992px) { diff --git a/src/common/gantt-setting/gantt-setting.tsx b/src/common/gantt-setting/gantt-setting.tsx index 8654d9cff..2485ddb50 100644 --- a/src/common/gantt-setting/gantt-setting.tsx +++ b/src/common/gantt-setting/gantt-setting.tsx @@ -1,6 +1,8 @@ +/* eslint-disable prefer-const */ import { defineComponent, PropType, ref, watch } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; import { IModal, IColumnState, IModalData } from '@ibiz-template/runtime'; +import draggable from 'vuedraggable'; import { clone } from 'ramda'; import './gantt-setting.scss'; @@ -49,11 +51,36 @@ const searchIcon = (): JSX.Element => ( ); +const dragIcon = (): JSX.Element => { + return ( + + + + + + + + ); +}; + // 列表类型 type ListType = 'optional' | 'selected'; export const IBizGanttSetting = defineComponent({ name: 'IBizGanttSetting', + components: { + draggable, + }, props: { modal: { type: Object as PropType, required: true }, // 表格列状态数组 @@ -64,6 +91,11 @@ export const IBizGanttSetting = defineComponent({ required: true, default: () => ['sn', 'name'], }, + // 最多显示多少列，默认值为0，表示无限制 + limitsize: { + type: Number, + default: 0, + }, }, emits: [], setup(props) { @@ -103,6 +135,15 @@ export const IBizGanttSetting = defineComponent({ // 处理右侧项点击 const onListItemClick = (item: IColumnState): void => { + if (props.limitsize > 0 && item.hidden) { + const columns = states.value.filter((_item: IColumnState) => { + const must = calcMustShowColumn(_item); + return !must && !_item.hidden; + }); + if (columns && columns.length >= props.limitsize) { + return; + } + } Object.assign(item, { hidden: !item.hidden }); }; @@ -171,11 +212,20 @@ export const IBizGanttSetting = defineComponent({ states.value.some( (item2: IData) => item.key === item2.key && !item.hidden, ); + const searchVal = isOptional ? optionalInput.value : selectedInput.value; + const isFilterItem = !caption.includes(searchVal); + return (
isOptional && !isMust && onListItemClick(item)} > +
{dragIcon()}
{caption}
{(isSelectedShow || (isOptional && isMust)) && selectedIcon()} @@ -199,7 +249,7 @@ export const IBizGanttSetting = defineComponent({ ): JSX.Element => { const isOptional = type === 'optional'; const searchVal = isOptional ? optionalInput.value : selectedInput.value; - const values: IColumnState[] = []; + let values: IColumnState[] = []; listData.forEach( item => item.caption?.includes(searchVal) && values.push(item), ); @@ -210,25 +260,43 @@ export const IBizGanttSetting = defineComponent({ const caption = isOptional ? ibiz.i18n.t('component.ganttSetting.optionalAttribute') : ibiz.i18n.t('component.ganttSetting.selectedAttribute'); - + const limitsizeLag = ibiz.i18n.t('component.ganttSetting.limitsize', { + max: props.limitsize + props.mustShowColumns.length, + }); return (
- {`${caption} · ${lengthNum}`} + {`${caption} · ${lengthNum} ${ + !isOptional && props.limitsize > 0 ? `(${limitsizeLag})` : '' + }`}
{isOptional ? renderLeftSearch() : renderRightSearch()}
- {values.map((item: IColumnState) => { - return renderListItem(item, type); - })} + + {{ + item: ({ element: state }: { element: IColumnState }) => { + return renderListItem(state, type); + }, + }} +
); }; + return { ns, optionalInput, diff --git a/src/common/grid-setting/grid-setting.tsx b/src/common/grid-setting/grid-setting.tsx index b311c28ab..af10f77e7 100644 --- a/src/common/grid-setting/grid-setting.tsx +++ b/src/common/grid-setting/grid-setting.tsx @@ -35,7 +35,11 @@ export const IBizGridSetting = defineComponent({ }); const isDraggable = computed(() => { - return !!c.controlParams.enablecolumnsort; + let enablesort = ibiz.config.grid.enableColumnSort; + if (c.controlParams.enablecolumnsort) { + enablesort = Object.is(c.controlParams.enablecolumnsort, 'true'); + } + return enablesort; }); // 点击后控制显隐 diff --git a/src/control/gantt/gantt.tsx b/src/control/gantt/gantt.tsx index d6abd0326..f9f327027 100644 --- a/src/control/gantt/gantt.tsx +++ b/src/control/gantt/gantt.tsx @@ -350,12 +350,18 @@ export const GanttControl = defineComponent({ * 表格列设置点击 */ const onSettingClick = async (): Promise => { + // 最大限制数（除去必须显示列之外的其他列），默认值为0，表示无限制 + let limitsize = 0; + if (c.controlParams.limitsize) { + limitsize = Number(c.controlParams.limitsize); + } const res: IModalData = await ibiz.overlay.modal( (modal: IModal): VNode => { const comp = resolveComponent('IBizGanttSetting') as string; const options: IData = { modal, columnStates: c.state.columnStates, + limitsize, }; if (c.state.mustShowColumns) { options.mustShowColumns = c.state.mustShowColumns; @@ -528,11 +534,24 @@ export const GanttControl = defineComponent({ const renderColumn = (model: IDETreeColumn, index: number): VNode => { const { caption, codeName, width, headerSysCss, align } = model; const columnC = c.columns[codeName!]; + const columnState: IColumnState | undefined = c.state.columnStates.find( + (item: IColumnState) => { + return item.key === codeName; + }, + ); + + let tempWidth = 30; + if (columnState && columnState.columnWidth) { + tempWidth = columnState.columnWidth > 30 ? columnState.columnWidth : 30; + } else if (width && width > 30) { + tempWidth = width; + } + return ( 30 ? width : 30} + width={tempWidth} center={align?.toLowerCase() === 'center'} > {{ @@ -728,6 +747,20 @@ export const GanttControl = defineComponent({ ); }; + /** + * 左侧表格列宽度拖动 + * + * @param {IData} column + * @param {number} width + */ + const onHeaderDragend = (index: number, width: number) => { + const columnState = c.state.columnStates[index]; + if (columnState) { + columnState.columnWidth = width; + c.saveColumnState(); + } + }; + return { c, ns, @@ -750,6 +783,7 @@ export const GanttControl = defineComponent({ allowDrop, allowDrag, handleDrop, + onHeaderDragend, }; }, render() { @@ -785,6 +819,7 @@ export const GanttControl = defineComponent({ onRowClick={this.onNodeClick} onRowDblClick={this.onNodeDbClick} onRowChecked={this.onCheck} + onHeaderDragend={this.onHeaderDragend} onMoveSlider={this.onSliderMove} primaryColor={this.ganttStyle.primaryColor} headerStyle={{ diff --git a/src/control/grid/grid/grid-control.util.ts b/src/control/grid/grid/grid-control.util.ts index 90c73903b..8d4ffb86a 100644 --- a/src/control/grid/grid/grid-control.util.ts +++ b/src/control/grid/grid/grid-control.util.ts @@ -5,6 +5,7 @@ import { ControlVO, GridController, GridRowState, + IColumnState, IControlProvider, IGridRowState, Srfuf, @@ -660,6 +661,16 @@ export function useAppGridBase( }); c.hasAdaptiveColumn = index !== -1; } + + // 列宽持久化 + const columnState = c.state.columnStates.find((item: IColumnState) => { + return item.key === property; + }); + + if (columnState) { + columnState.columnWidth = newWidth; + c.saveColumnStates(); + } }; return { diff --git a/src/control/grid/grid/grid.tsx b/src/control/grid/grid/grid.tsx index 9ac65a8e6..797c9f9a7 100644 --- a/src/control/grid/grid/grid.tsx +++ b/src/control/grid/grid/grid.tsx @@ -62,6 +62,8 @@ export function renderColumn( index: number, ): VNode | null { const { codeName: columnName, width } = model; + + // 查缓存，有缓存用缓存，没缓存的用模型 const columnC = c.columns[columnName!]; const columnState = c.state.columnStates.find( item => item.key === columnName, @@ -73,12 +75,14 @@ export function renderColumn( (!c.hasAdaptiveColumn && index === renderColumns.length - 1); const widthName = widthFlexGrow ? 'min-width' : 'width'; + + const tempWidth = columnState?.columnWidth || width; // 表格列自定义 return (