<template>
|
<view class="scan_index">
|
<view class="scan_header"></view>
|
<view class="scan_content">
|
<view class="scan_content_button">
|
<u-button
|
type="primary"
|
icon="scan"
|
text="继续扫描管片"
|
color="#C8DEff"
|
iconColor="#1977FF"
|
customStyle="color: #1977FF"
|
@click="scanChange()">
|
</u-button>
|
</view>
|
<scroll-view class="scan_content_scroll" scroll-y="true">
|
<view
|
v-for="item in pipeDataList"
|
:key="item.id"
|
class="scroll_item">
|
<view class="scroll_item_title">
|
管片信息
|
</view>
|
<view class="scroll_item_content">
|
<view class="item_content_info">
|
<text class="label">项目：</text>
|
<text>{{item.proName}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">环号：</text>
|
<text>{{item.ringNum}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">管片编号：</text>
|
<text>{{item.pipeNum}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">尺寸：</text>
|
<text>{{item.sizeName}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">块号：</text>
|
<text>{{item.blockNumName}}</text>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="scan_content_change">
|
<u-form
|
ref="uForm"
|
labelPosition="left"
|
labelWidth="auto"
|
:model="ruleForm"
|
:rules="rules">
|
<u-form-item label="出库时间:" prop="strTime" borderBottom @click="changeTime(1)">
|
<u-input
|
v-model="ruleForm.strTime"
|
border="none"
|
placeholder="请选择出库时间"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="calendar"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="拟到时间:" prop="endTime" borderBottom @click="changeTime(2)">
|
<u-input
|
v-model="ruleForm.endTime"
|
border="none"
|
placeholder="请选择拟到时间"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="calendar"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="收货人:" prop="reciverName" borderBottom @click="changeReciverName()">
|
<u-input
|
v-model="ruleForm.reciverName"
|
border="none"
|
placeholder="请选择收货人"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="收货单位:" prop="reciverUnit" borderBottom>
|
<u-input
|
v-model="ruleForm.reciverUnit"
|
border="none"
|
placeholder="收货单位"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="车牌号:" prop="carBrand" borderBottom @click="changeCarBrand()">
|
<u-input
|
v-model="ruleForm.carBrand"
|
border="none"
|
placeholder="请选择车牌号"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="GPS设备:" prop="carBrand" borderBottom @click="changeGpsDevice()">
|
<u-input
|
v-model="ruleForm.gdName"
|
border="none"
|
placeholder="请选择GPS设备"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="项目名称:" prop="proName" borderBottom @click="changeProject()">
|
<u-input
|
v-model="ruleForm.proName"
|
border="none"
|
placeholder="请选择项目名称"
|
disabled
|
disabledColor="#FFFFFF">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right"
|
></u-icon>
|
</u-form-item>
|
</u-form>
|
</view>
|
<view
|
v-if="ruleForm.carBrand"
|
class="scroll_item scroll_items">
|
<view class="scroll_item_title">
|
车辆信息
|
</view>
|
<view class="scroll_item_content">
|
<view class="item_content_info">
|
<text class="label">车辆类型：</text>
|
<text>{{carData.dictName}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">司机：</text>
|
<text>{{carData.carDriver}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">联系电话：</text>
|
<text>{{carData.carPhone}}</text>
|
</view>
|
<view class="item_content_info">
|
<text class="label">备注：</text>
|
<text>{{carData.carNotes}}</text>
|
</view>
|
</view>
|
</view>
|
<view style="padding-bottom: 10px;">
|
<u-button
|
type="primary"
|
text="提交"
|
color="#1977FF"
|
@click="checkSubmit()">
|
</u-button>
|
</view>
|
</view>
|
<u-modal
|
:show="showModal"
|
content='是否确认出库信息'
|
showCancelButton
|
@cancel="showModal = false"
|
@confirm="submitExitStoreInfo"
|
></u-modal>
|
<u-picker
|
:show="showPickerCar"
|
:columns="columsCarData"
|
keyName="carBrand"
|
closeOnClickOverlay
|
@cancel="showPickerCar = false"
|
@confirm="confirmPickerCar"
|
@close="showPickerCar = false"
|
></u-picker>
|
<u-picker
|
:show="showPickerConsignee"
|
:columns="columsConsigneeData"
|
keyName="reciverName"
|
closeOnClickOverlay
|
@cancel="showPickerConsignee = false"
|
@confirm="confirmPickerConsignee"
|
@close="showPickerConsignee = false"
|
></u-picker>
|
<u-datetime-picker
|
:show="showPickerTime"
|
@cancel="showPickerTime = false"
|
@confirm="confirmPickerTime"
|
v-model="defaultTime"
|
mode="datetime"
|
></u-datetime-picker>
|
<u-picker
|
:show="showGps"
|
:columns="gpsDeviceList"
|
keyName="gdName"
|
closeOnClickOverlay
|
@cancel="showGps = false"
|
@confirm="confirmGpsDevice"
|
@close="showGps = false"
|
></u-picker>
|
<u-picker
|
:show="showProject"
|
:columns="projectList"
|
keyName="proName"
|
closeOnClickOverlay
|
@cancel="showProject = false"
|
@confirm="confirmProject"
|
@close="showProject = false"
|
></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import { throttle, changeTime } from '../../plugins/public';
|
export default {
|
data() {
|
return {
|
ruleForm: {
|
strTime: '',
|
endTime: '',
|
reciverName: '',
|
carBrand: ''
|
},
|
defaultTime: Number(new Date()),
|
pipeDataList: [],
|
timeType: 1,
|
showPickerTime: false,
|
showModal: false, // 模态框
|
showPickerCar: false,
|
columsCarData: [], // 车辆信息
|
showPickerConsignee: false,
|
columsConsigneeData: [], // 收获人信息
|
carData: {}, // 车辆信息
|
rules: {
|
strTime: [{
|
required: true,
|
message: '请选择出发时间',
|
trigger: ['blur', 'change']
|
}],
|
endTime: [{
|
required: true,
|
message: '请选择拟到时间',
|
trigger: ['blur', 'change']
|
}],
|
reciverName: [{
|
required: true,
|
message: '请选择收货人',
|
trigger: ['blur', 'change']
|
}],
|
carBrand: [{
|
required: true,
|
message: '请选择车辆',
|
trigger: ['blur', 'change']
|
}],
|
gdName: [{
|
required: true,
|
message: '请选择GPS设备',
|
trigger: ['blur', 'change']
|
}]
|
},
|
gpsDeviceList: [],
|
showGps: false,
|
projectList: [],
|
showProject: false,
|
}
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
onLoad(option) {
|
uni.$off('scancodedate');
|
console.log(option.pipeNum,'=====')
|
this.getPipeDetailInfo(option.pipeNum).then((data) => {
|
console.log(data,'=====')
|
this.pipeDataList.push(data);
|
})
|
this.getAllCarData();
|
this.getAllConsigneeData();
|
this.getProjectList();
|
},
|
onUnload() {
|
// 移除监听事件
|
uni.$off('scancodedate');
|
},
|
methods: {
|
// 获取管片信息详情
|
async getPipeDetailInfo(pipeNum) {
|
const { data } = await this.$api.exit.getPipeDetailInfo({
|
pipeNum: pipeNum
|
})
|
return data;
|
},
|
// 获取收货人信息
|
async getAllConsigneeData() {
|
this.columsConsigneeData = [];
|
const { data } = await this.$api.exit.getAllConsigneeData();
|
console.log(data,'收货人信息信息');
|
this.$set(this.columsConsigneeData, 0, data);
|
},
|
// 获取车辆信息
|
async getAllCarData() {
|
this.columsCarData = [];
|
const { data } = await this.$api.exit.getAllCarData();
|
this.$set(this.columsCarData, 0, data);
|
},
|
async getGpsDeviceLists(carId) {
|
this.gpsDeviceList = [];
|
const { data } = await this.$api.exit.getGpsDeviceLists({carId: carId});
|
this.$set(this.gpsDeviceList, 0, data);
|
},
|
async getProjectList(carId) {
|
this.projectList = [];
|
const { data } = await this.$api.exit.searchProjects({
|
pageNum: 1,
|
pageSize: 1000000
|
});
|
console.log(data.list,'--');
|
this.$set(this.projectList, 0, data.list);
|
},
|
// 再次扫码
|
scanChange() {
|
const that = this;
|
uni.$on('scancodedate', function(data) {
|
console.log(data.code, '扫码结果????');
|
uni.$u.toast('扫描完成！');
|
uni.$off('scancodedate');
|
that.getPipeDetailInfo(data.code.slice(-17)).then((res) => {
|
const list = that.pipeDataList.map(item => item.pipeNum);
|
if(list.includes(res.pipeNum)) {
|
uni.$u.toast('请勿重复扫描！');
|
return false;
|
} else {
|
that.$nextTick(() => {
|
that.pipeDataList.push(res);
|
})
|
}
|
})
|
})
|
},
|
// 提交打开模态框
|
checkSubmit() {
|
this.$refs.uForm.validate().then((res) => {
|
this.showModal = true;
|
})
|
},
|
// 确认提交出库信息
|
submitExitStoreInfo: throttle(function() {
|
console.log('出库完成', this.ruleForm);
|
const params = Object.assign({}, this.ruleForm);
|
params.pipeIds = this.pipeDataList.map(item => item.pipeId);
|
delete params.reciverName;
|
delete params.carBrand;
|
this.$api.exit.submitPipeOutStore(params).then((res) => {
|
if(res.success) {
|
this.showModal = false;
|
uni.$u.toast('出库成功！');
|
uni.navigateBack();
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}, 3000),
|
changeTime(number) {
|
if(number === 1) {
|
this.$set(this.ruleForm, 'strTime', '');
|
} else {
|
this.$set(this.ruleForm, 'endTime', '');
|
}
|
this.timeType = number;
|
this.showPickerTime = true;
|
},
|
// 选择收货人信息
|
changeReciverName() {
|
this.$set(this.ruleForm, 'inUserId', '');
|
this.$set(this.ruleForm, 'reciverName', '');
|
this.$set(this.ruleForm, 'reciverUnit', '');
|
this.showPickerConsignee = true;
|
},
|
// 选择车辆信息
|
changeCarBrand() {
|
this.$set(this.ruleForm, 'carId', '');
|
this.$set(this.ruleForm, 'carBrand', '');
|
this.showPickerCar = true;
|
},
|
// 选择GPS设备信息
|
changeGpsDevice() {
|
this.$set(this.ruleForm, 'gdId', '');
|
this.$set(this.ruleForm, 'gdName', '');
|
this.showGps = true;
|
},
|
// 选择项目信息
|
changeProject() {
|
this.$set(this.ruleForm, 'proId', '');
|
this.$set(this.ruleForm, 'proName', '');
|
this.showProject = true;
|
},
|
// 确认选择日期时间
|
confirmPickerTime({ value }) {
|
if(this.timeType === 1) {
|
this.$set(this.ruleForm, 'strTime', changeTime(value));
|
} else {
|
this.$set(this.ruleForm, 'endTime', changeTime(value));
|
}
|
this.showPickerTime = false;
|
},
|
// 确认选择gps设备
|
confirmGpsDevice({ value }) {
|
this.$set(this.ruleForm, 'gdId', value[0].gdId);
|
this.$set(this.ruleForm, 'gdName', value[0].gdName);
|
this.showGps = false;
|
},
|
// 确认选择项目
|
confirmProject({ value }) {
|
this.$set(this.ruleForm, 'proId', value[0].proId);
|
this.$set(this.ruleForm, 'proName', value[0].proName);
|
this.showProject = false;
|
},
|
// 确认选择收货人信息
|
confirmPickerConsignee({ value }) {
|
this.$set(this.ruleForm, 'inUserId', value[0].id);
|
this.$set(this.ruleForm, 'reciverName', value[0].reciverName);
|
this.$set(this.ruleForm, 'reciverUnit', value[0].reciverUnit);
|
this.showPickerConsignee = false;
|
},
|
// 确认选择车辆信息
|
confirmPickerCar({ value }) {
|
console.log(value,'--');
|
this.$set(this.ruleForm, 'carId', value[0].carId);
|
this.$set(this.ruleForm, 'carBrand', value[0].carBrand);
|
this.getGpsDeviceLists(value[0].carId);
|
this.$api.exit.getCarInfo({
|
carId: value[0].carId
|
}).then((res) => {
|
this.carData = res.data;
|
})
|
this.showPickerCar = false;
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.scan_index {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
background: #F6F6F6;
|
|
.scan_header {
|
height: 14%;
|
background: #1976FF;
|
border-radius: 0 0 30% 30%;
|
}
|
|
.scan_content {
|
position: absolute;
|
top: 4%;
|
left: 50%;
|
transform: translateX(-50%);
|
padding: 0 10px;
|
width: calc(100% - 30px);
|
// height: 95%;
|
background: #FFFFFF;
|
|
.scan_content_button {
|
padding: 10px 0;
|
}
|
|
.scan_content_scroll {
|
height: 48%;
|
}
|
|
.scan_content_change {
|
padding: 10px 0;
|
}
|
}
|
|
.scroll_item {
|
padding: 10px 15px;
|
margin: 10px 0;
|
background: #F6F9FE;
|
border-top: 3px solid #1976FF;
|
border-radius: 4px;
|
|
|
&:first-child {
|
margin-top: 0;
|
}
|
|
.scroll_item_title {
|
position: relative;
|
padding: 0 10px;
|
color: #1976FF;
|
font-size: 18px;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 60%;
|
background: #1976FF;
|
}
|
}
|
|
.scroll_item_content {
|
margin-top: 10px;
|
|
.item_content_info {
|
display: flex;
|
align-items: center;
|
padding: 2px 0;
|
|
.label {
|
color: #AFB0B1;
|
}
|
}
|
}
|
}
|
|
.scroll_items {
|
border-top: 0;
|
}
|
}
|
</style>
|
