Browse Source

修复部分问题

main
likunming 3 months ago
parent
commit
b3c168fbb0
  1. 25
      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. 7
      io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts
  8. 13
      io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts
  9. 9
      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. 14
      io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue

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

@ -131,30 +131,8 @@ const generateTdIfComputed = computed(() => {
return true; 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 tdClick = () => {
if (props.scope.row[Constant.FIELD_NAMES.SELECTABLE]) {
// 退 // 退
const cellSelected = tools.table.store.cellSelected; const cellSelected = tools.table.store.cellSelected;
if (cellSelected) { if (cellSelected) {
@ -181,6 +159,7 @@ const tdClick = () => {
value: props.scope.row[props.col['name']], value: props.scope.row[props.col['name']],
}; };
} }
}
}; };
onMounted(() => { onMounted(() => {

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

@ -3,7 +3,7 @@
ref="trRef" ref="trRef"
:props="props.scope" :props="props.scope"
:no-hover="trNoHoverComputed" :no-hover="trNoHoverComputed"
:class="{ selected: trSelectedClassComputed }" :class="{ selected: trSelectedClassComputed, mouseDisabled: !scope.row[Constant.FIELD_NAMES.SELECTABLE] }"
:draggable="draggableComputed" :draggable="draggableComputed"
@click.stop="tools.em.rowClick($event, props.scope.row, props.scope.rowIndex)" @click.stop="tools.em.rowClick($event, props.scope.row, props.scope.rowIndex)"
@dblclick.stop="tools.em.rowDbClick($event, scope.row, scope.rowIndex)" @dblclick.stop="tools.em.rowDbClick($event, scope.row, scope.rowIndex)"
@ -18,6 +18,7 @@
<q-checkbox <q-checkbox
v-model="rowDataComputed[tickedField]" v-model="rowDataComputed[tickedField]"
flat flat
:disable="!props.scope.row[Constant.FIELD_NAMES.SELECTABLE]"
:dense="tools.table.configStore.dense || tools.table.configStore.denseBody || false" :dense="tools.table.configStore.dense || tools.table.configStore.denseBody || false"
@update:model-value="tools.em.updateTicked($event, scope.row)" @update:model-value="tools.em.updateTicked($event, scope.row)"
/> />
@ -94,7 +95,12 @@ const trSelectedClassComputed = computed(() => {
// //
const draggableComputed = 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> <template>
<div v-show="tools.cm.showIf.value" class="w-grid" style="height: 100%"> <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 <q-table
ref="tableRef" ref="tableRef"
v-model:pagination="tools.table.store.pagination" v-model:pagination="tools.table.store.pagination"
@ -27,7 +27,7 @@
> >
<!-- 查询表单与按钮工具栏 --> <!-- 查询表单与按钮工具栏 -->
<template #top="scope"> <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> <Top ref="topRef" :scope="scope"> </Top>
</template> </template>

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

@ -4,6 +4,9 @@
.w-grid .cellHover:hover { .w-grid .cellHover:hover {
background-color: rgba(0, 0, 0, .03); background-color: rgba(0, 0, 0, .03);
} }
.w-grid .mouseDisabled {
cursor: not-allowed; /* 将鼠标指针变为禁用图标 */
}
.w-grid .q-table__top { .w-grid .q-table__top {
padding: var(--tableTopPadding) var(--tableTopPadding); 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)) { if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN)) {
delete 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 LAZYLOAD_NO_CHILDREN = '_lazyloadNoChildren';
/**
*
*/
public static SELECTABLE = '_selectable';
/** /**
* *
* @param props * @param props
@ -58,6 +63,7 @@ export class FieldNames {
rowOldValue: FieldNames.ROW_OLD_VALUE, rowOldValue: FieldNames.ROW_OLD_VALUE,
rowIndex: FieldNames.ROW_INDEX, rowIndex: FieldNames.ROW_INDEX,
lazyloadNoChildren: FieldNames.LAZYLOAD_NO_CHILDREN, lazyloadNoChildren: FieldNames.LAZYLOAD_NO_CHILDREN,
selectable: FieldNames.SELECTABLE,
}; };
} }
} }

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

13
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 selectedField = this.props.selectedField;
const tickedField = this.props.tickedField; const tickedField = this.props.tickedField;
if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) { if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) {
if (value) {
this.table.rows.forEach((item) => { this.table.rows.forEach((item) => {
item[tickedField] = true; if (item[Constant.FIELD_NAMES.SELECTABLE]) {
item[selectedField] = true; item[tickedField] = value;
}); item[selectedField] = value;
} else {
this.table.rows.forEach((item) => {
item[tickedField] = false;
item[selectedField] = false;
});
} }
});
} else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) { } else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
this.table.store.headerTicked = null; this.table.store.headerTicked = null;
} else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) { } else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {

9
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 * w-grid
*/ */
export class Operator extends Base { export class Operator extends Base {
private topResizeFlag = false;
constructor(props: PropsType, table: TableType) { constructor(props: PropsType, table: TableType) {
super(props, table); super(props, table);
this.tableFullscreen = this.tableFullscreen.bind(this); this.tableFullscreen = this.tableFullscreen.bind(this);
@ -102,17 +104,16 @@ export class Operator extends Base {
* *
* @returns * @returns
*/ */
resize() { resize(location: string) {
if (!this || !this.table) {
return;
}
const tableElement = this.instance?.getHtmlElement(); const tableElement = this.instance?.getHtmlElement();
if (!tableElement) { if (!tableElement) {
return; return;
} }
this.table.store.resizeFlag = !this.table.store.resizeFlag; this.table.store.resizeFlag = !this.table.store.resizeFlag;
if (location === 'top') {
this.table.componentRef.getTopRef()?.handleQueryFormShowField(); this.table.componentRef.getTopRef()?.handleQueryFormShowField();
this.table.componentRef.getTopRef()?.handleToolbarActions(); this.table.componentRef.getTopRef()?.handleToolbarActions();
}
if (tableElement) { if (tableElement) {
this.table.store.location.yLocation = tableElement.getBoundingClientRect().y; this.table.store.location.yLocation = tableElement.getBoundingClientRect().y;
if (tableElement.getElementsByClassName('noDataTr').length > 0) { 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.tickedField] = this.getInitRowTicked(rowData);
rowData[this.props.selectedField] = this.getInitRowSelected(rowData); rowData[this.props.selectedField] = this.getInitRowSelected(rowData);
rowData[Constant.FIELD_NAMES.ROW_OLD_VALUE] = {}; rowData[Constant.FIELD_NAMES.ROW_OLD_VALUE] = {};
rowData[Constant.FIELD_NAMES.SELECTABLE] = this.getSelectable(rowData);
this.setOldValue(rowData); this.setOldValue(rowData);
if (this.props.tree) { if (this.props.tree) {
if (this.table.store.expandDatas.length > 0 && this.table.store.expandDatas.includes(rowData[this.props.primaryKey])) { 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状态 * ticked状态
* @param rowData * @param rowData

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

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

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

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

Loading…
Cancel
Save