<script lang="ts" setup>
|
import { onMounted, reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { ScrollContainer } from '@jnpf/ui';
|
import { useModal } from '@jnpf/ui/modal';
|
import { downloadByUrl, openWindow } from '@jnpf/utils';
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
import { copySystem, delSystem, exportSystem, getSystemList, setPin } from '#/api/system/system';
|
import { $t } from '#/locales';
|
import { APP_BACKEND_PREFIX, APP_PREFIX } from '#/utils/constants';
|
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'AppCenter' });
|
|
interface State {
|
keyword: string;
|
loading: boolean;
|
list: any[];
|
type: number;
|
typeName: string;
|
sort: string;
|
sortName: string;
|
}
|
|
const { createConfirm, createMessage } = useMessage();
|
const state = reactive<State>({
|
keyword: '',
|
loading: false,
|
list: [],
|
type: 1,
|
typeName: '全部应用',
|
sort: 'desc',
|
sortName: '按创建时间降序',
|
});
|
const { keyword, loading, list, typeName, sortName } = toRefs(state);
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
|
const typeOptions = [
|
{ id: 1, fullName: '全部应用' },
|
{ id: 2, fullName: '我创建的' },
|
{ id: 3, fullName: '授权给我' },
|
];
|
const sortOptions = [
|
{ id: 'desc', fullName: '按创建时间降序' },
|
{ id: 'asc', fullName: '按创建时间升序' },
|
];
|
|
function openSystem(enCode) {
|
const url = `${window.location.origin}/${APP_PREFIX + enCode}`;
|
if (url) openWindow(url);
|
}
|
function addOrUpdateHandle(id = '') {
|
openFormModal(true, { id });
|
}
|
function handleCopy(id) {
|
copySystem(id).then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
});
|
}
|
function handleExport(id) {
|
exportSystem(id).then((res) => {
|
downloadByUrl({ url: res.data.url });
|
});
|
}
|
function handleDelete(id) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.delTip'),
|
onOk: () => {
|
delSystem(id).then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
});
|
},
|
});
|
}
|
function onTypeChange(item) {
|
if (item.id === state.type) return;
|
state.type = item.id;
|
state.typeName = item.fullName;
|
initData();
|
}
|
function onSortChange(item) {
|
if (item.id === state.sort) return;
|
state.sort = item.id;
|
state.sortName = item.fullName;
|
initData();
|
}
|
function handlePin(id, isTop) {
|
const query = {
|
id,
|
type: 'appCenter',
|
actionType: isTop ? 0 : 1,
|
};
|
setPin(query).then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
});
|
}
|
function initData() {
|
state.list = [];
|
state.loading = true;
|
getSystemList({ keyword: state.keyword, type: state.type, sort: state.sort })
|
.then((res) => {
|
state.list = res.data.list || [];
|
state.loading = false;
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
|
<template>
|
<div class="appCenter-container" v-loading="loading">
|
<div class="appCenter-container-header">
|
<div class="header-left">
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">创建应用</a-button>
|
<jnpf-upload-btn url="/api/system/System/Actions/Import" accept=".bs" @on-success="initData" />
|
</div>
|
<div class="header-right">
|
<a-dropdown>
|
<p class="header-right-picker">{{ typeName }}<DownOutlined /></p>
|
<template #overlay>
|
<a-menu>
|
<a-menu-item v-for="item in typeOptions" :key="item.id" @click="onTypeChange(item)">{{ item.fullName }}</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
<a-dropdown>
|
<p class="header-right-picker">{{ sortName }}<DownOutlined /></p>
|
<template #overlay>
|
<a-menu>
|
<a-menu-item v-for="item in sortOptions" :key="item.id" @click="onSortChange(item)">{{ item.fullName }}</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
<a-input-search placeholder="搜索应用" allow-clear v-model:value="keyword" :bordered="false" @search="initData" />
|
</div>
|
</div>
|
<div class="appCenter-container-main">
|
<ScrollContainer>
|
<div class="appCenter-container-list">
|
<a-row :gutter="20">
|
<a-col class="app-item" :xs="12" :sm="8" :xl="6" :xxl="4" v-for="item in list" :key="item.id" @click="openSystem(APP_BACKEND_PREFIX + item.enCode)">
|
<a-card hoverable>
|
<div class="app-item-main">
|
<div class="item-icon" :style="{ backgroundColor: item.backgroundColor || '#008cff' }">
|
<i :class="item.icon"></i>
|
</div>
|
<div class="app-item-text">
|
<p class="app-item-title" :title="item.fullName">{{ item.fullName }}</p>
|
<p class="app-item-code" :title="item.enCode">{{ item.enCode }}</p>
|
</div>
|
</div>
|
<div class="item-action">
|
<a-tooltip placement="bottom" title="访问应用">
|
<div class="item-action-item">
|
<div class="item-action-icon" @click.stop="openSystem(item.enCode)">
|
<i class="icon-ym icon-ym-enter"></i>
|
</div>
|
</div>
|
</a-tooltip>
|
<a-tooltip placement="bottom" title="复制应用">
|
<div class="item-action-item">
|
<div class="item-action-icon" @click.stop="handleCopy(item.id)">
|
<i class="icon-ym icon-ym-copy"></i>
|
</div>
|
</div>
|
</a-tooltip>
|
<a-tooltip placement="bottom" title="导出应用">
|
<div class="item-action-item">
|
<div class="item-action-icon" @click.stop="handleExport(item.id)">
|
<i class="icon-ym icon-ym-btn-download"></i>
|
</div>
|
</div>
|
</a-tooltip>
|
<a-tooltip placement="bottom" :title="$t('common.delText')">
|
<div class="item-action-item" v-if="item.hasDelete">
|
<div class="item-action-icon" @click.stop="handleDelete(item.id)">
|
<i class="icon-ym icon-ym-app-delete"></i>
|
</div>
|
</div>
|
</a-tooltip>
|
</div>
|
<a-tooltip :title="item.isTop ? '取消置顶' : '置顶'">
|
<div class="item-pin" :class="{ 'item-pin-active': item.isTop }" @click.stop="handlePin(item.id, item.isTop)">
|
<i class="icon-ym" :class="item.isTop ? 'icon-ym-unpin' : 'icon-ym-pin'"></i>
|
<i class="icon-ym icon-ym-pin" v-if="item.isTop"></i>
|
</div>
|
</a-tooltip>
|
</a-card>
|
</a-col>
|
</a-row>
|
</div>
|
<jnpf-empty v-if="!list.length" />
|
</ScrollContainer>
|
</div>
|
<Form @register="registerForm" @reload="initData" />
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.appCenter-container {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
overflow: hidden;
|
background: var(--component-background);
|
border-radius: var(--radius);
|
|
.appCenter-container-header {
|
display: flex;
|
flex-shrink: 0;
|
align-items: center;
|
justify-content: space-between;
|
height: 73px;
|
padding: 0 24px;
|
background-color: #f7f8fa;
|
|
.header-left {
|
display: flex;
|
|
:deep(.ant-btn-link) {
|
padding: 4px 0;
|
margin-left: 10px;
|
}
|
}
|
|
.header-right {
|
display: flex;
|
align-items: center;
|
|
.header-right-picker {
|
margin-right: 30px;
|
line-height: 32px;
|
color: var(--text-color-label);
|
cursor: pointer;
|
|
.anticon {
|
margin-left: 4px;
|
}
|
}
|
|
.ant-input-group-wrapper {
|
width: 220px;
|
padding: 0 6px;
|
overflow: hidden;
|
background: var(--component-background);
|
border-radius: 16px;
|
}
|
}
|
|
:deep(.ant-input-search) {
|
.ant-input-affix-wrapper {
|
border: none !important;
|
border-radius: 0;
|
|
&.ant-input-affix-wrapper-focused {
|
box-shadow: unset;
|
}
|
}
|
|
.ant-btn {
|
height: 31px;
|
outline: none !important;
|
outline-offset: 0 !important;
|
border: none !important;
|
border-radius: 0;
|
transition: unset !important;
|
|
& > div {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.appCenter-container-main {
|
flex: 1;
|
overflow: hidden;
|
|
.appCenter-container-list {
|
padding: 40px 77px 20px;
|
}
|
|
.app-item {
|
margin-bottom: 20px;
|
cursor: pointer;
|
|
&:hover {
|
.item-pin {
|
display: block;
|
|
&.item-pin-active {
|
.icon-ym-pin {
|
display: none;
|
}
|
|
.icon-ym-unpin {
|
display: block;
|
}
|
}
|
}
|
}
|
|
:deep(.ant-card) {
|
height: 152px;
|
border-radius: 8px;
|
}
|
|
.app-item-main {
|
display: flex;
|
align-items: center;
|
margin-bottom: 24px;
|
|
.item-icon {
|
display: flex;
|
flex-shrink: 0;
|
align-items: center;
|
justify-content: center;
|
width: 56px;
|
height: 56px;
|
margin-right: 10px;
|
color: #fff;
|
border-radius: 8px;
|
|
i {
|
font-size: 34px;
|
}
|
}
|
|
.app-item-text {
|
flex: 1;
|
min-width: 0;
|
|
.app-item-title {
|
margin-bottom: 8px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 16px;
|
font-weight: 500;
|
line-height: 22px;
|
white-space: nowrap;
|
}
|
|
.app-item-code {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 14px;
|
line-height: 20px;
|
color: var(--text-color-label);
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.item-action {
|
display: flex;
|
align-items: center;
|
|
.item-action-item {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
|
&::before {
|
position: absolute;
|
top: 4px;
|
left: 0;
|
display: block;
|
width: 1px;
|
height: 16px;
|
overflow: hidden;
|
content: '';
|
background: var(--border-color-base);
|
}
|
|
&:first-child {
|
&::before {
|
display: none;
|
}
|
}
|
|
.item-action-icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 26px;
|
height: 26px;
|
color: var(--text-color-label);
|
border-radius: 2px;
|
|
&:hover {
|
background: var(--app-main-background);
|
}
|
}
|
}
|
}
|
|
.item-pin {
|
position: absolute;
|
top: 14px;
|
right: 14px;
|
display: none;
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
|
.icon-ym {
|
font-size: 14px;
|
}
|
|
&:hover {
|
background: var(--app-main-background);
|
}
|
|
&.item-pin-active {
|
display: block;
|
|
.icon-ym-unpin {
|
display: none;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.dark {
|
.appCenter-container {
|
.appCenter-container-header {
|
background-color: var(--app-content-background);
|
border-bottom: 1px solid var(--border-color-base1);
|
}
|
}
|
}
|
</style>
|
