shuhi-ui/src/views/recycle/remindArea/index.vue

<template>
    <ele-page flex-table>
        <page-search @search="reload"></page-search>

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button type="primary" plain :icon="PlusOutlined" v-permission="'recycle:remindArea:add'"
                    @click="handleUpdate()">
                    新增
                </el-button>
                <el-button type="danger" plain :icon="DeleteOutlined" v-permission="'recycle:remindArea:batchDelete'"
                    @click="handleBatchDelete()">
                    批量删除
                </el-button>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button type="primary" link v-permission="'recycle:remindArea:update'"
                        @click="handleUpdate(row)">
                        编辑
                    </el-button>
                    <el-button type="danger" link v-permission="'recycle:remindArea:delete'" @click="handleDelete(row)">
                        删除
                    </el-button>
                    <el-button :type="row.useStatus == 2 ? 'success' : 'warning'" link
                        v-permission="'recycle:remindArea:changeStatus'" @click="handleChangeStatus(row)">
                        {{ row.useStatus == 2 ? '启用' : '停用' }}
                    </el-button>
                </div>
            </template>
        </common-table>

        <page-edit ref="editRef" @success="reload()"></page-edit>
    </ele-page>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { PlusOutlined, DeleteOutlined } from '@/components/icons';
import CommonTable from '@/components/CommonPage/CommonTable.vue';
import pageSearch from './components/page-search.vue';
import pageEdit from './components/page-edit.vue';
import { useDictData } from '@/utils/use-dict-data';
import request from '@/utils/request';
const { proxy } = getCurrentInstance();
defineOptions({ name: 'remindArea' });

/** 表格列配置 */
const columns = ref([
    {
        type: 'selection',
        columnKey: 'selection',
        width: 50,
        align: 'center',
        fixed: 'left'
    },
    {
        label: '提醒地区',
        prop: 'areaInfo',
        align: 'center',
    },
    { label: '推送人', prop: 'createName', align: 'center' },
    {
        label: '状态',
        prop: 'schoolLevel',
        align: 'center',
        formatter: (row) => "生效中"
    },
    { label: '添加时间', prop: 'createTime', align: 'center' },
    {
        columnKey: 'action',
        label: '操作',
        width: 240,
        align: 'center',
        slot: 'action'
    }
]);

/** 页面组件实例 */
const pageRef = ref(null);

const pageConfig = reactive({
    pageUrl: '/book/checkWarn/getAreaPageList',
    exportUrl: '',
    fileName: '审核提醒地区',
    cacheKey: 'remindAreaTable'
});

//刷新表格
function reload(where) {
    delete where.time;
    pageRef.value?.reload(where);
}

//批量删除
function handleBatchDelete(row) {
    let selections = row ? [row] : pageRef.value?.getSelections();
    let ids = selections.map((item) => item.id);
    let url = `/book/checkWarn/deleteCheckWarnArea`;
    pageRef.value?.operatBatch({
        title: '确认删除？',
        method: 'post',
        url,
        row,
        data: {
            idList: ids
        }
    });
}
//启用停用
function handleChangeStatus(row) {
    let message = row.useStatus == 1 ? '确认停用？' : '确认启用？';
    let data = {
        id: row.id,
        useStatus: row.useStatus == 1 ? 2 : 1
    }
    pageRef.value?.messageBoxConfirm({
        message,
        fetch: () => request.post('/book/checkWarn/setAreaStatus', data)
    });
}

//删除
function handleDelete(row){
    pageRef.value?.messageBoxConfirm({
        message: '确认删除？',
        fetch: () => proxy.$http.post(`/book/checkWarn/deleteCheckWarnArea`, { idList: [row.id] })
    });
}

//编辑页面
const editRef = ref(null);
function handleUpdate(row) {
    editRef.value?.handleOpen(row);
}
</script>