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.
690 lines
18 KiB
690 lines
18 KiB
<template>
|
|
<view class="repair-submit">
|
|
<!-- 导航栏 -->
|
|
<!-- <uv-navbar title="报修提交" :border="false" bg-color="#ffffff" title-color="#333333" /> -->
|
|
|
|
<!-- 报修基本信息 -->
|
|
<view class="repair-info">
|
|
<view class="info-header">
|
|
<view class="red-line"></view>
|
|
<text class="info-title">报修基本信息</text>
|
|
</view>
|
|
|
|
<!-- 报修日期 -->
|
|
<view class="form-item" @click="showDatePicker">
|
|
<text class="label">报修日期</text>
|
|
<view class="select-area">
|
|
<text class="value" :class="{ placeholder: !malfunctionDate }">{{ malfunctionDate || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 故障紧急程度 -->
|
|
<view class="form-item " @click="showUrgencyPicker">
|
|
<text class="label">故障紧急程度</text>
|
|
<view class="select-area">
|
|
<text class="value" :class="{ placeholder: !urgency }">{{ urgency.label || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 故障情况 -->
|
|
<view class="form-item form-item-header">
|
|
<text class="label active">故障情况</text>
|
|
</view>
|
|
|
|
<!-- 故障情况选择 -->
|
|
<view class="form-item" @click="showFaultPicker">
|
|
<text class="label">故障情况</text>
|
|
<view class="select-area">
|
|
<text class="value" :class="{ placeholder: !malfunctionStatus }">{{ malfunctionStatus || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 故障情况描述 -->
|
|
<view class="form-item">
|
|
<text class="label">故障情况描述</text>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="malfunctionDesc"
|
|
placeholder="请对故障情况进行描述"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 故障图片 -->
|
|
<view class="form-item">
|
|
<text class="label">故障图片</text>
|
|
</view>
|
|
<view class="image-upload">
|
|
<view v-for="(img, index) in malfunctionImage" :key="index" class="image-item">
|
|
<image :src="img" mode="aspectFill" @click="previewImage(img)"></image>
|
|
<view class="delete-btn" @click="deleteImage(index)">
|
|
<uv-icon name="close" size="12" color="#fff"></uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="upload-btn" @click="uploadImage">
|
|
<uv-icon name="camera" size="34" color="#C70019"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 故障首次发生时间 -->
|
|
<view class="form-item" @click="showFirstOccurTimePicker">
|
|
<text class="label">故障首次发生时间</text>
|
|
<view class="select-area">
|
|
<text class="value" :class="{ placeholder: !firstDate }">{{ firstDate || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 发生频率 -->
|
|
<view class="form-item">
|
|
<text class="label">发生频率</text>
|
|
<view class="radio-options">
|
|
<view
|
|
v-for="(item, index) in frequencyOptions"
|
|
:key="index"
|
|
class="radio-item"
|
|
:class="{ active: frequency === item.value }"
|
|
@click="selectFrequency(item.value)"
|
|
>
|
|
<view class="radio-dot" :class="{ active: frequency === item.value }"></view>
|
|
<text :class="{ active: frequency === item.value }">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 请描述与故障设备发生主要故障的具体条件 -->
|
|
<!-- <view class="form-item">
|
|
<text class="label">请描述与故障设备发生主要故障的具体条件</text>
|
|
</view> -->
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="reason"
|
|
placeholder="请填写说明故障发生频率的触发条件"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 是否影响使用 -->
|
|
<view class="form-item" @click="showImpactPicker">
|
|
<text class="label">是否影响使用</text>
|
|
<view class="select-area">
|
|
<text class="value" :class="{ placeholder: !isAffectUse }">{{ isAffectUse.label || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 采取的临时措施 -->
|
|
<!-- 故障情况 -->
|
|
<view class="form-item form-item-header">
|
|
<text class="label active">采取的临时措施</text>
|
|
</view>
|
|
<!-- <view class="form-item">
|
|
<text class="label">是否采取临时措施</text>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="measureDesc"
|
|
placeholder="如有采取临时措施请填写措施说明"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view> -->
|
|
|
|
<!-- 是否采取的对措施 -->
|
|
<view class="form-item">
|
|
<text class="label">是否采取临时措施</text>
|
|
<view class="radio-options">
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: isMeasure === '1' }"
|
|
@click="selectMeasures('1')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: isMeasure === '1' }"></view>
|
|
<text :class="{ active: isMeasure === '1' }">是</text>
|
|
</view>
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: isMeasure === '0' }"
|
|
@click="selectMeasures('0')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: isMeasure === '0' }"></view>
|
|
<text :class="{ active: isMeasure === '0' }">否</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="measureDesc"
|
|
placeholder="如有采取临时措施请填写措施说明"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 是否影响体验 -->
|
|
<view class="form-item">
|
|
<text class="label">是否影响体验</text>
|
|
<view class="radio-options">
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: isAffectExperience === '1' }"
|
|
@click="selectExperience('1')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: isAffectExperience === '1' }"></view>
|
|
<text :class="{ active: isAffectExperience === '1' }">是</text>
|
|
</view>
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: isAffectExperience === '0' }"
|
|
@click="selectExperience('0')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: isAffectExperience === '0' }"></view>
|
|
<text :class="{ active: isAffectExperience === '0' }">否</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item">
|
|
<text class="label">备注</text>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="remark"
|
|
placeholder="备注"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-container">
|
|
<uv-button
|
|
type="primary"
|
|
text="立即提交"
|
|
:custom-style="{ backgroundColor: '#C70019', borderRadius: '25px' }"
|
|
@click="submitRepair"
|
|
></uv-button>
|
|
</view>
|
|
|
|
<!-- 选择器 -->
|
|
<uv-picker
|
|
confirm-color="#C70019"
|
|
ref="urgencyPicker"
|
|
:columns="urgencyColumns"
|
|
keyName="label"
|
|
@confirm="confirmUrgency"
|
|
@cancel="cancelUrgency"
|
|
></uv-picker>
|
|
|
|
<uv-picker
|
|
confirm-color="#C70019"
|
|
ref="faultPicker"
|
|
:columns="faultColumns"
|
|
@confirm="confirmFault"
|
|
@cancel="cancelFault"
|
|
></uv-picker>
|
|
|
|
<!-- 故障首次发生时间选择器 -->
|
|
<uv-datetime-picker
|
|
ref="firstOccurTimePicker"
|
|
mode="date"
|
|
v-model="firstTime"
|
|
confirm-color="#C70019"
|
|
@confirm="confirmFirstOccurTime"
|
|
></uv-datetime-picker>
|
|
|
|
<uv-picker
|
|
confirm-color="#C70019"
|
|
ref="impactPicker"
|
|
|
|
:columns="impactColumns"
|
|
@confirm="confirmImpact"
|
|
@cancel="cancelImpact"
|
|
keyName="label"
|
|
></uv-picker>
|
|
|
|
<!-- 日期选择器 -->
|
|
<uv-datetime-picker
|
|
confirm-color="#C70019"
|
|
ref="datePicker"
|
|
v-model="timeValue"
|
|
mode="date"
|
|
@confirm="confirmDate"
|
|
></uv-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表单数据
|
|
malfunctionDate: '',
|
|
urgency: '',
|
|
malfunctionStatus: '',
|
|
malfunctionDesc: '',
|
|
malfunctionImage: [],
|
|
firstDate: '',
|
|
frequency: '1',
|
|
reason: '',
|
|
isAffectUse: '0',
|
|
measureDesc: '',
|
|
isMeasure: '0',
|
|
isAffectExperience: '0',
|
|
remark: '',
|
|
showpieceId: '',
|
|
timeValue: Number(new Date()),
|
|
firstTime: Number(new Date()),
|
|
// 频率选项
|
|
frequencyOptions: [
|
|
{ label: '持续性问题', value: '0' },
|
|
{ label: '间歇性问题', value: '1' }
|
|
],
|
|
|
|
// 选择器数据
|
|
urgencyColumns: [
|
|
[
|
|
{ label: '一般', value: '0' },
|
|
{ label: '紧急', value: '1'}
|
|
]
|
|
],
|
|
|
|
faultColumns: [['硬件故障', '软件故障', '网络故障', '其他']],
|
|
impactColumns: [[
|
|
{ label: '是', value: '1' },
|
|
{ label: '否', value: '0' }
|
|
]],
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 显示日期选择器
|
|
showDatePicker() {
|
|
this.$refs.datePicker.open()
|
|
},
|
|
|
|
// 确认日期选择
|
|
confirmDate(e) {
|
|
this.malfunctionDate = this.$utils.formatTime(e.value)
|
|
},
|
|
|
|
// 显示紧急程度选择器
|
|
showUrgencyPicker() {
|
|
this.$refs.urgencyPicker.open()
|
|
},
|
|
|
|
// 确认紧急程度
|
|
confirmUrgency(e) {
|
|
this.urgency = e.value[0]
|
|
},
|
|
|
|
// 取消紧急程度选择
|
|
cancelUrgency() {
|
|
// 取消操作
|
|
},
|
|
|
|
// 显示故障情况选择器
|
|
showFaultPicker() {
|
|
this.$refs.faultPicker.open()
|
|
},
|
|
|
|
// 确认故障情况
|
|
confirmFault(e) {
|
|
this.malfunctionStatus = e.value[0]
|
|
},
|
|
|
|
// 取消故障情况选择
|
|
cancelFault() {
|
|
// 取消操作
|
|
},
|
|
|
|
// 显示故障首次发生时间选择器
|
|
showFirstOccurTimePicker() {
|
|
this.$refs.firstOccurTimePicker.open()
|
|
},
|
|
|
|
// 确认故障首次发生时间
|
|
confirmFirstOccurTime(e) {
|
|
this.firstDate = this.$utils.formatTime(e.value)
|
|
},
|
|
|
|
// 显示影响使用选择器
|
|
showImpactPicker() {
|
|
this.$refs.impactPicker.open()
|
|
},
|
|
|
|
// 确认影响使用
|
|
confirmImpact(e) {
|
|
this.isAffectUse = e.value[0]
|
|
},
|
|
|
|
// 取消影响使用选择
|
|
cancelImpact() {
|
|
// 取消操作
|
|
},
|
|
|
|
// 选择频率
|
|
selectFrequency(value) {
|
|
this.frequency = value
|
|
},
|
|
|
|
// 选择是否采取措施
|
|
selectMeasures(value) {
|
|
this.isMeasure = value
|
|
},
|
|
|
|
// 选择是否影响体验
|
|
selectExperience(value) {
|
|
this.isAffectExperience = value
|
|
},
|
|
|
|
// 上传图片
|
|
async uploadImage() {
|
|
try {
|
|
const result = await this.$utils.chooseAndUpload()
|
|
if (result && result.success) {
|
|
console.log(result);
|
|
|
|
this.malfunctionImage.push(result.url)
|
|
}
|
|
} catch (error) {
|
|
console.error('头像上传失败:', error)
|
|
uni.showToast({
|
|
title: '头像上传失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 删除图片
|
|
deleteImage(index) {
|
|
this.malfunctionImage.splice(index, 1)
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
urls: this.malfunctionImage,
|
|
current: url
|
|
})
|
|
},
|
|
|
|
// 提交报修
|
|
async submitRepair() {
|
|
// 表单验证
|
|
if (!this.urgency) {
|
|
uni.showToast({ title: '请选择故障紧急程度', icon: 'none' })
|
|
return
|
|
}
|
|
if (!this.malfunctionImage.length) {
|
|
uni.showToast({ title: '请上传故障图片', icon: 'none' })
|
|
return
|
|
}
|
|
if (!this.malfunctionDesc.trim()) {
|
|
uni.showToast({ title: '请填写故障情况描述', icon: 'none' })
|
|
return
|
|
}
|
|
if (!this.firstDate.trim()) {
|
|
uni.showToast({ title: '请选择故障首次发生时间', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// 提交数据
|
|
const formData = {
|
|
showpieceId: this.showpieceId,
|
|
malfunctionDate: this.malfunctionDate,
|
|
urgency: this.urgency.value,
|
|
malfunctionDesc: this.malfunctionStatus + this.malfunctionDesc,
|
|
malfunctionImage: this.malfunctionImage.join(','),
|
|
firstDate: this.firstDate,
|
|
frequency: this.frequency,
|
|
reason: this.reason,
|
|
isAffectUse: this.isAffectUse.value,
|
|
measureDesc: this.measureDesc,
|
|
isMeasure: this.isMeasure,
|
|
isAffectExperience: this.isAffectExperience,
|
|
remark: this.remark
|
|
}
|
|
|
|
// console.log('提交数据:', formData)
|
|
// uni.showToast({ title: '提交成功', icon: 'success' })
|
|
const subRes = await this.$api.exhibit.addMalfunction({...formData})
|
|
if (subRes.code === 200) {
|
|
uni.showToast({ title: subRes.message})
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}else{
|
|
uni.showToast({ title: subRes.message, icon: 'none' })
|
|
}
|
|
}
|
|
},
|
|
async onLoad(args) {
|
|
this.showpieceId = args.id
|
|
try {
|
|
const listRes = await this.$api.config.queryMalfunctionDescList()
|
|
if (listRes.code === 200) {
|
|
this.faultColumns = [[...listRes.result.records.map(item => item.malfunction)]]
|
|
}
|
|
} catch (error) {
|
|
uni.showToast({ title: error.message, icon: 'none' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.repair-submit {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
.repair-info {
|
|
margin: 18rpx;
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
padding: 40rpx;
|
|
|
|
.info-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.red-line {
|
|
width: 9rpx;
|
|
height: 33rpx;
|
|
background-color: $primary-color;
|
|
margin-right: 7rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.form-item-header {
|
|
border-bottom: none;
|
|
margin-top: 20rpx;
|
|
}
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
flex-shrink: 0;
|
|
&.active {
|
|
font-weight: bold;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.value {
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
|
|
&.placeholder {
|
|
color: $secondary-text-color;
|
|
}
|
|
}
|
|
|
|
.select-area {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
}
|
|
|
|
.textarea-container {
|
|
// margin: 16rpx 0 32rpx 0;
|
|
// background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
// padding: 16rpx;
|
|
}
|
|
|
|
.image-upload {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24rpx;
|
|
margin: 16rpx 0;
|
|
|
|
.upload-btn {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border: 2rpx dashed $primary-color;
|
|
// border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.image-item {
|
|
position: relative;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: -12rpx;
|
|
right: -12rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: #ff4757;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.hint-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.form-item .radio-options {
|
|
display: flex;
|
|
gap: 60rpx;
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
|
|
.radio-dot {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border: 4rpx solid #ddd;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
&.active {
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background-color: $primary-color;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
|
|
&.active {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit-container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 32rpx;
|
|
background-color: #fff;
|
|
border-top: 2rpx solid #f0f0f0;
|
|
}
|
|
</style>
|