index.vue

<template>
    <my-table url="/api/v1/schedules" rowKey="taskId" :addBtn="addBtn" ref="table">
        <template #drawer>
            <Form ref="form" :row="currentClickRow" />
        </template>
        <a-table-column title="任务名称" data-index="taskName" />
        <a-table-column title="调度规则" data-index="taskRule" />
        <a-table-column title="实现类" data-index="implementClass" />
        <a-table-column title="说明" data-index="remark" />
        <a-table-column title="操作">
            <template #default="row">
                <ActionButton :buttons="buttons" :row="row" />
            </template>
        </a-table-column>
    </my-table>
</template>

<script>
import ActionButton from '@/components/action_button/index.vue';
import Form from './form.vue';

export default {
    components: { ActionButton, Form },
    data() {
        return {
            addBtn: {
                onOk: () => {
                    return this.$refs.form.submit();
                },
            },
            currentClickRow: null,
            buttons: [
                {
                    label: '查看',
                    click: row => {
                        this.showDrawer(2, true);
                        this.$nextTick(() => {
                            this.$refs['form'].setData(row, 2);
                        });
                    },
                },
                {
                    label: '编辑',
                    click: row => {
                        this.showDrawer(1);
                        this.$nextTick(() => {
                            this.$refs['form'].setData(row, 1);
                        });
                    },
                },
                {
                    type: 'confirm',
                    label: '失效',
                    title: '确认是否失效?',
                    url: row => ({ url: `/api/v1/schedules/${row.taskId}/pause`, method: 'del' }),
                    after: () => this.refreshTable(),
                    isHidden: row => row.isPaused === 1,
                },
                {
                    type: 'confirm',
                    url: row => `/api/v1/schedules/${row.taskId}`,
                    after: () => this.refreshTable(),
                },
            ],
        };
    },
    methods: {
        refreshTable() {
            this.$refs.table.getData();
        },
        showDrawer(type, noFooter) {
            this.$refs['table'].show({ type, noFooter });
        },
    },
};
</script>