144 lines
3.6 KiB
Vue
144 lines
3.6 KiB
Vue
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-header elevated>
|
|
<q-toolbar>
|
|
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
|
|
<q-toolbar-title>
|
|
{{ productName }}
|
|
<q-badge align="top" outline>V{{ version }}</q-badge>
|
|
</q-toolbar-title>
|
|
<domain-selector></domain-selector>
|
|
<q-btn flat round dense icon="logout" @click="authStore.logout()" />
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer :model-value="authStore.LeftDrawer" :show-if-above="false" bordered>
|
|
<q-list>
|
|
<q-item-label header>
|
|
メニュー
|
|
</q-item-label>
|
|
|
|
<EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
|
|
<div v-if="isAdmin()">
|
|
<EssentialLink v-for="link in adminLinks" :key="link.title" v-bind="link" />
|
|
</div>
|
|
<EssentialLink v-for="link in domainLinks" :key="link.title" v-bind="link" />
|
|
|
|
</q-list>
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive } from 'vue';
|
|
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
|
|
import DomainSelector from 'components/DomainSelector.vue';
|
|
import { useAuthStore } from 'stores/useAuthStore';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const authStore = useAuthStore();
|
|
const route = useRoute()
|
|
const noDomain = computed(() => !authStore.hasDomain);
|
|
|
|
const essentialLinks: EssentialLinkProps[] = reactive([
|
|
{
|
|
title: 'ホーム',
|
|
caption: '設計書から導入する',
|
|
icon: 'home',
|
|
link: '/',
|
|
target: '_self',
|
|
disable: noDomain
|
|
},
|
|
// {
|
|
// title: 'フローエディター',
|
|
// caption: 'イベントを設定する',
|
|
// icon: 'account_tree',
|
|
// link: '/#/FlowChart',
|
|
// target: '_self'
|
|
// },
|
|
{
|
|
title: 'アプリ管理',
|
|
caption: 'アプリを管理する',
|
|
icon: 'widgets',
|
|
link: '/#/app',
|
|
target: '_self',
|
|
disable: noDomain
|
|
},
|
|
// {
|
|
// title: '条件エディター',
|
|
// caption: 'condition',
|
|
// icon: 'tune',
|
|
// link: '/#/condition',
|
|
// target:'_self'
|
|
// },
|
|
{
|
|
title: '',
|
|
isSeparator: true
|
|
},
|
|
// {
|
|
// title:'Kintone ポータル',
|
|
// caption:'Kintone',
|
|
// icon:'cloud_queue',
|
|
// link:'https://mfu07rkgnb7c.cybozu.com/k/#/portal'
|
|
// },
|
|
// {
|
|
// title:'CUSTOMINE',
|
|
// caption:'gusuku',
|
|
// link:'https://app-customine.gusuku.io/drive.html',
|
|
// icon:'settings_suggest'
|
|
// },
|
|
// {
|
|
// title:'Kintone API ドキュメント',
|
|
// caption:'Kintone API',
|
|
// link:'https://cybozu.dev/ja/kintone/docs/',
|
|
// icon:'help_outline'
|
|
// },
|
|
]);
|
|
|
|
const domainLinks: EssentialLinkProps[] = reactive([
|
|
{
|
|
title: 'ドメイン管理',
|
|
caption: 'kintoneのドメイン設定',
|
|
icon: 'domain',
|
|
link: '/#/domain',
|
|
target: '_self'
|
|
},
|
|
{
|
|
title: 'ドメイン適用',
|
|
caption: 'ユーザー使用可能なドメインの設定',
|
|
icon: 'assignment_ind',
|
|
link: '/#/userDomain',
|
|
target: '_self'
|
|
},
|
|
]);
|
|
|
|
const adminLinks: EssentialLinkProps[] = reactive([
|
|
{
|
|
title: 'ユーザー管理',
|
|
caption: 'ユーザーを管理する',
|
|
icon: 'manage_accounts',
|
|
link: '/#/user',
|
|
target: '_self'
|
|
},
|
|
])
|
|
|
|
const version = process.env.version;
|
|
const productName = process.env.productName;
|
|
|
|
onMounted(() => {
|
|
authStore.setLeftMenu(!route.path.startsWith('/FlowChart/'));
|
|
});
|
|
|
|
function toggleLeftDrawer() {
|
|
authStore.toggleLeftMenu();
|
|
}
|
|
function isAdmin(){
|
|
const permission = authStore.permissions;
|
|
return permission === 'admin'
|
|
}
|
|
</script>
|