You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.9 KiB
127 lines
4.9 KiB
<template>
|
|
<q-splitter :model-value="60" class="w-full" style="height: 100%">
|
|
<template #before>
|
|
<div class="pr-1" style="height: 100%">
|
|
<w-grid
|
|
ref="applicationGridRef"
|
|
:title="$t('system.application.grid.title')"
|
|
:config-button="true"
|
|
selection="multiple"
|
|
:checkbox-selection="true"
|
|
:data-url="Environment.apiContextPath('/api/system/application')"
|
|
:sort-by="['order']"
|
|
:query-form-cols-num="3"
|
|
:query-form-fields="[
|
|
{ name: 'code', label: $t('code'), type: 'text' },
|
|
{ name: 'name', label: $t('name'), type: 'text' },
|
|
{ name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() },
|
|
]"
|
|
:toolbar-configure="{ noIcon: false }"
|
|
:toolbar-actions="['query', 'refresh', 'separator', 'add', 'clone', 'edit', 'remove', 'separator', 'view', 'separator', 'export']"
|
|
:columns="[
|
|
{ width: 60, name: 'order', label: $t('order') },
|
|
{ width: 200, name: 'code', label: $t('code') },
|
|
{ width: '100%', name: 'name', label: $t('name') },
|
|
{ width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() },
|
|
]"
|
|
:editor="{
|
|
dialog: {
|
|
width: '600px',
|
|
height: '300px',
|
|
},
|
|
form: {
|
|
colsNum: 1,
|
|
fields: [
|
|
{ name: 'code', label: $t('code'), type: 'text', required: true },
|
|
{ name: 'name', label: $t('name'), type: 'text', required: true },
|
|
{ name: 'description', label: $t('description'), type: 'textarea', rows: 1 },
|
|
{ name: 'order', label: $t('order'), type: 'number' },
|
|
{ name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true },
|
|
],
|
|
},
|
|
}"
|
|
: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.none() },
|
|
{ name: 'order', label: $t('order') },
|
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') },
|
|
{ name: 'creator', label: $t('creator') },
|
|
{ name: 'createDate', label: $t('createDate') },
|
|
{ name: 'lastModifier', label: $t('lastModifier') },
|
|
{ name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
|
|
{ name: 'corporationCode', label: $t('corporationCode') },
|
|
],
|
|
},
|
|
}"
|
|
@row-click="
|
|
(evt, row, index) => {
|
|
refreshRelationshipComponents(row.id);
|
|
}
|
|
"
|
|
@before-request-data="
|
|
() => {
|
|
menuTreeGridRef?.clear();
|
|
}
|
|
"
|
|
>
|
|
</w-grid>
|
|
</div>
|
|
</template>
|
|
<template #after>
|
|
<div class="pl-1" style="height: 100%">
|
|
<q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps>
|
|
<q-tab name="menu" icon="bi-menu-app" :label="$t('menu')" />
|
|
</q-tabs>
|
|
|
|
<q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)">
|
|
<q-tab-panel name="menu" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
<SelectMenuTreeGrid
|
|
ref="menuTreeGridRef"
|
|
:fetch-data-url="Environment.apiContextPath('/api/system/menu/listAllMenusWithSelectedStatusByApplication')"
|
|
foreign-key="applicationId"
|
|
:foreign-value="currentSelectedApplicationId"
|
|
@update="update"
|
|
></SelectMenuTreeGrid>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</template>
|
|
</q-splitter>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onActivated, onMounted } from 'vue';
|
|
import { Environment, axios, Options, Formater } from 'platform-core';
|
|
import SelectMenuTreeGrid from '../shared/SelectMenuTreeGrid.vue';
|
|
|
|
const applicationGridRef = ref();
|
|
const menuTreeGridRef = ref();
|
|
|
|
const selectedTabRef = ref('menu');
|
|
const currentSelectedApplicationId = ref('');
|
|
|
|
const refreshRelationshipComponents = (id) => {
|
|
currentSelectedApplicationId.value = id;
|
|
menuTreeGridRef.value?.refresh();
|
|
};
|
|
|
|
const update = (ids, gridComponent) => {
|
|
axios
|
|
.post(Environment.apiContextPath('/api/system/application/updateMenus'), {
|
|
one: applicationGridRef.value.getSelectedRows()[0].id,
|
|
many: ids,
|
|
})
|
|
.then(() => {
|
|
gridComponent.refresh();
|
|
});
|
|
};
|
|
|
|
onActivated(() => {
|
|
menuTreeGridRef.value?.refresh();
|
|
});
|
|
</script>
|
|
|