vue2server7 7.0.108 → 7.0.110

package/frontEnd/src/components/TableColumnSettings.vue

@@ -0,0 +1,296 @@
+<template>
+  <!-- 列配置触发按钮 -->
+  <el-button @click="visible = true">
+    <el-icon><Setting /></el-icon>
+    列配置
+  </el-button>
+
+  <!-- 列配置弹窗 -->
+  <el-dialog
+    v-model="visible"
+    title="表格列配置"
+    width="760px"
+    append-to-body
+  >
+    <!-- 提示文字 -->
+    <div class="desc">请选择需要在表格中显示的数据列</div>
+
+    <!-- 列选择容器 -->
+    <div class="column-box">
+      <!-- 全选行 -->
+      <div class="check-all-row">
+        <el-checkbox
+          v-model="checkAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAllChange"
+        >
+          全选
+        </el-checkbox>
+      </div>
+
+      <!-- 列多选组 -->
+      <el-checkbox-group
+        v-model="checkedKeys"
+        class="column-list"
+        @change="updateCheckAllStatus"
+      >
+        <el-checkbox
+          v-for="item in columns"
+          :key="item.prop"
+          :label="item.prop"
+          :disabled="item.disabled"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+    <!-- 弹窗底部按钮 -->
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">
+        确认
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+// 导入 Vue 组合式 API
+import { ref, computed, watch } from 'vue'
+// 导入 Element Plus 图标
+import { Setting } from '@element-plus/icons-vue'
+
+/**
+ * 组件 Props 定义
+ */
+const props = defineProps({
+  /**
+   * 列配置数组
+   * 每个对象包含:
+   *   - prop: 列唯一标识（对应表格列的 prop）
+   *   - label: 列显示名称
+   *   - disabled: 是否禁用（禁用的列始终显示，不可取消选中）
+   */
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 当前选中的列 key 数组
+   * 用于外部控制初始选中状态
+   */
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 按钮显示文本
+   * 可自定义按钮文字，默认"列配置"
+   */
+  buttonText: {
+    type: String,
+    default: '列配置'
+  },
+  /**
+   * localStorage 存储键名
+   * 设置后会自动将列配置持久化到浏览器本地存储
+   * 刷新页面后配置自动恢复
+   */
+  storageKey: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 组件 Events 定义
+ * confirm: 用户点击确认按钮时触发，参数为选中的列 key 数组
+ */
+const emit = defineEmits(['confirm'])
+
+// ==================== 响应式状态 ====================
+
+/**
+ * 弹窗显示/隐藏状态
+ * true: 弹窗打开
+ * false: 弹窗关闭
+ */
+const visible = ref(false)
+
+/**
+ * 当前选中的列 key 数组
+ * 存储用户在弹窗中勾选的列 prop
+ */
+const checkedKeys = ref([])
+
+/**
+ * 全选复选框状态
+ * true: 全部选中
+ * false: 全部未选中
+ */
+const checkAll = ref(false)
+
+/**
+ * 半选状态标识
+ * true: 部分选中（显示减号）
+ * false: 全选或全不选
+ */
+const isIndeterminate = ref(false)
+
+// ==================== 计算属性 ====================
+
+/**
+ * 可操作的列 key 数组
+ * 过滤掉 disabled = true 的列
+ * 这些列可以被用户自由勾选/取消
+ */
+const enabledKeys = computed(() => {
+  return props.columns
+    .filter(item => !item.disabled)
+    .map(item => item.prop)
+})
+
+// ==================== 监听器 ====================
+
+/**
+ * 监听弹窗打开状态
+ * 弹窗打开时：
+ * 1. 优先从 localStorage 读取保存的配置
+ * 2. 没有存储则使用外部传入的 selectedKeys
+ * 3. 更新全选/半选状态
+ */
+watch(visible, val => {
+  if (val) {
+    // 优先从 localStorage 读取，其次使用 props
+    if (props.storageKey) {
+      const stored = localStorage.getItem(props.storageKey)
+      if (stored) {
+        try {
+          checkedKeys.value = JSON.parse(stored)
+        } catch {
+          // JSON 解析失败时回退到默认值
+          checkedKeys.value = [...props.selectedKeys]
+        }
+      } else {
+        checkedKeys.value = [...props.selectedKeys]
+      }
+    } else {
+      checkedKeys.value = [...props.selectedKeys]
+    }
+    // 更新全选复选框状态
+    updateCheckAllStatus()
+  }
+})
+
+// ==================== 方法 ====================
+
+/**
+ * 全选/取消全选处理函数
+ * @param {boolean} val - 全选框当前值
+ *
+ * 逻辑说明:
+ * - 全选时：所有可操作列 + 已选中的禁用列 都被选中
+ * - 取消全选时：只保留禁用列中已选中的项
+ */
+function handleCheckAllChange(val) {
+  // 找出禁用且已选中的列（这些列必须始终保持选中）
+  const disabledCheckedKeys = props.columns
+    .filter(item => item.disabled && checkedKeys.value.includes(item.prop))
+    .map(item => item.prop)
+
+  checkedKeys.value = val
+    // 全选：禁用的已选中项 + 所有可操作项
+    ? [...new Set([...disabledCheckedKeys, ...enabledKeys.value])]
+    // 取消全选：只保留禁用的已选中项
+    : disabledCheckedKeys
+
+  // 更新全选和半选状态
+  updateCheckAllStatus()
+}
+
+/**
+ * 更新全选和半选状态
+ *
+ * 计算逻辑:
+ * 1. 统计可操作列中已选中的数量
+ * 2. 数量 = 总数 → 全选
+ * 3. 0 < 数量 < 总数 → 半选
+ * 4. 数量 = 0 → 全不选
+ */
+function updateCheckAllStatus() {
+  // 统计可操作列中已选中的数量
+  const count = checkedKeys.value.filter(key =>
+    enabledKeys.value.includes(key)
+  ).length
+
+  // 设置全选状态
+  checkAll.value = count === enabledKeys.value.length
+  // 设置半选状态
+  isIndeterminate.value = count > 0 && count < enabledKeys.value.length
+}
+
+/**
+ * 确认按钮处理函数
+ *
+ * 逻辑:
+ * 1. 如果设置了 storageKey，将配置保存到 localStorage
+ * 2. 触发 confirm 事件，通知父组件
+ * 3. 关闭弹窗
+ */
+function handleConfirm() {
+  // 保存到 localStorage 持久化
+  if (props.storageKey) {
+    localStorage.setItem(props.storageKey, JSON.stringify(checkedKeys.value))
+  }
+  // 通知父组件选中结果
+  emit('confirm', checkedKeys.value)
+  // 关闭弹窗
+  visible.value = false
+}
+</script>
+
+<style scoped>
+/**
+ * 提示文字样式
+ */
+.desc {
+  margin-bottom: 22px;
+  color: #666;
+  font-size: 16px;
+}
+
+/**
+ * 列选择容器边框
+ */
+.column-box {
+  border: 1px solid #dcdfe6;
+}
+
+/**
+ * 全选行样式
+ */
+.check-all-row {
+  padding: 18px 24px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+/**
+ * 列列表样式
+ * flex 布局自动换行
+ */
+.column-list {
+  padding: 22px 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 22px 28px;
+}
+
+/**
+ * 覆盖 Element Plus 默认复选框右边距
+ * 因为使用 gap 控制间距，不需要默认的 margin-right
+ */
+:deep(.el-checkbox) {
+  margin-right: 0;
+}
+</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/pages/ColumnConfigDemoPage.vue

@@ -0,0 +1,166 @@
+<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>
+
+      <!-- 列配置组件 -->
+      <TableColumnSettings
+        :columns="columnSettings"
+        :selected-keys="selectedKeys"
+        storage-key="column-config-demo"
+        @confirm="onColumnConfirm"
+      />
+    </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.prop"
+        :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'
+import TableColumnSettings from '../components/TableColumnSettings.vue'
+
+// 表格数据接口
+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([
+  { 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 columnSettings = computed(() => {
+  return columns.map(col => ({
+    prop: col.prop,
+    label: col.label,
+    disabled: col.prop === 'name'  // 姓名列强制显示，不可取消
+  }))
+})
+
+// 当前选中的列
+const selectedKeys = ref<string[]>([])
+
+// 可见列
+const visibleColumns = computed(() => {
+  return columns.filter(col => selectedKeys.value.includes(col.prop))
+})
+
+// 列配置确认
+const onColumnConfirm = (keys: string[]) => {
+  selectedKeys.value = keys
+  tableKey.value += 1  // 强制刷新表格
+}
+
+// 分页切换
+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(() => {
+  // 从 localStorage 读取配置，没有则默认全选
+  const storageKey = 'column-config-demo'
+  const stored = localStorage.getItem(storageKey)
+  if (stored) {
+    try {
+      selectedKeys.value = JSON.parse(stored)
+    } catch {
+      selectedKeys.value = columns.map(col => col.prop)
+    }
+  } else {
+    selectedKeys.value = columns.map(col => col.prop)
+  }
+  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;
+}
+</style>