|
|
@@ -0,0 +1,201 @@
|
|
|
+<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>
|