更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/staff/snapshot.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,555 @@
<template>

   <view class="main_app">

      <view class="main_wrap">

         <!--  -->

         <view class="line">

            <view class="label">

               <text>*</text>

               <text>责任部门</text>

            </view>

            <view class="value" @click="isShowCompany = true">

               <text class="mr6"

                  :style="{ color: param.companyName ? '#000000' : '#999999' }">{{ param.companyName ? param.companyName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

         <view class="line">

            <view class="label">

               <text>*</text>

               <text>隐患区域</text>

            </view>

            <view class="value" @click="openArea">

               <text class="mr6"

                  :style="{ color: param.areaName ? '#000000' : '#999999' }">{{ param.areaName ? param.areaName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

         <view class="line">

            <view class="label">

               <text>*</text>

               <text>接收人</text>

            </view>

            <view class="value" @click="selMember">

               <text class="mr6"

                  :style="{ color: param.checkorName ? '#000000' : '#999999' }">{{ param.checkorName ? param.checkorName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

         <view class="empty"></view>

         <view class="line">

            <view class="label">

               <text>*</text>

               <text>隐患类型</text>

            </view>

            <view class="value" @click="isShowType = true">

               <text class="mr6"

                  :style="{ color: param.categoryName ? '#000000' : '#999999' }">{{ param.categoryName ? param.categoryName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

         <view class="upload_line">

            <view class="name">现场情况</view>

            <view class="wrap">

               <view class="adduser_list_item_ipt1_upload" @click="showUpload = true">

                  <u-icon name="plus" color="rgb(153, 153, 153)" size="20"></u-icon>

                  <view class="mt6">图片/视频</view>

               </view>

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in submitFileList" :key="i">

                  <u-icon class="close" size="20" name="close-circle-fill" color="red" @click="fileDel(i)"></u-icon>

                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>

                  <!--                   <video v-if="item.type == 1"

                     :src="item.fileurlFull" :controls="false" :show-center-play-btn="false"></video> -->

                  <view v-if="item.type == 1" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

         </view>

         <view class="empty"></view>

         <view class="upload_line" style="padding: 15px 0 0">

            <view class="name" style="margin-bottom: 10rpx">

               <text style="color: #e42d2d">*</text>

               <text>情况说明</text>

            </view>

            <view class="value">

               <textarea placeholder="请详细描述现场情况，不少于10个字" minlength="10" v-model="param.content"

                  placeholder-style="color: #999999;" />

            </view>

         </view>

         <view class="empty"></view>

         <view class="line">

            <view class="label">

               <text></text>

               <text>提报人</text>

            </view>

            <view class="value"><input type="text" disabled placeholder="请输入提报人" v-model="param.memberName"

                  placeholder-style="color: #999999;" /></view>

         </view>

         <view class="line">

            <view class="label">

               <text></text>

               <text>联系电话</text>

            </view>

            <view class="value"><input type="tel" disabled placeholder="请输入联系电话" v-model="param.memberPhone"

                  placeholder-style="color: #999999;" /></view>

         </view>

         <view class="line">

            <view class="label">

               <text></text>

               <text>提报时间</text>

            </view>

            <view class="value" @click="isShowTime = true">

               <text class="mr6"

                  :style="{ color: param.submitTime ? '#000000' : '#999999' }">{{ param.submitTime ? param.submitTime : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>



         <view class="footer">

            <view class="footer_btn" @click="onSubmit">提交</view>

         </view>

      </view>

      <!--  -->

      <u-picker keyName="name" :show="isShowCompany" closeOnClickOverlay :columns="deptList" @confirm="seletedCompany"

         @close="isShowCompany = false" @cancel="isShowCompany = false"></u-picker>

      <!-- åŒºåŸŸ -->

      <u-picker keyName="name" :show="isShowArea" closeOnClickOverlay :columns="areaOptions" @confirm="seletedArea"

         @close="isShowArea = false" @cancel="isShowArea = false"></u-picker>

      <u-picker keyName="name" :show="isShowType" closeOnClickOverlay :columns="areaType" @confirm="seletedType"

         @close="isShowType = false" @cancel="isShowType = false"></u-picker>

      <!--  -->

      <u-datetime-picker :show="isShowTime" :formatter="formatter" :minDate="new Date().getTime()" mode="datetime" closeOnClickOverlay

         @cancel="isShowTime = false" @close="isShowTime = false" @confirm="seletedDate"></u-datetime-picker>

      <!--  -->

      <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>

         <view class="upload_wrap">

            <view class="btn" @click="uploadImage">选择图片</view>

            <view class="btn" @click="uploadVideo">选择视频</view>

         </view>

      </u-popup>

   </view>

</template>



<script>

   import {

      uploadUrl,

      DangerCreate,

      DangerConfigType,

      deptListPost

   } from '@/api'

   import dayjs from 'dayjs'

   export default {

      data() {

         return {

            param: {},

            submitFileList: [],



            isShowCompany: false,

            isShowArea: false,

            isShowType: false,

            isShowTime: false,

            showUpload: false,



            deptList: [],

            areaOptions: [],

            areaType: [],

         }

      },

      onLoad(option) {

         this.initConfig()

         const userInfo = uni.getStorageSync('userInfo') || {}

         this.$set(this.param, 'memberName', userInfo.realname)

         this.$set(this.param, 'memberPhone', userInfo.mobile)

         this.$set(this.param, 'memberId', userInfo.id)

         this.$set(this.param, 'submitTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))

      },

      mounted() {

         this.$eventBus.$on('snapshotSel', (option) => {

            this.$set(this.param, 'checkUserId', option.id)

            this.$set(this.param, 'applyCheckUserId', option.id)

            this.$set(this.param, 'checkorName', option.name)

         })

      },

      methods: {
         formatter(type, value) {
            if (type === 'year') {
               return `${value}å¹´`
            }
            if (type === 'month') {
               return `${value}月`
            }
            if (type === 'day') {
               return `${value}日`
            }
            if (type === 'hour') {
               return `${value}时`
            }
            if (type === 'minute') {
               return `${value}分`
            }
            return value
         },

         onSubmit() {

            const {

               param,

               submitFileList

            } = this

            if (!param.companyName) return uni.showToast({

               title: '请选择责任部门',

               icon: 'none'

            })

            if (!param.areaName) return uni.showToast({

               title: '请选择隐患区域',

               icon: 'none'

            })

            if (!param.applyCheckUserId) return uni.showToast({

               title: '请选择接收人',

               icon: 'none'

            })

            if (!param.categoryName) return uni.showToast({

               title: '请选择隐患类型',

               icon: 'none'

            })

            if (!param.content) return uni.showToast({

               title: '请输入情况说明',

               icon: 'none'

            })

            if (param.content.length < 10) return uni.showToast({

               title: '情况说明不得小于10个字',

               icon: 'none'

            })



            DangerCreate({

               ...param,

               submitFileList

            }).then(res => {

               if (res.code === 200) {

                  this.$jump('/pages/staff/snapshotResult')

               }

            })

         },

         seletedCompany(e) {

            const item = e.value[0]

            this.$set(this.param, 'companyId', item.id)

            this.$set(this.param, 'companyName', item.name)

            this.$set(this.param, 'areaId', '')

            this.$set(this.param, 'areaName', '')
            this.$set(this.param, 'checkUserId', '')
            this.$set(this.param, 'applyCheckUserId', '')
            this.$set(this.param, 'checkorName', '')

            DangerConfigType({

               type: '0',

               companyId: item.id

            }).then(res => {

               this.areaOptions = [res.data]

            })

            this.isShowCompany = false

         },
         openArea() {
            if(!this.param.companyId) return this.showToast('请先选择责任部门')
            this.isShowArea = true
         },

         seletedArea(e) {

            const item = e.value[0]

            this.$set(this.param, 'areaId', item.id)

            this.$set(this.param, 'areaName', item.name)

            console.log(item)

            if (item.memberIds && item.memberIds.indexOf(',') === -1) {

               this.$set(this.param, 'checkUserId', item.memberIds)

               this.$set(this.param, 'applyCheckUserId', item.memberIds)

               this.$set(this.param, 'checkorName', item.memberNames)

            } else {

               this.$set(this.param, 'checkUserId', '')

               this.$set(this.param, 'applyCheckUserId', '')

               this.$set(this.param, 'checkorName', '')

            }

            this.isShowArea = false

         },

         seletedType(e) {

            const item = e.value[0]

            this.$set(this.param, 'cateId', item.id)

            this.$set(this.param, 'categoryName', item.name)

            console.log(item)

            this.isShowType = false

         },

         seletedSafety(e) {



         },

         seletedDate(e) {

            this.$set(this.param, 'submitTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))

            this.isShowTime = false

         },

         initConfig() {

            deptListPost({

               queryHiddenDanger: 1

            }).then(res => {

               this.deptList = [res.data]

            })

            DangerConfigType({

               type: '1'

            }).then(res => {

               this.areaType = [res.data]

            })

            DangerConfigType({

               type: '0'

            }).then(res => {

               this.areaOptions = [res.data]

            })

         },

         selMember() {

            if (!this.param.areaId) return uni.showToast({

               title: '请先选择隐患区域',

               icon: 'none'

            })

            uni.navigateTo({

               url: '/pages/staff/memberSel?areaId=' + this.param.areaId

            })

         },

         fileDel(i) {

            this.submitFileList.splice(i, 1)

         },

         uploadImage() {

            this.showUpload = false

            let token = uni.getStorageSync('token') || ''

            uni.chooseImage({

               count: 9,

               success: (chooseImageRes) => {

                  uni.showLoading({

                     title: '上传中',

                     mask: true

                  })

                  const tempFilePaths = chooseImageRes.tempFilePaths

                  let imgs = tempFilePaths.map((value, index) => {

                     return {

                        name: 'file',

                        uri: value

                     }

                  })

                  uni.uploadFile({

                     url: `${uploadUrl}`,

                     files: imgs,

                     name: 'file',

                     formData: {

                        folder: 'HIDDEN_DANGER_FILE'

                     },

                     header: {

                        Dm_user_token: token

                     },

                     success: (uploadFileRes) => {

                        let res = JSON.parse(uploadFileRes.data)

                        console.log('res', res.data)

                        if (res.data && res.data.length > 0) {

                           res.data.forEach(i => {

                              i.type = 0

                              i.fileurl = i.imgaddr

                              i.fileurlFull = i.url

                              this.submitFileList.push(i)

                           })

                        }

                     },

                     fail(err) {

                        console.log('err', err)

                     },

                     complete() {

                        uni.hideLoading()

                        // if (i === chooseImageRes.tempFilePaths.length - 1) {

                        //   uni.hideLoading()

                        // }

                     }

                  })

                  // }

               }

            })

         },

         uploadVideo() {

            this.showUpload = false

            let that = this

            let token = uni.getStorageSync('token') || ''

            uni.chooseVideo({

               success: (chooseImageRes) => {

                  uni.showLoading({

                     title: '上传中',

                     mask: true

                  })

                  uni.uploadFile({

                     url: `${uploadUrl}`,

                     filePath: chooseImageRes.tempFilePath,

                     header: {

                        Dm_user_token: token

                     },

                     name: 'file',

                     formData: {

                        folder: 'HIDDEN_DANGER_FILE'

                     },

                     success: (uploadFileRes) => {

                        let res = JSON.parse(uploadFileRes.data)

                        if (res.data && res.data.length > 0) {

                           res.data.forEach(i => {

                              i.type = 1

                              i.fileurl = i.imgaddr

                              i.fileurlFull = i.url

                              this.submitFileList.push(i)

                           })

                        }

                     },

                     complete() {

                        uni.hideLoading()

                     }

                  })

               }

            })

         },



         getUser() {}

      }

   };

</script>



<style lang="scss">

   .main_wrap {



      .line {

         display: flex;

         justify-content: space-between;

         align-items: center;

         border-bottom: 1rpx solid #e5e5e5;

         padding: 30rpx 0;



         .label {

            font-size: 30rpx;

            font-weight: 400;



            text {

               &:nth-child(1) {

                  color: #e42d2d;

                  margin-right: 4rpx;

               }

            }

         }



         .value {

            flex: 1;

            height: 100%;

            margin-left: 30rpx;

            display: flex;

            align-items: center;

            justify-content: flex-end;



            input {

               width: 100%;

               height: 100%;

               text-align: right;

               font-size: 28rpx;

               font-weight: 400;

               color: #222222;

            }

         }

      }



      .upload_line {

         padding: 30rpx 0;



         .wrap {

            display: flex;

            flex-wrap: wrap;

         }

         textarea{
            width: 100%;
         }

         .adduser_list_item_ipt1_upload {

            margin-top: 24rpx;

            width: 156rpx;

            height: 156rpx;

            margin-right: 20rpx;

            border: 2rpx solid #e5e5e5;

            background: #f7f7f7;

            color: #666666;

            font-size: 22rpx;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            position: relative;



            &:nth-of-type(4n) {

               margin-right: 0;

            }



            .close {

               position: absolute;

               right: -20rpx;

               top: -20rpx;

               z-index: 9999;

            }



            .video_wrap {

               position: relative;

               border: 1px solid;

               width: 156rpx;

               height: 156rpx;

               border-radius: 4rpx;



               .play {

                  width: 60rpx !important;

                  height: 60rpx !important;

                  position: absolute;

                  top: 50%;

                  left: 50%;

                  transform: translate(-50%, -50%);

               }

            }



            image {

               width: 100%;

               height: 100%;

            }



            video {

               width: 100%;

               max-height: 156rpx;

            }

         }

      }

   }



   .upload_wrap {

      width: 100%;



      .btn {

         height: 90rpx;

         line-height: 90rpx;

         text-align: center;

      }

   }



   .footer {

      width: 100%;

      padding: 0 30rpx;

      margin-top: 80rpx;

      padding-bottom: env(safe-area-inset-bottom);

      box-sizing: border-box;

      // position: fixed;

      // left: 0;

      // bottom: 68rpx;



      .footer_btn {

         width: 100%;

         height: 88rpx;

         line-height: 88rpx;

         text-align: center;

         background: $uni-color-primary;

         border-radius: 44rpx;

         font-size: 32rpx;

         color: #ffffff;

      }

   }



   .empty {

      width: 750rpx;

      height: 20rpx;

      background-color: #f7f7f7;

      margin: 0 -30rpx;

   }

</style>