浅念
593 lines
19 KiB
Vue
593 lines
19 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" />
|
|
<ElTableColumn label="阿里订单号/PI号" prop="pi_no" />
|
|
<ElTableColumn label="客户名称" prop="customer_snapshot" />
|
|
<ElTableColumn label="客户来源" prop="customer_source_snapshot" />
|
|
<ElTableColumn label="业务员" prop="salesperson_snapshot" />
|
|
<ElTableColumn label="日期" prop="created_at" />
|
|
<!-- <ElTableColumn label="补充" prop="remark" /> -->
|
|
<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
|
|
v-if="scope.row.file_url != null && scope.row.file_url != ''"
|
|
type="warning"
|
|
underline="never"
|
|
@click="printfn(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 打印预览
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.approval_status == 0"
|
|
type="success"
|
|
underline="never"
|
|
@click="handleapproval(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 提交
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.approval_status == 0"
|
|
type="primary"
|
|
underline="never"
|
|
@click="handleEdit(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 编辑
|
|
</el-link>
|
|
<el-link
|
|
type="success"
|
|
underline="never"
|
|
@click="handleView(scope.row)"
|
|
style="margin-right: 8px;color: #333333;"
|
|
>
|
|
<i class="iconfont-sys"></i> 查看
|
|
</el-link>
|
|
<el-link
|
|
v-if="
|
|
scope.row.is_use == 0 &&
|
|
scope.row.approval_status == 2 &&(scope.row.appro_status?scope.row.appro_status.status=='approved':false)
|
|
"
|
|
type="primary"
|
|
underline="never"
|
|
style="margin-right: 8px"
|
|
@click="handleCreateRepair(scope.row)"
|
|
>
|
|
<i class="iconfont-sys"></i> 创建终版
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.is_use == 1"
|
|
type="success"
|
|
underline="never"
|
|
style="margin-right: 8px"
|
|
@click="handleView1(scope.row)"
|
|
>
|
|
<i class="iconfont-sys"></i> 查看终版
|
|
</el-link>
|
|
<el-link
|
|
type="danger"
|
|
underline="never"
|
|
@click="copys(scope.row)"
|
|
style="margin-right: 8px;color: #F04800;"
|
|
>
|
|
<i class="iconfont-sys"></i> 复制
|
|
</el-link>
|
|
<el-link
|
|
type="success"
|
|
underline="never"
|
|
@click="showDialogtimeline(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 查看审批
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.approval_status == 1"
|
|
type="danger"
|
|
underline="never"
|
|
@click="stockrecallfn(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 撤回
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.approval_status == 2"
|
|
type="danger"
|
|
underline="never"
|
|
@click="stockinvalidfn(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 作废
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.approval_status == 3 || scope.row.approval_status == 4"
|
|
type="danger"
|
|
underline="never"
|
|
@click="stockdeletefn(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 删除
|
|
</el-link>
|
|
</ElRow>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
</div>
|
|
|
|
<!-- PDF 预览弹窗 -->
|
|
<el-dialog
|
|
v-model="pdf.visible"
|
|
title="打印预览"
|
|
width="80%"
|
|
top="40px"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<div style="max-height: 70vh; 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>
|
|
</el-dialog>
|
|
|
|
<!-- 订单详情弹窗（使用公共内容组件） -->
|
|
<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>
|
|
<!-- 终版详情 -->
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { router } from '@/router'
|
|
import { CrmService } from '@/api/crmApi'
|
|
import { ElMessage } from 'element-plus'
|
|
import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
|
|
import type { OrderData } from '@/composables/useOrderDetailDialog'
|
|
import ApprovalTimeline from '@/components/custom/ApprovalTimeline.vue'
|
|
import FilePreview from '@/components/custom/FilePreview.vue'
|
|
import { usePdfPreview } from '@/composables/usePdfPreview'
|
|
import { manageService } from '@/api/adminApi'
|
|
const timelineDialogVisible = ref(false)
|
|
const approvalRecords = ref<any[]>([])
|
|
const isFinites = ref(false)
|
|
// import { useAuth } from '@/composables/useAuth'
|
|
// const { hasAuth } = useAuth()
|
|
|
|
defineOptions({ name: 'CrmStockingList' }) // 定义组件名称，用于 KeepAlive 缓存控制
|
|
|
|
const loading = ref(false)
|
|
const keyword = ref('')
|
|
const tableRef = ref()
|
|
const tableData = ref<any[]>([])
|
|
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
|
|
|
// 订单详情弹窗
|
|
const orderDialog = reactive({
|
|
visible: false,
|
|
title: '订单详情',
|
|
orderData: {} as OrderData
|
|
})
|
|
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
//审批进度
|
|
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
|
|
}
|
|
function statusClass(status: any) {
|
|
if (status === 'rejected' || status === 'voided') return 'status-lost'
|
|
if (status === 'approved') return 'status-following'
|
|
return 'status-dealed'
|
|
}
|
|
watch([keyword], () => {
|
|
pagination.currentPage = 1
|
|
// 不自动请求，保持与截图行为一致，点击搜索或回车触发
|
|
})
|
|
|
|
const getList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const { currentPage, pageSize } = pagination
|
|
const params = {
|
|
current: currentPage,
|
|
size: pageSize,
|
|
is_final: 0, // 只获取备货单，非终版
|
|
keyword: keyword.value
|
|
}
|
|
|
|
const { records, current, size, total } = await CrmService.getStockList(params)
|
|
tableData.value = records || []
|
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
|
} catch (error) {
|
|
console.error('获取列表失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSizeChange = (size: number) => {
|
|
pagination.pageSize = size
|
|
getList()
|
|
}
|
|
const handleCurrentChange = (page: number) => {
|
|
pagination.currentPage = page
|
|
getList()
|
|
}
|
|
|
|
const handleCreate = () => {
|
|
// TODO: 跳转到创建备货单页面
|
|
router.push('/crmpc/stocking/Add')
|
|
}
|
|
const handleView = async (row: any) => {
|
|
try {
|
|
// 获取订单详情数据
|
|
const res = await CrmService.checkStock({ id: row.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) {
|
|
// 转换数据格式以适配 OrderDetailDialog
|
|
const orderData: OrderData = res
|
|
|
|
orderDialog.orderData = orderData
|
|
orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
|
|
orderDialog.visible = true
|
|
}
|
|
} catch (error) {
|
|
console.error('获取订单详情失败:', error)
|
|
ElMessage.error('获取订单详情失败')
|
|
}
|
|
}
|
|
// 文件数据
|
|
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 CrmService.checkStock({ id: row.object_id })
|
|
|
|
// 处理合同文件
|
|
if (res?.contract) {
|
|
contractFiles.value = processFiles(res.contract, '合同')
|
|
}
|
|
|
|
// 处理PI文件
|
|
if (res?.pi_doc) {
|
|
piFiles.value = processFiles(res.pi_doc, 'PI')
|
|
}
|
|
|
|
// 处理水单文件
|
|
if (res?.transaction_slip) {
|
|
waterBillFiles.value = processFiles(res.transaction_slip, '水单')
|
|
}
|
|
|
|
if (res) {
|
|
// 获取订单详情成功
|
|
const orderData: OrderData = res
|
|
orderDialog.orderData = orderData
|
|
orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
|
|
orderDialog.visible = true
|
|
}
|
|
}
|
|
const handleCreateRepair = (row: any) => {
|
|
router.push({
|
|
path: '/crmpc/stocking/final_add',
|
|
query: { id: row.id } // 可带客户名等参数
|
|
})
|
|
// TODO: 跳转创建维修保单
|
|
}
|
|
const handleEdit = (row: any) => {
|
|
router.push({
|
|
path: '/crmpc/stocking/stocking_edit',
|
|
query: { id: row.id } // 可带客户名等参数
|
|
})
|
|
}
|
|
const handleapproval = (row: any) => {
|
|
CrmService.submitStock({ id: row.id })
|
|
.then((res) => {
|
|
ElMessage.success(res?.message || '修改成功')
|
|
getList()
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
// PDF 预览/打印（公共）
|
|
const { pdf, frameRef, openWithResponse, download, preparePreview, prepareImages } =
|
|
usePdfPreview()
|
|
//打印
|
|
const printfn = (row: any) => {
|
|
if (row.approval_status == 2) {
|
|
isFinites.value = true
|
|
} else {
|
|
isFinites.value = false
|
|
}
|
|
CrmService.printStock({ id: row.id })
|
|
.then((res) => {
|
|
openWithResponse(res)
|
|
// 优先转成图片以适配不带插件的环境
|
|
prepareImages()
|
|
// 同时保留 blob 预览作为兜底
|
|
preparePreview()
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
//复制订单
|
|
const copys = (row: any) => {
|
|
console.log('复制订单:', row.id)
|
|
router.push({
|
|
path: '/crmpc/stocking/Add',
|
|
query: { id: row.id } // 可带客户名等参数
|
|
})
|
|
// 添加具体的复制逻辑
|
|
}
|
|
//备货单撤回
|
|
const stockrecallfn = (row: any) => {
|
|
ElMessageBox.confirm('确定要撤回此备货单吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(async () => {
|
|
CrmService.stockrecall({ id: row.id })
|
|
.then((res) => {
|
|
ElMessage.success(res?.message || '操作成功')
|
|
getList()
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
// 你可以在这里调用接口或做后续处理
|
|
})
|
|
.catch(() => {
|
|
// 用户点击了取消
|
|
})
|
|
}
|
|
//备货单作废
|
|
const stockinvalidfn = (row: any) => {
|
|
ElMessageBox.confirm('确定要作废此备货单吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(async () => {
|
|
CrmService.stockinvalid({ id: row.id })
|
|
.then((res) => {
|
|
ElMessage.success(res?.message || '操作成功')
|
|
getList()
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
// 你可以在这里调用接口或做后续处理
|
|
})
|
|
.catch(() => {
|
|
// 用户点击了取消
|
|
})
|
|
}
|
|
//删除
|
|
const stockdeletefn = (row: any) => {
|
|
ElMessageBox.confirm('确定要删除此备货单吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(async () => {
|
|
CrmService.stockdelete({ id: row.id })
|
|
.then((res) => {
|
|
ElMessage.success(res?.message || '操作成功')
|
|
getList()
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
// 你可以在这里调用接口或做后续处理
|
|
})
|
|
.catch(() => {
|
|
// 用户点击了取消
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-table__empty-block) {
|
|
height: 100% !important;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|