添加设备维护及巡检新增功能

Liuyi

2024-12-21 d92ab3161161f1f038680c6b52e5baf5a259f574

 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;
         }
      }
   }