@we-weaver/scene-table-list

Weaver table scene

Usage

最少配置项

const tableColumns = [
  {
    prop: 'tempCode',
    label: '模板编号',
  },
  {
    prop: 'tempName',
    label: '模板名称',
    showOverflowTooltip: true,
  },
];

const config = tableScene()('/register-order/list-all-dept', {
  table: tableColumns,
});

进阶配置请求

const config = tableScene()(
  {
    url: '/register-order/list-all-dept',
    name: 'getAnotherListData',
    options: {
      method: 'POST',
      success({ $response, $model }) {
        $model.data = $response;
      },
    },
  },
  {
    table: tableColumns,
  }
);

最简筛选配置

const config = tableScene()('/register-order/list-all-dept', {
  table: tableColumns,
  filter: {
    type: {
      component: 'WeSelect',
      options: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
      ],
    },
    queryContent: 'WeInput',
    $$placeholder: 'DynamicKeyComponent',
  },
});

完整筛选配置

const config = tableScene()('/register-order/list-all-dept', {
  table: tableColumns,
  filter: [
    {
      prop: 'type',
      component: 'WeSelect',
      options: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
      ],
      defaultValue: '0',
    },
    {
      prop: '$$placeholder',
      component: 'DynamicKeyComponent',
    },
  ],
});

完整表格主体配置

const config = tableScene()('/register-order/list-all-dept', {
  table: {
    className: 'vve-mb-3',
    data: '${$model.data.getListData.map(i => ({...i, type: i.type + "1"}))}',
    children: tableColumns,
    size: 'medium',
  },
});

分页器配置

const config = tableScene()('/register-order/list-all-dept', {
  // ...
  pagination: {
    // 如果需要替换分页组件可以用这个
    component: 'AnotherPagination',
    // 剩余的配置项会透传到组件上
  },
});

增加 weaver 其它配置,

新增 weaver 配置项会合并入内置的配置中，同名的属性将会被覆盖 在使用 events, actions 等拥有语法糖的配置时，请使用完整的语法进行书写

const config = tableScene()(
  '/register-order/list-all-dept',
  {
    // ...
  },
  {
    events: [
      {
        type: 'created',
        action({ $actions }) {
          $actions.someAction();
        },
      },
    ],
    model: {
      bizParam: {
        someProps: '',
      },
    },
    actions: {
      someAction() {
        console.log('do something');
      },
    },
  }
);

API

tableScene(options?)(requestConfig, layouts, weaverConfig?)

requestConfig

Type: string | RequestConfig

interface RequestConfig {
  // 列表接口地址
  url: string;
  // 列表接口名称, 不填默认名称为 `getListData`
  name?: string;
  // 同 weaver 内置请求实例配置项
  options?: WeaverRequestConfig;
}

layouts

Type: LayoutConfig

interface LayoutConfig {
  // 表格配置项
  table: TableConfig;
  // 筛选配置项
  filter?: FilterConfig | array<FilterConfig>;
  // 分页器配置项
  pagination?: PaginationConfig;
}

filterConfig

 interface FilterConfig {
   // 组件名称，使用时必选先注册
   component: string;
   // 对应的属性名称，如果是动态属性使用`$$placeholder` 作为占位符
   prop: string;
   // 其余所有配置项会透传
   [propName: string]?: any;
 }

options

Type: object

trigger

Type: string

Default: manual

筛选器触发模式

• manual 手动触发，点击按钮
• immediate 立即触发，当筛选条件变动时立即触发
• enter 按 Enter 触发

syncWithURL

Type: boolean

Default: true

筛选参数同步至 URL，并且每次变动地址栏都会触发列表接口动作

例如 http://test.guahao-test.cn?pageNumber=2&pageSize=10&q=test

enablePagination

Type: boolean

Default: true

是否启用分页

enableIndex

Type: boolean

Default: true

是否启用表格首列的索引值展示

功能描述

1. 筛选器触发模式（手动，自动触发）

{
  // 触发页面重新请求的方式
  // manual 手动触发，点击按钮
  // immediate 立即触发，当筛选条件变动时立即触发
  // enter 按 Enter 触发
  trigger: 'manual';
}

增加三种触发方式（manual,immediate,enter）按回车触发搜索是否需要和手动触发合并？

2. 筛选参数放置在 URL 请求体中

{
  // 当开关打开时，每次筛选条件触发时（包括分页），筛选条件会同步到地址栏中
  syncWithURL: true;
}

3. 筛选器组合

• 极简模式

  const filters = {
    type: {
      component: 'WeSelect',
      options: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
      ],
    },
    queryContent: 'WeInput',
    $$placeholder: 'DynamicKeyComponent',
  };
  
  // 转换成 weaver 配置
  
  const filters = [
    {
      component: 'WeSelect',
      extend_dataSource: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
      ],
      props: {
        value: '$model.filters.type',
      },
    },
    {
      component: 'WeInput',
      props: {
        value: '$model.filters.queryContent',
      },
    },
    {
      component: 'DynamicKeyComponent',
      events: [
        {
          type: 'change',
          action({ $args, $weaver, $model }) {
            const [{ key, value }] = $args;
            $weaver.$set($model.filters, key, value);
          },
        },
      ],
    },
  ];
  
  const model = {
    filters: {
      type: '',
      queryContent: '',
    },
  };

• 完整模式

  const filters = [
    {
      prop: 'type',
      component: 'WeSelect',
      options: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
      ],
      defaultValue: '0',
    },
    {
      prop: '$$placeholder',
      component: 'DynamicKeyComponent',
    },
  ];
  
  // 转换成 weaver 配置
  
  const filters = [
    {
      component: 'WeSelect',
      extend_dataSource: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
      ],
      props: {
        value: '$model.filters.type',
        defaultValue: '0',
      },
    },
    {
      component: 'DynamicKeyComponent',
      events: [
        {
          type: 'change',
          action({ $args, $weaver, $model }) {
            const [{ key, value }] = $args;
            $weaver.$set($model.filters, key, value);
          },
        },
      ],
    },
  ];
  
  const model = {
    filters: {
      type: '0',
    },
  };

4. 分页功能内置（包括分页参数处理，页码与每页数量变动的处理，重置分页参数）

• 分页参数转换 内置默认分页参数为 pageNumber, pageSize, totalCount, totalPages,可以通过 renameKeys 来转换接口返回的字段

  {
    pagination: {
      renameKeys: {
        page: 'pageNumber',
        size: 'pageSize',
        total: 'totalCount',
        pages: 'totalPages'
      }
    }
  }