wilson
/
krd-srm-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(order): 添加PO订单详情查看功能 

- 新增com_poOrderDetail.vue组件用于展示订单详情
- 在poOrder_search.vue中集成订单详情标签页
- 配置详情组件的数据绑定和样式设置
- 设置默认激活标签为订单详情
- 优化详情页面的表单布局和字段展示
- 添加禁用状态的输入框以只读方式显示数据
master
qiankanghui 3 weeks ago
parent
28b121a4f7
commit
5c90bc9b6c
2 changed files with 307 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 296
      src/views/modules/order/com_poOrderDetail.vue
  2. 13
      src/views/modules/order/poOrder_search.vue

296
src/views/modules/order/com_poOrderDetail.vue
View File

@ -0,0 +1,296 @@
<template>
<div class="po-order-detail">
<!-- 查看模式 -->
<el-form label-position="top" class="detail-form">
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Customer">
<el-input v-model="detailData.customer" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Buyer">
<el-input v-model="detailData.buyer" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Vendor Name">
<el-input v-model="detailData.supplierName" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="V_Short_Office">
<el-input v-model="detailData.shortOffice" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="V_Short_NPC">
<el-input v-model="detailData.shortNpc" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="PO_No">
<el-input v-model="detailData.poNo" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Item">
<el-input v-model="detailData.partNo" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Category">
<el-input v-model="detailData.category" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="SKU">
<el-input v-model="detailData.sku" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Unit Price">
<el-input v-model="detailData.price" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="PO Qty">
<el-input v-model="detailData.qty" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="PO Value">
<el-input v-model="detailData.value" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="A-Qty">
<el-input v-model="detailData.shipQty" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A-Value">
<el-input v-model="detailData.sumPrice" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Departure Port">
<el-input v-model="detailData.departure" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Destination Port">
<el-input v-model="detailData.destination" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Method">
<el-input v-model="detailData.shipVia" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Buyer Release Date">
<el-input v-model="detailData.orderDate" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Planner Release Date">
<el-input v-model="detailData.enquiry" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Status">
<el-input v-model="detailData.status" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="PI Confirmed Date">
<el-input v-model="detailData.confirmed" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Original Arrival Date">
<el-input v-model="detailData.wantReceiveDate" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Final Confirmed Arrival Date">
<el-input v-model="detailData.narrival" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="PI Confirmed CRD">
<el-input v-model="detailData.crd" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Inspection Date">
<el-input v-model="detailData.inspection" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Actual Completion Date">
<el-input v-model="detailData.realCrd" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="ETA">
<el-input v-model="detailData.eta" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Flexport Id">
<el-input v-model="detailData.flexid" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="On Board Date">
<el-input v-model="detailData.obd" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Doc Sent">
<el-input v-model="detailData.docSent" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Telex Release">
<el-input v-model="detailData.telexRelease" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Advance Payment">
<el-input v-model="detailData.advancePayment" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Advanc Paid">
<el-input v-model="detailData.advancePaid" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Create Date">
<el-input v-model="detailData.createTime" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="M-Planner">
<el-input v-model="detailData.planner" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Edit Date">
<el-input v-model="detailData.edit" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Last Editor">
<el-input v-model="detailData.endPlanner" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Remark Delay">
<el-input v-model="detailData.remarkDelay" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Comments">
<el-input v-model="detailData.remark" disabled />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Inspection Completed Qty">
<el-input v-model="detailData.inspectionCompletedQty" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label=" ">
<span></span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: 'PoOrderDetail',
props: {
detailData: {
type: Object,
default: () => ({})
}
},
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="scss">
.po-order-detail {
width: 100%;
}
.detail-form {
width: 100%;
}
// 表单项底部间距 - 与产品页面保持一致
.el-form-item {
margin-bottom: 20px;
}
// 标签样式：字体14px，与产品页面一致
/deep/ .el-form-item__label {
font-size: 14px;
color: #606266;
line-height: 1.5;
padding-bottom: 6px;
font-weight: normal;
}
// 输入框样式 - 与产品页面完全一致（默认尺寸）
/deep/ .el-input__inner {
height: 32px;
line-height: 32px;
font-size: 13px;
border-radius: 4px;
border: 1px solid #dcdfe6;
background-color: #fff;
}
// disabled 状态样式 - 与产品页面 disabled 样式一致
/deep/ .el-input.is-disabled .el-input__inner {
background-color: #f5f7fa;
border-color: #e4e7ed;
color: #c0c4cc;
cursor: not-allowed;
}
/deep/ .el-input__inner:focus {
border-color: #409eff;
outline: none;
}
</style>

13
src/views/modules/order/poOrder_search.vue
View File

@ -77,6 +77,10 @@
<!-- 详情页签 --> <!-- 详情页签 -->
<el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card"> <el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card">
<!-- 订单详情 -->
<el-tab-pane label="订单详情" name="orderDetail">
<po-order-detail :detail-data="currentRow" />
</el-tab-pane>
<!-- 物流信息 --> <!-- 物流信息 -->
<el-tab-pane label="物流" name="logistics"> <el-tab-pane label="物流" name="logistics">
<logistics-po-list ref="logisticsPoList" /> <logistics-po-list ref="logisticsPoList" />
@ -94,11 +98,13 @@ import { searchPoDetailPage } from '@/api/order/poOrder.js'
import excel from '@/utils/excel-util.js' import excel from '@/utils/excel-util.js'
import LogisticsPoList from './com_logisticsPoList.vue' import LogisticsPoList from './com_logisticsPoList.vue'
import InspectionDetailList from './com_inspectionDetailList.vue' import InspectionDetailList from './com_inspectionDetailList.vue'
import PoOrderDetail from './com_poOrderDetail.vue'
export default { export default {
components: { components: {
LogisticsPoList, LogisticsPoList,
InspectionDetailList
InspectionDetailList,
PoOrderDetail
}, },
name: 'PoOrderQuery', name: 'PoOrderQuery',
data() { data() {
@ -106,7 +112,7 @@ export default {
loading: false, loading: false,
exportLoading: false, exportLoading: false,
height: 400, height: 400,
activeTab: 'logistics',
activeTab: 'orderDetail',
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
totalPage: 0, totalPage: 0,
@ -584,6 +590,9 @@ export default {
if (this.currentRow === '' || this.currentRow === null) { if (this.currentRow === '' || this.currentRow === null) {
this.currentRow = { flexid: '', supplierNo: '' } this.currentRow = { flexid: '', supplierNo: '' }
} }
if (this.activeTab === 'orderDetail') {
// 订单详情不需要刷新，直接显示 currentRow
}
if (this.activeTab === 'logistics') { if (this.activeTab === 'logistics') {
this.refreshLogisticsTable() this.refreshLogisticsTable()
} }

Write Preview
Loading…
Cancel
Save