<template>
<view class="stockRecheck-print">
<view class="search-box row bothSide verCenter">
<view class="sn row rowCenter verCenter">
<picker :value="index" :range="array">
<view class="row verCenter">
<view class="uni-input">{{ array[index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
<view class="search-bar row bothSide verCenter">
<view class="row verCenter">
<text class="iconfont icon-juxing1"></text>
<input class="uni-input" placeholder="请扫描或输入号码" placeholder-style="color:#919399" v-model="searchParams.stock_out_sn" @input="handleInput" />
</view>
<text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text>
</view>
</view>
<view class="list" v-if="list.length > 0">
<view class="box row" v-for="(item, index) in list" :key="index">
<view class="input-box row verCenter">
<text class="label">出库单号：</text>
<text class="tt">{{ item.stock_out_sn }}</text>
</view>
<view class="input-box row verCenter">
<text class="label">状态：</text>
<text class="tt">{{ item.stock_out_status_val }}</text>
</view>
<view class="bor" style="flex: 0 0 100%;"></view>
<view class="input-box row verCenter">
<text class="label">总 数 量：</text>
<text class="text">{{ item.total_qty }}</text>
</view>
<view class="input-box row verCenter">
<text class="label">打包箱数：</text>
<text class="text">{{ item.box_num }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">上游备注：</text>
<text class="text">{{ item.upstream_remark }}</text>
</view>
<view class="input-box row verCenter">
<text class="label">销 售 员：</text>
<text class="text">{{ item.sale_name }}</text>
</view>
<view class="input-box row verCenter">
<text class="label">采 购 员：</text>
<text class="text">{{ item.pur_user_name }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">收货客户：</text>
<text class="text">{{ item.customer_name }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">操 作 人：</text>
<text class="text">{{ item.create_name }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">完成时间：</text>
<text class="text">{{ item.finish_time }}</text>
</view>
<view class="btn row rowCenter verCenter" @click="showDrawer(item.stock_out_sn)">选择</view>
</view>
</view>
<!-- 无数据展示 -->
<view class="no-date column rowCenter verCenter" v-else>
<text class="iconfont icon-a-juxing21"></text>
<text class="text">查不到当前数据</text>
</view>
<!-- 打快递单弹窗 -->
<uni-drawer ref="showRight" mode="right">
<view class="uni-drawer-picking" v-if="detail.stock_out_info">
<view class="title row rowCenter verCenter">
<text class="iconfont icon-juxing2" @click="closeDrawer(1)"></text>
<text class="text">打快递单</text>
</view>
<view class="field-item row" style="margin-top: 39rpx;">
<view class="item row verCenter">
<text class="label">出库单号：</text>
<text class="text">{{ detail.stock_out_info.stock_out_sn }}</text>
</view>
<view class="item row verCenter">
<text class="label">状态：</text>
<text class="text">{{ detail.stock_out_info.stock_out_status_val }}：</text>
</view>
</view>
<view class="bor"></view>
<view class="field-item row">
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">上游备注：</text>
<text class="tt" style="max-width: 100%;">{{ detail.upstream_remark }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">收货客户：</text>
<text class="tt">{{ detail.stock_out_info.customer_name }}</text>
</view>
<view class="item row verCenter">
<text class="label">操 作 人：</text>
<text class="tt">{{ detail.stock_out_info.create_name }}</text>
</view>
</view>
<view class="bor"></view>
<view class="item-tit row verCenter bothSide">
<text>交货信息</text>
<view class="text">
<text class="label">包 裹 数：</text>
<text class="tt">{{ detail.stock_out_info.box_num }}</text>
</view>
</view>
<view class="form-input">
<view class="input-title">
<text class="input-title-t1">*</text>
<text class="input-title-t2">交货方式：</text>
</view>
<view class="select-box row">
<picker @change="bindPickerChange(1, $event)" :value="real_shipping_type_index" :range="real_shipping_type_data" :range-key="'name'" style="width: 100%;">
<view class="row verCenter bothSide wrap">
<view class="uni-input">{{ real_shipping_type_data[real_shipping_type_index].name }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
</view>
<view class="form-input">
<view class="input-title">
<text class="input-title-t1">*</text>
<text class="input-title-t2">物流公司：</text>
</view>
<view class="select-box row">
<picker @change="bindPickerChange(2, $event)" :value="real_shipping_id_index" :range="real_shipping_id_data" :range-key="'name'" style="width: 100%;">
<view class="row verCenter bothSide wrap">
<view class="uni-input">{{ real_shipping_id_data[real_shipping_id_index].name || '请选择' }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
</view>
<view class="form-input">
<view class="input-title">
<text class="input-title-t1">*</text>
<text class="input-title-t2">物流模式：</text>
</view>
<view class="select-box row">
<picker @change="bindPickerChange(3, $event)" :value="real_shipping_mode_index" :range="real_shipping_mode_data" :range-key="'name'" style="width: 100%;">
<view class="row verCenter bothSide wrap">
<view class="uni-input">{{ real_shipping_mode_data[real_shipping_mode_index].name }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
</view>
<template v-if="formParams.real_shipping_type == 1 && formParams.real_shipping_id == 1"></template>
<template v-else>
<view class="form-input">
<view class="input-title">
<text class="input-title-t1">*</text>
<text class="input-title-t2">物流单号：</text>
</view>
<view class="input-box"><input type="text" class="uni-input" placeholder-style="color:#919399" placeholder="请输入" v-model="formParams.shipping_code" /></view>
</view>
</template>
<view class="print row verCenter" @click="toggel()">
<text class="check-box-icon" :class="{ curr: flag }"></text>
<text class="tt">签回单</text>
</view>
<view class="bor"></view>
<view class="item-tit">地址信息</view>
<view class="field-item row">
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">收货公司：</text>
<text class="tt">{{ detail.stock_out_info.customer_name }}</text>
</view>
<view class="item row verCenter">
<text class="label">收 货 人：</text>
<text class="tt">{{ detail.stock_out_address.consignee }}</text>
</view>
<view class="item row verCenter">
<text class="label">联系电话：</text>
<text class="tt">{{ detail.stock_out_address.mobile }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">收货地址：</text>
<text class="tt" style="max-width: 100%;">{{ detail.stock_out_address.province }}{{ detail.stock_out_address.city }}{{ detail.stock_out_address.district }}{{ detail.stock_out_address.address }}</text>
</view>
</view>
<view class="btn row verCenter bothSide">
<template v-if="formParams.real_shipping_type == 1 && formParams.real_shipping_id == 1">
<view class="btn2 row rowCenter verCenter" style="width: 50%;" @click="updateDeliveryInfo(detail.stock_out_info.stock_out_id)">保存</view>
<view class="btn1 row rowCenter verCenter" style="width: 50%;" @click="printExpress(detail.stock_out_info.stock_out_id)">打 印</view>
</template>
<template v-else>
<view class="btn2 row rowCenter verCenter" style="width: 100%;" @click="updateDeliveryInfo(detail.stock_out_info.stock_out_id)">保存</view>
</template>
</view>
</view>
</uni-drawer>
</view>
</template>
<script>
import { API } from '@/util/api.js';
import debounce from 'lodash/debounce';
export default {
data() {
return {
input_flag: false,
flag: false,
page: 1,
limit: 10000,
list: [],
index: 0,
real_shipping_type_index: 0,
real_shipping_id_index: 0,
real_shipping_mode_index: 0,
array: ['出库单号'],
detail: {},
real_shipping_id_data: [], //物流公司数据
real_shipping_mode_data: [{ name: '空运', value: 1 }, { name: '陆运', value: 2 }, { name: '重货快运', value: 3 }, { name: '物流普运', value: 4 }], //物流模式数据
searchParams: {
stock_out_sn: ''
},
formParams: {
real_shipping_type: '', //交货方式
real_shipping_id: '', //物流公司
real_shipping_mode: '', //物流模式
shipping_code: '', //物流单号
is_receipt: '' //是否签回单
}
};
},
onShow() {
this.getData();
},
computed: {
//交货方式数据
real_shipping_type_data() {
const company_id = Number(uni.getStorageSync('company_id'));
if (company_id == 1) {
return [{ name: '快递', value: 1 }, { name: '自送', value: 2 }, { name: '客户自取', value: 3 }, { name: '同城物流', value: 4 }];
} else if (company_id == 2) {
return [{ name: '快递', value: 1 }];
} else {
return [];
}
}
},
methods: {
toggel() {
this.flag = !this.flag;
if (this.flag) {
this.formParams.is_receipt = 1;
} else {
this.formParams.is_receipt = -1;
}
},
bindPickerChange: function(type, e) {
if (type == 1) {
this.real_shipping_type_index = e.detail.value;
this.formParams.real_shipping_type = this.real_shipping_type_data[e.detail.value].value;
this.realShippChage();
} else if (type == 2) {
this.real_shipping_id_index = e.detail.value;
this.formParams.real_shipping_id = this.real_shipping_id_data[e.detail.value].value;
} else if (type == 3) {
this.real_shipping_mode_index = e.detail.value;
this.formParams.real_shipping_mode = this.real_shipping_mode_data[e.detail.value].value;
}
console.log('picker发送选择改变，携带值为', e.detail.value);
},
/**
* 根据所选的交货方式，显示对应的物流公司
* @param {Object} value
*/
realShippChage() {
const company_id = Number(uni.getStorageSync('company_id'));
let value = this.formParams.real_shipping_type;
if (company_id == 1) {
this.real_shipping_id_data = [];
if (value == 1) {
this.real_shipping_id_data.push({ name: '顺丰', value: 1 }, { name: '京东', value: 11 }, { name: '中通', value: 18 }, { name: '韵达', value: 5 });
} else if (value == 2) {
this.real_shipping_id_data = [];
} else if (value == 3) {
this.real_shipping_id_data.push({ name: '自提', value: 10 });
} else if (value == 4) {
this.real_shipping_id_data.push({ name: '顺丰同城', value: 19 }, { name: '货拉拉', value: 20 }, { name: '跨越速运', value: 21 });
}
} else if (company_id == 2) {
if (value == 1) {
this.real_shipping_id_data.push({ name: '顺丰', value: 1 }, { name: 'UPS', value: 17 }, { name: 'Fedex', value: 13 }, { name: 'TNT', value: 9 }, { name: 'DHL', value: 12 });
}
}
},
showDrawer(stock_out_sn) {
this.$refs.showRight.open();
this.getStockOutDetail(stock_out_sn);
},
closeDrawer() {
this.$refs.showRight.close();
},
/**
* 清空数据
*/
clearInput() {
this.input_flag = false;
this.searchParams.stock_out_sn = '';
this.getData();
},
/**
* 单号搜索
* @param {Object} event
*/
handleInput: debounce(function(event) {
var val = event.target.value;
if (val) {
this.input_flag = true;
} else {
this.input_flag = false;
}
this.getData();
}, 500),
/**
* 获取列表数据
*/
getData() {
this.request(API.getToPrintList, 'POST', { page: this.page, limit: this.limit, ...this.searchParams }, false).then(res => {
if (res.code === 0) {
this.list = res.data.list;
} else {
uni.showToast({
title: res.msg,
icon: 'error'
});
}
});
},
/**
* 详情
*/
getStockOutDetail(stock_out_sn) {
this.request(API.getStockOutDetail, 'POST', { stock_out_sn: stock_out_sn }, true).then(res => {
if (res.code === 0) {
this.detail = res.data;
this.formParams.real_shipping_type = 1; //设置默认
this.formParams.real_shipping_id = 1;
this.formParams.shipping_code = res.data.stock_out_address.shipping_code;
this.realShippChage(1);
} else {
uni.showToast({
title: res.msg,
icon: 'error'
});
}
});
},
/**
* 更新交货信息
*/
updateDeliveryInfo(stock_out_id) {
this.request(
API.updateDeliveryInfo,
'POST',
{
stock_out_id: stock_out_id,
real_shipping_type: this.formParams.real_shipping_type,
real_shipping_id: this.formParams.real_shipping_id,
real_shipping_mode: this.formParams.real_shipping_mode,
shipping_code: this.formParams.shipping_code,
is_receipt: 1
},
true
).then(res => {
if (res.code === 0) {
uni.showToast({
title: '保存成功',
icon: 'success'
});
} else {
uni.showModal({
itle: '提示',
content: res.msg,
showCancel: false
});
}
});
},
/**
* 打印快递单
*/
printExpress(stock_out_id) {
this.request(API.printExpress, 'POST', { stock_out_id: stock_out_id }, true).then(res => {
if (res.code === 0) {
uni.showLoading({
title: '正在打印中，请查看打印机'
});
} else {
uni.showModal({
title: '提示',
content: res.msg,
showCancel: false
});
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/stockRecheck/print.scss';
</style>