<template>
|
<el-dialog
|
:model-value="dialogViewVisible"
|
@update:model-value="$emit('update:dialogViewVisible', $event)"
|
:title="title"
|
width="900px"
|
:close-on-click-modal="false"
|
>
|
<div class="view-container">
|
<!-- 基本信息 -->
|
<el-card class="info-card" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>基本信息</span>
|
</div>
|
</template>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="退货单号">
|
{{ form.returnNo || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="供应商">
|
{{ form.supplierName || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="单据日期">
|
{{ form.returnDate || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="操作员">
|
{{ form.operatorName || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="退货原因">
|
{{ form.returnReason || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="状态">
|
<el-tag :type="getStatusType(form.status)">
|
{{ getStatusText(form.status) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="退货数量">
|
{{ form.returnQuantity || 0 }} 吨
|
</el-descriptions-item>
|
<el-descriptions-item label="退货金额">
|
{{ form.returnAmount || 0 }} 元
|
</el-descriptions-item>
|
<el-descriptions-item label="创建时间" :span="2">
|
{{ form.createTime || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="备注" :span="2">
|
{{ form.remark || '-' }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<!-- 退货商品明细 -->
|
<el-card class="info-card" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>退货商品明细</span>
|
</div>
|
</template>
|
<el-table :data="form.returnItems || []" border style="width: 100%">
|
<el-table-column label="序号" type="index" width="60" />
|
<el-table-column label="商品名称" prop="coalName" width="150" />
|
<el-table-column label="规格型号" prop="specification" width="150" />
|
<el-table-column label="数量" prop="quantity" width="100">
|
<template #default="scope">
|
{{ scope.row.quantity || 0 }} 吨
|
</template>
|
</el-table-column>
|
<el-table-column label="单价" prop="unitPrice" width="120">
|
<template #default="scope">
|
{{ scope.row.unitPrice || 0 }} 元/吨
|
</template>
|
</el-table-column>
|
<el-table-column label="小计" width="120">
|
<template #default="scope">
|
{{ ((scope.row.quantity || 0) * (scope.row.unitPrice || 0)).toFixed(2) }} 元
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="table-summary">
|
<span class="summary-item">
|
总数量：<strong>{{ getTotalQuantity() }} 吨</strong>
|
</span>
|
<span class="summary-item">
|
总金额：<strong>{{ getTotalAmount() }} 元</strong>
|
</span>
|
</div>
|
</el-card>
|
|
<!-- 审批流程 -->
|
<el-card class="info-card" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>审批流程</span>
|
</div>
|
</template>
|
<el-timeline>
|
<el-timeline-item
|
v-for="(activity, index) in approvalFlow"
|
:key="index"
|
:timestamp="activity.timestamp"
|
:type="activity.type"
|
>
|
<h4>{{ activity.title }}</h4>
|
<p>{{ activity.content }}</p>
|
<p v-if="activity.operator">操作人：{{ activity.operator }}</p>
|
</el-timeline-item>
|
</el-timeline>
|
</el-card>
|
</div>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
|
// Props
|
const props = defineProps({
|
dialogViewVisible: {
|
type: Boolean,
|
default: false
|
},
|
form: {
|
type: Object,
|
default: () => ({})
|
},
|
title: {
|
type: String,
|
default: "退货单详情"
|
}
|
});
|
|
// Emits
|
const emit = defineEmits(['update:dialogViewVisible']);
|
|
// 获取状态类型
|
const getStatusType = (status) => {
|
const statusMap = {
|
draft: "",
|
pending: "warning",
|
approved: "success",
|
rejected: "danger",
|
completed: "info"
|
};
|
return statusMap[status] || "";
|
};
|
|
// 获取状态文本
|
const getStatusText = (status) => {
|
const statusMap = {
|
draft: "草稿",
|
pending: "待审核",
|
approved: "已审核",
|
rejected: "已拒绝",
|
completed: "已完成"
|
};
|
return statusMap[status] || status;
|
};
|
|
// 计算总数量
|
const getTotalQuantity = () => {
|
if (!props.form.returnItems || props.form.returnItems.length === 0) {
|
return 0;
|
}
|
return props.form.returnItems.reduce((total, item) => total + (item.quantity || 0), 0);
|
};
|
|
// 计算总金额
|
const getTotalAmount = () => {
|
if (!props.form.returnItems || props.form.returnItems.length === 0) {
|
return 0;
|
}
|
return props.form.returnItems.reduce((total, item) => {
|
return total + ((item.quantity || 0) * (item.unitPrice || 0));
|
}, 0).toFixed(2);
|
};
|
|
// 审批流程数据
|
const approvalFlow = computed(() => {
|
const flow = [];
|
|
// 创建
|
flow.push({
|
title: "创建退货单",
|
content: "退货单已创建，等待提交审核",
|
timestamp: props.form.createTime || new Date().toLocaleString(),
|
operator: props.form.operatorName || "系统",
|
type: "primary"
|
});
|
|
// 根据状态添加审批流程
|
if (props.form.status === "pending") {
|
flow.push({
|
title: "提交审核",
|
content: "退货单已提交，等待审核",
|
timestamp: new Date().toLocaleString(),
|
operator: props.form.operatorName || "系统",
|
type: "warning"
|
});
|
} else if (props.form.status === "approved") {
|
flow.push({
|
title: "提交审核",
|
content: "退货单已提交，等待审核",
|
timestamp: new Date().toLocaleString(),
|
operator: props.form.operatorName || "系统",
|
type: "warning"
|
});
|
flow.push({
|
title: "审核通过",
|
content: "退货单审核通过",
|
timestamp: new Date().toLocaleString(),
|
operator: "审核员",
|
type: "success"
|
});
|
} else if (props.form.status === "rejected") {
|
flow.push({
|
title: "提交审核",
|
content: "退货单已提交，等待审核",
|
timestamp: new Date().toLocaleString(),
|
operator: props.form.operatorName || "系统",
|
type: "warning"
|
});
|
flow.push({
|
title: "审核拒绝",
|
content: "退货单审核被拒绝",
|
timestamp: new Date().toLocaleString(),
|
operator: "审核员",
|
type: "danger"
|
});
|
} else if (props.form.status === "completed") {
|
flow.push({
|
title: "提交审核",
|
content: "退货单已提交，等待审核",
|
timestamp: new Date().toLocaleString(),
|
operator: props.form.operatorName || "系统",
|
type: "warning"
|
});
|
flow.push({
|
title: "审核通过",
|
content: "退货单审核通过",
|
timestamp: new Date().toLocaleString(),
|
operator: "审核员",
|
type: "success"
|
});
|
flow.push({
|
title: "退货完成",
|
content: "退货流程已完成",
|
timestamp: new Date().toLocaleString(),
|
operator: "系统",
|
type: "info"
|
});
|
}
|
|
return flow;
|
});
|
|
// 关闭对话框
|
const handleClose = () => {
|
emit('update:dialogViewVisible', false);
|
};
|
</script>
|
|
<style scoped>
|
.view-container {
|
padding: 0;
|
}
|
|
.info-card {
|
margin-bottom: 20px;
|
}
|
|
.info-card:last-child {
|
margin-bottom: 0;
|
}
|
|
.card-header {
|
font-weight: bold;
|
font-size: 16px;
|
}
|
|
.table-summary {
|
margin-top: 15px;
|
text-align: right;
|
padding: 10px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
.summary-item {
|
margin-left: 20px;
|
font-size: 14px;
|
}
|
|
.summary-item strong {
|
color: #409eff;
|
font-size: 16px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
.el-timeline {
|
padding: 20px;
|
}
|
|
.el-timeline-item h4 {
|
margin: 0 0 8px 0;
|
font-size: 14px;
|
color: #303133;
|
}
|
|
.el-timeline-item p {
|
margin: 4px 0;
|
font-size: 12px;
|
color: #606266;
|
}
|
</style>
|
