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

表格优化提交

main
likunming 11 months ago
parent
ec6d1ce302
commit
f75f8bb7b7
1 changed files with 268 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 307
      io.sc.platform.core.frontend/src/views/likm/Grid.vue

307
io.sc.platform.core.frontend/src/views/likm/Grid.vue
View File

@ -1,11 +1,73 @@
<template>
<div>
<div style="height: 100%">
<!-- <q-splitter v-model="splitterModel">
<template #before>
<q-tabs v-model="tab" vertical class="text-teal">
<q-tab name="mails" icon="mail" label="Mails" />
<q-tab name="alarms" icon="alarm" label="Alarms" />
<q-tab name="movies" icon="movie" label="Movies" />
</q-tabs>
</template>
<template #after>
<q-tab-panels v-model="tab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
<q-tab-panel name="mails">
</q-tab-panel>
<q-tab-panel name="alarms">
<w-grid
ref="grid2"
:title="testGrid.title"
draggable
dense
:data-url="testGrid.tableDataUrl"
:checkbox-selection="true"
selection="multiple"
:query-form-cols-num="2"
:columns="testGrid.tableColumns"
:toolbar-actions="testGrid.toolbar"
:query-form-fields="testGrid.queryForm"
: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"
></w-grid>
</q-tab-panel>
<q-tab-panel name="movies">
<div class="text-h4 q-mb-md">Movies</div>
<w-form ref="form" :fields="[{ name: 'a', label: 'a', type: 'text' }]"></w-form>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter> -->
<w-grid
ref="gridRef"
:title="testGrid.title"
draggable
:dense="state.dense"
:hide-bottom="false"
:data-url="testGrid.tableDataUrl"
:auto-fetch-data="false"
:checkbox-selection="true"
selection="multiple"
:query-form-cols-num="6"
:columns="testGrid.tableColumns"
:toolbar-actions="testGrid.toolbar"
:query-form-fields="testGrid.queryForm"
@ -31,21 +93,35 @@
@update-ticked="updateTicked"
@row-click="rowClick"
@row-db-click="rowDbClick"
@after-request-data="
() => {
// console.info('1111111111111111111111111111');
}
"
></w-grid>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, reactive } from 'vue';
import { ref, onMounted, nextTick, reactive, computed } from 'vue';
import { axios, Environment, EnumTools, Options } from '@/platform';
import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
import { IconEnum } from '@/platform/enums';
const dialogRef = ref();
const gridRef = ref();
const grid2 = ref();
const form = ref();
const tab = ref('mails');
const splitterModel = ref(10);
const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
const updateTicked = (event, row) => {
console.info('grid.updateTicked.event====', event);
console.info('grid.updateTicked.row====', row);
};
const state = reactive({
dense: false,
});
const startY = ref(0);
const endY = ref(0);
@ -66,15 +142,77 @@ const rowClick = (evt, row, index) => {
// }
// startY.value = 0;
// endY.value = 0;
// console.info('grid.rowClick.row====', row);
// tab.value = 'alarms';
// nextTick(() => {
// grid2.value.getQueryForm().setFieldValue('loginName', row.id);
// });
// tab.value = 'movies';
// nextTick(() => {
// form.value.setFieldValue('a', row.id);
// });
console.info('grid.rowClick.row====', row);
};
const rowDbClick = (evt, row, index) => {
console.info('grid.rowDbClick.row====', row);
};
const testGrid = reactive({
// 获取元素的绝对位置坐标（像对于浏览器视区左上角）
const getElementViewPosition = (element) => {
//计算x坐标
let actualLeft = element.offsetLeft;
let xcurrent = element.offsetParent;
while (xcurrent !== null) {
actualLeft += xcurrent.offsetLeft + xcurrent.clientLeft;
xcurrent = xcurrent.offsetParent;
}
let elementScrollLeft = document.documentElement.scrollLeft;
if (document.compatMode == 'BackCompat') {
elementScrollLeft = document.body.scrollLeft;
}
const left = actualLeft - elementScrollLeft;
//计算y坐标
let actualTop = element.offsetTop;
let ycurrent = element.offsetParent;
while (ycurrent !== null) {
actualTop += ycurrent.offsetTop + ycurrent.clientTop;
ycurrent = ycurrent.offsetParent;
}
let elementScrollTop = document.documentElement.scrollTop;
if (document.compatMode == 'BackCompat') {
elementScrollTop = document.body.scrollTop;
}
var right = actualTop - elementScrollTop;
//返回结果
return { x: left, y: right };
};
// const gridHeightComputed = computed(() => {
// // if (dialogRef?.value && gridRef?.value) {
// // const height = dialogRef.value.getContentHeight();
// // const tableContentY = getElementViewPosition(gridRef.value.$el.getElementsByClassName('q-table__middle')[0]);
// // console.info('height==========', height);
// // console.info('gridRef==============', tableContentY);
// // if (height && tableContentY) {
// // return height.height - (tableContentY.y - height.y);
// // }
// // }
// if (dialogRef?.value && dialogRef.value.getContent()) {
// const height = dialogRef.value.getContent().clientHeight;
// console.info('dialogRef.value.getContent()====', height);
// if (height > 0) {
// return height;
// }
// }
// return 0;
// });
const aaaaaaaaaaaaaaaa = ref(false);
const testGrid = {
hideBottom: false,
autoLoadData: true,
autoLoadData: false,
tableLeftColumnStickyNumber: 1,
title: '用户列表',
tableDataUrl: Environment.apiContextPath('api/system/user'),
@ -86,32 +224,41 @@ const testGrid = reactive({
toolbar: [
['query', 'separator', 'moreQuery'],
'reset',
'refresh',
{
extend: 'refresh',
click: () => {
state.dense = !state.dense;
},
},
'separator',
{
name: 'custBtn',
extend: 'add',
extend: 'resetDefaultValues',
icon: undefined,
label: '自定义按钮',
enableIf: (selected) => {
if (selected && selected.length > 0) {
label: 'aasdfFFF',
loadingIf: (selected, ticked, grid) => {
if (selected.length === 0) {
return true;
}
return false;
},
// enableIf: (selected) => {
// if (selected && selected.length > 0) {
// return true;
// }
// return false;
// },
// beforeClick: (selected, context, grid) => {
// console.info('先执行before');
// context.aaa = '111';
// },
click: (selected, context, _click, grid) => {
click: (args) => {
// grid.setQueryCriteria({
// fieldName: 'loginName',
// operator: 'contains',
// value: 'admin',
// });
grid.setFetchDataUrl('a.action');
grid.refresh();
// _click();
console.info('args=====', args);
args._click();
},
afterClick: (selected, context, grid) => {
// grid.addEditFormRef.setFieldValue('userName', '李四');
@ -138,7 +285,14 @@ const testGrid = reactive({
{ label: '登录名', name: 'loginName', type: 'w-text' },
{ label: '用户名', name: 'userName', type: 'w-text' },
{ label: '描述', name: 'description', type: 'w-text' },
{ label: '是否可用', name: 'enable', type: 'w-select' },
{ label: '用户名', name: 'userName1', type: 'w-text' },
{ label: '描述', name: 'description1', type: 'w-text' },
{
label: '是否可用',
name: 'enable',
type: 'select',
options: [{ label: '监管报表-G4B-1表内信用风险加权资产计算表(权重法)', value: '0a981b42-d0df-4f02-94c4-edc20620ba9f' }],
},
// { label: '邮箱地址', name: 'email', type: 'w-text' },
// { label: '电话', name: 'phone', type: 'w-text' },
// { label: '手机号', name: 'mobile', type: 'w-number' },
@ -146,37 +300,52 @@ const testGrid = reactive({
// { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
],
tableColumns: [
// {
// name: 'info',
// label: '用户信息',
// hidden: true,
// childrenColumns: [
{
name: 'info',
label: '用户信息',
columns: [
{ name: 'loginName', label: '登录名', align: 'right' },
{ name: 'userName', label: '用户名' },
],
},
// { name: 'loginName', label: '登录名', align: 'right' },
// { name: 'userName', label: '用户名' },
{
name: 'lxxx',
label: '联系方式',
columns: [
{
name: 'email',
label: '邮箱地址',
columns: [
{ width: 100, name: 'auc', label: 'auc' },
{ width: 100, name: 'ar', label: 'ar' },
{ width: 100, name: 'ks', label: 'ks' },
],
},
{
name: 'tx',
label: '通讯',
columns: [
{ name: 'phone', label: '电话' },
{ name: 'mobile', label: '手机号' },
],
},
{
name: 'qq',
label: 'QQ',
// columns: [
// { width: 100, name: 'aucQualitative', label: 'aucQualitative' },
// { width: 100, name: 'arQualitative', label: 'arQualitative' },
// { width: 100, name: 'ksQualitative', label: 'ksQualitative' },
// ],
// },
// {
// name: 'lxxx',
// label: '联系方式',
// childrenColumns: [
},
],
},
// { name: 'email', label: '邮箱地址' },
// {
// name: 'tx',
// label: '通讯',
// childrenColumns: [
// { name: 'phone', label: '电话' },
// { name: 'mobile', label: '手机号' },
// ],
// },
// { name: 'qq', label: 'QQ' },
// ],
// },
{ name: 'loginName', label: '登录名', align: 'right' },
{ name: 'userName', label: '用户名' },
{ name: 'email', label: '邮箱地址' },
{ name: 'phone', label: '电话' },
{ name: 'mobile', label: '手机号' },
{ name: 'qq', label: 'QQ' },
{ name: 'description', label: '描述', width: 400 },
{
name: 'enable',
@ -184,15 +353,21 @@ const testGrid = reactive({
align: 'center',
width: 400,
format: (val, row) => {
// return '1<br/>2';
return {
componentType: 'q-icon',
componentType: 'q-checkbox',
bindModelValue: true,
attrs: {
name: val ? IconEnum.是状态 : IconEnum.否状态,
color: val ? 'green' : 'red',
size: 'xs',
dense: true,
},
};
// return {
// componentType: 'q-icon',
// attrs: {
// name: val ? IconEnum.是状态 : IconEnum.否状态,
// color: val ? 'green' : 'red',
// size: 'xs',
// },
// };
},
},
// { name: 'loginName', label: '登录名', align: 'right' },
@ -239,9 +414,49 @@ const testGrid = reactive({
],
},
},
});
};
onMounted(() => {
// testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
gridRef.value.setLocalData([
{
loginName: 'admin1',
},
{
loginName: 'admin2',
},
{
loginName: 'admin3',
},
{
loginName: 'admin4',
},
{
loginName: 'admin5',
},
{
loginName: 'admin6',
},
{
loginName: 'admin7',
},
{
loginName: 'admin8',
},
{
loginName: 'admin9',
},
{
loginName: 'admin10',
},
{
loginName: 'admin11',
},
{
loginName: 'admin12',
},
{
loginName: 'admin13',
},
]);
});
</script>

Write Preview
Loading…
Cancel
Save