FatTableSelectModal #

<template>
  <div>
    <Selector ref="selectorRef" />
    <ElButton @click="handleSelect">选择</ElButton>
  </div>
</template>

<script setup lang="ts">
  import { ElButton } from 'element-plus';
  import { defineFatTableSelectModal, useFatTableSelectModalRef } from '@wakeadmin/components';

  interface Item {
    id: string;
    name: string;
  }

  const selectorRef = useFatTableSelectModalRef();

  const handleSelect = async () => {
    selectorRef.value?.open({
      onChange(v) {
        alert('选中: ' + v.values[0].name);
      },
    });
  };

  const Selector = defineFatTableSelectModal<Item, { name: string }, { id: string }, {}>(({ column }) => {
    return () => {
      return {
        rowKey: 'id',
        title: '选择器',
        renderFooter() {
          return null;
        },
        onOpen() {
          console.log('onOpen');
        },
        onClose() {
          console.log('onClose');
        },
        async request() {
          return {
            total: 2,
            list: [
              { id: '1', name: '1' },
              { id: '2', name: '2' },
            ],
          };
        },
        columns: [
          column({
            prop: 'name',
            label: '名称',
          }),
        ],
      };
    };
  });
</script>

<template>
  <div>
    <Selector ref="selectorRef" />
    <ElButton @click="handleSelect">选择</ElButton>
  </div>
</template>

<script setup lang="ts">
  import { ElButton } from 'element-plus';
  import { defineFatTableSelectModal, useFatTableSelectModalRef } from '@wakeadmin/components';

  interface Item {
    id: string;
    name: string;
  }

  const selectorRef = useFatTableSelectModalRef();

  const handleSelect = async () => {
    selectorRef.value?.open({});
  };

  const Selector = defineFatTableSelectModal<Item, { name: string }, { id: string }, {}>(({ column }) => {
    return () => {
      return {
        rowKey: 'id',
        title: '选择器',
        multiple: true,
        limit: 5,
        async request() {
          return {
            total: 10,
            list: new Array(10).fill(0).map((i, idx) => {
              return {
                id: idx + '',
                name: idx + '',
              };
            }),
          };
        },
        columns: [
          column({
            prop: 'name',
            label: '名称',
          }),
        ],
      };
    };
  });
</script>

<template>
  <div>
    <Selector ref="selectorRef" />
    <ElButton @click="handleSelect">选择</ElButton>
  </div>
</template>

<script setup lang="tsx">
  import { ElButton, ElSwitch } from 'element-plus';
  import { defineFatTableSelectModal, useFatTableSelectModalRef } from '@wakeadmin/components';

  interface Item {
    id: string;
    name: string;
  }

  const selectorRef = useFatTableSelectModalRef();

  const handleSelect = async () => {
    selectorRef.value?.open({});
  };

  const Selector = defineFatTableSelectModal<Item, { name: string }, { id: string }, {}>(({ column, modalRef }) => {
    return () => {
      return {
        rowKey: 'id',
        title: '选择器',
        async request() {
          return {
            total: 2,
            list: [
              { id: '1', name: '1' },
              { id: '2', name: '2' },
              { id: '3', name: '3' },
            ],
          };
        },
        selectable(row) {
          return row.id !== '1';
        },
        // 🔴 关闭默认操作列
        showActions: false,
        // 🔴 关闭选中后关闭弹窗
        confirmOnSelected: false,
        columns: [
          // 🔴 自定义选择列
          column({
            label: '选择',
            render(value, row, index) {
              return (
                <ElSwitch
                  modelValue={modalRef.value?.isSelected(row)}
                  onUpdate:modelValue={v => {
                    modalRef.value?.select(row);
                  }}
                  disabled={!modalRef.value?.selectable(row)}
                ></ElSwitch>
              );
            },
          }),
          column({
            prop: 'name',
            label: '名称',
          }),
        ],
      };
    };
  });
</script>