浅念
566 lines
17 KiB
Vue
566 lines
17 KiB
Vue
<template>
|
||
<div class="stocking-page">
|
||
<div class="stocking-toolbar boxshadow">
|
||
<!-- <div class="toolbar-left">
|
||
<ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
|
||
</div> -->
|
||
<div class="toolbar-right">
|
||
<el-input
|
||
v-model="keyword"
|
||
placeholder="请输入客户名称"
|
||
clearable
|
||
style="width: 260px"
|
||
@keyup.enter="getList"
|
||
>
|
||
<template #suffix>
|
||
<el-icon class="clickable" @click="getList"><Search /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="boxshadow">
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="id"
|
||
:loading="loading"
|
||
:data="tableData"
|
||
:currentPage="pagination.currentPage"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn label="备货单编号" prop="order_no" min-width="140" />
|
||
<ElTableColumn label="阿里订单号/PI号" prop="pi_no" min-width="160" />
|
||
<ElTableColumn label="客户名称" prop="customer_snapshot" min-width="120" />
|
||
<ElTableColumn label="客户来源" prop="customer_source_snapshot" min-width="120" />
|
||
<ElTableColumn label="业务员" prop="salesperson_snapshot" min-width="100" />
|
||
<ElTableColumn label="日期" prop="created_at" min-width="120" />
|
||
<ElTableColumn label="状态" prop="approval_status">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.appro_status">
|
||
<div>
|
||
<span :class="statusClass(scope.row.appro_status.status)">
|
||
{{
|
||
scope.row.appro_status.status_desc
|
||
? scope.row.appro_status.status_desc
|
||
: ''
|
||
}}
|
||
</span>
|
||
<span v-if="scope.row.appro_status.name != ''">
|
||
【{{ scope.row.appro_status.name }}】
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div v-else></div>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="操作" fixed="right" min-width="120" align="center">
|
||
<template #default="scope">
|
||
<ElRow :gutter="10" justify="center">
|
||
<el-link
|
||
type="warning"
|
||
underline="never"
|
||
v-if="scope.row.file_url != null && scope.row.file_url != ''"
|
||
@click="printfn(scope.row)"
|
||
style="margin-right: 8px"
|
||
>
|
||
<i class="iconfont-sys"></i> 打印预览
|
||
</el-link>
|
||
<el-link
|
||
type="primary"
|
||
underline="never"
|
||
@click="handleView1(scope.row)"
|
||
style="margin-right: 8px"
|
||
>
|
||
<i class="iconfont-sys"></i> 查看终版
|
||
</el-link>
|
||
<el-link
|
||
type="warning"
|
||
underline="never"
|
||
@click="showDialogtimeline(scope.row)"
|
||
style="margin-right: 8px"
|
||
>
|
||
<i class="iconfont-sys"></i> 查看审批
|
||
</el-link>
|
||
<!-- <el-link
|
||
type="primary"
|
||
underline="never"
|
||
@click="handleViewnq(scope.row)"
|
||
style="margin-right: 8px;color: #750AF8"
|
||
>
|
||
<i class="iconfont-sys"></i> 内勤专用
|
||
</el-link> -->
|
||
</ElRow>
|
||
</template>
|
||
</ElTableColumn>
|
||
</template>
|
||
</ArtTable>
|
||
</div>
|
||
<!-- 订单详情弹窗（使用公共内容组件） -->
|
||
<el-dialog
|
||
v-model="orderDialog.visible"
|
||
:title="orderDialog.title"
|
||
width="95%"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<OrderDetailContent :orderData="orderDialog.orderData" />
|
||
<!-- 合同文件 -->
|
||
<div class="boxshadow">
|
||
<FilePreview title="合同文件" :files="contractFiles" empty-text="暂无合同文件" />
|
||
</div>
|
||
|
||
<!-- PI文件 -->
|
||
<div class="boxshadow">
|
||
<FilePreview title="PI文件" :files="piFiles" empty-text="暂无PI文件" />
|
||
</div>
|
||
|
||
<!-- 水单文件 -->
|
||
<div class="boxshadow">
|
||
<FilePreview title="水单文件" :files="waterBillFiles" empty-text="暂无水单文件" />
|
||
</div>
|
||
<template #footer>
|
||
<div style="display: flex; justify-content: flex-end; gap: 8px">
|
||
<el-button @click="orderDialog.visible = false">关闭</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- PDF 预览弹窗 -->
|
||
<el-dialog
|
||
v-model="pdf.visible"
|
||
title="打印预览"
|
||
width="80%"
|
||
top="40px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div style="max-height: 50vh; display: flex; flex-direction: column; gap: 12px">
|
||
<div style="display: flex; justify-content: flex-end; gap: 8px">
|
||
<el-button @click="download" v-if="isFinites">下载</el-button>
|
||
</div>
|
||
<div
|
||
v-if="pdf.images.length"
|
||
style="overflow: auto; border: 1px solid #eee; border-radius: 6px; padding: 8px"
|
||
>
|
||
<img
|
||
v-for="(img, idx) in pdf.images"
|
||
:key="idx"
|
||
:src="img"
|
||
style="display: block; width: 100%; margin-bottom: 8px; background: #fff"
|
||
/>
|
||
</div>
|
||
<iframe
|
||
v-else-if="pdf.blobUrl || pdf.url"
|
||
ref="frameRef"
|
||
:src="pdf.blobUrl || pdf.url"
|
||
style="flex: 1; width: 100%; border: 1px solid #eee; border-radius: 6px;"
|
||
/>
|
||
</div>
|
||
<div class="inter-view">
|
||
<InternalStaffViews
|
||
v-model:visible="pdf.visible"
|
||
:vehicle-data="nqData"
|
||
:default-currency="nqCurrency"
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="timelineDialogVisible"
|
||
title="审批历史"
|
||
width="600px"
|
||
:close-on-click-modal="false"
|
||
:close-on-press-escape="false"
|
||
class="approval-dialog"
|
||
>
|
||
<div class="approval-content">
|
||
<!-- 头部信息 -->
|
||
<ApprovalTimeline :records="approvalRecords" />
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 内勤查看弹窗 -->
|
||
<!-- <InternalStaffView
|
||
v-model:visible="nqDialogVisible"
|
||
:vehicle-data="nqData"
|
||
:default-currency="nqCurrency"
|
||
/> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// import { router } from '@/router'
|
||
// import { CrmService } from '@/api/crmApi'
|
||
import { manageService } from '@/api/adminApi'
|
||
// import { useAuth } from '@/composables/useAuth'
|
||
import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
|
||
import ApprovalTimeline from '@/components/custom/ApprovalTimeline.vue'
|
||
import type { OrderData } from '@/composables/useOrderDetailDialog'
|
||
import { usePdfPreview } from '@/composables/usePdfPreview'
|
||
import FilePreview from '@/components/custom/FilePreview.vue'
|
||
// import InternalStaffView from '@/components/custom/InternalStaffView.vue'
|
||
import InternalStaffViews from '@/components/custom/InternalStaffViews.vue'
|
||
const timelineDialogVisible = ref(false)
|
||
const approvalRecords = ref<any[]>([])
|
||
const isFinites = ref(false)
|
||
// PDF 预览/打印（公共）
|
||
const {
|
||
pdf,
|
||
frameRef,
|
||
openWithResponse,
|
||
download,
|
||
/* print,*/
|
||
preparePreview,
|
||
prepareImages
|
||
} = usePdfPreview()
|
||
defineOptions({ name: 'AdminFinalListPage' })
|
||
// 订单详情弹窗
|
||
const orderDialog = reactive({
|
||
visible: false,
|
||
title: '订单详情',
|
||
orderData: {} as OrderData
|
||
})
|
||
|
||
// const { hasAuth } = useAuth()
|
||
const loading = ref(false)
|
||
const keyword = ref('')
|
||
const tableRef = ref()
|
||
const tableData = ref<any[]>([])
|
||
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
||
|
||
// 内勤查看：币种与数据
|
||
const nqDialogVisible = ref(false)
|
||
const nqCurrency = ref('')
|
||
const nqData = ref<any[]>([])
|
||
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
|
||
watch([keyword], () => {
|
||
pagination.currentPage = 1
|
||
// 不自动请求，保持与截图行为一致，点击搜索或回车触发
|
||
})
|
||
|
||
const getList = async () => {
|
||
loading.value = true
|
||
try {
|
||
const { currentPage, pageSize } = pagination
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
is_final: 1, // 只获取备货单，非终版
|
||
keyword: keyword.value
|
||
}
|
||
|
||
const { records, current, size, total } = await manageService.getStockList(params)
|
||
tableData.value = records || []
|
||
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||
} catch (error) {
|
||
console.error('获取列表失败:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
function statusClass(status: any) {
|
||
if (status === 'rejected') return 'status-lost'
|
||
if (status === 'approved') return 'status-following'
|
||
return 'status-dealed'
|
||
}
|
||
|
||
const handleSizeChange = (size: number) => {
|
||
pagination.pageSize = size
|
||
getList()
|
||
}
|
||
const handleCurrentChange = (page: number) => {
|
||
pagination.currentPage = page
|
||
getList()
|
||
}
|
||
//打印
|
||
const printfn = (row: any) => {
|
||
if (row.approval_status == 2) {
|
||
isFinites.value = true
|
||
} else {
|
||
isFinites.value = false
|
||
}
|
||
handleViewnq(row)
|
||
manageService
|
||
.printStock({ id: row.id })
|
||
.then((res) => {
|
||
openWithResponse(res)
|
||
// 优先转成图片以适配不带插件的环境
|
||
prepareImages()
|
||
// 同时保留 blob 预览作为兜底
|
||
preparePreview()
|
||
})
|
||
.catch((err) => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
const handleViewnq = async (row: any) => {
|
||
const res = await manageService.checkStock({ id: row.id })
|
||
// 默认币种来自 currency_symbol
|
||
if (res?.currency_symbol) {
|
||
nqCurrency.value = res.currency_symbol
|
||
} else {
|
||
nqCurrency.value = 'USD'
|
||
}
|
||
const list = Array.isArray(res?.veh_list) ? res.veh_list : []
|
||
nqData.value = list.map((it: any) => ({
|
||
model_snapshot: it.model_snapshot,
|
||
qty: 1,
|
||
clearance_price: it.clearance_price,
|
||
clearance_price_currency: it.clearance_price?.currency || it.clearance_price_currency,
|
||
fob_transport_fee: it.fob_transport_fee,
|
||
fob_fee_currency: it.fob_transport_fee?.currency || it.fob_fee_currency,
|
||
car_price: it.car_price,
|
||
car_price_currency: it.car_price?.currency || it.car_price_currency,
|
||
ocean_freight: it.ocean_freight,
|
||
ocean_freight_currency: it.ocean_freight?.currency || it.ocean_freight_currency,
|
||
commission: it.commission,
|
||
commission_currency: it.commission?.currency || it.commission_currency,
|
||
retention_price: it.retention_price,
|
||
retention_price_currency: it.retention_price?.currency || it.retention_price_currency,
|
||
port_misc_fee: it.port_misc_fee,
|
||
port_fee_currency: it.port_misc_fee?.currency || it.port_fee_currency,
|
||
model: it.model_snapshot
|
||
}))
|
||
// nqDialogVisible.value = true
|
||
}
|
||
// 文件数据
|
||
const contractFiles = ref<Array<{ name: string; url: string; file_name: string }>>([])
|
||
const piFiles = ref<Array<{ name: string; url: string; file_name: string }>>([])
|
||
const waterBillFiles = ref<Array<{ name: string; url: string; file_name: string }>>([])
|
||
|
||
// 处理文件数据
|
||
const processFiles = (files: any[], type: string) => {
|
||
if (!files || !Array.isArray(files)) return []
|
||
return files.map((file: any) => ({
|
||
name: `${type}文件`,
|
||
url: file.file_full_url || file.file_url,
|
||
file_name: file.file_url
|
||
}))
|
||
}
|
||
const handleView1 = async (row: any) => {
|
||
const res = await manageService.checkStock({ id: row.object_id })
|
||
// 处理合同文件
|
||
const file_list = res?.file_list
|
||
if (file_list?.contract) {
|
||
contractFiles.value = processFiles(file_list.contract, '合同')
|
||
} else {
|
||
contractFiles.value = []
|
||
}
|
||
|
||
// 处理PI文件
|
||
if (file_list?.pi_doc) {
|
||
piFiles.value = processFiles(file_list.pi_doc, 'PI')
|
||
} else {
|
||
piFiles.value = []
|
||
}
|
||
|
||
// 处理水单文件
|
||
if (file_list?.transaction_slip) {
|
||
waterBillFiles.value = processFiles(file_list.transaction_slip, '水单')
|
||
} else {
|
||
waterBillFiles.value = []
|
||
}
|
||
if (res) {
|
||
// 获取订单详情成功
|
||
const orderData: OrderData = res
|
||
orderDialog.orderData = orderData
|
||
orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
|
||
orderDialog.visible = true
|
||
}
|
||
// router.push({
|
||
// path: '/admin/stock/final_show_admin',
|
||
// query: { id: row.id } // 可带客户名等参数
|
||
// })
|
||
// TODO: 跳转或弹窗查看备货单
|
||
}
|
||
// 判断是否为图片文件
|
||
/* const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||
// 检查文件名
|
||
if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
|
||
return true
|
||
}
|
||
|
||
// 检查file_name字段
|
||
if (file.file_name && file.file_name.startsWith('image/')) {
|
||
return true
|
||
}
|
||
|
||
// 检查URL中的文件扩展名（去除查询参数）
|
||
if (file.url) {
|
||
const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
|
||
if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
|
||
return true
|
||
}
|
||
}
|
||
|
||
return false
|
||
} */
|
||
|
||
// 预览图片
|
||
/* const previewImage = (file: { name: string; url: string; file_name: string }) => {
|
||
// 创建图片预览弹窗
|
||
const imagePreview = document.createElement('div')
|
||
imagePreview.style.cssText = `
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
`
|
||
|
||
const image = document.createElement('img')
|
||
image.src = file.url
|
||
image.alt = file.name
|
||
image.style.cssText = `
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
object-fit: contain;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||
`
|
||
|
||
const closeBtn = document.createElement('div')
|
||
closeBtn.innerHTML = '×'
|
||
closeBtn.style.cssText = `
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 30px;
|
||
color: white;
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
z-index: 10000;
|
||
`
|
||
|
||
imagePreview.appendChild(image)
|
||
imagePreview.appendChild(closeBtn)
|
||
document.body.appendChild(imagePreview)
|
||
|
||
// 点击关闭
|
||
const closePreview = () => {
|
||
document.body.removeChild(imagePreview)
|
||
}
|
||
|
||
imagePreview.addEventListener('click', closePreview)
|
||
closeBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation()
|
||
closePreview()
|
||
})
|
||
|
||
// ESC键关闭
|
||
const handleKeydown = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') {
|
||
closePreview()
|
||
document.removeEventListener('keydown', handleKeydown)
|
||
}
|
||
}
|
||
document.addEventListener('keydown', handleKeydown)
|
||
} */
|
||
|
||
// 下载文件
|
||
/* const downloadFile = (file: { name: string; url: string; file_name: string }) => {
|
||
try {
|
||
const link = document.createElement('a')
|
||
link.href = file.url
|
||
link.download = file.name
|
||
link.target = '_blank'
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
} catch (error) {
|
||
console.error('下载失败:', error)
|
||
ElMessage.error('下载失败，请稍后重试')
|
||
}
|
||
} */
|
||
//审批进度
|
||
const showDialogtimeline = async (row: any) => {
|
||
// 审批记录（兼容多种字段）
|
||
const resstockapprovallogs = await manageService.stockapprovaltimeline({
|
||
id: row.id,
|
||
flow_type: 'stock_orders'
|
||
})
|
||
console.log(resstockapprovallogs)
|
||
const historyList = resstockapprovallogs
|
||
if (historyList.length > 0) {
|
||
approvalRecords.value = historyList.map((h: any) => ({
|
||
name: h?.initiator_name ? h?.initiator_name : h?.name,
|
||
role: h?.status_desc,
|
||
time: h?.time || '',
|
||
approved: h?.status === 'approved' || h?.status === 'submitted',
|
||
rejected: h?.status === 'rejected',
|
||
pending: h?.status != 'approved' && h?.status != 'rejected' && h?.status != 'submitted',
|
||
comment: h?.comment || h?.remark || ''
|
||
}))
|
||
}
|
||
timelineDialogVisible.value = true
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.stocking-page {
|
||
background: var(--art-main-bg-color);
|
||
min-height: 100vh;
|
||
}
|
||
.stocking-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
padding: 12px 16px;
|
||
background: var(--art-main-bg-color);
|
||
}
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.clickable {
|
||
cursor: pointer;
|
||
}
|
||
.status-following {
|
||
color: #00a43f;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-dealed {
|
||
color: #3471ff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-lost {
|
||
color: #ff0000;
|
||
font-weight: bold;
|
||
}
|
||
.no-file {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.no-file i {
|
||
font-size: 48px;
|
||
color: #ddd;
|
||
}
|
||
.inter-view {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|