This commit is contained in:
xue jiahao
2024-12-06 11:45:27 +08:00
parent e616f0c142
commit c8bb551ed1
5 changed files with 103 additions and 77 deletions

View File

@@ -2,7 +2,7 @@
<q-dialog :auto-close="false" :model-value="visible" persistent bordered>
<q-card class="dialog-content" >
<q-toolbar class="bg-grey-4">
<q-toolbar-title>{{domain.name}}のドメインを共有する</q-toolbar-title>
<q-toolbar-title>{{domain.name}}のドメイン利用権限設定</q-toolbar-title>
<q-btn flat round dense icon="close" @click="close" />
</q-toolbar>
@@ -17,12 +17,12 @@
input-debounce="0"
:options="canSharedUserFilteredOptions"
clearable
:placeholder="canSharedUserFilter ? '' : domain.domainActive ? '共有するユーザーを選択' : 'ドメインが有効でないため、共有ができない。'"
:placeholder="canSharedUserFilter ? '' : domain.domainActive ? '権限を付与するユーザーを選択' : 'ドメインが無効なため、権限を付与できません'"
@filter="filterFn"
:display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} ${canSharedUserFilter.email}`:''">
<template v-slot:after>
<q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="共有する" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
<q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="付与" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
</template>
<template v-slot:option="scope">
@@ -33,9 +33,9 @@
</q-item>
</template>
</q-select>
<sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="現在の共有ユーザー">
<sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="ドメイン利用権限を持つユーザー">
<template v-slot:actions="{ row }">
<q-btn flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
<q-btn title="解除" flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
</template>
</sharing-user-list>
</q-card-section>

View File

@@ -0,0 +1,56 @@
<template>
<q-btn flat padding="xs" round size="1em" icon="more_vert">
<q-menu>
<q-list dense :style="'min-width:' + minWidth ">
<template v-for="(item, index) in actions" :key="index" >
<q-item v-if="isAction(item)" :class="item.class" clickable v-close-popup @click="item.action(row)">
<q-item-section side style="color: inherit;">
<q-icon size="1.2em" :name="item.icon" />
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
<q-separator v-else />
</template>
</q-list>
</q-menu>
</q-btn>
</template>
<script lang="ts">
import { PropType } from 'vue';
import { IDomainOwnerDisplay } from '../types/DomainTypes';
interface Action {
label: string;
icon?: string;
action: (row: any) => void|Promise<void>;
class?: string;
}
interface Separator {
separator: boolean;
}
type MenuItem = Action | Separator;
export default {
name: 'TableActionMenu',
props: {
row: {
type: Object as PropType<IDomainOwnerDisplay>,
required: true
},
minWidth: {
type: String,
default: '100px'
},
actions: {
type: Array as PropType<MenuItem[]>,
required: true
}
},
methods: {
isAction(item: MenuItem): item is Action {
return !('separator' in item);
}
}
};
</script>

View File

@@ -128,7 +128,7 @@ const version = process.env.version;
const productName = process.env.productName;
onMounted(() => {
authStore.toggleLeftMenu();
authStore.setLeftMenu(true);
});
function toggleLeftDrawer() {

View File

@@ -30,31 +30,7 @@
</template>
<template v-slot:body-cell-actions="p">
<q-td :props="p">
<q-btn flat padding="xs" round size="1em" icon="more_vert">
<q-menu >
<q-list dense style="min-width: 100px">
<q-item clickable v-close-popup @click="toEditFlowPage(p.row)">
<q-item-section>
<q-icon size="1.2em" name="account_tree" />
</q-item-section>
<q-item-section>設定</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="showHistory(p.row)">
<q-item-section>
<q-icon size="1.2em" name="history" />
</q-item-section>
<q-item-section>履歴</q-item-section>
</q-item>
<q-separator />
<q-item class="text-red" clickable v-close-popup @click="removeRow(p.row)">
<q-item-section>
<q-icon size="1.2em" name="delete_outline" />
</q-item-section>
<q-item-section>削除</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<table-action-menu :row="p.row" :actions="actionList" />
</q-td>
</template>
</q-table>
@@ -83,6 +59,7 @@ import { date } from 'quasar'
import { IManagedApp } from 'src/types/AppTypes';
import ShowDialog from 'src/components/ShowDialog.vue';
import AppSelectBox from 'src/components/AppSelectBox.vue';
import TableActionMenu from 'components/TableActionMenu.vue';
interface IAppDisplay{
id:string;
@@ -119,6 +96,13 @@ const appDialog = ref();
const showSelectApp=ref(false);
const isAdding = ref(false);
const actionList = [
{ label: '設定', icon: 'account_tree', action: toEditFlowPage },
{ label: '履歴', icon: 'history', action: showHistory },
{ separator: true },
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
];
const getApps = async () => {
loading.value = true;
rowIds.clear();
@@ -140,7 +124,6 @@ const getApps = async () => {
}
onMounted(async () => {
authStore.setLeftMenu(false);
await getApps();
});
@@ -166,11 +149,11 @@ const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
isAdding.value = false;
}
const removeRow = (app:IAppDisplay) => {
function removeRow(app:IAppDisplay) {
return
}
const showHistory = (app:IAppDisplay) => {
function showHistory(app:IAppDisplay) {
return
}
@@ -186,7 +169,7 @@ const appToAppDisplay = (app: IManagedApp) => {
}
}
const toEditFlowPage = (app:IAppDisplay) => {
function toEditFlowPage(app:IAppDisplay) {
store.setApp({
appId: app.id,
name: app.name

View File

@@ -33,31 +33,7 @@
<template v-slot:body-cell-actions="p">
<q-td :props="p">
<q-btn flat padding="xs" round size="1em" icon="more_vert">
<q-menu >
<q-list dense style="min-width: 100px">
<q-item clickable v-close-popup @click="editRow(p.row)">
<q-item-section>
<q-icon size="1.2em" name="edit_note" />
</q-item-section>
<q-item-section>編集</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="openShareDg(p.row)">
<q-item-section>
<q-icon size="1.2em" name="person_add_alt" />
</q-item-section>
<q-item-section>ドメイン利用権限付与解除</q-item-section>
</q-item>
<q-separator />
<q-item class="text-red" clickable v-close-popup @click="removeRow(p.row)">
<q-item-section>
<q-icon size="1.2em" name="delete_outline" />
</q-item-section>
<q-item-section>削除</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<table-action-menu :row="p.row" :actions="actionList" />
</q-td>
</template>
@@ -138,7 +114,7 @@
<q-card>
<q-card-section v-if="deleteLoadingState == -1" class="row items-center">
<q-spinner color="primary" size="2em"/>
<span class="q-ml-sm">共有ユーザーのチェック</span>
<span class="q-ml-sm">ドメイン利用権限を確認中</span>
</q-card-section>
<q-card-section v-else-if="deleteLoadingState == 0" class="row items-center">
<q-icon name="warning" color="warning" size="2em" />
@@ -146,7 +122,7 @@
</q-card-section>
<q-card-section v-else class="row items-center">
<q-icon name="error" color="negative" size="2em" />
<span class="q-ml-sm">共有ユーザーが存在しキャンセルする必要がある</span>
<span class="q-ml-sm">ドメイン利用権限が存在しキャンセルする必要がある</span>
</q-card-section>
<q-card-actions align="right">
@@ -168,6 +144,7 @@ import { api } from 'boot/axios';
import { useAuthStore } from 'stores/useAuthStore';
import { useDomainStore } from 'stores/useDomainStore';
import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
import TableActionMenu from 'components/TableActionMenu.vue';
import { IDomain, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
const authStore = useAuthStore();
@@ -204,10 +181,6 @@ const show = ref(false);
const confirm = ref(false);
const resetPsw = ref(false);
const activeOptions = ['全データ', '启用', '未启用']
const activeFilter = ref('全データ');
const currentDomainId = computed(() => authStore.currentDomain.id);
// const tenantid = ref(authStore.currentDomain.id);
const name = ref('');
@@ -220,14 +193,21 @@ const domainActive = ref(true);
const isCreate = ref(true);
let editId = ref(0);
const shareDg = ref(false);
const shareDomain = ref<IDomainOwnerDisplay>();
const shareDomain = ref<IDomainOwnerDisplay>({} as IDomainOwnerDisplay);
const activeFilterUpdate = (selected) => {
switch (selected) {
case '用':
const activeOptions = [
{ value: 0, label: '全状態' },
{ value: 1, label: '使用' },
{ value: 2, label: '未使用'}
]
const activeFilter = ref(activeOptions[0]);
const activeFilterUpdate = (option: {value: number}) => {
switch (option.value) {
case 1:
getDomain((row) => row.domainActive)
break;
case '未启用':
case 2:
getDomain((row) => !row.domainActive)
break;
default:
@@ -236,7 +216,14 @@ const activeFilterUpdate = (selected) => {
}
}
const getDomain = async (filter = () => true) => {
const actionList = [
{ label: '編集', icon: 'edit_note', action: editRow },
{ label: '利用権限設定', icon: 'person_add_alt', action: openShareDg },
{ separator: true },
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
];
const getDomain = async (filter?: (row: IDomainOwnerDisplay) => boolean) => {
loading.value = true;
const { data } = await api.get<{data:IDomain[]}>(`api/domains`);
rows.value = data.data.map((item) => {
@@ -259,7 +246,7 @@ const getDomain = async (filter = () => true) => {
isSuperuser: item.owner.is_superuser,
}
}
}).filter(filter);
}).filter(filter || (() => true));
loading.value = false;
}
@@ -274,7 +261,7 @@ const addRow = () => {
show.value = true;
}
const removeRow = async (row: IDomainOwnerDisplay) => {
async function removeRow(row: IDomainOwnerDisplay) {
confirm.value = true;
deleteLoadingState.value = -1;
editId.value = row.id;
@@ -295,7 +282,7 @@ const deleteDomain = () => {
deleteLoadingState.value = -1;
};
const editRow = (row) => {
function editRow(row) {
isCreate.value = false
editId.value = row.id;
// tenantid.value = row.tenantid;
@@ -349,7 +336,7 @@ const onSubmit = () => {
})
}
const openShareDg = (row: IDomainOwnerDisplay|number) => {
function openShareDg(row: IDomainOwnerDisplay|number) {
if (typeof row === 'number') {
row = rows.value.find(item => item.id === row) as IDomainOwnerDisplay;
}
@@ -357,7 +344,7 @@ const openShareDg = (row: IDomainOwnerDisplay|number) => {
shareDg.value = true;
};
const closeShareDg = () => {
function closeShareDg() {
shareDg.value = false;
}