BaseWidgetHeader.vue
2.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script lang="ts" setup>
import { MoreOutlined } from '@ant-design/icons-vue';
import { DropMenu } from '/@/components/Dropdown';
import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
import { Tooltip } from 'ant-design-vue';
import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
import { isBataBoardSharePage, MoreActionEvent } from '../../config/config';
import { computed } from '@vue/reactivity';
import { usePermission } from '/@/hooks/web/usePermission';
import { DataSource } from '/@/api/dataBoard/model';
import { useRoute } from 'vue-router';
const emit = defineEmits(['action']);
const props = defineProps<{
id: string;
record: DataSource[];
}>();
const { hasPermission } = usePermission();
const dropMenuList = computed<DropMenu[]>(() => {
const basicMenu: DropMenu[] = [];
const hasUpdatePermission = hasPermission('api:yt:data_component:update:update');
const hasDeletePermission = hasPermission('api:yt:data_component:delete');
const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy');
if (hasUpdatePermission)
basicMenu.push({
text: '编辑组件',
event: MoreActionEvent.EDIT,
icon: 'ant-design:edit-outlined',
});
if (hasDeletePermission)
basicMenu.push({
text: '删除组件',
event: MoreActionEvent.DELETE,
icon: 'ant-design:delete-outlined',
});
if (hasCopyPermission)
basicMenu.push({
text: '复制组件',
event: MoreActionEvent.COPY,
icon: 'ant-design:copy-outlined',
});
return basicMenu;
});
const ROUTE = useRoute();
const getIsSharePage = computed(() => {
return isBataBoardSharePage(ROUTE.path);
});
const handleMenuEvent = (event: DropMenu) => {
emit('action', event, props.id);
};
</script>
<template>
<div class="flex justify-between w-full p-5">
<div class="flex" :style="{ width: `calc(100% - 60px)` }">
<div
v-for="(item, index) in props.record"
class="box-border truncate"
:style="{ width: `${100 / props.record.length}%` }"
:key="index"
>
<Tooltip :title="item.deviceName" placement="topLeft">
<div class="flex p-1">
<!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
<div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
</div>
</Tooltip>
</div>
</div>
<div class="flex items-center gap-5">
<slot name="moreAction"></slot>
<Dropdown
v-if="dropMenuList.length"
:drop-menu-list="dropMenuList"
:trigger="['click']"
@menu-event="handleMenuEvent"
>
<Tooltip title="更多">
<MoreOutlined
v-if="!getIsSharePage"
class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
/>
</Tooltip>
</Dropdown>
</div>
</div>
</template>