优化
This commit is contained in:
209
pagesStorage/storageDetail.vue
Normal file
209
pagesStorage/storageDetail.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="receipt-detail-container">
|
||||
<!-- <view class="list-title">单据信息</view> -->
|
||||
<!-- 单据头部信息卡片 -->
|
||||
<view class="header-card">
|
||||
<view class="header-item">
|
||||
<text class="label">单据号：</text>
|
||||
<text class="value">{{ billForm.billNo }}</text>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<text class="label">{{ storageType == 'rkType' ? '入库类型' : '出库类型' }}：</text>
|
||||
<text class="value">{{ billForm.operationTypeName }}</text>
|
||||
</view>
|
||||
<view class="header-item" v-if="storageType == 'rkType'">
|
||||
<text class="label">物资类型：</text>
|
||||
<text class="value">{{ billForm.wlTypeName }}</text>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<text class="label">{{ storageType == 'rkType' ? '入库时间' : '出库时间' }}：</text>
|
||||
<text class="value">{{ billForm.operationTime }}</text>
|
||||
</view>
|
||||
<view class="header-item" v-if="storageType == 'ckType'">
|
||||
<text class="label">施工队：</text>
|
||||
<text class="value">{{ billForm.teamName }}</text>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<text class="label">理货员：</text>
|
||||
<text class="value">{{ billForm.operatorName }}</text>
|
||||
</view>
|
||||
<!-- <view class="header-item total">
|
||||
<text class="label">总数量：</text>
|
||||
<text class="value">2套</text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 物料明细列表 -->
|
||||
<view class="material-list">
|
||||
<!-- <view class="list-title">物料明细</view> -->
|
||||
<view class="material-item" v-for="(item, index) in detailList" :key="index">
|
||||
<view class="material-header">
|
||||
<text class="material-code">物料号：{{ item.wlNo }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">订单号：</text>
|
||||
<text class="info-value">{{ item.sapNo }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">物料描述：</text>
|
||||
<text class="info-value">{{ item.wlMs}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">数量：</text>
|
||||
<text class="info-value">{{ item.realQty }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">存放位置：</text>
|
||||
<text class="info-value">{{ item.pcode || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">项目号：</text>
|
||||
<text class="info-value">{{ item.xmNo || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">项目描述：</text>
|
||||
<text class="info-value">{{ item.xmMs || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">供应商：</text>
|
||||
<text class="info-value">{{ item.gysMc || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">备注：</text>
|
||||
<text class="info-value">{{ item.remark || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { stockDetail } from '@/api/storage'
|
||||
|
||||
const storageType = ref("")
|
||||
|
||||
const billForm = ref({
|
||||
billNo: "",
|
||||
operationTypeName: "",
|
||||
wlTypeName: "",
|
||||
operationTime: "",
|
||||
teamName: "",
|
||||
operatorName: "",
|
||||
})
|
||||
|
||||
const detailList = ref([])
|
||||
|
||||
onLoad((options)=>{
|
||||
storageType.value = options.type
|
||||
const instance = getCurrentInstance().proxy
|
||||
const eventChannel = instance.getOpenerEventChannel();
|
||||
eventChannel.on('acceptDataFrom', (data) => {
|
||||
billForm.value = data.data
|
||||
stockDetail(billForm.value.billNo).then(res => {
|
||||
detailList.value = res.data
|
||||
})
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.receipt-detail-container {
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
padding: 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 头部信息卡片 */
|
||||
.header-card {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 150rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
&.total {
|
||||
.label {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.value {
|
||||
font-weight: 500;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
/* 物料明细列表 */
|
||||
.material-list {
|
||||
|
||||
|
||||
|
||||
.material-item {
|
||||
background-color: #fffbe6;
|
||||
border: 1rpx solid #ffe58f;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.material-header {
|
||||
margin-bottom: 16rpx;
|
||||
.material-code {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #d48806;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
width: 160rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user