96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="detail-page">
|
|||
|
|
<uni-section class="mb-10" title="打卡详情" type="line"></uni-section>
|
|||
|
|
|
|||
|
|
<uni-card isShadow>
|
|||
|
|
<view class="detail-row">
|
|||
|
|
<text class="label">巡检点：</text>
|
|||
|
|
<text class="value">{{ detail.inspectionPoint || '-' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-row">
|
|||
|
|
<text class="label">巡检人：</text>
|
|||
|
|
<text class="value">{{ detail.inspectorUser || detail.inspectorName || '-' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-row">
|
|||
|
|
<text class="label">打卡时间：</text>
|
|||
|
|
<text class="value">{{ formatDate(detail.inspectionTime) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-row" v-if="detail.remark">
|
|||
|
|
<text class="label">备注：</text>
|
|||
|
|
<text class="value">{{ detail.remark }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="images.length" class="img-group">
|
|||
|
|
<image v-for="(img, idx) in images" :key="idx" :src="imageUrl(img)" mode="aspectFill" class="img" @click="previewImage(idx)" />
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getRecord } from '@/api/inspection/record.js'
|
|||
|
|
import config from '@/config'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
id: null,
|
|||
|
|
detail: {},
|
|||
|
|
images: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(query) {
|
|||
|
|
this.id = query.id
|
|||
|
|
this.fetchDetail()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async fetchDetail() {
|
|||
|
|
if (!this.id) {
|
|||
|
|
uni.showToast({ title: '缺少记录ID', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const res = await getRecord(this.id)
|
|||
|
|
this.detail = (res && res.data) ? res.data : {}
|
|||
|
|
this.images = this.resolveImages(this.detail.inspectionImg || this.detail.clockInImg || this.detail.signImg)
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('fetch record detail error', e)
|
|||
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resolveImages(imgs) {
|
|||
|
|
if (!imgs) return []
|
|||
|
|
if (Array.isArray(imgs)) return imgs
|
|||
|
|
if (typeof imgs === 'string') return imgs.split(',').filter(Boolean)
|
|||
|
|
return []
|
|||
|
|
},
|
|||
|
|
imageUrl(path) {
|
|||
|
|
if (!path) return ''
|
|||
|
|
if (/^https?:\/\//.test(path)) return path
|
|||
|
|
return `${config.baseUrl}${path.startsWith('/') ? path : '/' + path}`
|
|||
|
|
},
|
|||
|
|
previewImage(index = 0) {
|
|||
|
|
if (!this.images.length) return
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: index,
|
|||
|
|
urls: this.images.map(this.imageUrl)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
formatDate(dateStr) {
|
|||
|
|
if (!dateStr) return '-'
|
|||
|
|
const d = new Date(dateStr)
|
|||
|
|
if (isNaN(d.getTime())) return dateStr
|
|||
|
|
const pad = n => (n < 10 ? ('0' + n) : n)
|
|||
|
|
return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.detail-page { padding: 10px; }
|
|||
|
|
.detail-row { display: flex; margin-bottom: 8px; }
|
|||
|
|
.label { color: #666; width: 80px; }
|
|||
|
|
.value { color: #333; }
|
|||
|
|
.img-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
|
|||
|
|
.img { width: 100px; height: 100px; border-radius: 6px; background: #f5f5f5; }
|
|||
|
|
</style>
|