vue2server7 7.0.110 → 7.0.112

package/frontEnd/src/pages/ElTablePlusPage.vue

@@ -0,0 +1,203 @@
+<template>
+  <section class="page el-table-plus-page">
+    <h1 class="title">ElTablePlus 组件演示</h1>
+
+    <div class="search-toolbar">
+      <el-input
+        v-model="searchForm.keyword"
+        placeholder="关键词搜索"
+        clearable
+        style="width: 200px"
+      />
+      <el-select
+        v-model="searchForm.status"
+        placeholder="选择状态"
+        clearable
+        style="width: 140px; margin-left: 12px"
+      >
+        <el-option label="在职" value="在职" />
+        <el-option label="离职" value="离职" />
+        <el-option label="休假" value="休假" />
+      </el-select>
+      <el-button type="primary" style="margin-left: 12px" @click="onSearch">查询</el-button>
+      <el-button @click="onReset">重置</el-button>
+    </div>
+
+    <ElTablePlus
+      ref="tablePlusRef"
+      :data="tableData"
+      :loading="loading"
+      row-key="id"
+      :pagination="true"
+      :total="total"
+      v-model:page="page"
+      v-model:page-size="pageSize"
+      @pagination-change="onPaginationChange"
+    >
+      <template #toolbar>
+        <el-button type="primary" @click="onAdd">新增</el-button>
+        <el-button type="success" @click="onExport">导出</el-button>
+      </template>
+
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="name" label="姓名" width="120" />
+      <el-table-column prop="department" label="部门" width="120" />
+      <el-table-column prop="position" label="职位" width="140" />
+      <el-table-column prop="phone" label="电话" width="140" />
+      <el-table-column prop="email" label="邮箱" min-width="200" />
+      <el-table-column prop="joinDate" label="入职日期" width="120" align="center" />
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.status)" size="small">
+            {{ row.status }}
+          </el-tag>
+        </template>
+      </el-table-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>
+    </ElTablePlus>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import ElTablePlus from '../components/ElTablePlus.vue'
+
+interface TableRow {
+  id: number
+  name: string
+  department: string
+  position: string
+  phone: string
+  email: string
+  joinDate: string
+  status: string
+}
+
+interface SearchForm {
+  keyword: string
+  status: string
+}
+
+const tablePlusRef = ref()
+const loading = ref(false)
+const tableData = ref<TableRow[]>([])
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(50)
+
+const searchForm = reactive<SearchForm>({
+  keyword: '',
+  status: '',
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    '在职': 'success',
+    '离职': 'info',
+    '休假': 'warning',
+  }
+  return map[status] || 'info'
+}
+
+const loadData = () => {
+  loading.value = true
+
+  setTimeout(() => {
+    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
+    loading.value = false
+  }, 300)
+}
+
+const onSearch = () => {
+  page.value = 1
+  loadData()
+  ElMessage.success('查询成功')
+}
+
+const onReset = () => {
+  searchForm.keyword = ''
+  searchForm.status = ''
+  page.value = 1
+  loadData()
+}
+
+const onPaginationChange = ({ page: p, pageSize: ps }: { page: number; pageSize: number }) => {
+  loadData()
+}
+
+const onAdd = () => {
+  ElMessage.info('新增员工')
+}
+
+const onExport = () => {
+  ElMessage.success('导出成功')
+}
+
+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(() => {})
+}
+
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<style scoped>
+.page.el-table-plus-page {
+  padding: 16px;
+}
+
+.title {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+
+.search-toolbar {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+</style>

package/frontEnd/src/router/routes.js

@@ -8,6 +8,7 @@ import OrgTreeSelectPage from '../pages/OrgTreeSelectPage.vue'
 import MoneyInputPage from '../pages/MoneyInputPage.vue'
 import ColumnConfigDemoPage from '../pages/ColumnConfigDemoPage.vue'
 import BaseTableDemoPage from '../pages/BaseTableDemoPage.vue'
+import ElTablePlusPage from '../pages/ElTablePlusPage.vue'
 
 export const routes = [
   {
@@ -103,5 +104,14 @@ export const routes = [
       title: '封装表格组件演示',
       showInMenu: true
     }
+  },
+  {
+    path: '/el-table-plus',
+    name: 'ElTablePlus',
+    component: ElTablePlusPage,
+    meta: {
+      title: 'ElTablePlus 组件',
+      showInMenu: true
+    }
   }
 ]

package/package.json

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

package/docs/superpowers/plans/2026-05-13-table-column-config-demo-plan.md

@@ -1,275 +0,0 @@
-# 表格列配置演示页面 Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** 在前端项目中新增一个"表格列配置演示"路由页面，提供基础的表格框架和预留列配置扩展点
-
-**Architecture:** 遵循现有项目结构，创建新的 Vue 页面组件并添加路由配置，保持与现有页面一致的代码风格
-
-**Tech Stack:** Vue 3 + Composition API + TypeScript + Element Plus
-
----
-
-## 文件结构
-
-| 文件 | 操作 | 说明 |
-|------|------|------|
-| `frontEnd/src/pages/ColumnConfigDemoPage.vue` | 创建 | 表格列配置演示页面 |
-| `frontEnd/src/router/routes.js` | 修改 | 添加新路由配置 |
-
----
-
-### Task 1: 创建列配置演示页面组件
-
-**Files:**
-- Create: `frontEnd/src/pages/ColumnConfigDemoPage.vue`
-
-- [ ] **Step 1: 创建基础页面模板和脚本**
-
-```vue
-<template>
-  <section class="page column-config-demo-page">
-    <h1 class="title">表格列配置演示</h1>
-    
-    <div class="toolbar">
-      <el-button type="primary">查询</el-button>
-      <el-button>重置</el-button>
-      
-      <!-- 列设置按钮 - 预留位置，用户自行实现弹窗逻辑 -->
-      <el-popover placement="bottom" trigger="click" width="300">
-        <template #reference>
-          <el-button>列设置</el-button>
-        </template>
-        <!-- 列配置内容区域 - 用户自行开发 -->
-        <div class="column-settings-panel">
-          <p>列配置区域</p>
-          <p>请在此处实现列配置功能</p>
-        </div>
-      </el-popover>
-    </div>
-
-    <el-table
-      :key="tableKey"
-      :data="tableData"
-      border
-      stripe
-      size="small"
-      style="width: 100%"
-    >
-      <el-table-column type="index" label="序号" width="60" align="center" />
-      <el-table-column
-        v-for="col in visibleColumns"
-        :key="col.key"
-        :prop="col.prop"
-        :label="col.label"
-        :width="col.width"
-        :min-width="col.minWidth"
-        :align="col.align || 'left'"
-        :fixed="col.fixed || false"
-      >
-      </el-table-column>
-    </el-table>
-
-    <div class="pagination">
-      <el-pagination
-        layout="total, prev, pager, next"
-        :current-page="page"
-        :page-size="pageSize"
-        :total="total"
-        @current-change="onPageChange"
-      />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
-
-// 列配置接口
-interface ColumnConfig {
-  key: string
-  prop: string
-  label: string
-  width?: number
-  minWidth?: number
-  align?: 'left' | 'center' | 'right'
-  fixed?: boolean | 'left' | 'right'
-  visible?: boolean
-}
-
-// 表格数据接口
-interface TableRow {
-  id: number
-  name: string
-  department: string
-  position: string
-  phone: string
-  email: string
-  joinDate: string
-  status: string
-}
-
-// 响应式数据
-const tableKey = ref(0)
-const page = ref(1)
-const pageSize = ref(10)
-const total = ref(50)
-const tableData = ref<TableRow[]>([])
-
-// 列配置 - 可在此基础上扩展更多属性
-const columns = reactive<ColumnConfig[]>([
-  { key: 'name', prop: 'name', label: '姓名', width: 100 },
-  { key: 'department', prop: 'department', label: '部门', width: 120 },
-  { key: 'position', prop: 'position', label: '职位', width: 120 },
-  { key: 'phone', prop: 'phone', label: '电话', width: 140 },
-  { key: 'email', prop: 'email', label: '邮箱', minWidth: 180 },
-  { key: 'joinDate', prop: 'joinDate', label: '入职日期', width: 120, align: 'center' },
-  { key: 'status', prop: 'status', label: '状态', width: 100, align: 'center' }
-])
-
-// 可见列计算 - 预留，用户可自行控制显示/隐藏
-const visibleColumns = computed(() => {
-  return columns.filter(col => col.visible !== false)
-})
-
-// 分页切换
-const onPageChange = (p: number) => {
-  page.value = p
-  loadData()
-}
-
-// 加载模拟数据
-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.column-config-demo-page {
-  padding: 16px;
-}
-.title {
-  font-size: 18px;
-  margin-bottom: 12px;
-}
-.toolbar {
-  margin-bottom: 12px;
-}
-.pagination {
-  margin-top: 12px;
-  text-align: right;
-}
-.column-settings-panel {
-  padding: 8px 0;
-}
-</style>
-```
-
-- [ ] **Step 2: 验证文件创建成功**
-
-检查文件是否存在:
-```bash
-ls -la frontEnd/src/pages/ColumnConfigDemoPage.vue
-```
-Expected: 文件存在，大小约 3-4KB
-
-- [ ] **Step 3: 提交**
-
-```bash
-git add frontEnd/src/pages/ColumnConfigDemoPage.vue
-git commit -m "feat: add column config demo page skeleton"
-```
-
----
-
-### Task 2: 添加路由配置
-
-**Files:**
-- Modify: `frontEnd/src/router/routes.js:8-87`
-
-- [ ] **Step 1: 修改 routes.js 添加导入和路由配置**
-
-在文件顶部导入语句区域添加（第8行后）:
-```javascript
-import ColumnConfigDemoPage from '../pages/ColumnConfigDemoPage.vue'
-```
-
-在 routes 数组末尾添加新路由（第86行前）:
-```javascript
-  {
-    path: '/column-config-demo',
-    name: 'ColumnConfigDemo',
-    component: ColumnConfigDemoPage,
-    meta: {
-      title: '表格列配置演示',
-      showInMenu: true
-    }
-  }
-```
-
-- [ ] **Step 2: 验证路由配置**
-
-检查文件内容:
-```bash
-grep -n "ColumnConfigDemo" frontEnd/src/router/routes.js
-```
-Expected: 至少两行输出（导入语句和路由配置）
-
-- [ ] **Step 3: 提交**
-
-```bash
-git add frontEnd/src/router/routes.js
-git commit -m "feat: add column config demo route"
-```
-
----
-
-### Task 3: 验证页面功能
-
-**Files:**
-- Test: 手动运行前端项目验证
-
-- [ ] **Step 1: 启动前端开发服务器**
-
-```bash
-npm run front-dev
-```
-Expected: Vite 服务器启动成功，无编译错误
-
-- [ ] **Step 2: 手动验证**
-  1. 浏览器访问页面
-  2. 检查侧边栏菜单是否显示"表格列配置演示"
-  3. 点击菜单项，页面是否正常加载
-  4. 检查表格数据是否显示
-  5. 检查分页是否正常工作
-  6. 检查"列设置"按钮是否可点击
-
-- [ ] **Step 3: 提交验证完成（无代码变更）**
-
----
-
-## 计划完成检查清单
-
-- [x] 所有文件路径正确
-- [x] 代码示例完整无占位符
-- [x] 命令和预期输出明确
-- [x] 与现有项目风格一致
-- [x] 预留了用户自定义扩展点