Files
zgty-mas-m/components/sample/sample-detail-popup.vue
2025-10-10 18:16:14 +08:00

154 lines
3.9 KiB
Vue

<!-- 查看样品详情 -->
<template>
<view>
<u-popup :show="showPopup" @close="close" @open="open" mode="left">
<view class="detail_title">
{{ taskDetail.sampleCode }}
</view>
<view>
<scroll-view scroll-y style="height: 100vh; width: 30vw">
<view style="padding: 10px">
<up-collapse :value="getAllIndexes(fieldGroup)" :accordion="false">
<up-collapse-item
v-for="(fields, groupIndex) in fieldGroup"
:title="fields.title"
:key="groupIndex"
v-if="curParameterKey === '' || curParameterKey === fields.title"
>
<view
class="form-item-my"
v-for="(field, fieldIndex) in fields.fields"
:key="groupIndex + '-' + fieldIndex"
>
<view
class="label-my"
v-html="
field.name +
(typeof field.unit !== 'undefined' && field.unit !== null ? '(' + field.unit + ')' : '')
"
></view>
<view class="content-my">
<view class="content-my-text" v-if="field.type !== 'select'">
<text class="content-my-text-value">{{ field.value }}</text>
</view>
<view class="content-my-text" v-else>
<text class="content-my-text-value">{{ field.valueText }}</text>
</view>
</view>
</view>
</up-collapse-item>
</up-collapse>
</view>
<view class="p30"></view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import nx from '@/nx'
// Props
const props = defineProps({
showPopup: {
type: Boolean,
default: false
},
detailPopupParam: {
type: Object,
default: () => ({
taskDetailId: ''
})
}
})
const emit = defineEmits(['update:showPopup'])
// Data
const curSample = ref({})
const curParameterKey = ref('')
const fieldGroup = ref([])
const taskDetail = ref({})
const optionParameterClassify = ref([])
const conAssayTaskId = ref('')
const busSubCSampleId = ref('')
// Methods
const getAllIndexes = arr => {
return arr.map((_, index) => index)
}
const close = () => {
emit('update:showPopup', false)
}
const getSampleData = () => {
const taskDetailId = props.detailPopupParam.taskDetailId
nx.$api.assayTask.queryFieldsByTaskDetail({ taskDetailId }).then(res => {
fieldGroup.value = res.result
const arr = [{ label: '全部', value: '' }]
for (const g of fieldGroup.value) {
const title = g.title
arr.push({
label: title,
value: title
})
}
optionParameterClassify.value = arr // 字段分类
conAssayTaskId.value = res.additionalProperties.conAssayTaskId
busSubCSampleId.value = res.additionalProperties.busSubCSampleId
taskDetail.value = res.additionalProperties.taskDetail
})
}
const open = () => {
getSampleData()
}
</script>
<style scoped lang="scss">
.form-item-my {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label-my {
width: 180px; /* 标签宽度 */
display: flex;
align-items: center;
}
.label-my sub {
font-size: 0.6em; /* 调整下标字体大小 */
vertical-align: sub; /* 调整下标垂直对齐 */
}
.content-my {
flex: 1;
padding-left: 7px;
}
.content-my-text {
height: 35px;
display: flex;
align-items: center;
}
.content-my-text-value {
color: rgb(48, 49, 51);
}
.detail_title {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
font-size: 18px;
font-weight: 400;
padding-top: 30px;
padding-bottom: 10px;
background-color: $uni-color-primary;
color: #fff;
}
</style>