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

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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #cover="{ row }">
                <el-image
                    style="width: 90px; height: 120px; border-radius: 4px"
                    fit="cover"
                    :src="row.coverUrl"
                    :preview-src-list="[row.coverUrl]"
                    :initial-index="0"
                    preview-teleported
                />
            </template>
            <template #feedbackTime="{ row }">
                <div
                    style="
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    "
                    ><el-text>反馈时间：</el-text>
                    <el-text>{{ row.feenbackTime }}</el-text>
                </div>
                <div
                    style="
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    "
                    ><el-text>处理时间：</el-text>
                    <el-text>{{ row.handTime || '-' }}</el-text>
                </div>
            </template>
            <template #baseInfo="{ row }">
                <book-info :row="row" :showFormat="false" @refresh="reload" />
            </template>

            <template #action="{ row }">
                <el-button
                    type="primary"
                    link
                    v-permission="'recycle:fallbackLog:updateBook'"
                    @click="handleUpdateBook(row)"
                >
                    [编辑]
                </el-button>
                <el-button
                    type="success"
                    link
                    v-permission="'recycle:fallbackLog:viewPic'"
                    @click="handleViewPic(row)"
                >
                    [查看图片]
                </el-button>
                <el-button
                    type="primary"
                    v-if="row.handStatus == 0"
                    link
                    v-permission="'recycle:fallbackLog:completed'"
                    @click="handleComleted(row)"
                >
                    [处理完成]
                </el-button>
            </template>
        </common-table>

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

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import booksEdit from '@/views/data/books/components/books-edit.vue';
    import bookSearch from './components/book-search.vue';
    import bookInfo from '@/views/recycle/components/book-info.vue';
    import bookOtherInfo from '@/views/recycle/components/book-other-info.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import request from '@/utils/request';
    import { ElMessage } from 'element-plus';

    defineOptions({ name: 'FallbackLog' });
    let { proxy } = getCurrentInstance();
    const [useStatusDicts] = useDictData(['use_status']);

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        { label: '图片', prop: 'cover', width: 120, slot: 'cover' },
        { label: '信息', prop: 'baseInfo', slot: 'baseInfo', minWidth: 500 },
        { label: '推送人', prop: 'feedbackUserName', width: 100 },
        { label: '反馈内容', prop: 'feedbackContent', minWidth: 200 },
        {
            label: '处理状态',
            prop: 'handStatus',
            width: 100,
            formatter: (row) => (row.handStatus == 1 ? '已处理' : '未处理')
        },
        {
            label: '时间',
            prop: 'feedbackTime',
            width: 160,
            slot: 'feedbackTime'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 120,
            slot: 'action',
            fixed: 'right'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/book/feedback/list',
        fileName: '图书反馈记录',
        cacheKey: 'fallbackLogTable'
    });

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

    //编辑
    const editRef = ref(null);
    function handleUpdateBook(row) {
        let params = { id: row.bookId };
        editRef.value?.handleOpen(params);
    }
    //查看图片
    function handleViewPic(row) {
        if (!row.imgUrl) return ElMessage.warning('暂无图片');
        console.log(proxy, 'xxxx');
        if (row.imgUrl) {
            proxy.$viewerApi({ images: [row.imgUrl] });
        }
    }
    //处理完成
    function handleComleted(row) {
        pageRef.value?.messageBoxConfirm({
            message: '确认处理完成？',
            fetch: () => request.post('/book/feedback/complete', { id: row.id })
        });
    }
</script>