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

组件属性重命名及拆分属性

main
likunming 1 year ago
parent
8ef3aca8f0
commit
1b5fb9d221
2 changed files with 183 additions and 160 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. 162
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  2. 41
      io.sc.platform.core.frontend/src/views/likm/Grid.vue

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

@ -10,7 +10,7 @@
:separator="'cell'" :separator="'cell'"
:rows="table.rows" :rows="table.rows"
:columns="extractTableColumns" :columns="extractTableColumns"
:rows-per-page-options="props.tablePagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []" :rows-per-page-options="pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
:loading="table.loading" :loading="table.loading"
:no-data-label="table.noDataLabel" :no-data-label="table.noDataLabel"
:loading-label="table.loadingLabel" :loading-label="table.loadingLabel"
@ -23,12 +23,13 @@
<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.queryForm" :fields="table.queryFormFields"> <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields">
<div class="pt-2.5 flex flex-nowrap"> <div class="pt-2.5 flex flex-nowrap">
<div class="flex-none text-[18px] pt-[9px]">{{ title }}</div> <div class="flex-none text-[18px] pt-[9px]">{{ title }}</div>
<div class="flex-1"> <div class="flex-1">
<w-toolbar <w-toolbar
v-bind="toolbar_" v-bind="toolbarConfigre"
:buttons="buttons_"
:grid-prop="{ :grid-prop="{
gridSelected: table.selected, gridSelected: table.selected,
gridRefs: { gridRefs: {
@ -41,7 +42,7 @@
}" }"
></w-toolbar> ></w-toolbar>
</div> </div>
<div v-if="canFullScreen" class="flex-none pl-1"> <div v-if="fullScreenButton" class="flex-none pl-1">
<q-btn :icon="scope.inFullscreen ? IconEnum.退出全屏 : IconEnum.全屏" unelevated outline @click="scope.toggleFullscreen"> <q-btn :icon="scope.inFullscreen ? IconEnum.退出全屏 : IconEnum.全屏" unelevated outline @click="scope.toggleFullscreen">
<q-tooltip transition-show="rotate" transition-hide="rotate"> <q-tooltip transition-show="rotate" transition-hide="rotate">
{{ scope.inFullscreen ? '退出全屏' : '全屏' }} {{ scope.inFullscreen ? '退出全屏' : '全屏' }}
@ -61,7 +62,7 @@
:style="moreColumnTitleTableSelectionStyle" :style="moreColumnTitleTableSelectionStyle"
> >
</q-th> </q-th>
<q-th v-if="rIndex === 0 && props.showSortNo" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle"> 序号 </q-th> <q-th v-if="rIndex === 0 && props.sortNo" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle"> 序号 </q-th>
<q-th <q-th
v-for="c in r" v-for="c in r"
:key="c.name" :key="c.name"
@ -92,6 +93,7 @@
<q-td v-if="!attrs.selection || attrs.selection !== 'none'" class="text-center"> <q-td v-if="!attrs.selection || attrs.selection !== 'none'" class="text-center">
<q-checkbox v-model="scope.selected" /> <q-checkbox v-model="scope.selected" />
</q-td> </q-td>
<template v-if="draggable">
<q-td <q-td
v-for="col in scope.cols" v-for="col in scope.cols"
:key="col.name" :key="col.name"
@ -114,6 +116,20 @@
{{ col.value }} {{ col.value }}
</template> </template>
</q-td> </q-td>
</template>
<template v-else>
<q-td v-for="col in scope.cols" :key="col.name" :props="scope" :title="col.classes?.indexOf('truncate') > -1 ? col.value : ''">
<template v-if="col.name === '_sortNo_'">
{{ scope.rowIndex + 1 }}
</template>
<template v-else-if="col.value && typeof col.value === 'object' && col.value.type && col.value._vuecomp_">
<component :is="col.value.type" v-bind="col.value.props"></component>
</template>
<template v-else>
{{ col.value }}
</template>
</q-td>
</template>
</q-tr> </q-tr>
</template> </template>
<template #loading> <template #loading>
@ -121,8 +137,9 @@
<q-spinner-gears size="50px" color="primary" /> <q-spinner-gears size="50px" color="primary" />
</q-inner-loading> </q-inner-loading>
</template> </template>
<template #pagination="scope"> <template #pagination="scope"
<template v-if="props.tablePagination.rowsPerPage"> >p
<template v-if="props.pagination.rowsPerPage">
<template v-if="table.refHeightWidth.middleWidth > 600"> <template v-if="table.refHeightWidth.middleWidth > 600">
<q-pagination <q-pagination
v-model="table.pagination.page" v-model="table.pagination.page"
@ -162,12 +179,12 @@
</div> </div>
</template> </template>
</q-table> </q-table>
<w-dialog ref="dialogRef" v-bind="addEdit.dialog" :title="dialog.dialogTitle" :buttons="dialog.dialogButtons"> <w-dialog ref="dialogRef" v-bind="editor.dialog" :title="dialog.dialogTitle" :buttons="dialog.dialogButtons">
<w-form ref="dialogFormRef" v-bind="addEdit.form" class="pt-1.5 px-1.5"></w-form> <w-form ref="dialogFormRef" v-bind="editor.form" class="pt-1.5 px-1.5"></w-form>
</w-dialog> </w-dialog>
<w-drawer ref="drawerRef" title="查看" v-bind="view.drawer"> <w-drawer ref="drawerRef" title="查看" v-bind="viewer.drawer">
<div class="p-2.5"> <div class="p-2.5">
<w-info-panel v-bind="view.infoPanel" :info="viewInfo.infoArray"></w-info-panel> <w-info-panel v-bind="viewer.panel" :info="viewInfo.infoArray"></w-info-panel>
</div> </div>
</w-drawer> </w-drawer>
</div> </div>
@ -175,7 +192,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs } from 'vue'; import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs } from 'vue';
import { axios, Environment, NotifyManager } from '@/platform'; import { axios, Environment, NotifyManager, TreeBuilder } from '@/platform';
import { useQuasar, getCssVar, exportFile } from 'quasar'; import { useQuasar, getCssVar, exportFile } from 'quasar';
import { IconEnum } from '@/platform/enums'; import { IconEnum } from '@/platform/enums';
import { extractTableColumnsProps, arrayToMap, OperatorTypeEnum, isEmpty, PageStatusEnum } from '@/platform/components/utils'; import { extractTableColumnsProps, arrayToMap, OperatorTypeEnum, isEmpty, PageStatusEnum } from '@/platform/components/utils';
@ -189,51 +206,68 @@ const stickyBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.stickyBgColo
const props = defineProps({ const props = defineProps({
height: { type: Number, default: 0 }, // 表格高度 height: { type: Number, default: 0 }, // 表格高度
spaceHeight: { type: Number, default: 4 }, // 留白高度
title: { type: String, default: '' }, // 表格标题 title: { type: String, default: '' }, // 表格标题
autoLoadData: { type: Boolean, default: true }, // 自动加载数据 autoFetchData: { type: Boolean, default: true }, // 自动加载数据
rowKey: { type: String, default: 'id' }, // 行唯一键 rowKey: { type: String, default: 'id' }, // 行唯一键
rowDrag: { type: Boolean, default: false }, // 开启行拖拽 draggable: { type: Boolean, default: false }, // 开启行拖拽
canFullScreen: { type: Boolean, default: true }, // 是否支持全屏 fullScreenButton: { type: Boolean, default: true }, // 是否显示全屏按钮
templateGridId: { type: String, default: '' }, // 模板ID templateGridId: { type: String, default: '' }, // 模板ID
getDataUrl: { type: String, default: '' }, // 获取数据url dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀
fetchDataUrl: { type: String, default: '' }, // 获取数据URL
addDataUrl: { type: String, default: '' }, // 新增数据url addDataUrl: { type: String, default: '' }, // 新增数据url
editDataUrl: { type: String, default: '' }, // 修改数据url editDataUrl: { type: String, default: '' }, // 修改数据url
removeDataUrl: { type: String, default: '' }, // 删除数据url removeDataUrl: { type: String, default: '' }, // 删除数据url
columnTitleDense: { type: Boolean, default: false }, // 表格列标题紧凑模式 denseHeader: { type: Boolean, default: false }, // 表格列标题紧凑模式
showSortNo: { type: Boolean, default: false }, // 是否显示排序号 denseBody: { type: Boolean, default: false }, // 表格行紧凑模式
leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。 sortNo: { type: Boolean, default: false }, // 是否显示排序号
leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el
clickSelectedRow: { type: Boolean, default: true }, // 单击选中行，selection为'none'时无效。 clickSelectedRow: { type: Boolean, default: true }, // 单击选中行，selection为'none'时无效。
tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现
columns: { columns: {
type: Array, type: Array,
default: () => { default: () => {
return []; return [];
}, },
}, },
queryForm: { queryFormFields: {
type: Object, type: Array,
default: () => { default: () => {
return { return [];
rowNum: 1, },
fields: [],
};
}, },
queryFormColsNum: {
type: [Number, Object],
default: 0,
}, },
toolbar: { queryFormRowNum: { type: Number, default: 1 },
queryFormAttrs: {
type: Object, type: Object,
default: () => { default: () => {
return { return {};
buttons: [], },
}; },
toolbarActions: {
type: Array,
default: () => {
return [];
}, },
}, },
tablePagination: { toolbarConfigre: {
type: Object, type: Object,
default: () => { default: () => {
return {}; return {};
}, },
}, },
addEdit: { pagination: {
type: Object,
default: () => {
return {
reqPageStart: 0,
rowsPerPage: 10,
};
},
},
editor: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
@ -242,12 +276,12 @@ const props = defineProps({
}; };
}, },
}, },
view: { viewer: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
drawer: {}, drawer: {},
infoPanel: { panel: {
fields: [], fields: [],
}, },
}; };
@ -321,7 +355,7 @@ const dialogRef = ref();
const drawerRef = ref(); const drawerRef = ref();
const dialogFormRef = ref(); const dialogFormRef = ref();
const tableColumnsMap = arrayToMap('name', props.columns); const tableColumnsMap = arrayToMap('name', props.columns);
const queryFormFieldsMap = arrayToMap('name', props.queryForm.fields); const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
/** /**
* 内置按钮枚举 * 内置按钮枚举
@ -357,7 +391,7 @@ const buttonObj = {
icon: IconEnum.更多查询, icon: IconEnum.更多查询,
label: '更多查询', label: '更多查询',
enableIf: () => { enableIf: () => {
if (props.queryForm.fields.length <= table.queryFormFields.length && !table.moreQueryStatus) { if (props.queryFormFields.length <= table.queryFormFields.length && !table.moreQueryStatus) {
return false; return false;
} else { } else {
return true; return true;
@ -466,7 +500,7 @@ const buttonObj = {
}).onOk(() => { }).onOk(() => {
let requestParams: any = { let requestParams: any = {
method: 'DELETE', method: 'DELETE',
url: (props.removeDataUrl ? props.removeDataUrl : props.getDataUrl) + '/' + table.selected[0][props.rowKey], url: (props.removeDataUrl ? props.removeDataUrl : props.dataUrl) + '/' + table.selected[0][props.rowKey],
}; };
if (props.templateGridId) { if (props.templateGridId) {
const data = <any>[]; const data = <any>[];
@ -509,8 +543,8 @@ const buttonObj = {
NotifyManager.warn('请选择要查看的记录'); NotifyManager.warn('请选择要查看的记录');
} else { } else {
viewInfo.infoArray = <any>[]; viewInfo.infoArray = <any>[];
if (props.view.infoPanel.fields && props.view.infoPanel.fields.length > 0) { if (props.viewer.infoPanel.fields && props.viewer.infoPanel.fields.length > 0) {
for (let item of props.view.infoPanel.fields) { for (let item of props.viewer.infoPanel.fields) {
if (item.format) { if (item.format) {
viewInfo.infoArray.push({ label: item.label, value: item.format(table.selected[0][item.name]) }); viewInfo.infoArray.push({ label: item.label, value: item.format(table.selected[0][item.name]) });
} else { } else {
@ -565,7 +599,6 @@ const buttonObj = {
}; };
// 处理toobar // 处理toobar
const { buttons, ...other } = props.toolbar;
const buttons_ = <any>[]; const buttons_ = <any>[];
const handleChildrenBtn = (arr) => { const handleChildrenBtn = (arr) => {
const tempArr = <any>[]; const tempArr = <any>[];
@ -586,7 +619,7 @@ const handleChildrenBtn = (arr) => {
} }
return tempArr; return tempArr;
}; };
buttons.forEach((btn, index) => { props.toolbarActions.forEach((btn, index) => {
if (typeof btn === 'string' && buttonObj[btn]) { if (typeof btn === 'string' && buttonObj[btn]) {
buttons_.push(buttonObj[btn]); buttons_.push(buttonObj[btn]);
} else if (Array.isArray(btn) && btn.length > 0) { } else if (Array.isArray(btn) && btn.length > 0) {
@ -598,7 +631,6 @@ buttons.forEach((btn, index) => {
buttons_.push(btn); buttons_.push(btn);
} }
}); });
const toolbar_ = { ...other, buttons: buttons_ };
const extractTableColumns = extractTableColumnsProps(props); const extractTableColumns = extractTableColumnsProps(props);
// 多表头插槽传入的 props 处理 // 多表头插槽传入的 props 处理
@ -614,7 +646,8 @@ const titleScopeHandler = (column: any, scope: any) => {
const table = reactive({ const table = reactive({
selected: <any>[], selected: <any>[],
headerCellHeight: props.columnTitleDense || attrs.dense ? 24 : 48, spaceHeight: 4,
headerCellHeight: props.denseHeader || attrs.dense ? 24 : 48,
bodyCellHeight: attrs.dense ? 24 : 48, bodyCellHeight: attrs.dense ? 24 : 48,
noDataLabel: '没有可用数据', noDataLabel: '没有可用数据',
loading: false, loading: false,
@ -629,11 +662,11 @@ const table = reactive({
ellipses: false, // 页面可用时显示省略号 ellipses: false, // 页面可用时显示省略号
maxPages: 5, // 一次显示的最大页面链接数；0表示无限 maxPages: 5, // 一次显示的最大页面链接数；0表示无限
}, },
sortBy: props.tablePagination.sortBy ? props.tablePagination.sortBy : '', sortBy: props.pagination.sortBy ? props.pagination.sortBy : '',
descending: props.tablePagination.descending ? props.tablePagination.descending : false, descending: props.pagination.descending ? props.pagination.descending : false,
reqPageStart: Object.hasOwnProperty.call(props.tablePagination, 'reqPageStart') ? props.tablePagination.reqPageStart : 1, reqPageStart: Object.hasOwnProperty.call(props.pagination, 'reqPageStart') ? props.pagination.reqPageStart : 1,
page: 1, page: 1,
rowsPerPage: props.tablePagination.rowsPerPage ? props.tablePagination.rowsPerPage : 0, rowsPerPage: props.pagination.rowsPerPage ? props.pagination.rowsPerPage : 0,
rowsNumber: 10, rowsNumber: 10,
rowsPerPageOptions: [5, 10, 20, 50, 100], rowsPerPageOptions: [5, 10, 20, 50, 100],
}, },
@ -825,7 +858,7 @@ const tableHeightComputed = computed(() => {
// 主面板容器下边距 // 主面板容器下边距
const mainContainerPaddingBottom = gc.theme.main.containerPaddingBottom || 0; const mainContainerPaddingBottom = gc.theme.main.containerPaddingBottom || 0;
// 其他高度，边框，用户自定义留白等，默认 4px // 其他高度，边框，用户自定义留白等，默认 4px
const otherHeight = props.spaceHeight || 4; const otherHeight = table.spaceHeight || 4;
const resultHeight = const resultHeight =
screenHeight - screenHeight -
table.refHeightWidth.yLocation - table.refHeightWidth.yLocation -
@ -852,7 +885,7 @@ const noDataBottomHeightComputed = computed(() => {
// 系统底部高度（一般用来显示XX版权所有那一层） // 系统底部高度（一般用来显示XX版权所有那一层）
const footerHeight = gc.theme.footer.enable ? gc.theme.footer.height : 0; const footerHeight = gc.theme.footer.enable ? gc.theme.footer.height : 0;
// 其他高度，边框，用户自定义留白等，默认 4px // 其他高度，边框，用户自定义留白等，默认 4px
const otherHeight = props.spaceHeight || 4; const otherHeight = table.spaceHeight || 4;
// 主面板下边距 // 主面板下边距
const mainPaddingBottom = gc.theme.main.paddingBottom || 0; const mainPaddingBottom = gc.theme.main.paddingBottom || 0;
// 主面板容器下边距 // 主面板容器下边距
@ -978,7 +1011,7 @@ const pageChange = (value) => {
}; };
const requestHandle = async (ops) => { const requestHandle = async (ops) => {
const reqParams: any = {}; const reqParams: any = {};
if (props.tablePagination.rowsPerPage) { if (props.pagination.rowsPerPage) {
reqParams.page = ops.pagination.page; reqParams.page = ops.pagination.page;
reqParams.size = ops.pagination.rowsPerPage; reqParams.size = ops.pagination.rowsPerPage;
} }
@ -1007,7 +1040,7 @@ const requestHandle = async (ops) => {
queryFormDataJson = handlerRequestParams; queryFormDataJson = handlerRequestParams;
}); });
reqParams.params = JSON.stringify(queryFormDataJson); reqParams.params = JSON.stringify(queryFormDataJson);
const resp = await axios.post(props.getDataUrl || Environment.apiContextPath('api/jdbc/list'), reqParams).catch((error) => { const resp = await axios.post(props.fetchDataUrl || props.dataUrl || Environment.apiContextPath('api/jdbc/list'), reqParams).catch((error) => {
table.loading = false; table.loading = false;
}); });
return resp; return resp;
@ -1019,7 +1052,7 @@ const requestHandle = async (ops) => {
emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => { emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
urlSearchParams = handlerRequestParams; urlSearchParams = handlerRequestParams;
}); });
const resp = await axios.get(props.getDataUrl, { params: urlSearchParams }).catch((error) => { const resp = await axios.get(props.fetchDataUrl || props.dataUrl, { params: urlSearchParams }).catch((error) => {
console.info('error-------------', error); console.info('error-------------', error);
table.loading = false; table.loading = false;
}); });
@ -1031,9 +1064,9 @@ const onRequest = async (ops: any) => {
const resp: any = await requestHandle(ops); const resp: any = await requestHandle(ops);
table.loading = false; table.loading = false;
// const result = platformRequestResultHandle($q, resp.data); // const result = platformRequestResultHandle($q, resp.data);
if (resp && resp.data) { if (resp && resp.data && !props.tree) {
const responseData = resp.data; const responseData = resp.data;
if (props.tablePagination.rowsPerPage) { if (props.pagination.rowsPerPage) {
table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number; table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
table.pagination.rowsPerPage = responseData.size; table.pagination.rowsPerPage = responseData.size;
} }
@ -1041,6 +1074,11 @@ const onRequest = async (ops: any) => {
table.pagination.sortBy = ops.pagination.sortBy; table.pagination.sortBy = ops.pagination.sortBy;
table.pagination.descending = ops.pagination.descending; table.pagination.descending = ops.pagination.descending;
table.rows = responseData.content; table.rows = responseData.content;
} else if (resp && resp.data && props.tree) {
const treeData = TreeBuilder.build(resp.data);
table.pagination.rowsNumber = resp.data.length;
console.info('treeData============', treeData);
table.rows = treeData;
} }
stickyHeaderColumn(); stickyHeaderColumn();
}; };
@ -1071,8 +1109,8 @@ const save = async () => {
formStatus === PageStatusEnum.新增 formStatus === PageStatusEnum.新增
? props.addDataUrl ? props.addDataUrl
? props.addDataUrl ? props.addDataUrl
: props.getDataUrl : props.dataUrl
: (props.editDataUrl ? props.editDataUrl : props.getDataUrl) + '/' + table.selected[0][props.rowKey], : (props.editDataUrl ? props.editDataUrl : props.dataUrl) + '/' + table.selected[0][props.rowKey],
}; };
if (props.templateGridId) { if (props.templateGridId) {
requestParams = { requestParams = {
@ -1303,7 +1341,7 @@ const excludeColumnNum = computed(() => {
if (!attrs.selection || attrs.selection !== 'none') { if (!attrs.selection || attrs.selection !== 'none') {
num += 1; num += 1;
} }
if (props.showSortNo) { if (props.sortNo) {
num += 1; num += 1;
} }
return num; return num;
@ -1358,7 +1396,7 @@ const moreColumnTitleTableSelectionStyle = computed(() => {
return ''; return '';
}); });
const moreColumnTitleTableSortNoStyle = computed(() => { const moreColumnTitleTableSortNoStyle = computed(() => {
if (props.showSortNo && props.leftColumnStickyNumber > 0) { if (props.sortNo && props.leftColumnStickyNumber > 0) {
return 'z-index: 3;position: sticky;left: var(--columnWidth-1-1);'; return 'z-index: 3;position: sticky;left: var(--columnWidth-1-1);';
} }
return ''; return '';
@ -1632,13 +1670,13 @@ const onDrop = (e, scope) => {
const handlerQueryFormShowField = () => { const handlerQueryFormShowField = () => {
table.queryFormFields = []; table.queryFormFields = [];
if (table.moreQueryStatus) { if (table.moreQueryStatus) {
props.queryForm.fields.forEach((item) => { props.queryFormFields.forEach((item) => {
table.queryFormFields.push(item); table.queryFormFields.push(item);
}); });
} else { } else {
const rowColsNum = queryFormRef.value.getRowColsNum() * (props.queryForm.rowNum || 1); const rowColsNum = queryFormRef.value.getRowColsNum() * (props.queryFormRowNum || 1);
let currRowColsNum = 0; let currRowColsNum = 0;
props.queryForm.fields.forEach((item) => { props.queryFormFields.forEach((item) => {
if (item.hasOwnProperty('colspan')) { if (item.hasOwnProperty('colspan')) {
currRowColsNum += item.colspan; currRowColsNum += item.colspan;
} else { } else {
@ -1656,7 +1694,7 @@ onMounted(() => {
handlerMoreRowColumnTitle(); handlerMoreRowColumnTitle();
} }
handlerQueryFormShowField(); handlerQueryFormShowField();
if (props.autoLoadData) { if (props.autoFetchData) {
onRequest({ onRequest({
pagination: table.pagination, pagination: table.pagination,
}); });

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

@ -2,19 +2,15 @@
<div> <div>
<w-grid <w-grid
:title="testGrid.title" :title="testGrid.title"
:row-drag="true" draggable
:row-key="testGrid.rowKey" :row-key="testGrid.rowKey"
:auto-load-data="testGrid.autoLoadData" :data-url="testGrid.tableDataUrl"
:get-data-url="testGrid.tableDataUrl" sort-no
:show-sort-no="testGrid.tableShowSortNo"
:columns="testGrid.tableColumns" :columns="testGrid.tableColumns"
:left-column-sticky-number="testGrid.tableLeftColumnStickyNumber" :toolbar-actions="testGrid.toolbar"
:column-title-dense="true" :query-form-fields="testGrid.queryForm"
:toolbar="testGrid.toolbar" :editor="testGrid.addEdit"
:query-form="testGrid.queryForm" :viewer="testGrid.view"
:table-pagination="testGrid.tablePagination"
:add-edit="testGrid.addEdit"
:view="testGrid.view"
@selection="selection" @selection="selection"
@row-click="rowClick" @row-click="rowClick"
@row-db-click="rowDbClick" @row-db-click="rowDbClick"
@ -40,18 +36,11 @@ const rowDbClick = (evt, row, index) => {
const testGrid = { const testGrid = {
hideBottom: false, hideBottom: false,
autoLoadData: true, autoLoadData: true,
tableLeftColumnStickyNumber: 0, tableLeftColumnStickyNumber: 1,
title: '用户列表', title: '用户列表',
rowKey: 'id', rowKey: 'id',
tableDataUrl: Environment.apiContextPath('api/system/user'), tableDataUrl: Environment.apiContextPath('api/system/user'),
tablePagination: { toolbar: [
sortBy: 'lastModifyDate',
descending: true,
reqPageStart: 0,
rowsPerPage: 10,
},
toolbar: {
buttons: [
['query', 'separator', 'moreQuery'], ['query', 'separator', 'moreQuery'],
'reset', 'reset',
'refresh', 'refresh',
@ -94,11 +83,8 @@ const testGrid = {
], ],
'separator', 'separator',
], ],
},
tableShowSortNo: true, tableShowSortNo: true,
queryForm: { queryForm: [
rowNum: 1,
fields: [
{ label: '登录名', name: 'loginName', type: 'w-text' }, { label: '登录名', name: 'loginName', type: 'w-text' },
{ label: '用户名', name: 'userName', type: 'w-text' }, { label: '用户名', name: 'userName', type: 'w-text' },
{ label: '描述', name: 'description', type: 'w-text' }, { label: '描述', name: 'description', type: 'w-text' },
@ -109,7 +95,6 @@ const testGrid = {
// { label: '最后修改人', name: 'lastModifier', type: 'w-text' }, // { label: '最后修改人', name: 'lastModifier', type: 'w-text' },
// { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' }, // { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
], ],
},
tableColumns: [ tableColumns: [
{ {
name: 'info', name: 'info',
@ -135,7 +120,7 @@ const testGrid = {
{ name: 'qq', label: 'QQ' }, { name: 'qq', label: 'QQ' },
], ],
}, },
{ name: 'description', label: '描述' }, { name: 'description', label: '描述', width: 400 },
{ {
name: 'enable', name: 'enable',
label: '是否可用', label: '是否可用',
@ -161,7 +146,7 @@ const testGrid = {
return { return {
_vuecomp_: true, _vuecomp_: true,
type: 'q-icon', type: 'q-icon',
props: { attr: {
name: val ? IconEnum.是状态 : IconEnum.否状态, name: val ? IconEnum.是状态 : IconEnum.否状态,
color: val ? 'green' : 'red', color: val ? 'green' : 'red',
size: 'sm', size: 'sm',
@ -193,7 +178,7 @@ const testGrid = {
}, },
}, },
view: { view: {
infoPanel: { panel: {
columnNum: 2, columnNum: 2,
fields: [ fields: [
{ name: 'id', label: '主键' }, { name: 'id', label: '主键' },

Write Preview
Loading…
Cancel
Save