shuhi-ui/src/views/mallOrder/complaint/index.vue

<template>
    <ele-page flex-table>
        <page-search @search="reload" />
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #baseinfo="{ row }">
                <div class="flex flex-col items-start">
                    <el-tag size="large" class="w-full">
                        <el-text class="flex-1">投诉编号：{{ row.id }}</el-text>
                        <el-text class="flex-1"
                            >订单编号：{{ row.orderId }}</el-text
                        >
                    </el-tag>
                    <div class="demo-image__preview mt-2">
                        <el-image
                            v-for="(item, index) in getImgList(row)"
                            :key="index"
                            style="
                                width: 70px;
                                height: 70px;
                                border-radius: 5px;
                                margin-right: 8px;
                            "
                            :src="item"
                            fit="cover"
                            :preview-src-list="getImgList(row)"
                            :initial-index="index"
                            preview-teleported
                        />
                    </div>
                </div>
            </template>
            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'optimization:complain:detail'"
                        @click="handleDetail(row)"
                    >
                        详情
                    </el-button>
                </div>
            </template>
        </common-table>
        <page-edit ref="pageEditRef" @refresh="reload" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './components/page-search.vue';
    import pageEdit from './components/page-edit.vue';

    defineOptions({ name: 'MallOrderComplaintList' });
    
    const statusMap = {
        '1': '待处理',
        '2': '处理中',
        '3': '已完结'
    };

    /** 获取图片列表 */
    const getImgList = (row) => {
        const imgs = row.imgList || row.fileUrls || row.imgs || [];
        if (typeof imgs === 'string') {
            try {
                return JSON.parse(imgs);
            } catch (e) {
                return imgs.split(',').filter(i => i);
            }
        }
        return Array.isArray(imgs) ? imgs : [];
    };

    /** 表格列配置 */
    const columns = ref([
        {
            label: '基础信息',
            prop: 'baseinfo',
            align: 'center',
            minWidth: 240,
            slot: 'baseinfo'
        },
        {
            label: '投诉人',
            prop: 'userId',
            align: 'center'
        },
        {
            label: '投诉时间',
            prop: 'createTime',
            align: 'center',
            width: 180
        },
        {
            label: '投诉原因',
            prop: 'reason',
            align: 'center'
        },
        {
            label: '投诉状态',
            prop: 'status',
            align: 'center',
            formatter: (row) => statusMap[row.status] || row.status
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/shop/orderComplaintsLog/pagelist',
        fileName: '投诉管理',
        cacheKey: 'mallOrderComplainTable'
    });

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

    //处理
    const pageEditRef = ref(null);
    function handleDetail(row) {
        pageEditRef.value?.handleOpen(row);
    }
</script>