<template> <view class="p-content"> <view class="p-head" v-if="baseData"> <view> <view> <text>散件单号:</text> <text style="color: crimson;">{{baseData.sparePartsPurchaseNo}}</text> </view> </view> <view> <view> <text>供应商:</text> <view> {{baseData.supplierName||'--'}} </view> </view> </view> <view> <view> <text>散件入库类型:</text> <view> {{baseData.sparePartsTypeName||'--'}} </view> </view> </view> <view> <view> <text>备注:</text> <view> {{ (baseData&&baseData.remarks) || '--' }} </view> </view> </view> <view> <view> <text>联系人:</text> <view> {{ (baseData&&baseData.supplierContactPerson) || '--' }} <span v-if="baseData&&baseData.supplierContactTel">({{ baseData.supplierContactTel }})</span> </view> </view> </view> <view> <view> <text>联系地址:</text> <view> {{baseData.supplierProvinceName}} {{baseData.supplierCityName}} {{baseData.supplierCountyName}} {{baseData.supplierAddress}} </view> </view> </view> <view v-if="countData" style="justify-content: flex-start;flex-wrap: wrap;"> <view>总款数:{{countData.productTotalCategory||0}}</view> <view>总数量:{{countData.productTotalQty||0}}</view> <view>总成本:<u-text type="error" mode="price" :text="countData.productTotalCost||0" /></view> </view> </view> <view class="p-body"> <uni-table border emptyText="暂无数据" :loading="loading" > <!-- 表头行 --> <uni-tr> <uni-td align="center">产品编码</uni-td> <uni-td align="center">数量</uni-td> <uni-td align="center">总成本</uni-td> </uni-tr> <!-- 表格数据行 --> <uni-tr v-for="item in detailList" :key="item.id" @click="toDetail(item)"> <uni-td width="40%" align="center">{{item.productCode}}</uni-td> <uni-td width="30%" align="center">{{item.putQty}}</uni-td> <uni-td width="30%" align="center"> <span :style="{ color: 'red' }">¥{{Number(item.putCost*item.putQty).toFixed(2)}}</span> </uni-td> </uni-tr> </uni-table> </view> </view> </template> <script> import { sparePartsPurDetail, dealerProductQueryForSparePartsPur, sparePartsPurDetailList, sparePartsQueryCount, } from '@/config/api.js' export default { data() { return { loading: false, baseData: null, detailList:[], countData:null, code:'', sparePartsPurchaseSn: '', sparePartsPurchaseId: '', curProduct: null, }; }, onLoad(opts) { var _this = this this.sparePartsPurchaseSn = opts.sn this.sparePartsPurchaseId = opts.id this.getDetail() this.pageInit() }, onShow() { this.pageInit() }, methods: { pageInit(){ this.getTotal() this.getDetailList() }, // 详情 getDetail(){ sparePartsPurDetail({sn: this.sparePartsPurchaseSn}).then(res => { if(res.status == 200){ this.baseData = res.data } }) }, // 已添加产品列表 getDetailList(){ sparePartsPurDetailList({pageNo:1,pageSize:1000,sparePartsPurchaseSn:this.sparePartsPurchaseSn}).then(res => { console.log(res,'已添加产品列表') if(res.status == 200){ this.detailList = res.data.list this.detailList.map(item => { item.putCostBackups = item.putCost item.putQtyBackups = item.putQty }) const curProduct = this.detailList.find(item => item.qrCode == this.code) this.curProduct = curProduct || null } }) }, getTotal(){ sparePartsQueryCount({sparePartsPurchaseSn:this.sparePartsPurchaseSn}).then(res => { console.log(res,'getTotal') this.countData = res.data }) }, toDetail(item) { this.$store.state.vuex_tempData = item uni.navigateTo({ url:"/pages/stockIn/detail?state="+this.baseData.state }) }, }, } </script> <style lang="scss"> .p-content{ button{ line-height: 1.7; } .p-head{ font-size: 32upx; color: $uni-text-color; >view{ display: flex; align-items: center; padding: 15upx 20upx; border-bottom: 1px solid #eee; justify-content: space-between; > view{ display: flex; padding: 0 10upx; align-items: center; } } .uni-input{ border: 1px solid #eee; width: 150upx; text-align: center; } } .p-body{ overflow: auto; flex-grow: 1; height: 50%; } .p-footer{ padding:20upx 30upx; display: flex; > button{ width: 30%; } } } </style>