geg-gas-web/src/views/system/menu/components/ButtonTable.vue

<template>
    <div>
        <BasicTable @register="registerTable">
            <template #toolbar>
                <a-button type="primary" @click="handleCreate"> {{ t('新增按钮') }} </a-button>
            </template>
            <template #action2="{ record }">
                <SetPrintTemplate v-if="record.code.includes(PrintButton.CODE)" :row="record" :hasMetaFormId="hasMetaFormId">
                    <Icon icon="ant-design:setting-outlined" style="cursor: pointer" />
                </SetPrintTemplate>
            </template>
            <template #action="{ record }">
                <TableAction
                    :actions="[
                        {
                            icon: 'clarity:note-edit-line',
                            title: t('编辑'),
                            onClick: handleEdit.bind(null, record)
                        },
                        {
                            icon: 'ant-design:delete-outlined',
                            color: 'error',
                            title: t('删除'),
                            popConfirm: {
                                title: t('是否确认删除'),
                                confirm: handleDelete.bind(null, record)
                            }
                        }
                    ]"
                />
            </template>
        </BasicTable>

        <MenuButtonModal @register="registerModal" @success="handleSuccess" />
    </div>
</template>
<script lang="ts">
    import { defineComponent, reactive } from 'vue';
    import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
    import MenuButtonModal from './MenuButtonModal.vue';
    import SetPrintTemplate from './SetPrintTemplate.vue';
    import { getMenuButtonById } from '/@/api/system/menu';
    import { Icon } from '/@/components/Icon';
    import { useModal } from '/@/components/Modal';
    import { MenuButtonModel } from '/@/api/system/menuButton/model';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { PrintButton } from '/@/enums/printEnum';
    const { t } = useI18n();
    const props = {
        menuId: { type: String, default: '' },
        hasMetaFormId: { type: Boolean, default: false }
    };
    export const columns: BasicColumn[] = [
        {
            title: t('按钮名称'),
            dataIndex: 'name',
            width: 100,
            align: 'left'
        },
        {
            title: t('编码'),
            dataIndex: 'code',
            width: 100
        },
        {
            title: t('地址'),
            dataIndex: 'url',
            width: 100
        },
        {
            title: t('请求方式'),
            dataIndex: 'method',
            width: 180,
            format: (text: string | number) => {
                if (text === 0) return 'GET';
                else if (text === 1) return 'POST';
                else if (text === 2) return 'PUT';
                else return 'DELETE';
            }
        },
        {
            title: t('设置'),
            dataIndex: 'action2',
            width: 100
        }
    ];

    export default defineComponent({
        name: 'MenuDrawer',
        components: { TableAction, BasicTable, MenuButtonModal, Icon, SetPrintTemplate },
        props,
        emits: ['success', 'register'],
        setup(props) {
            let btnData = reactive<MenuButtonModel[]>([]);
            const [registerTable, { getDataSource, setTableData, updateTableDataRecord }] = useTable({
                title: t('按钮列表'),
                dataSource: btnData,
                api: getMenuButtonById,
                beforeFetch: (params) => {
                    //发送请求默认新增  左边树结构所选机构id
                    return { ...params, id: props.menuId };
                },
                columns,
                formConfig: {
                  schemas: [],
                  showResetButton: false,
                  showSubmitButton: false
                },
                pagination: false,
                striped: false,
                useSearchForm: false,
                showTableSetting: true,
                bordered: true,
                showIndexColumn: false,
                canResize: false,
                actionColumn: {
                    width: 80,
                    title: t('操作'),
                    dataIndex: 'action',
                    slots: { customRender: 'action' },
                    fixed: undefined
                }
            });

            const [registerModal, { openModal }] = useModal();

            function handleCreate() {
                openModal(true, {
                    isUpdate: false
                });
            }

            function handleEdit(record: Recordable) {
                openModal(true, {
                    record,
                    isUpdate: true
                });
            }
            function handleSuccess({ isUpdate, record }) {
                if (isUpdate) {
                    updateTableDataRecord(record.key, record);
                } else {
                    const dataSource = getDataSource();
                    dataSource.push(record);
                    setTableData(dataSource);
                }
            }

            function handleDelete(record: Recordable) {
                const dataSource = getDataSource();
                setTableData(dataSource.filter((x) => x.key !== record.key));
            }
            return {
                PrintButton,
                registerTable,
                handleCreate,
                registerModal,
                handleEdit,
                handleSuccess,
                handleDelete,
                getDataSource,
                t
            };
        }
    });
</script>