<template>
|
<view class="container">
|
<view class="header">
|
<view class="title">采购订单明细</view>
|
<view class="sub-title">{{ HBillNo }}</view>
|
</view>
|
<!-- Tab切换 -->
|
<view class="tab-container">
|
<view class="tabs">
|
<view
|
class="tab-item"
|
:class="{'active': currentTab === 0}"
|
@click="switchTab(0)"
|
>
|
基本信息
|
</view>
|
<view
|
class="tab-item"
|
:class="{'active': currentTab === 1}"
|
@click="switchTab(1)"
|
>
|
审核信息
|
</view>
|
<view
|
class="tab-item"
|
:class="{'active': currentTab === 2}"
|
@click="switchTab(2)"
|
>
|
物料信息
|
</view>
|
</view>
|
<view class="tab-indicator" :style="indicatorStyle"></view>
|
</view>
|
|
<scroll-view
|
scroll-y
|
class="content"
|
:style="{height: scrollHeight + 'px'}"
|
>
|
<!-- Tab 0: 基本信息 -->
|
<view v-if="currentTab === 0" class="tab-content">
|
<view class="info-card">
|
<view class="card-title">订单基本信息</view>
|
<view class="info-grid">
|
<view class="info-item" v-if="orderInfo.日期">
|
<text class="label">日期：</text>
|
<text class="value">{{ orderInfo.日期 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.单据号">
|
<text class="label">单据号：</text>
|
<text class="value">{{ orderInfo.单据号 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.部门代码">
|
<text class="label">部门代码：</text>
|
<text class="value">{{ orderInfo.部门代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.部门">
|
<text class="label">部门：</text>
|
<text class="value">{{ orderInfo.部门 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.业务员代码">
|
<text class="label">业务员代码：</text>
|
<text class="value">{{ orderInfo.业务员代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.业务员">
|
<text class="label">业务员：</text>
|
<text class="value">{{ orderInfo.业务员 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.交货地点">
|
<text class="label">交货地点：</text>
|
<text class="value">{{ orderInfo.交货地点 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.结算方式代码">
|
<text class="label">结算方式代码：</text>
|
<text class="value">{{ orderInfo.结算方式代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.结算方式">
|
<text class="label">结算方式：</text>
|
<text class="value">{{ orderInfo.结算方式 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.供应商代码">
|
<text class="label">供应商代码：</text>
|
<text class="value">{{ orderInfo.供应商代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.供应商">
|
<text class="label">供应商：</text>
|
<text class="value">{{ orderInfo.供应商 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.币别代码">
|
<text class="label">币别代码：</text>
|
<text class="value">{{ orderInfo.币别代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.币别">
|
<text class="label">币别：</text>
|
<text class="value">{{ orderInfo.币别 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.汇率">
|
<text class="label">汇率：</text>
|
<text class="value">{{ orderInfo.汇率 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.主管代码">
|
<text class="label">主管代码：</text>
|
<text class="value">{{ orderInfo.主管代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.主管">
|
<text class="label">主管：</text>
|
<text class="value">{{ orderInfo.主管 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.采购方式代码">
|
<text class="label">采购方式代码：</text>
|
<text class="value">{{ orderInfo.采购方式代码 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.采购方式">
|
<text class="label">采购方式：</text>
|
<text class="value">{{ orderInfo.采购方式 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.结算日期">
|
<text class="label">结算日期：</text>
|
<text class="value">{{ orderInfo.结算日期 }}</text>
|
</view>
|
<view class="info-item full-width" v-if="orderInfo.摘要">
|
<text class="label">摘要：</text>
|
<text class="value">{{ orderInfo.摘要 }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- Tab 1: 审核信息 -->
|
<view v-if="currentTab === 1" class="tab-content">
|
<view class="info-card">
|
<view class="card-title">审批流程信息</view>
|
<view class="info-grid">
|
<view class="info-item" v-if="orderInfo.制单人">
|
<text class="label">制单人：</text>
|
<text class="value">{{ orderInfo.制单人 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.制单日期">
|
<text class="label">制单日期：</text>
|
<text class="value">{{ formatDate(orderInfo.制单日期) }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.审核人">
|
<text class="label">审核人：</text>
|
<text class="value">{{ orderInfo.审核人 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.审核日期">
|
<text class="label">审核日期：</text>
|
<text class="value">{{ formatDate(orderInfo.审核日期) }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.修改人">
|
<text class="label">修改人：</text>
|
<text class="value">{{ orderInfo.修改人 }}</text>
|
</view>
|
<view class="info-item" v-if="orderInfo.修改日期">
|
<text class="label">修改日期：</text>
|
<text class="value">{{ formatDate(orderInfo.修改日期) }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- Tab 2: 物料信息 -->
|
<view v-if="currentTab === 2" class="tab-content">
|
<view class="material-list">
|
<view
|
v-for="(item, index) in materialList"
|
:key="index"
|
class="material-card"
|
>
|
<view class="material-header">
|
<text class="material-code">{{ item.物料代码 || '物料' + (index + 1) }}</text>
|
<text class="material-name">{{ item.物料名称 }}</text>
|
</view>
|
<view class="material-info">
|
<view class="info-row">
|
<view class="info-col" v-if="item.规格型号">
|
<text class="label">规格型号：</text>
|
<text class="value">{{ item.规格型号 }}</text>
|
</view>
|
<view class="info-col" v-if="item.计量单位代码">
|
<text class="label">单位代码：</text>
|
<text class="value">{{ item.计量单位代码 }}</text>
|
</view>
|
<view class="info-col" v-if="item.计量单位">
|
<text class="label">单位：</text>
|
<text class="value">{{ item.计量单位 }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-col" v-if="item.数量">
|
<text class="label">数量：</text>
|
<text class="value">{{ item.数量 }}</text>
|
</view>
|
<view class="info-col" v-if="item.入库数量">
|
<text class="label">入库数量：</text>
|
<text class="value">{{ item.入库数量 }}</text>
|
</view>
|
<view class="info-col" v-if="item.开票数量">
|
<text class="label">开票数量：</text>
|
<text class="value">{{ item.开票数量 }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-col" v-if="item.关联数量">
|
<text class="label">关联数量：</text>
|
<text class="value">{{ item.关联数量 }}</text>
|
</view>
|
<view class="info-col" v-if="item.未关联数量">
|
<text class="label">未关联数量：</text>
|
<text class="value">{{ item.未关联数量 }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-col" v-if="item.含税单价">
|
<text class="label">含税单价：</text>
|
<text class="value">{{ item.含税单价 }}</text>
|
</view>
|
<view class="info-col" v-if="item.折扣率">
|
<text class="label">折扣率：</text>
|
<text class="value">{{ item.折扣率 }}</text>
|
</view>
|
<view class="info-col" v-if="item.实际含税单价">
|
<text class="label">实际单价：</text>
|
<text class="value">{{ item.实际含税单价 }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-col" v-if="item.单价">
|
<text class="label">单价：</text>
|
<text class="value">{{ item.单价 }}</text>
|
</view>
|
<view class="info-col" v-if="item.金额">
|
<text class="label">金额：</text>
|
<text class="value">{{ item.金额 }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-col" v-if="item.税率">
|
<text class="label">税率：</text>
|
<text class="value">{{ item.税率 }}%</text>
|
</view>
|
<view class="info-col" v-if="item.税额">
|
<text class="label">税额：</text>
|
<text class="value">{{ item.税额 }}</text>
|
</view>
|
<view class="info-col" v-if="item.价税合计">
|
<text class="label">价税合计：</text>
|
<text class="value">{{ item.价税合计 }}</text>
|
</view>
|
</view>
|
|
<view class="info-row" v-if="item.交货日期">
|
<view class="info-col full-width">
|
<text class="label">交货日期：</text>
|
<text class="value">{{ item.交货日期 }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="materialList.length === 0" class="empty-state">
|
<uni-icons type="list" size="50" color="#ccc"></uni-icons>
|
<text class="empty-text">暂无物料信息</text>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
|
<view class="footer">
|
<button class="back-btn" @click="goBack">返回</button>
|
</view>
|
|
<uni-load-more v-if="loading" status="loading" :content-text="loadingText"></uni-load-more>
|
</view>
|
</template>
|
|
<script>
|
import { CommonUtils } from '@/utils/common.js'
|
import { getUserInfo } from "../../utils/auth";
|
|
export default {
|
data() {
|
return {
|
// 参数
|
linterid: '',
|
HBillNo: '',
|
|
|
currentTab: 0,
|
scrollHeight: 0,
|
loading: false,
|
loadingText: {
|
contentdown: '上拉显示更多',
|
contentrefresh: '正在加载...',
|
contentnomore: '没有更多数据了'
|
},
|
|
|
orderInfo: {},
|
materialList: [],
|
allData: [],
|
}
|
},
|
computed: {
|
indicatorStyle() {
|
const tabWidth = 100 / 3;
|
return {
|
width: tabWidth + '%',
|
transform: `translateX(${this.currentTab * 100}%)`
|
};
|
}
|
},
|
onLoad(options) {
|
if (options.linterid && options.HBillNo) {
|
this.linterid = options.linterid;
|
this.HBillNo = options.HBillNo;
|
this.loadOrderDetail();
|
} else {
|
uni.showToast({
|
title: '参数错误',
|
icon: 'error'
|
});
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
}
|
|
// 计算滚动区域高度
|
this.calcScrollHeight();
|
},
|
onReady() {
|
|
uni.onWindowResize(() => {
|
this.calcScrollHeight();
|
});
|
},
|
methods: {
|
|
calcScrollHeight() {
|
const systemInfo = uni.getSystemInfoSync();
|
const windowHeight = systemInfo.windowHeight;
|
|
|
const query = uni.createSelectorQuery().in(this);
|
query.select('.header').boundingClientRect();
|
query.select('.tab-container').boundingClientRect();
|
query.select('.footer').boundingClientRect();
|
query.exec((res) => {
|
if (res[0] && res[1] && res[2]) {
|
const headerHeight = res[0].height;
|
const tabHeight = res[1].height;
|
const footerHeight = res[2].height;
|
const margin = 5; // 安全边距
|
|
this.scrollHeight = windowHeight - headerHeight - tabHeight - footerHeight - margin;
|
}
|
});
|
},
|
|
|
switchTab(index) {
|
this.currentTab = index;
|
},
|
|
|
loadOrderDetail() {
|
this.loading = true;
|
|
|
const sWhere = ` and hmainid = '${this.linterid}'`;
|
|
CommonUtils.doRequest2({
|
url: '/Cg_POOrderBill/QueryListEdit',
|
data: {
|
sWhere: sWhere,
|
user: getUserInfo()["Czymc"],
|
},
|
resFunction: (res) => {
|
this.loading = false;
|
|
if (res.data.Message === "无查看权限！") {
|
uni.showToast({
|
icon: 'none',
|
title: res.data.Message
|
});
|
return;
|
}
|
|
if (res.data.code === "1" && res.data.data && res.data.data.length > 0) {
|
this.allData = res.data.data;
|
|
this.orderInfo = { ...this.allData[0] };
|
|
this.materialList = this.allData;
|
|
|
if (!this.orderInfo.单据号 && this.HBillNo) {
|
this.orderInfo.单据号 = this.HBillNo;
|
}
|
} else {
|
uni.showToast({
|
title: '未找到订单信息',
|
icon: 'none'
|
});
|
}
|
},
|
errFunction: (err) => {
|
this.loading = false;
|
uni.showToast({
|
title: '加载失败',
|
icon: 'error'
|
});
|
console.error('加载订单详情失败:', err);
|
}
|
});
|
},
|
|
|
formatDate(dateStr) {
|
if (!dateStr) return '';
|
|
if (dateStr.length >= 10) {
|
return dateStr.substr(0, 10);
|
}
|
return dateStr;
|
},
|
|
// 返回上一页
|
goBack() {
|
uni.navigateBack();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #f5f5f5;
|
}
|
|
.header {
|
padding: 30rpx;
|
background: linear-gradient(135deg, #3a78ff 0%, #5a9cff 100%);
|
color: white;
|
text-align: center;
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
}
|
|
.sub-title {
|
font-size: 28rpx;
|
opacity: 0.9;
|
}
|
}
|
|
.tab-container {
|
background-color: white;
|
position: relative;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.tabs {
|
display: flex;
|
|
.tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 25rpx 0;
|
font-size: 30rpx;
|
color: #666;
|
transition: all 0.3s;
|
|
&.active {
|
color: #3a78ff;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.tab-indicator {
|
height: 4rpx;
|
background-color: #3a78ff;
|
transition: transform 0.3s ease;
|
}
|
}
|
|
.content {
|
flex: 1;
|
}
|
|
.tab-content {
|
padding: 20rpx;
|
}
|
|
.info-card {
|
background-color: white;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.card-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 30rpx;
|
padding-bottom: 15rpx;
|
border-bottom: 1rpx solid #eee;
|
}
|
|
.info-grid {
|
display: flex;
|
flex-wrap: wrap;
|
|
.info-item {
|
width: 50%;
|
margin-bottom: 25rpx;
|
|
&.full-width {
|
width: 100%;
|
}
|
|
.label {
|
color: #666;
|
font-size: 28rpx;
|
margin-right: 10rpx;
|
}
|
|
.value {
|
color: #333;
|
font-size: 28rpx;
|
font-weight: 500;
|
word-break: break-all;
|
}
|
}
|
}
|
}
|
|
.material-list {
|
.material-card {
|
background-color: white;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.material-header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 25rpx;
|
padding-bottom: 15rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.material-code {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #3a78ff;
|
margin-right: 20rpx;
|
background-color: #f0f7ff;
|
padding: 5rpx 15rpx;
|
border-radius: 8rpx;
|
}
|
|
.material-name {
|
font-size: 28rpx;
|
color: #333;
|
flex: 1;
|
}
|
}
|
|
.material-info {
|
.info-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 15rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.info-col {
|
width: 50%;
|
margin-bottom: 10rpx;
|
|
&.full-width {
|
width: 100%;
|
}
|
|
.label {
|
color: #888;
|
font-size: 26rpx;
|
margin-right: 8rpx;
|
}
|
|
.value {
|
color: #333;
|
font-size: 26rpx;
|
font-weight: 500;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.empty-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 100rpx 0;
|
|
.empty-text {
|
color: #999;
|
font-size: 28rpx;
|
margin-top: 20rpx;
|
}
|
}
|
|
.footer {
|
padding: 20rpx 30rpx;
|
background-color: white;
|
border-top: 1rpx solid #eee;
|
|
.back-btn {
|
background-color: #3a78ff;
|
color: white;
|
border-radius: 50rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 32rpx;
|
|
&:active {
|
background-color: #2c5fcc;
|
}
|
}
|
}
|
</style>
|
