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.
382 lines
9.3 KiB
382 lines
9.3 KiB
<template>
|
|
<view class="maintain-container">
|
|
<!-- 顶部选择器区域 -->
|
|
<view class="selector-section">
|
|
<!-- 紧急程度选择器 -->
|
|
<view class="selector-item" @click="openUrgencyPicker">
|
|
<text class="selector-label" :class="{ active: urgency }">{{ urgency.label || '紧急状态' }}</text>
|
|
<uv-icon name="arrow-down-fill" size="14" :color="urgency ? '#C70019' : '#000'"></uv-icon>
|
|
</view>
|
|
|
|
<!-- 维修状态选择器 -->
|
|
<view class="selector-item" @click="openStatusPicker">
|
|
<text class="selector-label" :class="{ active: status }">{{ status.label || '维修状态' }}</text>
|
|
<uv-icon name="arrow-down-fill" size="14" :color="status ? '#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 @click.stop="copyID(item.id)">
|
|
<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.showpiece.position }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-row">
|
|
<view class="detail-item">
|
|
<text class="detail-label">报修人</text>
|
|
<text class="detail-value">{{ item.malfunctionName_dictText }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">报修日期</text>
|
|
<text class="detail-value">{{ item.malfunctionDate }}</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-empty v-if="!list.length" icon="/static/暂无搜索结果.png" />
|
|
|
|
<!-- 紧急程度选择器 -->
|
|
<uv-picker
|
|
ref="urgencyPicker"
|
|
v-model="urgencyShow"
|
|
:columns="urgencyColumns"
|
|
keyName="label"
|
|
mode="selector"
|
|
@confirm="onUrgencyConfirm"
|
|
confirmColor="#C70019"
|
|
></uv-picker>
|
|
|
|
<!-- 维修状态选择器 -->
|
|
<uv-picker
|
|
ref="statusPicker"
|
|
v-model="statusShow"
|
|
:columns="statusColumns"
|
|
keyName="label"
|
|
mode="selector"
|
|
@confirm="onStatusConfirm"
|
|
confirmColor="#C70019"
|
|
></uv-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ListMixin from '@/mixins/list'
|
|
|
|
export default {
|
|
mixins: [ListMixin],
|
|
data() {
|
|
return {
|
|
urgency: null,
|
|
status: null,
|
|
urgencyShow: false,
|
|
statusShow: false,
|
|
mixinListApi: 'exhibit.queryMalfunctionList',
|
|
urgencyColumns: [
|
|
[
|
|
{
|
|
label: '全部',
|
|
value: ''
|
|
},
|
|
{
|
|
label: '一般',
|
|
value: '0'
|
|
},
|
|
{
|
|
label: '紧急',
|
|
value: '1'
|
|
},
|
|
]
|
|
],
|
|
statusColumns: [
|
|
[
|
|
{
|
|
label: '全部',
|
|
value: ''
|
|
},
|
|
{
|
|
label: '故障中',
|
|
value: '0'
|
|
},
|
|
{
|
|
label: '维修中',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '已解决',
|
|
value: '2'
|
|
}
|
|
]
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
copyID(id) {
|
|
uni.setClipboardData({
|
|
data: id,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
mixinSetParams(){
|
|
return {
|
|
urgency: this.urgency?.value || '',
|
|
status: this.status?.value || ''
|
|
}
|
|
},
|
|
navigateToDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/subPages/repair/maintainSubmit?id=' + item.id + '&showpieceId=' + item.showpieceId
|
|
})
|
|
},
|
|
openUrgencyPicker() {
|
|
this.$refs.urgencyPicker.open()
|
|
},
|
|
openStatusPicker() {
|
|
this.$refs.statusPicker.open()
|
|
},
|
|
onUrgencyConfirm(e) {
|
|
this.urgency = e.value[0]
|
|
console.log('选择紧急程度:', e)
|
|
this.initPage()
|
|
this.getList(true)
|
|
// TODO: 根据紧急程度筛选
|
|
},
|
|
onStatusConfirm(e) {
|
|
this.status = e.value[0]
|
|
console.log('选择维修状态:', e)
|
|
this.initPage()
|
|
this.getList(true)
|
|
// 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>
|