src/pages/Account/Role/Card/RoleDescriptorProxy.vue

@@ -0,0 +1,17 @@
+<script setup>
+import RoleDescriptor from './RoleDescriptor.vue';
+import RoleSummary from './RoleSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <RoleDescriptor v-if="$props.id" :id="$props.id" :summary="RoleSummary" />
+    </QPopupProxy>
+</template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -9,6 +9,7 @@ import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
+import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -156,7 +157,14 @@ const filter = {
                 <VnTitle :text="t('worker.summary.userData')" />
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
-                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
+                <VnLv :label="t('worker.summary.role')">
+                    <template #value>
+                        <span class="link">
+                            {{ worker.user.role.name }}
+                            <RoleDescriptorProxy :id="worker.user.role.id" />
+                        </span>
+                    </template>
+                </VnLv>
                 <VnLv :value="worker?.sip?.extension">
                     <template #label>
                         {{ t('worker.summary.sipExtension') }}