<script lang="ts" setup>
|
import { computed, reactive, toRefs } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
|
import { openWindow } from '@jnpf/utils';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { deLCollectMenu, getCollectMenuList } from '#/api/system/collectMenu';
|
import { getCollectFlowList, setCollectFlow } from '#/api/workFlow/template';
|
import { $t } from '#/locales';
|
import { APP_BACKEND_PREFIX, APP_PREFIX } from '#/utils/constants';
|
import { getJnpfAppEnCode } from '#/utils/jnpf';
|
|
interface State {
|
list: any[];
|
keyword: string;
|
activeKey: string;
|
loading: boolean;
|
}
|
|
defineEmits(['register']);
|
const state = reactive<State>({
|
list: [],
|
keyword: '',
|
activeKey: '1',
|
loading: false,
|
});
|
const { list, keyword, activeKey, loading } = toRefs(state);
|
const { createMessage } = useMessage();
|
const router = useRouter();
|
const userStore = useUserStore();
|
const [registerDrawer, { closeDrawer }] = useDrawerInner(init);
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
|
function init() {
|
state.keyword = '';
|
state.activeKey = '1';
|
initData();
|
}
|
function initData() {
|
state.loading = true;
|
const delMethod = state.activeKey === '1' ? getCollectMenuList : getCollectFlowList;
|
delMethod({ keyword: state.keyword }).then((res) => {
|
state.list = res.data.list;
|
state.loading = false;
|
});
|
}
|
function handleClick(item) {
|
if (state.activeKey === '1') {
|
const { systemCode, urlAddress, isBackend } = item;
|
if (!urlAddress) return;
|
const url = urlAddress.startsWith('/') ? urlAddress : `/${urlAddress}`;
|
if (getJnpfAppEnCode() || !systemCode || systemCode === 'mainSystem') return router.push(url);
|
// 跳转子应用菜单
|
const fullUrl = `${window.location.origin}/${APP_PREFIX + (isBackend ? APP_BACKEND_PREFIX : '') + systemCode}${url}`;
|
openWindow(fullUrl);
|
} else {
|
router.push({ name: 'addFlow', params: { id: item.id } });
|
}
|
closeDrawer();
|
}
|
function handleDel(id) {
|
const delMethod = state.activeKey === '1' ? deLCollectMenu : setCollectFlow;
|
delMethod(id).then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
});
|
}
|
function onTabChange() {
|
state.keyword = '';
|
initData();
|
}
|
</script>
|
<template>
|
<BasicDrawer
|
v-bind="$attrs"
|
@register="registerDrawer"
|
width="340px"
|
class="full-drawer portal-toggle-drawer collect-menus-drawer"
|
:title="$t('layout.header.myCollect')">
|
<div class="tool">
|
<a-input-search :placeholder="$t('common.drawerSearchText')" allow-clear v-model:value="keyword" @search="initData" />
|
</div>
|
<a-tabs v-model:active-key="activeKey" size="small" :tab-bar-gutter="20" @change="onTabChange">
|
<a-tab-pane key="1" tab="应用功能" />
|
<a-tab-pane key="2" tab="发起审批" v-if="getUserInfo?.workflowEnabled" />
|
</a-tabs>
|
<div class="main" v-loading="loading">
|
<div class="item" v-if="list.length">
|
<div class="item-list">
|
<div class="item-list-item" v-for="(item, i) in list" :key="i" @click="handleClick(item)">
|
<i :class="item.icon" class="item-list-item-icon" :style="{ background: item.iconBackground || '#008cff' }"></i>
|
<div class="item-list-item-text">
|
<p class="item-list-item-title">{{ item.fullName }}</p>
|
<p class="item-list-item-desc">{{ item.systemName }}</p>
|
</div>
|
<a-tooltip placement="bottom" title="取消收藏">
|
<i class="icon-ym icon-ym-header-star-fill" @click.stop="handleDel(item.id)"></i>
|
</a-tooltip>
|
</div>
|
</div>
|
</div>
|
<jnpf-empty v-else />
|
</div>
|
</BasicDrawer>
|
</template>
|
