Skip to content

全局配置

CURD 组件支持全局配置,可以统一设置 API 响应格式、分页参数等。

默认配置
js
{
  listApi: {
    paginationPath: '$.pagination',
    paginationMap: {
      params: {
        current: 'page',
        pageSize: 'page_size'
      },
      response: {
        current: 'page',
        pageSize: 'page_size',
        total: 'total',
        totalPages: 'total_pages'
      }
    },
  },
  i18n: {
    locale: 'zh-CN',
    fallbackLocale: 'en-US',
    messages: {
      "zh-CN": {}, // 中文语言包
      "zh-HK": {}, // 繁体中文语言包
      "zh-TW": {}, // 简体中文语言包
      "en-US": {} // 英文语言包
    }
  },
  time: {
    timestamp: false
  },
  selector: {
    omitZeroString: true
  }
}

配置方式

ts
import { createCurdConfig } from '@uozi-admin/curd'
import { createApp } from 'vue'

const app = createApp()

app.use(createCurdConfig({
  api: {
    // 分页字段映射
    paginationMap: {
      params: {
        current: 'page',
        pageSize: 'page_size'
      },
      response: {
        current: 'page',
        pageSize: 'page_size',
        total: 'total',
        totalPages: 'total_pages'
      }
    },

    // 响应数据格式化
    responseFormat: (response) => {
      return {
        data: response.data,
        pagination: response.meta
      }
    },

    // 请求参数格式化
    requestFormat: (params) => {
      return params
    },

    // 时间戳配置
    time: {
      timestamp: true
    }
  },
  
  // 选择器配置
  selector: {
    omitZeroString: true
  }
}))

配置项

分页配置

分页数据在响应 data 中的路径:

默认 $.pagination,如果需要自定义分页数据在响应 data 中的路径,可以通过 paginationPath 配置。

分页字段映射配置:

ts
interface PaginationMap {
  total: string // 总数字段
  current: string // 当前页字段
  pageSize: string // 每页条数字段
  totalPages: string // 总页数字段
}

响应数据格式化

响应数据格式化函数:

ts
interface ResponseFormat {
  (response: any): {
    data: any[] // 列表数据
    pagination?: { // 分页信息
      total: number
      current: number
      pageSize: number
      totalPages: number
    }
  }
}

请求参数格式化

请求参数格式化函数:

ts
interface RequestFormat {
  (params: any): any
}

时间戳配置

如果项目的后端使用的是时间戳,可以通过 time 配置来统一设置时间戳配置。

时间戳配置:

ts
interface TimeT {
  timestamp: boolean
}

选择器配置

选择器全局配置:

ts
interface SelectorConfig {
  omitZeroString: boolean // 是否过滤掉"0"字符串值,默认为true
}

根据 Apache-2.0 许可发布。