shuhi-ui/src/views/recycleOrder/detail/order-book-list.vue

<template>
    <ele-data-table row-key="userId" :columns="columns" :data="dataList" border class="order-books"
        :span-method="handleSpanMethod">
        <template #baseInfo="{ row }">
            <div class="base-info flex justify-between">
                <div class="base-info-left flex flex-1">
                    <el-image style="width: 80px; height: 100px" fit="cover" :src="row.cover" />
                    <div class="base-info-left-con flex flex-col items-start ml-3">
                        <div><el-text type="primary">{{ row.bookName }}</el-text></div>
                        <div><el-text>ISBN：{{ row.isbn }}</el-text></div>
                        <div class="base-info-btns flex">
                            <el-button size="small" color="#4f4f4f" v-if="row.bookStatus != 3"
                                @click="handleBlackList([row.isbn])">加入黑名单</el-button>
                            <el-button size="small" color="#4f4f4f" v-if="row.bookStatus == 3">已在黑名单</el-button>

                            <el-button size="small" type="success" v-if="row.bookStatus == 1"
                                @click="handleAddBookList(row)">加入回收书单</el-button>
                            <el-button size="small" color="#2d430a" v-if="row.bookStatus == 2">已在回收书单</el-button>

                            <el-button size="small" type="warning" v-if="row.settingStatus == 0"
                                @click="handleSpecifiedDiscount(row)">指定回收折扣</el-button>
                            <el-button size="small" color="#7728f5" v-if="row.settingStatus == 1"
                                @click="handleModifyDiscount(row)">修改回收折扣</el-button>
                        </div>
                        <div><el-text type="danger">(已回收数量：{{ row.recycleNum }}当前库存：{{
                            row.stockNum
                                }})</el-text></div>
                    </div>
                </div>
                <div class="base-info-right w-36 shrink-0">
                    <div class="common-text flex">
                        <el-text>定  价：</el-text>
                        <el-text>¥ {{ row.bookPrice }}</el-text>
                    </div>
                    <div class="common-text flex">
                        <el-text>回收折扣：</el-text>
                        <el-text>¥ {{ row.recycleDiscount }}折</el-text>
                    </div>
                    <div class="common-text flex">
                        <el-text>预估金额：</el-text>
                        <el-text>¥ {{ row.recyclePrice }}</el-text>
                    </div>
                    <div class="common-text flex">
                        <el-text>销售价格：</el-text>
                        <el-text>¥ {{ row.salePrice || '-' }}</el-text>
                    </div>
                </div>
            </div>
        </template>
        <template #action="{ row }">
            <div class="action-btns">
                <el-button class="mb-10" color="#4f4f4f" @click="">审核图片</el-button>
                <el-button class="mb-10" color="#a4adb3" @click="handleViewUrl(row, 'dd')">查看当当</el-button>
                <el-button class="mb-10" color="#e99d42" @click="handleRecycleLog(row)">回收日志</el-button>
                <el-button class="mb-10" color="#f27606" @click="handleViewUrl(row, 'tb')">查看淘宝</el-button>
                <el-button color="#0f7dc7" @click="handleSalesLog(row)">售价日志</el-button>
                <el-button color="#399420" @click="handleViewUrl(row, 'db')">查看豆瓣</el-button>
            </div>
        </template>
        <template #auditInfo="{ row }">
            <div class="audit-info flex justify-center">
                <el-radio-group v-model="row.sts" style="width: 120px"
                    :disabled="!(detail.status == 8 || detail.status == 9)"
                    @change="(value) => handleAuditInfo(value, row)">
                    <el-radio :value="1">品相良好</el-radio>
                    <el-radio :value="2" disabled>品相一般</el-radio>
                    <el-radio :value="3">品相极差</el-radio>
                </el-radio-group>

                <el-select v-model="row.com" style="width: 180px" placeholder="请选择品相极差的原因"
                    :disabled="!(detail.status == 8 || detail.status == 9) || row.sts !== 3" class="reason-select"
                    @change="(value) => handleSelectReason(value, row)">
                    <el-option v-for="item in auditReason" :key="item.dictValue" :label="item.dictValue"
                        :value="item.dictValue" />
                </el-select>
            </div>
        </template>
    </ele-data-table>
    <orderModifyDiscount ref="specifiedRef" @refresh="handleRefresh('specified')" />
    <setParams ref="modifyRef" @refresh="handleRefresh('modify')" />
    <orderBlacklist ref="blacklistRef" @refresh="handleRefresh('blacklist')" />
    <orderRecycleLog ref="recycleLogRef" />
    <orderSalesLog ref="salesLogRef" />
</template>

<script setup>
import { ref, reactive } from 'vue';
import orderModifyDiscount from '@/views/recycle/components/modify-discount.vue';
import orderBlacklist from '@/views/recycleOrder/detail/order-blacklist.vue';
import orderRecycleLog from '@/views/recycleOrder/detail/order-recycle-log.vue';
import orderSalesLog from '@/views/recycleOrder/detail/order-sales-log.vue';
import setParams from '@/views/recycle/components/set-params.vue';
import request from '@/utils/request';

const props = defineProps({
    detail: {
        type: Object,
        default: () => ({
            detailVoList: []
        })
    }
});
const dataList = ref([]);

// 处理detailVoList数据
const processDetailList = (list) => {
    const result = [];
    let currentIndex = 0;
    list.forEach(item => {
        let auditInfo = item.auditCommentList
        // 根据num拆分对象
        for (let i = 0; i < item.num; i++) {
            let audit = auditInfo ? auditInfo[i] : { sts: 0, com: '' }
            result.push({
                ...item,
                ...audit,
                _index: i,
                _groupIndex: currentIndex, // 用于标识分组
                _isFirstRow: i === 0 // 标识是否是组内第一行
            });
        }
        currentIndex++;
    });
    return result;
};

watch(() => props.detail.detailVoList, (newVal) => {
    if (!newVal) return;
    dataList.value = processDetailList(newVal);
    console.log(dataList.value);
    if (auditReason.value.length == 0) {
        getAuditReason();
    }
}, { deep: true });

// 处理单元格合并
const handleSpanMethod = ({ row, column, rowIndex }) => {
    if (column.property === 'num') {
        // 找到当前行所在组的所有行
        const currentGroup = dataList.value.filter(item => item._groupIndex === row._groupIndex);
        if (row._isFirstRow) {
            // 如果是组内第一行，设置合并行数
            return {
                rowspan: currentGroup.length,
                colspan: 1
            };
        } else {
            // 组内其他行不显示
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
    return {
        rowspan: 1,
        colspan: 1
    };
};
//审核书籍
function handleAudit(row) {
    request.post('/order/orderInfo/adminCheckOrder', {
        "orderId": props.detail.orderId,
        "isbn": row.isbn,
        "inx": row._index,
        "sts": row.sts,
        "com": row.com
    }).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success('操作成功');
        } else {
            ElMessage.error(res.data.msg)
        }
    });
}

//单选框选择变化
function handleAuditInfo(value, row) {
    if (value == 1) {
        row.com = '';
        handleAudit(row)
    } else if (value == 3 && row.com) {
        handleAudit(row)
    }
}
//选择审核原因
function handleSelectReason(value, row) {
    if (row.sts == 3) {
        row.com = value;
        handleAudit(row)
    }
}

const emit = defineEmits(['update:detail', 'refresh']);

const columns = ref([
    {
        type: 'index',
        columnKey: 'index',
        width: 60,
        align: 'center'
    },
    {
        label: '信息',
        prop: 'baseInfo',
        slot: 'baseInfo',
        minWidth: 560,
        align: 'center'
    },
    {
        label: '操作',
        prop: 'action',
        slot: 'action',
        width: 220,
        align: 'center'
    },
    {
        label: '数量',
        prop: 'num',
        minWidth: 90,
        align: 'center',
        formatter: (row) => {
            return `× ${row.num}`;
        }
    },
    {
        label: '审核信息',
        prop: 'auditInfo',
        slot: 'auditInfo',
        align: 'center',
        minWidth: 317
    },
    {
        label: '审核金额',
        prop: 'recyclePrice',
        align: 'center',
        minWidth: 100,
        formatter: (row) => {
            return row.sts == 1 ? `¥ ${row.recyclePrice}` : '0';
        }
    }
]);
//获取审核原因的字典 book_audit_reason
const auditReason = ref([]);
const getAuditReason = async () => {
    const res = await request.get('/system/dict/data/type/book_audit_reason');
    auditReason.value = res.data.data;
    console.log(res, 'xxxx')
};


//查看当当、淘宝、豆瓣链接
const handleViewUrl = (row, type) => {
    let url = '';
    if (type == 'dd') {
        url = `https://search.dangdang.com/?key=${row.isbn}&act=input`;
    } else if (type == 'tb') {
        url = `https://s.taobao.com/search?page=1&q=${row.isbn}&sort=sale-desc&tab=all`;
    } else if (type == 'db') {
        url = `https://search.douban.com/book/subject_search?search_text=${row.isbn}`;
    } else if (type == 'kw') {
        url = `https://search.kongfz.com/product_result/?key=${row.isbn}&status=0&_stpmt=eyJzZWFyY2hfdHlwZSI6ImFjdGl2ZSJ9`;
    }
    window.open(url, '_blank');
};
//加入回收书单
const handleAddBookList = (row) => {
    ElMessageBox.confirm('确认加入回收书单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
    }).then(() => {
        request.post('/book/bookRecycleInfo/addIn', {
            isbnList: [row.isbn]
        }).then(() => {
            ElMessage.success('操作成功');
            // 更新列表数据
            const index = props.detail.detailVoList.findIndex(item => item.isbn === row.isbn);
            if (index > -1) {
                const newList = [...props.detail.detailVoList];
                newList[index] = { ...newList[index], bookStatus: 2 };
                dataList.value = newList;
            }
        });
    });
};
const currentRow = ref(null);
//修改回收折扣
const modifyRef = ref();
const handleModifyDiscount = (row) => {
    currentRow.value = row;
    modifyRef.value?.handleOpen(row);
};
//指定回收折扣
const specifiedRef = ref();
const handleSpecifiedDiscount = (row) => {
    currentRow.value = row;
    specifiedRef.value?.handleOpen(row);
};
//加入黑名单
const blacklistRef = ref();
const handleBlackList = (row) => {
    currentRow.value = row;
    blacklistRef.value?.handleOpen(row);
};
//查看回收日志
const recycleLogRef = ref();
const handleRecycleLog = (row) => {
    recycleLogRef.value?.handleOpen(row);
};
//查看售价日志
const salesLogRef = ref();
const handleSalesLog = (row) => {
    salesLogRef.value?.handleOpen(row);
};

const handleRefresh = (type) => {
    if (!currentRow.value) return;
    const index = dataList.value.findIndex(item => item.isbn === currentRow.value.isbn);
    if (index > -1) {
        const newList = [...dataList.value];
        if (type === 'specified' || type === 'modify') {
            newList[index] = { ...newList[index], settingStatus: 1 };
        } else if (type === 'blacklist') {
            newList[index] = { ...newList[index], bookStatus: 3 };
        }
        dataList.value = newList;
    }
};
</script>

<style lang="scss" scoped>
.mb-10 {
    margin-bottom: 7px;
}

.reason-select {
    :deep(.el-select__wrapper) {
        height: 120px !important;
    }

    :deep(.el-select__placeholder) {
        top: 0;
        text-wrap: wrap;
        white-space: normal;
        text-overflow: initial;
    }
}

.order-books {
    .action-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .el-button {
            margin: 0;
            color: #fff;
        }
    }

    // 处理合并单元格效果
    .el-table {
        td.el-table__cell {
            &.first-row {
                border-bottom: none;
            }
        }

        .first-row~tr {
            td.el-table__cell:nth-child(4) {
                display: none;
            }
        }
    }
}
</style>