lgp-admin-plus-api/app/template/view/index.vue

<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, Image, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import { deleteupperCamelCaseApi } from './api';
import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
    checkboxChange() {
        const records = gridApi.grid.getCheckboxRecords();
        hasTopTableDropDownActions.value = records.length > 0;
    },
    checkboxAll() {
        const records = gridApi.grid.getCheckboxRecords();
        hasTopTableDropDownActions.value = records.length > 0;
    },
};

const [Grid, gridApi] = useVbenVxeGrid({
    formOptions,
    gridOptions,
    gridEvents,
});

const [FormModal, formModalApi] = useVbenModal({
    connectedComponent: FormModalDemo,
});

const showModal = (data = {}, isUpdate = false) => {
    formModalApi.setData({
        // 表单值
        values: data,
        update: isUpdate,
        gridApi,
    });
    formModalApi.open();
};

const hasDelete = (row: any) => {
    let ids = [];
    if (row) {
        ids.push(row);
    } else {
        ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
    }
    deleteupperCamelCaseApi({ ids }).then(() => {
        message.success('删除成功!');
        gridApi.reload();
    });
};
</script>

<template>
    <Page auto-content-height title="模板名称管理">
        <FormModal />
        <Grid>
            <template #toolbar-buttons>
                <TableAction
                    :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null),
            },
          ]"
                    :drop-down-actions="[
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              popConfirm: {
                title: '确定删除吗？',
                confirm: hasDelete.bind(null, false),
              },
            },
          ]"
                >
                    <template #more>
                        <Button style="margin-left: 16px">
                            批量操作
                        </Button>
                    </template>
                </TableAction>
            </template>
            <template #avatar="{ row }">
                <Image :src="row.avatar" height="30" width="30" />
            </template>
            <template #toolbar-tools></template>
            <template #action="{ row }">
                <TableAction
                    :actions="[
                        {
                          label: '编辑',
                          type: 'link',
                          icon: 'uil:edit',
                          size: 'small',
                          // auth: ['admin', 'sys:role:detail'],
                          onClick: showModal.bind(null, row, true),
                        },
                        {
                          label: '删除',
                          type: 'link',
                          icon: 'ant-design:delete-outlined',
                          size: 'small',
                          // auth: ['admin', 'sys:role:detail'],
                          popConfirm: {
                            title: '确定删除吗？',
                            confirm: hasDelete.bind(null, row.id),
                          },
                        },
                      ]"
                    :drop-down-actions="[]"
                />
            </template>
        </Grid>
    </Page>
</template>