<script setup>
|
import { ref ,onMounted} from 'vue';
|
import { searchMaintainApi,createMaintainApi } from '../../api/index.js'
|
import { BASE_URL } from '../../config/baseUrl.js';
|
|
const baseUrl = ref(BASE_URL)
|
const maintainList = ref([])
|
async function searchMaintain(){
|
await searchMaintainApi({limit:10000,page:1}).then((res) =>{
|
if(res.code == 200){
|
maintainList.value = res.data.list
|
maintainList.value.forEach((item) =>{
|
item.resultTypeView = item.resultType == 1 ? '正常' : ( item.resultType == 2 ? '异常' : '')
|
})
|
}
|
})
|
}
|
//添加记录
|
const popup = ref()
|
const rules = ref({
|
content: {
|
rules:[{required: true, errorMessage:'请输入', trigger: "blur"}],
|
},
|
inspectUser: {
|
rules:[{required: true, errorMessage:'请输入', trigger: "blur"}],
|
},
|
resultType: {
|
rules:[{required: true, errorMessage:'请输入', trigger: "blur"}],
|
},
|
})
|
const formRef =ref()
|
const form = ref({
|
url:undefined,
|
content: '',
|
inspectUser: '',
|
resultType:1,//2:未完成，1：已完成
|
})
|
function openForm(){
|
popup.value.open()
|
}
|
function radioChange(e){
|
form.value.resultType = e.detail.value
|
console.log('e',e,'form',form.value.resultType)
|
}
|
//上传图片
|
function uploadImg(val){
|
uni.chooseImage({
|
success: async(res) =>{
|
//建立表单，请求参数传表单形式
|
let fileForm = {
|
file1:res.tempFiles,
|
path:'qingyuan'
|
}
|
uni.uploadFile({
|
url:BASE_URL+ '/file/upload',
|
filePath:res.tempFilePaths[0],
|
name: 'file',
|
formData:fileForm,
|
success: (success) => {
|
console.log('文件上传响应',success);
|
let dataObj = JSON.parse(success.data)
|
form.value.url = dataObj.data.newFileName
|
console.log('url',form.value.url)
|
},
|
fail: (err) => {
|
uni.showToast({
|
title: '上传失败，请重试',
|
duration: 2000,
|
icon:'none'
|
});
|
console.log('err',err,res.tempFilePaths[0])
|
}
|
});
|
}
|
});
|
}
|
function concel(){
|
form.value = {
|
url:undefined,
|
content: '',
|
inspectUser: '',
|
resultType:1,
|
}
|
formRef.value.clearValidate()
|
popup.value.close()
|
}
|
async function confirmAdd(){
|
formRef.value.validate().then(async(validate)=>{
|
if(form.value.url){
|
let res = await createMaintainApi(form.value)
|
if(res.code === 200){
|
uni.showToast({
|
title:'添加成功'
|
})
|
concel()
|
await searchMaintain()
|
}else{
|
uni.showToast({
|
title:'添加失败',
|
icon:'none'
|
})
|
concel()
|
}
|
}else{
|
uni.showToast({
|
title:'请上传图片',
|
icon:'none'
|
})
|
}
|
|
}).catch((err)=>{})
|
}
|
onMounted(async() =>{
|
await searchMaintain()
|
})
|
</script>
|
<template>
|
<view class="container">
|
<navbar title = '维护记录'></navbar>
|
<view class="content">
|
<view v-if="maintainList.length > 0" class="main">
|
<view v-for="(item,index) in maintainList" class="item">
|
<view class="item-child">
|
<text>维修人：</text>
|
<text class="value">{{item.inspectUser}}</text>
|
</view>
|
<view class="item-child-area">
|
<view>维修内容:</view>
|
<textarea class="text-area value" :maxlength='100'>{{item.content}}</textarea>
|
</view>
|
<view class="item-child">
|
<text>维修状态：</text>
|
<text class="value">{{item.resultTypeView}}</text>
|
</view>
|
<!-- <view class="item-child">
|
<text>备注：</text>
|
<text class="value remark">{{item.remark}}</text>
|
</view> -->
|
<view class="item-child">
|
<text>维修时间：</text>
|
<text class="value-time">{{item.createTimeView}}</text>
|
</view>
|
<view class="item-child-area">
|
<text>上传图片：</text>
|
<view class="item-img-box">
|
<image class="item-img" :src="baseUrl + '/upload' + item.url" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="nodata" v-else>
|
<image class="nodata-img" src="../../static/images/other/nodata.png" mode="widthFix"></image>
|
</view>
|
<view @click="openForm" class="add-record">添加记录</view>
|
</view>
|
<!-- 新增弹窗 -->
|
<uni-popup ref="popup" :is-mask-click ='false' type="center" border-radius="20px">
|
<view class="dialog-box">
|
<view>
|
<uni-forms ref="formRef" :model="form" :rules="rules">
|
<uni-forms-item label="维护人员:" label-width='85' name="inspectUser">
|
<uni-easyinput class="input" v-model="form.inspectUser" placeholder="请输入维护人员">></uni-easyinput>
|
</uni-forms-item>
|
<uni-forms-item label="维护内容:" label-width='85' name="content">
|
<uni-easyinput class="input" v-model="form.content" placeholder="请输入维护内容">></uni-easyinput>
|
</uni-forms-item>
|
<uni-forms-item label="是否完成:" label-width='85' name='resultType'>
|
<radio-group @change="radioChange">
|
<view class="radio-box">
|
<radio :value="1" :checked="form.resultType == 1"/>
|
<text class="radio-text">完成</text>
|
</view>
|
<view>
|
<radio :value="2" :checked="form.resultType == 2"/>
|
<text class="radio-text">未完成</text>
|
</view>
|
</radio-group>
|
</uni-forms-item>
|
</uni-forms>
|
</view>
|
<!-- 上传图片 -->
|
<view class="upload-box">
|
<view class="upload-title">选择照片</view>
|
<view class="upload-img">
|
<view @click="uploadImg()" class="upload-img-item">
|
<image v-if="form.url" :src="baseUrl + '/upload' + form.url" mode="aspectFit"></image>
|
<image v-else class="default-img" src="../../static/images/other/img-add.png" alt=""></image>
|
</view>
|
</view>
|
</view>
|
<view class="button-box">
|
<button class="btn1" @click="concel">取消</button>
|
<button class="btn2" @click="confirmAdd">确认</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
box-sizing: border-box;
|
.content{
|
height:calc(100vh - 176rpx);
|
background: linear-gradient(to bottom,#8BC1FC 0%,#D2F2FE 30%,#D2F2FE 100%);
|
padding:30rpx 30rpx 100rpx;
|
box-sizing: border-box;
|
.main{
|
width:100%;
|
height:calc(100% - 120rpx);
|
padding:20rpx;
|
box-sizing: border-box;
|
background:rgba(255, 255, 255, 0.6);
|
border-radius:10rpx;
|
overflow: scroll;
|
.item{
|
width:100%;
|
// height:500rpx;
|
border:1rpx solid rgba(77,173,225,0.3);
|
border-radius:10rpx;
|
background: rgba(255, 255, 255, 0.6);
|
margin-bottom:40rpx;
|
display: flex;
|
flex-direction: column;
|
padding:20rpx 30rpx;
|
justify-content: space-between;
|
box-sizing: border-box;
|
color: rgba(48,102,218,0.6);
|
box-shadow: 0 3rpx 5rpx 1rpx rgba(197, 199, 203, 0.6);
|
.value{
|
color: rgba(86, 86, 90, 1.0);
|
}
|
.value-time{
|
color: rgba(86, 86, 90,0.8);
|
font-size:26rpx;
|
}
|
.item-child{
|
width:100%;
|
margin-bottom:20rpx;
|
.remark{
|
margin-left:5%;
|
font-size:28rpx;
|
}
|
}
|
.item-child-area{
|
width:100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom:20rpx;
|
.text-area{
|
width:90%;
|
margin-top:20rpx;
|
margin-left:5%;
|
border:1rpx solid rgba(116, 160, 255, 0.3);
|
font-size:28rpx;
|
padding:20rpx;
|
box-sizing: border-box;
|
border-radius:10rpx;
|
}
|
.item-img-box{
|
width:220rpx;
|
height:220rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1rpx dashed #8BC1FC;
|
margin-top:20rpx;
|
margin-left:10%;
|
.item-img{
|
width:200rpx;
|
height:200rpx;
|
}
|
}
|
}
|
}
|
}
|
.nodata{
|
width:100%;
|
height:calc(100% - 120rpx);
|
display: flex;
|
justify-content: center;
|
background: rgba(255,255,255,0.6);
|
border-radius:10rpx;
|
padding-top:150rpx;
|
box-sizing: border-box;
|
.nodata-img{
|
width: 520rpx;
|
}
|
}
|
.add-record{
|
margin: 40rpx auto 0;
|
background-color: #5b93dc;
|
width:500rpx;
|
height:85rpx;
|
line-height:85rpx;
|
text-align: center;
|
border-radius: 50rpx;
|
color: #fff;
|
letter-spacing:2rpx;
|
font-size:38rpx;
|
font-weight:500;
|
}
|
}
|
.dialog-box{
|
width:650rpx;
|
// height:500rpx;
|
background: #fafbfc;
|
padding:40rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content:center;
|
flex-direction: column;
|
border-radius:20rpx;
|
.input{
|
align-items: center;
|
}
|
.button-box{
|
width:100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.btn1{
|
line-height:60rpx;
|
width:180rpx;
|
height:60rpx;
|
background: #fcfcfc;
|
color: #505354;
|
}
|
.btn2{
|
line-height:60rpx;
|
width:180rpx;
|
height:60rpx;
|
background: #b7cafc;
|
color: #484b4c;
|
}
|
}
|
.upload-box{
|
width:100%;
|
.upload-title{
|
color: #6a717e;
|
margin-top: 10rpx;
|
}
|
.upload-img{
|
display: flex;
|
padding:30rpx 14rpx;
|
box-sizing: border-box;
|
.upload-img-item{
|
width: 180rpx;
|
height:180rpx;
|
border-radius:20rpx;
|
border:1rpx dashed #b7d4ff;
|
margin-bottom: 10rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
image{
|
width:170rpx;
|
height:170rpx;
|
}
|
.default-img{
|
width:120rpx;
|
height:120rpx;
|
}
|
}
|
}
|
}
|
.radio-box{
|
margin-bottom:6rpx;
|
}
|
.radio-text{
|
color: #5b93dc;
|
}
|
}
|
}
|
|
</style>
|
