wangshaoping
/
platform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复部分问题

main
likunming 4 months ago
parent
17bfc4e22f
commit
ff4560ae5c
10 changed files with 73 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
  2. 8
      io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
  3. 2
      io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
  4. 14
      io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
  5. 39
      io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
  6. 27
      io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
  7. 45
      io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
  8. 16
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  9. 6
      io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css
  10. 2
      io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts

2
io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
View File

@ -18,7 +18,7 @@
<q-card :style="generateDialogStyle()"> <q-card :style="generateDialogStyle()">
<q-card-section style="height: 59px"> <q-card-section style="height: 59px">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="text-h6">{{ title }}</div> <div class="text-h6">{{ titleRef }}</div>
<div class="flex justify-end gap-4"> <div class="flex justify-end gap-4">
<template v-if="buttons && buttons.length > 0"> <template v-if="buttons && buttons.length > 0">
<template v-for="(btn, index) in buttons as any" :key="index"> <template v-for="(btn, index) in buttons as any" :key="index">

8
io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
View File

@ -22,8 +22,8 @@
<template v-else> <template v-else>
<q-tr <q-tr
ref="trRef" ref="trRef"
:no-hover="props.grid.props.selectedMode === selectedMode.row ? false : true" :no-hover="props.grid.props.selectMode === selectMode.row ? false : true"
:class="props.scope.row[table.selectedField] && props.grid.props.selectedMode === selectedMode.row ? 'selected' : ''" :class="props.scope.row[table.selectedField] && props.grid.props.selectMode === selectMode.row ? 'selected' : ''"
:props="props.scope" :props="props.scope"
:draggable="draggableComputed" :draggable="draggableComputed"
@click.stop="props.rowClick($event, scope.row, scope.rowIndex)" @click.stop="props.rowClick($event, scope.row, scope.rowIndex)"
@ -33,7 +33,7 @@
@drop="draggableComputed ? onDrop($event, scope) : () => {}" @drop="draggableComputed ? onDrop($event, scope) : () => {}"
@dragstart="draggableComputed ? onDragStart($event, scope) : () => {}" @dragstart="draggableComputed ? onDragStart($event, scope) : () => {}"
> >
<q-td v-if="table.checkboxSelection && props.grid.props.selectedMode !== selectedMode.none" class="text-center" style="padding: 0; width: 50px"> <q-td v-if="table.checkboxSelection && props.grid.props.selectMode !== selectMode.none" class="text-center" style="padding: 0; width: 50px">
<q-checkbox <q-checkbox
v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[table.tickedField]" v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[table.tickedField]"
flat flat
@ -70,7 +70,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, inject, ref, toRaw } from 'vue'; import { computed, inject, ref, toRaw } from 'vue';
import { Tools, noErrorAxios, NotifyManager, t } from '@/platform'; import { Tools, noErrorAxios, NotifyManager, t } from '@/platform';
import { dndMode, dndImage, selectedMode, editStatus } from './ts/grid'; import { dndMode, dndImage, selectMode, editStatus } from './ts/grid';
import TreeGridRow from './TreeGridRow.vue'; import TreeGridRow from './TreeGridRow.vue';
import GridTd from './GridTd.vue'; import GridTd from './GridTd.vue';
import GridEditToolbar from './GridEditToolbar.vue'; import GridEditToolbar from './GridEditToolbar.vue';

2
io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<w-dialog ref="dialogRef" :title="dialog.dialogTitle" v-bind="props.grid.props.editor.dialog" :buttons="dialogButtonsComputed"> <w-dialog ref="dialogRef" v-bind="props.grid.props.editor.dialog" :title="dialog.dialogTitle" :buttons="dialogButtonsComputed">
<w-form ref="dialogFormRef" v-bind="props.grid.props.editor.form" class="pt-1.5 px-1.5"></w-form> <w-form ref="dialogFormRef" v-bind="props.grid.props.editor.form" class="pt-1.5 px-1.5"></w-form>
</w-dialog> </w-dialog>
</template> </template>

14
io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
View File

@ -3,11 +3,7 @@
<q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex"> <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
<q-th <q-th
v-if=" v-if="
rIndex === 0 && rIndex === 0 && props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none
props.selection === 'multiple' &&
table.checkboxSelection &&
!props.grid.props.tree &&
props.grid.props.selectedMode !== selectedMode.none
" "
:rowspan="columnTitleState.columnTitleRowNum" :rowspan="columnTitleState.columnTitleRowNum"
:style="moreColumnTitleTableSelectionStyle" :style="moreColumnTitleTableSelectionStyle"
@ -15,7 +11,7 @@
<q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" /> <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" />
</q-th> </q-th>
<q-th <q-th
v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none" v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
:rowspan="columnTitleState.columnTitleRowNum" :rowspan="columnTitleState.columnTitleRowNum"
:style="moreColumnTitleTableSelectionStyle" :style="moreColumnTitleTableSelectionStyle"
></q-th> ></q-th>
@ -49,13 +45,13 @@
<template v-else> <template v-else>
<q-tr :props="scope"> <q-tr :props="scope">
<q-th <q-th
v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none" v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
:style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'" :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
> >
<q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun"
/></q-th> /></q-th>
<q-th <q-th
v-else-if="table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none" v-else-if="table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
:style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'" :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
></q-th> ></q-th>
<template v-for="col in scope.cols" :key="col.name"> <template v-for="col in scope.cols" :key="col.name">
@ -80,7 +76,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Tools } from '@/platform'; import { Tools } from '@/platform';
import { computed, inject, reactive } from 'vue'; import { computed, inject, reactive } from 'vue';
import { selectedMode } from './ts/grid.ts'; import { selectMode } from './ts/grid.ts';
const props = defineProps({ const props = defineProps({
grid: { grid: {

39
io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
View File

@ -5,22 +5,22 @@
:key="col.name" :key="col.name"
:props="scope" :props="scope"
:title="titleComputed" :title="titleComputed"
:class="props.grid.props.selectedMode === selectedMode.cell && (table.bodyEditStatus === 'none' || props.grid.props.localMode) ? tdClassComputed : ''" :class="props.grid.props.selectMode === selectMode.cell && (table.bodyEditStatus === 'none' || props.grid.props.localMode) ? tdClassComputed : ''"
:rowspan="rowSpanComputed" :rowspan="rowSpanComputed"
:style="col.type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth - 24) + 'px;' : ''" :style="col.type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth - 24) + 'px;' : ''"
@click=" @click="
() => { () => {
// 判定是否要退出编辑模式 // 判定是否要退出编辑模式
if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectedMode === selectedMode.cell) { if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) { if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) {
table.bodyEditStatus = 'none'; table.bodyEditStatus = 'none';
} }
} else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectedMode === selectedMode.cell) { } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
if (table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) { if (table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) {
table.bodyEditStatus = 'none'; table.bodyEditStatus = 'none';
} }
} }
if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode === selectedMode.cell) { if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
table['cellSelected'] = { table['cellSelected'] = {
row: toRaw(scope.row), row: toRaw(scope.row),
rowKey: scope.row[props.rowKeyName], rowKey: scope.row[props.rowKeyName],
@ -47,25 +47,16 @@
<component <component
:is="col.type" :is="col.type"
ref="componentRef" ref="componentRef"
v-bind="col.attrs" v-bind="componentAttrs(col)"
v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[col.name]" v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[col.name]"
bg-color="light-green-1" bg-color="light-green-1"
@blur="
() => {
if (props.grid.props.selectedMode === selectedMode.cell && table.bodyEditStatus === editStatus.cell) {
// 失去焦点，退出编辑模式
table.bodyEditStatus = editStatus.none;
table['cellSelected'] = {};
}
}
"
></component> ></component>
</template> </template>
<template v-else> <template v-else>
<component <component
:is="col.type" :is="col.type"
ref="componentRef" ref="componentRef"
v-bind="col.attrs" v-bind="componentAttrs(col)"
v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)['_rowOldValue'][col.name]" v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)['_rowOldValue'][col.name]"
bg-color="light-green-1" bg-color="light-green-1"
></component> ></component>
@ -92,7 +83,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject, computed, ref, toRaw, onMounted } from 'vue'; import { inject, computed, ref, toRaw, onMounted } from 'vue';
import { Tools } from '@/platform'; import { Tools } from '@/platform';
import { selectedMode, editStatus } from './ts/grid.ts'; import { selectMode, editStatus } from './ts/grid.ts';
const tdRef = ref(); const tdRef = ref();
const componentRef = ref(); const componentRef = ref();
@ -184,8 +175,8 @@ const rowSpanIsFirstComputed = computed(() => {
const tdClassComputed = computed(() => { const tdClassComputed = computed(() => {
const tdClass = <any>[]; const tdClass = <any>[];
if (props.grid.props.selectedMode === selectedMode.cell) { if (props.grid.props.selectMode === selectMode.cell) {
tdClass.push('cellSelected_hover'); tdClass.push('cellHover');
} }
if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) { if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
if (table['cellSelected']['colName'] === props.col['name'] && table['cellSelected']['rowKey'] === props.scope.row[props.rowKeyName]) if (table['cellSelected']['colName'] === props.col['name'] && table['cellSelected']['rowKey'] === props.scope.row[props.rowKeyName])
@ -194,6 +185,18 @@ const tdClassComputed = computed(() => {
return tdClass; return tdClass;
}); });
const componentAttrs = (col) => {
if (col.attrs) {
return col.attrs;
} else if (props.grid.props.editor?.form?.fields) {
const field = props.grid.props.editor.form.fields.find((item) => item['name'] === col.name);
if (field) {
return { ...field, label: undefined };
}
}
return undefined;
};
onMounted(() => { onMounted(() => {
if (tdRef.value?.$el) { if (tdRef.value?.$el) {
tdWidth.value = tdRef.value.$el.clientWidth; tdWidth.value = tdRef.value.$el.clientWidth;

27
io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
View File

@ -30,9 +30,8 @@
import { computed, inject, ref, reactive, nextTick, onBeforeMount, toRaw } from 'vue'; import { computed, inject, ref, reactive, nextTick, onBeforeMount, toRaw } from 'vue';
import { useQuasar, exportFile } from 'quasar'; import { useQuasar, exportFile } from 'quasar';
import { axios, Tools, t, NotifyManager } from '@/platform'; import { axios, Tools, t, NotifyManager } from '@/platform';
import { selectedMode, formStatus, editStatus } from './ts/grid'; import { selectMode, formStatus, editStatus } from './ts/grid';
import GridConfig from './GridConfig.vue'; import GridConfig from './GridConfig.vue';
import { throws } from 'assert';
const $q = useQuasar(); const $q = useQuasar();
@ -368,7 +367,7 @@ const buttonObj = reactive({
return false; return false;
}, },
click: () => { click: () => {
if (props.grid.props.selectedMode !== selectedMode.cell) { if (props.grid.props.selectMode !== selectMode.cell) {
NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能'); NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能');
return false; return false;
} else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) { } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
@ -393,7 +392,7 @@ const buttonObj = reactive({
return false; return false;
}, },
click: () => { click: () => {
if (props.grid.props.selectedMode !== selectedMode.cell) { if (props.grid.props.selectMode !== selectMode.cell) {
NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能'); NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能');
return false; return false;
} else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) { } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
@ -609,7 +608,7 @@ const handleChildrenBtn = (arr, moreQueryShow) => {
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const btn = arr[i]; const btn = arr[i];
if (typeof btn === 'string' && !buttonObj[btn]) { if (typeof btn === 'string' && !buttonObj[btn]) {
throw new Error(`'` + btn + `'` + ' toolbar action NOT exits'); throw new Error(`'` + btn + `'` + ' toolbar action NOT exist');
} else if (Array.isArray(btn) && btn.length > 0) { } else if (Array.isArray(btn) && btn.length > 0) {
const handleResult = handleChildrenBtn(btn, moreQueryShow); const handleResult = handleChildrenBtn(btn, moreQueryShow);
if (handleResult && handleResult.length > 0) { if (handleResult && handleResult.length > 0) {
@ -656,7 +655,7 @@ const handleToolbarActions = () => {
} }
props.grid.props.toolbarActions.forEach((btn: any, index) => { props.grid.props.toolbarActions.forEach((btn: any, index) => {
if (typeof btn === 'string' && !buttonObj[btn]) { if (typeof btn === 'string' && !buttonObj[btn]) {
throw new Error(`'` + btn + `'` + ' toolbar action NOT exits'); throw new Error(`'` + btn + `'` + ' toolbar action NOT exist');
} else if (typeof btn === 'string' && buttonObj[btn]) { } else if (typeof btn === 'string' && buttonObj[btn]) {
if (btn === buttonObj.query.name && moreQueryShow) { if (btn === buttonObj.query.name && moreQueryShow) {
buttons_.value.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]); buttons_.value.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
@ -701,11 +700,12 @@ const dbClickOperation = (row) => {
if (!Tools.isEmpty(row) && props.grid.props.dbClickOperation === buttonObj.expand.name) { if (!Tools.isEmpty(row) && props.grid.props.dbClickOperation === buttonObj.expand.name) {
row['expand'] = Tools.isEmpty(row['expand']) ? true : !row['expand']; row['expand'] = Tools.isEmpty(row['expand']) ? true : !row['expand'];
} else { } else {
if ( if (!buttonObj[props.grid.props.dbClickOperation] && checkConfigNotContains(buttons_.value)) {
throw new Error(`'` + props.grid.props.dbClickOperation + `'` + ' toolbar action NOT exist');
} else if (
props.grid.props.dbClickOperation !== buttonObj.separator && props.grid.props.dbClickOperation !== buttonObj.separator &&
buttonObj[props.grid.props.dbClickOperation] && buttonObj[props.grid.props.dbClickOperation] &&
checkConfigNotContains(buttons_.value) && checkConfigNotContains(buttons_.value)
buttonObj[props.grid.props.dbClickOperation]
) { ) {
// 双击时配置的dbClickOperation不在用户配置的按钮集中，直接调用内置按钮 // 双击时配置的dbClickOperation不在用户配置的按钮集中，直接调用内置按钮
toolbarRef.value.buttonClick(buttonObj[props.grid.props.dbClickOperation]); toolbarRef.value.buttonClick(buttonObj[props.grid.props.dbClickOperation]);
@ -716,16 +716,17 @@ const dbClickOperation = (row) => {
}; };
// 检查用户配置的按钮中是否不包含固定名字的按钮 // 检查用户配置的按钮中是否不包含固定名字的按钮
const checkConfigNotContains = (arr) => { const checkConfigNotContains = (arr) => {
let flag = false; let flag = true;
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] === 'object' && props.grid.props.dbClickOperation === arr[i]['name']) { if (typeof arr[i] === 'object' && props.grid.props.dbClickOperation === arr[i]['name']) {
flag = true; flag = false;
break; break;
} else if (Array.isArray(arr[i]) && arr[i].length > 0) { } else if (Array.isArray(arr[i]) && arr[i].length > 0) {
flag = checkConfigNotContains(arr[i]); const tempFlag = checkConfigNotContains(arr[i]);
flag = tempFlag;
} }
} }
return !flag; return flag;
}; };
const getQueryForm = () => { const getQueryForm = () => {
return formRef.value; return formRef.value;

45
io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<q-tr <q-tr
ref="trRef" ref="trRef"
:no-hover="props.grid.props.selectedMode === selectedMode.row ? false : true" :no-hover="props.grid.props.selectMode === selectMode.row ? false : true"
:class="row[table.selectedField] && props.grid.props.selectedMode === selectedMode.row ? 'selected' : ''" :class="row[table.selectedField] && props.grid.props.selectMode === selectMode.row ? 'selected' : ''"
:draggable="draggableComputed" :draggable="draggableComputed"
@click.stop.prevent="click($event, row, props.rowIndex)" @click.stop.prevent="click($event, row, props.rowIndex)"
@dblclick.stop.prevent="dbClick($event, row, props.rowIndex)" @dblclick.stop.prevent="dbClick($event, row, props.rowIndex)"
@ -13,21 +13,21 @@
> >
<q-td <q-td
:ref="(el) => setTdRef(el, cols[0])" :ref="(el) => setTdRef(el, cols[0])"
:class="props.grid.props.selectedMode === selectedMode.cell ? firstTdClassComputed : 'nowrap text-nowrap'" :class="props.grid.props.selectMode === selectMode.cell ? firstTdClassComputed : 'nowrap text-nowrap'"
:style="cols[0].type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth[cols[0].name] - 24) + 'px;' : ''" :style="cols[0].type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth[cols[0].name] - 24) + 'px;' : ''"
@click=" @click="
() => { () => {
// 判定是否要退出编辑模式 // 判定是否要退出编辑模式
if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectedMode === selectedMode.cell) { if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
if (table['cellSelected']['colName'] !== cols[0]['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) { if (table['cellSelected']['colName'] !== cols[0]['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
table.bodyEditStatus = 'none'; table.bodyEditStatus = 'none';
} }
} else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectedMode === selectedMode.cell) { } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) { if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
table.bodyEditStatus = 'none'; table.bodyEditStatus = 'none';
} }
} }
if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode === selectedMode.cell) { if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
table['cellSelected'] = { table['cellSelected'] = {
row: toRaw(props.row), row: toRaw(props.row),
rowKey: props.row[props.rowKey], rowKey: props.row[props.rowKey],
@ -85,7 +85,7 @@
bg-color="light-green-1" bg-color="light-green-1"
@blur=" @blur="
() => { () => {
if (props.grid.props.selectedMode === selectedMode.cell && table.bodyEditStatus === editStatus.cell) { if (props.grid.props.selectMode === selectMode.cell && table.bodyEditStatus === editStatus.cell) {
// 失去焦点，退出编辑模式 // 失去焦点，退出编辑模式
table.bodyEditStatus = editStatus.none; table.bodyEditStatus = editStatus.none;
table['cellSelected'] = {}; table['cellSelected'] = {};
@ -119,22 +119,22 @@
<q-td <q-td
v-if="index > 0" v-if="index > 0"
:ref="(el) => setTdRef(el, col)" :ref="(el) => setTdRef(el, col)"
:class="props.grid.props.selectedMode === selectedMode.cell ? tdClassComputed(col) : col.__thClass + ' ' + col.classes" :class="props.grid.props.selectMode === selectMode.cell ? tdClassComputed(col) : col.__thClass + ' ' + col.classes"
:title="getTitle(col)" :title="getTitle(col)"
:style="col.style + (col.type && table.bodyEditStatus !== 'none' ? ';width: ' + (tdWidth[col.name] - 24) + 'px;' : '')" :style="col.style + (col.type && table.bodyEditStatus !== 'none' ? ';width: ' + (tdWidth[col.name] - 24) + 'px;' : '')"
@click=" @click="
() => { () => {
// 判定是否要退出编辑模式 // 判定是否要退出编辑模式
if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectedMode === selectedMode.cell) { if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) { if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
table.bodyEditStatus = 'none'; table.bodyEditStatus = 'none';
} }
} else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectedMode === selectedMode.cell) { } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) { if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
table.bodyEditStatus = 'none'; table.bodyEditStatus = 'none';
} }
} }
if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode === selectedMode.cell) { if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
table['cellSelected'] = { table['cellSelected'] = {
row: toRaw(props.row), row: toRaw(props.row),
rowKey: props.row[props.rowKey], rowKey: props.row[props.rowKey],
@ -161,15 +161,6 @@
v-bind="col.attrs" v-bind="col.attrs"
v-model="props.getRow(table.rows, props.row[props.rowKey], false)[col.name]" v-model="props.getRow(table.rows, props.row[props.rowKey], false)[col.name]"
bg-color="light-green-1" bg-color="light-green-1"
@blur="
() => {
if (props.grid.props.selectedMode === selectedMode.cell && table.bodyEditStatus === editStatus.cell) {
// 失去焦点，退出编辑模式
table.bodyEditStatus = editStatus.none;
table['cellSelected'] = {};
}
}
"
></component> ></component>
</template> </template>
<template v-else> <template v-else>
@ -236,7 +227,7 @@
import { ref, computed, inject, toRaw, reactive, onMounted } from 'vue'; import { ref, computed, inject, toRaw, reactive, onMounted } from 'vue';
import { Tools, NotifyManager } from '@/platform'; import { Tools, NotifyManager } from '@/platform';
import GridEditToolbar from './GridEditToolbar.vue'; import GridEditToolbar from './GridEditToolbar.vue';
import { dndImage, dndMode, selectedMode, editStatus } from './ts/grid'; import { dndImage, dndMode, selectMode, editStatus } from './ts/grid';
const trRef = ref(); const trRef = ref();
const tdDivRef = ref(); const tdDivRef = ref();
@ -359,8 +350,8 @@ const getTitle = (col) => {
const firstTdClassComputed = computed(() => { const firstTdClassComputed = computed(() => {
const tdClass = <any>['nowrap', 'text-nowrap']; const tdClass = <any>['nowrap', 'text-nowrap'];
if (props.grid.props.selectedMode === selectedMode.cell) { if (props.grid.props.selectMode === selectMode.cell) {
tdClass.push('cellSelected_hover'); tdClass.push('cellHover');
} }
if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) { if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
if (table['cellSelected']['colName'] === props.cols[0]['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) { if (table['cellSelected']['colName'] === props.cols[0]['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) {
@ -372,8 +363,8 @@ const firstTdClassComputed = computed(() => {
const tdClassComputed = computed(() => { const tdClassComputed = computed(() => {
return (col) => { return (col) => {
let tdClass = col.__thClass + ' ' + col.classes; let tdClass = col.__thClass + ' ' + col.classes;
if (props.grid.props.selectedMode === selectedMode.cell) { if (props.grid.props.selectMode === selectMode.cell) {
tdClass += ' cellSelected_hover'; tdClass += ' cellHover';
} }
if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) { if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
if (table['cellSelected']['colName'] === col['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) { if (table['cellSelected']['colName'] === col['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) {
@ -842,13 +833,13 @@ const click = (evt, row, rowIndex) => {
if ( if (
props.grid.props.localMode && props.grid.props.localMode &&
table.bodyEditStatus !== editStatus.none && table.bodyEditStatus !== editStatus.none &&
props.grid.props.selectedMode === selectedMode.row && props.grid.props.selectMode === selectMode.row &&
selected && selected &&
row[props.rowKey] !== selected[props.rowKey] row[props.rowKey] !== selected[props.rowKey]
) { ) {
// 退出编辑状态 // 退出编辑状态
table.bodyEditStatus = editStatus.none; table.bodyEditStatus = editStatus.none;
} else if (table.bodyEditStatus === editStatus.none && props.grid.props.selectedMode !== selectedMode.none) { } else if (table.bodyEditStatus === editStatus.none && props.grid.props.selectMode !== selectMode.none) {
if (!evt.ctrlKey) { if (!evt.ctrlKey) {
props.grid.clearSelected(); props.grid.clearSelected();
} }

16
io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
View File

@ -127,7 +127,7 @@ import GridPagination from './GridPagination.vue';
import GridEditor from './GridEditor.vue'; import GridEditor from './GridEditor.vue';
import CellEditor from './CellEditor.vue'; import CellEditor from './CellEditor.vue';
import GridView from './GridView.vue'; import GridView from './GridView.vue';
import { selectedMode as selectedMode_, getMergeColumns, sortByProperties, editStatus } from './ts/grid.ts'; import { selectMode as selectMode_, getMergeColumns, sortByProperties, editStatus } from './ts/grid.ts';
import { columnDefaultProps } from './ts/grid.ts'; import { columnDefaultProps } from './ts/grid.ts';
@ -153,7 +153,7 @@ const props = defineProps({
title: { type: String, default: '' }, // 表格标题 title: { type: String, default: '' }, // 表格标题
autoFetchData: { type: Boolean, default: true }, // 自动加载数据 autoFetchData: { type: Boolean, default: true }, // 自动加载数据
localMode: { type: Boolean, default: false }, // 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 与 url 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效 localMode: { type: Boolean, default: false }, // 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 与 url 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
selectedMode: { type: String, default: selectedMode_.row }, // 选择模式 selectMode: { type: String, default: selectMode_.row }, // 选择模式
dndMode: { type: String, default: undefined }, // 拖拽数据行排序的模式，默认不可拖拽，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。 dndMode: { type: String, default: undefined }, // 拖拽数据行排序的模式，默认不可拖拽，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。
dndOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序，默认为`order`字段 dndOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序，默认为`order`字段
pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。 pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
@ -581,16 +581,10 @@ const tableFullscreenFun = (value) => {
const rowClick = (evt: any, row: any, index: any) => { const rowClick = (evt: any, row: any, index: any) => {
const selected = getSelectedRow(); const selected = getSelectedRow();
if ( if (props.localMode && table.bodyEditStatus !== editStatus.none && props.selectMode === selectMode_.row && selected && row[rowKey_] !== selected[rowKey_]) {
props.localMode &&
table.bodyEditStatus !== editStatus.none &&
props.selectedMode === selectedMode_.row &&
selected &&
row[rowKey_] !== selected[rowKey_]
) {
// 退出编辑状态 // 退出编辑状态
table.bodyEditStatus = editStatus.none; table.bodyEditStatus = editStatus.none;
} else if (table.bodyEditStatus === editStatus.none && props.selectedMode !== selectedMode_.none) { } else if (table.bodyEditStatus === editStatus.none && props.selectMode !== selectMode_.none) {
// 非树形表格行点击选中与checkbox绑定，即行选中时checkbox也勾选，checkbox勾选时行选中。 // 非树形表格行点击选中与checkbox绑定，即行选中时checkbox也勾选，checkbox勾选时行选中。
if (!evt.ctrlKey) { if (!evt.ctrlKey) {
clearSelected(); clearSelected();
@ -605,7 +599,7 @@ const rowClick = (evt: any, row: any, index: any) => {
} }
}; };
const rowDbClick = (evt, row, index) => { const rowDbClick = (evt, row, index) => {
if (table.bodyEditStatus === 'none' && props.selectedMode !== selectedMode_.none) { if (table.bodyEditStatus === 'none' && props.selectMode !== selectMode_.none) {
if (props.onRowDbClick) { if (props.onRowDbClick) {
emit('rowDbClick', { grid: instance, evt, row, index }); emit('rowDbClick', { grid: instance, evt, row, index });
} else if (props.dbClickOperation === 'view') { } else if (props.dbClickOperation === 'view') {

6
io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css
View File

@ -1,8 +1,8 @@
.w-grid .cellSelected { .w-grid .cellSelected {
background-color: #0000001f; background-color: rgba(0, 0, 0, .06);
} }
.w-grid .cellSelected_hover:hover { .w-grid .cellHover:hover {
background-color: #0000001f; background-color: rgba(0, 0, 0, .03);
} }
.w-grid .q-table__top { .w-grid .q-table__top {
padding: var(--tableTopPadding) var(--tableTopPadding); padding: var(--tableTopPadding) var(--tableTopPadding);

2
io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
View File

@ -8,7 +8,7 @@ export const dndMode = {
export const dndImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E`; export const dndImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E`;
// 选择模式 // 选择模式
export const selectedMode = { export const selectMode = {
none: 'none', // 不允许选择 none: 'none', // 不允许选择
row: 'row', // 行选择 row: 'row', // 行选择
cell: 'cell', // 单元格选择 cell: 'cell', // 单元格选择

Write Preview
Loading…
Cancel
Save