You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 lines
8.4 KiB
337 lines
8.4 KiB
<template>
|
|
<view class="maintain-container">
|
|
<!-- 顶部选择器区域 -->
|
|
<view class="selector-section">
|
|
<!-- 紧急程度选择器 -->
|
|
<view class="selector-item" @click="openUrgencyPicker">
|
|
<text class="selector-label" :class="{ active: selectedUrgency !== '紧急程度' }">{{ selectedUrgency }}</text>
|
|
<uv-icon name="arrow-down-fill" size="14" :color="selectedUrgency !== '紧急程度' ? '#C70019' : '#000'"></uv-icon>
|
|
</view>
|
|
|
|
<!-- 维修状态选择器 -->
|
|
<view class="selector-item" @click="openStatusPicker">
|
|
<text class="selector-label" :class="{ active: selectedStatus !== '维修状态' }">{{ selectedStatus }}</text>
|
|
<uv-icon name="arrow-down-fill" size="14" :color="selectedStatus !== '维修状态' ? '#C70019' : '#000'"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 产品列表 -->
|
|
<view class="product-list">
|
|
<view class="product-item" v-for="(item, index) in list" :key="index" @click="navigateToDetail(item)">
|
|
<!-- 产品ID和状态标签 -->
|
|
<view class="item-header">
|
|
<view >
|
|
<text class="item-id">{{ item.id }}</text>
|
|
<img src="@/static/copy.png" alt="复制图标" class="item-icon">
|
|
</view>
|
|
<view class="status-tag" :class="[getStatusClass(item.status)]">
|
|
<text class="status-text">{{ item.status_dictText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 中间那条下划线 -->
|
|
<view class="item-border" />
|
|
|
|
<!-- 产品标题 -->
|
|
<view class="item-title">
|
|
<text class="title-text">{{ item.showpieceId_dictText }}</text>
|
|
</view>
|
|
|
|
<!-- 产品详情 -->
|
|
<view class="item-details">
|
|
<view class="detail-row">
|
|
<view class="detail-item">
|
|
<text class="detail-label">展品编号</text>
|
|
<text class="detail-value">{{ item.showpieceId }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">紧急程度</text>
|
|
<text class="detail-value">{{ item.urgency_dictText }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-row">
|
|
<view class="detail-item">
|
|
<text class="detail-label">展品位置</text>
|
|
<text class="detail-value">{{ item.position }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-row">
|
|
<view class="detail-item">
|
|
<text class="detail-label">报修人</text>
|
|
<text class="detail-value">{{ item.reporterName }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">报修日期</text>
|
|
<text class="detail-value">{{ item.firstDate }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-row">
|
|
<view class="detail-item full-width">
|
|
<text class="detail-label">故障描述</text>
|
|
<text class="detail-value">{{ item.malfunctionDesc }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="item-actions">
|
|
<button class="item-actions-button">立即维修</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 紧急程度选择器 -->
|
|
<uv-picker
|
|
ref="urgencyPicker"
|
|
v-model="urgencyShow"
|
|
:columns="urgencyColumns"
|
|
mode="selector"
|
|
@confirm="onUrgencyConfirm"
|
|
confirmColor="#C70019"
|
|
></uv-picker>
|
|
|
|
<!-- 维修状态选择器 -->
|
|
<uv-picker
|
|
ref="statusPicker"
|
|
v-model="statusShow"
|
|
:columns="statusColumns"
|
|
mode="selector"
|
|
@confirm="onStatusConfirm"
|
|
confirmColor="#C70019"
|
|
></uv-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ListMixin from '@/mixins/list'
|
|
|
|
export default {
|
|
mixins: [ListMixin],
|
|
data() {
|
|
return {
|
|
selectedUrgency: '紧急程度',
|
|
selectedStatus: '维修状态',
|
|
urgencyShow: false,
|
|
statusShow: false,
|
|
mixinListApi: 'exhibit.queryMalfunctionList',
|
|
urgencyColumns: [
|
|
[
|
|
|
|
'一般',
|
|
'紧急',
|
|
'非常紧急'
|
|
]
|
|
],
|
|
statusColumns: [
|
|
[
|
|
|
|
'维护中',
|
|
'故障中',
|
|
'已解决'
|
|
]
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
navigateToDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/subPages/repair/maintainSubmit?id=' + item.id
|
|
})
|
|
},
|
|
openUrgencyPicker() {
|
|
this.$refs.urgencyPicker.open()
|
|
},
|
|
openStatusPicker() {
|
|
this.$refs.statusPicker.open()
|
|
},
|
|
onUrgencyConfirm(e) {
|
|
this.selectedUrgency = e.value[0]
|
|
console.log('选择紧急程度:', e)
|
|
// TODO: 根据紧急程度筛选
|
|
},
|
|
onStatusConfirm(e) {
|
|
this.selectedStatus = e.value[0]
|
|
console.log('选择维修状态:', e)
|
|
// TODO: 根据状态筛选
|
|
},
|
|
getStatusClass(status) {
|
|
switch(status) {
|
|
case '维修中':
|
|
return 'status-repairing'
|
|
case '故障中':
|
|
return 'status-fault'
|
|
case '已解决':
|
|
return 'status-resolved'
|
|
default:
|
|
return ''
|
|
}
|
|
},
|
|
handleRepair(item) {
|
|
console.log('立即维修:', item)
|
|
// TODO: 处理维修逻辑
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.maintain-container {
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.selector-section {
|
|
display: flex;
|
|
padding: 34rpx 41rpx;
|
|
// background-color: #fff;
|
|
gap: 58rpx;
|
|
|
|
.selector-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9rpx;
|
|
cursor: pointer;
|
|
|
|
.selector-label {
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
|
|
&.active {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-list {
|
|
padding: 20rpx 32rpx;
|
|
|
|
.product-item {
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
padding: 30rpx 30rpx 20rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
|
|
.item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 13.5rpx;
|
|
|
|
.item-icon {
|
|
width: 25.5rpx;
|
|
height: 25.5rpx;
|
|
}
|
|
|
|
.item-id {
|
|
font-size: 28rpx;
|
|
margin-right: 20rpx;
|
|
color: $secondary-text-color;
|
|
}
|
|
|
|
|
|
.status-tag {
|
|
border-radius: 15rpx;
|
|
width: 135rpx;
|
|
height: 57rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.status-text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
&.status-repairing {
|
|
background-color: #ffffca;
|
|
color: #CE7C62;
|
|
}
|
|
|
|
&.status-fault {
|
|
background-color: #fccec7;
|
|
color: #b82222;
|
|
}
|
|
|
|
&.status-resolved {
|
|
background-color: #cfffca;
|
|
color: #528828;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-border {
|
|
border-bottom: 1rpx solid $secondary-text-color;
|
|
// background-color: #E5E5E5;
|
|
margin-bottom: 26.5rpx;
|
|
opacity: 0.22;
|
|
}
|
|
|
|
.item-title {
|
|
margin-bottom: 37rpx;
|
|
|
|
.title-text {
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.item-details {
|
|
margin-bottom: 52rpx;
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
margin-bottom: 25rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-right: 35rpx;
|
|
|
|
&.full-width {
|
|
flex: 1 1 100%;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 22rpx;
|
|
color: $secondary-text-color;
|
|
margin-right: 19rpx;
|
|
flex-shrink: 0;
|
|
min-width: 95rpx;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 22rpx;
|
|
color: $primary-text-color;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
.item-actions-button {
|
|
width: 378rpx;
|
|
height: 78rpx;
|
|
background-color: $primary-color;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
border-radius: 39rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|