20260720172840

code/fms/fms-vue/src/layouts/components/AppSidebar.vue

@@ -141,7 +141,7 @@ const fallbackMenuItems = [
       { key: "/system/statisticalSettings", label: "查询设置" },
       { key: "/system/mappingConfig", label: "映射配置" },
       { key: "/system/autoId", label: "自动编码" },
-      { key: "/demo/modules", label: "模块管理" },
+      { key: "/system/modules", label: "模块管理" },
     ],
   },
   {

code/fms/fms-vue/src/router/index.js

@@ -1,7 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
 import NProgress from "nprogress";
+import { message } from "antdv-next";
 import "nprogress/nprogress.css";
 import { useAuthStore } from "../stores/auth";
+import { usePermissionStore } from "../stores/permissions";
 
 NProgress.configure({ showSpinner: false });
 
@@ -132,13 +134,14 @@ const routes = [
         },
       },
       {
-        path: "demo/modules",
-        name: "demo-modules",
-        component: () => import("../views/ModuleManageDemo.vue"),
+        path: "system/modules",
+        name: "system-modules",
+        component: () => import("../views/module-management/ModuleManagementView.vue"),
         meta: {
           title: "模块管理",
           section: "系统管理",
-          menuKey: "/demo/modules",
+          menuKey: "/system/modules",
+          moduleCode: "M_MODULE",
         },
       },
     ],
@@ -161,7 +164,7 @@ const router = createRouter({
   scrollBehavior: () => ({ top: 0 }),
 });
 
-router.beforeEach((to) => {
+router.beforeEach(async (to) => {
   NProgress.start();
   document.title = to.meta.title
     ? `${to.meta.title} - FMS 货代物流管理系统`
@@ -175,6 +178,22 @@ router.beforeEach((to) => {
     return getRedirectPath(to.query.redirect);
   }
 
+  if (to.meta.moduleCode) {
+    const permissionStore = usePermissionStore();
+    try {
+      await permissionStore.load();
+      if (!permissionStore.canModule(to.meta.moduleCode)) {
+        message.warning("没有该模块的访问权限");
+        return false;
+      }
+    } catch (error) {
+      message.error(error.message || "权限加载失败，请重新登录");
+      permissionStore.clear();
+      authStore.clearSession();
+      return { name: "login", query: { redirect: to.fullPath } };
+    }
+  }
+
   return true;
 });
 

code/fms/fms-vue/src/services/moduleManagement.js

@@ -0,0 +1,54 @@
+import { loadDataApi, nextIdApi, saveObjectApi } from "./api";
+
+export const MODULE_ID = "M_MODULE";
+export const LOCALES = [
+  { value: "zh-CN", label: "简体中文" },
+  { value: "en-US", label: "English" },
+  { value: "zh-TW", label: "繁體中文" },
+];
+
+export async function loadModuleConfiguration() {
+  const [modules, fields, powers, translations, userModules, userPowers] = await Promise.all([
+    loadDataApi("b_module", null, "b_xh ASC"),
+    loadDataApi("b_module_field", null, "b_xh ASC"),
+    loadDataApi("b_module_power", null, "b_xh ASC"),
+    loadDataApi("b_i18n", null, "b_key ASC"),
+    loadDataApi("b_user_module", null, "b_id ASC"),
+    loadDataApi("b_user_power", null, "b_id ASC"),
+  ]);
+  return {
+    modules: modules.data,
+    fields: fields.data,
+    powers: powers.data,
+    translations: translations.data,
+    userModules: userModules.data,
+    userPowers: userPowers.data,
+  };
+}
+
+export async function nextIds(count) {
+  const ids = [];
+  for (let index = 0; index < count; index += 1) {
+    const response = await nextIdApi();
+    ids.push(String(response.data));
+  }
+  return ids;
+}
+
+export function tableRequest(table, changes, keyField = "b_id") {
+  return {
+    table,
+    key_field: keyField,
+    inserts: changes.inserts || [],
+    updates: changes.updates || [],
+    deletes: changes.deletes || [],
+  };
+}
+
+export function saveChanges(requests) {
+  return saveObjectApi(
+    requests.filter(
+      (request) => request.inserts.length || request.updates.length || request.deletes.length,
+    ),
+  );
+}

code/fms/fms-vue/src/stores/permissions.js

@@ -0,0 +1,57 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+import { loadDataApi } from "../services/api";
+import { useAuthStore } from "./auth";
+
+export const usePermissionStore = defineStore("permissions", () => {
+  const loadedUserId = ref("");
+  const loadingPromise = ref(null);
+  const moduleCodes = ref([]);
+  const powerCodes = ref([]);
+
+  const moduleSet = computed(() => new Set(moduleCodes.value));
+  const powerSet = computed(() => new Set(powerCodes.value));
+
+  async function load() {
+    const authStore = useAuthStore();
+    const userId = String(authStore.user?.id || "");
+    if (!/^\d+$/.test(userId)) throw new Error("登录用户 ID 无效，请重新登录");
+    if (loadedUserId.value === userId) return;
+    if (loadingPromise.value) return loadingPromise.value;
+
+    loadingPromise.value = Promise.all([
+      loadDataApi("b_user_module", `b_user_id = ${userId}`, "b_id ASC"),
+      loadDataApi("b_user_power", `b_user_id = ${userId}`, "b_id ASC"),
+      loadDataApi("b_module_power", "b_canuse = 1", "b_id ASC"),
+    ])
+      .then(([userModules, userPowers, powers]) => {
+        const powerById = new Map(powers.data.map((power) => [String(power.b_id), power]));
+        moduleCodes.value = userModules.data.map((item) => item.b_module_id);
+        powerCodes.value = userPowers.data
+          .map((item) => powerById.get(String(item.b_power_id)))
+          .filter(Boolean)
+          .map((power) => `${power.b_module_id}.${power.b_code}`);
+        loadedUserId.value = userId;
+      })
+      .finally(() => {
+        loadingPromise.value = null;
+      });
+    return loadingPromise.value;
+  }
+
+  function canModule(moduleCode) {
+    return !moduleCode || moduleSet.value.has(moduleCode);
+  }
+
+  function canPower(moduleCode, powerCode) {
+    return canModule(moduleCode) && powerSet.value.has(`${moduleCode}.${powerCode}`);
+  }
+
+  function clear() {
+    loadedUserId.value = "";
+    moduleCodes.value = [];
+    powerCodes.value = [];
+  }
+
+  return { load, canModule, canPower, clear, moduleCodes, powerCodes };
+});

code/fms/fms-vue/src/views/DashboardView.vue

@@ -1,268 +1,86 @@
-<script setup>
-import { ref } from "vue";
-import { CircleCheck, Clock3, DollarSign, FileText, Plus, RefreshCw } from "@lucide/vue";
-import { App } from "antdv-next";
-import { loadDataApi } from "../services/api";
-
-const { message } = App.useApp();
-const usersLoading = ref(false);
-const users = ref([]);
-
-const metrics = [
-  { 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 },
-];
+<script setup lang="js">
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 
 const columns = [
-  { title: "单据编号", dataIndex: "id", key: "id" },
-  { title: "客户名称", dataIndex: "customer", key: "customer" },
-  { title: "业务状态", dataIndex: "status", key: "status" },
-  { title: "更新时间", dataIndex: "updatedAt", key: "updatedAt" },
-];
+  {
+    title: 'Name (all screens)',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age (medium screen or bigger)',
+    dataIndex: 'age',
+    key: 'age',
+    responsive: ['md'],
+  },
+  {
+    title: 'Address (large screen or bigger)',
+    dataIndex: 'address',
+    key: 'address',
+    responsive: ['lg'],
+  },
+]
 
-const userColumns = [
-  { title: "用户ID", dataIndex: "b_id", key: "b_id" },
-  { title: "用户名称", dataIndex: "b_name", key: "b_name" },
-];
+const dataSource = Array.from({ length: 30 }, (_, i) => ({
+  key: String(i + 1),
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+}))
 
-async function loadUsers() {
-  usersLoading.value = true;
-  try {
-    const response = await loadDataApi("b_user", null, "b_id ASC", ["b_id", "b_name"]);
-    users.value = response.data;
-  } catch (error) {
-    if (error.code !== 401 && error.code !== 40101) {
-      message.error(error.message || "用户查询失败");
-    }
-  } finally {
-    usersLoading.value = false;
-  }
+const tableWrap = ref(null)
+const scrollY = ref(0)
+let ro = null
+
+function updateScrollY() {
+  const el = tableWrap.value
+  if (!el) return
+  const thead = el.querySelector('.ant-table-thead')
+  const pagination = el.querySelector('.ant-table-pagination')
+  const headerH = thead ? thead.offsetHeight : 0
+  const pagH = pagination ? pagination.offsetHeight + 16 : 0
+  scrollY.value = Math.max(0, el.clientHeight - headerH - pagH)
 }
+
+onMounted(async () => {
+  await nextTick()
+  updateScrollY()
+  ro = new ResizeObserver(updateScrollY)
+  if (tableWrap.value) ro.observe(tableWrap.value)
+})
+
+onBeforeUnmount(() => {
+  if (ro) ro.disconnect()
+})
 </script>
 
 <template>
-  <div class="dashboard">
-    <section class="metric-grid" aria-label="业务概览">
-      <article v-for="item in metrics" :key="item.label" class="metric-card">
-        <div class="metric-card__copy">
-          <span>{{ item.label }}</span>
-          <strong>{{ item.value }}</strong>
-        </div>
-        <div class="metric-card__icon" :class="`metric-card__icon--${item.tone}`">
-          <component :is="item.icon" />
-        </div>
-      </article>
-    </section>
+  <div class="dashboard h-full flex flex-col gap-3 p-4">
+    <!-- Toolbar -->
+    <div class="toolbar flex-none flex items-center justify-between">
+      <span class="text-base font-semibold">Dashboard</span>
+      <a-space>
+        <a-button type="primary">新增</a-button>
+        <a-button>刷新</a-button>
+        <a-button>导出</a-button>
+      </a-space>
+    </div>
 
-    <section class="dashboard-grid">
-      <div class="panel work-panel">
-        <div class="panel__header">
-          <div>
-            <h2>待办业务</h2>
-            <span>最近更新</span>
-          </div>
-          <a-button type="primary">
-            <template #icon><Plus /></template>
-            新建业务
-          </a-button>
-        </div>
-        <a-table
-          :columns="columns"
-          :data-source="[]"
-          :pagination="false"
-          size="small"
-          :scroll="{ x: 620 }"
-        />
-      </div>
-
-      <div class="panel quick-panel">
-        <div class="panel__header">
-          <div>
-            <h2>快捷入口</h2>
-            <span>常用操作</span>
-          </div>
-        </div>
-        <nav class="quick-links">
-          <router-link to="/business/orders">
-            <FileText />
-            <span>业务单据</span>
-          </router-link>
-          <router-link to="/fees/receivable">
-            <DollarSign />
-            <span>应收费用</span>
-          </router-link>
-          <router-link to="/reports/operations">
-            <CircleCheck />
-            <span>运营报表</span>
-          </router-link>
-        </nav>
-      </div>
-    </section>
-
-    <section class="panel session-panel">
-      <div class="panel__header">
-        <div>
-          <h2>登录会话测试</h2>
-          <span>b_user 用户列表</span>
-        </div>
-        <a-button :loading="usersLoading" @click="loadUsers">
-          <template #icon><RefreshCw /></template>
-          查询用户
-        </a-button>
-      </div>
+    <!-- Table fills the remaining space -->
+    <div ref="tableWrap" class="table-area flex-1 min-h-0 overflow-hidden">
       <a-table
-        :columns="userColumns"
-        :data-source="users"
-        :loading="usersLoading"
-        :pagination="false"
-        row-key="b_id"
+        :columns="columns"
+        :data-source="dataSource"
+        :scroll="{ y: scrollY, x: 'max-content' }"
+        bordered
         size="small"
-      />
-    </section>
+      >
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.key === 'name'">
+            <a>{{ text }}</a>
+          </template>
+        </template>
+      </a-table>
+    </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.dashboard {
-  display: grid;
-  gap: 6px;
-}
-
-.metric-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.metric-card {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-surface);
-
-  &__copy {
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-
-    span {
-      color: var(--fms-text-secondary);
-      font-size: 12px;
-    }
-
-    strong {
-      margin-top: 4px;
-      overflow: hidden;
-      color: var(--fms-text);
-      font-size: 19px;
-      line-height: 1.2;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &__icon {
-    display: grid;
-    flex: none;
-    width: 34px;
-    height: 34px;
-    place-items: center;
-    border-radius: 4px;
-    font-size: 17px;
-
-    :deep(.lucide) {
-      width: 18px;
-      height: 18px;
-    }
-
-    &--blue {
-      background: #e6f4ff;
-      color: #1677ff;
-    }
-
-    &--amber {
-      background: #fff7e6;
-      color: #d46b08;
-    }
-
-    &--green {
-      background: #f0f9eb;
-      color: #389e0d;
-    }
-
-    &--gray {
-      background: #f2f3f5;
-      color: #4e5969;
-    }
-  }
-}
-
-.dashboard-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
-  gap: 6px;
-}
-
-.panel {
-  min-width: 0;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-surface);
-
-  &__header {
-    display: flex;
-    min-height: 42px;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 5px 8px;
-    border-bottom: 1px solid var(--fms-border);
-
-    h2 {
-      margin: 0;
-      color: var(--fms-text);
-      font-size: 13px;
-    }
-
-    span {
-      color: var(--fms-text-secondary);
-      font-size: 11px;
-    }
-  }
-}
-
-.work-panel :deep(.ant-table-wrapper) {
-  padding: 0 2px 2px;
-}
-
-.session-panel :deep(.ant-table-wrapper) {
-  padding: 0 2px 2px;
-}
-
-.quick-links {
-  display: grid;
-  padding: 4px;
-
-  a {
-    display: flex;
-    min-height: 36px;
-    align-items: center;
-    gap: 8px;
-    padding: 5px 7px;
-    border-radius: 3px;
-    color: var(--fms-text);
-    font-size: 12px;
-
-    &:hover {
-      background: var(--fms-hover);
-      color: #1677ff;
-    }
-  }
-}
-</style>

code/fms/fms-vue/src/views/module-management/components/ModuleTreePanel.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { computed, ref } from "vue";
+import { FileText, Folder, Plus, RefreshCw, Search } from "@lucide/vue";
+
+const props = defineProps({
+  modules: { type: Array, required: true },
+  selectedKey: { type: String, default: "" },
+  loading: Boolean,
+  canCreate: Boolean,
+});
+const emit = defineEmits(["select", "add", "refresh"]);
+const searchText = ref("");
+const addMenu = {
+  items: [
+    { key: "module", label: "新增模块" },
+    { key: "directory", label: "新增目录" },
+  ],
+  onClick: ({ key }) => emit("add", key),
+};
+
+const treeData = computed(() => {
+  const keyword = searchText.value.trim().toLowerCase();
+  const visible = keyword
+    ? new Set(
+        props.modules
+          .filter(
+            (item) =>
+              item.b_id.toLowerCase().includes(keyword) ||
+              item.b_name.toLowerCase().includes(keyword),
+          )
+          .flatMap((item) => [item.b_id, item.b_parent_id]),
+      )
+    : null;
+  const children = new Map();
+  props.modules.forEach((item) => {
+    const parent = item.b_parent_id || "__root__";
+    if (!children.has(parent)) children.set(parent, []);
+    children.get(parent).push(item);
+  });
+  const build = (parent) =>
+    (children.get(parent) || [])
+      .filter((item) => !visible || visible.has(item.b_id))
+      .map((item) => ({
+        key: item.b_id,
+        title: item.b_name,
+        code: item.b_id,
+        type: item.b_type,
+        children: build(item.b_id),
+      }));
+  return build("__root__");
+});
+
+function onSelect(keys) {
+  if (keys[0]) emit("select", keys[0]);
+}
+</script>
+
+<template>
+  <aside class="module-tree-panel">
+    <header>
+      <div>
+        <strong>模块</strong>
+        <span>{{ modules.length }}</span>
+      </div>
+      <div class="tree-header-actions">
+        <a-tooltip title="新增">
+          <a-dropdown :menu="addMenu" :trigger="['click']" :disabled="!canCreate">
+            <a-button type="text" size="small" :disabled="!canCreate">
+              <Plus :size="16" />
+            </a-button>
+          </a-dropdown>
+        </a-tooltip>
+        <a-tooltip title="刷新">
+          <a-button type="text" size="small" :loading="loading" @click="emit('refresh')">
+            <RefreshCw :size="16" />
+          </a-button>
+        </a-tooltip>
+      </div>
+    </header>
+
+    <a-input v-model:value="searchText" allow-clear placeholder="搜索名称或代码">
+      <template #prefix><Search :size="15" /></template>
+    </a-input>
+
+    <a-spin :spinning="loading">
+      <a-tree
+        block-node
+        default-expand-all
+        :tree-data="treeData"
+        :selected-keys="selectedKey ? [selectedKey] : []"
+        @select="onSelect"
+      >
+        <template #title="node">
+          <div class="tree-title">
+            <Folder v-if="node.type === 'directory'" :size="15" />
+            <FileText v-else :size="15" />
+            <span>{{ node.title }}</span>
+            <small>{{ node.code }}</small>
+          </div>
+        </template>
+      </a-tree>
+    </a-spin>
+  </aside>
+</template>
+
+<style scoped>
+.module-tree-panel {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 8px;
+  border-right: 1px solid #e5e7eb;
+  background: #fff;
+  padding: 10px 8px;
+}
+header,
+header > div,
+.tree-title {
+  display: flex;
+  align-items: center;
+}
+header {
+  justify-content: space-between;
+}
+header > div {
+  gap: 8px;
+}
+header span {
+  color: #8c8c8c;
+  font-size: 12px;
+}
+.tree-header-actions {
+  gap: 4px;
+}
+.tree-title {
+  min-width: 0;
+  gap: 7px;
+}
+.tree-title span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tree-title small {
+  margin-left: auto;
+  color: #9ca3af;
+  font-size: 10px;
+}
+:deep(.ant-spin-nested-loading) {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+}
+:deep(.ant-tree) {
+  background: transparent;
+}
+</style>