feat: 初始化下载中心弹窗
This commit is contained in:
rd
@ -0,0 +1,38 @@
|
|||||||
|
export const INITIAL_FORM = {
|
||||||
|
search: '',
|
||||||
|
module: '',
|
||||||
|
column: undefined,
|
||||||
|
order: undefined,
|
||||||
|
};
|
||||||
|
export const INITIAL_PAGE_INFO = {
|
||||||
|
page: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TABLE_COLUMNS = [
|
||||||
|
{
|
||||||
|
title: '文件名称',
|
||||||
|
dataIndex: 'file_name',
|
||||||
|
width: 180,
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属模块',
|
||||||
|
dataIndex: 'module',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '下载时间',
|
||||||
|
dataIndex: 'time',
|
||||||
|
width: 180,
|
||||||
|
sortable: {
|
||||||
|
sortDirections: ['ascend', 'descend'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作人员',
|
||||||
|
dataIndex: 'name',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<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 class="cancel-btn" size="large" @click="onClose">取消</a-button>
|
||||||
|
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete">确定</a-button>
|
||||||
|
</template>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
|
||||||
|
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||||
|
|
||||||
|
const emits = defineEmits(['update', 'close', 'batchUpdate']);
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
const accountId = ref(null);
|
||||||
|
const accountName = ref('');
|
||||||
|
|
||||||
|
const isBatch = computed(() => Array.isArray(accountId.value));
|
||||||
|
|
||||||
|
function onClose() {
|
||||||
|
visible.value = false;
|
||||||
|
accountId.value = null;
|
||||||
|
accountName.value = '';
|
||||||
|
emits('close');
|
||||||
|
}
|
||||||
|
|
||||||
|
const open = (record) => {
|
||||||
|
const { id = null, name = '' } = record;
|
||||||
|
accountId.value = id;
|
||||||
|
accountName.value = name;
|
||||||
|
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function onDelete() {
|
||||||
|
const _fn = isBatch.value ? batchDeleteMediaAccounts : deleteMediaAccount;
|
||||||
|
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
|
||||||
|
const { code } = await _fn(_params);
|
||||||
|
if (code === 200) {
|
||||||
|
AMessage.success('删除成功');
|
||||||
|
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open });
|
||||||
|
</script>
|
||||||
@ -0,0 +1,213 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
title="下载中心"
|
||||||
|
modal-class="download-center-modal"
|
||||||
|
width="780px"
|
||||||
|
:mask-closable="false"
|
||||||
|
:footer="false"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<div class="filter-row flex mb-16px">
|
||||||
|
<div class="filter-row-item flex items-center">
|
||||||
|
<span class="label">操作人员</span>
|
||||||
|
<a-input
|
||||||
|
v-model="query.search"
|
||||||
|
class="w-240px"
|
||||||
|
placeholder="请搜索..."
|
||||||
|
size="medium"
|
||||||
|
allow-clear
|
||||||
|
@change="handleSearch"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</div>
|
||||||
|
<div class="filter-row-item flex items-center">
|
||||||
|
<span class="label">所属模块</span>
|
||||||
|
<a-select v-model="query.module" size="medium" placeholder="全部" allow-clear @change="handleChange">
|
||||||
|
<a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
ref="tableRef"
|
||||||
|
:data="dataSource"
|
||||||
|
column-resizable
|
||||||
|
:row-selection="{
|
||||||
|
type: 'checkbox',
|
||||||
|
showCheckedAll: true,
|
||||||
|
width: 48,
|
||||||
|
}"
|
||||||
|
:selected-keys="selectedItems"
|
||||||
|
:pagination="false"
|
||||||
|
:scroll="{ x: '100%' }"
|
||||||
|
class="file-table w-100% h-400px"
|
||||||
|
bordered
|
||||||
|
@sorter-change="handleSorterChange"
|
||||||
|
@select="handleSelect"
|
||||||
|
@select-all="handleSelectAll"
|
||||||
|
>
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
|
<template #columns>
|
||||||
|
<a-table-column
|
||||||
|
v-for="column in TABLE_COLUMNS"
|
||||||
|
: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
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||||
|
<span class="cts mr-4px">{{ column.title }}</span>
|
||||||
|
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||||
|
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||||
|
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
|
||||||
|
{{ exactFormatTime(record.time) }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else #cell="{ record }">
|
||||||
|
{{ formatTableField(column, record, true) }}
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
|
||||||
|
<template #cell="{ record }">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="openDelete(record)" />
|
||||||
|
<a-button type="outline" size="small" class="search-btn" @click="handleDownload(record)">下载</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
<div v-if="pageInfo.total > 0" class="flex justify-end">
|
||||||
|
<a-pagination
|
||||||
|
:total="pageInfo.total"
|
||||||
|
size="mini"
|
||||||
|
show-total
|
||||||
|
show-jumper
|
||||||
|
show-page-size
|
||||||
|
:current="pageInfo.page"
|
||||||
|
:page-size="pageInfo.pageSize"
|
||||||
|
@change="onPageChange"
|
||||||
|
@page-size-change="onPageSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { fetchAccountGroups } from '@/api/all/propertyMarketing';
|
||||||
|
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
|
||||||
|
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
|
||||||
|
|
||||||
|
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
const dataSource = ref([]);
|
||||||
|
const query = ref(cloneDeep(INITIAL_FORM));
|
||||||
|
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
|
||||||
|
const selectedItems = ref([]);
|
||||||
|
const groups = ref([]);
|
||||||
|
|
||||||
|
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
|
||||||
|
const indeterminate = computed(
|
||||||
|
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
|
||||||
|
);
|
||||||
|
|
||||||
|
const open = () => {
|
||||||
|
getGroups();
|
||||||
|
getData();
|
||||||
|
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
const onClose = () => {
|
||||||
|
query.value = cloneDeep(INITIAL_FORM);
|
||||||
|
pageInfo.value = cloneDeep(INITIAL_FORM);
|
||||||
|
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
console.log('getData');
|
||||||
|
dataSource.value = [
|
||||||
|
{
|
||||||
|
file_name: '投放指南20150701',
|
||||||
|
module: '营销资产平台',
|
||||||
|
time: 1752130053,
|
||||||
|
name: '张三三',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
const reload = () => {
|
||||||
|
pageInfo.value.page = 1;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSorterChange = (column, order) => {
|
||||||
|
query.value.column = column;
|
||||||
|
query.value.order = order === 'ascend' ? 'asc' : 'desc';
|
||||||
|
reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
console.log('handleSearch');
|
||||||
|
};
|
||||||
|
const openDelete = () => {
|
||||||
|
console.log('openDelete');
|
||||||
|
};
|
||||||
|
const getGroups = async () => {
|
||||||
|
const { code, data } = await fetchAccountGroups();
|
||||||
|
if (code === 200) {
|
||||||
|
groups.value = data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleSelect = (selectedRowKeys) => {
|
||||||
|
selectedItems.value = selectedRowKeys;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectAll = (checked) => {
|
||||||
|
if (checked) {
|
||||||
|
selectedItems.value = dataSource.map((item) => item.id);
|
||||||
|
} else {
|
||||||
|
selectedItems.value = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = () => {
|
||||||
|
console.log('handleDownload');
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPageChange = (current) => {
|
||||||
|
pageInfo.value.page = current;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
const onPageSizeChange = (pageSize) => {
|
||||||
|
pageInfo.value.pageSize = pageSize;
|
||||||
|
reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({ open });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './style.scss';
|
||||||
|
</style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
.download-center-modal {
|
||||||
|
.arco-input-wrapper,
|
||||||
|
.arco-select-view-single,
|
||||||
|
.arco-select-view-multiple {
|
||||||
|
border-radius: 4px;
|
||||||
|
border-color: #d7d7d9;
|
||||||
|
background-color: #fff;
|
||||||
|
&:focus-within,
|
||||||
|
&.arco-input-focus,
|
||||||
|
&.arco-textarea-focus {
|
||||||
|
background-color: var(--color-bg-2);
|
||||||
|
border-color: rgb(var(--primary-6));
|
||||||
|
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arco-modal-body {
|
||||||
|
padding: 24px 20px 40px;
|
||||||
|
.filter-row {
|
||||||
|
.filter-row-item {
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
margin-right: 12px;
|
||||||
|
color: #211f24;
|
||||||
|
font-family: 'PuHuiTi-Regular';
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
flex-shrink: 0;
|
||||||
|
line-height: 22px; /* 157.143% */
|
||||||
|
}
|
||||||
|
:deep(.arco-space-item) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.file-table {
|
||||||
|
.cts {
|
||||||
|
color: var(--Text-1, #211f24);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
83
src/components/_base/navbar/components/navbar-menu/index.vue
Normal file
83
src/components/_base/navbar/components/navbar-menu/index.vue
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div class="navbar-menu h-100%">
|
||||||
|
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
||||||
|
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
||||||
|
<template v-if="item.children">
|
||||||
|
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||||
|
<a-button>
|
||||||
|
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||||
|
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||||
|
</a-button>
|
||||||
|
<template #content>
|
||||||
|
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDropdownClick(child)">
|
||||||
|
<span class="menu-item-text"> {{ child.name }}</span>
|
||||||
|
</a-doption>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
|
||||||
|
<span class="menu-item-text"> {{ item.name }}</span>
|
||||||
|
</a-menu-item>
|
||||||
|
</template>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||||
|
import router from '@/router';
|
||||||
|
|
||||||
|
const sidebarStore = useSidebarStore();
|
||||||
|
|
||||||
|
const selectedKey = computed(() => {
|
||||||
|
return [String(sidebarStore.activeMenuId)];
|
||||||
|
});
|
||||||
|
const menuList = computed(() => {
|
||||||
|
return sidebarStore.menuList;
|
||||||
|
});
|
||||||
|
const handleDropdownClick = (item) => {
|
||||||
|
router.push({ name: item.routeName });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import './style.scss';
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.layout-menu-item-dropdown {
|
||||||
|
.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: 'PuHuiTi-Regular';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px; /* 137.5% */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(.arco-dropdown-option-disabled):hover {
|
||||||
|
background-color: transparent;
|
||||||
|
.arco-dropdown-option-content {
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--BG-200, #f2f3f5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
.navbar-menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 40px;
|
||||||
|
.menu-item-text {
|
||||||
|
color: var(--Text-2, #3c4043);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
:deep(.arco-menu) {
|
||||||
|
height: 100%;
|
||||||
|
.arco-menu-inner {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.arco-menu-item {
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
&.arco-menu-selected {
|
||||||
|
.menu-item-text,
|
||||||
|
.arco-menu-selected-label {
|
||||||
|
color: #6d4cfe;
|
||||||
|
}
|
||||||
|
.arco-menu-selected-label {
|
||||||
|
background: var(--Brand-Brand-6, #6d4cfe);
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arco-icon-down {
|
||||||
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.arco-dropdown-open .arco-icon-down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
132
src/components/_base/navbar/components/right-side/index.vue
Normal file
132
src/components/_base/navbar/components/right-side/index.vue
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div class="right-wrap">
|
||||||
|
<!-- 下载中心 -->
|
||||||
|
<icon-download
|
||||||
|
size="16"
|
||||||
|
class="cursor-pointer color-#737478 hover:color-#6D4CFE mr-12px"
|
||||||
|
@click="openDownloadCenter"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 头像 -->
|
||||||
|
<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 v-for="item in RIGHT_DROPDOWN_MENU" :key="item.label">
|
||||||
|
<a-space class="flex justify-between w-100%" @click="item.onClick">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img :src="item.icon" class="w-16px h-16px mr-8px" />
|
||||||
|
<span>{{ item.label }}</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 ExitAccountModal from '@/components/_base/exit-account-modal';
|
||||||
|
import DownloadCenterModal from '../download-center-modal';
|
||||||
|
|
||||||
|
import icon1 from '@/assets/option.svg';
|
||||||
|
import icon2 from '@/assets/exit.svg';
|
||||||
|
import icon3 from '@/assets/change.svg';
|
||||||
|
|
||||||
|
const RIGHT_DROPDOWN_MENU = [
|
||||||
|
{
|
||||||
|
label: '管理中心',
|
||||||
|
icon: icon1,
|
||||||
|
onClick: () => {
|
||||||
|
router.push('/management/person');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: '切换企业账号',
|
||||||
|
// icon: icon3,
|
||||||
|
// onClick: () => {
|
||||||
|
// console.log('切换企业账号');
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: '退出登录',
|
||||||
|
icon: icon2,
|
||||||
|
onClick: () => {
|
||||||
|
exitAccountModalRef.value?.open();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const exitAccountModalRef = ref(null);
|
||||||
|
const downloadCenterModalRef = ref(null);
|
||||||
|
|
||||||
|
const openDownloadCenter = () => {
|
||||||
|
downloadCenterModalRef.value.open();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.right-wrap {
|
||||||
|
display: flex;
|
||||||
|
padding-right: 20px;
|
||||||
|
list-style: none;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.layout-avatar-dropdown {
|
||||||
|
.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: 'PuHuiTi-Regular';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px; /* 137.5% */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(.arco-dropdown-option-disabled):hover {
|
||||||
|
background-color: transparent;
|
||||||
|
.arco-dropdown-option-content {
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--BG-200, #f2f3f5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.layout-avatar-dropdown {
|
||||||
|
width: 200px;
|
||||||
|
.arco-dropdown {
|
||||||
|
padding: 12px 4px;
|
||||||
|
.arco-dropdown-option {
|
||||||
|
padding: 0 !important;
|
||||||
|
&-content {
|
||||||
|
padding: 0 12px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,257 +1,34 @@
|
|||||||
<script setup>
|
|
||||||
import { useAppStore } from '@/stores';
|
|
||||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
|
||||||
// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
|
|
||||||
// import { handleUserLogout } from '@/utils/user';
|
|
||||||
// import { fetchLogOut } from '@/api/all/login';
|
|
||||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
|
||||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
|
||||||
import router from '@/router';
|
|
||||||
// import { useRoute } from 'vue-router';
|
|
||||||
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
|
|
||||||
// import { appRoutes } from '@/router/routes';
|
|
||||||
// import { MENU_LIST } from './constants';
|
|
||||||
|
|
||||||
const sidebarStore = useSidebarStore();
|
|
||||||
// const enterpriseStore = useEnterpriseStore();
|
|
||||||
// const route = useRoute();
|
|
||||||
const exitAccountModalRef = ref(null);
|
|
||||||
// const selectedKey = ref([]);
|
|
||||||
|
|
||||||
const selectedKey = computed(() => {
|
|
||||||
return [String(sidebarStore.activeMenuId)];
|
|
||||||
});
|
|
||||||
const menuList = computed(() => {
|
|
||||||
return sidebarStore.menuList;
|
|
||||||
});
|
|
||||||
|
|
||||||
const clickExit = async () => {
|
|
||||||
exitAccountModalRef.value?.open();
|
|
||||||
};
|
|
||||||
|
|
||||||
// const appStore = useAppStore();
|
|
||||||
|
|
||||||
const setServerMenu = () => {
|
|
||||||
router.push('/management/person');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDopdownClick = (item) => {
|
|
||||||
router.push({ name: item.routeName });
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="navbar">
|
<div class="navbar-wrap">
|
||||||
<div class="left-side">
|
<div class="left-wrap">
|
||||||
<a-space class="cursor-pointer" @click="router.push('/')">
|
<a-space class="cursor-pointer" @click="router.push('/')">
|
||||||
<img src="@/assets/logo.svg" alt="" />
|
<img src="@/assets/logo.svg" alt="" />
|
||||||
</a-space>
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
<div class="center-side">
|
<div class="flex-1">
|
||||||
<div class="menu-demo h-100%">
|
<NavbarMenu />
|
||||||
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
|
||||||
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
|
||||||
<template v-if="item.children">
|
|
||||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
|
||||||
<a-button>
|
|
||||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
|
||||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
|
||||||
</a-button>
|
|
||||||
<template #content>
|
|
||||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
|
|
||||||
<span class="menu-item-text"> {{ child.name }}</span>
|
|
||||||
</a-doption>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
|
|
||||||
<span class="menu-item-text"> {{ item.name }}</span>
|
|
||||||
</a-menu-item>
|
|
||||||
</template>
|
|
||||||
</a-menu-item>
|
|
||||||
</a-menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="right-side">
|
<RightSide />
|
||||||
<li>
|
|
||||||
<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="@/assets/option.svg" class="w-16px h-16px mr-8px" />
|
|
||||||
<span>管理中心</span>
|
|
||||||
</div>
|
|
||||||
<icon-right size="12" />
|
|
||||||
</a-space>
|
|
||||||
</a-doption>
|
|
||||||
<!-- <a-doption>
|
|
||||||
<a-space class="flex justify-between w-100%">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
|
|
||||||
<span>切换企业账号</span>
|
|
||||||
</div>
|
|
||||||
<icon-right size="12" />
|
|
||||||
</a-space>
|
|
||||||
</a-doption> -->
|
|
||||||
<a-doption>
|
|
||||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
|
|
||||||
<span>退出登录</span>
|
|
||||||
</div>
|
|
||||||
<icon-right size="12" />
|
|
||||||
</a-space>
|
|
||||||
</a-doption>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ExitAccountModal ref="exitAccountModalRef" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import NavbarMenu from './components/navbar-menu';
|
||||||
|
import RightSide from './components/right-side';
|
||||||
|
|
||||||
|
import router from '@/router';
|
||||||
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.navbar {
|
.navbar-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--color-bg-2);
|
background-color: var(--color-bg-2);
|
||||||
border-bottom: 1px solid var(--color-border);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
.left-wrap {
|
||||||
.left-side {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
.center-side {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
margin-left: 40px;
|
|
||||||
.menu-item-text {
|
|
||||||
color: var(--Text-2, #3c4043);
|
|
||||||
font-family: 'PuHuiTi-Medium';
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
:deep(.arco-menu) {
|
|
||||||
height: 100%;
|
|
||||||
.arco-menu-inner {
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
.arco-menu-item {
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
&.arco-menu-selected {
|
|
||||||
.menu-item-text,
|
|
||||||
.arco-menu-selected-label {
|
|
||||||
color: #6d4cfe;
|
|
||||||
}
|
|
||||||
.arco-menu-selected-label {
|
|
||||||
background: var(--Brand-Brand-6, #6d4cfe);
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 50%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -8px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-icon-down {
|
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.arco-dropdown-open .arco-icon-down {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cneter-tip {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--color-text-1);
|
|
||||||
}
|
|
||||||
.menu-demo {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.right-side {
|
|
||||||
display: flex;
|
|
||||||
padding-right: 20px;
|
|
||||||
list-style: none;
|
|
||||||
li {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 10px;
|
padding-left: 20px;
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: var(--color-text-1);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.nav-btn {
|
|
||||||
border-color: rgb(var(--gray-2));
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.layout-menu-item-dropdown,
|
|
||||||
.layout-avatar-dropdown {
|
|
||||||
.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: 'PuHuiTi-Regular';
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px; /* 137.5% */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:not(.arco-dropdown-option-disabled):hover {
|
|
||||||
background-color: transparent;
|
|
||||||
.arco-dropdown-option-content {
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--BG-200, #f2f3f5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.layout-avatar-dropdown {
|
|
||||||
width: 200px;
|
|
||||||
.arco-dropdown {
|
|
||||||
padding: 12px 4px;
|
|
||||||
.arco-dropdown-option {
|
|
||||||
padding: 0 !important;
|
|
||||||
&-content {
|
|
||||||
padding: 0 12px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -25,6 +25,7 @@
|
|||||||
&.arco-checkbox-indeterminate {
|
&.arco-checkbox-indeterminate {
|
||||||
.arco-checkbox-icon {
|
.arco-checkbox-icon {
|
||||||
background-color: #6D4CFE !important;
|
background-color: #6D4CFE !important;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user