潘的第一次 commit
This commit is contained in:
panchengyong
1324
erp-frontend-vue/src/views/Sales/Order/form.vue
Normal file
1324
erp-frontend-vue/src/views/Sales/Order/form.vue
Normal file
File diff suppressed because it is too large
Load Diff
629
erp-frontend-vue/src/views/Sales/Order/index.vue
Normal file
629
erp-frontend-vue/src/views/Sales/Order/index.vue
Normal file
@@ -0,0 +1,629 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 搜索区域 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-form :model="queryParams" :inline="true" @submit.prevent="handleQuery">
|
||||
<el-form-item label="合同号">
|
||||
<el-input
|
||||
v-model="queryParams.contractNo"
|
||||
placeholder="请输入合同号"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据编码">
|
||||
<el-input
|
||||
v-model="queryParams.orderCode"
|
||||
placeholder="请输入单据编码"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称">
|
||||
<el-input
|
||||
v-model="queryParams.clientName"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="销售员">
|
||||
<el-input
|
||||
v-model="queryParams.salesmanName"
|
||||
placeholder="请输入销售员"
|
||||
clearable
|
||||
style="width: 120px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="销售类型">
|
||||
<el-select
|
||||
v-model="queryParams.salesType"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in salesTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" v-show="viewMode === 'detail'">
|
||||
<el-input
|
||||
v-model="queryParams.itemName"
|
||||
placeholder="请输入物料名称"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 240px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<el-icon><Search /></el-icon>搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 工具栏与表格 -->
|
||||
<el-card class="table-card" shadow="never">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<!-- 视图切换按钮：当前是单据视图时显示"明细"按钮切换到明细视图 -->
|
||||
<el-button
|
||||
v-if="viewMode === 'document'"
|
||||
@click="switchView('detail')"
|
||||
>
|
||||
明细
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
@click="switchView('document')"
|
||||
>
|
||||
单据
|
||||
</el-button>
|
||||
<el-button @click="handleQueryAll">查询所有</el-button>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增
|
||||
</el-button>
|
||||
<!-- 单据视图专有按钮 -->
|
||||
<template v-if="viewMode === 'document'">
|
||||
<el-button
|
||||
type="danger"
|
||||
:disabled="selectedRows.length === 0"
|
||||
@click="handleBatchDelete"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>删除
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!canAudit"
|
||||
@click="handleAudit"
|
||||
>
|
||||
<el-icon><Check /></el-icon>审核
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
:disabled="!canUnaudit"
|
||||
@click="handleUnaudit"
|
||||
>
|
||||
反审核
|
||||
</el-button>
|
||||
</template>
|
||||
<el-button @click="handleExport">
|
||||
<el-icon><Download /></el-icon>导出
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 明细视图表格 -->
|
||||
<el-table
|
||||
v-if="viewMode === 'detail'"
|
||||
v-loading="loading"
|
||||
:data="detailTableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" fixed="left" />
|
||||
<el-table-column prop="contractNo" label="合同号" width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="orderCode" label="单据编码" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="handleView(row)">{{ row.orderCode }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderStatus" label="单据状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.orderStatus)">
|
||||
{{ getStatusLabel(row.orderStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="clientName" label="客户名称" width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="salesmanName" label="销售员" width="100" />
|
||||
<el-table-column prop="itemName" label="物料名称" width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="itemCode" label="物料编码" width="120" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.quantity) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unitPrice" label="单价" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.unitPrice) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金额" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.amount) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deliveredQty" label="发货数量" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.deliveredQty || 0) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="salesType" label="销售类型" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ getSalesTypeLabel(row.salesType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderDate" label="单据日期" width="110" />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleProgress(row)">生产进度</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 单据视图表格 -->
|
||||
<el-table
|
||||
v-else
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
:max-height="tableHeight"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" fixed="left" />
|
||||
<el-table-column prop="orderCode" label="单据编码" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="handleView(row)">{{ row.orderCode }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderDate" label="单据日期" width="110" />
|
||||
<el-table-column prop="orderStatus" label="单据状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.orderStatus)">
|
||||
{{ getStatusLabel(row.orderStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bizType" label="业务类型" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ getBizTypeLabel(row.bizType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="clientName" label="销售客户" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="salesmanName" label="销售员" width="100" />
|
||||
<el-table-column prop="bizStatus" label="业务状态" width="90">
|
||||
<template #default="{ row }">
|
||||
{{ getBizStatusLabel(row.bizStatus) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="auditDate" label="审核日期" width="110" />
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleView(row)">查看</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
:disabled="row.orderStatus === '审核'"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-popconfirm title="确认删除？" @confirm="handleDelete(row)">
|
||||
<template #reference>
|
||||
<el-button
|
||||
type="danger"
|
||||
link
|
||||
:disabled="row.orderStatus === '审核'"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.pageNum"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Search, Plus, Delete, Check, Download } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getSalesOrderList,
|
||||
getSalesOrderDetailList,
|
||||
deleteSalesOrder,
|
||||
auditSalesOrder,
|
||||
unauditSalesOrder,
|
||||
exportSalesOrder,
|
||||
ORDER_STATUS_MAP,
|
||||
SALES_TYPE_OPTIONS,
|
||||
BIZ_TYPE_OPTIONS,
|
||||
BIZ_STATUS_OPTIONS,
|
||||
type SalesOrder,
|
||||
type SalesOrderDetailView,
|
||||
type SalesOrderQuery
|
||||
} from '@/api/salesOrder'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// ============ 响应式状态 ============
|
||||
|
||||
/** 视图模式：detail=明细视图，document=单据视图 */
|
||||
const viewMode = ref<'detail' | 'document'>('document')
|
||||
|
||||
/** 加载状态 */
|
||||
const loading = ref(false)
|
||||
|
||||
/** 查询参数 */
|
||||
const queryParams = reactive<SalesOrderQuery>({
|
||||
orderCode: '',
|
||||
contractNo: '',
|
||||
clientName: '',
|
||||
salesmanName: '',
|
||||
salesType: '',
|
||||
itemName: '',
|
||||
beginOrderDate: '',
|
||||
endOrderDate: '',
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
})
|
||||
|
||||
/** 日期范围 */
|
||||
const dateRange = ref<string[]>([])
|
||||
|
||||
/** 单据视图数据 */
|
||||
const tableData = ref<SalesOrder[]>([])
|
||||
|
||||
/** 明细视图数据 */
|
||||
const detailTableData = ref<SalesOrderDetailView[]>([])
|
||||
|
||||
/** 总条数 */
|
||||
const total = ref(0)
|
||||
|
||||
/** 选中行（单据视图） */
|
||||
const selectedRows = ref<SalesOrder[]>([])
|
||||
|
||||
/** 表格高度 */
|
||||
const tableHeight = ref(500)
|
||||
|
||||
/** 销售类型选项 */
|
||||
const salesTypeOptions = SALES_TYPE_OPTIONS
|
||||
|
||||
// ============ 计算属性 ============
|
||||
|
||||
/** 是否可以审核（选中了开立状态的订单） */
|
||||
const canAudit = computed(() => {
|
||||
return selectedRows.value.length > 0 &&
|
||||
selectedRows.value.every(row => row.orderStatus === '开立')
|
||||
})
|
||||
|
||||
/** 是否可以反审核（选中了审核状态的订单） */
|
||||
const canUnaudit = computed(() => {
|
||||
return selectedRows.value.length > 0 &&
|
||||
selectedRows.value.every(row => row.orderStatus === '审核')
|
||||
})
|
||||
|
||||
// ============ 方法 ============
|
||||
|
||||
/** 获取状态标签类型 */
|
||||
function getStatusType(status: string): string {
|
||||
return ORDER_STATUS_MAP[status]?.type || ''
|
||||
}
|
||||
|
||||
/** 获取状态标签文本 */
|
||||
function getStatusLabel(status: string): string {
|
||||
return ORDER_STATUS_MAP[status]?.label || status || '-'
|
||||
}
|
||||
|
||||
/** 获取销售类型标签 */
|
||||
function getSalesTypeLabel(value: string): string {
|
||||
const item = SALES_TYPE_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '-'
|
||||
}
|
||||
|
||||
/** 获取业务类型标签 */
|
||||
function getBizTypeLabel(value: string): string {
|
||||
const item = BIZ_TYPE_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '销售订单'
|
||||
}
|
||||
|
||||
/** 获取业务状态标签 */
|
||||
function getBizStatusLabel(value: string): string {
|
||||
const item = BIZ_STATUS_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '正常'
|
||||
}
|
||||
|
||||
/** 格式化数字 */
|
||||
function formatNumber(val: number | undefined): string {
|
||||
if (val === undefined || val === null) return '-'
|
||||
return val.toLocaleString()
|
||||
}
|
||||
|
||||
/** 格式化金额 */
|
||||
function formatCurrency(val: number | undefined): string {
|
||||
if (val === undefined || val === null) return '-'
|
||||
return '¥' + val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
}
|
||||
|
||||
/** 日期范围变化 */
|
||||
function handleDateChange(val: string[] | null) {
|
||||
if (val && val.length === 2) {
|
||||
queryParams.beginOrderDate = val[0]
|
||||
queryParams.endOrderDate = val[1]
|
||||
} else {
|
||||
queryParams.beginOrderDate = ''
|
||||
queryParams.endOrderDate = ''
|
||||
}
|
||||
}
|
||||
|
||||
/** 加载数据 */
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
if (viewMode.value === 'detail') {
|
||||
const res = await getSalesOrderDetailList(queryParams)
|
||||
detailTableData.value = res.list
|
||||
total.value = res.total
|
||||
} else {
|
||||
const res = await getSalesOrderList(queryParams)
|
||||
tableData.value = res.list
|
||||
total.value = res.total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error)
|
||||
ElMessage.error('加载数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 切换视图 */
|
||||
function switchView(mode: 'detail' | 'document') {
|
||||
viewMode.value = mode
|
||||
selectedRows.value = []
|
||||
queryParams.pageNum = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
/** 搜索 */
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
/** 查询所有（清空条件） */
|
||||
function handleQueryAll() {
|
||||
queryParams.orderCode = ''
|
||||
queryParams.contractNo = ''
|
||||
queryParams.clientName = ''
|
||||
queryParams.salesmanName = ''
|
||||
queryParams.salesType = ''
|
||||
queryParams.itemName = ''
|
||||
queryParams.beginOrderDate = ''
|
||||
queryParams.endOrderDate = ''
|
||||
dateRange.value = []
|
||||
queryParams.pageNum = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
/** 新增 */
|
||||
function handleAdd() {
|
||||
router.push('/sales/order/form')
|
||||
}
|
||||
|
||||
/** 查看 */
|
||||
function handleView(row: SalesOrder | SalesOrderDetailView) {
|
||||
const id = 'orderId' in row ? row.orderId : (row as any).orderId
|
||||
router.push(`/sales/order/view/${id}`)
|
||||
}
|
||||
|
||||
/** 编辑 */
|
||||
function handleEdit(row: SalesOrder) {
|
||||
router.push(`/sales/order/form/${row.orderId}`)
|
||||
}
|
||||
|
||||
/** 删除单个 */
|
||||
async function handleDelete(row: SalesOrder) {
|
||||
try {
|
||||
await deleteSalesOrder(row.orderId!)
|
||||
ElMessage.success('删除成功')
|
||||
loadData()
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
/** 批量删除 */
|
||||
async function handleBatchDelete() {
|
||||
if (selectedRows.value.length === 0) return
|
||||
try {
|
||||
await ElMessageBox.confirm('确认删除选中的订单吗？', '警告', { type: 'warning' })
|
||||
const ids = selectedRows.value.map(row => row.orderId!)
|
||||
await deleteSalesOrder(ids)
|
||||
ElMessage.success('删除成功')
|
||||
selectedRows.value = []
|
||||
loadData()
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 审核 */
|
||||
async function handleAudit() {
|
||||
if (selectedRows.value.length === 0) return
|
||||
try {
|
||||
await ElMessageBox.confirm('确认审核选中的订单吗？', '提示', { type: 'info' })
|
||||
const ids = selectedRows.value.map(row => row.orderId!)
|
||||
await auditSalesOrder(ids)
|
||||
ElMessage.success('审核成功')
|
||||
selectedRows.value = []
|
||||
loadData()
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('审核失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 反审核 */
|
||||
async function handleUnaudit() {
|
||||
if (selectedRows.value.length === 0) return
|
||||
try {
|
||||
await ElMessageBox.confirm('确认反审核选中的订单吗？', '提示', { type: 'warning' })
|
||||
const ids = selectedRows.value.map(row => row.orderId!)
|
||||
await unauditSalesOrder(ids)
|
||||
ElMessage.success('反审核成功')
|
||||
selectedRows.value = []
|
||||
loadData()
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('反审核失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 导出 */
|
||||
async function handleExport() {
|
||||
try {
|
||||
await ElMessageBox.confirm('是否确认导出销售订单数据？', '警告', { type: 'warning' })
|
||||
const blob = await exportSalesOrder(queryParams)
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `销售订单_${new Date().toISOString().slice(0, 10)}.xlsx`
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
ElMessage.success('导出成功')
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('导出失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 生产进度 */
|
||||
function handleProgress(row: SalesOrderDetailView) {
|
||||
router.push(`/sales/order/progress/${row.orderId}`)
|
||||
}
|
||||
|
||||
/** 表格选择变化 */
|
||||
function handleSelectionChange(rows: SalesOrder[]) {
|
||||
selectedRows.value = rows
|
||||
}
|
||||
|
||||
/** 分页大小变化 */
|
||||
function handleSizeChange() {
|
||||
queryParams.pageNum = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
/** 当前页变化 */
|
||||
function handleCurrentChange() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
/** 计算表格高度 */
|
||||
function calcTableHeight() {
|
||||
tableHeight.value = window.innerHeight - 300
|
||||
}
|
||||
|
||||
// ============ 生命周期 ============
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
calcTableHeight()
|
||||
window.addEventListener('resize', calcTableHeight)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-card :deep(.el-card__body) {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.search-card :deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.table-card :deep(.el-card__body) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
635
erp-frontend-vue/src/views/Sales/Order/view.vue
Normal file
635
erp-frontend-vue/src/views/Sales/Order/view.vue
Normal file
@@ -0,0 +1,635 @@
|
||||
<template>
|
||||
<div class="view-container">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
|
||||
<span class="page-title">销售订单详情</span>
|
||||
<el-tag :type="getStatusType(orderData.orderStatus)" class="status-tag">
|
||||
{{ getStatusLabel(orderData.orderStatus) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="orderData.orderStatus === '审核'"
|
||||
@click="handleEdit"
|
||||
>
|
||||
<el-icon><Edit /></el-icon>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="orderData.orderStatus === '开立'"
|
||||
type="success"
|
||||
@click="handleAudit"
|
||||
>
|
||||
<el-icon><Finished /></el-icon>审核
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="orderData.orderStatus === '审核'"
|
||||
type="warning"
|
||||
@click="handleUnaudit"
|
||||
>
|
||||
反审核
|
||||
</el-button>
|
||||
<el-button @click="handlePrint">
|
||||
<el-icon><Printer /></el-icon>打印
|
||||
</el-button>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
操作<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleExport">导出</el-dropdown-item>
|
||||
<el-dropdown-item @click="handleCopy">复制</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button @click="toggleCollapse">
|
||||
{{ isCollapsed ? '展开' : '收起' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="main-card" v-loading="loading">
|
||||
<!-- 基础信息区域 -->
|
||||
<el-collapse v-model="activeCollapse">
|
||||
<el-collapse-item title="基础信息" name="basic">
|
||||
<!-- 第一行：单据信息 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">单据编码</span>
|
||||
<span class="info-value">{{ orderData.orderCode || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">单据日期</span>
|
||||
<span class="info-value">{{ orderData.orderDate || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">单据状态</span>
|
||||
<el-tag :type="getStatusType(orderData.orderStatus)">
|
||||
{{ getStatusLabel(orderData.orderStatus) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">单据类型</span>
|
||||
<span class="info-value">销售订单</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行：业务信息 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">业务类型</span>
|
||||
<span class="info-value">{{ getBizTypeLabel(orderData.bizType) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">业务状态</span>
|
||||
<span class="info-value">{{ getBizStatusLabel(orderData.bizStatus) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">销售部门</span>
|
||||
<span class="info-value">{{ orderData.deptName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">销售人员</span>
|
||||
<span class="info-value">{{ orderData.salesmanName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三行：操作人员 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">操作员</span>
|
||||
<span class="info-value">{{ orderData.operatorName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">审核员</span>
|
||||
<span class="info-value">{{ orderData.auditorName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">审核日期</span>
|
||||
<span class="info-value">{{ orderData.auditDate || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">销售类型</span>
|
||||
<span class="info-value">{{ getSalesTypeLabel(orderData.salesType) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第四行：供货方式 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">供货方式</span>
|
||||
<span class="info-value">{{ getSupplyModeLabel(orderData.supplyMode) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第五行：客户信息 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">客户名称</span>
|
||||
<span class="info-value highlight">{{ orderData.clientName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">合同号</span>
|
||||
<span class="info-value">
|
||||
<el-link v-if="orderData.contractNo" type="primary">
|
||||
{{ orderData.contractNo }}
|
||||
</el-link>
|
||||
<span v-else>-</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">付款条件</span>
|
||||
<span class="info-value">{{ orderData.paymentTerms || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">交付日期</span>
|
||||
<span class="info-value">{{ orderData.deliveryDate || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第六行：交期/收货信息 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">交期状态</span>
|
||||
<span class="info-value">{{ getDeliveryStatusLabel(orderData.deliveryStatus) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">收货人</span>
|
||||
<span class="info-value">{{ orderData.receiver || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">电话</span>
|
||||
<span class="info-value">{{ orderData.receiverPhone || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">
|
||||
<span class="info-label">目的国家</span>
|
||||
<span class="info-value">{{ orderData.destCountry || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第七行：地址/备注 -->
|
||||
<el-row :gutter="16" class="info-row">
|
||||
<el-col :span="12">
|
||||
<div class="info-item">
|
||||
<span class="info-label">地址</span>
|
||||
<span class="info-value">{{ orderData.receiverAddress || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-item">
|
||||
<span class="info-label">备注信息</span>
|
||||
<span class="info-value">{{ orderData.remark || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<!-- 物料明细区域 -->
|
||||
<div class="material-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">物料信息</span>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="orderData.lines"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
max-height="400"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="itemCode" label="物料编码" width="130" />
|
||||
<el-table-column prop="itemName" label="物料名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="specification" label="型号规格" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="unitOfMeasure" label="主计量" width="80" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.quantity) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unitPrice" label="单价" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.unitPrice) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金额" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.amount) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="qualityReq" label="质量要求" width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.qualityReq || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.remark || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 合计区域 -->
|
||||
<div class="summary-row">
|
||||
<div class="summary-item">
|
||||
<span>物料行数：</span>
|
||||
<span class="summary-value">{{ orderData.lines?.length || 0 }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span>总数量：</span>
|
||||
<span class="summary-value">{{ formatNumber(totalQuantity) }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span>合计金额：</span>
|
||||
<span class="total-amount">{{ formatCurrency(orderData.totalAmount) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft, ArrowDown, Plus, Edit, Finished, Printer
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getSalesOrderDetail,
|
||||
auditSalesOrder,
|
||||
unauditSalesOrder,
|
||||
ORDER_STATUS_MAP,
|
||||
SALES_TYPE_OPTIONS,
|
||||
SUPPLY_MODE_OPTIONS,
|
||||
DELIVERY_STATUS_OPTIONS,
|
||||
BIZ_TYPE_OPTIONS,
|
||||
BIZ_STATUS_OPTIONS,
|
||||
type SalesOrder
|
||||
} from '@/api/salesOrder'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// ============ 响应式状态 ============
|
||||
|
||||
const loading = ref(false)
|
||||
const isCollapsed = ref(false)
|
||||
const activeCollapse = ref(['basic'])
|
||||
|
||||
const orderData = ref<SalesOrder>({
|
||||
orderId: undefined,
|
||||
orderCode: '',
|
||||
orderDate: '',
|
||||
orderStatus: '',
|
||||
bizType: '',
|
||||
bizStatus: '',
|
||||
salesType: '',
|
||||
supplyMode: '',
|
||||
deliveryStatus: '',
|
||||
clientId: undefined,
|
||||
clientCode: '',
|
||||
clientName: '',
|
||||
contractNo: '',
|
||||
paymentTerms: '',
|
||||
deliveryDate: '',
|
||||
receiver: '',
|
||||
receiverPhone: '',
|
||||
receiverAddress: '',
|
||||
destCountry: '',
|
||||
deptId: undefined,
|
||||
deptName: '',
|
||||
salesmanId: undefined,
|
||||
salesmanName: '',
|
||||
operatorId: undefined,
|
||||
operatorName: '',
|
||||
auditorId: undefined,
|
||||
auditorName: '',
|
||||
auditDate: '',
|
||||
totalAmount: 0,
|
||||
currency: 'CNY',
|
||||
remark: '',
|
||||
lines: []
|
||||
})
|
||||
|
||||
// ============ 计算属性 ============
|
||||
|
||||
const totalQuantity = computed(() => {
|
||||
return (orderData.value.lines || []).reduce((sum, line) => sum + (line.quantity || 0), 0)
|
||||
})
|
||||
|
||||
// ============ 方法 ============
|
||||
|
||||
function getStatusType(status?: string): string {
|
||||
return ORDER_STATUS_MAP[status || '']?.type || ''
|
||||
}
|
||||
|
||||
function getStatusLabel(status?: string): string {
|
||||
return ORDER_STATUS_MAP[status || '']?.label || status || '-'
|
||||
}
|
||||
|
||||
function getSalesTypeLabel(value?: string): string {
|
||||
const item = SALES_TYPE_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '-'
|
||||
}
|
||||
|
||||
function getSupplyModeLabel(value?: string): string {
|
||||
const item = SUPPLY_MODE_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '-'
|
||||
}
|
||||
|
||||
function getDeliveryStatusLabel(value?: string): string {
|
||||
const item = DELIVERY_STATUS_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '-'
|
||||
}
|
||||
|
||||
function getBizTypeLabel(value?: string): string {
|
||||
const item = BIZ_TYPE_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '销售订单'
|
||||
}
|
||||
|
||||
function getBizStatusLabel(value?: string): string {
|
||||
const item = BIZ_STATUS_OPTIONS.find(opt => opt.value === value)
|
||||
return item?.label || value || '正常'
|
||||
}
|
||||
|
||||
function formatNumber(val: number | undefined): string {
|
||||
if (val === undefined || val === null) return '-'
|
||||
return val.toLocaleString()
|
||||
}
|
||||
|
||||
function formatCurrency(val: number | undefined): string {
|
||||
if (val === undefined || val === null) return '-'
|
||||
return '¥' + val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
}
|
||||
|
||||
function toggleCollapse() {
|
||||
isCollapsed.value = !isCollapsed.value
|
||||
activeCollapse.value = isCollapsed.value ? [] : ['basic']
|
||||
}
|
||||
|
||||
async function loadOrderData() {
|
||||
const id = route.params.id as string
|
||||
if (!id) {
|
||||
ElMessage.error('订单ID不存在')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await getSalesOrderDetail(Number(id))
|
||||
|
||||
// 确保明细行正确赋值（后端可能返回 slaveList）
|
||||
const lines = data.lines || data.slaveList || []
|
||||
|
||||
orderData.value = {
|
||||
...data,
|
||||
lines: lines
|
||||
}
|
||||
|
||||
console.log('加载订单明细:', orderData.value.lines)
|
||||
} catch (error) {
|
||||
console.error('加载订单失败:', error)
|
||||
ElMessage.error('加载订单数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
router.push('/sales/order')
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
router.push('/sales/order/form')
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
router.push(`/sales/order/form/${orderData.value.orderId}`)
|
||||
}
|
||||
|
||||
async function handleAudit() {
|
||||
if (orderData.value?.orderId == null) {
|
||||
ElMessage.warning('订单信息未加载，无法审核')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await ElMessageBox.confirm('确认审核此订单吗？', '提示', { type: 'info' })
|
||||
await auditSalesOrder(orderData.value.orderId)
|
||||
ElMessage.success('审核成功')
|
||||
loadOrderData()
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error?.message || '审核失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUnaudit() {
|
||||
if (orderData.value?.orderId == null) {
|
||||
ElMessage.warning('订单信息未加载，无法反审核')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await ElMessageBox.confirm('确认反审核此订单吗？', '警告', { type: 'warning' })
|
||||
await unauditSalesOrder(orderData.value.orderId)
|
||||
ElMessage.success('反审核成功')
|
||||
loadOrderData()
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error?.message || '反审核失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlePrint() {
|
||||
ElMessage.info('打印功能开发中')
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
ElMessage.info('导出功能开发中')
|
||||
}
|
||||
|
||||
function handleCopy() {
|
||||
ElMessage.info('复制功能开发中')
|
||||
}
|
||||
|
||||
// ============ 生命周期 ============
|
||||
|
||||
onMounted(() => {
|
||||
loadOrderData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.main-card :deep(.el-card__body) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.main-card :deep(.el-collapse-item__header) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.main-card :deep(.el-collapse-item__content) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.info-value.highlight {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.material-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
padding: 12px 16px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #f56c6c;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user