20260716173254
This commit is contained in:
oneao committed
1 parent
704dda07b5
commit
5cd4e1e1d2
46 files changed
+3569
-528
No files matched your search
@@ -1,7 +1,15 @@
|
||||
<script setup>
|
||||
const themeConfig = {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-app>
|
||||
<div class="theme-root">
|
||||
<router-view />
|
||||
</div>
|
||||
</a-app>
|
||||
<a-config-provider :theme="themeConfig">
|
||||
<a-app>
|
||||
<div class="theme-root">
|
||||
<router-view />
|
||||
</div>
|
||||
</a-app>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
@@ -0,0 +1,134 @@
|
||||
export const mockRecords = [
|
||||
{
|
||||
id: "FY-2026-0001",
|
||||
name: "华东区域运费结算",
|
||||
state: "草稿",
|
||||
customer: "华东客户中心",
|
||||
businessType: "海运",
|
||||
owner: "张三",
|
||||
amount: "4,960.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-16 09:20",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0002",
|
||||
name: "华南客户月度账单",
|
||||
state: "处理中",
|
||||
customer: "华南供应链有限公司",
|
||||
businessType: "空运",
|
||||
owner: "李四",
|
||||
amount: "6,240.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-16 08:45",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0003",
|
||||
name: "北方港口代理费用",
|
||||
state: "已完成",
|
||||
customer: "北方港口服务公司",
|
||||
businessType: "陆运",
|
||||
owner: "王五",
|
||||
amount: "7,520.00",
|
||||
currency: "USD",
|
||||
updated_at: "2026-07-15 17:32",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0004",
|
||||
name: "国际空运服务费",
|
||||
state: "处理中",
|
||||
customer: "国际物流有限公司",
|
||||
businessType: "空运",
|
||||
owner: "张三",
|
||||
amount: "8,800.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-15 16:10",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0005",
|
||||
name: "出口报关服务费用",
|
||||
state: "已完成",
|
||||
customer: "远洋贸易有限公司",
|
||||
businessType: "海运",
|
||||
owner: "李四",
|
||||
amount: "10,080.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-15 14:56",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0006",
|
||||
name: "华中干线运输费用",
|
||||
state: "草稿",
|
||||
customer: "华中运输服务公司",
|
||||
businessType: "陆运",
|
||||
owner: "王五",
|
||||
amount: "11,360.00",
|
||||
currency: "USD",
|
||||
updated_at: "2026-07-15 11:24",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0007",
|
||||
name: "仓储增值服务结算",
|
||||
state: "已取消",
|
||||
customer: "城市仓储有限公司",
|
||||
businessType: "铁路",
|
||||
owner: "张三",
|
||||
amount: "12,640.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-14 18:05",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0008",
|
||||
name: "跨境电商物流账单",
|
||||
state: "已完成",
|
||||
customer: "跨境电商有限公司",
|
||||
businessType: "空运",
|
||||
owner: "李四",
|
||||
amount: "13,920.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-14 15:40",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0009",
|
||||
name: "西南区域配送费用",
|
||||
state: "处理中",
|
||||
customer: "西南配送服务中心",
|
||||
businessType: "陆运",
|
||||
owner: "王五",
|
||||
amount: "15,200.00",
|
||||
currency: "USD",
|
||||
updated_at: "2026-07-14 13:18",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0010",
|
||||
name: "危险品运输服务费",
|
||||
state: "草稿",
|
||||
customer: "特种运输有限公司",
|
||||
businessType: "海运",
|
||||
owner: "张三",
|
||||
amount: "16,480.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-14 10:02",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0011",
|
||||
name: "铁路联运代理费用",
|
||||
state: "已完成",
|
||||
customer: "铁路联运服务公司",
|
||||
businessType: "铁路",
|
||||
owner: "李四",
|
||||
amount: "17,760.00",
|
||||
currency: "CNY",
|
||||
updated_at: "2026-07-13 16:27",
|
||||
},
|
||||
{
|
||||
id: "FY-2026-0012",
|
||||
name: "客户临时加急费用",
|
||||
state: "已取消",
|
||||
customer: "重点客户服务中心",
|
||||
businessType: "空运",
|
||||
owner: "王五",
|
||||
amount: "19,040.00",
|
||||
currency: "USD",
|
||||
updated_at: "2026-07-13 09:51",
|
||||
},
|
||||
];
|
||||
@@ -1,431 +1,54 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
BarChartOutlined,
|
||||
BellOutlined,
|
||||
DollarOutlined,
|
||||
DownOutlined,
|
||||
FileTextOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
SettingOutlined,
|
||||
TranslationOutlined,
|
||||
UserOutlined,
|
||||
} from "@antdv-next/icons";
|
||||
import { useAppStore } from "../stores/app";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const profileOpen = ref(false);
|
||||
const logoutOpen = ref(false);
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: "/dashboard",
|
||||
icon: AppstoreOutlined,
|
||||
label: "工作台",
|
||||
},
|
||||
{
|
||||
key: "business",
|
||||
icon: FileTextOutlined,
|
||||
label: "业务管理",
|
||||
children: [{ key: "/business/orders", label: "业务单据" }],
|
||||
},
|
||||
{
|
||||
key: "fees",
|
||||
icon: DollarOutlined,
|
||||
label: "费用管理",
|
||||
children: [{ key: "/fees/receivable", label: "应收费用" }],
|
||||
},
|
||||
{
|
||||
key: "reports",
|
||||
icon: BarChartOutlined,
|
||||
label: "报表中心",
|
||||
children: [{ key: "/reports/operations", label: "运营报表" }],
|
||||
},
|
||||
{
|
||||
key: "system",
|
||||
icon: SettingOutlined,
|
||||
label: "系统设置",
|
||||
children: [{ key: "/system/users", label: "用户管理" }],
|
||||
},
|
||||
];
|
||||
|
||||
const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
|
||||
const activeTab = computed(() => route.path);
|
||||
const tabItems = computed(() => appStore.visitedTabs);
|
||||
const languageMenu = computed(() => ({
|
||||
items: [
|
||||
{ key: "zh-CN", label: "简体中文" },
|
||||
{ key: "en", label: "English" },
|
||||
],
|
||||
onClick: ({ key }) => appStore.setLocale(key),
|
||||
selectable: true,
|
||||
selectedKeys: [appStore.locale],
|
||||
}));
|
||||
const userMenu = {
|
||||
items: [
|
||||
{ key: "profile", icon: UserOutlined, label: "个人资料" },
|
||||
{ key: "settings", icon: SettingOutlined, label: "账户设置" },
|
||||
{ type: "divider" },
|
||||
{ key: "logout", icon: LogoutOutlined, label: "退出登录", danger: true },
|
||||
],
|
||||
onClick: handleUserMenu,
|
||||
};
|
||||
|
||||
watch(
|
||||
() => appStore.locale,
|
||||
(locale) => document.documentElement.setAttribute("lang", locale),
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (!route.meta.title) return;
|
||||
appStore.addVisitedTab({
|
||||
key: route.path,
|
||||
label: route.meta.title,
|
||||
closable: route.path !== "/dashboard",
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function navigate({ key }) {
|
||||
if (typeof key === "string" && key.startsWith("/")) {
|
||||
router.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
function changeTab(key) {
|
||||
if (key !== route.path) router.push(key);
|
||||
}
|
||||
|
||||
function editTab(targetKey, action) {
|
||||
if (action !== "remove" || typeof targetKey !== "string" || targetKey === "/dashboard") {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentIndex = appStore.visitedTabs.findIndex((item) => item.key === targetKey);
|
||||
const fallback =
|
||||
appStore.visitedTabs[currentIndex - 1] ??
|
||||
appStore.visitedTabs[currentIndex + 1] ??
|
||||
appStore.visitedTabs[0];
|
||||
|
||||
appStore.removeVisitedTab(targetKey);
|
||||
if (route.path === targetKey && fallback) router.push(fallback.key);
|
||||
}
|
||||
|
||||
function handleUserMenu({ key }) {
|
||||
if (key === "profile" || key === "settings") profileOpen.value = true;
|
||||
if (key === "logout") logoutOpen.value = true;
|
||||
}
|
||||
|
||||
function confirmLogout() {
|
||||
authStore.clearSession();
|
||||
logoutOpen.value = false;
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
import AppSidebar from "./components/AppSidebar.vue";
|
||||
import AppTabs from "./components/AppTabs.vue";
|
||||
import AppToolbar from "./components/AppToolbar.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout class="app-layout">
|
||||
<a-layout-sider
|
||||
class="app-sider"
|
||||
:collapsed="appStore.sidebarCollapsed"
|
||||
:trigger="null"
|
||||
:collapsed-width="56"
|
||||
collapsible
|
||||
theme="light"
|
||||
width="208"
|
||||
>
|
||||
<div class="brand" :class="{ 'brand--collapsed': appStore.sidebarCollapsed }">
|
||||
<div class="brand__mark">F</div>
|
||||
<div class="brand__copy" :aria-hidden="appStore.sidebarCollapsed">
|
||||
<strong>FMS 管理系统</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sider-menu">
|
||||
<a-menu mode="inline" :items="menuItems" :selected-keys="selectedKeys" @click="navigate" />
|
||||
</div>
|
||||
|
||||
<div class="sider-footer">
|
||||
<a-tooltip :title="appStore.sidebarCollapsed ? '展开侧栏' : '收起侧栏'" placement="top">
|
||||
<a-button
|
||||
type="text"
|
||||
class="sider-collapse"
|
||||
aria-label="切换侧栏宽度"
|
||||
@click="appStore.toggleSidebar"
|
||||
>
|
||||
<template #icon>
|
||||
<MenuUnfoldOutlined v-if="appStore.sidebarCollapsed" />
|
||||
<MenuFoldOutlined v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
<AppSidebar />
|
||||
|
||||
<a-layout class="app-main">
|
||||
<header class="tab-header">
|
||||
<a-tabs
|
||||
:active-key="activeTab"
|
||||
:items="tabItems"
|
||||
type="editable-card"
|
||||
size="small"
|
||||
hide-add
|
||||
:animated="false"
|
||||
@change="changeTab"
|
||||
@edit="editTab"
|
||||
>
|
||||
<template #rightExtra>
|
||||
<div class="global-actions">
|
||||
<a-tooltip title="切换语言" placement="bottom">
|
||||
<a-dropdown :menu="languageMenu" :trigger="['click']" placement="bottomRight">
|
||||
<a-button type="text" class="global-action" aria-label="切换语言">
|
||||
<template #icon><TranslationOutlined /></template>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="通知提醒" placement="bottom">
|
||||
<a-button type="text" class="global-action" aria-label="通知提醒">
|
||||
<a-badge dot><BellOutlined /></a-badge>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-dropdown :menu="userMenu" :trigger="['click']" placement="bottomRight">
|
||||
<button type="button" class="header-user">
|
||||
<a-avatar :size="24"><UserOutlined /></a-avatar>
|
||||
<span>管理员</span>
|
||||
<DownOutlined class="header-user__arrow" />
|
||||
</button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</header>
|
||||
<AppToolbar />
|
||||
<AppTabs />
|
||||
|
||||
<a-layout-content class="app-content">
|
||||
<router-view v-slot="{ Component, route: currentRoute }">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="slide" mode="out-in">
|
||||
<component :is="Component" :key="currentRoute.path" />
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
|
||||
<a-modal v-model:open="profileOpen" title="个人资料" :footer="null" width="420px">
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="用户名">admin</a-descriptions-item>
|
||||
<a-descriptions-item label="姓名">管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">系统管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="机构码">{{ authStore.orgid || "--" }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-model:open="logoutOpen"
|
||||
title="退出登录"
|
||||
ok-text="确认退出"
|
||||
cancel-text="取消"
|
||||
@ok="confirmLogout"
|
||||
>
|
||||
确认退出当前账号吗？
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-layout {
|
||||
min-height: 100vh;
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.app-sider {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--fms-border);
|
||||
|
||||
:deep(.ant-layout-sider-children) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sider-menu {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sider-footer {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sider-collapse {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding-inline: 0;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
|
||||
&--collapsed {
|
||||
justify-content: center;
|
||||
padding-inline: 8px;
|
||||
|
||||
.brand__copy {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
&__mark {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__copy {
|
||||
display: flex;
|
||||
max-width: 140px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
line-height: 1;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
max-width 0.18s ease,
|
||||
opacity 0.12s ease,
|
||||
transform 0.18s ease;
|
||||
|
||||
strong {
|
||||
color: var(--fms-text);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
z-index: 15;
|
||||
flex: none;
|
||||
height: 44px;
|
||||
padding: 6px 8px 0;
|
||||
border-bottom: 1px solid var(--fms-border);
|
||||
background: var(--fms-surface);
|
||||
|
||||
:deep(.ant-tabs) {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-content-holder) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab) {
|
||||
min-width: 80px;
|
||||
padding: 5px 10px !important;
|
||||
justify-content: center;
|
||||
border-radius: 3px 3px 0 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.global-actions {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.global-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-inline: 0;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 12px;
|
||||
padding: 0 8px 0 0;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: var(--fms-text);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--fms-hover);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
|
||||
@@ -0,0 +1,351 @@
|
||||
<script setup>
|
||||
import { computed, h, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import {
|
||||
Bug,
|
||||
ChartColumn,
|
||||
CircleQuestionMark,
|
||||
Database,
|
||||
FolderKanban,
|
||||
House,
|
||||
Landmark,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
Settings,
|
||||
Wallet,
|
||||
} from "@lucide/vue";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const menuIcon = (icon) => () => h(icon, { size: 16, strokeWidth: 1.8 });
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: "/home",
|
||||
icon: menuIcon(House),
|
||||
label: "首页",
|
||||
},
|
||||
{
|
||||
key: "business",
|
||||
icon: menuIcon(FolderKanban),
|
||||
label: "业务管理",
|
||||
children: [
|
||||
{ key: "/business", label: "业务管理" },
|
||||
{ key: "/business/listcontainer", label: "排车列表" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "finance",
|
||||
icon: menuIcon(Wallet),
|
||||
label: "财务管理",
|
||||
children: [
|
||||
{
|
||||
key: "finance-receivable",
|
||||
label: "应收管理",
|
||||
children: [
|
||||
{ key: "/cw/ys/list", label: "应收费用列表" },
|
||||
{ key: "/cw/ys/listbill", label: "应收账单" },
|
||||
{ key: "/cw/ys/listinvoice", label: "应收发票" },
|
||||
{ key: "/cw/ys/listskd", label: "收款管理" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "finance-payable",
|
||||
label: "应付管理",
|
||||
children: [
|
||||
{ key: "/cw/yf/list", label: "应付费用列表" },
|
||||
{ key: "/cw/yf/listbill", label: "应付账单" },
|
||||
{ key: "/cw/yf/listinvoice", label: "应付发票" },
|
||||
{ key: "/cw/yf/listfkd", label: "付款管理" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "finance-daily",
|
||||
label: "日常费用",
|
||||
children: [
|
||||
{ key: "/cw/assistance/daily-expenses", label: "日常费用" },
|
||||
{ key: "/cw/assistance/payment-account", label: "收付账户" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "statistics",
|
||||
icon: menuIcon(ChartColumn),
|
||||
label: "统计分析",
|
||||
children: [
|
||||
{
|
||||
key: "statistics-receivable",
|
||||
label: "收款统计分析",
|
||||
children: [
|
||||
{ key: "/tj/ystj/tj_nots", label: "应收未收明细" },
|
||||
{ key: "/tj/ystj/tj_notsbydw", label: "应收未收按单位汇总" },
|
||||
{ key: "/tj/ystj/tj_notsbysales", label: "未收款按业务员汇总" },
|
||||
{ key: "/tj/ystj/tj_cwskxz", label: "收款明细统计" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "statistics-payable",
|
||||
label: "付款统计分析",
|
||||
children: [
|
||||
{ key: "/tj/yftj/tj_alone_notf", label: "应付未付明细" },
|
||||
{ key: "/tj/yftj/tj_notfbydw", label: "应付未付按单位汇总" },
|
||||
{ key: "/tj/yftj/tj_cwfkxz", label: "付款明细统计" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "statistics-profit",
|
||||
label: "利润统计分析",
|
||||
children: [
|
||||
{ key: "/tj/lrtj/tj_lr_module_id", label: "利润分析单票明细" },
|
||||
{ key: "/tj/lrtj/tj_lrbysales", label: "利润分析按业务员" },
|
||||
{ key: "/tj/lrtj/tj_lrbycustomer", label: "利润分析按客户" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "management",
|
||||
icon: menuIcon(Landmark),
|
||||
label: "管理中心",
|
||||
children: [
|
||||
{ key: "/shcenter", label: "审批中心" },
|
||||
{ key: "/partners/khht", label: "合同管理" },
|
||||
{ key: "/pricelist/list", label: "运费模版" },
|
||||
{ key: "/system/oa-management/companyAnnouncement", label: "企业公告" },
|
||||
{ key: "/system/approvalSettings", label: "审批设置" },
|
||||
{ key: "/system/oa-management/userReminder", label: "提醒设置" },
|
||||
{ key: "/partners/hl", label: "结算汇率" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "base-data",
|
||||
icon: menuIcon(Database),
|
||||
label: "基础数据",
|
||||
children: [
|
||||
{ key: "/partners", label: "合作伙伴" },
|
||||
{ key: "/partners/contact", label: "联系人" },
|
||||
{ key: "/base/other", label: "其他数据" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "system",
|
||||
icon: menuIcon(Settings),
|
||||
label: "系统管理",
|
||||
children: [
|
||||
{ key: "/system/permission", label: "权限管理" },
|
||||
{ key: "/system/field", label: "字段配置" },
|
||||
{ key: "/system/statisticalSettings", label: "查询设置" },
|
||||
{ key: "/system/mappingConfig", label: "映射配置" },
|
||||
{ key: "/system/moduleSettings", label: "模块设置" },
|
||||
{ key: "/system/autoId", label: "自动编码" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "help",
|
||||
icon: menuIcon(CircleQuestionMark),
|
||||
label: "系统帮助",
|
||||
children: [
|
||||
{ key: "/help", label: "帮助文档" },
|
||||
{ key: "/videos", label: "操作视频" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "test",
|
||||
icon: menuIcon(Bug),
|
||||
label: "功能测试",
|
||||
children: [{ key: "/test/test", label: "测试页面" }],
|
||||
},
|
||||
];
|
||||
|
||||
const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
|
||||
const openKeys = ref([]);
|
||||
const parentKeyByRoute = new Map(
|
||||
menuItems.flatMap((item) =>
|
||||
item.children?.map((child) => [child.key, item.key]) ?? [],
|
||||
),
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.meta.menuKey || route.path,
|
||||
(menuKey) => {
|
||||
const parentKey = parentKeyByRoute.get(menuKey);
|
||||
if (parentKey && !openKeys.value.includes(parentKey)) {
|
||||
openKeys.value = [...openKeys.value, parentKey];
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function navigate({ key }) {
|
||||
if (typeof key === "string" && key.startsWith("/")) {
|
||||
router.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
function updateOpenKeys(keys) {
|
||||
openKeys.value = keys;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout-sider
|
||||
class="app-sider"
|
||||
:collapsed="appStore.sidebarCollapsed"
|
||||
:trigger="null"
|
||||
:collapsed-width="56"
|
||||
collapsible
|
||||
theme="light"
|
||||
width="208"
|
||||
>
|
||||
<div class="brand" :class="{ 'brand--collapsed': appStore.sidebarCollapsed }">
|
||||
<div class="brand__mark">F</div>
|
||||
<div class="brand__copy" :aria-hidden="appStore.sidebarCollapsed">
|
||||
<strong>FMS 管理系统</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sider-menu">
|
||||
<a-menu
|
||||
mode="inline"
|
||||
:items="menuItems"
|
||||
:selected-keys="selectedKeys"
|
||||
:open-keys="openKeys"
|
||||
@click="navigate"
|
||||
@open-change="updateOpenKeys"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sider-footer">
|
||||
<a-tooltip :title="appStore.sidebarCollapsed ? '展开侧栏' : '收起侧栏'" placement="right">
|
||||
<a-button
|
||||
type="text"
|
||||
class="sider-collapse"
|
||||
aria-label="切换侧栏宽度"
|
||||
@click="appStore.toggleSidebar"
|
||||
>
|
||||
<template #icon>
|
||||
<PanelLeftOpen v-if="appStore.sidebarCollapsed" />
|
||||
<PanelLeftClose v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-sider {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--fms-border);
|
||||
|
||||
:deep(.ant-layout-sider-children) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item),
|
||||
:deep(.ant-menu-submenu-title) {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-root > .ant-menu-item),
|
||||
:deep(.ant-menu-root > .ant-menu-submenu > .ant-menu-submenu-title) {
|
||||
padding-inline-start: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sider-menu {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sider-footer {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border-top: 1px solid var(--fms-border);
|
||||
}
|
||||
|
||||
.sider-collapse {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding-inline: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
gap: 8px;
|
||||
padding: 6px 12px 6px 15px;
|
||||
|
||||
&--collapsed {
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
padding-inline: 15px;
|
||||
|
||||
.brand__copy {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
&__mark {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__copy {
|
||||
display: flex;
|
||||
max-width: 140px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
line-height: 1;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
max-width 0.18s ease,
|
||||
opacity 0.12s ease,
|
||||
transform 0.18s ease;
|
||||
|
||||
strong {
|
||||
color: var(--fms-text);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ChevronLeft, ChevronRight, X } from "@lucide/vue";
|
||||
import { theme } from "antdv-next";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const { token } = theme.useToken();
|
||||
const headerRef = ref(null);
|
||||
const trackRef = ref(null);
|
||||
const overflowed = ref(false);
|
||||
const canScrollLeft = ref(false);
|
||||
const canScrollRight = ref(false);
|
||||
const activeTab = computed(() => route.fullPath);
|
||||
const tabItems = computed(() => appStore.visitedTabs);
|
||||
let resizeObserver;
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async () => {
|
||||
if (route.meta.title) {
|
||||
appStore.addVisitedTab({
|
||||
key: route.fullPath,
|
||||
label: getTabLabel(),
|
||||
closable: route.fullPath !== "/dashboard",
|
||||
});
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
revealActiveTab();
|
||||
updateScrollState();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => appStore.visitedTabs.length,
|
||||
async () => {
|
||||
await nextTick();
|
||||
updateScrollState();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(updateScrollState);
|
||||
if (headerRef.value) resizeObserver.observe(headerRef.value);
|
||||
updateScrollState();
|
||||
revealActiveTab("auto");
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => resizeObserver?.disconnect());
|
||||
|
||||
function changeTab(key) {
|
||||
if (key !== route.fullPath) router.push(key);
|
||||
}
|
||||
|
||||
function getTabLabel() {
|
||||
if (route.meta.detail && route.params.id) {
|
||||
return `${route.meta.listTitle || route.meta.title} ${route.params.id}`;
|
||||
}
|
||||
|
||||
return route.meta.title;
|
||||
}
|
||||
|
||||
function closeTab(targetKey) {
|
||||
if (typeof targetKey !== "string" || targetKey === "/dashboard") return;
|
||||
|
||||
const currentIndex = appStore.visitedTabs.findIndex((item) => item.key === targetKey);
|
||||
const fallback =
|
||||
appStore.visitedTabs[currentIndex - 1] ??
|
||||
appStore.visitedTabs[currentIndex + 1] ??
|
||||
appStore.visitedTabs[0];
|
||||
|
||||
appStore.removeVisitedTab(targetKey);
|
||||
if (route.fullPath === targetKey && fallback) router.push(fallback.key);
|
||||
}
|
||||
|
||||
function updateScrollState() {
|
||||
const header = headerRef.value;
|
||||
const track = trackRef.value;
|
||||
if (!header || !track) return;
|
||||
|
||||
const shouldOverflow = track.scrollWidth > header.clientWidth - 16 + 1;
|
||||
if (overflowed.value !== shouldOverflow) {
|
||||
overflowed.value = shouldOverflow;
|
||||
if (!shouldOverflow) track.scrollLeft = 0;
|
||||
nextTick(updateScrollState);
|
||||
return;
|
||||
}
|
||||
|
||||
canScrollLeft.value = shouldOverflow && track.scrollLeft > 1;
|
||||
canScrollRight.value =
|
||||
shouldOverflow && track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
|
||||
}
|
||||
|
||||
function scrollTabs(direction) {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
track.scrollBy({
|
||||
left: direction * Math.max(track.clientWidth * 0.65, 120),
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
function revealActiveTab(behavior = "smooth") {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
const activeElement = Array.from(track.querySelectorAll("[data-tab-key]")).find(
|
||||
(element) => element.dataset.tabKey === activeTab.value,
|
||||
);
|
||||
activeElement?.scrollIntoView({ behavior, block: "nearest", inline: "center" });
|
||||
}
|
||||
|
||||
function focusAdjacentTab(index, offset) {
|
||||
const items = tabItems.value;
|
||||
if (!items.length) return;
|
||||
|
||||
const nextIndex = (index + offset + items.length) % items.length;
|
||||
changeTab(items[nextIndex].key);
|
||||
nextTick(() => {
|
||||
const target = Array.from(trackRef.value?.querySelectorAll("[data-tab-key]") ?? []).find(
|
||||
(element) => element.dataset.tabKey === items[nextIndex].key,
|
||||
);
|
||||
target?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function handleTabKeydown(event, index) {
|
||||
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
||||
|
||||
event.preventDefault();
|
||||
focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
ref="headerRef"
|
||||
class="tab-header"
|
||||
:style="{
|
||||
'--tabs-active-bg': token.colorPrimaryBg,
|
||||
'--tabs-active-color': token.colorPrimary,
|
||||
'--tabs-idle-bg': token.colorFillQuaternary,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-nav-button"
|
||||
aria-label="向左滚动页签"
|
||||
:disabled="!canScrollLeft"
|
||||
@click="scrollTabs(-1)"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
|
||||
<div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState">
|
||||
<div
|
||||
v-for="(item, index) in tabItems"
|
||||
:key="item.key"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': item.key === activeTab }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="tab-item__select"
|
||||
role="tab"
|
||||
:data-tab-key="item.key"
|
||||
:aria-selected="item.key === activeTab"
|
||||
:tabindex="item.key === activeTab ? 0 : -1"
|
||||
@click="changeTab(item.key)"
|
||||
@keydown="handleTabKeydown($event, index)"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="item.closable"
|
||||
type="button"
|
||||
class="tab-item__close"
|
||||
:aria-label="`关闭${item.label}`"
|
||||
@click.stop="closeTab(item.key)"
|
||||
>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-nav-button"
|
||||
aria-label="向右滚动页签"
|
||||
:disabled="!canScrollRight"
|
||||
@click="scrollTabs(1)"
|
||||
>
|
||||
<ChevronRight />
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-header {
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 34px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.tab-track {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overscroll-behavior-inline: contain;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-width: 64px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: var(--tabs-idle-bg);
|
||||
color: var(--fms-text-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--tabs-active-color);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--tabs-active-bg);
|
||||
color: var(--tabs-active-color);
|
||||
}
|
||||
|
||||
&__select,
|
||||
&__close {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__select {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
display: grid;
|
||||
width: 18px;
|
||||
flex: none;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-nav-button {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
background: var(--tabs-idle-bg);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--tabs-active-color);
|
||||
background: var(--tabs-active-bg);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<script setup>
|
||||
import { computed, h, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { Bell, ChevronDown, Languages, LogOut, Settings, UserRound } from "@lucide/vue";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
import { useAuthStore } from "../../stores/auth";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const profileOpen = ref(false);
|
||||
const logoutOpen = ref(false);
|
||||
const menuIcon = (icon) => () => h(icon, { size: 16, strokeWidth: 1.8 });
|
||||
|
||||
const breadcrumbItems = computed(() => {
|
||||
const items = [];
|
||||
|
||||
if (route.path === "/dashboard") return [{ label: "工作台" }];
|
||||
if (route.meta.section) items.push({ label: route.meta.section });
|
||||
if (route.meta.title) items.push({ label: route.meta.title });
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const languageMenu = computed(() => ({
|
||||
items: [
|
||||
{ key: "zh-CN", label: "简体中文" },
|
||||
{ key: "en", label: "English" },
|
||||
],
|
||||
onClick: ({ key }) => appStore.setLocale(key),
|
||||
selectable: true,
|
||||
selectedKeys: [appStore.locale],
|
||||
}));
|
||||
|
||||
const userMenu = {
|
||||
items: [
|
||||
{ key: "profile", icon: menuIcon(UserRound), label: "个人资料" },
|
||||
{ key: "settings", icon: menuIcon(Settings), label: "账户设置" },
|
||||
{ type: "divider" },
|
||||
{ key: "logout", icon: menuIcon(LogOut), label: "退出登录", danger: true },
|
||||
],
|
||||
onClick: handleUserMenu,
|
||||
};
|
||||
|
||||
watch(
|
||||
() => appStore.locale,
|
||||
(locale) => document.documentElement.setAttribute("lang", locale),
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function handleUserMenu({ key }) {
|
||||
if (key === "profile" || key === "settings") profileOpen.value = true;
|
||||
if (key === "logout") logoutOpen.value = true;
|
||||
}
|
||||
|
||||
function confirmLogout() {
|
||||
authStore.clearSession();
|
||||
logoutOpen.value = false;
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="top-toolbar">
|
||||
<a-breadcrumb class="toolbar-breadcrumb" separator=">">
|
||||
<a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.label">
|
||||
{{ item.label }}
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<a-tooltip title="切换语言" placement="bottom">
|
||||
<a-dropdown :menu="languageMenu" :trigger="['click']" placement="bottomRight">
|
||||
<a-button type="text" class="toolbar-action" aria-label="切换语言">
|
||||
<template #icon><Languages /></template>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="通知提醒" placement="bottom">
|
||||
<a-button type="text" class="toolbar-action" aria-label="通知提醒">
|
||||
<a-badge dot><Bell /></a-badge>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-dropdown :menu="userMenu" :trigger="['click']" placement="bottomRight">
|
||||
<button type="button" class="toolbar-user" aria-label="用户菜单">
|
||||
<a-avatar :size="24"><UserRound /></a-avatar>
|
||||
<span>管理员</span>
|
||||
<ChevronDown class="toolbar-user__arrow" />
|
||||
</button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a-modal v-model:open="profileOpen" title="个人资料" :footer="null" width="420px">
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="用户名">admin</a-descriptions-item>
|
||||
<a-descriptions-item label="姓名">管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">系统管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="机构码">{{ authStore.orgid || "--" }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-model:open="logoutOpen"
|
||||
title="退出登录"
|
||||
ok-text="确认退出"
|
||||
cancel-text="取消"
|
||||
@ok="confirmLogout"
|
||||
>
|
||||
确认退出当前账号吗？
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-toolbar {
|
||||
z-index: 16;
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 0 8px 0 12px;
|
||||
border-bottom: 1px solid var(--fms-border);
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.toolbar-breadcrumb {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.toolbar-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-inline: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.toolbar-user {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 4px;
|
||||
padding: 0 6px 0 4px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--fms-hover);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: var(--fms-text-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,8 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import NProgress from "nprogress";
|
||||
import "nprogress/nprogress.css";
|
||||
|
||||
NProgress.configure({ showSpinner: false });
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@@ -26,6 +30,19 @@ const routes = [
|
||||
source: "v_bs_business",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "business/orders/:id",
|
||||
name: "business-order-detail",
|
||||
component: () => import("../views/DetailView.vue"),
|
||||
meta: {
|
||||
title: "业务单据详情",
|
||||
listTitle: "业务单据",
|
||||
section: "业务管理",
|
||||
menuKey: "/business/orders",
|
||||
listPath: "/business/orders",
|
||||
detail: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "fees/receivable",
|
||||
name: "fees-receivable",
|
||||
@@ -37,6 +54,19 @@ const routes = [
|
||||
source: "v_fee_receivable",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "fees/receivable/:id",
|
||||
name: "fees-receivable-detail",
|
||||
component: () => import("../views/DetailView.vue"),
|
||||
meta: {
|
||||
title: "应收费用详情",
|
||||
listTitle: "应收费用",
|
||||
section: "费用管理",
|
||||
menuKey: "/fees/receivable",
|
||||
listPath: "/fees/receivable",
|
||||
detail: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "reports/operations",
|
||||
name: "reports-operations",
|
||||
@@ -48,6 +78,19 @@ const routes = [
|
||||
source: "v_report_operations",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "reports/operations/:id",
|
||||
name: "reports-operations-detail",
|
||||
component: () => import("../views/DetailView.vue"),
|
||||
meta: {
|
||||
title: "运营报表详情",
|
||||
listTitle: "运营报表",
|
||||
section: "报表中心",
|
||||
menuKey: "/reports/operations",
|
||||
listPath: "/reports/operations",
|
||||
detail: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "system/users",
|
||||
name: "system-users",
|
||||
@@ -59,6 +102,19 @@ const routes = [
|
||||
source: "sys_user",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "system/users/:id",
|
||||
name: "system-users-detail",
|
||||
component: () => import("../views/DetailView.vue"),
|
||||
meta: {
|
||||
title: "用户管理详情",
|
||||
listTitle: "用户管理",
|
||||
section: "系统设置",
|
||||
menuKey: "/system/users",
|
||||
listPath: "/system/users",
|
||||
detail: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -74,9 +130,18 @@ const router = createRouter({
|
||||
});
|
||||
|
||||
router.beforeEach((to) => {
|
||||
NProgress.start();
|
||||
document.title = to.meta.title ? `${to.meta.title} - FMS 管理系统` : "FMS 管理系统";
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
router.onError(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -1,10 +1,12 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
const createDefaultVisitedTabs = () => [{ key: "/dashboard", label: "工作台", closable: false }];
|
||||
|
||||
export const useAppStore = defineStore("app", {
|
||||
state: () => ({
|
||||
locale: "zh-CN",
|
||||
sidebarCollapsed: false,
|
||||
visitedTabs: [{ key: "/dashboard", label: "工作台", closable: false }],
|
||||
visitedTabs: createDefaultVisitedTabs(),
|
||||
}),
|
||||
actions: {
|
||||
toggleSidebar() {
|
||||
@@ -24,6 +26,10 @@ export const useAppStore = defineStore("app", {
|
||||
},
|
||||
persist: {
|
||||
key: "fms-app",
|
||||
pick: ["locale", "sidebarCollapsed", "visitedTabs"],
|
||||
pick: ["locale"],
|
||||
afterHydrate: ({ store }) => {
|
||||
store.sidebarCollapsed = false;
|
||||
store.visitedTabs = createDefaultVisitedTabs();
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -16,12 +16,15 @@ body,
|
||||
#app,
|
||||
.ant-app,
|
||||
.theme-root {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 1200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -35,6 +38,14 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: none;
|
||||
stroke-width: 1.8;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
.theme-root {
|
||||
--fms-bg: #f5f7fa;
|
||||
--fms-surface: #ffffff;
|
||||
@@ -46,6 +57,7 @@ a {
|
||||
|
||||
color: var(--fms-text);
|
||||
background: var(--fms-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
<script setup>
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
DollarOutlined,
|
||||
FileTextOutlined,
|
||||
PlusOutlined,
|
||||
} from "@antdv-next/icons";
|
||||
import { CircleCheck, Clock3, DollarSign, FileText, Plus } from "@lucide/vue";
|
||||
|
||||
const metrics = [
|
||||
{ label: "今日新增", value: "0", tone: "blue", icon: FileTextOutlined },
|
||||
{ label: "待处理", value: "0", tone: "amber", icon: ClockCircleOutlined },
|
||||
{ label: "本月应收", value: "¥ 0.00", tone: "green", icon: DollarOutlined },
|
||||
{ label: "本月完成", value: "0", tone: "gray", icon: CheckCircleOutlined },
|
||||
{ label: "今日新增", value: "0", tone: "blue", icon: FileText },
|
||||
{ label: "待处理", value: "0", tone: "amber", icon: Clock3 },
|
||||
{ label: "本月应收", value: "¥ 0.00", tone: "green", icon: DollarSign },
|
||||
{ label: "本月完成", value: "0", tone: "gray", icon: CircleCheck },
|
||||
];
|
||||
|
||||
const columns = [
|
||||
@@ -44,7 +38,7 @@ const columns = [
|
||||
<span>最近更新</span>
|
||||
</div>
|
||||
<a-button type="primary">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
<template #icon><Plus /></template>
|
||||
新建业务
|
||||
</a-button>
|
||||
</div>
|
||||
@@ -52,7 +46,7 @@ const columns = [
|
||||
:columns="columns"
|
||||
:data-source="[]"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
size="small"
|
||||
:scroll="{ x: 620 }"
|
||||
/>
|
||||
</div>
|
||||
@@ -66,15 +60,15 @@ const columns = [
|
||||
</div>
|
||||
<nav class="quick-links">
|
||||
<router-link to="/business/orders">
|
||||
<FileTextOutlined />
|
||||
<FileText />
|
||||
<span>业务单据</span>
|
||||
</router-link>
|
||||
<router-link to="/fees/receivable">
|
||||
<DollarOutlined />
|
||||
<DollarSign />
|
||||
<span>应收费用</span>
|
||||
</router-link>
|
||||
<router-link to="/reports/operations">
|
||||
<CheckCircleOutlined />
|
||||
<CircleCheck />
|
||||
<span>运营报表</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
@@ -86,13 +80,13 @@ const columns = [
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
@@ -100,7 +94,7 @@ const columns = [
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--fms-border);
|
||||
border-radius: 4px;
|
||||
background: var(--fms-surface);
|
||||
@@ -135,6 +129,11 @@ const columns = [
|
||||
border-radius: 4px;
|
||||
font-size: 17px;
|
||||
|
||||
:deep(.lucide) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background: #e6f4ff;
|
||||
color: #1677ff;
|
||||
@@ -160,7 +159,7 @@ const columns = [
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
@@ -171,11 +170,11 @@ const columns = [
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 7px 10px;
|
||||
padding: 5px 8px;
|
||||
border-bottom: 1px solid var(--fms-border);
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -1,140 +1,493 @@
|
||||
<script setup>
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { PlusOutlined, ReloadOutlined, SearchOutlined } from "@antdv-next/icons";
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { Ellipsis, ListFilter, Plus, Search } from "@lucide/vue";
|
||||
import { mockRecords } from "../data/mockRecords";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const rows = ref([]);
|
||||
const total = ref(0);
|
||||
const filters = reactive({ keyword: "" });
|
||||
const filters = reactive({ field: "name", keyword: "" });
|
||||
const pagination = reactive({ current: 1, pageSize: 20 });
|
||||
const title = computed(() => route.meta.title);
|
||||
const tableAreaRef = ref(null);
|
||||
const tableScrollY = ref(240);
|
||||
const advancedOpen = ref(false);
|
||||
const appliedFilterCount = ref(0);
|
||||
let resizeObserver;
|
||||
|
||||
const columns = computed(() => [
|
||||
{ title: "编号", dataIndex: "id", key: "id", width: 180 },
|
||||
{ title: "名称", dataIndex: "name", key: "name" },
|
||||
{ title: "状态", dataIndex: "state", key: "state", width: 120 },
|
||||
{ title: "更新时间", dataIndex: "updated_at", key: "updated_at", width: 180 },
|
||||
]);
|
||||
const columns = [
|
||||
{ title: "编号", dataIndex: "id", key: "id", width: 160 },
|
||||
{ title: "名称", dataIndex: "name", key: "name", width: 240 },
|
||||
{ title: "状态", dataIndex: "state", key: "state", width: 100 },
|
||||
{ title: "更新时间", dataIndex: "updated_at", key: "updated_at", width: 160 },
|
||||
];
|
||||
const fieldOptions = [
|
||||
{ label: "名称", value: "name" },
|
||||
{ label: "编号", value: "id" },
|
||||
{ label: "状态", value: "state" },
|
||||
];
|
||||
const businessTypeOptions = ["海运", "空运", "陆运", "铁路"].map((value) => ({
|
||||
label: value,
|
||||
value,
|
||||
}));
|
||||
const statusOptions = ["草稿", "处理中", "已完成", "已取消"].map((value) => ({
|
||||
label: value,
|
||||
value,
|
||||
}));
|
||||
const ownerOptions = ["张三", "李四", "王五"].map((value) => ({ label: value, value }));
|
||||
const departmentOptions = ["销售部", "操作部", "财务部"].map((value) => ({
|
||||
label: value,
|
||||
value,
|
||||
}));
|
||||
const settlementOptions = ["未结算", "部分结算", "已结算"].map((value) => ({
|
||||
label: value,
|
||||
value,
|
||||
}));
|
||||
const currencyOptions = ["CNY", "USD", "EUR"].map((value) => ({ label: value, value }));
|
||||
const advancedFilters = reactive(createEmptyAdvancedFilters());
|
||||
const draftFilterCount = computed(
|
||||
() => Object.values(advancedFilters).filter(isFilterValueFilled).length,
|
||||
);
|
||||
|
||||
function createEmptyAdvancedFilters() {
|
||||
return {
|
||||
documentNo: "",
|
||||
customerName: "",
|
||||
businessType: undefined,
|
||||
status: undefined,
|
||||
businessDate: [],
|
||||
owner: undefined,
|
||||
department: undefined,
|
||||
settlementStatus: undefined,
|
||||
currency: undefined,
|
||||
amountMin: null,
|
||||
amountMax: null,
|
||||
creator: "",
|
||||
createdDate: [],
|
||||
remark: "",
|
||||
};
|
||||
}
|
||||
|
||||
function isFilterValueFilled(value) {
|
||||
if (Array.isArray(value)) return value.some(isFilterValueFilled);
|
||||
return value !== undefined && value !== null && value !== "";
|
||||
}
|
||||
function loadData() {
|
||||
loading.value = true;
|
||||
rows.value = [];
|
||||
total.value = 0;
|
||||
const keyword = filters.keyword.trim().toLowerCase();
|
||||
const filteredRows = keyword
|
||||
? mockRecords.filter((row) =>
|
||||
String(row[filters.field] ?? "")
|
||||
.toLowerCase()
|
||||
.includes(keyword),
|
||||
)
|
||||
: mockRecords;
|
||||
const start = (pagination.current - 1) * pagination.pageSize;
|
||||
rows.value = filteredRows.slice(start, start + pagination.pageSize);
|
||||
total.value = filteredRows.length;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function reset() {
|
||||
filters.keyword = "";
|
||||
pagination.current = 1;
|
||||
function openDetail(record) {
|
||||
router.push(`${route.path}/${encodeURIComponent(record.id)}`);
|
||||
}
|
||||
|
||||
function changePage(page, pageSize) {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
loadData();
|
||||
}
|
||||
|
||||
function resetAdvancedFilters() {
|
||||
Object.assign(advancedFilters, createEmptyAdvancedFilters());
|
||||
}
|
||||
|
||||
function applyAdvancedFilters() {
|
||||
pagination.current = 1;
|
||||
appliedFilterCount.value = draftFilterCount.value;
|
||||
advancedOpen.value = false;
|
||||
loadData();
|
||||
}
|
||||
|
||||
function updateTableHeight() {
|
||||
const tableArea = tableAreaRef.value;
|
||||
if (!tableArea) return;
|
||||
|
||||
const headerHeight =
|
||||
tableArea.querySelector(".ant-table-thead")?.getBoundingClientRect().height ?? 39;
|
||||
tableScrollY.value = Math.max(Math.floor(tableArea.clientHeight - headerHeight), 80);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(updateTableHeight);
|
||||
if (tableAreaRef.value) resizeObserver.observe(tableAreaRef.value);
|
||||
nextTick(updateTableHeight);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => resizeObserver?.disconnect());
|
||||
|
||||
watch(() => route.meta.source, loadData, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="data-page">
|
||||
<section class="data-toolbar">
|
||||
<div class="data-toolbar__title">
|
||||
<h1>{{ title }}</h1>
|
||||
<span>共 {{ total }} 条</span>
|
||||
</div>
|
||||
<a-button type="primary">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
<section class="filter-bar" aria-label="查询条件">
|
||||
<a-button type="primary" class="toolbar-button">
|
||||
<template #icon><Plus /></template>
|
||||
新增
|
||||
</a-button>
|
||||
</section>
|
||||
|
||||
<section class="filter-bar">
|
||||
<a-input
|
||||
v-model:value="filters.keyword"
|
||||
class="keyword-input"
|
||||
placeholder="输入名称查询"
|
||||
allow-clear
|
||||
@press-enter="loadData"
|
||||
>
|
||||
<template #prefix><SearchOutlined /></template>
|
||||
</a-input>
|
||||
<a-button type="primary" @click="loadData">查询</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
<div class="filter-fields">
|
||||
<a-space-compact class="search-compact">
|
||||
<a-select
|
||||
v-model:value="filters.field"
|
||||
class="keyword-select"
|
||||
:options="fieldOptions"
|
||||
aria-label="查询字段"
|
||||
/>
|
||||
<a-input-search
|
||||
id="data-keyword"
|
||||
v-model:value="filters.keyword"
|
||||
class="keyword-search"
|
||||
allow-clear
|
||||
enter-button="搜索"
|
||||
@search="loadData"
|
||||
/>
|
||||
</a-space-compact>
|
||||
|
||||
<a-tooltip title="高级查询" placement="bottom">
|
||||
<a-badge :count="appliedFilterCount" size="small">
|
||||
<a-button
|
||||
shape="circle"
|
||||
class="round-action"
|
||||
aria-label="高级查询"
|
||||
@click="advancedOpen = true"
|
||||
>
|
||||
<template #icon><ListFilter /></template>
|
||||
</a-button>
|
||||
</a-badge>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip title="更多" placement="bottom">
|
||||
<a-button shape="circle" class="round-action" aria-label="更多">
|
||||
<template #icon><Ellipsis /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="table-panel">
|
||||
<a-table
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:data-source="rows"
|
||||
:loading="loading"
|
||||
:pagination="{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (value) => `共 ${value} 条`,
|
||||
}"
|
||||
:scroll="{ x: 760 }"
|
||||
/>
|
||||
<div
|
||||
ref="tableAreaRef"
|
||||
class="table-area"
|
||||
:style="{ '--table-body-height': `${tableScrollY}px` }"
|
||||
>
|
||||
<a-table
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:data-source="rows"
|
||||
:loading="loading"
|
||||
bordered
|
||||
size="small"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 'max-content', y: tableScrollY }"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<a-button
|
||||
v-if="column.key === 'id'"
|
||||
type="link"
|
||||
class="table-id-link"
|
||||
@click="openDetail(record)"
|
||||
>
|
||||
{{ text }}
|
||||
</a-button>
|
||||
<template v-else>{{ text }}</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<footer class="table-footer">
|
||||
<a-pagination
|
||||
size="small"
|
||||
:current="pagination.current"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
@change="changePage"
|
||||
/>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<a-drawer
|
||||
v-model:open="advancedOpen"
|
||||
root-class="advanced-filter-drawer"
|
||||
title="高级查询"
|
||||
placement="left"
|
||||
:size="560"
|
||||
:styles="{
|
||||
body: { padding: '12px 16px' },
|
||||
footer: { padding: '8px 16px' },
|
||||
}"
|
||||
>
|
||||
<a-form layout="vertical" class="advanced-filter-form">
|
||||
<a-form-item label="单据编号">
|
||||
<a-input v-model:value="advancedFilters.documentNo" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="客户名称">
|
||||
<a-input
|
||||
v-model:value="advancedFilters.customerName"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="业务类型">
|
||||
<a-select
|
||||
v-model:value="advancedFilters.businessType"
|
||||
allow-clear
|
||||
:options="businessTypeOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="业务状态">
|
||||
<a-select
|
||||
v-model:value="advancedFilters.status"
|
||||
allow-clear
|
||||
:options="statusOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="业务日期" class="filter-span-full">
|
||||
<a-range-picker
|
||||
v-model:value="advancedFilters.businessDate"
|
||||
:allow-empty="[true, true]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="负责人">
|
||||
<a-select
|
||||
v-model:value="advancedFilters.owner"
|
||||
allow-clear
|
||||
:options="ownerOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属部门">
|
||||
<a-select
|
||||
v-model:value="advancedFilters.department"
|
||||
allow-clear
|
||||
:options="departmentOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="结算状态">
|
||||
<a-select
|
||||
v-model:value="advancedFilters.settlementStatus"
|
||||
allow-clear
|
||||
:options="settlementOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="币种">
|
||||
<a-select
|
||||
v-model:value="advancedFilters.currency"
|
||||
allow-clear
|
||||
:options="currencyOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="金额下限">
|
||||
<a-input-number
|
||||
v-model:value="advancedFilters.amountMin"
|
||||
:min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="金额上限">
|
||||
<a-input-number
|
||||
v-model:value="advancedFilters.amountMax"
|
||||
:min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="创建人">
|
||||
<a-input v-model:value="advancedFilters.creator" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="创建日期">
|
||||
<a-range-picker
|
||||
v-model:value="advancedFilters.createdDate"
|
||||
:allow-empty="[true, true]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注关键词" class="filter-span-full">
|
||||
<a-input v-model:value="advancedFilters.remark" allow-clear />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<a-button @click="resetAdvancedFilters">重置</a-button>
|
||||
<a-button type="primary" @click="applyAdvancedFilters">
|
||||
<template #icon><Search /></template>
|
||||
查询
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-page {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.data-toolbar,
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.data-toolbar {
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
.filter-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
.search-compact {
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--fms-text);
|
||||
font-size: 16px;
|
||||
}
|
||||
.keyword-select {
|
||||
width: 82px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
.keyword-search {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.round-action {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50% !important;
|
||||
|
||||
:deep(.lucide) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--fms-border);
|
||||
border-radius: 4px;
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.keyword-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.table-panel {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
border: 1px solid var(--fms-border);
|
||||
border-radius: 4px;
|
||||
background: var(--fms-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-area {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 1px;
|
||||
background: var(--fms-border);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-table-body) {
|
||||
height: var(--table-body-height);
|
||||
min-height: var(--table-body-height);
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr:nth-child(even) > td) {
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.table-id-link {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-height: 38px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.advanced-filter-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 12px;
|
||||
row-gap: 0;
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
min-width: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label) {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
:deep(.ant-select),
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:global(.advanced-filter-drawer .ant-drawer-content-wrapper) {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.advanced-filter-form {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.filter-span-full {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ArrowLeft } from "@lucide/vue";
|
||||
import { mockRecords } from "../data/mockRecords";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const remark = ref("");
|
||||
|
||||
const recordId = computed(() => String(route.params.id ?? ""));
|
||||
const detailTitle = computed(() => route.meta.listTitle || route.meta.title || "详情");
|
||||
const record = computed(
|
||||
() =>
|
||||
mockRecords.find((item) => item.id === recordId.value) ?? {
|
||||
id: recordId.value,
|
||||
name: `${detailTitle.value} ${recordId.value}`,
|
||||
state: "草稿",
|
||||
businessType: "未设置",
|
||||
owner: "未设置",
|
||||
customer: "未设置",
|
||||
amount: "0.00",
|
||||
currency: "CNY",
|
||||
updated_at: "--",
|
||||
},
|
||||
);
|
||||
|
||||
function backToList() {
|
||||
router.push(String(route.meta.listPath || "/dashboard"));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<header class="detail-toolbar">
|
||||
<a-button type="text" size="small" @click="backToList">
|
||||
<template #icon><ArrowLeft /></template>
|
||||
返回列表
|
||||
</a-button>
|
||||
<div class="detail-heading">
|
||||
<strong>{{ detailTitle }}</strong>
|
||||
<span>{{ recordId }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="detail-content">
|
||||
<a-descriptions bordered size="small" :column="{ xs: 1, sm: 2, md: 3 }">
|
||||
<a-descriptions-item label="编号">{{ recordId }}</a-descriptions-item>
|
||||
<a-descriptions-item label="名称">{{ record.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">{{ record.state }}</a-descriptions-item>
|
||||
<a-descriptions-item label="客户">{{ record.customer }}</a-descriptions-item>
|
||||
<a-descriptions-item label="业务类型">{{ record.businessType }}</a-descriptions-item>
|
||||
<a-descriptions-item label="负责人">{{ record.owner }}</a-descriptions-item>
|
||||
<a-descriptions-item label="金额">{{ record.amount }} {{ record.currency }}</a-descriptions-item>
|
||||
<a-descriptions-item label="更新时间">{{ record.updated_at }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<section class="detail-remark">
|
||||
<div class="detail-remark__label">备注</div>
|
||||
<a-textarea v-model:value="remark" :rows="3" />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.detail-toolbar {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 38px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.detail-toolbar :deep(.lucide) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.detail-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
color: var(--fms-text);
|
||||
font-size: 13px;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.detail-remark {
|
||||
margin-top: 12px;
|
||||
|
||||
&__label {
|
||||
margin-bottom: 5px;
|
||||
color: var(--fms-text);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { LockOutlined, UserOutlined } from "@antdv-next/icons";
|
||||
import { LockKeyhole, UserRound } from "@lucide/vue";
|
||||
import { authApi } from "../services/api";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
|
||||
@@ -12,7 +12,7 @@ const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const form = reactive({
|
||||
orgid: "",
|
||||
username: "",
|
||||
userid: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
@@ -59,12 +59,12 @@ async function submit() {
|
||||
<a-input v-model:value="form.orgid" size="large" autocomplete="organization" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="用户名"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: '请输入用户名' }]"
|
||||
label="用户ID"
|
||||
name="userid"
|
||||
:rules="[{ required: true, message: '请输入用户ID' }]"
|
||||
>
|
||||
<a-input v-model:value="form.username" size="large" autocomplete="username">
|
||||
<template #prefix><UserOutlined /></template>
|
||||
<a-input v-model:value="form.userid" size="large" autocomplete="username">
|
||||
<template #prefix><UserRound /></template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
@@ -77,7 +77,7 @@ async function submit() {
|
||||
size="large"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #prefix><LockOutlined /></template>
|
||||
<template #prefix><LockKeyhole /></template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-button type="primary" html-type="submit" size="large" block :loading="loading">
|
||||
@@ -91,7 +91,10 @@ async function submit() {
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
|
||||
Reference in new issue
Block a user