交办时间年月日，整改时回显整改人
This commit is contained in:
王利强
321
pages/checklist/detail.vue
Normal file
321
pages/checklist/detail.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- 基本信息 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">基本信息</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">检查表名称</text>
|
||||
<text class="info-value">{{ detail.name || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">分派单位</text>
|
||||
<text class="info-value">{{ detail.deptName || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">检查表类型</text>
|
||||
<text class="info-value">{{ typeLabel }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">模式</text>
|
||||
<text class="info-value">{{ runModeLabel }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">执行人员</text>
|
||||
<text class="info-value">{{ executorLabel }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">循环周期</text>
|
||||
<text class="info-value">{{ cycleLabel }}</text>
|
||||
</view>
|
||||
<view class="info-row column">
|
||||
<text class="info-label">检查说明</text>
|
||||
<view class="info-block">
|
||||
<rich-text v-if="detail.description" :nodes="detail.description"></rich-text>
|
||||
<text v-else class="info-empty">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关联表项 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">关联表项</view>
|
||||
<view class="related-box">
|
||||
<image class="related-icon" src="/static/jianchabiao/biaodan.svg" mode="aspectFit"></image>
|
||||
<text class="related-text">{{ detail.itemNames || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 检查项明细 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">
|
||||
检查项明细
|
||||
<text class="item-count">（{{ checkItems.length }}项）</text>
|
||||
</view>
|
||||
<view v-if="checkItems.length === 0" class="empty-block">暂无检查项</view>
|
||||
<view v-else class="item-list">
|
||||
<view
|
||||
v-for="(item, index) in checkItems"
|
||||
:key="item.pointId || index"
|
||||
class="item-row"
|
||||
>
|
||||
<text class="item-no">{{ index + 1 }}</text>
|
||||
<view class="item-content">
|
||||
<text class="item-name">{{ item.checkItemName || '-' }}</text>
|
||||
<text v-if="item.industryName" class="item-industry">{{ item.industryName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 计划安排 -->
|
||||
<view class="section-card">
|
||||
<view class="section-title">计划安排</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">仅工作日</text>
|
||||
<text class="info-value">{{ weekendLabel }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">计划开始日期</text>
|
||||
<text class="info-value">{{ formatDate(detail.planStartTime) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">计划结束日期</text>
|
||||
<text class="info-value">{{ formatDate(detail.planEndTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getOneTableInfo } from '@/request/api.js'
|
||||
|
||||
const loading = ref(true)
|
||||
const oneTableId = ref('')
|
||||
const detail = ref({})
|
||||
const checkItems = ref([])
|
||||
|
||||
const typeMap = { 1: '日常检查', 2: '专项检查', 3: '设备检查' }
|
||||
const cycleMap = { 1: '每天一次', 2: '每周', 3: '每月', 4: '每季度' }
|
||||
const runModeMap = { 1: '单人完成', 2: '全员', 3: '指定分组' }
|
||||
const weekendMap = { 1: '包含周末', 2: '不包含周末' }
|
||||
|
||||
const typeLabel = computed(() => detail.value.typeName || typeMap[detail.value.type] || '-')
|
||||
const cycleLabel = computed(() => detail.value.cycleName || cycleMap[detail.value.cycle] || '-')
|
||||
const runModeLabel = computed(() => detail.value.runModeName || runModeMap[detail.value.runMode] || '-')
|
||||
const weekendLabel = computed(() => detail.value.isWeekendName || weekendMap[detail.value.isWeekend] || '-')
|
||||
const executorLabel = computed(() => {
|
||||
if (Number(detail.value.runMode) === 2) return '全员'
|
||||
return detail.value.executorName || '-'
|
||||
})
|
||||
|
||||
const formatDate = (value) => {
|
||||
if (!value) return '-'
|
||||
return String(value).split(' ')[0]
|
||||
}
|
||||
|
||||
const fetchDetail = async () => {
|
||||
if (!oneTableId.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getOneTableInfo(oneTableId.value)
|
||||
if (res.code === 0) {
|
||||
const data = res.data || {}
|
||||
detail.value = data
|
||||
checkItems.value = data.itemDetailList || []
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取检查计划详情失败:', error)
|
||||
uni.showToast({ title: '获取详情失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
oneTableId.value = options.id || ''
|
||||
if (!oneTableId.value) {
|
||||
uni.showToast({ title: '缺少检查表ID', icon: 'none' })
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
fetchDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
padding: 24rpx;
|
||||
padding-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
padding: 120rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 16rpx;
|
||||
border-left: 6rpx solid #2667E9;
|
||||
}
|
||||
|
||||
.item-count {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
flex-shrink: 0;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fb;
|
||||
border: 1rpx solid #ebeef5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.info-empty {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.related-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fb;
|
||||
border: 1rpx solid #ebeef5;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.related-icon {
|
||||
flex-shrink: 0;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.related-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-no {
|
||||
width: 36rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-industry {
|
||||
display: inline-block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user