配置工具

配置工具采用"注册-使用"模式，在项目启动时统一注册配置，页面中按名称获取。

项目初始化配置

// src/config/columnConfigs/index.ts
import { setupColumnConfigs } from './columns'
import { setupFormConfigs } from './forms'
import { setupSearchConfigs } from './search'

export function setupAllConfigs() {
  setupColumnConfigs()
  setupFormConfigs()
  setupSearchConfigs()
}

// 在 pageTemplate 配置中调用
setupPageTemplate({ ... })
setupAllConfigs()

列配置工具

注册列配置

// src/config/columnConfigs/columns.ts
import { col, withUnit, registerColumnConfigs } from "vue-admin-kit";

export function setupColumnConfigs() {
  registerColumnConfigs([
    // 通用列
    col("checkbox", { type: "checkbox", fixed: "left", width: 70, title: "" }),
    col("序号", { type: "seq", minWidth: 100 }),
    col("创建时间", { field: "createTime", sortable: true }),

    // 业务列
    col("客户名称", { field: "customerName", minWidth: 400 }),
    col("供应商等级", {
      field: "supplierGrade",
      dictType: "supplier_grade",
      displayType: "tag",
    }),

    // 金额列（带单位格式化）
    col("价格", { field: "price", formatter: withUnit("元") }),
  ]);
}

使用 getColumnConfig

import { defineColumnsConfig, getColumnConfig } from "vue-admin-kit";

// 方式1：批量获取（推荐）
const columnsConfig = defineColumnsConfig([
  ...getColumnConfig([
    "checkbox",
    "序号",
    "供应商名称",
    ["价格", { minWidth: 120 }], // 覆盖部分属性
  ]),
]);

// 方式2：单个获取
const seqColumn = getColumnConfig("序号");
const customColumn = getColumnConfig("序号", { minWidth: 80 });

表单配置工具

注册表单配置

import { formCol, registerFormConfigs } from "vue-admin-kit";

export function setupFormConfigs() {
  registerFormConfigs([
    formCol("供应商名称", {
      prop: "supplierName",
      type: "input",
      required: true,
      span: 12,
    }),
    formCol("手机号", {
      prop: "phone",
      type: "input",
      span: 12,
      rules: [
        {
          pattern: /^1[3-9]\d{9}$/,
          message: "请输入正确的手机号",
          trigger: "blur",
        },
      ],
    }),
  ]);
}

使用 getFormConfig

import { defineFormConfig, getFormConfig } from "vue-admin-kit";

const formConfig = defineFormConfig([
  ...getFormConfig([
    "供应商名称",
    ["邮箱", { required: true }], // 覆盖为必填
  ]),
]);

搜索配置工具

注册搜索配置

import { searchCol, registerSearchConfigs } from "vue-admin-kit";

export function setupSearchConfigs() {
  registerSearchConfigs([
    searchCol("客户名称", { prop: "customerName", type: "input" }),
    searchCol("供应商等级搜索", {
      prop: "supplierGrade",
      type: "select",
      dictType: "supplier_grade",
    }),
  ]);
}

使用 getSearchConfig

import { defineSearchConfig, getSearchConfig } from "vue-admin-kit";

const searchConfig = defineSearchConfig([
  ...getSearchConfig(["供应商名称搜索", "供应商等级搜索"]),
]);

配置覆盖语法

三种配置工具都支持相同的覆盖语法：

// 数组形式批量获取时，使用元组覆盖
getColumnConfig([
  "序号", // 直接使用
  ["客户名称", { minWidth: 500 }], // 覆盖 minWidth
  ["状态", { dictType: "other_status" }], // 覆盖 dictType
]);

// 单个获取时，第二个参数为覆盖配置
getFormConfig("手机号", { required: true, span: 24 });