vue2server7 7.0.109 → 7.0.110

package/frontEnd/src/components/BaseTable.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="base-table-wrapper">
+    <!-- 工具栏区域 -->
+    <div class="table-toolbar" v-if="showToolbar">
+      <slot name="toolbar">
+        <!-- 列配置按钮 -->
+        <TableColumnSettings
+          :columns="columnSettings"
+          :selected-keys="selectedKeys"
+          :storage-key="storageKey"
+          @confirm="onColumnConfirm"
+        />
+      </slot>
+    </div>
+
+    <!-- 表格主体 -->
+    <el-table
+      ref="tableRef"
+      :key="tableKey"
+      v-bind="$attrs"
+      :data="data"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+      v-on="$listeners"
+    >
+      <!-- 序号列（可选） -->
+      <el-table-column
+        v-if="showIndex"
+        type="index"
+        label="序号"
+        width="60"
+        align="center"
+      />
+
+      <!-- 动态列渲染 -->
+      <el-table-column
+        v-for="col in visibleColumns"
+        :key="col.prop"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'left'"
+        :header-align="col.headerAlign || col.align || 'left'"
+        :sortable="col.sortable || false"
+        :fixed="col.fixed || false"
+      >
+        <!-- 自定义列插槽（格式为 column-xxx，xxx 是列的 prop） -->
+        <template #default="scope">
+          <slot :name="'column-' + col.prop" v-bind="scope">
+            {{ scope.row[col.prop] }}
+          </slot>
+        </template>
+      </el-table-column>
+
+      <!-- 操作列（插槽） -->
+      <slot name="action-column" />
+    </el-table>
+
+    <!-- 分页区域（可选） -->
+    <div class="table-pagination" v-if="showPagination && total > 0">
+      <el-pagination
+        layout="total, prev, pager, next"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, useAttrs } from 'vue'
+import TableColumnSettings from './TableColumnSettings.vue'
+
+// 列配置接口
+interface ColumnConfig {
+  prop: string           // 列唯一标识（必填）
+  label: string          // 列显示名称（必填）
+  width?: number         // 列宽
+  minWidth?: number      // 最小列宽
+  align?: 'left' | 'center' | 'right'  // 对齐方式
+  headerAlign?: 'left' | 'center' | 'right'  // 表头对齐
+  sortable?: boolean | 'custom'  // 是否可排序
+  fixed?: boolean | 'left' | 'right'  // 是否固定
+  disabled?: boolean     // 是否禁用（禁用的列始终显示，不可取消）
+}
+
+// 组件 Props 定义
+const props = defineProps({
+  /**
+   * 表格数据
+   */
+  data: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 列配置数组
+   */
+  columns: {
+    type: Array as () => ColumnConfig[],
+    default: () => []
+  },
+  /**
+   * 是否显示序号列
+   */
+  showIndex: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示工具栏
+   */
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示分页
+   */
+  showPagination: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 当前页码
+   */
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 每页条数
+   */
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  /**
+   * 总条数
+   */
+  total: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * localStorage 存储键名
+   * 用于持久化用户的列配置
+   * 不设置则不持久化
+   */
+  storageKey: {
+    type: String,
+    default: ''
+  }
+})
+
+// 组件 Events 定义
+const emit = defineEmits<{
+  (e: 'update:currentPage', page: number): void
+  (e: 'pageChange', page: number): void
+}>()
+
+// ==================== 响应式状态 ====================
+
+/**
+ * el-table 实例引用
+ * 可以通过 ref 调用 Element Plus 表格的原生方法
+ */
+const tableRef = ref()
+
+/**
+ * 表格 key，用于强制刷新表格
+ * 列配置变更后更新此值，触发表格重新渲染
+ */
+const tableKey = ref(0)
+
+/**
+ * 当前选中的列 key 数组
+ * 存储用户选择显示的列 prop
+ */
+const selectedKeys = ref<string[]>([])
+
+// ==================== 计算属性 ====================
+
+/**
+ * 列配置组件需要的数据格式
+ * 只提取列配置组件需要的三个字段
+ */
+const columnSettings = computed(() => {
+  return props.columns.map(col => ({
+    prop: col.prop,
+    label: col.label,
+    disabled: col.disabled || false
+  }))
+})
+
+/**
+ * 当前可见的列
+ * 根据 selectedKeys 过滤出用户选择显示的列
+ */
+const visibleColumns = computed(() => {
+  return props.columns.filter(col => selectedKeys.value.includes(col.prop))
+})
+
+// ==================== 方法 ====================
+
+/**
+ * 列配置确认回调
+ * @param keys - 用户选中的列 prop 数组
+ *
+ * 逻辑:
+ * 1. 更新选中的列
+ * 2. 更新 tableKey 强制表格重新渲染
+ */
+const onColumnConfirm = (keys: string[]) => {
+  selectedKeys.value = keys
+  tableKey.value += 1  // 强制刷新表格
+}
+
+/**
+ * 分页切换回调
+ * @param page - 目标页码
+ *
+ * 触发两个事件:
+ * 1. update:currentPage - 支持 v-model:currentPage
+ * 2. pageChange - 普通分页变更事件
+ */
+const onPageChange = (page: number) => {
+  emit('update:currentPage', page)
+  emit('pageChange', page)
+}
+
+// ==================== 生命周期 ====================
+
+/**
+ * 组件挂载时初始化
+ *
+ * 逻辑:
+ * 1. 如果设置了 storageKey，从 localStorage 读取保存的配置
+ * 2. 读取失败或没有存储，则默认显示所有列
+ */
+onMounted(() => {
+  if (props.storageKey) {
+    const stored = localStorage.getItem(props.storageKey)
+    if (stored) {
+      try {
+        selectedKeys.value = JSON.parse(stored)
+      } catch {
+        // 解析失败，默认显示所有列
+        selectedKeys.value = props.columns.map(col => col.prop)
+      }
+    } else {
+      // 没有存储，默认显示所有列
+      selectedKeys.value = props.columns.map(col => col.prop)
+    }
+  } else {
+    // 没有设置 storageKey，默认显示所有列
+    selectedKeys.value = props.columns.map(col => col.prop)
+  }
+})
+
+// 暴露 el-table 实例给父组件，方便调用原生方法
+defineExpose({
+  tableRef
+})
+</script>
+
+<style scoped>
+/**
+ * 表格外层容器
+ */
+.base-table-wrapper {
+  width: 100%;
+}
+
+/**
+ * 工具栏样式
+ * 位于表格上方，包含操作按钮等
+ */
+.table-toolbar {
+  margin-bottom: 12px;
+}
+
+/**
+ * 分页容器样式
+ * 位于表格下方，右对齐
+ */
+.table-pagination {
+  margin-top: 12px;
+  text-align: right;
+}
+</style>

package/frontEnd/src/pages/BaseTableDemoPage.vue

@@ -0,0 +1,236 @@
+<template>
+  <section class="page base-table-demo-page">
+    <h1 class="title">封装表格组件演示</h1>
+
+    <!-- 查询工具栏 -->
+    <div class="search-toolbar">
+      <el-input v-model="searchForm.keyword" placeholder="关键词搜索" clearable style="width: 200px" />
+      <el-select v-model="searchForm.department" placeholder="选择部门" clearable style="width: 140px; margin-left: 12px">
+        <el-option label="技术部" value="技术部" />
+        <el-option label="产品部" value="产品部" />
+        <el-option label="运营部" value="运营部" />
+        <el-option label="市场部" value="市场部" />
+      </el-select>
+      <el-button type="primary" @click="onSearch" style="margin-left: 12px">查询</el-button>
+      <el-button @click="onReset">重置</el-button>
+    </div>
+
+    <!-- 使用封装的 BaseTable 组件 -->
+    <BaseTable
+      ref="baseTableRef"
+      :data="tableData"
+      :columns="columns"
+      :show-index="true"
+      :show-toolbar="true"
+      :show-pagination="true"
+      v-model:current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      storage-key="base-table-demo"
+      @page-change="onPageChange"
+    >
+      <!-- 自定义工具栏插槽（可选，不填则显示默认的列配置按钮） -->
+      <!-- <template #toolbar>
+        <el-button type="success">导出</el-button>
+        <TableColumnSettings
+          :columns="columns.map(c => ({ prop: c.prop, label: c.label, disabled: c.disabled }))"
+          :selected-keys="selectedKeys"
+          storage-key="base-table-demo"
+          @confirm="onColumnConfirm"
+        />
+      </template> -->
+
+      <!-- 自定义姓名列 -->
+      <template #column-name="{ row }">
+        <el-tag type="primary" size="small">{{ row.name }}</el-tag>
+      </template>
+
+      <!-- 自定义状态列 -->
+      <template #column-status="{ row }">
+        <el-tag :type="getStatusType(row.status)" size="small">
+          {{ row.status }}
+        </el-tag>
+      </template>
+
+      <!-- 操作列（通过插槽添加） -->
+      <template #action-column>
+        <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="onView(row)">查看</el-button>
+            <el-button type="primary" link size="small" @click="onEdit(row)">编辑</el-button>
+            <el-button type="danger" link size="small" @click="onDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </BaseTable>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import BaseTable from '../components/BaseTable.vue'
+
+// 表格行数据接口
+interface TableRow {
+  id: number
+  name: string
+  department: string
+  position: string
+  phone: string
+  email: string
+  joinDate: string
+  status: string
+}
+
+// 搜索表单
+interface SearchForm {
+  keyword: string
+  department: string
+}
+
+// ==================== 响应式状态 ====================
+
+const baseTableRef = ref()
+
+// 搜索表单
+const searchForm = reactive<SearchForm>({
+  keyword: '',
+  department: ''
+})
+
+// 表格数据
+const tableData = ref<TableRow[]>([])
+
+// 分页
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(50)
+
+// 列配置
+const columns = [
+  { prop: 'name', label: '姓名', width: 120, disabled: true },  // 禁用 = 强制显示，不可取消
+  { prop: 'department', label: '部门', width: 120 },
+  { prop: 'position', label: '职位', width: 140 },
+  { prop: 'phone', label: '电话', width: 140 },
+  { prop: 'email', label: '邮箱', minWidth: 180 },
+  { prop: 'joinDate', label: '入职日期', width: 120, align: 'center' },
+  { prop: 'status', label: '状态', width: 100, align: 'center' }
+]
+
+// ==================== 方法 ====================
+
+/**
+ * 根据状态返回对应的 tag 类型
+ */
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    '在职': 'success',
+    '离职': 'info',
+    '休假': 'warning'
+  }
+  return map[status] || 'info'
+}
+
+/**
+ * 查询
+ */
+const onSearch = () => {
+  page.value = 1
+  loadData()
+  ElMessage.success('查询成功')
+}
+
+/**
+ * 重置
+ */
+const onReset = () => {
+  searchForm.keyword = ''
+  searchForm.department = ''
+  page.value = 1
+  loadData()
+}
+
+/**
+ * 分页切换
+ */
+const onPageChange = (p: number) => {
+  page.value = p
+  loadData()
+}
+
+/**
+ * 查看
+ */
+const onView = (row: TableRow) => {
+  ElMessageBox.alert(
+    `员工信息：\n姓名：${row.name}\n部门：${row.department}\n职位：${row.position}`,
+    '查看详情',
+    { confirmButtonText: '确定' }
+  )
+}
+
+/**
+ * 编辑
+ */
+const onEdit = (row: TableRow) => {
+  ElMessage.info(`编辑员工：${row.name}`)
+}
+
+/**
+ * 删除
+ */
+const onDelete = (row: TableRow) => {
+  ElMessageBox.confirm(
+    `确定删除员工「${row.name}」吗？`,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  ).then(() => {
+    ElMessage.success('删除成功')
+  }).catch(() => {})
+}
+
+/**
+ * 加载模拟数据
+ */
+const loadData = () => {
+  const data: TableRow[] = []
+  for (let i = 0; i < pageSize.value; i++) {
+    const index = (page.value - 1) * pageSize.value + i + 1
+    data.push({
+      id: index,
+      name: `员工${index}`,
+      department: ['技术部', '产品部', '运营部', '市场部'][index % 4],
+      position: ['开发工程师', '产品经理', '运营专员', '市场专员'][index % 4],
+      phone: `138${String(index).padStart(8, '0')}`,
+      email: `employee${index}@example.com`,
+      joinDate: `2024-${String((index % 12) + 1).padStart(2, '0')}-${String((index % 28) + 1).padStart(2, '0')}`,
+      status: ['在职', '离职', '休假'][index % 3]
+    })
+  }
+  tableData.value = data
+}
+
+// ==================== 生命周期 ====================
+
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<style scoped>
+.page.base-table-demo-page {
+  padding: 16px;
+}
+.title {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+.search-toolbar {
+  margin-bottom: 12px;
+}
+</style>

package/frontEnd/src/router/routes.js

@@ -7,6 +7,7 @@ import DateRangePage from '../pages/DateRangePage.vue'
 import OrgTreeSelectPage from '../pages/OrgTreeSelectPage.vue'
 import MoneyInputPage from '../pages/MoneyInputPage.vue'
 import ColumnConfigDemoPage from '../pages/ColumnConfigDemoPage.vue'
+import BaseTableDemoPage from '../pages/BaseTableDemoPage.vue'
 
 export const routes = [
   {
@@ -93,5 +94,14 @@ export const routes = [
       title: '表格列配置演示',
       showInMenu: true
     }
+  },
+  {
+    path: '/base-table-demo',
+    name: 'BaseTableDemo',
+    component: BaseTableDemoPage,
+    meta: {
+      title: '封装表格组件演示',
+      showInMenu: true
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.109",
+  "version": "7.0.110",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",