巡检点上传图片修正
This commit is contained in:
Zy
@@ -1,75 +1,78 @@
|
||||
<template>
|
||||
<view class="page_container inspection_main_box">
|
||||
<view class="info_box">
|
||||
<view class="title_box flex items-center justify-between">
|
||||
<view class="title flex items-center">
|
||||
<view class="line"> </view>
|
||||
<text>{{ info.taskName }}</text>
|
||||
<view class="page_padding">
|
||||
<view class="flex-1 flex-col flex inspection_main_box">
|
||||
<view class="info_box">
|
||||
<view class="title_box flex items-center justify-between">
|
||||
<view class="title flex items-center">
|
||||
<view class="line"> </view>
|
||||
<text>{{ info.taskName }}</text>
|
||||
</view>
|
||||
<view class="inspection_status" v-if="info.status === 0"> <text>已巡检</text> </view>
|
||||
<view class="inspection_status todo" v-else>
|
||||
<text>未巡检</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inspection_status" v-if="info.status === 0"> <text>已巡检</text> </view>
|
||||
<view class="inspection_status todo" v-else>
|
||||
<text>未巡检</text>
|
||||
<view class="info">
|
||||
<view class="item">
|
||||
<text>巡检项目：</text>
|
||||
<text>{{ info.items.join('； ') }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检时间：</text>
|
||||
<text>{{ info.time }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检小区：</text>
|
||||
<text>{{ info.villageName }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检路线：</text>
|
||||
<text>{{ info.planName }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检点：</text>
|
||||
<text>{{ info.point.join('; ') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="item">
|
||||
<text>巡检项目：</text>
|
||||
<text>{{ info.items.join('； ') }}</text>
|
||||
<view class="result_box">
|
||||
<view class="inspecton_result_title">
|
||||
<text>巡检结果</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检时间：</text>
|
||||
<text>{{ info.time }}</text>
|
||||
<view class="inspection_body" v-for="(item, index) in result" :key="index">
|
||||
<view class="inspection_items">
|
||||
<text class="label">巡检点：</text>
|
||||
<text>{{ item.pointName }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<text class="label">巡检人：</text>
|
||||
<text>{{ item.user }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<text class="label">手机号码：</text>
|
||||
<text>{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<text class="label">巡检时间：</text>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<view class="label">巡检结果：</view>
|
||||
<view class="desction_value">{{ item.descrtion }}</view>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<view class="label">巡检照片：</view>
|
||||
<image
|
||||
lazy-load
|
||||
class="inspection_photo"
|
||||
v-for="(ite, ind) in item.photos"
|
||||
:key="ind"
|
||||
:src="ite"
|
||||
mode="scaleToFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="linedash" v-show="index + 1 !== result.length"> </view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检小区：</text>
|
||||
<text>{{ info.villageName }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检路线：</text>
|
||||
<text>{{ info.planName }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text>巡检点：</text>
|
||||
<text>{{ info.point.join('; ') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="result_box">
|
||||
<view class="inspecton_result_title">
|
||||
<text>巡检结果</text>
|
||||
</view>
|
||||
<view class="inspection_body" v-for="(item, index) in result" :key="index">
|
||||
<view class="inspection_items">
|
||||
<text class="label">巡检点：</text>
|
||||
<text>{{ item.pointName }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<text class="label">巡检人：</text>
|
||||
<text>{{ item.user }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<text class="label">手机号码：</text>
|
||||
<text>{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<text class="label">巡检时间：</text>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<view class="label">巡检结果：</view>
|
||||
<view class="desction_value">{{ item.descrtion }}</view>
|
||||
</view>
|
||||
<view class="inspection_items">
|
||||
<view class="label">巡检照片：</view>
|
||||
<image
|
||||
class="inspection_photo"
|
||||
v-for="(ite, ind) in item.photos"
|
||||
:key="index"
|
||||
:src="ite"
|
||||
mode="scaleToFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="linedash" v-show="index + 1 !== result.length"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -131,8 +134,16 @@ const result = ref([
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inspection_main_box {
|
||||
.page_padding {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.inspection_main_box {
|
||||
padding: 20rpx 40rpx;
|
||||
background: #f9f9f9;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info_box {
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
@@ -181,6 +192,10 @@ const result = ref([
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.inspecton_result_title {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
|
||||
@@ -1,43 +1,55 @@
|
||||
<template>
|
||||
<view class="page_container inspection_record_box">
|
||||
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
||||
<view class="record_body">
|
||||
<!-- v-for -->
|
||||
<view class="record_item" v-for="(item, index) in list" :key="index">
|
||||
<view class="time">
|
||||
<view>{{ item.day }}</view>
|
||||
</view>
|
||||
<view class="record_list_box">
|
||||
<!-- v-for -->
|
||||
<view class="record_list_item" v-for="(ite, ind) in item.list" :key="ind">
|
||||
<view class="title flex items-center">
|
||||
<view class="title_name"> {{ ite.title }} </view>
|
||||
<view class="title_status" v-if="ite.status === 0"> 已巡检 </view>
|
||||
<view class="title_status noinspection" v-else> 未巡检 </view>
|
||||
</view>
|
||||
<view class="items">
|
||||
<!-- v-for -->
|
||||
<view class="item" v-for="(it, inde) in ite.items" :key="inde">
|
||||
<text>{{ it }}</text>
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="page_padding">
|
||||
<view class="inspection_record_box flex-1 flex flex-col">
|
||||
<navBar @clickLeft="navBack" title="巡检记录"></navBar>
|
||||
|
||||
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
||||
<scroll-view
|
||||
class="record_body record-list"
|
||||
scroll-y
|
||||
lower-threshold="60"
|
||||
@scrolltolower="scrolltolower"
|
||||
>
|
||||
<!-- v-for -->
|
||||
<view class="record_item" v-for="(item, index) in list" :key="index">
|
||||
<view class="time">
|
||||
<view>{{ item.day }}</view>
|
||||
</view>
|
||||
<view class="record_list_box">
|
||||
<!-- v-for -->
|
||||
<view class="record_list_item" v-for="(ite, ind) in item.list" :key="ind">
|
||||
<view class="title flex items-center">
|
||||
<view class="title_name"> {{ ite.title }} </view>
|
||||
<view class="title_status" v-if="ite.status === 0"> 已巡检 </view>
|
||||
<view class="title_status noinspection" v-else> 未巡检 </view>
|
||||
</view>
|
||||
<view class="items">
|
||||
<!-- v-for -->
|
||||
<view class="item" v-for="(it, inde) in ite.items" :key="inde">
|
||||
<text>{{ it }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">
|
||||
<text>巡检时间：</text>
|
||||
<text>{{ ite.time }}</text>
|
||||
</view>
|
||||
<view class="time user">
|
||||
<text>巡检人：</text>
|
||||
<text>{{ ite.user }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">
|
||||
<text>巡检时间：</text>
|
||||
<text>{{ ite.time }}</text>
|
||||
</view>
|
||||
<view class="time user">
|
||||
<text>巡检人：</text>
|
||||
<text>{{ ite.user }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||||
import navBar from '@/components/navbar/navbar.vue'
|
||||
import { ref } from 'vue'
|
||||
const tabslist = [
|
||||
{
|
||||
name: '全部',
|
||||
@@ -52,13 +64,11 @@ const tabslist = [
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
function handleChangeTabs(val: number) {
|
||||
console.log('选择了：', val)
|
||||
}
|
||||
function handleChangeTabs(val: number) {}
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
const list = [
|
||||
const list = ref([
|
||||
{
|
||||
day: '10月11日',
|
||||
list: [
|
||||
@@ -77,87 +87,99 @@ const list = [
|
||||
user: '湖色'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
day: '10月12日',
|
||||
list: [
|
||||
{
|
||||
title: '标题2',
|
||||
status: 1,
|
||||
items: ['防火设施检查'],
|
||||
time: '09:00:00-12:00:00',
|
||||
user: '郧西'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
day: '10月12日',
|
||||
list: [
|
||||
{
|
||||
title: '标题2',
|
||||
status: 1,
|
||||
items: ['防火设施检查'],
|
||||
time: '09:00:00-12:00:00',
|
||||
user: '郧西'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
day: '10月12日',
|
||||
list: [
|
||||
{
|
||||
title: '标题2',
|
||||
status: 1,
|
||||
items: ['防火设施检查'],
|
||||
time: '09:00:00-12:00:00',
|
||||
user: '郧西'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
day: '10月12日',
|
||||
list: [
|
||||
{
|
||||
title: '标题2',
|
||||
status: 1,
|
||||
items: ['防火设施检查'],
|
||||
time: '09:00:00-12:00:00',
|
||||
user: '郧西'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
day: '10月12日',
|
||||
list: [
|
||||
{
|
||||
title: '标题2',
|
||||
status: 1,
|
||||
items: ['防火设施检查'],
|
||||
time: '09:00:00-12:00:00',
|
||||
user: '郧西'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
day: '10月12日',
|
||||
list: [
|
||||
{
|
||||
title: '标题2',
|
||||
status: 1,
|
||||
items: ['防火设施检查'],
|
||||
time: '09:00:00-12:00:00',
|
||||
user: '郧西'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const queryParmas = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 5
|
||||
})
|
||||
const isLoading = ref(false) // 加载锁
|
||||
const hasMore = ref(true) // 是否还有更多数据
|
||||
const total = ref(21)
|
||||
function scrolltolower() {
|
||||
// 必须加这两个判断！
|
||||
if (isLoading.value || !hasMore.value) {
|
||||
return
|
||||
}
|
||||
queryParmas.value.pageNum += 1
|
||||
getlist()
|
||||
}
|
||||
function getlist() {
|
||||
// 1. 如果正在加载或没有更多数据，直接返回
|
||||
if (isLoading.value || !hasMore.value) return
|
||||
// 2. 开启锁
|
||||
isLoading.value = true
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
const { pageNum, pageSize } = queryParmas.value
|
||||
|
||||
const startId = (pageNum - 1) * pageSize + 1
|
||||
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||||
const realId = startId + index // ✅ 修复 ID 错误
|
||||
|
||||
// ✅ 随机生成 0、1、2
|
||||
const randomStatus = Math.floor(Math.random() * 2)
|
||||
return {
|
||||
day: '10月' + realId + '日',
|
||||
list: [
|
||||
{
|
||||
title: '标题1',
|
||||
status: randomStatus,
|
||||
items: ['设备巡检'],
|
||||
time: '07:00:00-09:00:00',
|
||||
user: '李兴'
|
||||
},
|
||||
{
|
||||
title: '标题3',
|
||||
status: randomStatus,
|
||||
items: ['设备巡检'],
|
||||
time: '07:00:00-09:00:00',
|
||||
user: '湖色'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 追加数据（正确方式）
|
||||
list.value = [...list.value, ...arr]
|
||||
// 判断是否还有更多
|
||||
hasMore.value = list.value.length < total.value
|
||||
isLoading.value = false
|
||||
uni.hideLoading()
|
||||
}
|
||||
getlist()
|
||||
function resetList() {
|
||||
list.value = []
|
||||
queryParmas.value.pageNum = 1
|
||||
hasMore.value = true
|
||||
getlist()
|
||||
}
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
// 返回上一页
|
||||
const navBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inspection_record_box {
|
||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||||
padding: 20rpx 40rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.record_body {
|
||||
margin-top: 20rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
.record_item {
|
||||
& > .time {
|
||||
width: 168rpx;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,46 +1,40 @@
|
||||
<template>
|
||||
<view class="today_inspection_page">
|
||||
<!-- tabs -->
|
||||
<view class="tabs_box">
|
||||
<view
|
||||
v-for="(item, index) in tabslist"
|
||||
:key="index"
|
||||
@tap="handleTabs(item)"
|
||||
class="tabs_items"
|
||||
:class="{
|
||||
active: item.value === activeValue
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- tabs -->
|
||||
<view class="page_padding">
|
||||
<view class="today_inspection_page flex flex-col">
|
||||
<!-- 状态筛选标签 -->
|
||||
<TabsComponents :tabslist="tabslist" @update="handleTabs"></TabsComponents>
|
||||
|
||||
<!-- body -->
|
||||
<view class="inspection_body">
|
||||
<view class="inspection_items" v-for="(item, index) in list" :key="index">
|
||||
<view class="title">
|
||||
<text class="subtitle">
|
||||
<i></i>
|
||||
{{ item.address }}
|
||||
</text>
|
||||
<text class="noactions" v-if="item.status === 0">未巡检</text>
|
||||
<text class="noactions alaway_actions" v-else>已巡检</text>
|
||||
</view>
|
||||
<view class="inspection_item_box">
|
||||
<text class="inspection_item" v-for="(ite, index) in item.item" :key="index">
|
||||
{{ ite }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="inspection_time">
|
||||
<text>巡检时间：</text>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="inspection_time">
|
||||
<text>巡检人：</text>
|
||||
<text>{{ item.user }}</text>
|
||||
<view class="actions" v-if="item.status === 0" @tap="gotoInspection">
|
||||
<text>去巡检</text>
|
||||
<!-- body -->
|
||||
<view class="inspection_body flex-1">
|
||||
<view
|
||||
class="inspection_items"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@tap="gotoInspection(item)"
|
||||
>
|
||||
<view class="title">
|
||||
<text class="subtitle">
|
||||
<i></i>
|
||||
{{ item.address }}
|
||||
</text>
|
||||
<text class="noactions" v-if="item.status === 0">未巡检</text>
|
||||
<text class="noactions alaway_actions" v-else>已巡检</text>
|
||||
</view>
|
||||
<view class="inspection_item_box flex">
|
||||
<text class="inspection_item" v-for="(ite, index) in item.item" :key="index">
|
||||
{{ ite }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="inspection_time">
|
||||
<text>巡检时间：</text>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="inspection_time">
|
||||
<text>巡检人：</text>
|
||||
<text>{{ item.user }}</text>
|
||||
<view class="actions" v-if="item.status === 0">
|
||||
<text>去巡检</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -51,6 +45,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||||
// tabs =========================================================
|
||||
const activeValue = ref(0)
|
||||
const tabslist = ref([
|
||||
@@ -59,36 +54,69 @@ const tabslist = ref([
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
name: '未巡检',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '已派单',
|
||||
name: '已巡检',
|
||||
value: 2
|
||||
}
|
||||
])
|
||||
// 点击事件
|
||||
const handleTabs = (val: { name: string; value: number }) => {
|
||||
activeValue.value = val.value
|
||||
const handleTabs = (val: number) => {
|
||||
activeValue.value = val
|
||||
}
|
||||
// tabs =========================================================
|
||||
// body =========================================================
|
||||
/** 跳转到巡检上传页面 */
|
||||
const gotoInspection = () => {
|
||||
console.log('upload')
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/inspection/inspection_upload'
|
||||
})
|
||||
// 0未巡检 1已巡检
|
||||
const gotoInspection = row => {
|
||||
if (row.status === 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/inspection/inspection_upload'
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/inspection/inspection_main'
|
||||
})
|
||||
}
|
||||
}
|
||||
// body =========================================================
|
||||
const list = ref([
|
||||
{
|
||||
address: '幸福苑小区- B1层地下车库',
|
||||
time: '07:00:00 -09:00:00',
|
||||
item: ['防火设施安全巡检'],
|
||||
item: [
|
||||
'防火设施安全巡检',
|
||||
'防火设施安全巡检',
|
||||
'防火设施安全巡检',
|
||||
'防火设施安全巡检',
|
||||
'防火设施安全巡检'
|
||||
],
|
||||
user: '李相龙',
|
||||
status: 0 // 0未巡检 1已巡检
|
||||
},
|
||||
{
|
||||
address: '幸福苑小区- B2层地下车库',
|
||||
time: '13:00:00 -15:00:00',
|
||||
item: ['设备巡检'],
|
||||
user: '李相龙',
|
||||
status: 1 // 0未巡检 1已巡检
|
||||
},
|
||||
{
|
||||
address: '幸福苑小区- B2层地下车库',
|
||||
time: '13:00:00 -15:00:00',
|
||||
item: ['设备巡检'],
|
||||
user: '李相龙',
|
||||
status: 1 // 0未巡检 1已巡检
|
||||
},
|
||||
{
|
||||
address: '幸福苑小区- B2层地下车库',
|
||||
time: '13:00:00 -15:00:00',
|
||||
item: ['设备巡检'],
|
||||
user: '李相龙',
|
||||
status: 1 // 0未巡检 1已巡检
|
||||
},
|
||||
{
|
||||
address: '幸福苑小区- B2层地下车库',
|
||||
time: '13:00:00 -15:00:00',
|
||||
@@ -101,11 +129,16 @@ const list = ref([
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 页面容器 */
|
||||
.page_padding {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.today_inspection_page {
|
||||
padding: 20rpx 40rpx 40rpx;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
|
||||
background: #f9f9f9;
|
||||
padding: 20rpx 40rpx;
|
||||
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
// tabs
|
||||
.tabs_box {
|
||||
@@ -151,9 +184,8 @@ const list = ref([
|
||||
.inspection_items {
|
||||
margin-top: 20rpx;
|
||||
padding: 40rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
|
||||
background-color: #ffffff;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -195,17 +227,20 @@ const list = ref([
|
||||
.inspection_item_box {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.inspection_item {
|
||||
border: 1px solid #4d5dfa;
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
||||
border: 2rpx solid #4d5dfa;
|
||||
|
||||
font-size: 28rpx;
|
||||
color: #4d5dfa;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user