Browse Source

修复部分问题

main
likunming 3 months ago
parent
commit
b3c168fbb0
  1. 71
      io.sc.platform.core.frontend/src/platform/components/grid/Td.vue
  2. 10
      io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
  3. 4
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  4. 3
      io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css
  5. 3
      io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts
  6. 6
      io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FieldNames.ts
  7. 11
      io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts
  8. 17
      io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts
  9. 13
      io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts
  10. 17
      io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
  11. 4
      io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
  12. 16
      io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue

71
io.sc.platform.core.frontend/src/platform/components/grid/Td.vue

@ -131,55 +131,34 @@ const generateTdIfComputed = computed(() => {
return true;
});
const mergeGroupByFieldContainsIf = (fieldName: string) => {
const mergeGroupByField = tools.cm.mergeGroupByField.value;
if (Array.isArray(mergeGroupByField) && mergeGroupByField.length > 0) {
const index = mergeGroupByField.findIndex((item) => item === fieldName);
if (index > -1) {
return true;
}
}
return false;
};
const sortByContainsIf = (fieldName: string) => {
if (tools.props.sortBy && tools.props.sortBy.length > 0) {
const findResult = tools.props.sortBy.findIndex((item) => {
if (item.startsWith('-') && item.substring(1) === fieldName) {
return true;
}
return item === fieldName;
});
return findResult > -1;
}
return false;
};
const tdClick = () => {
// 退
const cellSelected = tools.table.store.cellSelected;
if (cellSelected) {
if (tools.props.localMode && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL && tools.props.selectMode === Constant.SELECT_MODE.CELL) {
if (cellSelected.colName !== props.col['name'] || cellSelected.row[rowKey] !== props.scope.row[rowKey]) {
tools.editFM.exitInlineEdit();
}
} else if (
tools.props.localMode &&
tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW &&
tools.props.selectMode === Constant.SELECT_MODE.CELL
) {
if (cellSelected.row[rowKey] !== props.scope.row[rowKey]) {
tools.editFM.exitInlineEdit();
if (props.scope.row[Constant.FIELD_NAMES.SELECTABLE]) {
// 退
const cellSelected = tools.table.store.cellSelected;
if (cellSelected) {
if (tools.props.localMode && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL && tools.props.selectMode === Constant.SELECT_MODE.CELL) {
if (cellSelected.colName !== props.col['name'] || cellSelected.row[rowKey] !== props.scope.row[rowKey]) {
tools.editFM.exitInlineEdit();
}
} else if (
tools.props.localMode &&
tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW &&
tools.props.selectMode === Constant.SELECT_MODE.CELL
) {
if (cellSelected.row[rowKey] !== props.scope.row[rowKey]) {
tools.editFM.exitInlineEdit();
}
}
}
}
if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE && tools.props.selectMode === Constant.SELECT_MODE.CELL) {
tools.table.store.cellSelected = {
row: toRaw(props.scope.row),
rowKey: props.scope.row[rowKey],
primaryKey: props.scope.row[tools.props.primaryKey],
colName: props.col['name'],
value: props.scope.row[props.col['name']],
};
if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE && tools.props.selectMode === Constant.SELECT_MODE.CELL) {
tools.table.store.cellSelected = {
row: toRaw(props.scope.row),
rowKey: props.scope.row[rowKey],
primaryKey: props.scope.row[tools.props.primaryKey],
colName: props.col['name'],
value: props.scope.row[props.col['name']],
};
}
}
};

10
io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue

@ -3,7 +3,7 @@
ref="trRef"
:props="props.scope"
:no-hover="trNoHoverComputed"
:class="{ selected: trSelectedClassComputed }"
:class="{ selected: trSelectedClassComputed, mouseDisabled: !scope.row[Constant.FIELD_NAMES.SELECTABLE] }"
:draggable="draggableComputed"
@click.stop="tools.em.rowClick($event, props.scope.row, props.scope.rowIndex)"
@dblclick.stop="tools.em.rowDbClick($event, scope.row, scope.rowIndex)"
@ -18,6 +18,7 @@
<q-checkbox
v-model="rowDataComputed[tickedField]"
flat
:disable="!props.scope.row[Constant.FIELD_NAMES.SELECTABLE]"
:dense="tools.table.configStore.dense || tools.table.configStore.denseBody || false"
@update:model-value="tools.em.updateTicked($event, scope.row)"
/>
@ -94,7 +95,12 @@ const trSelectedClassComputed = computed(() => {
//
const draggableComputed = computed(() => {
return dndMode && !Tools.isEmpty(Constant.DND_MODE.getAll()[dndMode]) && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE;
return (
dndMode &&
!Tools.isEmpty(Constant.DND_MODE.getAll()[dndMode]) &&
tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE &&
props.scope.row[Constant.FIELD_NAMES.SELECTABLE]
);
});
//

4
io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

@ -1,6 +1,6 @@
<template>
<div v-show="tools.cm.showIf.value" class="w-grid" style="height: 100%">
<q-resize-observer debounce="500" @resize="tools.opFM.resize" />
<q-resize-observer debounce="500" @resize="tools.opFM.resize('table')" />
<q-table
ref="tableRef"
v-model:pagination="tools.table.store.pagination"
@ -27,7 +27,7 @@
>
<!-- 查询表单与按钮工具栏 -->
<template #top="scope">
<q-resize-observer debounce="100" @resize="tools.opFM.resize" />
<q-resize-observer debounce="500" @resize="tools.opFM.resize('top')" />
<Top ref="topRef" :scope="scope"> </Top>
</template>

3
io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css

@ -4,6 +4,9 @@
.w-grid .cellHover:hover {
background-color: rgba(0, 0, 0, .03);
}
.w-grid .mouseDisabled {
cursor: not-allowed; /* 将鼠标指针变为禁用图标 */
}
.w-grid .q-table__top {
padding: var(--tableTopPadding) var(--tableTopPadding);
}

3
io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts

@ -266,6 +266,9 @@ export class GridTools {
if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN)) {
delete target[Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN];
}
if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.SELECTABLE)) {
delete target[Constant.FIELD_NAMES.SELECTABLE];
}
}
/**

6
io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FieldNames.ts

@ -42,6 +42,11 @@ export class FieldNames {
*/
public static LAZYLOAD_NO_CHILDREN = '_lazyloadNoChildren';
/**
*
*/
public static SELECTABLE = '_selectable';
/**
*
* @param props
@ -58,6 +63,7 @@ export class FieldNames {
rowOldValue: FieldNames.ROW_OLD_VALUE,
rowIndex: FieldNames.ROW_INDEX,
lazyloadNoChildren: FieldNames.LAZYLOAD_NO_CHILDREN,
selectable: FieldNames.SELECTABLE,
};
}
}

11
io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts

@ -1,5 +1,3 @@
import type { PropsType } from '../types/PropsType';
import { RowClick } from './src/RowClick';
import { RowDbClick } from './src/RowDbClick';
import { AfterDragAndDrop } from './src/AfterDragAndDrop';
@ -14,6 +12,7 @@ import { AfterRemove } from './src/AfterRemove';
import { AfterEditorOpen } from './src/AfterEditorOpen';
import { GridTools } from '../GridTools';
import { TableType } from '../types/TableType';
import { Constant, PropsType } from '../../ts/index';
/**
* w-grid
@ -54,7 +53,9 @@ export class EventManager {
* @param index
*/
public rowClick(evt: any, row: any, index: number) {
this._rowClick.execute(evt, row, index);
if (row[Constant.FIELD_NAMES.SELECTABLE]) {
this._rowClick.execute(evt, row, index);
}
}
/**
@ -64,7 +65,9 @@ export class EventManager {
* @param index
*/
public rowDbClick(evt: any, row: any, index: number) {
this._rowDbClick.execute(evt, row, index);
if (row[Constant.FIELD_NAMES.SELECTABLE]) {
this._rowDbClick.execute(evt, row, index);
}
}
/**

17
io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts

@ -17,17 +17,12 @@ export class UpdateTickeds extends Base {
const selectedField = this.props.selectedField;
const tickedField = this.props.tickedField;
if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) {
if (value) {
this.table.rows.forEach((item) => {
item[tickedField] = true;
item[selectedField] = true;
});
} else {
this.table.rows.forEach((item) => {
item[tickedField] = false;
item[selectedField] = false;
});
}
this.table.rows.forEach((item) => {
if (item[Constant.FIELD_NAMES.SELECTABLE]) {
item[tickedField] = value;
item[selectedField] = value;
}
});
} else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
this.table.store.headerTicked = null;
} else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {

13
io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts

@ -7,6 +7,8 @@ import { Constant, PropsType, TableType } from '../index';
* w-grid
*/
export class Operator extends Base {
private topResizeFlag = false;
constructor(props: PropsType, table: TableType) {
super(props, table);
this.tableFullscreen = this.tableFullscreen.bind(this);
@ -102,17 +104,16 @@ export class Operator extends Base {
*
* @returns
*/
resize() {
if (!this || !this.table) {
return;
}
resize(location: string) {
const tableElement = this.instance?.getHtmlElement();
if (!tableElement) {
return;
}
this.table.store.resizeFlag = !this.table.store.resizeFlag;
this.table.componentRef.getTopRef()?.handleQueryFormShowField();
this.table.componentRef.getTopRef()?.handleToolbarActions();
if (location === 'top') {
this.table.componentRef.getTopRef()?.handleQueryFormShowField();
this.table.componentRef.getTopRef()?.handleToolbarActions();
}
if (tableElement) {
this.table.store.location.yLocation = tableElement.getBoundingClientRect().y;
if (tableElement.getElementsByClassName('noDataTr').length > 0) {

17
io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts

@ -365,6 +365,7 @@ export class RowData extends Base {
rowData[this.props.tickedField] = this.getInitRowTicked(rowData);
rowData[this.props.selectedField] = this.getInitRowSelected(rowData);
rowData[Constant.FIELD_NAMES.ROW_OLD_VALUE] = {};
rowData[Constant.FIELD_NAMES.SELECTABLE] = this.getSelectable(rowData);
this.setOldValue(rowData);
if (this.props.tree) {
if (this.table.store.expandDatas.length > 0 && this.table.store.expandDatas.includes(rowData[this.props.primaryKey])) {
@ -378,6 +379,22 @@ export class RowData extends Base {
}
}
/**
*
* @param rowData
* @returns
*/
private getSelectable(rowData: any): boolean {
let selectable = true;
if (this.props.selectableIf && typeof this.props.selectableIf === 'function') {
const result = this.props.selectableIf({ grid: this.instance, data: rowData });
if (!result) {
selectable = false;
}
}
return selectable;
}
/**
* ticked状态
* @param rowData

4
io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts

@ -207,6 +207,10 @@ export type PropsType = {
* toolbar
*/
toolbarConfigure: any,
/**
*
*/
selectableIf?: Function,
/**
*
*/

16
io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue

@ -75,8 +75,8 @@
>
<q-item-section>
<q-item-label
><q-icon v-if="childrenBtn.icon" :name="getIcon(childrenBtn.icon)" left size="20px"></q-icon>
{{ getLabel(childrenBtn.label) }}</q-item-label
><q-icon v-if="childrenBtn?.icon" :name="getIcon(childrenBtn?.icon)" left size="20px"></q-icon>
{{ getLabel(childrenBtn?.label) }}</q-item-label
>
</q-item-section>
</q-item>
@ -204,7 +204,11 @@ const localFlag = ref(false);
watch(
() => modelValue.value,
(newVal, oldVal) => {
handleButtons();
// handleButtons();
// if (containerRef.value) {
// isActionWidthInitializedRef.value = false;
// onResize(containerRef.value.clientWidth);
// }
},
);
@ -284,11 +288,12 @@ const onResize = (size) => {
if (!isActionWidthInitializedRef.value) {
const nodes = containerRef.value.getElementsByClassName('class-action-item');
for (let i = 0; i < buttons_.length; i++) {
buttons_[i].width = nodes[i].clientWidth;
if (nodes[i]) {
buttons_[i].width = nodes[i].clientWidth;
}
}
isActionWidthInitializedRef.value = true;
}
reset(size.width);
};
@ -425,6 +430,7 @@ const buttonClick = async (button) => {
selectedColName: props.grid.getSelectedCell()['colName'],
};
if (button.enableIf && !button.enableIf(args)) {
console.warn('[w-toolbar] The function `enableIf` returns false, causing the `click` not to trigger.' + ' button name is `' + button['name'] + '`');
return;
}
let beforeResult = true;

Loading…
Cancel
Save