121 lines
3.8 KiB
Vue
121 lines
3.8 KiB
Vue
<template>
|
|
<div class="product-tab">
|
|
<t-notice-bar
|
|
theme="error"
|
|
visible
|
|
content="产品库设计方案及实现未完成，套餐功能仍在测试中，可以试用反馈可改进问题，但不要实际落到业务使用。产品库实现后套餐模块会联动更新，会清除测试的套餐数据"
|
|
/>
|
|
<t-cell-group
|
|
v-for="(group, index) in visibleMenuGroupList"
|
|
:key="group.title"
|
|
class="menu-group"
|
|
:title="group.title"
|
|
theme="card"
|
|
v-entrance-transition="index * 70"
|
|
>
|
|
<t-cell
|
|
v-for="item in group.items"
|
|
:key="item.path"
|
|
class="menu-item"
|
|
:title="item.title"
|
|
arrow
|
|
hover
|
|
@click="go(item.path)"
|
|
>
|
|
<template #leftIcon>
|
|
<span class="icon-wrap" :class="`tone-${index}`"><t-icon :name="item.icon" size="1.35rem" /></span>
|
|
</template>
|
|
</t-cell>
|
|
</t-cell-group>
|
|
<div v-if="!visibleMenuGroupList.length" class="empty" v-text="'当前账号暂无产品管理权限'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useUserStore } from "timi-web-api";
|
|
import { permissionCodes } from "@/utils/permission";
|
|
|
|
type MenuItem = {
|
|
icon: string;
|
|
path: string;
|
|
title: string;
|
|
visible: boolean;
|
|
};
|
|
|
|
type MenuGroup = {
|
|
items: MenuItem[];
|
|
title: string;
|
|
};
|
|
|
|
defineOptions({
|
|
name: "ProductTab"
|
|
});
|
|
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
|
|
const menuGroupList = computed<MenuGroup[]>(() => [
|
|
{
|
|
title: "产品管理",
|
|
items: [
|
|
{
|
|
icon: "catalog",
|
|
path: "/management/product-categories",
|
|
title: "产品分类",
|
|
visible: userStore.hasPermissions(permissionCodes.productCategory.read)
|
|
},
|
|
{
|
|
icon: "layers",
|
|
path: "/management/products",
|
|
title: "产品库",
|
|
visible: userStore.hasPermissions(permissionCodes.product.read)
|
|
},
|
|
{
|
|
icon: "wallet",
|
|
path: "/management/product-stocks",
|
|
title: "库存与库存流水",
|
|
visible: userStore.hasPermissions(permissionCodes.productStock.read)
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "交易管理",
|
|
items: [
|
|
{ icon: "order", path: "/management/sales-orders", title: "销售订单", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
|
|
{ icon: "wallet", path: "/management/sales-orders?view=pending-receive", title: "待收款", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
|
|
{ icon: "discount", path: "/management/sales-orders?view=pending-refund", title: "待退款", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
|
|
{ icon: "wallet", path: "/management/fund-records", title: "资金流水", visible: userStore.hasPermissions(permissionCodes.fundRecord.read) },
|
|
{ icon: "task", path: "/management/order-fulfillments", title: "统一履约", visible: userStore.hasPermissions(permissionCodes.orderFulfillment.read) }
|
|
]
|
|
},
|
|
{
|
|
title: "套餐管理",
|
|
items: [
|
|
{ icon: "layers", path: "/management/package-configs", title: "套餐配置", visible: userStore.hasPermissions(permissionCodes.packageConfig.read) },
|
|
{ icon: "calendar", path: "/management/registration-events", title: "套餐购买事件绑定", visible: userStore.hasPermissions([permissionCodes.event.read, permissionCodes.packageConfig.read], "and") },
|
|
{ icon: "usergroup", path: "/management/customer-packages", title: "客户套餐", visible: userStore.hasPermissions(permissionCodes.customerPackage.read) }
|
|
]
|
|
}
|
|
]);
|
|
|
|
const visibleMenuGroupList = computed<MenuGroup[]>(() => menuGroupList.value
|
|
.map(group => ({
|
|
...group,
|
|
items: group.items.filter(item => item.visible)
|
|
}))
|
|
.filter(group => group.items.length));
|
|
|
|
async function go(path: string): Promise<void> {
|
|
await router.push(path);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.product-tab {
|
|
gap: .5rem;
|
|
display: flex;
|
|
padding: calc(var(--app-nav-height)) 0 6rem;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|