linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style：点检记录模块样式优化

Browse Source
master
黄伟杰 2 weeks ago
parent 10f780faab
commit 7602ee9df0
2 changed files with 80 additions and 32 deletions
Show Stats Download Patch File Download Diff File

71
src/pages_function/pages/equipmentInspectionRecord/detail.vue
Unescape Escape View File

@ -7,20 +7,20 @@
<scroll-view scroll-y class="detail-scroll">
<view class="content-section">
<view class="hero-card">
<view class="hero-left">
<!-- <view class="hero-left">
<view class="hero-icon">{{ taskTypeShortText }}</view>
</view>
</view> -->
<view class="hero-body">
<text class="hero-title">{{ textValue(detailData.deviceName) }}</text>
<view class="hero-meta-row">
<text class="hero-meta-label">{{ t('equipmentInspectionRecord.taskType') }}：</text>
<text class="hero-meta-value">{{ planTypeText }}</text>
<text class="hero-meta-label hero-meta-gap">{{ t('equipmentInspectionRecord.configName') }}：</text>
<text class="hero-meta-value">{{ textValue(detailData.configName) }}</text>
</view>
<view class="hero-meta-row">
<text class="hero-meta-label">{{ t('equipmentInspectionRecord.planNo') }}：</text>
<text class="hero-meta-value">{{ textValue(detailData.planNo) }}</text>
<view class="hero-meta-item">
<text class="hero-meta-label">{{ t('equipmentInspectionRecord.taskType') }}：</text>
<text class="hero-meta-value">{{ planTypeText }}</text>
</view>
<view class="hero-meta-item hero-meta-item-right">
<text class="hero-meta-label">{{ t('equipmentInspectionRecord.planNo') }}：</text>
<text class="hero-meta-value">{{ textValue(detailData.planNo) }}</text>
</view>
</view>
</view>
</view>
@ -55,12 +55,24 @@
<text class="field-label">{{ t('equipmentInspectionRecord.judgmentCriteria') }}</text>
<text class="field-value">{{ textValue(item.judgmentCriteria) }}</text>
</view>
<view class="field-row">
<!-- <view class="field-row">
<text class="field-label">{{ t('equipmentInspectionRecord.valueType') }}</text>
<text class="field-value">{{ valueTypeText(item.valueType) }}</text>
</view> -->
<view v-if="shouldShowInput(item) && isEditableItem(item) && isNumericValueType(item.valueType)" class="field-row">
<text class="field-label">{{ t('equipmentInspectionRecord.textInput') }}</text>
<view class="number-box-wrap number-box-wrap-inline">
<uni-number-box
:modelValue="numberInputValue(item)"
:min="-999999999"
:max="999999999"
:step="1"
@change="onNumberInputChange(item, $event)"
/>
</view>
</view>
<view v-if="shouldShowInput(item)" class="field-block">
<view v-else-if="shouldShowInput(item)" class="field-block">
<text class="field-label block-label">{{ t('equipmentInspectionRecord.textInput') }}</text>
<textarea
v-if="isEditableItem(item)"
@ -215,11 +227,26 @@ function shouldShowInput(item) {
return valueType === '0' || valueType === '2' || !!String(item?.textInput || '').trim()
}
function isNumericValueType(value) {
const normalized = String(value ?? '')
const label = String(valueTypeText(value) || '').toLowerCase()
return normalized === '2' || /数值|数字|number|numeric|digit|decimal/.test(label)
}
function textInputDisplay(item) {
const text = String(item?.textInput || '').trim()
return text || t('equipmentInspectionRecord.inspectionResultPending')
}
function numberInputValue(item) {
const value = Number(item?.textInput)
return Number.isFinite(value) ? value : 0
}
function onNumberInputChange(item, value) {
item.textInput = String(value)
}
function isItemCompleted(item) {
const result = String(item?.inspectionResult ?? '').trim()
return !!result && result !== '0'
@ -325,7 +352,7 @@ async function handleSave() {
managementId: item.managementId || managementId.value,
inspectionResult: item.inspectionResult,
images: joinImages(item.images),
textInput: String(item.textInput || '').trim() || undefined
textInput: normalizeTextInput(item.textInput)
}))
saveLoading.value = true
@ -340,6 +367,12 @@ async function handleSave() {
saveLoading.value = false
}
}
function normalizeTextInput(value) {
if (value === 0 || value === '0') return '0'
const text = String(value ?? '').trim()
return text || undefined
}
</script>
<style lang="scss" scoped>
@ -352,7 +385,9 @@ async function handleSave() {
.hero-icon { font-size: 52rpx; font-weight: 700; color: #1f7cff; }
.hero-body { flex: 1; min-width: 0; }
.hero-title { display: block; font-size: 42rpx; line-height: 1.2; font-weight: 700; color: #1f2937; }
.hero-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8rpx; margin-top: 16rpx; }
.hero-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 24rpx; margin-top: 16rpx; }
.hero-meta-item { display: flex; align-items: center; min-width: 0; }
.hero-meta-item-right { justify-content: flex-end; flex-shrink: 0; }
.hero-meta-label { font-size: 25rpx; color: #9ca3af; }
.hero-meta-gap { margin-left: 24rpx; }
.hero-meta-value { font-size: 25rpx; color: #6b7280; }
@ -384,6 +419,12 @@ async function handleSave() {
.pending-tag { padding: 8rpx 14rpx; border-radius: 10rpx; background: #f3f4f6; color: #9ca3af; font-size: 24rpx; }
.readonly-box { min-height: 84rpx; padding: 18rpx 20rpx; border-radius: 14rpx; background: #f8fafc; font-size: 28rpx; color: #374151; line-height: 1.5; }
.form-textarea { width: 100%; min-height: 76rpx; max-height: 108rpx; background: #f8fafc; border-radius: 12rpx; padding: 10rpx 16rpx; font-size: 26rpx; color: #374151; box-sizing: border-box; }
.number-box-wrap { width: 100%; }
.number-box-wrap-inline { width: 320rpx; }
.number-box-wrap :deep(.uni-numbox) { width: 100%; }
.number-box-wrap :deep(.uni-numbox__value) { flex: 1; height: 60rpx; font-size: 24rpx; }
.number-box-wrap :deep(.uni-numbox-btns) { min-width: 60rpx; justify-content: center; }
.number-box-wrap :deep(.uni-numbox--text) { font-size: 18px; }
.image-list { display: flex; flex-wrap: wrap; gap: 12rpx; }
.image-item { position: relative; }
.result-image { width: 140rpx; height: 140rpx; border-radius: 16rpx; background: #f3f4f6; }

41
src/pages_function/pages/equipmentInspectionRecord/index.vue
Unescape Escape View File

@ -35,8 +35,15 @@
<view v-for="item in list" :key="item.id" class="task-card" @click="openDetail(item)">
<view class="card-header">
<view class="header-main">
<text class="task-name">{{ textValue(item.planNo) }}</text>
<text :class="['task-type-tag', String(item.planType) === '1' ? 'tag-inspect' : 'tag-maintain']">{{ taskTypeText(item.planType) }}</text>
<view class="header-left">
<text :class="['task-type-tag', String(item.planType) === '1' ? 'tag-inspect' : 'tag-maintain']">{{ taskTypeText(item.planType) }}</text>
<text class="task-name">{{ textValue(item.planNo) }}</text>
</view>
<view class="header-tags">
<text :class="['record-tag', jobStatusClass(item.jobStatus)]">{{ jobStatusText(item.jobStatus) }}</text>
<text :class="['record-tag', jobResultClass(item.jobResult)]">{{ jobResultText(item.jobResult) }}</text>
</view>
</view>
</view>
<view class="card-body">
@ -44,22 +51,14 @@
<text class="label">{{ t('equipmentInspectionRecord.deviceName') }}</text>
<text class="value">{{ textValue(item.deviceName) }}</text>
</view>
<view class="row">
<!-- <view class="row">
<text class="label">{{ t('equipmentInspectionRecord.configName') }}</text>
<text class="value">{{ textValue(item.configName) }}</text>
</view>
</view> -->
<view class="row">
<text class="label">{{ t('equipmentInspectionRecord.jobStatus') }}</text>
<text :class="['value', jobStatusClass(item.jobStatus)]">{{ jobStatusText(item.jobStatus) }}</text>
</view>
<view class="row">
<text class="label">{{ t('equipmentInspectionRecord.taskTime') }}</text>
<text class="value">{{ formatDateTime(item.taskTime) }}</text>
</view>
<view class="row">
<text class="label">{{ t('equipmentInspectionRecord.jobResult') }}</text>
<text :class="['value', jobResultClass(item.jobResult)]">{{ jobResultText(item.jobResult) }}</text>
</view>
</view>
</view>
@ -283,8 +282,8 @@ function jobStatusText(value) {
function jobStatusClass(value) {
const normalized = String(value)
if (normalized === '1') return 'text-primary'
if (normalized === '2') return 'text-success'
if (normalized === '2') return 'text-primary'
if (normalized === '1') return 'text-success'
if (normalized === '3') return 'text-danger'
if (normalized === '4') return 'text-muted'
return 'text-warning'
@ -375,11 +374,14 @@ function formatDateTime(value) {
.task-card { position: relative; margin-top: 20rpx; padding: 28rpx; background: #fff; border-radius: 22rpx; box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.06); }
.card-header { margin-bottom: 18rpx; }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
.task-name { flex: 1; font-size: 32rpx; font-weight: 700; color: #0f172a; }
.task-type-tag { padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; }
.header-left { min-width: 0; flex: 1; }
.header-tags { display: flex; align-items: center; gap: 12rpx; flex-shrink: 0; }
.task-name { flex: 1; font-size: 32rpx; font-weight: 700; color: #0f172a; margin-left:12rpx }
.task-type-tag { padding: 8rpx 18rpx; border-radius: 8rpx; font-size: 22rpx; }
.record-tag { padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
.tag-inspect { color: #1d4ed8; background: #dbeafe; }
.tag-maintain { color: #15803d; background: #dcfce7; }
.card-body .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; padding: 10rpx 0; }
.card-body .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; }
.label { width: 180rpx; font-size: 25rpx; color: #94a3b8; }
.value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; }
.text-success { color: #16a34a; }
@ -387,6 +389,11 @@ function formatDateTime(value) {
.text-warning { color: #f59e0b; }
.text-primary { color: #2563eb; }
.text-muted { color: #94a3b8; }
.record-tag.text-success { color: #15803d; background: #dcfce7; }
.record-tag.text-danger { color: #dc2626; background: #fee2e2; }
.record-tag.text-warning { color: #d97706; background: #fef3c7; }
.record-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
.record-tag.text-muted { color: #64748b; background: #e2e8f0; }
.hint { padding: 36rpx 0; text-align: center; color: #94a3b8; font-size: 26rpx; }
.go-top-btn { position: fixed; right: 28rpx; bottom: calc(40rpx + env(safe-area-inset-bottom)); width: 88rpx; height: 88rpx; border-radius: 44rpx; background: rgba(255,255,255,0.96); box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.12); display: flex; align-items: center; justify-content: center; }
</style>

Write Preview
Loading…
Cancel
Save