noob-components/plugs/element/listTableDialog.ts

import { type TableColumn, ListTableDialog, handleAsync } from "noob-mengyxu";
import { ElMessageBox } from "element-plus";
import { h } from "vue";
import { PageResponse } from "../http";
type Row = Record<string, any>;

export interface ListTableProps {
  props: TableColumn[];
  rowKey: string;
  initialPage?: number;
  initialPageSize?: number;
  initExample?: Record<string, any>;
  useDicts?: string[];
}

interface Options {
  title: string;
  props: ListTableProps;
  query: (example: Record<string, any>) => Promise<PageResponse<Row>>;
  confirm: (rows: Row[]) => Promise<void>;
  children?: any;
}

export function showListTableDialog({ title, props, query, confirm, children }: Options) {
  const open = async () => {
    try {
      await ElMessageBox({
        title,
        showConfirmButton: false,
        showCancelButton: false,
        message: h(
          ListTableDialog,
          {
            ...props,
            onQuery: handleAsync(query),
            onConfirm: handleAsync(async (rows) => {
              console.log("onConfirm");
              await confirm(rows);
            }),
            onClose: handleAsync(async () => {
              console.log("onClose");
              ElMessageBox.close();
            }),
          },
          children
        ),
        customStyle: {
          maxWidth: "80%",
        },
      });
    } catch (err) {
      if (err === "cancel" || err === "close") {
        return;
      }

      throw err;
    }
  };

  const close = () => {
    ElMessageBox.close();
  };

  return {
    open,
    close,
  };
}