add delete hint

This commit is contained in:
xue jiahao
2024-12-03 08:31:00 +08:00
parent 660ffe36c2
commit dcfe0d44fd
6 changed files with 90 additions and 73 deletions

View File

@@ -1,50 +1,58 @@
<template>
<div class="q-pa-sm">
<q-card class='domain-card'>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
<div class="text-subtitle2">{{ item.url }}</div>
</div>
<!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<q-icon name="account_circle" color="teal" size="2em"></q-icon>
</div> -->
<q-card :class="['domain-card', small ? 'small' : '']">
<q-card-section :class="[small ? 'q-py-sm' : '']">
<div class="row items-center no-wrap">
<div class="col">
<div :class="[small ? 'text-subtitle2' : 'text-h6']">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
<div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</div>
</div>
</q-card-section>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-grey-7 text-caption text-weight-medium">
アカウント
</div>
<div class="smaller-font-size">{{ item.kintoneuser }}</div>
</div>
<div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<div class="text-grey-7 text-caption text-weight-medium">
所有者
</div>
<div class="smaller-font-size">{{ item.owner }}</div>
<!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<q-icon name="account_circle" color="teal" size="2em"></q-icon>
</div> -->
</div>
</q-card-section>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-grey-7 text-caption text-weight-medium">
アカウント
</div>
<div class="smaller-font-size">{{ item.kintoneuser }}</div>
</div>
</q-card-section>
<q-separator />
<slot name="actions" :item="item"></slot>
</q-card>
</div>
<div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<div class="text-grey-7 text-caption text-weight-medium">
所有者
</div>
<div class="smaller-font-size">{{ item.owner }}</div>
</div>
</div>
</q-card-section>
<q-separator v-if="$slots.actions" />
<slot name="actions" :item="item"></slot>
</q-card>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import { defineProps, computed } from 'vue';
import { IDomain } from 'src/types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore';
const props = defineProps<{
item: IDomain;
isNotOwnerFunc: (ownerId: any) => boolean;
small: boolean;
}>();
const authStore = useAuthStore();
const isNotOwnerFunc = computed(() => (ownerId: string) => {
return ownerId == authStore.userId;
});
</script>
<style lang="scss" scoped>
.domain-card.small {
width: 18rem;
}
.domain-card {
width: 22rem;
word-break: break-word;