Initial commit
This commit is contained in:
lnljyang
591
pages/standbyVehicle/detail.vue
Normal file
591
pages/standbyVehicle/detail.vue
Normal file
@@ -0,0 +1,591 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user