refactor: pay

apps/web-antd/src/views/pay/notify/data.ts

@@ -1,13 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { useAccess } from '@vben/access';
 
 import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -69,9 +65,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = any>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -136,23 +130,10 @@ export function useGridColumns<T = any>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 100,
+      width: 80,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            show: hasAccessByCodes(['pay:notify:query']),
-          },
-        ],
-      },
     },
   ];
 }

apps/web-antd/src/views/pay/notify/index.vue

@@ -1,19 +1,16 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as PayNotifyApi from '#/api/pay/notify';
+import { getNotifyTaskPage } from '#/api/pay/notify';
 import { DocAlert } from '#/components/doc-alert';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';
 
-const [NotifyDetailModal, notifyDetailModalApi] = useVbenModal({
+const [DetailModal, detailModalApi] = useVbenModal({
   connectedComponent: Detail,
   destroyOnClose: true,
 });
@@ -24,18 +21,8 @@ function onRefresh() {
 }
 
 /** 查看详情 */
-function onDetail(row: any) {
+function handleDetail(row: any) {
-  notifyDetailModalApi.setData(row).open();
+  detailModalApi.setData(row).open();
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<any>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -43,13 +30,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await PayNotifyApi.getNotifyTaskPage({
+          return await getNotifyTaskPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -72,7 +59,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <template #doc>
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
-    <NotifyDetailModal @success="onRefresh" />
+    <DetailModal @success="onRefresh" />
-    <Grid table-title="支付通知列表" />
+    <Grid table-title="支付通知列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:notify:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/pay/notify/modules/detail.vue

@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 打开弹窗 */
-const open = (id: number) => {
-  modalApi.setData({ id }).open();
-};
-
-defineExpose({ open });
 </script>
 
 <template>

apps/web-antd/src/views/pay/order/data.ts

@@ -1,144 +1,137 @@
-import type { FormSchemaGetter } from '#/adapter/form';
+import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { DICT_TYPE, getDictOptions } from '#/utils';
 
-export const querySchema: FormSchemaGetter = () => [
+/** 列表的搜索表单 */
-  {
+export function useGridFormSchema(): VbenFormSchema[] {
-    component: 'Input',
+  return [
-    fieldName: 'appId',
+    {
-    label: '应用编号',
+      component: 'Input',
-    componentProps: {
+      fieldName: 'appId',
-      placeholder: '请输入应用编号',
+      label: '应用编号',
-    },
+      componentProps: {
-  },
+        placeholder: '请输入应用编号',
-  {
-    component: 'Select',
-    fieldName: 'channelCode',
-    label: '支付渠道',
-    componentProps: {
-      placeholder: '请选择开启状态',
-      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'merchantOrderId',
-    label: '商户单号',
-    componentProps: {
-      placeholder: '请输入商户单号',
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'no',
-    label: '支付单号',
-    componentProps: {
-      placeholder: '请输入支付单号',
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'channelOrderNo',
-    label: '渠道单号',
-    componentProps: {
-      placeholder: '请输入渠道单号',
-    },
-  },
-  {
-    component: 'Select',
-    fieldName: 'status',
-    label: '支付状态',
-    componentProps: {
-      placeholder: '请选择支付状态',
-      options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
-    },
-  },
-  {
-    component: 'RangePicker',
-    fieldName: 'createTime',
-    label: '创建时间',
-    componentProps: {
-      placeholder: ['开始日期', '结束日期'],
-    },
-  },
-];
-
-export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
-  {
-    title: '编号',
-    field: 'id',
-  },
-  {
-    title: '支付金额',
-    field: 'price',
-    slots: {
-      default: ({ row }) => {
-        return `￥${(row.price || 0 / 100).toFixed(2)}`;
       },
     },
-  },
+    {
-  {
+      component: 'Select',
-    title: '退款金额',
+      fieldName: 'channelCode',
-    field: 'refundPrice',
+      label: '支付渠道',
-    slots: {
+      componentProps: {
-      default: ({ row }) => {
+        placeholder: '请选择开启状态',
-        return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
       },
     },
-  },
+    {
-  {
+      component: 'Input',
-    title: '手续金额',
+      fieldName: 'merchantOrderId',
-    field: 'channelFeePrice',
+      label: '商户单号',
-    slots: {
+      componentProps: {
-      default: ({ row }) => {
+        placeholder: '请输入商户单号',
-        return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
       },
     },
-  },
+    {
-  {
+      component: 'Input',
-    title: '订单号',
+      fieldName: 'no',
-    field: 'no',
+      label: '支付单号',
-    slots: {
+      componentProps: {
-      default: 'no',
+        placeholder: '请输入支付单号',
+      },
     },
-  },
+    {
-  {
+      component: 'Input',
-    title: '支付状态',
+      fieldName: 'channelOrderNo',
-    field: 'status',
+      label: '渠道单号',
-    cellRender: {
+      componentProps: {
-      name: 'CellDict',
+        placeholder: '请输入渠道单号',
-      props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+      },
     },
-  },
+    {
-  {
+      component: 'Select',
-    title: '支付渠道',
+      fieldName: 'status',
-    field: 'channelCode',
+      label: '支付状态',
-    cellRender: {
+      componentProps: {
-      name: 'CellDict',
+        placeholder: '请选择支付状态',
-      props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+        options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+      },
     },
-  },
+    {
-  {
+      component: 'RangePicker',
-    title: '支付时间',
+      fieldName: 'createTime',
-    field: 'successTime',
+      label: '创建时间',
-    minWidth: 180,
+      componentProps: {
-    formatter: 'formatDateTime',
+        placeholder: ['开始日期', '结束日期'],
-  },
+      },
-  {
+    },
-    title: '支付应用',
+  ];
-    field: 'appName',
+}
-  },
+
-  {
+/** 列表的字段 */
-    title: '商品标题',
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-    field: 'subject',
+  return [
-  },
+    { type: 'checkbox', width: 60 },
-  {
+    {
-    field: 'action',
+      title: '编号',
-    fixed: 'right',
+      field: 'id',
-    slots: { default: 'action' },
+    },
-    title: '操作',
+    {
-    minWidth: 80,
+      title: '支付金额',
-  },
+      field: 'price',
-];
+      formatter: 'formatAmount',
+    },
+    {
+      title: '退款金额',
+      field: 'refundPrice',
+      formatter: 'formatAmount',
+    },
+    {
+      title: '手续金额',
+      field: 'channelFeePrice',
+      formatter: 'formatAmount',
+    },
+    {
+      title: '订单号',
+      field: 'no',
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      title: '支付状态',
+      field: 'status',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+      },
+    },
+    {
+      title: '支付渠道',
+      field: 'channelCode',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      title: '支付时间',
+      field: 'successTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '支付应用',
+      field: 'appName',
+    },
+    {
+      title: '商品标题',
+      field: 'subject',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-antd/src/views/pay/order/index.vue

@@ -1,110 +1,93 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
+import type { PayOrderApi } from '#/api/pay/order';
-import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Tag } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as OrderApi from '#/api/pay/order';
+import { getOrderPage } from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
 
-import { columns, querySchema } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
-import detailFrom from './modules/order-detail.vue';
+import Detail from './modules/detail.vue';
 
-const formOptions: VbenFormProps = {
+const [DetailModal, detailModalApi] = useVbenModal({
-  commonConfig: {
+  connectedComponent: Detail,
-    labelWidth: 100,
+  destroyOnClose: true,
-    componentProps: {
+});
-      allowClear: true,
-    },
-  },
-  schema: querySchema(),
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
-};
 
-const gridOptions: VxeGridProps = {
+/** 刷新表格 */
-  checkboxConfig: {
+function onRefresh() {
-    // 高亮
+  gridApi.query();
-    highlight: true,
+}
-    // 翻页时保留选中状态
+
-    reserve: true,
+/** 查看详情 */
-    // 点击行选中
+function handleDetail(row: PayOrderApi.Order) {
-    // trigger: 'row',
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
   },
-  columns,
+  gridOptions: {
-  height: 'auto',
+    columns: useGridColumns(),
-  keepSource: true,
+    height: 'auto',
-  pagerConfig: {},
+    keepSource: true,
-  proxyConfig: {
+    proxyConfig: {
-    ajax: {
+      ajax: {
-      query: async ({ page }, formValues = {}) => {
+        query: async ({ page }, formValues) => {
-        return await OrderApi.getOrderPage({
+          return await getOrderPage({
-          pageNum: page.currentPage,
+            pageNo: page.currentPage,
-          pageSize: page.pageSize,
+            pageSize: page.pageSize,
-          ...formValues,
+            ...formValues,
-        });
+          });
+        },
       },
     },
-  },
+    rowConfig: {
-  rowConfig: {
+      keyField: 'id',
-    keyField: 'id',
+    },
-  },
+    toolbarConfig: {
-  // 表格全局唯一表示 保存列配置需要用到
+      refresh: { code: 'query' },
-  id: 'pay-order-index',
+      search: true,
-};
+    },
-
+  } as VxeTableGridOptions<PayOrderApi.Order>,
-const [BasicTable] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
 });
-
-const [DetailModal, modalDetailApi] = useVbenModal({
-  connectedComponent: detailFrom,
-});
-
-const openDetail = (id: number) => {
-  modalDetailApi.setData({
-    id,
-  });
-  modalDetailApi.open();
-};
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <DocAlert
+    <template #doc>
-      title="支付宝支付接入"
+      <DocAlert
-      url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+        title="支付宝支付接入"
-    />
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
-    <DocAlert
+      />
-      title="微信公众号支付接入"
+      <DocAlert
-      url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+        title="微信公众号支付接入"
-    />
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
-    <DocAlert
+      />
-      title="微信小程序支付接入"
+      <DocAlert
-      url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+        title="微信小程序支付接入"
-    />
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
-    <BasicTable>
+      />
-      <template #action="{ row }">
+    </template>
-        <a-button
+    <DetailModal @success="onRefresh" />
-          type="link"
+    <Grid table-title="支付订单列表">
-          v-access:code="['pay:order:query']"
+      <template #actions="{ row }">
-          @click="openDetail(row.id)"
+        <TableAction
-        >
+          :actions="[
-          {{ $t('ui.actionTitle.detail') }}
+            {
-        </a-button>
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
       </template>
       <template #no="{ row }">
         <p class="order-font">
@@ -118,7 +101,6 @@ const openDetail = (id: number) => {
           {{ row.channelOrderNo }}
         </p>
       </template>
-    </BasicTable>
+    </Grid>
-    <DetailModal />
   </Page>
 </template>

apps/web-antd/src/views/pay/order/modules/detail.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -6,34 +8,39 @@ import { formatDateTime } from '@vben/utils';
 
 import { Descriptions, Divider, Tag } from 'ant-design-vue';
 
-import * as OrderApi from '#/api/pay/order';
+import { getOrder } from '#/api/pay/order';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE } from '#/utils/dict';
 
-const detailData = ref<OrderApi.PayOrderApi.Order>();
+const detailData = ref<PayOrderApi.Order>();
 
-const [BasicModal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  showCancelButton: false,
-  showConfirmButton: false,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
-      return null;
+      detailData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      detailData.value = await getOrder(data.id);
+    } finally {
+      modalApi.unlock();
     }
-    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as {
-      id: number;
-    };
-
-    detailData.value = await OrderApi.getOrderDetail(id);
-
-    modalApi.modalLoading(false);
   },
 });
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
+  <Modal
+    title="订单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
     <Descriptions :column="2">
       <Descriptions.Item label="商户单号">
         {{ detailData?.merchantOrderId }}
@@ -121,5 +128,5 @@ const [BasicModal, modalApi] = useVbenModal({
         {{ detailData?.channelNotifyData }}
       </Descriptions.Item>
     </Descriptions>
-  </BasicModal>
+  </Modal>
 </template>

apps/web-antd/src/views/pay/refund/data.ts

@@ -1,14 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
-
-import { useAccess } from '@vben/access';
 
 import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -80,9 +75,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = PayRefundApi.Refund>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -155,23 +148,10 @@ export function useGridColumns<T = PayRefundApi.Refund>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 100,
+      width: 80,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            show: hasAccessByCodes(['pay:refund:query']),
-          },
-        ],
-      },
     },
   ];
 }

apps/web-antd/src/views/pay/refund/index.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button } from 'ant-design-vue';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as RefundApi from '#/api/pay/refund';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -29,32 +23,22 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
 }
 
 /** 查看详情 */
-function onDetail(row: any) {
+function handleDetail(row: any) {
   refundDetailModalApi.setData(row).open();
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<any>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -89,15 +73,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <RefundDetailModal @success="onRefresh" />
     <Grid table-title="支付退款列表">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          class="ml-2"
+            {
-          @click="onExport"
+              label: $t('ui.actionTitle.export'),
-          v-access:code="['pay:refund:export']"
+              type: 'primary',
-        >
+              icon: ACTION_ICON.DOWNLOAD,
-          <Download class="size-5" />
+              auth: ['pay:refund:query'],
-          {{ $t('ui.actionTitle.export') }}
+              onClick: handleExport,
-        </Button>
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:refund:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

apps/web-antd/src/views/pay/refund/modules/detail.vue

@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 打开弹窗 */
-const open = (id: number) => {
-  modalApi.setData({ id }).open();
-};
-
-defineExpose({ open });
 </script>
 
 <template>