|
|
<template> <view> <block v-if="$isRight(order)"> <view class="head"> <view class="lf-row-between list"> <lf-image :src="order.supplier.logo_url" errSrc="../../static/images/supplier_avatar.png" class="image"></lf-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 class="lf-font-24 lf-color-555" @click="call(order.supplier.ctl_phone)">{{order.supplier.ctl_man}} {{ order.supplier.ctl_phone }}</view> </view> </view> </view> <self-line></self-line> <view class="lf-bg-white"> <lf-stepbar :list="order.state_log" themeColor="#11D189" v-if="order.state_log"></lf-stepbar> </view> <self-line></self-line> <view class="head"> <view class="lf-row-between list" v-if="order.car_license"> <view>车辆</view> <view class="lf-font-bold">{{order.car_license}}</view> </view> <view class="lf-row-between list" v-if="order.deliver_man"> <view>司机</view> <view class="lf-font-bold">{{order.deliver_man}}</view> </view> <view class="lf-row-between list" @click="call(order.deliver_phone)" v-if="order.deliver_phone"> <view>联系电话</view> <view class="lf-font-bold" style="color: rgb(17, 209, 137);">{{order.deliver_phone}}</view> </view> <view class="lf-row-between list"> <view>采购单</view> <view class="lf-font-bold">{{ order.p_sn }}</view> </view> <view class="lf-row-between list"> <view>批次号</view> <view class="lf-font-bold">{{ order.batch_sn }}</view> </view> <view class="lf-row-between list"> <view>预计收货时间</view> <view class="lf-font-bold">{{order.deadline_text}}</view> </view> <view class="list" v-if="supplier_voucher.length"> <view>供应商证明材料</view> <view class="lf-flex-wrap lf-m-t-10"> <lf-image :src="item" @click="lookImage(index, 'supplier_voucher')" class="ms-img" v-for="(item, index) in supplier_voucher" :key="index"></lf-image> </view> </view> <view class="list" v-if="canteen_voucher.length"> <view>食堂证明材料</view> <view class="lf-flex-wrap lf-m-t-10"> <lf-image :src="item" @click="lookImage(index, 'canteen_voucher')" class="ms-img" v-for="(item, index) in canteen_voucher" :key="index"></lf-image> </view> </view> </view> <self-line></self-line> <view class="lf-m-t-30 lf-m-l-32 lf-m-r-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="80vh"></wyb-table> </view> <view style="height: 140rpx;"></view> <!-- 操作按钮 --> <view class="fixed-bottom" v-if="type && 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" :class="{'lf-btn-disabled': button_click}" @click="orderStateChange('待接单')">立即发单</button> </view> <view v-else-if="type == '待接单'" class="lf-row-flex-end"> <button class="btn btn2" :class="{'lf-btn-disabled': button_click}" style="background-color: #FF0000;" @click="orderStateChange('已撤销')">撤销订单</button> </view> <view v-else-if="type == '已发货'" class="lf-row-flex-end"> <button class="btn btn1" :class="{'lf-btn-disabled': button_click}" @click="orderStateChange('已退单')">退单</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;">{{order.state}}</view> </view> <view v-else-if="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: #ff0000;">{{ type }}</view> </view> <view v-else class="lf-row-flex-end"> <view class="lf-font-32">{{ type }}</view> </view> </view> <!-- 弹出层-上传凭证 --> <u-popup v-model="is_show_voucher" mode="center" border-radius="20"> <view class="voucher-popup-box"> <view class="popup-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="lookImage(index, 'voucher_list')"> <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> <!-- 预览图片组件 -->
<lf-previewimage ref="previewimage" /> </block> </view></template>
<script> import { uploadFile } from '@/common/uploadFile.js' import wybTable from '@/components/wyb-table/wyb-table'; export default { components: { wybTable }, data(){ return { headers: [{ key: 'name', label: '物资名称' },{ key: 'spec', label: '规格' },{ label: '单位', key: 'unit' },{ label: '分类', key: 'category' },{ key: 'brand', label: '品牌' },{ key: 'quality_level', label: '品级' },{ label: '编号', key: 'm_sn' },{ label: '供应商', key: 'supplier_name' },{ key: 'pre_tax_price', label: '含税价' },{ key: 'total_tax_amount', label: '含税价合计' },{ key: 'after_tax_price', label: '不含税价' },{ key: 'total_non_tax_amount', label: '不含税合计' },{ key: 'purchase_limit', label: '起购数' },{ key: 'purchase_number', label: '采购数量' }], contents: [], order: {}, p_sn: '', type: '', is_show_voucher: false, voucher_list: [], voucher_count: 6, show_count: 0, canteen_voucher: [], // 食堂端凭证
supplier_voucher: [], // 供应端凭证
button_click: false } }, onLoad(options){ this.p_sn = options.p_sn || ''; this.getData(); }, onShow(){ this.show_count++; if(this.show_count > 1){ this.getData(); } }, methods: { // 拨打电话
call(phone) { uni.makePhoneCall({ phoneNumber: String(phone) }); }, getData(){ this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, { p_sn: this.p_sn }).then(res => { let order = res.data.order; order.state_log.forEach((item, index) => { item.isFinished = false; if(index == order.state_log.length - 1){ let actionState = [ '订单已完成', '订单已退款', '订单已撤销', '订单已确认，物资入库' ]; if(actionState.includes(item.action)){ item.isFinished = true; } } }) let supplier_voucher = []; let canteen_voucher = []; order.voucher.map(item => { if(item.client_type == '供应商'){ supplier_voucher.push(item.voucher_pic_url); }else if(item.client_type == '食堂'){ canteen_voucher.push(item.voucher_pic_url); } }) this.supplier_voucher = supplier_voucher; this.canteen_voucher = canteen_voucher; this.order = order; let list = order.items || []; let contents = list.map(item => { return { name: item?.material?.m_name, spec: item?.spec?.name, brand: item?.material?.brand, quality_level: item?.material?.quality_level, m_sn: item?.material?.m_sn, supplier_name: order?.supplier?.supplier_name, pre_tax_price: item.tax_price, after_tax_price: item.non_tax_price, purchase_limit: item?.p_order_item.purchase_limit, purchase_number: item.purchase_number, unit: item?.material?.unit?.unit_name || '', category: item?.material?.category?.m_cate_name || '', total_tax_amount: item.total_tax_amount, total_non_tax_amount: item.total_non_tax_amount } }) this.contents = contents; this.type = order.state; }).catch(err => this.$toBack()); }, // 预览图片
lookImage(current, list){ if(this[list].length <= 0) return; this.$u.throttle(() => { this.$refs.previewimage.show({
images: this[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 => { let tempFiles = result.tempFiles; let voucher_list = []; let overstep = false; tempFiles.map(item => { // 上传的图片需小于10MB
if(item.size < 10464788){ voucher_list.push(item.path); }else{ overstep = true; } }) if(overstep){ uni.showModal({ title: '温馨提示', content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！', showCancel: false }) } this.voucher_list.push(...voucher_list); } }) }, // 用户点击确定，将图片上传至oss，并将url发送给后端
submitImage(){ let that = this; if(that.button_click) return; that.button_click = true; let voucher_list = that.voucher_list; if(voucher_list.length <= 0){ that.button_click = false; 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("sssssss", res); let images = res.map(item => item.path); that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, { p_sn: that.p_sn, images: images, }).then(result => { uni.hideLoading(); that.voucher_list = []; that.$msg('凭证已上传成功!'); that.button_click = false; that.getData(); }).catch(err => { uni.hideLoading(); that.button_click = false; }); }).catch(err => { uni.hideLoading(); that.button_click = false; uni.showModal({ title: '', content: JSON.stringify(err), showCancel: false, confirmColor: '#1833F2' }) }) }, // 改变订单状态
orderStateChange(state){ let that = this; if(that.button_click) return; that.button_click = true; if(state == '已退单'){ uni.showModal({ title: '温馨提示', content: '退单前请与供应商协商，以免造成损失！确定继续退单操作吗？', confirmColor: '#FF0000', cancelColor: '#11D189', success: result => { if(result.confirm){ $change(); }else{ that.button_click = false; } } }) }else{ $change(); } function $change(){ that.$http(that.API.API_CANTEEN_PURCHASEUPDATE, { p_sn: that.p_sn, state: state }).then(res => { that.button_click = false; that.$msg('操作成功').then(()=> that.getData()); }).catch(err => that.button_click = false) } } } }</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; } } .voucher-popup-box{ width: 686rpx; height: max-content; display: flex; justify-content: space-between; flex-direction: column; .popup-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; } } } } // 去掉u-button 外边框线
/deep/.u-hairline-border::after{ border: none; } // 弹出层样式
/deep/.u-drawer{ z-index: 999 !important; }</style>
|
