liyuanchao
c7ff9a5234
Some checks failed
Uniapp 自动化打包 CI/CD / 打包 Uniapp 项目 (push) Has been cancelled
452 lines
9.3 KiB
Vue
452 lines
9.3 KiB
Vue
<template>
|
|
<view class="inspection-opt-container">
|
|
<view class="inspection-opt-lable"> 巡检人
|
|
<view class="inspection-opt-round" />
|
|
<text class="text">{{info.planInspectionPerson}}</text>
|
|
</view>
|
|
<view class="inspection-opt-lable"> 巡检位置
|
|
<text class="required">*</text>
|
|
</view>
|
|
<view class="inspection-opt-row">
|
|
<text class="text2">{{info.inspectionLocation}}</text>
|
|
</view>
|
|
<view class="inspection-opt-lable"> 巡检结果
|
|
<text class="required">*</text>
|
|
<view :class="info.inspectionResults == 1?'inspection-opt-round4':'inspection-opt-round2'"/>
|
|
<text class="text">正常</text>
|
|
<view :class="info.inspectionResults != 1?'inspection-opt-round3':'inspection-opt-round2'" />
|
|
<text class="text"> 异常</text>
|
|
</view>
|
|
<view class="inspection-opt-lable"> 巡检描述
|
|
<text class="required">*</text>
|
|
</view>
|
|
<text class="input" >{{ info.remark }}</text>
|
|
|
|
<!-- 上传照片 -->
|
|
<view class="page">
|
|
<!-- 已选图片预览 -->
|
|
<view class="preview-item">
|
|
<image :src="selectedImage" mode="aspectFill" @click="previewImage"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
info: {
|
|
inspectionResults: 1 // 默认选中"正常"
|
|
},
|
|
selectedImage: '',
|
|
isSign: false,
|
|
showDialog: false // 控制弹窗显示
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.item) {
|
|
try {
|
|
// 首先尝试解析原始字符串（可能未编码）
|
|
const item = JSON.parse(options.item);
|
|
this.info = item;
|
|
} catch (e) {
|
|
// 如果直接解析失败，再尝试解码后解析
|
|
try {
|
|
const item = JSON.parse(decodeURIComponent(options.item));
|
|
this.info = item;
|
|
} catch (e2) {
|
|
this.info = options.item;
|
|
}
|
|
}
|
|
this.isSign = this.info.actualSignState == 1
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
|
|
// 预览图片
|
|
previewImage() {
|
|
uni.previewImage({
|
|
current: this.selectedImage,
|
|
urls: [this.selectedImage]
|
|
})
|
|
},
|
|
|
|
// 切换巡检结果状态
|
|
toggleInspectionResult(result) {
|
|
// 使用$set确保响应式更新
|
|
this.$set(this.info, 'inspectionResults', result);
|
|
},
|
|
beforeSubmit() {
|
|
if (this.info.inspectionResults == 1) {
|
|
// 直接提交
|
|
this.submit();
|
|
} else {
|
|
// 弹窗显示，生成工单提交
|
|
this.showDialog = true;
|
|
}
|
|
},
|
|
closeDialog() {
|
|
this.showDialog = false;
|
|
},
|
|
confirmDialog() {
|
|
this.showDialog = false;
|
|
// 生成工单提交
|
|
this.submit();
|
|
},
|
|
|
|
async taskSignIn() {
|
|
|
|
uni.scanCode({
|
|
success: async (scanRes) => {
|
|
// 使用扫码结果调用接口
|
|
let params = {
|
|
taskId: this.info.id,
|
|
qrCode: scanRes.result // 将扫码结果作为参数传递
|
|
};
|
|
if (scanRes.result == this.info.pointId) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
this.info.signType = 3
|
|
let res = await this.$u.api.taskSignIn(this.info);
|
|
|
|
// 隐藏loading
|
|
uni.hideLoading();
|
|
|
|
if (res.code == 200) {
|
|
this.isSign = true
|
|
uni.showToast({
|
|
title: '签到成功',
|
|
icon: 'none'
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '签到失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: '当前签到巡检点不是目标点',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
fail: (error) => {
|
|
// 扫码失败处理
|
|
uni.showToast({
|
|
title: '扫码失败，请重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
async submit() {
|
|
// 显示loading
|
|
uni.showLoading({
|
|
title: '提交中...'
|
|
});
|
|
|
|
if (!this.selectedImage) {
|
|
this.realSubmit()
|
|
return
|
|
}
|
|
const images = [];
|
|
images.push(this.selectedImage?.path?.replace('file://', '') || this.selectedImage);
|
|
if (images.length === 0) {
|
|
this.realSubmit();
|
|
return;
|
|
}
|
|
|
|
const result = await uploadFiles({
|
|
files: images,
|
|
url: this.vuex_config.baseUrl + '/resource/oss/upload',
|
|
name: 'file',
|
|
vm: this // 关键：用于注入 token 等
|
|
});
|
|
const allSuccess = result.every(item => item.code == 200);
|
|
if (!allSuccess) {
|
|
uni.showToast({
|
|
title: '上传失败',
|
|
icon: 'none'
|
|
});
|
|
// 隐藏loading
|
|
uni.hideLoading();
|
|
return;
|
|
}
|
|
|
|
// 遍历result获取data.url加上,分割
|
|
const urls = result.map(item => item.data?.url || '').filter(url => url !== '');
|
|
this.info.inspectionImage = urls.join(',');
|
|
this.realSubmit()
|
|
|
|
},
|
|
|
|
async realSubmit() {
|
|
let res = await this.$u.api.taskSubmit(this.info);
|
|
if (res.code == '200') {
|
|
// 关闭页面前发送事件通知前页面刷新
|
|
uni.$emit('refreshData', '');
|
|
// 返回上一页
|
|
uni.navigateBack();
|
|
}
|
|
// 隐藏loading
|
|
uni.hideLoading();
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.inspection-opt-container {
|
|
height: 100vh;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.inspection-opt-lable {
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
font-weight: 600;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-left: 40rpx;
|
|
margin-top: 45rpx;
|
|
}
|
|
|
|
.inspection-opt-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-left: 40rpx;
|
|
margin-right: 40rpx;
|
|
margin-top: 34rpx;
|
|
}
|
|
|
|
.required {
|
|
color: #DC9100;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #000000;
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.text2 {
|
|
height: 73rpx;
|
|
flex: 1;
|
|
background: #F7F7F7;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.text3 {
|
|
width: 88rpx;
|
|
height: 73rpx;
|
|
background: #296AEF;
|
|
border-radius: 10rpx;
|
|
color: #F7F7F7;
|
|
text-align: center;
|
|
margin-left: 18rpx;
|
|
line-height: 73rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.input {
|
|
height: 200rpx;
|
|
width: auto;
|
|
margin-left: 40rpx;
|
|
margin-right: 40rpx;
|
|
margin-top: 40rpx;
|
|
background: #F7F7F7;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.image {
|
|
width: 55rpx;
|
|
height: 42rpx;
|
|
}
|
|
|
|
.inspection-opt-round {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 17rpx;
|
|
background: #3370FF;
|
|
margin-left: 35rpx;
|
|
}
|
|
|
|
.inspection-opt-round2 {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 17rpx;
|
|
background: #fff;
|
|
margin-left: 24rpx;
|
|
border: 1rpx solid #3370FF;
|
|
}
|
|
|
|
.inspection-opt-round3 {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 17rpx;
|
|
background: #F27A0F;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.inspection-opt-round4 {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 17rpx;
|
|
background: #3370FF;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.custom-upload-btn {
|
|
width: auto;
|
|
margin-left: 40rpx;
|
|
margin-right: 40rpx;
|
|
margin-top: 24rpx;
|
|
height: 244rpx;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.preview-item {
|
|
position: relative;
|
|
width: auto;
|
|
/* 宽度自动 */
|
|
margin-left: 40rpx;
|
|
margin-right: 40rpx;
|
|
height: 244rpx;
|
|
margin-top: 24rpx;
|
|
/* 固定高度 */
|
|
display: flex;
|
|
justify-content: center;
|
|
/* 水平居中 */
|
|
align-items: center;
|
|
/* 垂直居中 */
|
|
overflow: hidden;
|
|
/* 裁剪超出部分 */
|
|
border-radius: 10rpx;
|
|
/* 可选：圆角 */
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* 隐藏自带按钮 */
|
|
::v-deep .u-upload__wrap__add {
|
|
display: none !important;
|
|
}
|
|
|
|
.inspection-opt-submit-btn {
|
|
width: 60vw;
|
|
height: 73rpx;
|
|
background: linear-gradient(90deg, #005DE9 0%, #4B9BFF 100%);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
border: none;
|
|
border-radius: 40rpx;
|
|
margin: 100rpx auto 0 auto;
|
|
display: block;
|
|
font-weight: bold;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
/* 弹窗遮罩 */
|
|
.custom-dialog {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* 弹窗背景图 */
|
|
.dialog-bg {
|
|
position: absolute;
|
|
width: 656rpx;
|
|
height: 560rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
/* 弹窗内容覆盖在图片上 */
|
|
.dialog-content {
|
|
position: relative;
|
|
width: 80vw;
|
|
margin-top: 220rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 42rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.dialog-desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
|
|
.dialog-btns {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.btn-cancel,
|
|
.btn-confirm {
|
|
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.btn-cancel {
|
|
color: #333;
|
|
}
|
|
|
|
.btn-confirm {
|
|
color: #FF6B00;
|
|
}
|
|
</style> |