Browse Source

表格优化提交

main
likunming 1 year ago
parent
commit
6f35aaf8b0
  1. 26
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  2. 24
      io.sc.platform.core.frontend/src/views/likm/Form.vue
  3. 29
      io.sc.platform.core.frontend/src/views/likm/Grid.vue
  4. 1
      io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue

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

@ -24,8 +24,12 @@
<template #top="scope"> <template #top="scope">
<q-resize-observer @resize="onResize" /> <q-resize-observer @resize="onResize" />
<div class="col"> <div class="col">
<w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields" :cols-num="queryFormColsNum"> <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields" :cols-num="queryFormColsNum"></w-form>
<div class="pt-2.5 flex flex-nowrap items-end"> <div
v-if="title || buttons_.length > 0 || configButton || table.queryFormFields.length > 0"
class="flex flex-nowrap items-end"
:class="table.queryFormFields.length > 0 ? 'pt-2.5' : ''"
>
<div class="flex-none">{{ title }}</div> <div class="flex-none">{{ title }}</div>
<div class="flex-1"> <div class="flex-1">
<w-toolbar :dense="denseToolbarComputed" v-bind="toolbarConfigure" :buttons="buttons_" :grid="instance"></w-toolbar> <w-toolbar :dense="denseToolbarComputed" v-bind="toolbarConfigure" :buttons="buttons_" :grid="instance"></w-toolbar>
@ -38,7 +42,6 @@
</q-btn> </q-btn>
</div> </div>
</div> </div>
</w-form>
</div> </div>
</template> </template>
<template #header="scope"> <template #header="scope">
@ -679,8 +682,8 @@ const buttonObj = {
}, },
expand: { expand: {
name: ButtonEnum.expand, name: ButtonEnum.expand,
icon: expandIcon.value, icon: expandIcon,
label: expandLabel.value, label: expandLabel,
click: (selected, context) => { click: (selected, context) => {
expandFun(table.rows, table.treeExpand); expandFun(table.rows, table.treeExpand);
table.treeExpand = !table.treeExpand; table.treeExpand = !table.treeExpand;
@ -1190,8 +1193,6 @@ const onRequest = async (ops: any) => {
state.pagination.rowsPerPage = responseData.size || state.pagination.rowsPerPage; state.pagination.rowsPerPage = responseData.size || state.pagination.rowsPerPage;
} }
state.pagination.rowsNumber = responseData.totalElements; state.pagination.rowsNumber = responseData.totalElements;
state.pagination.sortBy = ops.pagination.sortBy;
state.pagination.descending = ops.pagination.descending;
table.rows = responseData.content; table.rows = responseData.content;
} }
} else if (resp && resp.data && props.tree) { } else if (resp && resp.data && props.tree) {
@ -1216,6 +1217,8 @@ const onRequest = async (ops: any) => {
} }
} }
} }
state.pagination.sortBy = ops.pagination.sortBy;
state.pagination.descending = ops.pagination.descending;
addRowKey(table.rows); addRowKey(table.rows);
stickyHeaderColumn(); stickyHeaderColumn();
}; };
@ -1258,6 +1261,8 @@ const save = async () => {
dialogFormData[props.foreignKey] = null; dialogFormData[props.foreignKey] = null;
} else if (formStatus === 'addChild') { } else if (formStatus === 'addChild') {
dialogFormData[props.foreignKey] = getSelectedRowsComputed.value[0][props.primaryKey]; dialogFormData[props.foreignKey] = getSelectedRowsComputed.value[0][props.primaryKey];
} else if (formStatus === PageStatusEnum.编辑 && getSelectedRowsComputed.value[0][props.foreignKey]) {
dialogFormData[props.foreignKey] = getSelectedRowsComputed.value[0][props.foreignKey];
} }
let requestParams = { let requestParams = {
method: formStatus === PageStatusEnum.新增 || formStatus === 'addTop' || formStatus === 'addChild' ? 'POST' : 'PUT', method: formStatus === PageStatusEnum.新增 || formStatus === 'addTop' || formStatus === 'addChild' ? 'POST' : 'PUT',
@ -1554,6 +1559,11 @@ const stickyHeaderColumn = (time = 500) => {
tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px'); tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px');
tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px'); tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px');
} }
if (props.title || buttons_.length > 0 || props.configButton) {
tableRef.value.$el.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '8px');
} else {
tableRef.value.$el.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '0px');
}
}; };
const excludeColumnNum = computed(() => { const excludeColumnNum = computed(() => {
@ -2086,7 +2096,7 @@ VueTools.expose2Instance(instance);
} */ } */
.q-table__top { .q-table__top {
padding: 8px 8px; padding: var(--tableTopPadding) var(--tableTopPadding);
} }
.q-table tr:first-child th:first-child { .q-table tr:first-child th:first-child {

24
io.sc.platform.core.frontend/src/views/likm/Form.vue

@ -7,8 +7,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import { EnumTools, Options } from '@/platform';
import { FormValidators } from '@/platform/components'; import { FormValidators } from '@/platform/components';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
const { t } = useI18n(); const { t } = useI18n();
const formRef = ref(); const formRef = ref();
const aaaa = { const aaaa = {
@ -49,6 +52,13 @@ const aaaa = {
// }, // },
// }, // },
// }, // },
{
name: 'urlOpenType',
label: 'urlOpenType',
type: 'select',
options: Options.enum(UrlOpenTypeEnum, false),
defaultValue: 'NEW_WINDOW',
},
{ {
label: '年龄', label: '年龄',
name: 'age', name: 'age',
@ -74,17 +84,9 @@ const aaaa = {
{ {
label: '性别', label: '性别',
name: 'sex', name: 'sex',
type: 'w-select', type: 'select',
options: [ defaultValue: '0',
{ options: ['1', '0'],
label: '男',
value: 1,
},
{
label: '女',
value: 0,
},
],
requiredIf: () => true, requiredIf: () => true,
'onUpdate:modelValue': (value) => { 'onUpdate:modelValue': (value) => {
if (value === 1) { if (value === 1) {

29
io.sc.platform.core.frontend/src/views/likm/Grid.vue

@ -9,7 +9,24 @@
:columns="testGrid.tableColumns" :columns="testGrid.tableColumns"
:toolbar-actions="testGrid.toolbar" :toolbar-actions="testGrid.toolbar"
:query-form-fields="testGrid.queryForm" :query-form-fields="testGrid.queryForm"
:editor="testGrid.addEdit" :editor="{
form: {
colsNum: 1,
fields: [
{ label: '登录名', name: 'loginName', type: 'w-text' },
{ label: '用户名', name: 'userName', type: 'w-text' },
{ label: '密码', name: 'password', type: 'w-text' },
{ label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
{
name: 'urlOpenType',
label: 'urlOpenType',
type: 'select',
options: Options.enum(UrlOpenTypeEnum, false),
defaultValue: 'NEW_WINDOW',
},
],
},
}"
:viewer="testGrid.view" :viewer="testGrid.view"
@update-ticked="updateTicked" @update-ticked="updateTicked"
@row-click="rowClick" @row-click="rowClick"
@ -20,10 +37,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, nextTick, reactive } from 'vue'; import { ref, onMounted, nextTick, reactive } from 'vue';
import { axios, Environment } from '@/platform'; import { axios, Environment, EnumTools, Options } from '@/platform';
import EnableIcon from '@/platform/components/grid/EnableIcon.vue'; import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
import { IconEnum } from '@/platform/enums'; import { IconEnum } from '@/platform/enums';
const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
const updateTicked = (event, row) => { const updateTicked = (event, row) => {
console.info('grid.updateTicked.event====', event); console.info('grid.updateTicked.event====', event);
console.info('grid.updateTicked.row====', row); console.info('grid.updateTicked.row====', row);
@ -191,6 +209,13 @@ const testGrid = reactive({
{ label: '用户名', name: 'userName', type: 'w-text' }, { label: '用户名', name: 'userName', type: 'w-text' },
{ label: '密码', name: 'password', type: 'w-text' }, { label: '密码', name: 'password', type: 'w-text' },
{ label: '是否可用1111', name: 'enable', type: 'w-checkbox' }, { label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
{
name: 'urlOpenType',
label: 'urlOpenType',
type: 'select',
options: Options.enum(UrlOpenTypeEnum, false),
defaultValue: 'NEW_WINDOW',
},
], ],
}, },
}, },

1
io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue

@ -11,7 +11,6 @@
:data-url="testGrid.dataUrl" :data-url="testGrid.dataUrl"
:fetch-data-url="testGrid.fetchDataUrl" :fetch-data-url="testGrid.fetchDataUrl"
:columns="testGrid.tableColumns" :columns="testGrid.tableColumns"
:editor="testGrid.editor"
:toolbar-actions="testGrid.toolbar" :toolbar-actions="testGrid.toolbar"
:query-form-fields="testGrid.queryFormFields" :query-form-fields="testGrid.queryFormFields"
:query-form-cols-num="3" :query-form-cols-num="3"

Loading…
Cancel
Save