<template>
|
<el-dialog v-dialogDrag ref="uploadRef" :visible.sync="currentDialogVisible" :title="title" class="import-dialog-container" width="980px" @close="dialogClose">
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
<el-row>
|
<!-- -->
|
<el-col :span="8">
|
<el-form-item label="提货车牌号" prop="truckNo">
|
<el-select v-model="form.vehicle_Id" placeholder="请选择" @change="onVehicleChange">
|
<el-option v-for="item in vehicleTruckNoList" :key="item.vehicle_Id" :label="item.truckNo" :value="item.vehicle_Id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="承运商">
|
<el-input v-model="form.carrierName" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="司机姓名" prop="driverName">
|
<el-select v-model="form.driver_Id" placeholder="请选择" @change="onDriverChange">
|
<el-option v-for="item in driverNameList" :key="item.driver_Id" :label="item.driverName" :value="item.driver_Id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<!-- -->
|
<el-col :span="8">
|
<el-form-item label="车辆类型">
|
<el-input v-model="form.vehicleType" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="司机电话">
|
<el-input v-model="form.tel" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计件数">
|
<el-input v-model="form.totalQuantity" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
<!-- -->
|
<el-col :span="8">
|
<el-form-item label="合计重量">
|
<el-input v-model="form.totalWeight" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计数量">
|
<el-input v-model="form.totalNumber" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计体积(方)">
|
<el-input v-model="form.totalVolume" :disabled="true" class="w-200"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="showPay()">取 消</el-button>
|
<el-button type="primary" @click="save('form')">生成提货单</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
export default {
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
label: {
|
type: String,
|
default: null
|
},
|
config: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
// 导入前事件
|
beforeImportSubmit: {
|
type: Function,
|
default: () => {
|
return () => {};
|
}
|
}
|
},
|
data() {
|
return {
|
// 表单非空验证
|
rules: {
|
truckNo: [{ required: true, message: "请选择车牌号", trigger: "blur" }],
|
driverName: [{ required: true, message: "请选择司机", trigger: "blur" }]
|
},
|
value: null,
|
driverNameList: [],
|
vehicleTruckNoList: [],
|
form: {
|
vehicle_Id: null,
|
truckNo: null,
|
carrierName: null,
|
driver_Id: null,
|
driverName: null,
|
vehicleType: null,
|
tel: null,
|
totalQuantity: null,
|
totalWeight: null,
|
totalNumber: null,
|
totalVolume: null
|
}
|
};
|
},
|
computed: {
|
// 标题
|
title: function() {
|
return this.config.title || "批量导入操作";
|
},
|
// 显示窗口
|
currentDialogVisible: {
|
get: function() {
|
return this.visible;
|
},
|
set: function(val) {
|
this.$emit("update:visible", val);
|
}
|
}
|
},
|
mounted() {
|
this.uploadKey = this.common.getGUID();
|
},
|
methods: {
|
// 接收父组件返回来的司机信息 driver
|
driver(driverDataList) {
|
this.driverNameList = driverDataList;
|
},
|
// 司机改变事件
|
onDriverChange(value) {
|
this.driverNameList.forEach(item => {
|
if (item.driver_Id === value) {
|
// 司机电话
|
this.form.tel = item.tel;
|
// 司机名称
|
this.form.driverName = item.driverName;
|
}
|
});
|
},
|
// 接收父组件返回来的车辆信息 vehicle
|
vehicle(vehicleDataList) {
|
this.vehicleTruckNoList = vehicleDataList;
|
},
|
onVehicleChange(value) {
|
this.vehicleTruckNoList.forEach(item => {
|
if (item.vehicle_Id === value) {
|
// 承运商
|
this.form.carrierName = item.carrier;
|
// 车辆类型
|
this.form.vehicleType = item.vehicleType;
|
// 车牌号
|
this.form.truckNo = item.truckNo;
|
}
|
});
|
},
|
// 合并到表单中
|
childTotal(item) {
|
this.form.totalQuantity = item.totalQuantity;
|
this.form.totalNumber = item.totalNumber;
|
this.form.totalWeight = item.totalWeight;
|
this.form.totalVolume = item.totalVolume;
|
},
|
// 清空表单
|
clear(form) {
|
this.form = {
|
truckNo: null,
|
carrierName: null,
|
driverName: null,
|
vehicleType: null,
|
tel: null,
|
totalQuantity: null,
|
totalWeight: null,
|
totalNumber: null,
|
totalVolume: null
|
};
|
},
|
// 保存数据
|
save(form) {
|
// 表单验证
|
this.$refs[form].validate(valid => {
|
if (valid) {
|
this.$emit("generate-bills", this.form);
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
showPay() {
|
this.form = {
|
truckNo: null,
|
carrierName: null,
|
driverName: null,
|
vehicleType: null,
|
tel: null,
|
totalQuantity: null,
|
totalWeight: null,
|
totalNumber: null,
|
totalVolume: null
|
};
|
this.currentDialogVisible = false;
|
},
|
// 关闭窗口
|
dialogClose() {
|
this.$emit("on-close"); // 关闭事件
|
this.form = {
|
truckNo: null,
|
carrierName: null,
|
driverName: null,
|
vehicleType: null,
|
tel: null,
|
totalQuantity: null,
|
totalWeight: null,
|
totalNumber: null,
|
totalVolume: null
|
};
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.import-dialog-container {
|
/deep/ .el-upload-list {
|
margin-right: 20px;
|
}
|
/deep/ .scrollbar-wrap {
|
max-height: 400px;
|
overflow-x: hidden;
|
padding: 0px;
|
padding-bottom: 30px !important;
|
padding-top: 0px !important;
|
}
|
.msg-container {
|
margin: 0;
|
padding: 0;
|
.msg-item {
|
margin: 0;
|
padding: 5px 0;
|
word-wrap: break-word;
|
}
|
}
|
.body-content {
|
margin-top: 20px;
|
}
|
}
|
</style>
|
