add NavBarActionMenu.vue
This commit is contained in:
Timi
@@ -72,28 +72,13 @@
|
||||
<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" />
|
||||
<div v-if="pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
<div class="bottom-actions">
|
||||
<t-button
|
||||
v-can="permissionCodes.customer.export"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
class="export bg-white"
|
||||
:loading="isExporting"
|
||||
:disabled="isExporting"
|
||||
@click="doExport"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="download" />
|
||||
</template>
|
||||
导出
|
||||
</t-button>
|
||||
</div>
|
||||
<tag-selector
|
||||
v-model="selectedTagIdList"
|
||||
v-model:visible="tagSelectorVisible"
|
||||
@change="handleTagFilterChanged"
|
||||
/>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -105,6 +90,7 @@ import TagSelector from "@/components/TagSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { NavBarAction } from "@/types/NavBarAction";
|
||||
import type { Tag } from "@/types/Tag";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { corePermissionCodes, gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
@@ -121,6 +107,32 @@ const isRefreshing = ref(false);
|
||||
const isExporting = ref(false);
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
|
||||
const canCreateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.create));
|
||||
const canExportCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.export));
|
||||
const canShowActionMenu = computed(() => canCreateCustomer.value || canExportCustomer.value);
|
||||
|
||||
const actionList = computed<NavBarAction[]>(() => {
|
||||
const list: NavBarAction[] = [];
|
||||
if (canCreateCustomer.value) {
|
||||
list.push({
|
||||
action: toCreate,
|
||||
theme: "primary",
|
||||
icon: "add",
|
||||
key: "create",
|
||||
text: "新增客户"
|
||||
});
|
||||
}
|
||||
if (canExportCustomer.value) {
|
||||
list.push({
|
||||
action: doExport,
|
||||
icon: "download",
|
||||
key: "export",
|
||||
loading: isExporting.value,
|
||||
text: "导出 Excel"
|
||||
});
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
// ---------- 标签筛选 ----------
|
||||
|
||||
@@ -199,9 +211,7 @@ onMounted(loadData);
|
||||
|
||||
onMounted(() => {
|
||||
navBarStore.clearRight();
|
||||
if (userStore.hasPermissions(permissionCodes.customer.create)) {
|
||||
navBarStore.setRightText("添加", "var(--td-brand-color)", toCreate);
|
||||
}
|
||||
navBarStore.setCustomRightVisible(canShowActionMenu.value);
|
||||
});
|
||||
|
||||
watch(keyword, async () => {
|
||||
@@ -244,7 +254,7 @@ async function doExport(): Promise<void> {
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-list {
|
||||
padding: var(--app-nav-height) 0 5.5rem 0;
|
||||
padding: var(--app-nav-height) 0 1rem 0;
|
||||
|
||||
.filter {
|
||||
gap: .5rem;
|
||||
@@ -288,7 +298,7 @@ async function doExport(): Promise<void> {
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
padding: 1rem 0 4rem 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
.items {
|
||||
|
||||
@@ -318,19 +328,6 @@ async function doExport(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
gap: .75rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
|
||||
.export {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
|
||||
+23
-76
@@ -45,50 +45,13 @@
|
||||
<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<teleport v-if="navBarStore.customRightVisible" to="#app-nav-right">
|
||||
<div v-if="canCreateUser" class="user-actions">
|
||||
<t-popover
|
||||
v-model:visible="actionVisible"
|
||||
placement="bottom-right"
|
||||
theme="light"
|
||||
>
|
||||
<t-button class="trigger" theme="primary" variant="text">
|
||||
<template #icon>
|
||||
<t-icon name="add" />
|
||||
</template>
|
||||
<span>新增</span>
|
||||
</t-button>
|
||||
<template #content>
|
||||
<div class="menu">
|
||||
<t-button
|
||||
v-can="permissionCodes.user.create"
|
||||
class="menu-item"
|
||||
variant="text"
|
||||
type="button"
|
||||
@click="toCreate"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="add" />
|
||||
</template>
|
||||
新增用户
|
||||
</t-button>
|
||||
<t-button
|
||||
v-can="permissionCodes.user.create"
|
||||
class="menu-item"
|
||||
variant="text"
|
||||
type="button"
|
||||
@click="openInvite"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="qrcode" />
|
||||
</template>
|
||||
邀请注册
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-popover>
|
||||
</div>
|
||||
</teleport>
|
||||
<nav-bar-action-menu
|
||||
v-if="canCreateUser"
|
||||
:actions="actionList"
|
||||
trigger-icon="add"
|
||||
trigger-label="新增"
|
||||
trigger-text="新增"
|
||||
/>
|
||||
<user-invite v-model:visible="inviteVisible" :store-id="currentStoreStore.currentStoreId || undefined" />
|
||||
</template>
|
||||
|
||||
@@ -102,6 +65,7 @@ import type { ManagedUser } from "@/types/ManagedUser";
|
||||
import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
|
||||
import { buildFallbackAvatar } from "@/utils/avatar";
|
||||
import { getManagedUserRoleList, getRoleDisplayName } from "@/utils/role";
|
||||
import type { NavBarAction } from "@/types/NavBarAction";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import UserInvite from "@/pages/user/component/UserInvite.vue";
|
||||
|
||||
@@ -114,12 +78,26 @@ const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const permissionStore = usePermissionSettingsStore();
|
||||
const actionVisible = ref(false);
|
||||
const inviteVisible = ref(false);
|
||||
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canCreateUser = computed(() => userStore.hasPermissions(permissionCodes.user.create));
|
||||
|
||||
const actionList: NavBarAction[] = [
|
||||
{
|
||||
action: toCreate,
|
||||
icon: "add",
|
||||
key: "create",
|
||||
text: "新增用户"
|
||||
},
|
||||
{
|
||||
action: openInvite,
|
||||
icon: "qrcode",
|
||||
key: "invite",
|
||||
text: "邀请注册"
|
||||
}
|
||||
];
|
||||
|
||||
const userListOptions = computed(() => ({ storeId: currentStoreStore.currentStoreId }));
|
||||
|
||||
// ---------- 列表数据 ----------
|
||||
@@ -226,7 +204,6 @@ async function fetch(): Promise<void> {
|
||||
// ---------- 导航 ----------
|
||||
|
||||
async function toCreate(): Promise<void> {
|
||||
actionVisible.value = false;
|
||||
await router.push({
|
||||
path: "/management/users/create",
|
||||
query: currentStoreStore.currentStoreId ? { storeId: currentStoreStore.currentStoreId } : undefined
|
||||
@@ -234,7 +211,6 @@ async function toCreate(): Promise<void> {
|
||||
}
|
||||
|
||||
function openInvite(): void {
|
||||
actionVisible.value = false;
|
||||
inviteVisible.value = true;
|
||||
}
|
||||
|
||||
@@ -290,35 +266,6 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
}
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
--td-popover-padding: 0 .5rem;
|
||||
|
||||
:deep(.t-popover__content) {
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
gap: .25rem;
|
||||
min-width: 8rem;
|
||||
display: grid;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
--td-button-medium-height: 32px;
|
||||
--td-button-medium-padding-horizontal: 10px;
|
||||
|
||||
gap: .25rem;
|
||||
width: 100%;
|
||||
font-weight: unset;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.user-list {
|
||||
.item {
|
||||
|
||||
Reference in New Issue
Block a user