120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<template>
|
||
<uni-card spacing="0">
|
||
<view class="detail-content">
|
||
<up-row align="top">
|
||
<template v-for="item in deviceSchema">
|
||
<up-col :span="item.span ? item.span : 4">
|
||
<view class="x-f detail-item" :style="item.itemStyle">
|
||
<view class="detail-label" :style="item.labelStyle">{{ item.label }}：</view>
|
||
<template v-if="item.field == 'photo'">
|
||
<view style="height: 50px">
|
||
<up-album multipleSize="50" singleSize="50" maxCount="2" :urls="imgs"></up-album>
|
||
</view>
|
||
</template>
|
||
<text v-else class="detail-value" :style="item.valueStyle">{{ detailInfo[item.field] }}</text>
|
||
</view>
|
||
</up-col>
|
||
</template>
|
||
</up-row>
|
||
</view>
|
||
</uni-card>
|
||
<up-loading-page :loading="pageLoading"></up-loading-page>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, computed } from 'vue'
|
||
import nx from '@/nx'
|
||
import { getDeviceBusInfoById } from '@/nx/api/deviceInfo'
|
||
import { getImgBaseUrl } from '@/defaultBaseUrl'
|
||
import { deviceSchema } from './deviceBusInfo.data'
|
||
const detailId = ref('')
|
||
const pageLoading = ref(false)
|
||
const emit = defineEmits(['getDeviceInfo'])
|
||
onMounted(() => {
|
||
const { id } = nx.$store('biz').deviceInfo
|
||
detailId.value = id
|
||
getDeviceInfo()
|
||
})
|
||
let detailInfo = ref({})
|
||
let imgs = ref([])
|
||
// 获取设备详情
|
||
async function getDeviceInfo() {
|
||
pageLoading.value = true
|
||
const res = await getDeviceBusInfoById(detailId.value).finally(() => {
|
||
pageLoading.value = false
|
||
})
|
||
detailInfo.value = (data => {
|
||
const statuses = [
|
||
data.repairFlag == 1 && '维修',
|
||
data.demoteFlag == 1 && '降级',
|
||
data.scrapFlag == 1 && '报废',
|
||
data.disableFlag == 1 && '停用',
|
||
data.lendFlag == 1 && '外借'
|
||
].filter(Boolean) // 去掉 false 值
|
||
|
||
if (data.acceptFlag != 'finished') {
|
||
data.deviceStatus = '--'
|
||
data.inUseFlag = '--'
|
||
} else {
|
||
data.deviceStatus = statuses.length > 0 ? statuses.join('、') : '正常'
|
||
if (data.inUseFlag == '1') {
|
||
data.inUseFlag = '是'
|
||
} else {
|
||
data.inUseFlag = '否'
|
||
}
|
||
}
|
||
switch (data.acceptFlag) {
|
||
case '0':
|
||
data.acceptFlag = '待验收'
|
||
break
|
||
case 'running':
|
||
data.acceptFlag = '验收审批中'
|
||
break
|
||
case 'finished':
|
||
data.acceptFlag = '已验收'
|
||
break
|
||
default:
|
||
data.acceptFlag = '--'
|
||
}
|
||
return data
|
||
})(res)
|
||
imgs.value = getFileList(res.photo)
|
||
emit('getDeviceInfo', detailInfo.value)
|
||
}
|
||
function getFileList(photo) {
|
||
if (photo) {
|
||
let fileIds = photo.split(',').map(item => getImgBaseUrl() + item)
|
||
return fileIds
|
||
} else {
|
||
return []
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.detail-content {
|
||
border: 0.5px solid #f0f0f0;
|
||
width: 100%;
|
||
.detail-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 6px;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
border: 0.5px solid #f0f0f0;
|
||
.detail-label {
|
||
color: #000;
|
||
}
|
||
.detail-value {
|
||
font-size: 14px;
|
||
width: 72%;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
}
|
||
:deep(.u-row) {
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
}
|
||
</style>
|