fix：组件处理<template>
<!-- 机房巡检操作 -->
<view>
<view v-for="(item, index) in itemData.detail" :key="index">
<view class="form-item">
<text class="form-label"
><text class="required">*</text>{{ item.settingLabel }}</text
><text>{{ item.setting }}</text>
</view>
<view class="form-item">
<text class="form-label"
><text class="required">*</text>{{ item.label }}</text
>
<view class="switch-container">
<view
:class="['status-btn', { active: item.inspectionResult === 0 }]"
@click="setInspectionResult(index, 0, item.lableArr[0])"
>
{{ item.lableArr[0] }}
</view>
<view
:class="['status-btn', { active: item.inspectionResult === 1 }]"
@click="setInspectionResult(index, 1, item.lableArr[1])"
>
{{ item.lableArr[1] }}
</view> </view
><input
v-if="'value' in item"
class="input"
v-model="item.value"
type="text"
placeholder="请输入"
maxlength="3"
/>{{ item.unit }}
</view>
<view v-if="'conclusion' in item" class="form-item">
<text class="form-label"><text class="required">*</text>情况摘要</text>
<text class="conclusion" @click="showPopup(index)">{{
item.conclusion || "请输入情况摘要"
}}</text>
</view>
<view class="form-item" v-if="'photos' in item">
<text class="form-label"><text class="required">*</text>现场照片</text>
<view class="photo-box">
<view class="photo-container">
<view @click="takePhoto(index)" class="photo-btn"> + </view>
<view
v-for="(photo, itemIndex) in item && item.photos"
:key="itemIndex"
class="photo-item"
>
<image :src="photo" class="photo"></image>
<text class="delete-photo" @click="deletePhoto(index, itemIndex)"
>×</text
>
</view>
</view>
<view class="photo-limit"
>请对检查项进行拍照留存（限5张）。发现“异常、告警”时，需拍照留存。</view
>
</view>
</view> </view
><custom-popup
ref="customPopup"
:inspectionItem="inspectionItem"
@confirm="handlePopupConfirm"
></custom-popup>
</view>
</template>
<script>
import customPopup from "./customPopup.vue";
import _ from "lodash";
export default {
components: {
customPopup,
},
props: {
// 父组件传递的巡检状态
status: {
type: Number,
default: 0,
},
// 父组件传递的巡检类型
jfType: {
type: Number,
default: 0,
},
// 父组件传递的巡检事项名
inspectionItem: {
type: String,
default: "",
},
// 父组件传递的数据
defaultData: {
type: Object,
default: {},
},
},
data() {
return {
currentIndex: 0, // 当前操作的索引
photos: [],
itemData: {
isValid: false, // false是校验未通过 true是校验通过
// status: 0, 0是未巡检 1是已巡检 2巡检异常 statusLabel: "未巡检",
inspectionItem: "", //巡检事项
detail: [
{
label: "实际电池电压",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "正常"],
conclusion: "",
settingLabel: "设定电池电压",
setting: "10V-15V", //设定温度值
value: "", //输入温度
unit: "V", //单位
photos: [],
},
{
label: "实际电池温度",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "正常"],
conclusion: "",
settingLabel: "设定电池温度",
setting: "15℃-30℃", //设定湿度值
value: "", //输入湿度
unit: "℃", //单位
photos: [],
},
{
label: "实际电池内阻",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "正常"],
conclusion: "",
settingLabel: "设定电池内阻",
setting: "<10mΩ", //设定湿度值
value: "", //输入湿度
unit: "mΩ", //单位
photos: [],
},
],
},
itemDataOther: {
isValid: false, // false是校验未通过 true是校验通过
// status: 0, 0是未巡检 1是已巡检 2巡检异常 statusLabel: "未巡检",
inspectionItem: "", //巡检事项
detail: [
{
label: "实际电池电压",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "正常"],
conclusion: "",
settingLabel: "设定电池电压",
setting: "2V-3V", //设定温度值
value: "", //输入温度
unit: "V", //单位
photos: [],
},
{
label: "实际电池温度",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "正常"],
conclusion: "",
settingLabel: "设定电池温度",
setting: "15℃-30℃", //设定湿度值
value: "", //输入湿度
unit: "℃", //单位
photos: [],
},
{
label: "实际电池内阻",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "正常"],
conclusion: "",
settingLabel: "设定电池内阻",
setting: "<0.5mΩ", //设定湿度值
value: "", //输入湿度
unit: "mΩ", //单位
photos: [],
},
],
},
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
mounted() {
console.log(console.log(45454854,this.jfType))
if (this.jfType === "2") {
this.itemData = this.itemDataOther;
}
console.log("itemData",this.itemData)
if (Object.keys(this.defaultData).length !== 0) {
this.itemData = this.defaultData;
}
},
methods: {
// 拍照
takePhoto(index) {
uni.chooseImage({
count: 1,
sourceType: ["camera"], // 可以从相机拍摄
success: async (res) => {
if (this.photos.length < 5) {
const base64 = await this.convertFileToBase64(res.tempFilePaths[0]);
this.itemData.detail[index].photos.push(base64);
} else {
uni.showToast({
title: "最多只能上传5张照片",
icon: "none",
});
}
},
});
},
// 转化为base64
convertFileToBase64(filePath) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
filePath,
function (entry) {
entry.file(
function (file) {
const reader = new plus.io.FileReader();
reader.onloadend = function (evt) {
const base64 = evt.target.result; // 获取 Base64 数据
resolve(base64); // 返回 Base64 数据
};
reader.readAsDataURL(file); // 读取文件并转换为 Base64
},
function (error) {
reject("获取文件对象失败：" + error.message);
}
);
},
function (error) {
reject("解析文件路径失败：" + error.message);
}
);
});
},
// 删除照片
deletePhoto(index, itemIndex) {
this.itemData.detail[index].photos.splice(itemIndex, 1);
},
// 设置巡检结论
setInspectionResult(index, value, label) {
this.itemData.detail[index].inspectionResult = value; // 0正常 1异常
this.itemData.detail[index].inspectionResultLable = label;
},
// 显示弹窗
showPopup(index) {
this.currentIndex = index;
this.$refs.customPopup.open();
},
// 处理弹窗确认
handlePopupConfirm(summary) {
this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
},
// 处理】数据
getFromData() {
console.log(111, this.itemData);
const isValid = this.areAllObjectsValid(this.itemData.detail, 2); //false不通过 true通过
// const isAllOne = this.areAllInspectionResultsOne(this.itemData.detail);
this.itemData.isValid = isValid;
this.itemData.inspectionItem = this.inspectionItem;
console.log(222, this.itemData);
// if (isAllOne) {
// // 全都是正常
// this.itemData.status = 1; //1表示已经巡检过没有异常
// this.itemData.statusLabel = "已巡检";
// } else {
// this.itemData.status = 2; //1表示已经巡检过有异常
// this.itemData.statusLabel = "巡检异常";
// }
// console.log(this.itemData);
return this.itemData;
},
// 数据校验方法 true说明有未填项
areAllObjectsValid(arr, skipIndex) {
// 遍历数组中的每个对象
for (let i = 0; i < arr.length; i++) {
const obj = arr[i];
// 如果当前索引大于等于 skipIndex，并且 inspectionResult 为 1，则跳过后续校验
if (i >= skipIndex && obj.inspectionResult === 1) {
break;
}
// 检查对象中的每个属性是否有值
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
// 如果属性值为空（null, undefined, 空字符串等），则校验不通过
if (
obj[key] === null ||
obj[key] === undefined ||
obj[key] === ""
) {
return false;
}
}
}
}
// 如果所有对象都通过校验，返回 true
return true;
},
// 校验是否有异常
areAllInspectionResultsOne(arr) {
return arr.every((obj) => obj.inspectionResult === 0);
},
},
};
</script>
<style scoped lang="less">
.form-item {
display: flex;
align-items: center;
padding: 9.6px 0;
line-height: 28.8px;
border-bottom: 0.8px solid #f2f3f5;
.form-label {
font-size: 11.2px;
margin-right: 25.6px;
width: 88px;
text-align: right;
color: #7c7c7c;
.required {
color: red;
margin-right: 3.2px;
}
}
.input {
width: 50px;
margin-left: 12px;
}
.fg {
margin: 0 12px;
}
.conclusion {
color: #c7c7c7;
font-size: 11.2px;
.have {
color: #000;
}
}
.label {
font-size: 11.2px;
}
.switch-container {
display: flex;
gap: 9.6px;
.status-btn {
flex: 1;
padding: 5.6px 19.2px;
font-size: 12.8px;
color: #000000;
background: #f2f2f2;
text-align: center;
font-weight: 400;
line-height: 17.6px;
border-radius: 14.4px;
&.active {
color: #ffffff;
background: #3774f6;
border: 0.32px solid rgba(224, 224, 224, 1);
}
}
}
.input-box {
flex: 1;
border-radius: 3.2px;
font-size: 12.8px;
line-height: 19.2px;
}
.photo-limit {
font-size: 12.8px;
color: #959595;
line-height: 19.2px;
font-weight: 400;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 6.4px;
.photo-item {
position: relative;
margin-right: 6.4px;
margin-bottom: 6.4px;
.photo {
width: 57.6px;
height: 57.6px;
border-radius: 3.2px;
margin-left: 9.6px;
}
.delete-photo {
position: absolute;
top: -6.4px;
right: -6.4px;
background-color: #ff4d4f;
color: #fff;
width: 12.8px;
height: 12.8px;
border-radius: 50%;
text-align: center;
line-height: 12.8px;
font-size: 9.6px;
}
}
}
.photo-btn {
background: #ffffff;
border: 0.272px solid rgba(221, 221, 221, 1);
border-radius: 1.64px;
width: 57.6px;
height: 57.6px;
font-size: 57.6px;
color: #cccccc;
text-align: center;
line-height: 51.2px;
}
}
</style>
正在显示
请
注册
或者
登录
后发表评论