shuhi-ui/src/views/recycleOrder/detail/order-recycle-log.vue

<!-- 编辑弹窗 -->
<template>
    <ele-modal form :width="1080" v-model="visible" title="回收修改日志">
        <SimpleTable
            style="width: 100%"
            :columns="columns"
            border
            :fetchPage="fetchPage"
            ref="tableRef"
            pagination
        >
            <template #discount="{ row }">
                <div class="flex flex-col align-center">
                    <el-text>折扣：{{ row.discount }}折</el-text>
                    <el-text>价格：¥ {{ row.price }}</el-text>
                </div>
            </template>
            <template #recycleTime="{ row }">
                <div class="flex flex-col align-center">
                    <el-text>开始回收时间：{{ row.createTime }}</el-text>
                    <el-text>结束回收时间：{{ row.createTime }}</el-text>
                </div>
            </template>
            <template #modifyInfo="{ row }">
                <div class="flex flex-col align-center">
                    <el-text>修改人：{{ row.createName }}</el-text>
                    <el-text>修改时间：{{ row.createTime }}</el-text>
                </div>
            </template>
        </SimpleTable>

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import { Flag, ChatDotSquare } from '@element-plus/icons-vue';
    import SimpleTable from '@/components/CommonPage/SimpleTable.vue';
    import request from '@/utils/request';

    function fetchPage(params) {
        return request.get(
            '/book/bookRecycleInfo/discount/changeList/' + isbn.value,
            {
                params
            }
        );
    }

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
    };

    /** 弹窗打开事件 */
    let isbn = ref();
    const tableRef = ref();
    const handleOpen = (row) => {
        visible.value = true;
        isbn.value = row.isbn;

        nextTick(() => {
            tableRef.value?.reload();
        });
    };

    //   1-开启回收 2-关闭回收 3-加入黑名单 4-人工暂停回收 5-移除黑名单
    let typeList = {
        1: '开启回收',
        2: '关闭回收',
        3: '加入黑名单',
        4: '人工暂停回收',
        5: '移除黑名单'
    };
    // 表格数据
    const columns = reactive([
        {
            label: '修改后状态',
            prop: 'createBy',
            minWidth: 120,
            formatter: (row) => typeList[row.type]
        },
        {
            label: '修改后折扣',
            prop: 'discount',
            slot: 'discount',
            minWidth: 120
        },
        {
            label: '回收时间',
            prop: 'recycleTime',
            slot: 'recycleTime',
            minWidth: 200
        },
        {
            label: '修改信息',
            prop: 'modifyInfo',
            slot: 'modifyInfo',
            minWidth: 200
        }
    ]);

    defineExpose({
        handleOpen
    });
</script>