<script lang="ts" setup>
|
import type { PropType } from 'vue';
|
|
import { reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { MenuOutlined, PushpinOutlined } from '@ant-design/icons-vue';
|
import { Popover, Tooltip } from 'ant-design-vue';
|
|
import { delView, setDefaultView } from '#/api/onlineDev/visualDev';
|
import { $t } from '#/locales';
|
|
interface State {
|
visible: boolean;
|
}
|
|
const props = defineProps({
|
menuId: { type: String },
|
viewList: { type: Array as PropType<any[]>, default: () => [] },
|
});
|
const emit = defineEmits(['itemClick', 'reload']);
|
const state = reactive<State>({
|
visible: false,
|
});
|
const { visible } = toRefs(state);
|
const { createMessage, createConfirm } = useMessage();
|
function handleClick(item) {
|
emit('itemClick', item);
|
}
|
function handleDel(id) {
|
state.visible = false;
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '确定要删除此视图，是否继续?',
|
onOk: () => {
|
delView(id, props.menuId).then((res) => {
|
createMessage.success(res.msg);
|
emit('reload');
|
});
|
},
|
});
|
}
|
function handleDefault(item) {
|
if (item.status === 1) return;
|
state.visible = false;
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '设置此视图为默认视图，是否继续？',
|
onOk: () => {
|
setDefaultView(item.id, props.menuId).then((res) => {
|
createMessage.success(res.msg);
|
emit('reload');
|
});
|
},
|
});
|
}
|
</script>
|
<template>
|
<Tooltip placement="top">
|
<template #title>
|
<span>{{ $t('component.table.viewList') }}</span>
|
</template>
|
<Popover v-model:open="visible" placement="bottomRight" trigger="click" overlay-class-name="jnpf-view-list-popover">
|
<template #content>
|
<div class="content">
|
<div v-for="item in viewList" :key="item.id" class="item" @click="handleClick(item)">
|
<span class="item-name">{{ item.fullName }}</span>
|
<div class="item-delete">
|
<i class="icon-ym icon-ym-app-delete" @click.stop="handleDel(item.id)" v-if="item.type !== 0"></i>
|
</div>
|
<div class="item-default">
|
<PushpinOutlined :class="{ 'item-default-icon': item.status == 0 }" @click.stop="handleDefault(item)" />
|
</div>
|
</div>
|
</div>
|
</template>
|
<MenuOutlined />
|
</Popover>
|
</Tooltip>
|
</template>
|
<style lang="scss">
|
.jnpf-view-list-popover {
|
.ant-popover-inner-content {
|
padding: 0;
|
|
.content {
|
width: 230px;
|
max-height: 250px;
|
overflow: auto;
|
|
.item {
|
display: flex;
|
align-items: center;
|
height: 36px;
|
padding: 0 8px 0 18px;
|
margin: 4px 6px;
|
cursor: pointer;
|
border-radius: 6px;
|
|
&:hover {
|
background-color: var(--selected-hover-bg);
|
|
.item-delete i {
|
display: block;
|
}
|
}
|
|
.item-name {
|
flex: 1;
|
}
|
|
.item-delete {
|
width: 14px;
|
|
i {
|
display: none;
|
font-size: 14px;
|
}
|
}
|
|
.item-default {
|
margin-left: 12px;
|
|
i {
|
font-size: 14px;
|
}
|
|
.item-default-icon {
|
color: var(--primary-color);
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
