From d92ab3161161f1f038680c6b52e5baf5a259f574 Mon Sep 17 00:00:00 2001 From: Liuyi <candymxq888@outlook.com> Date: 星期六, 21 十二月 2024 16:55:28 +0800 Subject: [PATCH] 添加设备维护及巡检新增功能 --- pagesAdmin/adminPlatform/inspect.vue | 232 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 229 insertions(+), 3 deletions(-) diff --git a/pagesAdmin/adminPlatform/inspect.vue b/pagesAdmin/adminPlatform/inspect.vue index 71168a7..69738ff 100644 --- a/pagesAdmin/adminPlatform/inspect.vue +++ b/pagesAdmin/adminPlatform/inspect.vue @@ -1,6 +1,6 @@ <script setup> import { ref ,onMounted} from 'vue'; - import { searchExamineApi } from '../../api/index.js' + import { searchExamineApi,createExamineApi} from '../../api/index.js' import { BASE_URL } from '../../config/baseUrl.js'; const baseUrl = ref(BASE_URL) @@ -14,6 +14,103 @@ }) } }) + } + //添加记录 + 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({ + inspectUrl:undefined, + content: '', + inspectUser: '', + resultType:1,//2:未完成,1:已完成 + remark:'', + }) + 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.inspectUrl = dataObj.data.newFileName + console.log('url',form.value.inspectUrl) + }, + fail: (err) => { + uni.showToast({ + title: '上传失败,请重试', + duration: 2000, + icon:'none' + }); + console.log('err',err,res.tempFilePaths[0]) + } + }); + } + }); + } + function concel(){ + form.value = { + inspectUrl:undefined, + content: '', + inspectUser: '', + resultType:1, + remark:'', + } + formRef.value.clearValidate() + popup.value.close() + } + async function confirmAdd(){ + formRef.value.validate().then(async(validate)=>{ + if(form.value.inspectUrl){ + let res = await createExamineApi(form.value) + if(res.code === 200){ + uni.showToast({ + title:'添加成功' + }) + concel() + await searchExamine() + }else{ + uni.showToast({ + title:'添加失败', + icon:'none' + }) + concel() + } + }else{ + uni.showToast({ + title:'请上传图片', + icon:'none' + }) + } + + }).catch((err)=>{}) } onMounted(async() =>{ await searchExamine() @@ -56,7 +153,53 @@ <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-item label="备注:" label-width='85' name="remark"> + <uni-easyinput class="input" v-model="form.remark" placeholder="请输入备注">></uni-easyinput> + </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.inspectUrl" :src="baseUrl + '/upload' + form.inspectUrl" 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> @@ -71,7 +214,7 @@ box-sizing: border-box; .main{ width:100%; - height:100%; + height:calc(100% - 120rpx); padding:20rpx; box-sizing: border-box; background:rgba(255, 255, 255, 0.6); @@ -136,7 +279,7 @@ } .nodata{ width:100%; - height:100%; + height:calc(100% - 120rpx); display: flex; justify-content: center; background: rgba(255,255,255,0.6); @@ -147,6 +290,89 @@ 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; + } } } -- Gitblit v1.9.3