145 lines
3.8 KiB
Vue
145 lines
3.8 KiB
Vue
<template>
|
||
<up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
|
||
<uni-section titleFontSize="20px" type="line" title="设备检定/校准信息"> </uni-section>
|
||
<scroll-view scroll-y="true" class="content">
|
||
<up-row class="flex-wrap">
|
||
<up-col :span="gridCol"
|
||
>仪器设备名称：
|
||
<text class="value">{{ detailInfo.deviceName }}</text>
|
||
</up-col>
|
||
<up-col span="4"
|
||
>别名：
|
||
<text class="value">{{ detailInfo.alias }}</text>
|
||
</up-col>
|
||
<up-col span="4"
|
||
>生产厂家：
|
||
<text class="value">{{ detailInfo.manufacturer }}</text>
|
||
</up-col>
|
||
<up-col :span="gridCol"
|
||
>规格型号：
|
||
<text class="value">{{ detailInfo.modelNo }}</text>
|
||
</up-col>
|
||
</up-row>
|
||
<up-row class="flex-wrap">
|
||
<up-col :span="gridCol"
|
||
>设备编号：
|
||
<text class="value">{{ detailInfo.deviceCode }}</text>
|
||
</up-col>
|
||
<up-col :span="gridCol"
|
||
>统一编号：
|
||
<text class="value">{{ detailInfo.deviceCode }}</text>
|
||
</up-col>
|
||
<up-col :span="gridCol"
|
||
>检定/校准单位：
|
||
<text class="value">{{ detailInfo.agent }}</text>
|
||
</up-col>
|
||
</up-row>
|
||
<up-row class="flex-wrap">
|
||
<up-col :span="gridCol"
|
||
>检定/校准日期：
|
||
<text class="value">{{ detailInfo.checkDate }}</text>
|
||
</up-col>
|
||
<up-col :span="gridCol"
|
||
>证书编号：
|
||
<text class="value">{{ detailInfo.certificateCode }}</text>
|
||
</up-col>
|
||
<up-col :span="gridCol"
|
||
>确认结果：
|
||
<text class="value">{{ detailInfo.checkResult }}</text>
|
||
</up-col>
|
||
</up-row>
|
||
<up-row>
|
||
<up-col span="12"
|
||
>确认情况(理由)：
|
||
<up-parse style="background: #f3f4f6" :content="processedContent"></up-parse>
|
||
</up-col>
|
||
</up-row>
|
||
<up-row>
|
||
<up-col span="12"
|
||
>备注：
|
||
<text class="value">{{ detailInfo.checkRemark }}</text>
|
||
</up-col>
|
||
</up-row>
|
||
<wf-comment :commentWf="commentWf" />
|
||
</scroll-view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, watch, computed } from 'vue'
|
||
import { getImgBaseUrl } from '@/defaultBaseUrl'
|
||
import { useGridCol } from '@/nx/hooks/useGridCol'
|
||
const { gridCol } = useGridCol([700], [6, 4])
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
checkInfo: {
|
||
type: Object
|
||
}
|
||
})
|
||
const visible = ref(props.show)
|
||
// 监听外部传入的show属性变化
|
||
watch(
|
||
() => props.show,
|
||
newVal => {
|
||
visible.value = newVal
|
||
}
|
||
)
|
||
let detailInfo = ref({})
|
||
|
||
const emit = defineEmits(['close', 'open'])
|
||
function handleClose() {
|
||
emit('close')
|
||
}
|
||
// / 处理富文本内容
|
||
const processedContent = computed(() => {
|
||
if (!detailInfo.value.checkContent) {
|
||
return ''
|
||
}
|
||
return detailInfo.value.checkContent.replace(
|
||
/<img([^>]+?)src="((?!http)[^"]*?)(file\/[^"]*)"/gi,
|
||
(match, attributes, prefix, filePath) => {
|
||
return `<img${attributes}src="${getImgBaseUrl()}/${filePath}"`
|
||
}
|
||
)
|
||
})
|
||
let commentWf = ref([])
|
||
function handleOpen() {
|
||
detailInfo.value = props.checkInfo
|
||
if (props.checkInfo.commentJson) {
|
||
try {
|
||
commentWf.value = JSON.parse(props.checkInfo.commentJson)
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: '解析数据错误',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
font-size: 18px;
|
||
height: 80vh;
|
||
width: 90vw;
|
||
padding: 10px;
|
||
.u-row {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.value {
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
:deep(.uicon-close) {
|
||
font-size: 22px !important;
|
||
}
|
||
</style>
|