shuhi-ui/src/views/recycle/remindBooks/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="handleAdd()">
                    新增
                </el-button>
                <el-button type="danger" plain :icon="DeleteOutlined" v-permission="'recycle:remindArea:batchDelete'"
                    @click="handleBatchDelete()">
                    批量删除
                </el-button>
            </template>

            <template #cover="{ row }">
                <el-image :src="row.bookInfo?.cover" style="width: 70px; height: 90px" fit="cover" />
            </template>

            <template #action="{ row }">
                <el-button type="danger" link v-permission="'recycle:remindArea:delete'"
                    @click="handleDelete(row)">
                    删除
                </el-button>
            </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';
const { proxy } = getCurrentInstance();

defineOptions({ name: 'remindBooks' });

/** 表格列配置 */
const columns = ref([
    { type: 'selection', columnKey: 'selection', width: 50, fixed: 'left' },
    { label: '图片', prop: 'cover', width: 100, slot: 'cover' },
    { label: 'isbn', prop: 'isbn' },
    { label: '书名', prop: 'bookInfo.bookName' },
    { label: '作者', prop: 'bookInfo.author' },
    { label: '出版社', prop: 'bookInfo.publish' },
    { label: '出版时间', prop: 'bookInfo.pubDate' },
    { label: '定价', prop: 'bookInfo.price', width: 100 },
    { label: '需提醒仓库', prop: 'godownName', width: 120 },
    { label: '添加时间', prop: 'createTime', width: 160 },
    { columnKey: 'action', label: '操作', width: 80, slot: 'action', fixed: 'right' }
]);

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

const pageConfig = reactive({
    pageUrl: '/book/checkWarn/getBookPageList',
    exportUrl: '',
    fileName: '审核提醒书籍',
    cacheKey: 'remindBooksTable'
});

//刷新表格
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/deleteBookCheck`;
    pageRef.value?.operatBatch({
        title: '确认删除？',
        method: 'post',
        url,
        row,
        data: {
            idList: ids
        }
    });
}
//删除
function handleDelete(row) {
    pageRef.value?.messageBoxConfirm({
        message: '确认删除？',
        fetch: () => proxy.$http.post(`/book/checkWarn/deleteBookCheck`, { idList: [row.id] })
    });
}
//新增
const editRef = ref(null);
function handleAdd() {
    editRef.value?.handleOpen();
}
</script>