592 lines
16 KiB
Vue
592 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header">基本信息</view>
|
||
<view class="item">
|
||
<view class="title">合同编号</view>
|
||
<u--input
|
||
border="surround"
|
||
v-model="datas.contract.contractNo"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">项目名称</view>
|
||
<u--input
|
||
border="surround"
|
||
v-model="datas.contract.projectName"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">客户名称</view>
|
||
<u--input
|
||
border="surround"
|
||
v-model="datas.contract.customerName"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">备车数量</view>
|
||
<u--input
|
||
border="surround"
|
||
v-model="datas.standbyVehicleQuantity"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">交车区域</view>
|
||
<u--input
|
||
border="surround"
|
||
v-model="datas.contract.deliveryAreaName"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">交车地点</view>
|
||
<u--input
|
||
border="surround"
|
||
v-model="datas.contract.handoverAddress"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">备注</view>
|
||
<u--textarea
|
||
border="surround"
|
||
v-model="datas.remark"
|
||
disabled
|
||
fontSize="26"
|
||
autoHeight
|
||
></u--textarea>
|
||
</view>
|
||
<view class="header" style="margin-top: 30rpx">车辆信息</view>
|
||
<view class="carList">
|
||
<u-checkbox-group v-model="checkoutIds" size="36" placement="column">
|
||
<view v-for="item in detailList" :key="item.id">
|
||
<view class="carItem" v-if="!item.isHidden">
|
||
<u-checkbox
|
||
:customStyle="{
|
||
marginBottom: '8px',
|
||
position: 'absolute',
|
||
top: '6px',
|
||
left: '10px',
|
||
}"
|
||
:disabled="item.standbyStatus !== 4"
|
||
:key="index"
|
||
:label="` `"
|
||
:name="item.id"
|
||
>
|
||
</u-checkbox>
|
||
<view class="innerItem">
|
||
<view class="title">品牌</view>
|
||
<u--input
|
||
border="surround"
|
||
:value="brands[item.brand - 1].dicName"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="innerItem">
|
||
<view class="title">车型</view>
|
||
<u--input
|
||
border="surround"
|
||
:value="getModelName(item.model)"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="innerItem">
|
||
<view class="title">车牌</view>
|
||
<u--input
|
||
border="surround"
|
||
:value="item.plateNumber"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<view class="innerItem">
|
||
<view class="title">约定交车日期</view>
|
||
<u--input
|
||
border="surround"
|
||
:value="formatDateTime(item.appointedDate)"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<!-- <view class="innerItem">
|
||
<view class="title">备车完成时间</view>
|
||
<u--input
|
||
border="surround"
|
||
:value="formatDateTime(item.standbyDate)"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view> -->
|
||
<view class="innerItem">
|
||
<view class="title">状态</view>
|
||
<u--input
|
||
border="surround"
|
||
:value="item.standbyStatusName || ''"
|
||
disabled
|
||
fontSize="26"
|
||
></u--input>
|
||
</view>
|
||
<button
|
||
class="detailBtn"
|
||
:class="{ disabled: item.disabled }"
|
||
@tap="saveCache"
|
||
:data-id="item.id"
|
||
:data-status="item.standbyStatus"
|
||
:disabled="item.disabled"
|
||
>
|
||
备车信息
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</u-checkbox-group>
|
||
</view>
|
||
|
||
<view class="btns">
|
||
<button class="cancel" @tap="navigateBack">取消</button>
|
||
<button
|
||
class="done"
|
||
:class="{ disabled: _disabled }"
|
||
:disabled="_disabled"
|
||
@tap="submitApprovalConfirm"
|
||
>
|
||
备车完成
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUser } from "@/utils/auth.js";
|
||
|
||
export default {
|
||
options: {
|
||
styleIsolation: "shared", // 解除样式隔离
|
||
},
|
||
data() {
|
||
return {
|
||
datas: {
|
||
contractNo: "合同编号",
|
||
projectName: "项目名称",
|
||
},
|
||
tempDetailList: [], // 临时车辆信息列表 (不包含是否禁用备车信息按钮 信息)
|
||
detailList: [], // 车辆信息列表
|
||
checkoutIds: [], // 检查单选中项
|
||
id: "1058472991198855168",
|
||
brands: [], // 车辆品牌字典列表
|
||
truckType: [], // 车辆型号字典列表
|
||
userInfo: {}, // 用户信息
|
||
cacheList: [], // 操作标识缓存信息
|
||
cacheKeys: [], // 所有车辆的id联结，用于获取操作标识缓存
|
||
cacheRequestTimer: 0, // 定时请求定时器
|
||
doneBtnDisabled: false, // 备车完成按钮是否禁用
|
||
isRead: false, // 页面是否处于阅读模式
|
||
};
|
||
},
|
||
computed: {
|
||
// 大部分组件的禁用直接用 disabled：查看模式或者已完成签署
|
||
_disabled() {
|
||
return this.isRead;
|
||
},
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.$api.standbyVehicle.getById({ id: this.id }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data;
|
||
// let detailList = res.data.detailList.map((item) => {
|
||
// return item;
|
||
// });
|
||
// res.data.detailList.filter(
|
||
// (item) => ![0, 6].includes(item.standbyStatus)
|
||
// ) || [];
|
||
this.tempDetailList =
|
||
res.data.detailList.map((item) => {
|
||
item.isStandby = false;
|
||
if ([0, 6].includes(item.standbyStatus)) {
|
||
item.isHidden = true; //过滤0未备车6已撤销 不能用filter，提交的时候要带上这些数据
|
||
} else {
|
||
item.isHidden = false;
|
||
}
|
||
return item;
|
||
}) || [];
|
||
const keys = this.tempDetailList.map((x) => x.id).join(",");
|
||
this.cacheKeys = keys;
|
||
this.getCache({ keys });
|
||
this.getOpManagerPhone();
|
||
}
|
||
});
|
||
},
|
||
goto(e) {
|
||
uni.navigateTo({ url: e.target.dataset.url });
|
||
},
|
||
getCache(params) {
|
||
this.$api.standbyVehicle.getCache(params).then((res) => {
|
||
if (res.code != 200) {
|
||
this.detailList = this.tempDetailList;
|
||
return;
|
||
}
|
||
|
||
for (let item of this.tempDetailList) {
|
||
item.disabled = false;
|
||
}
|
||
|
||
const cacheList = res.data;
|
||
for (let [key, value] of Object.entries(cacheList)) {
|
||
const targetIndex = this.tempDetailList.findIndex((x) => x.id == key);
|
||
// 备车车辆某记录正在被编辑，且被编辑的人员和当前用户手机号不同
|
||
// 则禁用备车信息按钮
|
||
if (targetIndex != -1 && value != this.userInfo.phone) {
|
||
this.tempDetailList[targetIndex].disabled = true;
|
||
}
|
||
}
|
||
|
||
this.detailList = [...this.tempDetailList];
|
||
});
|
||
},
|
||
saveCache(e) {
|
||
// 保存前，重新获取该id最新的操作标识缓存，查看是否已被别人占用
|
||
this.$api.standbyVehicle
|
||
.getCache({ keys: e.target.dataset.id })
|
||
.then((res) => {
|
||
console.log(`该id的缓存表示:\n`, res);
|
||
const _phone = res.data[e.target.dataset.id];
|
||
if (_phone && _phone != this.userInfo.phone) {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "已有其他运维人员在编辑此车辆",
|
||
duration: 2000,
|
||
});
|
||
this.getData();
|
||
return;
|
||
}
|
||
|
||
// 如果没有其他人正在编辑，则标识当前用户正在编辑此id
|
||
const id = e.target.dataset.id;
|
||
const phone = this.userInfo.phone;
|
||
console.log(this.isRead);
|
||
const isRead = this.isRead || e.target.dataset.status != 4;
|
||
console.log(`isRead:\n`, isRead);
|
||
this.$api.standbyVehicle
|
||
.saveCache({ key: id, value: phone })
|
||
.then((res) => {
|
||
console.log(res);
|
||
uni.navigateTo({
|
||
url: `/pages/standbyVehicle/detailInfo?id=${id}&mainId=${this.id}&isRead=${isRead}`,
|
||
});
|
||
});
|
||
});
|
||
},
|
||
navigateBack() {
|
||
uni.navigateBack();
|
||
},
|
||
formatDateTime(obj) {
|
||
if (obj == null) {
|
||
return "";
|
||
}
|
||
let date = new Date(obj);
|
||
let y = 1900 + date.getYear();
|
||
let m = "0" + (date.getMonth() + 1);
|
||
let d = "0" + date.getDate();
|
||
return (
|
||
y +
|
||
"-" +
|
||
m.substring(m.length - 2, m.length) +
|
||
"-" +
|
||
d.substring(d.length - 2, d.length)
|
||
);
|
||
},
|
||
getVehicleBrand() {
|
||
this.$api.standbyVehicle.getVehicleBrand().then((res) => {
|
||
this.brands = res;
|
||
});
|
||
},
|
||
getTruckType() {
|
||
this.$api.standbyVehicle.getTruckType().then((res) => {
|
||
this.truckType = res;
|
||
});
|
||
},
|
||
getOpManagerPhone() {
|
||
const regionCode = this.datas.contract.deliveryArea;
|
||
// 有些合同可能没有设置交车区域，因此无需做按钮权限校验
|
||
if (!regionCode) {
|
||
console.log(`该合同未设置交车区域，无法获取区域运维负责人`);
|
||
return;
|
||
}
|
||
|
||
// this.$api.standbyVehicle.getOpManagerPhone({ regionCode }).then((res) => {
|
||
// //2025.3.18修改，去掉控制
|
||
// // 如果当前区域运维负责人不是当前小程序用户 则禁用备车完成按钮
|
||
// // if (res != this.userInfo.phone) {
|
||
// // this.doneBtnDisabled = true;
|
||
// // } else {
|
||
// // this.doneBtnDisabled = false;
|
||
// // }
|
||
// console.log(res);
|
||
// });
|
||
},
|
||
submitApprovalConfirm() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确认备车完成?",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.submitApproval();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
alert(msg) {
|
||
uni.showToast({
|
||
title: msg,
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
},
|
||
// 备车完成
|
||
submitApproval() {
|
||
// 点击备车收再获取一下数据，确保页面即将要提交的的数据是最新的
|
||
if (this.checkoutIds.length === 0) {
|
||
uni.showToast({
|
||
title: "请先勾选车辆",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
console.log(this.checkoutIds);
|
||
let flag = false;
|
||
for (let item of this.datas.detailList.filter((item) =>
|
||
this.checkoutIds.includes(item.id)
|
||
)) {
|
||
if (item.plateNumber && this.datas.approvalStatus === 4) {
|
||
if (
|
||
item.hasAdvertisement == null ||
|
||
item.hasTailboard == null ||
|
||
item.isHang == null ||
|
||
item.operationExpectedDeliveryDate == null ||
|
||
item.standbyDate == null
|
||
) {
|
||
console.log(item);
|
||
this.alert("请完整填写车牌为:" + item.plateNumber + "的车辆信息");
|
||
flag = true;
|
||
return false;
|
||
}
|
||
}
|
||
if (item.isHang == 1 && !item.hangPlateNumber) {
|
||
this.alert("请输入车牌为:" + item.plateNumber + "的挂车车牌号");
|
||
flag = true;
|
||
return false;
|
||
}
|
||
if (
|
||
item.operationExpectedDeliveryDate > item.appointedDate &&
|
||
!item.remark &&
|
||
this.datas.approvalStatus === 4
|
||
) {
|
||
this.alert(
|
||
"请输入车牌为:" +
|
||
item.plateNumber +
|
||
"的约定交车日期和运维预计交车日期不一致的备注"
|
||
);
|
||
flag = true;
|
||
return false;
|
||
}
|
||
}
|
||
if (flag) {
|
||
return;
|
||
}
|
||
this.datas.detailList
|
||
.filter((item) => this.checkoutIds.includes(item.id))
|
||
.map((item) => {
|
||
item.submitStatus = 1;
|
||
return item;
|
||
});
|
||
this.datas.submitApproval = true; // 标识让流程继续往下走
|
||
this.$api.standbyVehicle.edit(this.datas).then((res) => {
|
||
console.log(`编辑接口返回:\n`, res);
|
||
if (res == this.datas.id) {
|
||
uni.showToast({
|
||
title: "备车成功",
|
||
icon: "success",
|
||
duration: 1500,
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
},
|
||
});
|
||
}
|
||
});
|
||
// this.$api.standbyVehicle.getById({ id: this.id }).then((res) => {
|
||
// if (res.code == 200) {
|
||
// this.datas = res.data;
|
||
// }
|
||
|
||
// });
|
||
},
|
||
getModelName(model) {
|
||
if (this.truckType.length == 0) {
|
||
return "";
|
||
}
|
||
|
||
return this.truckType.find((x) => x.dicCode == model)?.dicName ?? "";
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
if (options.id) {
|
||
this.id = options.id;
|
||
}
|
||
if (options.isRead) {
|
||
this.isRead = Number(options.isRead);
|
||
}
|
||
this.userInfo = getUser() || {};
|
||
console.log(`userInfo:\n`, this.userInfo);
|
||
this.getVehicleBrand();
|
||
this.getTruckType();
|
||
// this.getData();
|
||
|
||
this.cacheRequestTimer = setInterval(() => {
|
||
this.getCache({ keys: this.cacheKeys });
|
||
}, 5000);
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getData();
|
||
uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
|
||
},
|
||
onShow() {
|
||
this.getData();
|
||
if (this.cacheRequestTimer) {
|
||
clearInterval(this.cacheRequestTimer);
|
||
this.cacheRequestTimer = setInterval(() => {
|
||
this.getCache({ keys: this.cacheKeys });
|
||
}, 5000);
|
||
}
|
||
},
|
||
onHide() {
|
||
if (this.cacheRequestTimer) {
|
||
clearInterval(this.cacheRequestTimer);
|
||
}
|
||
},
|
||
destroyed() {
|
||
if (this.cacheRequestTimer) {
|
||
clearInterval(this.cacheRequestTimer);
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
background-color: #d7d7d7;
|
||
padding: 30rpx;
|
||
|
||
.item {
|
||
margin-top: 30rpx;
|
||
.title {
|
||
font-size: 26rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
|
||
.carList {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.carItem {
|
||
width: calc(100%);
|
||
background-color: white;
|
||
// height: 200rpx;
|
||
margin: 25rpx 0;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
|
||
.innerItem {
|
||
width: 220rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
.title {
|
||
text-align: center;
|
||
margin-bottom: 10rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.detailBtn {
|
||
height: 60rpx;
|
||
width: 200rpx;
|
||
background-color: #1e98d7;
|
||
color: white;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
padding: 17rpx 0;
|
||
margin: 0;
|
||
margin-top: 50rpx;
|
||
|
||
&.disabled {
|
||
background-color: #eee;
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-top: 20rpx;
|
||
|
||
button {
|
||
width: 200rpx;
|
||
height: 60rpx;
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
padding: 17rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.cancel {
|
||
background-color: white;
|
||
color: #7ba746;
|
||
border: 1rpx #7ba746 solid;
|
||
}
|
||
|
||
.done {
|
||
background-color: #7ba746;
|
||
color: white;
|
||
}
|
||
|
||
.disabled {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .u-textarea textarea {
|
||
font-size: 26rpx !important;
|
||
}
|
||
|
||
/deep/ .u-border {
|
||
border-width: 1rpx !important;
|
||
border-color: gray !important;
|
||
border-style: solid;
|
||
}
|
||
</style>
|