129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<Tooltip placement="top">
|
||
|
|
<template #title>
|
||
|
|
<span>{{ t('component.table.viewList') }}</span>
|
||
|
|
</template>
|
||
|
|
<Popover v-model:open="visible" placement="bottomRight" trigger="click" overlayClassName="yunzhupaas-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" />
|
||
|
|
</div>
|
||
|
|
<div class="item-default">
|
||
|
|
<PushpinOutlined :class="{ 'item-default-icon': item.status == 0 }" @click.stop="handleDefault(item)" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<menu-outlined />
|
||
|
|
</Popover>
|
||
|
|
</Tooltip>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import type { PropType } from 'vue';
|
||
|
|
import { reactive, toRefs } from 'vue';
|
||
|
|
import { Tooltip, Popover } from 'ant-design-vue';
|
||
|
|
import { MenuOutlined, PushpinOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { useI18n } from '@/hooks/web/useI18n';
|
||
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
||
|
|
import { delView, setDefaultView } from '@/api/onlineDev/visualDev';
|
||
|
|
|
||
|
|
interface State {
|
||
|
|
visible: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const state = reactive<State>({
|
||
|
|
visible: false,
|
||
|
|
});
|
||
|
|
const { visible } = toRefs(state);
|
||
|
|
const emit = defineEmits(['itemClick', 'reload']);
|
||
|
|
const { t } = useI18n();
|
||
|
|
const { createMessage, createConfirm } = useMessage();
|
||
|
|
const props = defineProps({
|
||
|
|
menuId: { type: String },
|
||
|
|
viewList: { type: Array as PropType<any[]>, default: () => [] },
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|
||
|
|
<style lang="less">
|
||
|
|
.yunzhupaas-view-list-popover {
|
||
|
|
.ant-popover-inner-content {
|
||
|
|
padding: 0;
|
||
|
|
.content {
|
||
|
|
width: 230px;
|
||
|
|
max-height: 250px;
|
||
|
|
overflow: auto;
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 4px 6px;
|
||
|
|
height: 36px;
|
||
|
|
padding: 0 8px 0 18px;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
&:hover {
|
||
|
|
background-color: @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: @primary-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|