vben5组件使用分享

select查询

// 添加状态映射
const statusList = [
  { label: '其他入库', value: 'InstockOther' },
  { label: '其他出库', value: 'OutstockOther' },
  { label: '组装拆卸', value: 'AssemblyDisassembly' },
];

{
  field: 'billType',
  title: $t('stock.log.billType'),
  filters: [
    { label: '其他入库', value: 'InstockOther' },
    { label: '其他出库', value: 'OutstockOther' },
    { label: '组装拆卸', value: 'AssemblyDisassembly' },
  ],
  filterMultiple: false,
  slots: {
    default: ({ row }) => {
      // 根据 billType 查找对应的状态项
      const statusItem = statusList.find(
        (item) => item.value === row.billType,
      );
      return h(
        Tag,
        {
          color: statusItem?.value === 'Income' ? 'red' : 'blue',
        },
        () => statusItem?.label,
      );
    },
  },
  width: 150,
}

处理查询

proxyConfig: {
  ajax: {
    query: async ({ page, sort, filters }) => {
      // 处理筛选条件
      const filterParams: Record<string, any> = {};
      if (filters && filters.length > 0) {
        filters.forEach((filter) => {
          if (filter.datas && filter.datas.length > 0) {
            filterParams[filter.field] = filter.datas[0];
          }
        });
      }
      // 构建查询参数
      const queryParams = {
        current: page.currentPage,
        pageSize: page.pageSize,
        ...(dateRange.value
          ? {
              start: dateRange.value[0],
              end: dateRange.value[1],
            }
          : {}),
        ...filterParams,
      };
      return await getTableData(queryParams);
    },
  },
}

表单搜索 select

{
  component: 'Select',
  componentProps: {
    allowClear: true,
    filterOption: true,
    options: [
      {
        label: '是',
        value: '1',
      },
      {
        label: '否',
        value: '2',
      },
    ],
    placeholder: '请选择',
    showSearch: true,
  },
  fieldName: 'isOverdue',
  label: '是否交货预警',
}

部门管理筛选

{
  field: 'deptName',
  title: $t('page.log.deptName'),
  minWidth: 100,
  filters: [{ data: '' }],
  slots: {
    filter: 'dept_filter',
  },
}

<template #dept_filter="{ $panel, column }">
  <TreeSelect
    :tree-data="deptOptions"
    v-model:value="option.data"
    v-for="(option, index) in column.filters"
    :key="index"
    @select="changeFilterEvent($event, option, $panel)"
    style="width: 200px"
    tree-default-expand-all
  />
</template>

const deptOptions = ref([]); // 用于存储部门数据
// 在组件加载时获取部门数据
function getDepartment() {
  getDepartmentData().then((data) => {
    deptOptions.value = data; // 将获取到的部门数据赋值给 deptOptions
  });
}
getDepartment();