代码提交-3-13
This commit is contained in:
319
pages/work/sidebar/filingDetail/index.vue
Normal file
319
pages/work/sidebar/filingDetail/index.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-section title="隐患申报详情" type="line" class="mb-10" />
|
||||
|
||||
<view v-if="detail.id" class="detail-content">
|
||||
<!-- 基本信息卡片 -->
|
||||
<uni-card title="基本信息" :is-shadow="true" class="info-card">
|
||||
<view class="info-grid">
|
||||
<view class="info-row">
|
||||
<text class="info-label">申报类型：</text>
|
||||
<text class="info-value">{{ detail.declarationLabel || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">申报人：</text>
|
||||
<text class="info-value">{{ detail.applyUser || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">申报时间：</text>
|
||||
<text class="info-value">{{ formatDate(detail.occurTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- 申报内容卡片 -->
|
||||
<uni-card title="申报内容" :is-shadow="true" class="content-card">
|
||||
<view class="content-text">
|
||||
{{ detail.requirementDescription || '暂无内容' }}
|
||||
</view>
|
||||
<view v-if="detail.remark" class="remark-section">
|
||||
<text class="remark-label">备注：</text>
|
||||
<text class="remark-text">{{ detail.remark }}</text>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- 图片展示卡片 -->
|
||||
<uni-card title="相关图片" :is-shadow="true" class="image-card" v-if="imageArray(detail.declarationImg).length > 0">
|
||||
<view class="image-grid">
|
||||
<view v-for="(img, idx) in imageArray(detail.declarationImg)" :key="idx" class="image-item">
|
||||
<image :src="imageUrl(img)" mode="aspectFill" class="detail-image" @click="previewImage(img, detail.declarationImg)" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- 无图片提示 -->
|
||||
<uni-card title="相关图片" :is-shadow="true" class="image-card" v-else>
|
||||
<view class="no-image-tip">
|
||||
<uni-icons type="image" size="40" color="#ccc"></uni-icons>
|
||||
<text class="no-image-text">暂无相关图片</text>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons" v-if="detail.status === '0' || detail.status === 0">
|
||||
<button class="edit-btn" size="default" type="primary" @click="editDeclaration">编辑申报</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-else-if="loading" class="loading-state">
|
||||
<uni-load-more status="loading" />
|
||||
</view>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<view v-else class="error-state">
|
||||
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
|
||||
<text class="error-text">数据加载失败或记录不存在</text>
|
||||
<button size="mini" type="default" @click="goBack">返回列表</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSafetyDeclaration } from '@/api/sidebar/sidebar.js'
|
||||
import { listData } from '@/api/system/dict/data.js'
|
||||
import config from '@/config'
|
||||
|
||||
export default {
|
||||
name: "FilingDetail",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
detail: {},
|
||||
loading: false,
|
||||
typeDict: []
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.id = options?.id || null
|
||||
if (this.id) {
|
||||
await this.initDict()
|
||||
await this.fetchDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initDict() {
|
||||
try {
|
||||
const typeData = await listData({ dictType: 'hs_declaration_type' })
|
||||
this.typeDict = typeData.rows || []
|
||||
} catch (e) {
|
||||
console.error('获取字典数据失败:', e)
|
||||
this.typeDict = []
|
||||
}
|
||||
},
|
||||
async fetchDetail() {
|
||||
if (!this.id) return
|
||||
try {
|
||||
this.loading = true
|
||||
const res = await getSafetyDeclaration(this.id)
|
||||
this.detail = res?.data || {}
|
||||
// 设置申报类型标签
|
||||
if (this.detail.declarationType) {
|
||||
const typeItem = this.typeDict.find(i => String(i.dictValue) === String(this.detail.declarationType))
|
||||
this.detail.declarationLabel = typeItem ? typeItem.dictLabel : this.detail.declarationType
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取详情失败:', e)
|
||||
uni.showToast({
|
||||
title: '获取详情失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
imageArray(declarationImg) {
|
||||
if (!declarationImg) return []
|
||||
if (typeof declarationImg === 'string') {
|
||||
return declarationImg.split(',').filter(Boolean)
|
||||
}
|
||||
return declarationImg.filter(Boolean)
|
||||
},
|
||||
imageUrl(path) {
|
||||
if (!path) return ''
|
||||
return config.baseUrl + path
|
||||
},
|
||||
previewImage(current, all) {
|
||||
const urls = this.imageArray(all).map(p => this.imageUrl(p))
|
||||
uni.previewImage({
|
||||
current: this.imageUrl(current),
|
||||
urls
|
||||
})
|
||||
},
|
||||
formatDate(val) {
|
||||
if (!val) return '-'
|
||||
try {
|
||||
const d = new Date(val)
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const dd = String(d.getDate()).padStart(2, '0')
|
||||
const hh = String(d.getHours()).padStart(2, '0')
|
||||
const mm = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${y}-${m}-${dd} ${hh}:${mm}`
|
||||
} catch (e) {
|
||||
return val
|
||||
}
|
||||
},
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
'0': '待处理',
|
||||
'1': '处理中',
|
||||
'2': '已完成',
|
||||
'3': '已关闭'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
},
|
||||
getStatusType(status) {
|
||||
const typeMap = {
|
||||
'0': 'error', // 待处理 - 红色
|
||||
'1': 'warning', // 处理中 - 橙色
|
||||
'2': 'success', // 已完成 - 绿色
|
||||
'3': 'info' // 已关闭 - 蓝色
|
||||
}
|
||||
return typeMap[status] || 'default'
|
||||
},
|
||||
editDeclaration() {
|
||||
if (!this.detail.id) return
|
||||
this.$tab.navigateTo(`/pages/work/sidebar/safetyDeclaratio/index?id=${this.detail.id}`)
|
||||
},
|
||||
goBack() {
|
||||
this.$tab.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 15px;
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
.info-card,
|
||||
.content-card,
|
||||
.image-card {
|
||||
margin-bottom: 15px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.remark-section {
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.remark-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.remark-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.image-item {
|
||||
.detail-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-image-tip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
|
||||
.no-image-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
|
||||
.edit-btn {
|
||||
width: 100%;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
|
||||
.error-text {
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user