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

表格优化提交

main
likunming 1 year ago
parent
f6998ca535
commit
ac9c7adc8a
4 changed files with 175 additions and 135 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. 30
      io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
  2. 230
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  3. 36
      io.sc.platform.core.frontend/src/views/likm/Grid.vue
  4. 14
      io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue

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

@ -18,7 +18,7 @@
<span v-else style="width: 27px"></span> <span v-else style="width: 27px"></span>
<!--选择框--> <!--选择框-->
<q-checkbox <q-checkbox
v-if="checkboxSelection" v-if="gridProps.checkboxSelection"
v-model="state.currRow.selected" v-model="state.currRow.selected"
flat flat
size="40px" size="40px"
@ -37,20 +37,19 @@
<component :is="col.value.componentType" v-bind="col.value.attrs"></component> <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
</template> </template>
<template v-else> <template v-else>
{{ col.value }} <span v-dompurify-html="col.value || ''"></span>
</template> </template>
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
<template v-for="child in row.children" :key="child[props.rowKey]"> <template v-for="child in row.children" :key="child[rowKey]">
<TreeGridRow <TreeGridRow
v-if="state.currRow.expand" v-if="state.currRow.expand"
:columns-map="props.columnsMap" :columns-map="props.columnsMap"
:row="child" :row="child"
:cols="childColsHandler(child)" :cols="childColsHandler(child)"
:level="props.level + 1" :level="props.level + 1"
:checkbox-selection="checkboxSelection" :grid-props="gridProps"
:row-key="props.rowKey"
></TreeGridRow> ></TreeGridRow>
</template> </template>
</template> </template>
@ -76,8 +75,13 @@ const props = defineProps({
return []; return [];
}, },
}, },
checkboxSelection: { type: Boolean, default: true }, gridProps: {
rowKey: { type: String, default: 'id' }, type: Object,
default: () => {
return {};
},
},
rowKey: { type: String, default: 'rowKey_' },
}); });
const table = inject('table'); const table = inject('table');
@ -107,15 +111,15 @@ const getCurrRow = (arr) => {
getCurrRow(table.rows); getCurrRow(table.rows);
// 根据数组记录获取传入的key对应的行对象 // 根据数组记录获取传入的key对应的行对象
const getRow = (arr, key) => { const getRow = (arr, key, parent) => {
let result = undefined; let result = undefined;
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
let item = arr[i]; let item = arr[i];
if (item[props.rowKey] === key) { if (parent ? item[props.gridProps.treePrimaryField] === key : item[props.rowKey] === key) {
result = item; result = item;
break; break;
} else if (item.children && item.children.length > 0) { } else if (item.children && item.children.length > 0) {
const temp = getRow(item.children, key); const temp = getRow(item.children, key, parent);
if (temp) { if (temp) {
result = temp; result = temp;
} }
@ -135,10 +139,10 @@ const expandFun = () => {
const selectedFun = (value, row) => { const selectedFun = (value, row) => {
if (value) { if (value) {
selectedPush(row); selectedPush(row);
getRow(table.rows, row[props.rowKey]).selected = true; getRow(table.rows, row[props.rowKey], false).selected = true;
} else { } else {
selectedRemove(row); selectedRemove(row);
getRow(table.rows, row[props.rowKey]).selected = false; getRow(table.rows, row[props.rowKey], false).selected = false;
} }
selectedChildren(row, value); selectedChildren(row, value);
selectedParent(row, value); selectedParent(row, value);
@ -162,7 +166,7 @@ const selectedChildren = (row, selected) => {
// 设置父节点选中状态 // 设置父节点选中状态
const selectedParent = (row, selected) => { const selectedParent = (row, selected) => {
if (row.parent) { if (row.parent) {
const parent = getRow(table.rows, row.parent); const parent = getRow(table.rows, row.parent, true);
if (parent) { if (parent) {
if (selected && childrenSelectedStatus(parent).allSelected) { if (selected && childrenSelectedStatus(parent).allSelected) {
parent.selected = true; parent.selected = true;

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

@ -13,7 +13,9 @@
separator="cell" separator="cell"
:rows="table.rows" :rows="table.rows"
:columns="extractTableColumns" :columns="extractTableColumns"
:rows-per-page-options="pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []" :rows-per-page-options="
table.pagination.rowsPerPage && pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []
"
:loading="table.loading" :loading="table.loading"
:class="tableClassComputed" :class="tableClassComputed"
:table-style="tableHeightComputed" :table-style="tableHeightComputed"
@ -73,7 +75,11 @@
</template> </template>
<template v-else> <template v-else>
<q-tr :props="scope"> <q-tr :props="scope">
<q-th v-if="selectionComputed === 'multiple' && props.checkboxSelection && !props.tree" :style="props.tree ? '' : 'padding: 0; width: 50px'"> <q-th
v-if="selectionComputed === 'multiple' && props.checkboxSelection && !props.tree"
:style="props.tree ? '' : 'padding: 0; width: 50px'"
auto-width
>
<q-checkbox v-model="scope.selected" flat <q-checkbox v-model="scope.selected" flat
/></q-th> /></q-th>
<q-th v-else></q-th> <q-th v-else></q-th>
@ -85,13 +91,7 @@
</template> </template>
<template #body="scope"> <template #body="scope">
<template v-if="tree"> <template v-if="tree">
<TreeGridRow <TreeGridRow :columns-map="tableColumnsMap" :row="scope.row" :cols="scope.cols" :grid-props="props" :row-key="rowKey_"></TreeGridRow>
:columns-map="tableColumnsMap"
:row="scope.row"
:cols="scope.cols"
:checkbox-selection="props.checkboxSelection"
:row-key="props.rowKey"
></TreeGridRow>
</template> </template>
<q-tr v-else :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)"> <q-tr v-else :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
<q-td v-if="props.checkboxSelection" class="text-center" style="padding: 0; width: 50px"> <q-td v-if="props.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
@ -142,7 +142,7 @@
</q-inner-loading> </q-inner-loading>
</template> </template>
<template #pagination="scope"> <template #pagination="scope">
<template v-if="props.pagination.rowsPerPage || props.pagination.rowsPerPage > 0"> <template v-if="table.pagination.rowsPerPage || table.pagination.rowsPerPage > 0">
<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"
@ -195,7 +195,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide } from 'vue'; import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide } from 'vue';
import { axios, Environment, NotifyManager, TreeBuilder, VueTools } from '@/platform'; import { axios, Environment, NotifyManager, TreeBuilder, VueTools, Tools } 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';
@ -212,10 +212,8 @@ const props = defineProps({
height: { type: Number, default: 0 }, // 表格高度 height: { type: Number, default: 0 }, // 表格高度
title: { type: String, default: '' }, // 表格标题 title: { type: String, default: '' }, // 表格标题
autoFetchData: { type: Boolean, default: true }, // 自动加载数据 autoFetchData: { type: Boolean, default: true }, // 自动加载数据
rowKey: { type: String, default: 'id' }, // 行唯一键
draggable: { type: Boolean, default: false }, // 开启行拖拽 draggable: { type: Boolean, default: false }, // 开启行拖拽
fullScreenButton: { type: Boolean, default: true }, // 是否显示全屏按钮 fullScreenButton: { type: Boolean, default: true }, // 是否显示全屏按钮
templateGridId: { type: String, default: '' }, // 模板ID
dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀 dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀
fetchDataUrl: { type: String, default: '' }, // 获取数据URL fetchDataUrl: { type: String, default: '' }, // 获取数据URL
addDataUrl: { type: String, default: '' }, // 新增数据url addDataUrl: { type: String, default: '' }, // 新增数据url
@ -227,8 +225,18 @@ const props = defineProps({
leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el
checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用 checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用
tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现 tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现
treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系，包括：parent, children
treePrimaryField: { type: String, default: 'id' }, // 树形表格模式的数据主键名
treeRelationshipField: { type: String, default: 'parent' }, // 树形表格模式的数据关系字段名
treeExpand: { type: Boolean, default: false }, // 树形表格数据加载后是否全部展开 treeExpand: { type: Boolean, default: false }, // 树形表格数据加载后是否全部展开
treeExpandChildren: { type: Boolean, default: false }, // 树形表格父节点被选中时是否展开所有的子节点 treeExpandChildren: { type: Boolean, default: false }, // 树形表格父节点被选中时是否展开所有的子节点
queryCriteria: {
// 查询条件，查询、翻页、刷新等操作都会带上的查询条件
type: Object,
default: () => {
return {};
},
},
columns: { columns: {
type: Array, type: Array,
default: () => { default: () => {
@ -363,6 +371,14 @@ const dialogFormRef = ref();
const infoRef = ref(); const infoRef = ref();
const tableColumnsMap = arrayToMap('name', props.columns); const tableColumnsMap = arrayToMap('name', props.columns);
const queryFormFieldsMap = arrayToMap('name', props.queryFormFields); const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
const rowKey_ = 'rowKey_';
const url = {
dataUrl: props.dataUrl,
fetchDataUrl: props.fetchDataUrl,
addDataUrl: props.addDataUrl,
editDataUrl: props.editDataUrl,
removeDataUrl: props.removeDataUrl,
};
/** /**
* 内置按钮枚举 * 内置按钮枚举
@ -507,20 +523,8 @@ const buttonObj = {
}).onOk(() => { }).onOk(() => {
let requestParams: any = { let requestParams: any = {
method: 'DELETE', method: 'DELETE',
url: (props.removeDataUrl ? props.removeDataUrl : props.dataUrl) + '/' + selected[0][props.rowKey], url: (url.removeDataUrl || url.dataUrl) + '/' + selected[0][rowKey_],
}; };
if (props.templateGridId) {
const data = <any>[];
selected.forEach((item) => {
data.push(item[props.rowKey]);
});
requestParams = {
method: 'POST',
url:
(props.removeDataUrl ? props.removeDataUrl : Environment.apiContextPath('api/jdbc/delete')) + '/' + props.templateGridId + '/' + props.rowKey,
data: data,
};
}
axios(requestParams) axios(requestParams)
.then((resp) => { .then((resp) => {
table.selected = []; table.selected = [];
@ -908,11 +912,11 @@ const tableFullscreenFun = (value) => {
const rowClick = (evt: any, row: any, index: any) => { const rowClick = (evt: any, row: any, index: any) => {
if (selectionComputed.value === 'multiple') { if (selectionComputed.value === 'multiple') {
if (table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]) < 0) { if (table.selected.findIndex((item) => item[rowKey_] === row[rowKey_]) < 0) {
table.selected.push(row); table.selected.push(row);
} else { } else {
table.selected.splice( table.selected.splice(
table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]), table.selected.findIndex((item) => item[rowKey_] === row[rowKey_]),
1, 1,
); );
} }
@ -961,9 +965,15 @@ type CriteriaType = {
value: any; value: any;
}; };
let queryCriteria = { ...props.queryCriteria };
// 构建 criteria 查询 // 构建 criteria 查询
const buildQueryCriterias = (reqParams) => { const buildQueryCriterias = (reqParams) => {
const urlSearchParams = new URLSearchParams(reqParams); const urlSearchParams = new URLSearchParams(reqParams);
// 处理默认查询条件
if (Object.keys(queryCriteria).length > 0) {
urlSearchParams.append('criteria', JSON.stringify(queryCriteria));
}
if (queryFormRef.value) { if (queryFormRef.value) {
const queryFormData = queryFormRef.value.getData(); const queryFormData = queryFormRef.value.getData();
Object.keys(queryFormData).forEach((item) => { Object.keys(queryFormData).forEach((item) => {
@ -997,7 +1007,7 @@ const pageChange = (value) => {
table.pagination.page = value; table.pagination.page = value;
onRequest(table); onRequest(table);
}; };
const requestHandle = async (ops) => { const requestHandler = async (ops) => {
const reqParams: any = {}; const reqParams: any = {};
if (props.pagination.rowsPerPage) { if (props.pagination.rowsPerPage) {
reqParams.page = ops.pagination.page; reqParams.page = ops.pagination.page;
@ -1005,72 +1015,66 @@ const requestHandle = async (ops) => {
} }
if (ops.pagination.sortBy && ops.pagination.sortBy !== '') { if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
if (ops.pagination.descending) { if (ops.pagination.descending) {
reqParams.sortBy = props.templateGridId ? ops.pagination.sortBy : '-' + ops.pagination.sortBy; reqParams.sortBy = '-' + ops.pagination.sortBy;
reqParams.descending = ops.pagination.descending; reqParams.descending = ops.pagination.descending;
} else { } else {
reqParams.sortBy = ops.pagination.sortBy; reqParams.sortBy = ops.pagination.sortBy;
} }
} }
if (props.templateGridId) { // 后台 RestCrudController 查询
// 根据表格模板进行数据库表查询 let urlSearchParams = buildQueryCriterias(reqParams);
reqParams.templateGridId = props.templateGridId; // const urlSearchParams = buildQueryEntity(reqParams);
let queryFormDataJson = {}; emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
if (queryFormRef.value) { urlSearchParams = handlerRequestParams;
const queryFormData = queryFormRef.value.getData(); });
Object.keys(queryFormData).forEach((item) => { const resp = await axios.get(url.fetchDataUrl || url.dataUrl, { params: urlSearchParams }).catch((error) => {
if (!isEmpty(queryFormData[item])) { console.info('error-------------', error);
queryFormDataJson[item] = queryFormData[item]; table.loading = false;
} });
}); return resp;
}
emit('requestDataBefore', queryFormDataJson, (handlerRequestParams: URLSearchParams | any) => {
queryFormDataJson = handlerRequestParams;
});
reqParams.params = JSON.stringify(queryFormDataJson);
const resp = await axios.post(props.fetchDataUrl || props.dataUrl || Environment.apiContextPath('api/jdbc/list'), reqParams).catch((error) => {
table.loading = false;
});
return resp;
} else {
// 后台 RestCrudController 查询
// TODO 当前后端 criteria 查询尚未开发完成，只能使用普通实体查询，待后续开发完成替换即可。
let urlSearchParams = buildQueryCriterias(reqParams);
// const urlSearchParams = buildQueryEntity(reqParams);
emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
urlSearchParams = handlerRequestParams;
});
const resp = await axios.get(props.fetchDataUrl || props.dataUrl, { params: urlSearchParams }).catch((error) => {
console.info('error-------------', error);
table.loading = false;
});
return resp;
}
}; };
const onRequest = async (ops: any) => { const onRequest = async (ops: any) => {
table.loading = true; table.loading = true;
const resp: any = await requestHandle(ops); const resp: any = await requestHandler(ops);
table.loading = false; table.loading = false;
// const result = platformRequestResultHandle($q, resp.data);
if (resp && resp.data && !props.tree) { if (resp && resp.data && !props.tree) {
const responseData = resp.data; const responseData = resp.data;
if (props.pagination.rowsPerPage) { if (Array.isArray(responseData)) {
table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number; table.rows = responseData;
table.pagination.rowsPerPage = responseData.size; table.pagination.rowsNumber = responseData.length;
table.pagination.rowsPerPage = 0;
} else if (typeof responseData === 'object') {
if (props.pagination.rowsPerPage) {
table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
table.pagination.rowsPerPage = responseData.size;
}
table.pagination.rowsNumber = responseData.totalElements;
table.pagination.sortBy = ops.pagination.sortBy;
table.pagination.descending = ops.pagination.descending;
table.rows = responseData.content;
} }
table.pagination.rowsNumber = responseData.totalElements;
table.pagination.sortBy = ops.pagination.sortBy;
table.pagination.descending = ops.pagination.descending;
table.rows = responseData.content;
} else if (resp && resp.data && props.tree) { } else if (resp && resp.data && props.tree) {
const treeRows = TreeBuilder.build(resp.data); const treeRows = TreeBuilder.build(resp.data);
table.pagination.rowsNumber = resp.data.length; table.pagination.rowsNumber = resp.data.length;
table.pagination.rowsPerPage = 0; table.pagination.rowsPerPage = 0;
table.rows = treeRows; table.rows = treeRows;
} }
addRowKey(table.rows);
stickyHeaderColumn(); stickyHeaderColumn();
}; };
const addRowKey = (rows: []) => {
if (rows && rows.length > 0) {
rows.forEach((item) => {
item[rowKey_] = Tools.uuid();
if (props.tree && item.children && item.children.length > 0) {
addRowKey(item.children);
}
});
}
};
const save = async () => { const save = async () => {
dialog.dialogButtons[0].loading = true; dialog.dialogButtons[0].loading = true;
const formStatus = dialogFormRef.value.getStatus(); const formStatus = dialogFormRef.value.getStatus();
@ -1078,7 +1082,7 @@ const save = async () => {
if (validate) { if (validate) {
let dialogFormData = dialogFormRef.value.getData(); let dialogFormData = dialogFormRef.value.getData();
if (getSelectedRowsComputed.value && getSelectedRowsComputed.value.length > 0) { if (getSelectedRowsComputed.value && getSelectedRowsComputed.value.length > 0) {
dialogFormData[props.rowKey] = getSelectedRowsComputed.value[0][props.rowKey]; dialogFormData[rowKey_] = getSelectedRowsComputed.value[0][rowKey_];
} }
let submitFlag = true; let submitFlag = true;
emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => { emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => {
@ -1095,28 +1099,11 @@ const save = async () => {
data: dialogFormData, data: dialogFormData,
url: url:
formStatus === PageStatusEnum.新增 formStatus === PageStatusEnum.新增
? props.addDataUrl ? url.addDataUrl
? props.addDataUrl ? url.addDataUrl
: props.dataUrl : url.dataUrl
: (props.editDataUrl ? props.editDataUrl : props.dataUrl) + '/' + getSelectedRowsComputed.value[0][props.rowKey], : (url.editDataUrl ? url.editDataUrl : url.dataUrl) + '/' + getSelectedRowsComputed.value[0][rowKey_],
}; };
if (props.templateGridId) {
requestParams = {
method: 'POST',
headers: { 'content-type': 'application/json;charset=utf-8;' },
data: dialogFormData,
url:
formStatus === PageStatusEnum.新增
? (props.addDataUrl ? props.addDataUrl : Environment.apiContextPath('api/jdbc/add')) + '/' + props.templateGridId
: (props.editDataUrl ? props.editDataUrl : Environment.apiContextPath('api/jdbc/edit')) +
'/' +
props.templateGridId +
'/' +
props.rowKey +
'/' +
getSelectedRowsComputed.value[0][props.rowKey],
};
}
dialog.dialogButtons[0].loading = false; dialog.dialogButtons[0].loading = false;
axios(requestParams) axios(requestParams)
.then((resp) => { .then((resp) => {
@ -1187,12 +1174,13 @@ const wrapCsvValue = (val, formatFn, row) => {
// 替换全部行 // 替换全部行
const replaceRows = (rows: any) => { const replaceRows = (rows: any) => {
table.rows = rows; table.rows = rows;
addRowKey(table.rows);
stickyHeaderColumn(); stickyHeaderColumn();
}; };
// 替换单行数据 // 替换单行数据
const replaceRow = (row) => { const replaceRow = (row) => {
for (let i = 0; i < table.rows.length; i++) { for (let i = 0; i < table.rows.length; i++) {
if (row[props.rowKey] === table.rows[i][props.rowKey]) { if (row[rowKey_] === table.rows[i][rowKey_]) {
table.rows[i] = { ...table.rows[i], ...row }; table.rows[i] = { ...table.rows[i], ...row };
break; break;
} }
@ -1203,7 +1191,7 @@ const removeRows = (rows) => {
rows.forEach((item) => { rows.forEach((item) => {
table.rows.splice( table.rows.splice(
table.rows.findIndex((v) => { table.rows.findIndex((v) => {
return v[props.rowKey] === item[props.rowKey]; return v[rowKey_] === item[rowKey_];
}), }),
1, 1,
); );
@ -1218,12 +1206,13 @@ const addRow = (row, index) => {
} else { } else {
table.rows.splice(index, 0, row); table.rows.splice(index, 0, row);
} }
addRowKey(table.rows);
stickyHeaderColumn(); stickyHeaderColumn();
}; };
const getSelectedRowsHandler = (arr, selectedRows) => { const getSelectedRowsHandler = (arr, selectedRows) => {
arr.forEach((item) => { arr.forEach((item) => {
if (table.selected.findIndex((tmp) => tmp[props.rowKey] === item[props.rowKey]) > -1) { if (table.selected.findIndex((tmp) => tmp[rowKey_] === item[rowKey_]) > -1) {
selectedRows.push(item); selectedRows.push(item);
} }
if (props.tree && item.children && item.children.length > 0) { if (props.tree && item.children && item.children.length > 0) {
@ -1732,6 +1721,44 @@ const getViewerDrawer = () => {
const getViewerPanel = () => { const getViewerPanel = () => {
return infoRef.value; return infoRef.value;
}; };
const setQueryCriteria = (criteria) => {
queryCriteria = criteria;
};
const setQueryCriteriaFieldValueHandler = (criteria, fieldName, fieldValue) => {
if (criteria.criteria && criteria.criteria.length > 0) {
criteria.criteria.forEach((item) => {
if (!item.criteria && item.fieldName && item.fieldName === fieldName) {
item.value = fieldValue;
} else {
setQueryCriteriaFieldValueHandler(item.criteria, fieldName, fieldValue);
}
});
} else if (criteria.fieldName && criteria.fieldName === fieldName) {
criteria.value = fieldValue;
}
};
const setQueryCriteriaFieldValue = (fieldName, fieldValue) => {
if (Object.keys(queryCriteria).length === 0) {
console.error('queryCriteria未设置，无法执行setQueryCriteriaFieldValue方法');
return;
}
setQueryCriteriaFieldValueHandler(queryCriteria, fieldName, fieldValue);
};
const setDataUrl = (url_) => {
url.dataUrl = url_;
};
const setFetchDataUrl = (url_) => {
url.fetchDataUrl = url_;
};
const setAddDataUrl = (url_) => {
url.addDataUrl = url_;
};
const setEditDataUrl = (url_) => {
url.editDataUrl = url_;
};
const setRemoveDataUrl = (url_) => {
url.removeDataUrl = url_;
};
defineExpose({ defineExpose({
getSelectedRows, getSelectedRows,
@ -1746,6 +1773,13 @@ defineExpose({
getEditorForm, getEditorForm,
getViewerDrawer, getViewerDrawer,
getViewerPanel, getViewerPanel,
setQueryCriteria,
setQueryCriteriaFieldValue,
setDataUrl,
setFetchDataUrl,
setAddDataUrl,
setEditDataUrl,
setRemoveDataUrl,
}); });
const instance = getCurrentInstance(); const instance = getCurrentInstance();

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

@ -3,25 +3,23 @@
<w-grid <w-grid
:title="testGrid.title" :title="testGrid.title"
draggable draggable
:row-key="testGrid.rowKey"
:data-url="testGrid.tableDataUrl" :data-url="testGrid.tableDataUrl"
sort-no sort-no
selection="multiple" selection="multiple"
:checkbox-selection="false" :query-criteria="testGrid.queryCriteria"
:checkbox-selection="true"
: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="testGrid.addEdit"
:viewer="testGrid.view" :viewer="testGrid.view"
@selection="selection" @selection="selection"
@row-click="rowClick"
@row-db-click="rowDbClick"
></w-grid> ></w-grid>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'; import { ref, onMounted, nextTick, reactive } from 'vue';
import { axios, Environment } from '@/platform'; import { axios, Environment } 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';
@ -33,15 +31,20 @@ const rowClick = (evt, row, index) => {
// console.info('row====', row); // console.info('row====', row);
}; };
const rowDbClick = (evt, row, index) => { const rowDbClick = (evt, row, index) => {
console.info('row1====', row); // console.info('row1====', row);
}; };
const testGrid = {
const testGrid = reactive({
hideBottom: false, hideBottom: false,
autoLoadData: true, autoLoadData: true,
tableLeftColumnStickyNumber: 1, tableLeftColumnStickyNumber: 1,
title: '用户列表', title: '用户列表',
rowKey: 'id',
tableDataUrl: Environment.apiContextPath('api/system/user'), tableDataUrl: Environment.apiContextPath('api/system/user'),
queryCriteria: {
fieldName: 'loginName',
operator: 'contains',
value: '1',
},
toolbar: [ toolbar: [
['query', 'separator', 'moreQuery'], ['query', 'separator', 'moreQuery'],
'reset', 'reset',
@ -58,15 +61,22 @@ const testGrid = {
} }
return false; return false;
}, },
// beforeClick: (selected, context, gridRefs) => { // beforeClick: (selected, context, grid) => {
// console.info('先执行before'); // console.info('先执行before');
// context.aaa = '111'; // context.aaa = '111';
// }, // },
click: (selected, context, _click, gridRefs) => { click: (selected, context, _click, grid) => {
// grid.setQueryCriteria({
// fieldName: 'loginName',
// operator: 'contains',
// value: 'admin',
// });
grid.setFetchDataUrl('a.action');
grid.refresh();
// _click(); // _click();
}, },
afterClick: (selected, context, gridRefs) => { afterClick: (selected, context, grid) => {
gridRefs.addEditFormRef.setFieldValue('userName', '李四'); // grid.addEditFormRef.setFieldValue('userName', '李四');
}, },
}, },
[ [
@ -199,7 +209,7 @@ const testGrid = {
], ],
}, },
}, },
}; });
onMounted(() => { onMounted(() => {
// testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]); // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);

14
io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
View File

@ -6,14 +6,12 @@
draggable draggable
sort-no sort-no
tree tree
selection="multiple"
:row-key="testGrid.rowKey"
:data-url="testGrid.dataUrl" :data-url="testGrid.dataUrl"
:fetch-data-url="testGrid.fetchDataUrl"
:columns="testGrid.tableColumns" :columns="testGrid.tableColumns"
: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"
:pagination="testGrid.pagination"
@selection="selection" @selection="selection"
></w-grid> ></w-grid>
</div> </div>
@ -34,14 +32,8 @@ const selection = (details) => {
}; };
const testGrid = { const testGrid = {
title: '菜单列表', title: '菜单列表',
rowKey: 'id', dataUrl: Environment.apiContextPath('api/system/menu'),
dataUrl: Environment.apiContextPath('api/system/menu/allMenus'), fetchDataUrl: Environment.apiContextPath('api/system/menu/allMenus'),
pagination: {
sortBy: 'lastModifyDate',
descending: true,
reqPageStart: 0,
rowsPerPage: 0,
},
toolbar: [ toolbar: [
['query', 'separator', 'moreQuery'], ['query', 'separator', 'moreQuery'],
'reset', 'reset',

Write Preview
Loading…
Cancel
Save