<template>
|
<div>
|
<el-form
|
ref="editPram"
|
:rules="rules"
|
label-position="right"
|
:model="tableFrom"
|
label-width="80px"
|
inline=""
|
>
|
<el-form-item prop="idCard" label="身份证号">
|
<el-autocomplete
|
v-model="tableFrom.idCard"
|
:fetch-suggestions="querySearch"
|
placeholder="请输入身份证号"
|
class="selWidth"
|
size="small"
|
:trigger-on-focus="false"
|
@blur="handleQueryLast"
|
@select="handleSelectIdCard"
|
>
|
</el-autocomplete>
|
<!-- <el-input
|
v-model="tableFrom.idCard"
|
placeholder="请输入身份证号"
|
class="selWidth"
|
size="small"
|
clearable
|
|
@blur="handleFindLastInfo"
|
>
|
</el-input> -->
|
</el-form-item>
|
<el-form-item prop="name" label="姓名">
|
<el-input
|
v-model="tableFrom.name"
|
placeholder="请输入姓名"
|
class="selWidth"
|
size="small"
|
clearable
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="phone" label="手机号">
|
<el-input
|
v-model="tableFrom.phone"
|
placeholder="请输入手机号"
|
class="selWidth"
|
size="small"
|
clearable
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="licensePlate" label="车牌号">
|
<el-input
|
v-model="tableFrom.licensePlate"
|
placeholder="请输入车牌号"
|
class="selWidth"
|
size="small"
|
clearable
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="loadingAreaCodes" label="装卸区域">
|
<el-select
|
v-model="tableFrom.loadingAreaCodes"
|
clearable
|
:multiple="this.isCreate === 1 ? false : true"
|
placeholder="请选择"
|
:disabled="this.isCreate === 1 ? true : false"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in areaOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="orderTypeCode" label="订单类型">
|
<el-select
|
v-model="tableFrom.orderTypeCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in orderTypeOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="loadUnloadQty" label="装卸数量">
|
<el-input-number v-model="tableFrom.loadUnloadQty"></el-input-number>
|
</el-form-item>
|
<el-form-item prop="unitCode" label="单位">
|
<el-select
|
v-model="tableFrom.unitCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in unitOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item prop="goodsStatusCode" label="货物状态">
|
<el-select
|
v-model="tableFrom.goodsStatusCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in goodsStatusOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="事由">
|
<el-select
|
v-model="tableFrom.reasonCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in originOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="remark" label="备注">
|
<el-input
|
v-model="tableFrom.remark"
|
placeholder="请输入备注"
|
class="selWidth"
|
size="small"
|
clearable
|
>
|
</el-input>
|
</el-form-item>
|
<el-row>
|
<el-form-item>
|
<el-checkbox v-model="tableFrom.sendSms">发送叫号短信</el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox v-model="tableFrom.printPass">打印出入证</el-checkbox>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
|
<div class="form-item-right">
|
<el-button @click="close">取消</el-button>
|
<el-button
|
type="primary"
|
:loading="loadingBtn"
|
@click="handlerSubmit('editPram')"
|
v-hasPermi="['admin:category:update']"
|
>确定</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<!--创建和编辑公用一个组件-->
|
<script>
|
import {
|
addVehicleApi,
|
editVehicleApi,
|
getMasterIdApi,
|
getVehicleByIdCardApi,
|
} from "@/api/vehicle";
|
export default {
|
name: "edit",
|
props: {
|
prent: {
|
type: Object,
|
required: true,
|
},
|
isCreate: {
|
type: Number,
|
default: 0,
|
},
|
editData: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
loadingBtn: false,
|
restaurants: [],
|
tableFrom: {
|
id: "",
|
idCard: "", //身份证号
|
licensePlate: "", //车牌号
|
loadUnloadQty: "", //装卸数量
|
loadingAreaCodes: [], //装货区域编码
|
name: "", //姓名
|
orderTypeCode: "", //订单类型编码
|
phone: "", //手机号
|
goodsStatusCode: "", //货物状态编码
|
printPass: true, //是否打印出入证，0否1是
|
reasonCode: "", //事由编码
|
sendSms: true, //是否发送叫号短信，0否1是
|
unitCode: "", //单位编码
|
remark: "", //备注
|
},
|
rules: {
|
idCard: [
|
{
|
required: true,
|
message: "请输入身份证号",
|
trigger: ["blur", "change"],
|
},
|
{
|
pattern:
|
/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))((0[1-9])|([1-2][0-9])|30|31)\d{3}(\d|X)$/i,
|
message: "请输入正确的身份证号",
|
trigger: "blur",
|
},
|
],
|
licensePlate: [
|
{
|
required: true,
|
message: "请输入车牌号",
|
trigger: ["blur", "change"],
|
},
|
],
|
name: [
|
{
|
required: true,
|
message: "请输入姓名",
|
trigger: ["blur", "change"],
|
},
|
],
|
phone: [
|
{
|
required: true,
|
message: "请输入手机号",
|
trigger: ["blur", "change"],
|
},
|
{
|
pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
|
message: "请输入正确的手机号",
|
trigger: "blur",
|
},
|
],
|
loadingAreaCodes: [
|
{
|
required: true,
|
message: "请选择装卸区域",
|
trigger: ["blur", "change"],
|
},
|
],
|
orderTypeCode: [
|
{
|
required: true,
|
message: "请选择订单类型",
|
trigger: ["blur", "change"],
|
},
|
],
|
licensePlate: [
|
{
|
required: true,
|
message: "请输入车牌号",
|
trigger: ["blur", "change"],
|
},
|
],
|
loadUnloadQty: [
|
{
|
required: true,
|
message: "请输入装卸数量",
|
trigger: ["blur", "change"],
|
},
|
],
|
unitCode: [
|
{
|
required: true,
|
message: "请选择单位",
|
trigger: ["blur", "change"],
|
},
|
],
|
goodsStatusCode: [
|
{
|
required: true,
|
message: "请选择货物状态",
|
trigger: ["blur", "change"],
|
},
|
],
|
},
|
areaOptions: [],
|
orderTypeOptions: [],
|
unitOptions: [],
|
vehicleStatusOptions: [],
|
goodsStatusOptions: [],
|
originOptions: [],
|
};
|
},
|
mounted() {
|
this.initEditData();
|
if (JSON.parse(localStorage.getItem("idCards"))) {
|
this.restaurants = JSON.parse(localStorage.getItem("idCards"));
|
}
|
},
|
methods: {
|
close() {
|
this.$emit("hideEditDialog");
|
},
|
initEditData() {
|
const { area, orderType, unit, vehicleStatus, goodsStauts, origin } =
|
this.editData;
|
const {
|
id,
|
idCard,
|
name,
|
phone,
|
licensePlate,
|
loadingAreaCode,
|
loadingAreaCodes,
|
orderTypeCode,
|
loadUnloadQty,
|
unitCode,
|
goodsStatusCode,
|
reasonCode,
|
sendSms,
|
remark,
|
printPass,
|
} = this.prent;
|
|
this.areaOptions = area.filter((item) => {
|
return item.name != "全部";
|
});
|
this.orderTypeOptions = orderType.filter((item) => {
|
return item.name != "全部";
|
});
|
this.unitOptions = unit.filter((item) => {
|
return item.name != "全部";
|
});
|
this.vehicleStatusOptions = vehicleStatus.filter((item) => {
|
return item.name != "全部";
|
});
|
this.goodsStatusOptions = goodsStauts.filter((item) => {
|
return item.name != "全部";
|
});
|
this.originOptions = origin.filter((item) => {
|
return item.name != "全部";
|
});
|
|
if (this.isCreate === 1) {
|
this.tableFrom = {
|
id: id,
|
idCard: idCard, //身份证号
|
licensePlate: licensePlate, //车牌号
|
loadUnloadQty: loadUnloadQty, //装卸数量
|
loadingAreaCodes: loadingAreaCode, //装货区域编码
|
name: name, //姓名
|
orderTypeCode: orderTypeCode, //订单类型编码
|
phone: phone, //手机号
|
goodsStatusCode: goodsStatusCode, //货物状态编码
|
printPass: printPass, //是否打印出入证，0否1是
|
reasonCode: reasonCode, //事由编码
|
sendSms: sendSms, //是否发送叫号短信，0否1是
|
unitCode: unitCode, //单位编码
|
remark: remark,
|
};
|
} else {
|
this.tableFrom.loadingAreaCodes = [];
|
}
|
},
|
handleQueryLast() {
|
setTimeout(() => {
|
this.handleFindLastInfo();
|
}, 200);
|
},
|
handleFindLastInfo() {
|
let that = this;
|
if (this.isCreate === 0 && this.tableFrom.idCard) {
|
//创建时
|
getVehicleByIdCardApi({ card: this.tableFrom.idCard })
|
.then((res) => {
|
if (res) {
|
that.restaurants.push({ value: that.tableFrom.idCard });
|
let newArr = that.removeDuplicates(that.restaurants);
|
let json = JSON.stringify(newArr);
|
localStorage.setItem("idCards", json);
|
|
const {
|
idCard,
|
name,
|
phone,
|
licensePlate,
|
loadingAreaCode,
|
loadingAreaCodes,
|
orderTypeCode,
|
loadUnloadQty,
|
unitCode,
|
goodsStatusCode,
|
reasonCode,
|
sendSms,
|
printPass,
|
remark,
|
} = res;
|
let areaIds = loadingAreaCodes;
|
console.log("========", areaIds);
|
if (areaIds == [] || areaIds == undefined) {
|
if (loadingAreaCode) {
|
areaIds = [loadingAreaCode];
|
}
|
}
|
let obj = {
|
goodsStatusCode: goodsStatusCode,
|
idCard: idCard,
|
licensePlate: licensePlate,
|
loadUnloadQty: loadUnloadQty,
|
name: name,
|
orderTypeCode: orderTypeCode,
|
phone: phone,
|
printPass: printPass,
|
reasonCode: reasonCode,
|
sendSms: sendSms,
|
unitCode: unitCode,
|
loadingAreaCodes: areaIds,
|
remark: remark,
|
};
|
console.log("=======+++++=", obj);
|
|
that.tableFrom = obj;
|
}
|
})
|
.catch(() => {});
|
}
|
},
|
removeDuplicates(arr) {
|
return arr.filter((item, index, self) => {
|
return (
|
self.findIndex(
|
(t) => t.value === item.value // 假设你的对象是通过id属性来区分的
|
) === index
|
);
|
});
|
},
|
handlerSubmit(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (!valid) return;
|
this.handlerAddOrUpdate(this.isCreate === 0);
|
});
|
},
|
async handlerAddOrUpdate(isSave) {
|
if (isSave) {
|
//添加
|
this.loadingBtn = true;
|
//判断相同厂区 添加masterId
|
//根据厂区 id转name 然后根据name分组
|
|
let names = this.areaOptions.filter((item) => {
|
return this.tableFrom.loadingAreaCodes.includes(item.id);
|
});
|
|
const groupArr = Object.values(
|
names.reduce((acc, item) => {
|
const key = item.name.split("区")[0];
|
if (!acc[key]) {
|
acc[key] = [];
|
}
|
acc[key].push(item);
|
return acc;
|
}, {})
|
);
|
|
let paramArr = [];
|
for (let i = 0; i < groupArr.length; i++) {
|
const resData = await getMasterIdApi();
|
console.log(resData);
|
for (let j = 0; j < groupArr[i].length; j++) {
|
const element = groupArr[i][j];
|
let obj = {
|
...this.tableFrom,
|
masterId: resData,
|
isPrint: j == 0 ? true : false,
|
loadingAreaCode: element.id,
|
};
|
delete obj.loadingAreaCodes;
|
|
paramArr.push(obj);
|
}
|
}
|
addVehicleApi({ addEbVehicleInfoList: paramArr })
|
.then((res) => {
|
console.log("resresresres", res);
|
this.$emit("addVehicleSucces", res);
|
this.$message.success("添加车辆信息成功");
|
this.loadingBtn = false;
|
})
|
.catch(() => {
|
this.loadingBtn = false;
|
});
|
} else {
|
//编辑
|
this.loadingBtn = true;
|
let param = JSON.parse(JSON.stringify(this.tableFrom));
|
param.loadingAreaCode = param.loadingAreaCodes;
|
delete param.loadingAreaCodes;
|
editVehicleApi(param)
|
.then((res) => {
|
this.$emit("addVehicleSucces", res);
|
this.$message.success("编辑车辆信息成功");
|
this.loadingBtn = false;
|
})
|
.catch(() => {
|
this.loadingBtn = false;
|
});
|
}
|
},
|
handleSelectIdCard(item) {
|
console.log(item);
|
this.tableFrom.idCard = item.value;
|
},
|
|
idFormatName(ids) {
|
const names = ids.map((id) => {
|
return this.areaOptions.find((item) => {
|
return item.id == id;
|
});
|
});
|
return names;
|
},
|
|
querySearch(queryString, cb) {
|
if (this.restaurants && this.restaurants.length > 0) {
|
const results = this.restaurants.filter((item) => {
|
if (
|
item.value &&
|
item.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1
|
) {
|
return true;
|
}
|
return false;
|
});
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
} else {
|
cb([]);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.el-form--inline .el-form-item {
|
width: 49%;
|
margin-right: 0px;
|
}
|
::v-deep .el-form--inline .el-form-item__content {
|
width: calc(100% - 80px);
|
}
|
|
.selWidth {
|
width: 100%;
|
}
|
.smallSelW {
|
width: calc((100% - 24px) / 2);
|
}
|
.form-item-right {
|
display: flex;
|
justify-content: flex-end; /* 使内容靠右 */
|
}
|
</style>
|
