311 lines
11 KiB
Vue
311 lines
11 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* F006 询价管理列表 - W4.9 套 v1.6 设计规范
|
|
*
|
|
* 后端: GET /sys/openapi/inquiry/list?page=&limit=&status=
|
|
* 状态: pending(0) 待报价 / quoting(1) 报价中 / done(2) 已成交 / cancelled(3) 已取消
|
|
*
|
|
* 设计规范:§16 列表页完整模板 + §17.7 紧凑弹窗 + §17.8 主题色弹窗 + §17.9 列优化
|
|
*/
|
|
import { onMounted, computed, reactive, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import DataTable from '@/components/DataTable/DataTable.vue'
|
|
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
|
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
|
import ListTabs from '@/components/ListTabs/ListTabs.vue'
|
|
import { useInquiryStore, STATUS_OPTIONS } from '@/stores/inquiry'
|
|
import { httpGet, httpPost } from '@/utils/request'
|
|
|
|
interface InquiryRow {
|
|
id: string
|
|
customer: string
|
|
product: string
|
|
qty: string
|
|
hidden?: number
|
|
status: 'pending' | 'quoting' | 'done' | 'cancelled' | string
|
|
time: string | number
|
|
raw: any
|
|
}
|
|
|
|
const router = useRouter()
|
|
const store = useInquiryStore()
|
|
|
|
const STATUS_TABS = STATUS_OPTIONS.map(o => ({ value: o.value, label: o.label, key: o.value, count: 0 }))
|
|
|
|
// 各 status 计数 (在当前结果中累加)
|
|
const stats = reactive<Record<string, number>>({ pending: 0, quoting: 0, done: 0, cancelled: 0, all: 0 })
|
|
|
|
const STATUS_LABEL: Record<string, string> = {
|
|
pending: '待报价',
|
|
quoting: '报价中',
|
|
done: '已成交',
|
|
cancelled: '已取消'
|
|
}
|
|
|
|
const list = ref<InquiryRow[]>([])
|
|
const total = ref(0)
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
const page = ref(1)
|
|
const limit = ref(10)
|
|
|
|
const filters = ref({
|
|
status: '',
|
|
customer: '',
|
|
searchKey: '',
|
|
apprStatus: ''
|
|
})
|
|
|
|
function fmtDate(ts?: string | number | null) {
|
|
if (!ts) return '--'
|
|
let n: number
|
|
if (typeof ts === 'string') {
|
|
n = /^\d+$/.test(ts) ? Number(ts) : Date.parse(ts)
|
|
} else {
|
|
n = ts
|
|
}
|
|
if (!n || isNaN(n)) return String(ts)
|
|
const d = new Date(n)
|
|
if (isNaN(d.getTime())) return String(ts)
|
|
const pad = (x: number) => String(x).padStart(2, '0')
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|
}
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
error.value = null
|
|
try {
|
|
const resp = await httpGet<any>('/supplier/inquiry/page', {
|
|
page: page.value,
|
|
limit: limit.value,
|
|
includeHidden: 1,
|
|
...(filters.value.apprStatus ? { apprStatus: filters.value.apprStatus } : {})
|
|
})
|
|
const arr = Array.isArray(resp) ? resp : (resp?.list || [])
|
|
total.value = Number(resp?.total || (arr.length + (page.value - 1) * limit.value))
|
|
list.value = arr.map((it: any) => ({
|
|
id: String(it.id ?? ''),
|
|
customer: it.inquiryEnterpriseName || it.customer || it.customerName || '--',
|
|
product: it.title || it.product || it.productName || '--',
|
|
qty: it.purchaseQuantity || it.qty || '--',
|
|
status: it.status || (it.apprStatus != null ? (['pending','quoting','done','cancelled'][it.apprStatus] || 'pending') : 'pending'),
|
|
apprStatus: it.apprStatus,
|
|
hidden: it.hidden,
|
|
time: it.publishDate || it.createDate || it.time,
|
|
raw: it
|
|
}))
|
|
// 各状态计数 (基于当前页结果)
|
|
stats.all = list.value.length
|
|
list.value.forEach(r => { stats[r.status] = (stats[r.status] || 0) + 1 })
|
|
} catch (e: any) {
|
|
error.value = e?.msg || e?.message || '后端接口异常(详见 console)'
|
|
list.value = []
|
|
total.value = 0
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function onSearch() { page.value = 1; load() }
|
|
|
|
// 审核状态 tab (运营审核用): ''=全部 1=待审核 2=已通过 3=已驳回
|
|
const AUDIT_TABS = [
|
|
{ value: '', label: '全部' },
|
|
{ value: '1', label: '待审核' },
|
|
{ value: '2', label: '已通过' },
|
|
{ value: '3', label: '已驳回' },
|
|
]
|
|
const tabItems = computed(() => AUDIT_TABS.map(t => ({ key: t.value, label: t.label })))
|
|
function onReset() { filters.value.status = ''; filters.value.customer = ''; filters.value.searchKey = ''; page.value = 1; load() }
|
|
function onPageChange(p: number) { page.value = p; load() }
|
|
function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }
|
|
function onStatusTab(v: string) {
|
|
filters.value.apprStatus = v
|
|
page.value = 1
|
|
load()
|
|
}
|
|
// ===== 运营后台 隐藏/删除询价单 =====
|
|
function reload() { load() }
|
|
|
|
async function onHide(row: InquiryRow) {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
'隐藏后，该询价单将在平台前端（招采广场、结果公示、供应商邀请列表及详情页）完全不可见，运营后台仍可查看。',
|
|
'隐藏询价单',
|
|
{ confirmButtonText: '确认隐藏', cancelButtonText: '取消', type: 'warning' }
|
|
)
|
|
} catch { return }
|
|
try {
|
|
await httpPost('/supplier/inquiry/adminHide', { id: row.id, hidden: 1 })
|
|
ElMessage.success('已隐藏，平台前端不再展示')
|
|
reload()
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.msg || e?.message || '操作失败')
|
|
}
|
|
}
|
|
|
|
async function onUnhide(row: InquiryRow) {
|
|
try {
|
|
await httpPost('/supplier/inquiry/adminHide', { id: row.id, hidden: 0 })
|
|
ElMessage.success('已取消隐藏，恢复前端展示')
|
|
reload()
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.msg || e?.message || '操作失败')
|
|
}
|
|
}
|
|
|
|
async function onDelete(row: InquiryRow) {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`<div style="line-height:1.9;font-size:13px">
|
|
<div style="background:#fef0f0;border:1px solid #fbc4c4;color:#c45656;border-radius:6px;padding:8px 12px;margin-bottom:10px;font-weight:600">⚠️ 高危操作，删除后数据不可恢复</div>
|
|
<div style="font-weight:600;margin-bottom:4px">将彻底删除该询价单及其全部关联数据：</div>
|
|
<div>① 询价单与全部商品明细 —— 即前端展示的<b>询价公告</b></div>
|
|
<div>② 全部供应商<b>报价记录</b>与报价明细</div>
|
|
<div>③ <b>邀请报价记录</b></div>
|
|
<div style="color:#909399;margin-top:8px">一般场景建议仅做「隐藏」处理；确需删除（测试数据 / 错误录入 / 信息下架）请谨慎确认。</div>
|
|
</div>`,
|
|
'删除询价单',
|
|
{
|
|
confirmButtonText: '确认删除',
|
|
cancelButtonText: '取消，仅隐藏即可',
|
|
type: 'error',
|
|
confirmButtonClass: 'inq-del-confirm-btn',
|
|
dangerouslyUseHTMLString: true,
|
|
customStyle: { maxWidth: '520px' } as any
|
|
}
|
|
)
|
|
} catch { return }
|
|
try {
|
|
const res: any = await httpPost('/supplier/inquiry/adminDelete', { id: row.id })
|
|
const d = res || {}
|
|
ElMessage.success(`已删除：报价记录 ${d.quotation ?? 0} 条、报价明细 ${d.quotationDetail ?? 0} 条、邀请记录 ${d.quotationInvited ?? 0} 条、询价明细 ${d.inquiryDetail ?? 0} 条`)
|
|
reload()
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.msg || e?.message || '删除失败')
|
|
}
|
|
}
|
|
|
|
function onRowClick(row: InquiryRow) { router.push(`/inquiry/${row.id}`) }
|
|
function onView(row: InquiryRow) { router.push(`/inquiry/${row.id}`) }
|
|
|
|
const columns = computed(() => [
|
|
{ prop: 'id', label: '单号', width: 180 },
|
|
{ prop: 'customer', label: '客户', minWidth: 180 },
|
|
{ prop: 'product', label: '商品', minWidth: 180 },
|
|
{ prop: 'qty', label: '数量', width: 120 },
|
|
{ prop: 'apprStatus', label: '审核状态', width: 175, slot: 'apprStatus' },
|
|
{ prop: 'time', label: '时间', width: 170, slot: 'time' },
|
|
{ label: '操作', width: 265, slot: 'action' }
|
|
])
|
|
|
|
onMounted(() => { load() })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rr-inquiry-list">
|
|
<PageHeader title="询价管理" :sub="`共 ${total} 条询价`">
|
|
<el-button @click="onReset">重置</el-button>
|
|
</PageHeader>
|
|
|
|
<ListTabs v-model="filters.status" :items="tabItems" @change="onStatusTab" />
|
|
|
|
<SearchBar
|
|
v-model:filters="filters"
|
|
:fields='[{ key: "searchKey", label: "", type: "text", placeholder: "搜索单号/客户/商品", clearable: true }]'
|
|
:show-reset="false"
|
|
@search="onSearch"
|
|
/>
|
|
|
|
<div class="rr-list-card">
|
|
<DataTable
|
|
:columns="columns"
|
|
:data="list"
|
|
:loading="loading"
|
|
:total="total"
|
|
:page="page"
|
|
:limit="limit"
|
|
:show-pagination="true" :page-sizes="[10, 20, 50, 100]"
|
|
:error="error"
|
|
empty-text="暂无询价"
|
|
borderless
|
|
row-key="id"
|
|
@page-change="onPageChange"
|
|
@limit-change="onLimitChange"
|
|
@row-click="onRowClick"
|
|
>
|
|
<template #apprStatus="{ row }">
|
|
<el-tag :type="row.apprStatus === 1 ? 'warning' : (row.apprStatus === 2 ? 'success' : (row.apprStatus === 3 ? 'danger' : 'info'))" size="small">
|
|
{{ row.apprStatus === 1 ? '待审核' : (row.apprStatus === 2 ? '已通过' : (row.apprStatus === 3 ? '已驳回' : '--')) }}
|
|
</el-tag>
|
|
<el-tag v-if="row.hidden === 1" type="info" size="small" effect="dark" style="margin-left: 4px">已隐藏</el-tag>
|
|
</template>
|
|
<template #time="{ row }">
|
|
<span class="rr-time">{{ fmtDate(row.time) }}</span>
|
|
</template>
|
|
<template #action="{ row }">
|
|
<div class="rr-action-cell">
|
|
<el-button text type="primary" size="small" @click.stop="onView(row)">查看</el-button>
|
|
<el-button v-if="row.hidden !== 1" text type="warning" size="small" @click.stop="onHide(row)">隐藏</el-button>
|
|
<template v-else>
|
|
<el-button text type="primary" size="small" @click.stop="onUnhide(row)">取消隐藏</el-button>
|
|
<el-button text type="danger" size="small" @click.stop="onDelete(row)">删除</el-button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rr-inquiry-list {
|
|
padding: 16px;
|
|
}
|
|
|
|
.rr-action-cell {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.rr-time {
|
|
font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
|
|
/* 状态徽章(4 种) - 浅底色块(套设计规范 §5.4) */
|
|
.rr-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 2px 12px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.rr-badge::before {
|
|
content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
|
|
}
|
|
.rr-badge-pending { background: var(--amber-soft); color: var(--amber); }
|
|
.rr-badge-quoting { background: var(--brand-soft); color: var(--brand); }
|
|
.rr-badge-done { background: var(--green-soft); color: var(--green); }
|
|
.rr-badge-cancelled { background: var(--red-soft); color: var(--red); }
|
|
</style>
|
|
|
|
<style>
|
|
/* 删除询价单确认弹窗: 确认按钮红色(高危语义) */
|
|
.inq-del-confirm-btn {
|
|
background: var(--el-color-danger, #f56c6c) !important;
|
|
border-color: var(--el-color-danger, #f56c6c) !important;
|
|
}
|
|
.inq-del-confirm-btn:hover {
|
|
background: #e25c5c !important;
|
|
border-color: #e25c5c !important;
|
|
}
|
|
</style>
|