权限管理，没有页面修改之前版本

inventory-web/src/components/BaseTable/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="base-table">
+    <el-table
+        v-bind="$attrs"
+        :data="data"
+        border
+        stripe
+        v-loading="loading"
+        header-cell-class-name="table-header-gray"
+    >
+      <template v-for="col in visibleColumns" :key="col.prop">
+
+        <el-table-column
+            v-if="!col.slot"
+            v-bind="col"
+            :prop="col.prop"
+            :label="col.label"
+            :min-width="col.minWidth || '120'"
+            :width="col.width"
+            :fixed="col.fixed"
+            show-overflow-tooltip
+        />
+
+        <el-table-column
+            v-else
+            v-bind="col"
+            :prop="col.prop"
+            :label="col.label"
+            :min-width="col.minWidth || '120'"
+            :width="col.width"
+            :fixed="col.fixed"
+        >
+          <template #default="scope">
+            <slot :name="col.prop" :row="scope.row" :index="scope.$index"></slot>
+          </template>
+        </el-table-column>
+
+      </template>
+
+      <template #empty>
+        <el-empty description="暂无数据" />
+      </template>
+    </el-table>
+
+    <div v-if="showPagination" class="pagination-container">
+      <el-pagination
+          v-bind="paginationConfig"
+          v-model:current-page="localPage"
+          v-model:page-size="localLimit"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { usePermissionStore } from '@/stores/permission'
+
+// --- Props 定义 ---
+const props = defineProps({
+  // 数据源
+  data: { type: Array, default: () => [] },
+  // 列配置 (核心)
+  columns: { type: Array as () => any[], required: true },
+  // 页面编码 (用于权限隔离，如果列名全局唯一可不传，但建议传)
+  pageCode: { type: String, default: '' },
+
+  loading: { type: Boolean, default: false },
+  total: { type: Number, default: 0 },
+  showPagination: { type: Boolean, default: true },
+  page: { type: Number, default: 1 },
+  limit: { type: Number, default: 10 }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
+
+const permStore = usePermissionStore()
+
+// --- 核心逻辑：计算当前可见的列 ---
+const visibleColumns = computed(() => {
+  return props.columns.filter(col => {
+    // 1. 获取该列在数据库中对应的 code
+    // 如果列配置里显式写了 code，就用写的；如果没有，默认认为 prop 就是 code
+    const permissionKey = col.code || col.prop
+
+    // 2. 如果这个列不需要权限控制 (比如序号 index)，可以在配置里加个 ignoreAuth: true
+    if (col.ignoreAuth) return true
+
+    // 3. 问 Store：我有这个权限吗？
+    // 注意：我们在 PermissionStore 里存的是全局唯一的 code
+    return permStore.hasColumnPermission(props.pageCode, permissionKey)
+  })
+})
+
+// --- 分页逻辑处理 ---
+const localPage = ref(props.page)
+const localLimit = ref(props.limit)
+
+watch(() => props.page, (val) => localPage.value = val)
+watch(() => props.limit, (val) => localLimit.value = val)
+
+const handleSizeChange = (val: number) => {
+  emit('update:limit', val)
+  emit('pagination', { page: localPage.value, limit: val })
+}
+
+const handleCurrentChange = (val: number) => {
+  emit('update:page', val)
+  emit('pagination', { page: val, limit: localLimit.value })
+}
+
+const paginationConfig = {
+  pageSizes: [10, 20, 50, 100],
+  background: true
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+:deep(.table-header-gray th) {
+  background-color: #f8f9fb !important;
+  color: #606266;
+  font-weight: 600;
+  height: 45px;
+}
+</style>