shuhi-ui/src/views/priceWorkbench/priceAudit/index.vue

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

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false" :datasource="datasource">
            <template #toolbar>
                <el-radio-group @change="handleStatusChange" v-model="searchType" class="audit-tabs">
                    <el-radio-button label="全部" value="0" />
                    <el-radio-button label="待审核" value="1" />
                    <el-radio-button label="已完成" value="2" />
                </el-radio-group>
            </template>

            <template #cover="{ row }">
                <el-image style="width: 100px; height: 100px; border-radius: 4px" fit="cover" :src="row.cover"
                    :preview-src-list="[row.cover]" :initial-index="0" preview-teleported />
            </template>

            <template #info="{ row }">
                <div class="flex flex-col text-sm">
                    <div class="mb-1">
                        <span class="font-bold">书名: </span>{{ row.bookName }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">作者: </span>{{ row.author }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">ISBN: </span>{{ row.isbn }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">出版社: </span>{{ row.publisher }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">出版时间: </span>{{ row.pubDate }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">所属类型: </span>{{ row.type }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">回收状态: </span>{{ row.recycleStatus }}
                    </div>
                    <div class="mt-2 border-t pt-2">
                        <span class="mr-4">定价: {{ row.price }}</span>
                        <span class="mr-4">回收折扣: {{ row.recycleDiscount }}折 <span
                                class="text-red-500 text-xs">建议0.5-0.6折</span></span>
                        <span>回收价格: {{ row.recyclePrice }}</span>
                    </div>
                    <div class="mb-1">
                        <span class="text-green-500 text-xs">谢程娟: 2025-06-15</span>
                    </div>
                    <div class="mb-1">
                        <span class="mr-4">销售价格: {{ row.salesPrice }}</span>
                        <span class="text-green-500 text-xs">谢程娟: 2025-06-15</span>
                    </div>
                    <div class="mb-1">
                        <span>(已回收数量: {{ row.recycledCount }} 当前库存: {{ row.currentStock }})</span>
                    </div>
                </div>
            </template>

            <template #newPrice="{ row }">
                <div class="flex flex-col items-center">
                    <div class="flex items-center text-xl font-bold">
                        {{ row.newPrice }}
                        <el-icon class="ml-2 cursor-pointer text-red-500">
                            <Edit />
                        </el-icon>
                    </div>
                    <el-button size="small" type="info" plain class="mt-1">填入原售价</el-button>
                </div>
            </template>

            <template #action="{ row }">
                <div class="flex flex-col items-center gap-2">
                    <el-button color="#951d1d" size="small" @click="handleViewUrl(row, 'kw')">查看孔网</el-button>
                    <el-button color="#f37607" size="small" @click="handleViewUrl(row, 'tb')">查看淘宝</el-button>
                    <el-button color="#4095e5" size="small">设置独立参数</el-button>
                    <el-button type="success" size="small">同意</el-button>
                </div>
            </template>
        </common-table>
    </ele-page>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import CommonTable from '@/components/CommonPage/CommonTable.vue';
import PageSearch from './components/page-search.vue';

defineOptions({ name: 'PriceAudit' });

// Component Refs
const pageRef = ref(null);
const searchType = ref('0');

const columns = ref([
    { type: 'selection', width: 50, align: 'center', fixed: 'left' },
    { label: '图片', prop: 'cover', width: 120, slot: 'cover' },
    { label: '信息', prop: 'info', minWidth: 400, slot: 'info' },
    { label: '总回收量', prop: 'totalRecycled', width: 110, sortable: true, align: 'center' },
    { label: '状态', prop: 'status', width: 100, align: 'center' },
    { label: '分配时间', prop: 'assignTime', width: 160, align: 'center' },
    { label: '当前库存', prop: 'currentStock', width: 110, sortable: true, align: 'center' },
    { label: '当前售价', prop: 'salesPrice', width: 100, align: 'center' },
    { label: '处理人', prop: 'handler', width: 100, align: 'center' },
    { label: '新售价', prop: 'newPrice', width: 150, slot: 'newPrice', align: 'center' },
    { label: '操作', prop: 'action', width: 120, slot: 'action', fixed: 'right', align: 'center' }
]);

const pageConfig = reactive({
    fileName: '价格审核',
    cacheKey: 'priceAuditTable',
    params: {
        searchType: '0'
    },
    rowKey: 'id'
});

// Mock datasource
const datasource = ({ page, limit, where, orders }) => {
    return Promise.resolve({
        code: 0,
        msg: 'success',
        count: 10,
        data: Array.from({ length: 10 }).map((_, i) => ({
            id: i + 1,
            cover: 'https://img1.baidu.com/it/u=2356551695,3062334057&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
            bookName: '马克思主义基本原理',
            author: '编写组',
            isbn: '9787056025415',
            publisher: '高等教育出版社',
            pubDate: '2018-06',
            type: '教材库',
            recycleStatus: '正在回收',
            price: 25,
            recycleDiscount: 0.2,
            recyclePrice: 0.5,
            salesPrice: 6.5,
            recycledCount: 200,
            currentStock: 75 + i,
            totalRecycled: 200,
            status: i % 2 === 0 ? '待审核' : '已审核',
            assignTime: '2024-06-15 15:06:11',
            handler: 'zzz',
            newPrice: 10.55
        }))
    });
};

function reload(where) {
    pageRef.value?.reload(where);
}

function handleStatusChange(value) {
    pageRef.value?.reload({ searchType: value });
}

//查看淘宝和孔网
function handleViewUrl(row, type) {
    let url = '';
    if (type == 'tb') {
        url = `https://s.taobao.com/search?q=${row.isbn}`;
    } else if (type == 'kw') {
        url = `https://search.kongfz.com/product_result/?key=${row.isbn}&status=0&_stpmt=eyJzZWFyY2hfdHlwZSI6ImFjdGl2ZSJ9`;
    }
    window.open(url, '_blank');
}
</script>

<style scoped>
/* 仿照截图中的Tabs样式 */
:deep(.audit-tabs) .el-radio-button__inner {
    width: 200px;
    /* 增加宽度 */
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    box-shadow: none;
    color: #666;
}

:deep(.audit-tabs) .el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: #409eff;
    /* 蓝色背景 */
    color: white;
    border-radius: 0;
    /* 保持方形或自定义圆角 */
    box-shadow: none;
}

/* 整体背景可能需要调整，这里仅做基本样式覆盖 */
.audit-tabs {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    width: 100%;
}
</style>