RoleManagement.vue

<template>
    <my-table url="/api/v1/roles" rowKey="roleId" :addBtn="addBtn" ref="table" noPage>
        <template #drawer>
            <Form ref="form" />
        </template>
        <a-table-column title="角色名称" data-index="roleName" />
        <a-table-column title="角色编码" data-index="roleCode" />
        <a-table-column title="角色说明" data-index="remark" />
        <a-table-column title="操作">
            <template #default="row">
                <a @click="() => view(row, 2)">查看</a>
                <a-divider type="vertical" />
                <a @click="() => view(row, 1)">编辑</a>
                <a-divider type="vertical" />
                <PopconfirmDelete :url="`/api/v1/roles/${row.roleId}`" :cb="refreshTable" />
            </template>
        </a-table-column>
    </my-table>
</template>

<script>
import Form from './form.vue';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';

export default {
    components: { Form, PopconfirmDelete },
    data() {
        return {
            addBtn: { onOk: () => this.$refs['form']?.submit() },
        };
    },
    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        view(data, type) {
            this.$refs['table']?.show({ type, noFooter: type === 2 });
            this.$nextTick(() => {
                this.$refs['form'].setData({ ...data }, type);
            });
        },
    },
};
</script>