Utils 工具函数

工具函数模块提供了常用的辅助函数，帮助开发者更高效地处理数据。

导入方式

import { serializeColumn, filterColumnByPermiss } from '@h3/cloudpivot-nexus-ui'

API 参考

serializeColumn

序列化表格列配置，用于表格组件的数据处理。

语法

serializeColumn(columns, options)

参数

参数	说明	类型	默认值
columns	表格列配置	VTableColumn[]	-
options	序列化选项	SerializeOptions	{}

返回值

返回处理后的列配置数组。

使用示例

import { serializeColumn } from '@h3/cloudpivot-nexus-ui'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    editor: 'text'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    editor: 'number'
  }
]

const serializedColumns = serializeColumn(columns, {
  mode: 'edit',
  permissions: ['read', 'write']
})

console.log(serializedColumns)

filterColumnByPermiss

根据权限过滤表格列，用于权限控制。

语法

filterColumnByPermiss(columns, permissions)

参数

参数	说明	类型	默认值
columns	表格列配置	VTableColumn[]	-
permissions	权限配置	PermissionConfig	-

返回值

返回过滤后的列配置数组。

使用示例

import { filterColumnByPermiss } from '@h3/cloudpivot-nexus-ui'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    permission: 'read'
  },
  {
    title: '薪资',
    dataIndex: 'salary',
    permission: 'admin'
  }
]

const permissions = {
  user: ['read'],
  admin: ['read', 'write', 'admin']
}

const filteredColumns = filterColumnByPermiss(columns, permissions.admin)

console.log(filteredColumns)

类型定义

VTableColumn

interface VTableColumn {
  title: string
  dataIndex: string
  editor?: 'text' | 'number' | 'date' | 'select' | 'checkbox' | 'radio'
  permission?: string
  width?: number | string
  fixed?: 'left' | 'right'
  align?: 'left' | 'center' | 'right'
  sortable?: boolean
  resizable?: boolean
  options?: Array<{label: string, value: any}>
}

SerializeOptions

interface SerializeOptions {
  mode?: 'edit' | 'read'
  permissions?: string[]
  defaultWidth?: number
  sortable?: boolean
}

PermissionConfig

interface PermissionConfig {
  [key: string]: string[]
}

使用示例

表格列序列化

<template>
  <div>
    <cloud-table
      :records="tableData"
      :columns="processedColumns"
      :options="tableOptions"
    />
  </div>
</template>

<script>
import { CloudTable, serializeColumn } from '@h3/cloudpivot-nexus-ui'

export default {
  components: {
    CloudTable
  },
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25, salary: 8000 },
        { id: 2, name: '李四', age: 30, salary: 12000 }
      ],
      rawColumns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          editor: 'text'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          editor: 'number'
        },
        {
          title: '薪资',
          dataIndex: 'salary',
          editor: 'number',
          permission: 'admin'
        }
      ],
      tableOptions: {
        mode: 'edit'
      }
    }
  },
  computed: {
    processedColumns() {
      return serializeColumn(this.rawColumns, {
        mode: this.tableOptions.mode,
        permissions: this.userPermissions
      })
    }
  },
  data() {
    return {
      userPermissions: ['read', 'write'] // 用户权限
    }
  }
}
</script>

权限过滤

<template>
  <div>
    <cloud-table
      :records="tableData"
      :columns="filteredColumns"
      :options="tableOptions"
    />
  </div>
</template>

<script>
import { CloudTable, filterColumnByPermiss } from '@h3/cloudpivot-nexus-ui'

export default {
  components: {
    CloudTable
  },
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25, salary: 8000, phone: '138****1234' }
      ],
      allColumns: [
        {
          title: '姓名',
          dataIndex: 'name',
          permission: 'read'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          permission: 'read'
        },
        {
          title: '薪资',
          dataIndex: 'salary',
          permission: 'admin'
        },
        {
          title: '电话',
          dataIndex: 'phone',
          permission: 'hr'
        }
      ],
      tableOptions: {
        mode: 'read'
      },
      userRole: 'hr' // 当前用户角色
    }
  },
  computed: {
    filteredColumns() {
      const permissions = this.getRolePermissions(this.userRole)
      return filterColumnByPermiss(this.allColumns, permissions)
    }
  },
  methods: {
    getRolePermissions(role) {
      const rolePermissions = {
        user: ['read'],
        hr: ['read', 'write', 'hr'],
        admin: ['read', 'write', 'hr', 'admin']
      }
      return rolePermissions[role] || []
    }
  }
}
</script>

动态列配置

<template>
  <div>
    <div style="margin-bottom: 16px;">
      <a-checkbox-group v-model="visibleColumns" @change="updateColumns">
        <a-checkbox value="name">姓名</a-checkbox>
        <a-checkbox value="age">年龄</a-checkbox>
        <a-checkbox value="salary">薪资</a-checkbox>
        <a-checkbox value="department">部门</a-checkbox>
      </a-checkbox-group>
    </div>

    <cloud-table
      :records="tableData"
      :columns="dynamicColumns"
      :options="tableOptions"
    />
  </div>
</template>

<script>
import { CloudTable, serializeColumn } from '@h3/cloudpivot-nexus-ui'

export default {
  components: {
    CloudTable
  },
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25, salary: 8000, department: '技术部' }
      ],
      visibleColumns: ['name', 'age'],
      allColumns: [
        {
          title: '姓名',
          dataIndex: 'name',
          editor: 'text'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          editor: 'number'
        },
        {
          title: '薪资',
          dataIndex: 'salary',
          editor: 'number'
        },
        {
          title: '部门',
          dataIndex: 'department',
          editor: 'select',
          options: [
            { label: '技术部', value: '技术部' },
            { label: '产品部', value: '产品部' }
          ]
        }
      ],
      tableOptions: {
        mode: 'edit'
      }
    }
  },
  computed: {
    dynamicColumns() {
      const filteredColumns = this.allColumns.filter(column =>
        this.visibleColumns.includes(column.dataIndex)
      )

      return serializeColumn(filteredColumns, {
        mode: this.tableOptions.mode
      })
    }
  },
  methods: {
    updateColumns() {
      // 列配置已通过 computed 自动更新
      console.log('可见列:', this.visibleColumns)
    }
  }
}
</script>

表格配置管理

// utils/tableConfig.js
import { serializeColumn, filterColumnByPermiss } from '@h3/cloudpivot-nexus-ui'

export class TableConfigManager {
  constructor() {
    this.baseColumns = []
    this.userPermissions = []
    this.tableMode = 'read'
  }

  // 设置基础列配置
  setBaseColumns(columns) {
    this.baseColumns = columns
    return this
  }

  // 设置用户权限
  setPermissions(permissions) {
    this.userPermissions = permissions
    return this
  }

  // 设置表格模式
  setMode(mode) {
    this.tableMode = mode
    return this
  }

  // 获取处理后的列配置
  getColumns() {
    let columns = [...this.baseColumns]

    // 权限过滤
    if (this.userPermissions.length > 0) {
      columns = filterColumnByPermiss(columns, this.userPermissions)
    }

    // 序列化处理
    columns = serializeColumn(columns, {
      mode: this.tableMode,
      permissions: this.userPermissions
    })

    return columns
  }

  // 添加列
  addColumn(column) {
    this.baseColumns.push(column)
    return this
  }

  // 移除列
  removeColumn(dataIndex) {
    this.baseColumns = this.baseColumns.filter(col => col.dataIndex !== dataIndex)
    return this
  }

  // 更新列
  updateColumn(dataIndex, updates) {
    const index = this.baseColumns.findIndex(col => col.dataIndex === dataIndex)
    if (index !== -1) {
      this.baseColumns[index] = { ...this.baseColumns[index], ...updates }
    }
    return this
  }
}

// 使用示例
const tableConfig = new TableConfigManager()
  .setBaseColumns([
    { title: '姓名', dataIndex: 'name', editor: 'text' },
    { title: '年龄', dataIndex: 'age', editor: 'number' }
  ])
  .setPermissions(['read', 'write'])
  .setMode('edit')

const processedColumns = tableConfig.getColumns()

注意事项

1. 性能考虑：工具函数会创建新的数组，避免频繁调用
2. 权限控制：确保权限配置的正确性和一致性
3. 列配置：确保列配置符合组件要求的数据结构
4. 类型安全：使用 TypeScript 时注意类型定义
5. 错误处理：处理无效的列配置和权限数据

常见问题

Q: 如何处理大量数据的列配置？

A: 使用虚拟化或分页，避免一次性处理过多列：

// 分批处理列配置
const batchSize = 50
const batches = []
for (let i = 0; i < columns.length; i += batchSize) {
  const batch = columns.slice(i, i + batchSize)
  const processedBatch = serializeColumn(batch, options)
  batches.push(processedBatch)
}

Q: 如何实现动态权限控制？

A: 监听权限变化，重新计算列配置：

watch: {
  userPermissions: {
    handler(newPermissions) {
      this.columns = filterColumnByPermiss(this.allColumns, newPermissions)
    },
    immediate: true
  }
}

Q: 如何优化列配置的性能？

A: 使用缓存和计算属性：

computed: {
  processedColumns() {
    const cacheKey = `${this.tableMode}-${this.userPermissions.join(',')}`
    if (this.columnCache[cacheKey]) {
      return this.columnCache[cacheKey]
    }

    const processed = serializeColumn(this.baseColumns, {
      mode: this.tableMode,
      permissions: this.userPermissions
    })

    this.columnCache[cacheKey] = processed
    return processed
  }
}