143 lines
4.2 KiB
Vue
143 lines
4.2 KiB
Vue
<template>
|
||
<up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
|
||
<uni-section titleFontSize="18px" type="line" title="设备维护保养信息"> </uni-section>
|
||
<scroll-view scroll-y="true" style="height: 85vh; width: 90vw">
|
||
<view class="content">
|
||
<up-row class="flex-wrap pt10 pl10" style="background-color: #f5f7fa">
|
||
<up-col class="mb8" :span="gridCol" v-for="(item, index) in detailSchema">
|
||
<view style="color: #666"
|
||
><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
|
||
>
|
||
</up-col>
|
||
</up-row>
|
||
<view class="pt5">
|
||
<up-row>
|
||
<up-col span="6">
|
||
<view
|
||
>维护保养人：
|
||
<text style="color: #666">
|
||
{{ detailInfo.checkUserName }}
|
||
</text>
|
||
</view>
|
||
<view class="pt5"
|
||
>维护保养日期：
|
||
<text style="color: #666">
|
||
{{ detailInfo.checkDate }}
|
||
</text>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="6">
|
||
<u-album multiple-size="70" single-size="70" :urls="attachment" row-count="4" />
|
||
</up-col>
|
||
</up-row>
|
||
</view>
|
||
<view>
|
||
<up-row class="p10 font-bold" style="background-color: #f5f5f5">
|
||
<up-col span="5">维护保养内容</up-col>
|
||
<up-col span="3"> 频次</up-col>
|
||
<up-col span="4">维护保养标准</up-col>
|
||
</up-row>
|
||
<view>
|
||
<view v-for="(item, index) in detailInfo.maintainItemList" :key="index">
|
||
<up-row class="p10">
|
||
<up-col span="5">
|
||
<view class="x-f">
|
||
<text>
|
||
{{ item.itemName }}
|
||
</text>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="3">{{ item.frequencyRemark }}</up-col>
|
||
<up-col span="4">{{ item.standard }}</up-col>
|
||
</up-row>
|
||
<up-row class="fill-content">
|
||
<up-col span="12"
|
||
><view
|
||
>维护保养情况:
|
||
<text style="color: #666">
|
||
{{ item.checkRemark }}
|
||
</text>
|
||
</view>
|
||
</up-col>
|
||
</up-row>
|
||
</view>
|
||
<view class="p10"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, watch, computed } from 'vue'
|
||
import { useGridCol } from '@/nx/hooks/useGridCol'
|
||
import dailyCheckApi from '@/nx/api/dailyCheck'
|
||
import { getImgBaseUrl } from '@/defaultBaseUrl'
|
||
|
||
const { gridCol } = useGridCol([700], [6, 4])
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
checkInfo: {
|
||
type: Object
|
||
}
|
||
})
|
||
const detailSchema = [
|
||
{ label: '设备名称', value: 'deviceName' },
|
||
{ label: '别名', value: 'alias' },
|
||
{ label: '设备型号', value: 'modelNo' },
|
||
{ label: '设备编码', value: 'deviceCode' },
|
||
{ label: '使用班组', value: 'deptName' }
|
||
]
|
||
const visible = ref(props.show)
|
||
// 监听外部传入的show属性变化
|
||
watch(
|
||
() => props.show,
|
||
newVal => {
|
||
visible.value = newVal
|
||
}
|
||
)
|
||
const attachment = computed(() => {
|
||
let files = detailInfo.value?.attachment?.split(',') || []
|
||
if (files.length > 0) {
|
||
return files.map(item => getImgBaseUrl() + item)
|
||
} else {
|
||
return []
|
||
}
|
||
})
|
||
let detailInfo = ref({})
|
||
async function getDetailInfo(id) {
|
||
const res = await dailyCheckApi.queryById(id)
|
||
detailInfo.value = res
|
||
}
|
||
const emit = defineEmits(['close', 'open'])
|
||
function handleClose() {
|
||
emit('close')
|
||
}
|
||
function handleOpen() {
|
||
getDetailInfo(props.checkInfo.id)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background-color: #fff;
|
||
height: 100%;
|
||
padding: 10px;
|
||
font-size: 16px;
|
||
.fill-content {
|
||
font-size: 14px;
|
||
border-radius: 3px;
|
||
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
|
||
background-color: #fdf6ec;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
:deep(.uicon-close) {
|
||
font-size: 22px !important;
|
||
}
|
||
</style>
|