FatTableSelect #

import { defineFatTableSelect } from '@wakeadmin/components';
import { ElButton } from 'element-plus';

enum ItemStatus {
  Initial,
  Pending,
  Done,
}

/**
 * 列表项定义
 */
interface Item {
  id: number;
  name: string;
  status: ItemStatus;
  createdDate: number;
}

/**
 * 表单查询
 */
interface Query {
  name: string;
  status: ItemStatus;
}

export default defineFatTableSelect<Item, Query, { name: string; id: number }>(({ column }) => {
  return () => ({
    title: '明月如霜',
    rowKey: 'id',
    async request(params) {
      const { pagination, query } = params;

      // 模拟请求
      const mockData: Item[] = new Array(pagination.pageSize).fill(0).map((_, idx) => {
        const r = Math.floor(Math.random() * 1000);
        return {
          id: idx,
          name: `${r}-${pagination.page}-${query?.name ?? ''}`,
          status: r % 3 === 0 ? ItemStatus.Pending : r % 2 === 0 ? ItemStatus.Initial : ItemStatus.Done,
          createdDate: Date.now(),
        };
      });

      return {
        list: mockData,
        total: 100,
      };
    },
    renderBottomToolbar(_, selectedList) {
      const item = selectedList[0];
      if (item) {
        return () => (
          <div>
            当前选中:
            <div>
              名称 -{'>'} {item.name}
            </div>
            <div>
              id -{'>'} {item.id}
            </div>
          </div>
        );
      }
    },
    renderNavBar() {
      return (
        <span>
          <ElButton type="primary">创建</ElButton>
        </span>
      );
    },
    columns: [
      column({
        prop: 'name',
        label: '名称',
        queryable: true,
        valueType: 'search',
      }),
      column({
        prop: 'status',
        label: '状态',
        queryable: true,
        valueType: 'select',
        valueProps: {
          options: [
            { label: '未开始', value: ItemStatus.Initial, color: 'blue' },
            { label: '正在进行', value: ItemStatus.Pending, color: 'green' },
            { label: '已结束', value: ItemStatus.Done, color: 'gray' },
          ],
        },
      }),
      column({
        prop: 'createdDate',
        label: '创建时间',
        valueType: 'date-time',
        minWidth: 110,
      }),
    ],
  });
});

import { defineFatTableSelect } from '@wakeadmin/components';

export default defineFatTableSelect<any, any, { name: string }>(() => {
  return () => ({
    title: '表格操作',
    async request() {
      return {
        list: new Array(10).fill('S').map((_, i) => ({
          name: `MentalHealth${i + 1}`,
          id: i,
        })),
        total: 10,
      };
    },
    renderBottomToolbar(_, selectedList) {
      const item = selectedList[0];
      if (item) {
        return () => (
          <div>
            当前选中:
            <div>
              名称 -{'>'} {item.name}
            </div>
          </div>
        );
      }
    },
    enablePagination: false,

    rowKey: 'id',

    columns: [
      { label: '名称', prop: 'name' },
      {
        type: 'actions',
        label: '操作',
        // 支持传入一个函数，常用于一些需要动态计算的场景
        actions: () => {
          return [
            {
              name: 'Are you Ready?',
              title: '提示信息',
            },
            {
              name: '我好了',
              type: 'danger',
              onClick(table, row) {
                table.select(row);
              },
            },
            {
              name: '等一下，我还没好',
              type: 'warning',
              onClick(table, row) {
                table.unselect(row);
              },
            },
          ];
        },
      },
    ],
  });
});

import { defineFatTableSelect } from '@wakeadmin/components';
import { defineComponent, ref } from 'vue';
import { ElButton } from 'element-plus';

export default defineComponent({
  name: 'TableSelectDisabledActions',
  setup() {
    const multiple = ref(false);
    const Table = defineFatTableSelect<any, any, { name: string; id: number }>(({ column }) => {
      const list = [
        { name: '女曰鸡鸣', id: 51024 },
        { name: '士曰昧旦', id: 15629 },
        { name: '子兴视夜', id: 588 },
        { name: '明星有烂', id: 5836 },
        { name: '将翱将翔', id: 9170 },
        { name: '弋凫与雁', id: 51658 },
        { name: '弋言加之', id: 4416 },
        { name: '与子宜之', id: 69 },
        { name: '宜言饮酒', id: 51918 },
        { name: '与子偕老', id: 52751 },
        { name: '琴瑟在御', id: 11157 },
        { name: '莫不静好', id: 56022 },
      ];
      return () => ({
        title: '好风如水',
        rowKey: 'id',
        limit: 6,
        batchActions: table => [
          {
            name: '全选',
            onClick: () => table.selectAll(),
          },
          {
            name: '反选',
            onClick: () => table.toggleAll(),
          },
          {
            name: '取消全选',
            onClick: () => table.unselectAll(),
          },
          {
            name: '清空',
            onClick: () => table.clear(),
          },
        ],
        async request(params) {
          const {
            pagination: { page, pageSize },
          } = params;

          return {
            list: list.slice((page - 1) * pageSize, pageSize * page),
            total: list.length,
          };
        },

        selectable(item) {
          return item.id % 10 !== 9;
        },
        onChange(payload) {
          console.log(payload.values);
        },
        columns: [
          column({
            prop: 'name',
            label: '名称',
          }),
          column({
            prop: 'id',
            label: 'id',
          }),
        ],
      });
    });

    return () => {
      return (
        <div>
          <ElButton
            onClick={() => {
              multiple.value = !multiple.value;
            }}
          >
            切换选择状态
          </ElButton>

          {multiple.value ? <Table key="s"></Table> : <Table key="m" multiple></Table>}
        </div>
      );
    };
  },
});