zhouyanli/property-manager-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

巡检点上传图片修正

Browse Source
This commit is contained in:
Zy
2026-05-09 17:10:50 +08:00
parent e29e1c1346
commit b29e03ab4d
29 changed files with 2836 additions and 1189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
wuye-manager-uniapp/pageSubPack/inspection/inspection_upload.vue
View File

@@ -1,76 +1,119 @@
<template>
<view class="inspection_upload_box page_container">
<view class="inspection_info_box">
<view class="inspection_title flex flex-between">
<view class="title flex">
<text class="line"></text>
<text>幸福苑小区- B1层地下车库</text>
<view class="page_padding">
<view class="inspection_upload_box flex flex-col">
<view class="inspection_info_box">
<view class="inspection_title flex flex-between">
<view class="title flex">
<text class="line"></text>
<text>幸福苑小区- B1层地下车库</text>
</view>
<view class="status">
<text>未巡检</text>
</view>
</view>
<view class="status">
<text>未巡检</text>
<view class="inspection_item_info_box">
<view class="inspection_item">
<text>巡检项目：</text>
<text>设备巡检</text>
</view>
<view class="inspection_item">
<text>巡检时间：</text>
<text>07:00:00 - 09:00:00</text>
</view>
<view class="inspection_item">
<text>巡检小区：</text>
<text>幸福苑小区</text>
</view>
<view class="inspection_item">
<text>巡检路线：</text>
<text>常规巡检路线1</text>
</view>
<view class="inspection_item">
<text>巡检点：</text>
<text>安全巡检点1；</text>
<text>安全巡检点2；</text>
<text>安全巡检点3；</text>
<text>安全巡检点4；</text>
</view>
</view>
</view>
<view class="inspection_item_info_box">
<view class="inspection_item">
<text>巡检项目：</text>
<text>设备巡检</text>
</view>
<view class="inspection_item">
<text>巡检时间：</text>
<text>07:00:00 - 09:00:00</text>
</view>
<view class="inspection_item">
<text>巡检小区：</text>
<text>幸福苑小区</text>
</view>
<view class="inspection_item">
<text>巡检路线：</text>
<text>常规巡检路线1</text>
</view>
<view class="inspection_item">
<text>巡检点：</text>
<text>安全巡检点1；</text>
<text>安全巡检点2；</text>
<text>安全巡检点3；</text>
<text>安全巡检点4；</text>
</view>
</view>
</view>
<view class="inspection_info_upload_box">
<view class="header"> <text>巡检结果</text> </view>
<view class="info_body" :key="index" v-for="(item, index) in baseFormData">
<view class="info_title" style="margin-bottom: 20rpx"> {{ item.name }} </view>
<uni-forms :modelValue="item" :rules="rules" label-position="left" label-width="150rpx">
<uni-forms-item label="巡检状态" required>
<uni-data-checkbox v-model="item.status" :localdata="statuslist" />
</uni-forms-item>
<uni-forms-item label="巡检描述">
<uni-easyinput
type="textarea"
:input-border="true"
v-model="item.desition"
placeholder="请输入"
></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="巡检时间">
<uni-datetime-picker
type="datetime"
return-type="timestamp"
v-model="item.datetimesingle"
/>
</uni-forms-item>
<uni-forms-item label="巡检照片">
<uni-file-picker v-model="item.files" file-mediatype="image">
<view class="filePicker flex-center">
<uni-icons color="#a6a6a6" type="plusempty" size="25"> </uni-icons>
<view class="inspection_info_upload_box">
<view class="header"> <text>巡检结果</text> </view>
<view class="info_body" :key="index" v-for="(item, index) in baseFormData">
<view class="info_title" style="margin-bottom: 20rpx"> {{ item.name }} </view>
<uni-forms :modelValue="item" :rules="rules" label-position="left" label-width="150">
<uni-forms-item label="巡检状态" required>
<uni-data-checkbox
:disabled="item.complated"
v-model="item.status"
:localdata="statuslist"
/>
</uni-forms-item>
<uni-forms-item label="巡检描述">
<uni-easyinput
type="textarea"
:disabled="item.complated"
:input-border="true"
v-model="item.desition"
placeholder="请输入"
></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="巡检时间">
<uni-datetime-picker
type="datetime"
:disabled="item.complated"
return-type="timestamp"
v-model="item.datetimesingle"
/>
</uni-forms-item>
<!-- <uni-forms-item label="巡检照片">
<uni-file-picker
@delete="deleteFile"
@select="select"
mode="grid"
v-model="item.files"
:auto-upload="false"
:sourceType="['camera']"
file-mediatype="image"
>
<view class="filePicker flex-center">
<uni-icons color="#a6a6a6" type="plusempty" size="25"> </uni-icons>
</view>
</uni-file-picker>
</uni-forms-item> -->
<view class="items_picker_box">
<view class="label"> 巡检照片 </view>
<view class="filePickerbox" v-if="!item.complated">
<filePicker
v-model="item.files"
:sourceType="['camera']"
file-field-name="file"
:extra-data="uploadParams"
@success="onUploadSuccess"
@fail="onUploadFail"
></filePicker>
</view>
</uni-file-picker>
</uni-forms-item>
</uni-forms>
<view class="line" v-if="index + 1 !== baseFormData.length"> </view>
</view>
<view class="submitbox">
<text>提交</text>
<view class="filePickerbox showimagegrid" v-else>
<image
class="img"
mode="scaleToFill"
v-for="(ite, ind) in item.files"
lazy-load
:key="ind"
:src="ite"
@tap="previewImages(item.files, index)"
></image>
</view>
</view>
</uni-forms>
<view class="submitbox" @tap="handleSubmit(item.id)">
<text>提交</text>
</view>
<view class="line" v-if="index + 1 !== baseFormData.length"> </view>
</view>
<!-- <view class="submitbox">
<text>提交</text>
</view> -->
</view>
</view>
</view>
@@ -78,6 +121,7 @@
<script setup>
import { ref } from 'vue'
import filePicker from '@/components/filePicker/filePicker.vue'
const statuslist = [
{
@@ -97,14 +141,16 @@ const info = ref({
id: index + ''
}
let obj = {
id: obj1.id,
id: index,
name: obj1.name,
desition: '', // 描述
datetimesingle: '', // 时间
status: 0, // 状态
status: 0, // 状态 0正常1异常
files: [], // 图片
complated: false, // 巡检点完成检查
fileUrls: '' // 图片
}
baseFormData.value.push(obj)
return obj1
})
@@ -119,15 +165,68 @@ const rules = {
]
}
}
// ----------------------------------------------
const uploadParams = ref({
type: 'repair', // 上传类型：报修
businessId: '123456', // 关联业务ID
userId: '789' // 用户ID
})
// 选择文件
function onUploadSuccess(e) {
console.log('上传成功', e)
}
function onUploadFail(e) {
console.log('上传失败', e)
}
function submit() {
console.log('最终要提交的图片URL', imageList.value)
// 这里调用你的提交接口
}
/** 提交巡检点 检查情况 */
function handleSubmit(id) {
console.log(typeof id, id, baseFormData.value)
const find = baseFormData.value.find(item => item.id === id)
if (find) {
find.complated = true
}
}
/**
* 预览图片
* @param {Array} images - 所有图片的URL数组
* @param {Number} currentIndex - 当前点击的图片索引
*/
function previewImages(images, currentIndex) {
uni.previewImage({
urls: [
'https://picsum.photos/80',
'https://picsum.photos/80',
'https://picsum.photos/80',
'https://picsum.photos/80'
],
current: currentIndex
})
}
</script>
<style scoped lang="scss">
.inspection_upload_box {
background: #f9f9f9;
padding: 20rpx 40rpx;
position: relative;
flex: 1;
overflow: hidden;
box-sizing: border-box;
.inspection_info_box {
background-color: #ffffff;
padding: 20rpx 40rpx;
margin-bottom: 20rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border-radius: 16rpx;
.inspection_title {
margin-bottom: 20rpx;
.title {
@@ -153,6 +252,7 @@ const rules = {
}
.inspection_item_info_box {
width: 100%;
.inspection_item {
margin-bottom: 20rpx;
font-weight: 400;
@@ -163,10 +263,13 @@ const rules = {
}
}
.inspection_info_upload_box {
border-radius: 16rpx 16rpx 16rpx 16rpx;
border-radius: 16rpx;
background-color: #fff;
padding: 30rpx 40rpx;
min-height: 500rpx;
flex: 1;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
.header {
font-weight: 500;
font-size: 32rpx;
@@ -184,10 +287,27 @@ const rules = {
width: 100%;
border: 1rpx dashed #ccc;
}
.filePicker {
width: 160rpx;
height: 160rpx;
background: #f3f3f3;
.items_picker_box {
.label {
text-align: left;
font-size: 14px;
color: #606266;
height: 36px;
padding: 0 12px 0 0;
vertical-align: middle;
box-sizing: border-box;
}
.showimagegrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
width: 100%;
.img {
width: 160rpx;
height: 160rpx;
}
}
}
}
.submitbox {