|
|
<template>
|
|
|
<view class="page-container">
|
|
|
<view class="header-section">
|
|
|
<view class="back-btn" @click="goBack">
|
|
|
<text class="back-icon">‹</text>
|
|
|
<text class="back-text">返回</text>
|
|
|
</view>
|
|
|
<view class="header-content">
|
|
|
<text class="header-title">备件详情</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="content-section">
|
|
|
<view class="info-card">
|
|
|
<view class="card-title">基本信息</view>
|
|
|
<view class="info-list">
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">备件编码</text>
|
|
|
<text class="info-value">{{ getField('barCode') }}</text>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">备件名称</text>
|
|
|
<text class="info-value">{{ getField('name') }}</text>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">单位</text>
|
|
|
<text class="info-value">{{ unitLabel }}</text>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">规格</text>
|
|
|
<text class="info-value">{{ getField('standard') }}</text>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">预警库存</text>
|
|
|
<text class="info-value">{{ getField('safetyNumber') }}</text>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">备注</text>
|
|
|
<text class="info-value">{{ getField('remark') }}</text>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="info-label">创建时间</text>
|
|
|
<text class="info-value">{{ createTimeLabel }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, computed } from 'vue'
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
import request from '@/utils/request'
|
|
|
|
|
|
const spareId = ref(undefined)
|
|
|
const loading = ref(false)
|
|
|
const detailData = ref(null)
|
|
|
const unitList = ref([])
|
|
|
|
|
|
function goBack() {
|
|
|
uni.navigateBack();
|
|
|
}
|
|
|
|
|
|
function detailValue(v) {
|
|
|
if (v === 0) return '0'
|
|
|
if (v === false) return '否'
|
|
|
if (v === true) return '是'
|
|
|
if (v === null || v === undefined) return '-'
|
|
|
const s = String(v).trim()
|
|
|
return s ? s : '-'
|
|
|
}
|
|
|
|
|
|
function getField(field) {
|
|
|
const d = detailData.value
|
|
|
return detailValue(d ? d[field] : undefined)
|
|
|
}
|
|
|
|
|
|
function pad2(v) {
|
|
|
return String(v).padStart(2, '0')
|
|
|
}
|
|
|
|
|
|
function formatDateTime(v) {
|
|
|
if (v === null || v === undefined || v === '') return '-'
|
|
|
const d = new Date(typeof v === 'number' ? v : String(v))
|
|
|
if (Number.isNaN(d.getTime())) return '-'
|
|
|
const yyyy = d.getFullYear()
|
|
|
const mm = pad2(d.getMonth() + 1)
|
|
|
const dd = pad2(d.getDate())
|
|
|
const hh = pad2(d.getHours())
|
|
|
const mi = pad2(d.getMinutes())
|
|
|
const ss = pad2(d.getSeconds())
|
|
|
return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`
|
|
|
}
|
|
|
|
|
|
const createTimeLabel = computed(() => {
|
|
|
const d = detailData.value
|
|
|
return formatDateTime(d ? d.createTime : undefined)
|
|
|
})
|
|
|
|
|
|
const unitLabel = computed(() => {
|
|
|
const d = detailData.value
|
|
|
const explicit = d ? d.unitName : undefined
|
|
|
if (explicit) return detailValue(explicit)
|
|
|
const unitId = d ? d.unitId : undefined
|
|
|
const list = unitList.value
|
|
|
const matched = Array.isArray(list) ? list.find(u => u && u.id === unitId) : undefined
|
|
|
return detailValue(matched ? matched.name : undefined)
|
|
|
})
|
|
|
|
|
|
async function fetchAll() {
|
|
|
if (!spareId.value) {
|
|
|
uni.showToast({ title: '缺少备件ID', icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
loading.value = true
|
|
|
try {
|
|
|
const [detailRes, unitRes] = await Promise.all([
|
|
|
request({
|
|
|
url: '/admin-api/erp/product/get',
|
|
|
method: 'get',
|
|
|
params: { id: spareId.value },
|
|
|
showLoading: false
|
|
|
}),
|
|
|
request({
|
|
|
url: '/admin-api/erp/product-unit/simple-list',
|
|
|
method: 'get',
|
|
|
showLoading: false
|
|
|
})
|
|
|
])
|
|
|
detailData.value = detailRes ? detailRes.data : null
|
|
|
unitList.value = unitRes ? unitRes.data : []
|
|
|
} catch (e) {
|
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onLoad((query) => {
|
|
|
const rawId = query && (query.id !== undefined ? query.id : query.code)
|
|
|
const decoded = rawId ? decodeURIComponent(String(rawId)) : ''
|
|
|
spareId.value = decoded ? decoded : undefined
|
|
|
fetchAll()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
|
background-color: #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.header-section {
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
padding: 40rpx 30rpx 80rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.back-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.back-icon {
|
|
|
font-size: 48rpx;
|
|
|
color: #ffffff;
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
|
|
|
.back-text {
|
|
|
font-size: 28rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.header-content {
|
|
|
.header-title {
|
|
|
display: block;
|
|
|
font-size: 44rpx;
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.header-code {
|
|
|
display: block;
|
|
|
font-size: 28rpx;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-badge {
|
|
|
position: absolute;
|
|
|
top: 60rpx;
|
|
|
right: 30rpx;
|
|
|
padding: 12rpx 24rpx;
|
|
|
border-radius: 24rpx;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.status-normal {
|
|
|
background: rgba(24, 188, 55, 0.2);
|
|
|
color: #18bc37;
|
|
|
}
|
|
|
|
|
|
.status-low {
|
|
|
background: rgba(255, 140, 0, 0.2);
|
|
|
color: #ff8c00;
|
|
|
}
|
|
|
|
|
|
.status-empty {
|
|
|
background: rgba(255, 77, 79, 0.2);
|
|
|
color: #ff4d4f;
|
|
|
}
|
|
|
|
|
|
.content-section {
|
|
|
padding: 0 30rpx 30rpx;
|
|
|
margin-top: 40rpx;
|
|
|
}
|
|
|
|
|
|
.info-card {
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 30rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.card-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1a3a5c;
|
|
|
margin-bottom: 24rpx;
|
|
|
padding-bottom: 20rpx;
|
|
|
border-bottom: 2rpx solid #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.info-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.info-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 20rpx 0;
|
|
|
border-bottom: 1rpx solid #f5f7fa;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.info-label {
|
|
|
font-size: 28rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.info-value {
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
|
|
|
&.highlight {
|
|
|
font-weight: 600;
|
|
|
color: #1a3a5c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.record-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.record-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 24rpx 0;
|
|
|
border-bottom: 1rpx solid #f5f7fa;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.record-dot {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #1a3a5c;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.record-content {
|
|
|
flex: 1;
|
|
|
|
|
|
.record-title {
|
|
|
display: block;
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.record-time {
|
|
|
display: block;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.record-type {
|
|
|
padding: 8rpx 16rpx;
|
|
|
border-radius: 8rpx;
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
|
|
|
.type-in {
|
|
|
background: rgba(24, 188, 55, 0.1);
|
|
|
color: #18bc37;
|
|
|
}
|
|
|
|
|
|
.type-out {
|
|
|
background: rgba(255, 77, 79, 0.1);
|
|
|
color: #ff4d4f;
|
|
|
}
|
|
|
</style>
|