|
|
<template> <view> <view class="head" v-if="$isRight(order)"> <view class="lf-row-between lf-color-gray list"> <view>采购单 {{ order.p_sn }}</view> </view> <view class="lf-row-between list"> <image :src="order.supplier.logo" class="image"></image> <view class="info"> <view class="lf-font-32 lf-color-black lf-font-bold">{{ order.supplier.supplier_name }}</view> <view class="lf-font-24 lf-color-555">{{ order.supplier.address }}</view> </view> </view> </view> <self-line></self-line> <view class="lf-p-l-32 lf-p-r-32 lf-border-box lf-bg-white"> <!-- <lf-ysteps :stepList="stepList" color="#11D189"></lf-ysteps> --> <lf-stepbar :list="order.state_log" v-if="order.state_log"></lf-stepbar> </view> <self-line></self-line> <view class="head"> <view class="lf-row-between list"> <view>车辆</view> <view class="lf-font-bold">{{order.car_license}}</view> </view> <view class="lf-row-between list"> <view>司机</view> <view class="lf-font-bold">{{order.deliver_man}}</view> </view> <view class="lf-row-between list"> <view>联系电话</view> <view class="lf-font-bold">{{order.deliver_phone}}</view> </view> <view class="list"> <view>证明材料-供应端</view> <view class="lf-flex-wrap lf-m-t-10"> <image :src="item.voucher_pic" @click="lookImage(index)" class="ms-img" v-for="(item, index) in order.voucher" :key="item.id"></image> </view> </view> <view class="list" v-if="voucher_list.length"> <view>证明材料-食堂端</view> <view class="lf-flex-wrap lf-m-t-10"> <image :src="item" @click="lookPopupImage(index)" class="ms-img" v-for="(item, index) in voucher_list" :key="index"></image> </view> </view> </view> <self-line></self-line> <view class="lf-m-t-30 lf-m-l-32"> <view class="lf-font-32 lf-color-black lf-font-bold lf-m-b-20">物资明细</view> <wyb-table :first-line-fixed="true" contentBgColor="#ecfaf5" :headers="headers" :contents="contents" width="max-content" height="350rpx"></wyb-table> </view> <view style="height: 100rpx;"></view> <!-- 操作按钮 --> <view class="fixed-bottom" v-if="type != '备货中'"> <view v-if="type == '待发单'" class="lf-row-flex-end"> <button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=1')">编辑</button> <button class="btn btn2">立即发单</button> </view> <view v-else-if="type == '待接单'" class="lf-row-flex-end"> <button class="btn btn2" style="background-color: #FF0000;" @click="orderStateChange('已撤销')">撤销订单</button> </view> <view v-else-if="type == '已发货'" class="lf-row-flex-end"> <button class="btn btn1">退单</button> <button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button> <button class="btn btn2" @click="$url('/pages/purchase/receipt?p_sn='+ order.p_sn)">确认收货</button> </view> <view v-else-if="type == '已收货' || type == '已入库'" class="lf-row-between"> <button class="btn btn1" @click="$url('/pages/purchase/launch?p_sn='+ order.p_sn+'&enter_type=2')">复用采购单</button> <view class="lf-font-32" style="color: #11D189;">已完成</view> </view> </view> <!-- 弹出层-上传凭证 --> <u-popup v-model="is_show_voucher" mode="center" border-radius="20"> <view class="popup-box"> <view class="content"> <view class="popup-title">上传凭证信息</view> <view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view> <view class="popup-images"> <view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookPopupImage(index)"> <image :src="item" mode="aspectFill"></image> <view class="remove-image" @click.stop="removeInage(index)"> <u-icon name="close-circle"></u-icon> </view> </view> <view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view> </view> </view> <view class="foot-btn"> <u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button> <u-button class="popup-btn" @click="submitImage">确定</u-button> </view> </view> </u-popup> </view></template>
<script> import { uploadFile } from '@/common/uploadFile.js' import lfYsteps from '@/components/lf-ysteps/lf-ysteps'; import wybTable from '@/components/wyb-table/wyb-table'; export default { components: { lfYsteps, wybTable }, data(){ return { headers: [{ key: 'name', label: '物资名称' },{ key: 'spec', label: '规格' },{ key: 'pre_tax_price', label: '税前价格' },{ key: 'after_tax_price', label: '税后价格' }], contents: [], order: {}, p_sn: '', type: 4, is_show_voucher: false, voucher_list: [], voucher_count: 6 } }, onLoad(options){ // TODO 1、凭证上传流程变动：当采购单状态为已发货状态时，食堂可以上传凭证图片；
// TODO 2、食堂收货时，实到数、实收数默认填充采购数量；
// todo 上传凭证参考页面：/uniapp-supplychain/supplier/pages/gonghuo/detail
this.p_sn = options.p_sn || ''; // TODO 显示车辆等信息，显示table信息
this.getData(); }, methods: { // 预览图片
lookPopupImage(current){ if(this.voucher_list.length <= 0) return; this.$u.throttle(() => { uni.previewImage({ urls: this.voucher_list, current: current }) }, 500); }, // 移除图片
removeInage(current){ this.voucher_list.splice(current, 1); }, // 上传凭证图片
uploadImage(){ let current_count = this.voucher_count - this.voucher_list.length; if(current_count == 0) return; uni.chooseImage({ count: current_count, complete: result => { this.voucher_list.push(...result.tempFilePaths); console.log(this.voucher_list) } }) }, // 用户点击确定，将图片上传至oss，并将url发送给后端
submitImage(){ let that = this; let voucher_list = that.voucher_list; if(voucher_list.length <= 0){ return that.$msg('您未上传图片哦'); }; that.is_show_voucher = false; uni.showLoading({ title: '正在上传中...' }) let http_list = []; voucher_list.map(item => { let itemP = new Promise((resolve, reject) => { uploadFile(item, (res) => { resolve(res); }, (err) => { reject(err); }, this); }) http_list.push(itemP); }) Promise.all(http_list).then(res => { console.log("上传完毕", res); let images = res.map(item => item.path); console.log(images) // todo 图片上传url给后端
that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, { p_sn: that.p_sn, images: images, }).then(result => { uni.hideLoading(); that.voucher_list = []; that.$msg('凭证已上传成功!') }).catch(err => uni.hideLoading()); }).catch(err => { console.log(err) uni.hideLoading(); uni.showModal({ title: '', content: JSON.stringify(err), showCancel: false, confirmColor: '#1833F2' }) }) }, getData(){ this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, { p_sn: this.p_sn // p_sn: '802316269455228606'
}).then(res => { console.log("xxx",res) this.order = res.data.order; let list = res.data.order.items || []; let contents = list.map(item => { return { name: item.material.m_name, spec: item.spec.name, pre_tax_price: item.total_tax_amount, after_tax_price: item.total_non_tax_amount, spec_id: item.spec.id, material_id: item.material.id } }) this.contents = contents; console.log(this.contents) this.type = res.data.order.state }) }, // 预览图片
lookImage(index){ this.$u.throttle(() => { let images = this.order.voucher.map(item => item.voucher_pic); uni.previewImage({ urls: images, current: index }) }, 200); }, // 改变订单状态 TODO
orderStateChange(state){ this.$http(this.API.API_CANTEEN_PURCHASEUPDATE, { p_sn: this.p_sn, state: state }).then(res => { console.log("orderStateChange", res); this.$msg('操作成功').then(()=>{this.$toBack()}); }) } } }</script>
<style lang="scss" scoped="scoped"> .head{ padding: 0 32rpx; width: 750rpx; box-sizing: border-box; height: auto; .list{ padding: 30rpx 0; border-bottom: 1rpx solid #e5e5e5; font-size: 28rpx; color: #555555; &:last-child{ border-bottom: none; } .image{ width: 140rpx; height: 140rpx; border-radius: 10rpx; background-color: #EEEEEE; } .info{ display: flex; flex-direction: column; justify-content: space-around; width: 530rpx; height: 140rpx; } } } .fixed-bottom{ position: fixed; bottom: 0rpx; left: 0rpx; z-index: 99; width: 750rpx; height: 98rpx; display: flex; // justify-content: flex-end;
align-items: center; border-top: 1rpx solid #E5E5E5; background-color: #FFFFFF; box-sizing: border-box; padding: 0 32rpx; .btn{ width: 212rpx; height: 82rpx; border-radius: 41rpx; margin: 0; padding: 0; font-size: 32rpx; display: flex; justify-content: center; align-items: center; } .btn1{ border: 2rpx solid #555555; opacity: .5; } .btn2{ background: #11D189; color: #FFFFFF; margin-left: 20rpx; } } .fixed-bottom>view{ width: 100%; } .ms-img{ width: 160rpx; height: 160rpx; margin-right: 15rpx; margin-top: 15rpx; background-color: #EEEEEE; &:nth-of-type(4n){ margin-right: 0rpx; } } .popup-box{ width: 686rpx; height: max-content; display: flex; justify-content: space-between; flex-direction: column; .content{ .popup-title{ font-size: 32rpx; font-weight: bold; color: #222222; text-align: center; margin-top: 40rpx; } .popup-desc{ font-size: 28rpx; color: #555555; text-align: center; margin-top: 20rpx; margin-bottom: 18rpx; } .popup-images{ display: flex; flex-wrap: wrap; padding: 22rpx; margin-bottom: 18rpx; .popup-image-item{ width: 198rpx; height: 198rpx; margin: 8rpx; background: #F5F5F5; border-radius: 10rpx; position: relative; image{ width: 100%; height: 100%; } .remove-image{ position: absolute; right: -8rpx; top: -16rpx; color: #e74c3c; font-size: 40rpx; padding: 8rpx; } } .popup-image-item-after::after{ content: '+'; position: absolute; left: 30%; top: 14%; font-size: 100rpx; color: #777777; } } .popup-input{ padding: 0 60rpx; box-sizing: border-box; height: 90rpx; font-size: 28rpx; color: #555555; input{ text-align: right; } } } .foot-btn{ height: 90rpx; width: 100%; border-top: 1rpx solid #E5E5E5; display: flex; box-sizing: border-box; .popup-btn{ width: 50%; height: 100%; border: none; border-radius: initial; &:last-child{ border-left: 1rpx solid #E5E5E5; color: #1833F2; } } } }</style>
|
