perf: layout组件文件目录调整
This commit is contained in:
rd
@ -1,52 +0,0 @@
|
||||
<!--
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-03-05 18:14:16
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-03-05 19:17:52
|
||||
* @Description:
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import type { RouteLocationNormalized } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const matched = computed(() => {
|
||||
if (route.matched.length === 1 && route.matched[0].path === '/') {
|
||||
return [];
|
||||
} else {
|
||||
return route.matched.reduce((t: RouteLocationNormalized[], o) => {
|
||||
const isExist = t.find((c) => c.name === o.name);
|
||||
return isExist ? t : [...t, router.resolve(o)];
|
||||
}, []);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view></view>
|
||||
<!-- <a-breadcrumb class="container-breadcrumb">
|
||||
<a-breadcrumb-item v-for="{ meta, name } in matched" :key="name">
|
||||
<router-link v-slot="{ href, navigate }" :to="{ name }" custom>
|
||||
<a-link v-if="meta.needNavigate" :href="href" @click="navigate">{{
|
||||
meta.locale ? meta.locale : '主页'
|
||||
}}</a-link>
|
||||
<a-link v-else disabled>{{ meta.locale ? meta.locale : '主页' }}</a-link>
|
||||
</router-link>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container-breadcrumb {
|
||||
margin: 16px 0;
|
||||
:deep(.arco-breadcrumb-item) {
|
||||
> a {
|
||||
color: rgb(var(--gray-6));
|
||||
}
|
||||
&:last-child {
|
||||
color: rgb(var(--gray-8));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 639 B |
@ -1,95 +0,0 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-26 17:23:52
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
width="400px"
|
||||
modal-class="exit-account-modal"
|
||||
show-close="false"
|
||||
:footer="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center mb-16px">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span class="s1">确认退出登录吗？</span>
|
||||
</div>
|
||||
<p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
|
||||
<div class="flex items-center justify-end">
|
||||
<a-button class="!rounded-4px" size="medium" @click="onClose">返回</a-button>
|
||||
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
|
||||
>退出登录</a-button
|
||||
>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { fetchLogOut } from '@/api/all/login';
|
||||
import { handleUserLogout } from '@/utils/user';
|
||||
|
||||
import icon1 from './img/icon1.png';
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onLogout() {
|
||||
const { code } = await fetchLogOut();
|
||||
if (code === 200) {
|
||||
handleUserLogout();
|
||||
AMessage.success('退出登录成功');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.exit-account-modal {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8) !important;
|
||||
background-color: var(--BG-white, #fff) !important;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
.arco-modal-header {
|
||||
display: none;
|
||||
}
|
||||
.arco-modal-body {
|
||||
padding: 24px;
|
||||
.s1 {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.s2 {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
.cancel-btn {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.danger-btn {
|
||||
background: var(--Functional-Danger-6, #f64b31) !important;
|
||||
&:hover {
|
||||
background: var(--Functional-Danger-6, #f64b31) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,2 @@
|
||||
export { default as Navbar } from './navbar/index.vue';
|
||||
export { default as Menu } from './menu/index.vue';
|
||||
export { default as TabBar } from './tab-bar/index.vue';
|
||||
export { default as Breadcrumb } from './breadcrumb/index.vue';
|
||||
export { default as ModalSimple } from './modal/index.vue';
|
||||
|
||||
@ -1,204 +0,0 @@
|
||||
<script lang="tsx">
|
||||
import type { RouteMeta, RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { useAppStore } from '@/stores';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { listenerRouteChange } from '@/utils/route-listener';
|
||||
import { openWindow, regexUrl } from '@/utils';
|
||||
import useMenuTree from './use-menu-tree';
|
||||
|
||||
export default defineComponent({
|
||||
emit: ['collapse'],
|
||||
setup() {
|
||||
const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { menuTree } = useMenuTree();
|
||||
const collapsed = computed({
|
||||
get() {
|
||||
if (appStore.device === 'desktop') return appStore.menuCollapse;
|
||||
return false;
|
||||
},
|
||||
set(value: boolean) {
|
||||
appStore.updateSettings({ menuCollapse: value });
|
||||
},
|
||||
});
|
||||
const topMenu = computed(() => appStore.topMenu);
|
||||
const openKeys = ref<string[]>([]);
|
||||
const selectedKey = ref<string[]>([]);
|
||||
const sidebarStore = useSidebarStore();
|
||||
const onMenuItemClick = (item: RouteRecordRaw) => {
|
||||
if (regexUrl.test(item.path)) {
|
||||
openWindow(item.path);
|
||||
selectedKey.value = [item.name as string];
|
||||
return;
|
||||
}
|
||||
// Eliminate external link side effects
|
||||
const { hideInMenu, activeMenu } = item.meta as RouteMeta;
|
||||
if (route.name === item.name && !hideInMenu && !activeMenu) {
|
||||
selectedKey.value = [item.name as string];
|
||||
return;
|
||||
}
|
||||
// Trigger router change
|
||||
router.push({
|
||||
name: item.name,
|
||||
});
|
||||
};
|
||||
const findMenuOpenKeys = (target: string) => {
|
||||
const result: string[] = [];
|
||||
let isFind = false;
|
||||
const backtrack = (item: RouteRecordRaw, keys: string[]) => {
|
||||
if (item.name === target) {
|
||||
isFind = true;
|
||||
result.push(...keys);
|
||||
return;
|
||||
}
|
||||
if (item.children?.length) {
|
||||
item.children.forEach((el) => {
|
||||
backtrack(el, [...keys, el.name as string]);
|
||||
});
|
||||
}
|
||||
};
|
||||
menuTree.value.forEach((el: RouteRecordRaw) => {
|
||||
if (isFind) return; // Performance optimization
|
||||
backtrack(el, [el.name as string]);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
listenerRouteChange((newRoute) => {
|
||||
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
|
||||
// if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
if (!hideInMenu || activeMenu) {
|
||||
const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
|
||||
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
|
||||
openKeys.value = [...keySet];
|
||||
selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]];
|
||||
|
||||
// 自动设置 activeMenuId
|
||||
sidebarStore.setActiveMenuIdByRoute(newRoute);
|
||||
}
|
||||
}, true);
|
||||
const setCollapse = (val: boolean) => {
|
||||
if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val });
|
||||
};
|
||||
const renderSubMenu = () => {
|
||||
function travel(_route: RouteRecordRaw[] = [], nodes: any[] = []) {
|
||||
if (!Array.isArray(_route)) return nodes;
|
||||
_route.forEach((element) => {
|
||||
// 跳过没有 name 的菜单项，防止 key 报错
|
||||
if (!element?.name) return;
|
||||
|
||||
const icon = element?.meta?.icon
|
||||
? (() => {
|
||||
if (typeof element.meta.icon === 'string') {
|
||||
return (
|
||||
<svg class="w-16px h-16px">
|
||||
<use xlinkHref={element.meta.icon} />
|
||||
</svg>
|
||||
);
|
||||
} else {
|
||||
return h(element.meta.icon as object);
|
||||
}
|
||||
})()
|
||||
: null;
|
||||
|
||||
if (element.children && element.children.length > 0) {
|
||||
nodes.push(
|
||||
<a-sub-menu
|
||||
key={String(element.name)}
|
||||
v-slots={{
|
||||
icon,
|
||||
title: () => element?.meta?.locale || '',
|
||||
}}
|
||||
>
|
||||
{travel(element.children)}
|
||||
</a-sub-menu>,
|
||||
);
|
||||
} else {
|
||||
nodes.push(
|
||||
<a-menu-item key={String(element.name)} v-slots={{ icon }} onClick={() => onMenuItemClick(element)}>
|
||||
{element?.meta?.locale || ''}
|
||||
</a-menu-item>,
|
||||
);
|
||||
}
|
||||
});
|
||||
return nodes;
|
||||
}
|
||||
return travel(menuTree.value ?? []);
|
||||
};
|
||||
return () => (
|
||||
<a-menu
|
||||
mode={topMenu.value ? 'horizontal' : 'vertical'}
|
||||
v-model:collapsed={collapsed.value}
|
||||
v-model:open-keys={openKeys.value}
|
||||
show-collapse-button={appStore.device !== 'mobile'}
|
||||
auto-open={false}
|
||||
selected-keys={selectedKey.value}
|
||||
auto-open-selected={true}
|
||||
level-indent={24}
|
||||
style="height: 100%;width:100%;"
|
||||
onCollapse={setCollapse}
|
||||
>
|
||||
{renderSubMenu()}
|
||||
</a-menu>
|
||||
);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
padding: 20px 24px 0 12px !important;
|
||||
.arco-menu-inline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
.arco-menu-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
.arco-menu-title {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.arco-menu-item {
|
||||
border-radius: 8px;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,63 +0,0 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-19 01:45:53
|
||||
*/
|
||||
import type { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
|
||||
export default function useMenuTree() {
|
||||
const router = useRouter();
|
||||
const appRoutes = router.options?.routes ?? [];
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const appRoute = computed(() => {
|
||||
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
|
||||
return _filterRoutes;
|
||||
});
|
||||
const menuTree = computed(() => {
|
||||
const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
|
||||
copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
|
||||
return (a.meta.order || 0) - (b.meta.order || 0);
|
||||
});
|
||||
function travel(_routes: RouteRecordRaw[], layer: number) {
|
||||
if (!_routes) return null;
|
||||
|
||||
const collector: any = _routes.map((element) => {
|
||||
// leaf node
|
||||
if (element.meta?.hideChildrenInMenu || !element.children) {
|
||||
element.children = [];
|
||||
return element;
|
||||
}
|
||||
|
||||
// route filter hideInMenu true
|
||||
element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
|
||||
|
||||
// Associated child node
|
||||
const subItem = travel(element.children, layer + 1);
|
||||
|
||||
if (subItem.length) {
|
||||
element.children = subItem;
|
||||
return element;
|
||||
}
|
||||
// the else logic
|
||||
if (layer > 1) {
|
||||
element.children = subItem;
|
||||
return element;
|
||||
}
|
||||
|
||||
if (element.meta?.hideInMenu === false) {
|
||||
return element;
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
return collector.filter(Boolean);
|
||||
}
|
||||
return travel(copyRouter, 0);
|
||||
});
|
||||
|
||||
return {
|
||||
menuTree,
|
||||
};
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
<script lang="jsx">
|
||||
import { Sender } from 'ant-design-x-vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const keyWord = ref('');
|
||||
const handleSearch = () => {
|
||||
console.log('handleSearch', keyWord.value);
|
||||
};
|
||||
return () => (
|
||||
<div class="middle-wrap h-100% flex-1 flex items-center justify-center px-24px">
|
||||
<Input
|
||||
v-model:value={keyWord.value}
|
||||
onPressEnter={handleSearch}
|
||||
size="large"
|
||||
class="sender-input-wrap"
|
||||
placeholder="随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。"
|
||||
v-slots={{
|
||||
suffix: () => (
|
||||
<div
|
||||
class="bg-#F0EDFF rounded-16px w-32px h-32px flex justify-center items-center icon cursor-pointer"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<icon-arrow-right size={20} class="color-#6D4CFE" />
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -1,53 +0,0 @@
|
||||
.middle-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sender-input-wrap {
|
||||
width: 560px;
|
||||
height: 36px;
|
||||
padding: 0 2px 0 16px;
|
||||
border-radius: 50px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: none;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:deep(.ant-input-suffix) {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
padding-right: 16px;
|
||||
border: none !important;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
font-family: $font-family-regular;
|
||||
color: #211f24;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
border-color: #6d4cfe;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #939499;
|
||||
}
|
||||
&:focus {
|
||||
border-color: #6d4cfe !important;
|
||||
caret-color: #6D4CFE;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
&::after {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
transition: background 0.3s;
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--Brand-1, #f0edff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<div class="right-wrap">
|
||||
<!-- 任务中心 -->
|
||||
<div
|
||||
class="relative p-6px rounded-30px flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
|
||||
@click="setUnread"
|
||||
>
|
||||
<SvgIcon
|
||||
name="svg-taskCenter"
|
||||
size="20"
|
||||
class="cursor-pointer color-#737478 hover:color-#6D4CFE"
|
||||
@click="openDownloadCenter"
|
||||
/>
|
||||
<div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
|
||||
</div>
|
||||
|
||||
<!-- 灵机空间入口 -->
|
||||
<div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
|
||||
|
||||
<!-- 头像设置 -->
|
||||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||
<a-avatar class="cursor-pointer" :size="32">
|
||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<div>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
|
||||
<a-doption class="enterprises-doption">
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon3" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(item, index) in enterprises"
|
||||
:key="index"
|
||||
class="rounded-8px hover:bg-#F2F3F5"
|
||||
@click="onEnterpriseItemClick(item)"
|
||||
>
|
||||
<div
|
||||
class="flex items-center w-100% justify-between"
|
||||
:class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
|
||||
</div>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dsubmenu>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon2" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<ExitAccountModal ref="exitAccountModalRef" />
|
||||
<DownloadCenterModal ref="downloadCenterModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import router from '@/router';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
import ExitAccountModal from '@/components/_base/exit-account-modal';
|
||||
import DownloadCenterModal from '../task-center-modal';
|
||||
|
||||
import icon1 from '@/assets/option.svg';
|
||||
import icon2 from '@/assets/exit.svg';
|
||||
import icon3 from '@/assets/change.svg';
|
||||
|
||||
const props = defineProps({
|
||||
isAgentRoute: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const userStore = useUserStore();
|
||||
const sideBarStore = useSidebarStore();
|
||||
const route = useRoute();
|
||||
|
||||
const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
|
||||
|
||||
const exitAccountModalRef = ref(null);
|
||||
const downloadCenterModalRef = ref(null);
|
||||
|
||||
const enterprises = computed(() => {
|
||||
return userStore.userInfo?.enterprises ?? [];
|
||||
});
|
||||
const enterpriseInfo = computed(() => {
|
||||
return enterpriseStore?.enterpriseInfo ?? {};
|
||||
});
|
||||
|
||||
const openDownloadCenter = () => {
|
||||
downloadCenterModalRef.value.open();
|
||||
};
|
||||
const onEnterpriseItemClick = async (item) => {
|
||||
enterpriseStore.setEnterpriseInfo(item);
|
||||
window.location.reload();
|
||||
};
|
||||
const clickExit = async () => {
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
const setServerMenu = () => {
|
||||
router.push('/management/person');
|
||||
};
|
||||
const setUnread = () => {
|
||||
if (sideBarStore.unreadInfo.length) {
|
||||
sideBarStore.removeTaskUnreadInfo();
|
||||
}
|
||||
};
|
||||
const handleAgentClick = () => {
|
||||
router.push({ name: props.isAgentRoute ? 'Home' : 'AgentIndex' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
width: 200px;
|
||||
.arco-dropdown {
|
||||
padding: 12px 4px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 !important;
|
||||
&-content {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-suffix {
|
||||
display: none;
|
||||
}
|
||||
.enterprises-doption {
|
||||
.arco-dropdown-option-content {
|
||||
padding: 0 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +0,0 @@
|
||||
.right-wrap {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
.agent-entry {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
background: url('@/assets/img/agent/icon-entry.png') 100% 100%;
|
||||
background-size: cover;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: url('@/assets/img/agent/icon-entry-hover.png') 100% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
&.agent {
|
||||
background: url('@/assets/img/agent/icon-home.png') 100% 100%;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: url('@/assets/img/agent/icon-home-hover.png') 100% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
export const INITIAL_FORM = {
|
||||
type: 1,
|
||||
operator_name: '',
|
||||
module: '',
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '所属模块',
|
||||
dataIndex: 'module',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isBatch ? '批量删除下载记录' : '删除下载记录'"
|
||||
width="400px"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认删除 {{ accountName }} 这条记录吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button size="large" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { deleteTask, deleteBatchTasks } from '@/api/all/common';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const emits = defineEmits(['update', 'close', 'batchUpdate']);
|
||||
|
||||
const visible = ref(false);
|
||||
const taskId = ref(null);
|
||||
const accountName = ref('');
|
||||
|
||||
const isBatch = computed(() => Array.isArray(taskId.value));
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
taskId.value = null;
|
||||
accountName.value = '';
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
taskId.value = id;
|
||||
accountName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
|
||||
const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
|
||||
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -1,386 +0,0 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask, postRedoTask, postBatchDownload, batchQueryTaskStatus } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { EXPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { formatTableField, exactFormatTime, genRandomId } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
let queryTaskTimer = null;
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_FORM));
|
||||
const deleteTaskModalRef = ref(null);
|
||||
const downloadTaskInfos = ref([]);
|
||||
|
||||
const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
|
||||
const indeterminate = computed(
|
||||
() => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
query.value = cloneDeep(INITIAL_FORM);
|
||||
pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
downloadTaskInfos.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { page, page_size } = pageInfo.value;
|
||||
const { code, data } = await getTask({
|
||||
...query.value,
|
||||
page,
|
||||
page_size,
|
||||
});
|
||||
if (code === 200) {
|
||||
dataSource.value = data?.data ?? [];
|
||||
pageInfo.value.total = data?.total;
|
||||
}
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const clearSelectedRows = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = async (record) => {
|
||||
if (record.status === enumTaskStatus.Failed) {
|
||||
const { code } = await postRedoTask(record.id);
|
||||
if (code === 200) {
|
||||
showExportNotification(`正在下载“${record.name}”，请稍后...`);
|
||||
getData();
|
||||
}
|
||||
} else {
|
||||
record.file && downloadByUrl(record.file);
|
||||
}
|
||||
};
|
||||
|
||||
// 批量下载
|
||||
const handleBatchDownload = debounce(async () => {
|
||||
const { code, data } = await postBatchDownload({ ids: selectedRowKeys.value });
|
||||
if (code === 200) {
|
||||
startBatchDownload(data.id);
|
||||
}
|
||||
}, 500);
|
||||
const startBatchDownload = (id) => {
|
||||
const randomId = genRandomId();
|
||||
showExportNotification(
|
||||
`正在批量下载“${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件，请稍后...`,
|
||||
{
|
||||
duration: 0,
|
||||
id: randomId,
|
||||
},
|
||||
);
|
||||
downloadTaskInfos.value.push({
|
||||
id,
|
||||
randomId,
|
||||
});
|
||||
|
||||
if (!queryTaskTimer) {
|
||||
queryTaskTimer = setInterval(() => getSyncTaskStatus(), 3000);
|
||||
}
|
||||
};
|
||||
const getSyncTaskStatus = async () => {
|
||||
const { code, data } = await batchQueryTaskStatus({ ids: downloadTaskInfos.value.map((v) => v.id) });
|
||||
if (code === 200) {
|
||||
let completeTaskNum = 0;
|
||||
data.forEach((item) => {
|
||||
const { status, file, id } = item;
|
||||
if (status !== 0) {
|
||||
completeTaskNum++;
|
||||
|
||||
const notificationId = downloadTaskInfos.value.find((v) => v.id === id)?.randomId;
|
||||
notificationId && Notification.remove(notificationId);
|
||||
|
||||
if (status === 1) {
|
||||
AMessage.success('批量下载已完成，正在下载文件...');
|
||||
downloadByUrl(file);
|
||||
} else if (status === 2) {
|
||||
const onReDownload = () => {
|
||||
startBatchDownload(id);
|
||||
};
|
||||
showFailExportNotification(
|
||||
`${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件下载失败`,
|
||||
{ onReDownload },
|
||||
);
|
||||
}
|
||||
|
||||
// 结束的任务过滤掉
|
||||
downloadTaskInfos.value = downloadTaskInfos.value.filter((v) => v.id !== id);
|
||||
}
|
||||
});
|
||||
|
||||
// 全部完成了
|
||||
if (completeTaskNum === data.length) {
|
||||
clearQueryTaskTimer();
|
||||
clearSelectedRows();
|
||||
downloadTaskInfos.value = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${name || '-'}”`,
|
||||
});
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedRows.value.map((item) => item.id);
|
||||
const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
|
||||
|
||||
deleteTaskModalRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
|
||||
const onBatchSuccess = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
const clearQueryTaskTimer = () => {
|
||||
if (queryTaskTimer) {
|
||||
clearInterval(queryTaskTimer);
|
||||
queryTaskTimer = null;
|
||||
}
|
||||
};
|
||||
const unloadComp = () => {
|
||||
clearQueryTaskTimer();
|
||||
};
|
||||
onUnmounted(() => {
|
||||
clearQueryTaskTimer;
|
||||
});
|
||||
|
||||
expose({ init, reset, unloadComp });
|
||||
|
||||
return () => (
|
||||
<div class="export-task-wrap">
|
||||
{/* 筛选行 */}
|
||||
<div class="filter-row flex mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">操作人员</span>
|
||||
<Input
|
||||
v-model={query.value.operator_name}
|
||||
class="w-240px"
|
||||
placeholder="请输入操作人员"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">所属模块</span>
|
||||
<Input
|
||||
v-model={query.value.module}
|
||||
class="w-240px"
|
||||
placeholder="请输入所属模块"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 已选提示行 */}
|
||||
{dataSource.value.length > 0 && selectedRows.value.length > 0 && (
|
||||
<div
|
||||
class={[
|
||||
'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
|
||||
selectedRows.value.length > 0 ? ' selected' : '',
|
||||
].join('')}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<Checkbox
|
||||
modelValue={checkedAll.value}
|
||||
indeterminate={indeterminate.value}
|
||||
class="mr-8px"
|
||||
onChange={handleSelectAll}
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{selectedRows.value.length}</span>
|
||||
个文件
|
||||
</span>
|
||||
<span class="operation-btn" onClick={handleBatchDownload}>
|
||||
批量下载
|
||||
</span>
|
||||
<span class="operation-btn red" onClick={handleBatchDelete}>
|
||||
批量删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<IconClose size={16} class="cursor-pointer color-#737478" onClick={clearSelectedRows} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
ref="tableRef"
|
||||
data={dataSource.value}
|
||||
column-resizable
|
||||
row-key="id"
|
||||
row-selection={rowSelection.value}
|
||||
selected-keys={selectedRowKeys.value}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
key={column.dataIndex}
|
||||
data-index={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
min-width={column.minWidth}
|
||||
sortable={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
tooltip
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return record.operator?.name || record.operator?.mobile;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<TableColumn
|
||||
data-index="operation"
|
||||
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
v-slots={{
|
||||
cell: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status !== enumTaskStatus.Exporting && (
|
||||
<Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
|
||||
{record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 分页 */}
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end my-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 删除弹窗 */}
|
||||
<DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -1,86 +0,0 @@
|
||||
.export-task-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
.label {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.normal {
|
||||
background: #ebf7f2;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
&.abnormal {
|
||||
background: #ffe7e4;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
.err-btn {
|
||||
background-color: #f64b31 !important;
|
||||
color: var(--BG-white, #fff);
|
||||
font-family: 'PingFang SC';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.operation-btn {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--Brand-Brand-6, #6d4cfe);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #f64b31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-box {
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
span {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-0 {
|
||||
background: var(--Functional-yellow-1, #fff7e5);
|
||||
span {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
span {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
span {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
export const INITIAL_FORM = {
|
||||
type: 0,
|
||||
operator_name: '',
|
||||
module: '',
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '任务名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '所属模块',
|
||||
dataIndex: 'module',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '共导入',
|
||||
dataIndex: 'total_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '导入成功',
|
||||
dataIndex: 'success_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '导入失败',
|
||||
dataIndex: 'fail_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '导入时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isBatch ? '批量删除导入记录' : '删除导入记录'"
|
||||
width="400px"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认删除 {{ accountName }} 这条记录吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button size="large" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { deleteTask, deleteBatchTasks } from '@/api/all/common';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const emits = defineEmits(['update', 'close', 'batchUpdate']);
|
||||
|
||||
const visible = ref(false);
|
||||
const taskId = ref(null);
|
||||
const accountName = ref('');
|
||||
|
||||
const isBatch = computed(() => Array.isArray(taskId.value));
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
taskId.value = null;
|
||||
accountName.value = '';
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
taskId.value = id;
|
||||
accountName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
|
||||
const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -1,300 +0,0 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { IMPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
// import { showExportNotification } from '@/utils/arcoD';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref({ ...INITIAL_FORM });
|
||||
const deleteTaskModalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
|
||||
const indeterminate = computed(
|
||||
() => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
query.value = { ...INITIAL_FORM };
|
||||
pageInfo.value = { ...DEFAULT_PAGE_INFO };
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { page, page_size } = pageInfo.value;
|
||||
const { code, data } = await getTask({
|
||||
...query.value,
|
||||
page,
|
||||
page_size,
|
||||
});
|
||||
if (code === 200) {
|
||||
dataSource.value = data?.data ?? [];
|
||||
pageInfo.value.total = data?.total;
|
||||
}
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = (record) => {
|
||||
downloadByUrl(record.file);
|
||||
// showExportNotification(`正在下载“${record.name}”，请稍后...`)
|
||||
};
|
||||
const handleBatchDownload = () => {
|
||||
// 批量下载逻辑
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${name || '-'}”`,
|
||||
});
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedRows.value.map((item) => item.id);
|
||||
const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
|
||||
deleteTaskModalRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
|
||||
const onBatchSuccess = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
expose({ init, reset });
|
||||
|
||||
return () => (
|
||||
<div class="import-task-wrap">
|
||||
{/* 筛选行 */}
|
||||
{/* <div class="filter-row flex mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">操作人员</span>
|
||||
<Input
|
||||
v-model={query.value.operator_name}
|
||||
class="w-240px"
|
||||
placeholder="请输入操作人员"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">所属模块</span>
|
||||
<Input
|
||||
v-model={query.value.module}
|
||||
class="w-240px"
|
||||
placeholder="请输入所属模块"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 已选提示行 */}
|
||||
{/* {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
|
||||
<div
|
||||
class={[
|
||||
'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
|
||||
selectedRows.value.length > 0 ? ' selected' : '',
|
||||
].join('')}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<Checkbox
|
||||
modelValue={checkedAll.value}
|
||||
indeterminate={indeterminate.value}
|
||||
class="mr-8px"
|
||||
onChange={handleSelectAll}
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{selectedRows.value.length}</span>
|
||||
个文件
|
||||
</span>
|
||||
<span class="operation-btn" onClick={handleBatchDownload}>
|
||||
批量下载
|
||||
</span>
|
||||
<span class="operation-btn red" onClick={handleBatchDelete}>
|
||||
批量删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
ref="tableRef"
|
||||
data={dataSource.value}
|
||||
column-resizable
|
||||
row-key="id"
|
||||
selected-keys={selectedRowKeys.value}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
key={column.dataIndex}
|
||||
data-index={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
min-width={column.minWidth}
|
||||
sortable={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
tooltip
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<TableColumn
|
||||
data-index="operation"
|
||||
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
v-slots={{
|
||||
cell: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status === enumTaskStatus.Failed && (
|
||||
<Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
|
||||
下载问题表格
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 分页 */}
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end my-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 删除弹窗 */}
|
||||
<DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -1,86 +0,0 @@
|
||||
.import-task-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
.label {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.normal {
|
||||
background: #ebf7f2;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
&.abnormal {
|
||||
background: #ffe7e4;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
.err-btn {
|
||||
background-color: #f64b31 !important;
|
||||
color: var(--BG-white, #fff);
|
||||
font-family: 'PingFang SC';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.operation-btn {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--Brand-Brand-6, #6d4cfe);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #f64b31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-box {
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
span {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-0 {
|
||||
background: var(--Functional-yellow-1, #fff7e5);
|
||||
span {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
span {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
span {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
export enum enumTaskStatus {
|
||||
Exporting = 0, // 导出中
|
||||
Finished = 1, // 已完成
|
||||
Failed = 2, // 导出失败
|
||||
}
|
||||
|
||||
export const EXPORT_TASK_STATUS = [
|
||||
{
|
||||
label: '导出中',
|
||||
value: enumTaskStatus.Exporting,
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: enumTaskStatus.Finished,
|
||||
},
|
||||
{
|
||||
label: '导出失败',
|
||||
value: enumTaskStatus.Failed,
|
||||
},
|
||||
];
|
||||
export const IMPORT_TASK_STATUS = [
|
||||
{
|
||||
label: '导入中',
|
||||
value: enumTaskStatus.Exporting,
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: enumTaskStatus.Finished,
|
||||
},
|
||||
{
|
||||
label: '导入失败',
|
||||
value: enumTaskStatus.Failed,
|
||||
},
|
||||
];
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="任务中心"
|
||||
modal-class="task-center-modal"
|
||||
width="860px"
|
||||
:mask-closable="false"
|
||||
:footer="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<a-tabs :active-key="activeTab" @tab-click="handleTabClick">
|
||||
<a-tab-pane key="0" title="导入"> </a-tab-pane>
|
||||
<a-tab-pane key="1" title="导出"> </a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="content">
|
||||
<component :is="activeTab === '0' ? ImportTask : ExportTask" ref="componentRef" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Notification } from '@arco-design/web-vue';
|
||||
|
||||
import ExportTask from './components/export-task';
|
||||
import ImportTask from './components/import-task';
|
||||
|
||||
const visible = ref(false);
|
||||
const componentRef = ref(null);
|
||||
const activeTab = ref('0');
|
||||
|
||||
let timer = null;
|
||||
|
||||
const handleTabClick = (key) => {
|
||||
activeTab.value = key;
|
||||
nextTick(() => {
|
||||
getData();
|
||||
});
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
componentRef.value?.init();
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
getData();
|
||||
|
||||
timer = setInterval(() => {
|
||||
getData();
|
||||
}, 10000);
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
const onClose = () => {
|
||||
activeTab.value = '0';
|
||||
|
||||
clearTimer();
|
||||
componentRef.value?.unloadComp?.();
|
||||
Notification.clear();
|
||||
visible.value = false;
|
||||
};
|
||||
const clearTimer = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -1,77 +0,0 @@
|
||||
.task-center-modal {
|
||||
.arco-modal-header {
|
||||
border-bottom: none !important;
|
||||
.arco-modal-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
.arco-modal-body {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 650px;
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 12px;
|
||||
color: #211f24;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-tabs {
|
||||
.arco-tabs-nav-top {
|
||||
.arco-tabs-tab {
|
||||
margin: 0 20px;
|
||||
.arco-tabs-tab-title {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.arco-tabs-tab-active {
|
||||
.arco-tabs-tab-title {
|
||||
color: #6D4CFE;
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-tabs-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="navbar-wrap px-24px">
|
||||
<div class="left-wrap flex items-center cursor-pointer" @click="handleUserHome">
|
||||
<img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<MiddleSide v-if="!isAgentRoute" />
|
||||
</div>
|
||||
<RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MiddleSide from './components/middle-side';
|
||||
import RightSide from './components/right-side';
|
||||
|
||||
import { useUserStore } from '@/stores';
|
||||
import { handleUserHome } from '@/utils/user.ts';
|
||||
import router from '@/router';
|
||||
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const isAgentRoute = computed(() => {
|
||||
return route.meta?.isAgentRoute;
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.navbar-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
|
||||
background-size: cover !important;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -998;
|
||||
}
|
||||
|
||||
// background-color: var(--color-bg-2);
|
||||
// border-bottom: 1px solid var(--color-border);
|
||||
.left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.arco-dropdown-option-suffix {
|
||||
display: none;
|
||||
}
|
||||
.enterprises-doption {
|
||||
.arco-dropdown-option-content {
|
||||
padding: 0 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user