Browse Source

表格优化提交

main
likunming 1 year ago
parent
commit
2ec65219db
  1. 9
      io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
  2. 45
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  3. 130
      io.sc.platform.core.frontend/src/views/likm/Grid.vue
  4. 552
      io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
  5. 6
      io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue

9
io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue

@ -50,6 +50,8 @@
:cols="childColsHandler(child)" :cols="childColsHandler(child)"
:level="props.level + 1" :level="props.level + 1"
:grid-props="gridProps" :grid-props="gridProps"
:row-key="props.rowKey"
:selection="props.selection"
></TreeGridRow> ></TreeGridRow>
</template> </template>
</template> </template>
@ -82,6 +84,7 @@ const props = defineProps({
}, },
}, },
rowKey: { type: String, default: 'rowKey_' }, rowKey: { type: String, default: 'rowKey_' },
selection: { type: String, default: 'single' },
}); });
const table = inject('table'); const table = inject('table');
@ -242,6 +245,10 @@ const childColsHandler = (child) => {
}; };
const click = (el, row, rowIndex) => { const click = (el, row, rowIndex) => {
selectedFun(!row.selected, row); table.rows.forEach((item) => {
selectedFun(false, item);
});
table.selected.splice(0, table.selected.length);
selectedFun(true, row);
}; };
</script> </script>

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

@ -13,9 +13,7 @@
separator="cell" separator="cell"
:rows="table.rows" :rows="table.rows"
:columns="extractTableColumns" :columns="extractTableColumns"
:rows-per-page-options=" :rows-per-page-options="pageable && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
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"
@ -82,7 +80,7 @@
> >
<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-if="props.checkboxSelection"></q-th>
<q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes"> <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
{{ col.label }} {{ col.label }}
</q-th> </q-th>
@ -91,7 +89,14 @@
</template> </template>
<template #body="scope"> <template #body="scope">
<template v-if="tree"> <template v-if="tree">
<TreeGridRow :columns-map="tableColumnsMap" :row="scope.row" :cols="scope.cols" :grid-props="props" :row-key="rowKey_"></TreeGridRow> <TreeGridRow
:columns-map="tableColumnsMap"
:row="scope.row"
:cols="scope.cols"
:grid-props="props"
:row-key="rowKey_"
:selection="selectionComputed"
></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 +147,7 @@
</q-inner-loading> </q-inner-loading>
</template> </template>
<template #pagination="scope"> <template #pagination="scope">
<template v-if="table.pagination.rowsPerPage || table.pagination.rowsPerPage > 0"> <template v-if="pageable">
<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"
@ -213,6 +218,7 @@ const props = defineProps({
title: { type: String, default: '' }, // title: { type: String, default: '' }, //
autoFetchData: { type: Boolean, default: true }, // autoFetchData: { type: Boolean, default: true }, //
draggable: { type: Boolean, default: false }, // draggable: { type: Boolean, default: false }, //
pageable: { type: Boolean, default: true }, //
fullScreenButton: { type: Boolean, default: true }, // fullScreenButton: { type: Boolean, default: true }, //
dataUrl: { type: String, default: '' }, // URL dataUrl: { type: String, default: '' }, // URL
fetchDataUrl: { type: String, default: '' }, // URL fetchDataUrl: { type: String, default: '' }, // URL
@ -645,11 +651,11 @@ const table = reactive({
ellipses: false, // ellipses: false, //
maxPages: 5, // 0 maxPages: 5, // 0
}, },
sortBy: props.pagination.sortBy ? props.pagination.sortBy : '', sortBy: props.pagination.sortBy || '',
descending: props.pagination.descending ? props.pagination.descending : false, descending: props.pagination.descending || false,
reqPageStart: Object.hasOwnProperty.call(props.pagination, 'reqPageStart') ? props.pagination.reqPageStart : 1, reqPageStart: props.pagination.reqPageStart || 0,
page: 1, page: 1,
rowsPerPage: props.pagination.rowsPerPage, rowsPerPage: props.pagination.rowsPerPage || 10,
rowsNumber: 10, rowsNumber: 10,
rowsPerPageOptions: [5, 10, 20, 50, 100], rowsPerPageOptions: [5, 10, 20, 50, 100],
}, },
@ -911,19 +917,8 @@ const tableFullscreenFun = (value) => {
}; };
const rowClick = (evt: any, row: any, index: any) => { const rowClick = (evt: any, row: any, index: any) => {
if (selectionComputed.value === 'multiple') {
if (table.selected.findIndex((item) => item[rowKey_] === row[rowKey_]) < 0) {
table.selected.push(row);
} else {
table.selected.splice(
table.selected.findIndex((item) => item[rowKey_] === row[rowKey_]),
1,
);
}
} else {
table.selected = []; table.selected = [];
table.selected.push(row); table.selected.push(row);
}
if (props.onRowClick) { if (props.onRowClick) {
emit('rowClick', evt, row, index); emit('rowClick', evt, row, index);
} }
@ -1009,10 +1004,11 @@ const pageChange = (value) => {
}; };
const requestHandler = async (ops) => { const requestHandler = async (ops) => {
const reqParams: any = {}; const reqParams: any = {};
if (props.pagination.rowsPerPage) { if (props.pageable) {
reqParams.page = ops.pagination.page; reqParams.page = ops.pagination.page;
reqParams.size = ops.pagination.rowsPerPage; reqParams.size = ops.pagination.rowsPerPage;
} }
reqParams.pageable = props.pageable;
if (ops.pagination.sortBy && ops.pagination.sortBy !== '') { if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
if (ops.pagination.descending) { if (ops.pagination.descending) {
reqParams.sortBy = '-' + ops.pagination.sortBy; reqParams.sortBy = '-' + ops.pagination.sortBy;
@ -1043,11 +1039,10 @@ const onRequest = async (ops: any) => {
if (Array.isArray(responseData)) { if (Array.isArray(responseData)) {
table.rows = responseData; table.rows = responseData;
table.pagination.rowsNumber = responseData.length; table.pagination.rowsNumber = responseData.length;
table.pagination.rowsPerPage = 0;
} else if (typeof responseData === 'object') { } else if (typeof responseData === 'object') {
if (props.pagination.rowsPerPage) { if (props.pageable) {
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 || table.pagination.rowsPerPage;
} }
table.pagination.rowsNumber = responseData.totalElements; table.pagination.rowsNumber = responseData.totalElements;
table.pagination.sortBy = ops.pagination.sortBy; table.pagination.sortBy = ops.pagination.sortBy;

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

@ -4,10 +4,8 @@
:title="testGrid.title" :title="testGrid.title"
draggable draggable
:data-url="testGrid.tableDataUrl" :data-url="testGrid.tableDataUrl"
sort-no :checkbox-selection="false"
selection="multiple" selection="multiple"
: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"
@ -108,72 +106,74 @@ const testGrid = reactive({
// { label: '', name: 'lastModifyDate', type: 'w-date' }, // { label: '', name: 'lastModifyDate', type: 'w-date' },
], ],
tableColumns: [ tableColumns: [
{ // {
name: 'info', // name: 'info',
label: '用户信息', // label: '',
childrenColumns: [ // childrenColumns: [
{ name: 'loginName', label: '登录名', align: 'right' }, // { name: 'loginName', label: '', align: 'right' },
{ name: 'userName', label: '用户名' }, // { name: 'userName', label: '' },
], // ],
},
{
name: 'lxxx',
label: '联系方式',
childrenColumns: [
{ name: 'email', label: '邮箱地址' },
{
name: 'tx',
label: '通讯',
childrenColumns: [
{ name: 'phone', label: '电话' },
{ name: 'mobile', label: '手机号' },
],
},
{ name: 'qq', label: 'QQ' },
],
},
{ name: 'description', label: '描述', width: 400 },
{
name: 'enable',
label: '是否可用',
align: 'center',
format: (val, row) => {
return '1<br/>2';
// return {
// _vuecomp_: true,
// type: EnableIcon,
// props: {
// value: val,
// showNoEnable: true,
// }, // },
// }; // {
// return { // name: 'lxxx',
// _vuecomp_: true, // label: '',
// type: 'q-chip', // childrenColumns: [
// props: { // { name: 'email', label: '' },
// label: val ? '' : '', // {
// icon: val ? IconEnum. : IconEnum., // name: 'tx',
// color: val ? 'green' : 'red', // label: '',
// childrenColumns: [
// { name: 'phone', label: '' },
// { name: 'mobile', label: '' },
// ],
// }, // },
// }; // { name: 'qq', label: 'QQ' },
// return { // ],
// componentsType: 'q-icon',
// attrs: {
// name: val ? IconEnum. : IconEnum.,
// color: val ? 'green' : 'red',
// size: 'sm',
// }, // },
// }; // { name: 'description', label: '', width: 400 },
// return { // {
// _vuecomp_: true, // name: 'enable',
// type: 'w-text', // label: '',
// props: { // align: 'center',
// name: 'aaa', // format: (val, row) => {
// label: '', // return '1<br/>2';
// // return {
// // _vuecomp_: true,
// // type: EnableIcon,
// // props: {
// // value: val,
// // showNoEnable: true,
// // },
// // };
// // return {
// // _vuecomp_: true,
// // type: 'q-chip',
// // props: {
// // label: val ? '' : '',
// // icon: val ? IconEnum. : IconEnum.,
// // color: val ? 'green' : 'red',
// // },
// // };
// // return {
// // componentsType: 'q-icon',
// // attrs: {
// // name: val ? IconEnum. : IconEnum.,
// // color: val ? 'green' : 'red',
// // size: 'sm',
// // },
// // };
// // return {
// // _vuecomp_: true,
// // type: 'w-text',
// // props: {
// // name: 'aaa',
// // label: '',
// // },
// // };
// }, // },
// }; // },
}, { name: 'loginName', label: '登录名', align: 'right' },
}, { name: 'userName', label: '用户名' },
{ name: 'lastModifier', label: '最后修改人' }, { name: 'lastModifier', label: '最后修改人' },
{ name: 'lastModifyDate', label: '最后修改时间' }, { name: 'lastModifyDate', label: '最后修改时间' },
], ],

552
io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue

@ -1,148 +1,452 @@
<template> <template>
<div> <q-splitter :model-value="65" class="w-full h-full">
<q-table title="Treats" table-style="height: 500px;" :rows="rows" :columns="columns" row-key="name" :flat="true" :selection="'single'" :separator="'cell'"> <template #before>
<template #body="bodyProps"> <div class="px-1">
<TableRow :cols="bodyProps.cols" :data="bodyProps.row"></TableRow> <w-grid
</template> ref="userGridRef"
</q-table> :title="$t('system.user.grid.title')"
</div> selection="multiple"
</template> :query-form-fields="[
{ name: 'loginName', label: $t('loginName'), type: 'text' },
<script setup lang="ts"> { name: 'userName', label: $t('userName'), type: 'text' },
import { ref } from 'vue'; { name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() },
{ name: 'dataComeFrom', label: $t('dataComeFrom'), type: 'select', options: Options.enum(DataComeFromEnum) },
const columns = [ ]"
:toolbar-configure="{ noIcon: false }"
:toolbar-actions="[
'query',
'refresh',
'separator',
'add',
'clone',
'edit',
'remove',
'separator',
{ {
name: 'name', name: 'setPassword',
required: true, label: t('system.user.action.setPassword'),
label: 'Dessert (100g serving)', icon: 'bi-shield-check',
align: 'left', enableIf: function (selecteds) {
field: (row) => row.name, return selecteds.length > 0;
format: (val) => `${val}`, },
sortable: true, click: function (selecteds) {
}, setPasswordDialogRef.open('setPassword', selecteds);
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true }, },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true }, },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'protein', label: 'Protein (g)', field: 'protein' },
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
];
const rows = ref([
{ {
name: 'Frozen Yogurt', name: 'setAllPassword',
calories: 159, label: t('system.user.action.setAllPassword'),
fat: 6.0, icon: 'bi-shield',
carbs: 24, enableIf: function (selecteds) {
protein: 4.0, return true;
sodium: 87, },
calcium: '14%', click: function () {
iron: '1%', setPasswordDialogRef.open('setAllPassword');
selected: true, },
children: [ },
'separator',
{ {
name: 'Ice cream sandwich3', name: 'resetPassword',
calories: 237, label: t('system.user.action.resetPassword'),
fat: 9.0, icon: 'bi-shield-fill-check',
carbs: 37, enableIf: function (selecteds) {
protein: 4.3, return selecteds.length > 0;
sodium: 129, },
calcium: '8%', click: function (selecteds) {
iron: '1%', DialogManager.confirm(t('system.user.confirm.resetPassword'), () => {
const userIds = Tools.extractProperties(selecteds, 'id');
axios.post(Environment.apiContextPath('/api/system/user/resetPassword'), userIds).then(() => {
NotifyManager.info(t('operationSuccess'));
});
});
}, },
],
}, },
{ {
name: 'Ice cream sandwich', name: 'resetAllPassword',
calories: 237, label: t('system.user.action.resetAllPassword'),
fat: 9.0, icon: 'bi-shield-fill',
carbs: 37, enableIf: function (selecteds) {
protein: 4.3, return true;
sodium: 129,
calcium: '8%',
iron: '1%',
}, },
click: function () {
DialogManager.confirm(t('system.user.confirm.resetAllPassword'), () => {
axios.post(Environment.apiContextPath('/api/system/user/resetAllPassword')).then(() => {
setPasswordDialogRef.value.hide();
NotifyManager.info(t('operationSuccess'));
});
});
},
},
'separator',
'view',
'export',
]"
:data-url="Environment.apiContextPath('/api/system/user')"
row-key="id"
:columns="[
{ name: 'loginName', label: t('loginName') },
{ name: 'userName', label: t('userName') },
{
name: 'status',
label: t('status'),
format: (value, row) => {
return {
componentType: UserStatusTag,
attrs: row,
};
},
},
{ name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
{ name: 'lastModifier', label: t('lastModifier') },
{ name: 'lastModifyDate', label: t('lastModifyDate'), format: Formater.dateOnly() },
]"
:editor="{
dialog: {
width: '600px',
height: '610px',
},
form: {
colsNum: 4,
fields: [
{ name: 'loginName', label: t('loginName'), type: 'text', required: true, colspan: 4 },
{ name: 'userName', label: t('userName'), type: 'text', required: true, colspan: 4 },
{ name: 'description', label: t('description'), type: 'textarea', rows: 1, colspan: 4 },
{ name: 'password', label: t('password'), type: 'password', colspan: 4 },
{
name: 'confirmPassword',
label: t('confirmPassword'),
type: 'password',
colspan: 4,
rules: [
(value) => {
return Tools.stringEquals(userGridRef.getAddEditFormRef().value.getData().password, value)
? true
: t('passwordAndConfirmPasswordMustEqual');
},
],
},
{ name: 'mobile', label: t('mobile'), type: 'text', colsFirst: true, colspan: 4 },
{ name: 'phone', label: t('phone'), type: 'text', colsFirst: true, colspan: 4 },
{ name: 'email', label: t('email'), type: 'text', colsFirst: true, colspan: 4 },
{ name: 'weixin', label: t('weixin'), type: 'text', colsFirst: true, colspan: 4 },
{ name: 'qq', label: t('qq'), type: 'text', colsFirst: true, colspan: 4 },
{ name: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true },
{ name: 'accountExpired', label: t('accountExpired'), type: 'checkbox', defaultValue: false },
{ name: 'accountLocked', label: t('accountLocked'), type: 'checkbox', defaultValue: false },
{ name: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox', defaultValue: false },
],
},
}"
:viewer="{
panel: {
columnNum: 1,
fields: [
{ name: 'id', label: t('id') },
{ name: 'loginName', label: t('loginName') },
{ name: 'userName', label: t('userName') },
{ name: 'description', label: t('description') },
{ name: 'enable', label: t('enable'), format: Formater.yesNo() },
{ name: 'accountExpired', label: t('accountExpired'), format: Formater.yesNo() },
{ name: 'accountLocked', label: t('accountLocked'), format: Formater.yesNo() },
{ name: 'credentialsExpired', label: t('credentialsExpired'), format: Formater.yesNo() },
{ name: 'email', label: t('email') },
{ name: 'phone', label: t('phone') },
{ name: 'mobile', label: t('mobile') },
{ name: 'weixin', label: t('weixin') },
{ name: 'qq', label: t('qq') },
{ name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
{ name: 'creator', label: t('creator') },
{ name: 'createDate', label: t('createDate') },
{ name: 'lastModifier', label: t('lastModifier') },
{ name: 'lastModifyDate', label: t('lastModifyDate') },
{ name: 'corporationCode', label: t('corporationCode') },
],
},
}"
@row-click="
(evt, row, index) => {
currentSelectedUserId = row.id;
if (roleGridRef) {
roleGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id);
roleGridRef.refresh();
}
if (orgTreeGridRef) {
orgTreeGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id);
orgTreeGridRef.refresh();
}
}
"
></w-grid>
</div>
</template>
<template #after>
<div class="px-1">
<q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
<q-tab name="role" icon="bi-people" :label="$t('role')" />
<q-tab name="org" icon="bi-diagram-3" :label="$t('org')" />
</q-tabs>
<q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive class="">
<q-tab-panel name="role" class="p-0">
<w-grid
ref="roleGridRef"
:title="$t('system.role.grid.title')"
:data-url="Environment.apiContextPath('/api/system/role/queryRolesByUser') + currentSelectedUserId"
:auto-fetch-data="false"
selection="multiple"
:full-screen-button="false"
:toolbar-configure="{ noIcon: true }"
:toolbar-actions="[
'refresh',
'separator',
{ {
name: 'Eclair', name: 'addRole',
calories: 262, label: $t('system.role.action.addRole'),
fat: 16.0, enableIf: () => {
carbs: 23, if (userGridRef) {
protein: 6.0, return userGridRef.getSelectedRows().length > 0;
sodium: 337, }
calcium: '6%', return false;
iron: '7%', },
click: () => {
selectRoleDialog.open({ userId: userGridRef.getSelectedRows()[0].id, userGrid: userGridRef, roleGrid: roleGridRef });
},
}, },
{ {
name: 'Cupcake', name: 'addAllRole',
calories: 305, label: t('system.role.action.addAllRole'),
fat: 3.7, enableIf: () => {
carbs: 67, if (userGridRef) {
protein: 4.3, return userGridRef.getSelectedRows().length > 0;
sodium: 413, }
calcium: '3%', return false;
iron: '8%',
}, },
click: () => {
const selectedUser = userGridRef.getSelectedRows()[0];
DialogManager.confirm(
t('system.role.action.addAllRole.confirm', { userLoginName: selectedUser.loginName, userName: selectedUser.userName }),
() => {
axios
.post(Environment.apiContextPath('/api/system/user/addAllRoles'), {
one: selectedUser.id,
many: [],
})
.then((response) => {
axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + selectedUser.id).then((response) => {
roleGridRef.replaceRows(response.data.content);
});
});
},
);
},
},
'separator',
{ {
name: 'Gingerbread', name: 'removeRole',
calories: 356, label: t('system.role.action.removeRole'),
fat: 16.0, enableIf: () => {
carbs: 49, if (userGridRef && roleGridRef) {
protein: 3.9, return userGridRef.getSelectedRows().length > 0 && roleGridRef.getSelectedRows().length > 0;
sodium: 327, }
calcium: '7%', return false;
iron: '16%', },
click: (selecteds) => {
const selectedUser = userGridRef.getSelectedRows()[0];
const roleIds = Tools.extractProperties(selecteds, 'id');
const messageKey = roleIds.length > 1 ? 'system.role.action.removeRole.confirms' : 'system.role.action.removeRole.confirm';
DialogManager.confirm(
t(messageKey, {
userLoginName: selectedUser.loginName,
userName: selectedUser.userName,
roleCode: selecteds[0].code,
roleName: selecteds[0].name,
counter: selecteds.length,
}),
() => {
axios
.post(Environment.apiContextPath('/api/system/user/removeRoles'), {
one: selectedUser.id,
many: roleIds,
})
.then((response) => {
axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + selectedUser.id).then((response) => {
roleGridRef.replaceRows(response.data.content);
});
});
},
);
},
}, },
{ {
name: 'Jelly bean', name: 'removeAllRole',
calories: 375, label: $t('system.role.action.removeAllRole'),
fat: 0.0, enableIf: () => {
carbs: 94, if (userGridRef && roleGridRef) {
protein: 0.0, return userGridRef.getSelectedRows().length > 0 && roleGridRef.getRows().length > 0;
sodium: 50, }
calcium: '0%', return false;
iron: '0%', },
click: () => {
const selectedUser = userGridRef.getSelectedRows()[0];
DialogManager.confirm(
t('system.role.action.removeAllRole.confirm', { userLoginName: selectedUser.loginName, userName: selectedUser.userName }),
() => {
axios
.post(Environment.apiContextPath('/api/system/user/removeAllRoles'), {
one: selectedUser.id,
many: [],
})
.then((response) => {
axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + selectedUser.id).then((response) => {
roleGridRef.replaceRows(response.data.content);
});
});
},
);
}, },
},
'separator',
'view',
]"
:columns="[
{ width: 100, name: 'code', label: $t('code') },
{ width: 100, name: 'name', label: $t('name') },
{ {
name: '<span style="color: red">This should be red.</span>', width: 60,
calories: 392, name: 'status',
fat: 0.2, label: t('status'),
carbs: 98, format: (value, row) => {
protein: 0, return {
sodium: 38, componentType: RoleStatusTag,
calcium: '0%', attrs: row,
iron: '2%', };
},
},
]"
:viewer="{
panel: {
columnNum: 1,
fields: [
{ name: 'id', label: t('id') },
{ name: 'code', label: t('code') },
{ name: 'name', label: t('name') },
{ name: 'description', label: t('description') },
{ name: 'enable', label: t('enable'), format: Formater.yesNo() },
{ name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
{ name: 'creator', label: t('creator') },
{ name: 'createDate', label: t('createDate') },
{ name: 'lastModifier', label: t('lastModifier') },
{ name: 'lastModifyDate', label: t('lastModifyDate') },
{ name: 'corporationCode', label: t('corporationCode') },
],
}, },
}"
></w-grid>
</q-tab-panel>
<q-tab-panel name="org" class="px-0">
<w-grid
ref="orgTreeGridRef"
:tree="true"
:title="$t('system.org.grid.title')"
:data-url="Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + currentSelectedUserId"
selection="multiple"
:full-screen-button="false"
:toolbar-configure="{ noIcon: true }"
:toolbar-actions="[
'refresh',
'separator',
{ {
name: 'Honeycomb', name: 'save',
calories: 408, label: $t('save'),
fat: 3.2, click: () => {},
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%',
}, },
'view',
]"
:pagination="{
sortBy: 'name',
descending: false,
reqPageStart: 0,
rowsPerPage: 0,
}"
:columns="[
{ width: 100, name: 'code', label: $t('code') },
{ width: 100, name: 'name', label: $t('name') },
{ {
name: 'Donut', width: 60,
calories: 452, name: 'status',
fat: 25.0, label: t('status'),
carbs: 51, format: (value, row) => {
protein: 4.9, return {
sodium: 326, componentType: RoleStatusTag,
calcium: '2%', attrs: row,
iron: '22%', };
}, },
},
]"
:viewer="{
panel: {
columnNum: 1,
fields: [
{ name: 'id', label: t('id') },
{ name: 'code', label: t('code') },
{ name: 'name', label: t('name') },
{ name: 'description', label: t('description') },
{ name: 'enable', label: t('enable'), format: Formater.yesNo() },
{ name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
{ name: 'creator', label: t('creator') },
{ name: 'createDate', label: t('createDate') },
{ name: 'lastModifier', label: t('lastModifier') },
{ name: 'lastModifyDate', label: t('lastModifyDate') },
{ name: 'corporationCode', label: t('corporationCode') },
],
},
}"
></w-grid>
</q-tab-panel>
</q-tab-panels>
</div>
</template>
<SelectRoleDialog ref="selectRoleDialog"></SelectRoleDialog>
<SetPasswordDialog ref="setPasswordDialogRef"></SetPasswordDialog>
</q-splitter>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, axios, EnumTools, NotifyManager, DialogManager, Formater, Options, Tools } from '@/platform';
import SelectRoleDialog from './SelectRoleDialog.vue';
import SetPasswordDialog from './SetPasswordDialog.vue';
import UserStatusTag from './UserStatusTag.vue';
import RoleStatusTag from './RoleStatusTag.vue';
const { t } = useI18n();
const userGridRef = ref();
const roleGridRef = ref();
const orgTreeGridRef = ref();
const selectRoleDialog = ref();
const selectedTabRef = ref('role');
const setPasswordDialogRef = ref();
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom');
const currentSelectedUserId = ref();
const orgConfigure = {
actions: [
{ {
name: 'KitKat', name: 'save',
calories: 518, label: '保存',
fat: 26.0, click: () => {
carbs: 65, axios
protein: 7, .post(Environment.apiContextPath('/api/system/user/updateOrgs'), {
sodium: 54, one: userGridRef.value.getSelectedRows()[0].id,
calcium: '12%', many: orgTreeGridRef.value.getTicked(),
iron: '6%', })
}, .then((response) => {});
]); },
},
],
};
</script> </script>

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

@ -87,6 +87,7 @@ const testGrid = {
{ {
name: 'name', name: 'name',
label: '菜单名称', label: '菜单名称',
width: 200,
format: (val, row) => { format: (val, row) => {
return t(val); return t(val);
}, },
@ -94,6 +95,7 @@ const testGrid = {
{ {
name: 'icon', name: 'icon',
label: '图标', label: '图标',
width: 200,
format: (val, row) => { format: (val, row) => {
return { return {
componentType: 'q-icon', componentType: 'q-icon',
@ -104,8 +106,8 @@ const testGrid = {
}; };
}, },
}, },
{ name: 'type', label: '菜单类型' }, { name: 'type', label: '菜单类型', width: 200 },
{ name: 'order', label: '排序号' }, { name: 'order', label: '排序号', width: 200 },
{ {
name: 'enable', name: 'enable',
label: '是否可用', label: '是否可用',

Loading…
Cancel
Save