Merge remote-tracking branch 'origin/master'

rk

2025-09-24 f3c59a17062fb0a89b5f89b7845341386952a6b1

 h5/pages/staff/snapshot.vue

@@ -1,198 +1,587 @@
<template>
   <view class="main_app">
      <view class="main_wrap">
         <!--  -->
         <view class="line">
            <view class="label">
               <text>*</text>
               <text>隐患区域</text>
            </view>
            <view class="value" @click="isShowArea = true">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</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.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</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">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="upload_line">
            <view class="name">现场情况</view>
            <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-if="!param.imgurlUrl"><u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon></view>
            <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-else><image :src="param.imgurlUrl" mode="widthFix"></image></view>
         </view>

         <view class="line">
            <view class="label">
               <text></text>
               <text>提报人</text>
            </view>
            <view class="value"><input type="text" placeholder="请输入提报人" v-model="param.receptMemberName" @blur="getUser" placeholder-style="color: #999999;" /></view>
         </view>
         <view class="line">
            <view class="label">
               <text></text>
               <text>联系电话</text>
            </view>
            <view class="value"><input type="text" placeholder="请输入联系电话" v-model="param.receptMemberName" @blur="getUser" placeholder-style="color: #999999;" /></view>
         </view>
         <view class="line">
            <view class="label">
               <text></text>
               <text>提报时间</text>
            </view>
            <view class="value">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
      </view>
      <!--  -->
      <!-- 区域 -->
      <u-picker keyName="name" :show="isShowArea" :columns="areaOptions" @confirm="seletedArea" @cancel="isShowArea = false"></u-picker>
   </view>
</template>

<script>
   import { uploadUrl } from '@/api'
export default {
   data() {
      return {
         param: {},
         isShowArea: false,
         areaOptions: [[{ name: '111', id: 11 }, { name: '111', id: 11 }]]
      };
   },
   methods: {
      seletedArea(e) {
         const item = e.value[0];
         console.log(item);
         this.isShowArea = false;
      },
      selMember() {
         uni.navigateTo({
            url: '/pages/staff/memberSel'
         });
      },
      upload() {
         uni.chooseImage({
            success: (chooseImageRes) => {
               uni.showLoading({ title: '上传中', mask: true });
               for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                  uni.uploadFile({
                     url: `${uploadUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
                     filePath: chooseImageRes.tempFilePaths[i],
                     name: 'file',
                     formData: {
                        folderCode: 'MEMBER_IMG'
                     },
                     success: (uploadFileRes) => {
                        console.log('uploadFileRes', uploadFileRes);
                        let res = JSON.parse(uploadFileRes.data)
                        if (type === 'faceImg') {
                           this.param.faceImg = res.data.halfPath
                           this.param.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                        } else {
                           this.param.imgurl = res.data.halfPath
                           this.param.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                        }
                     },
                     complete() {
                        if (i === chooseImageRes.tempFilePaths.length - 1) {
                           uni.hideLoading();
                        }
                     }
                  });
               }
<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="isShow = true">

               <text class="mr6"

                  :style="{ color: param.checkTypeName ? '#000000' : '#999999' }">{{ param.checkTypeName ? param.checkTypeName : "请选择" }}</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="请详细描述现场情况" 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-picker keyName="name" :show="isShow" closeOnClickOverlay :columns="checkTypeList" @confirm="seletedTypeVal"

         @close="isShow = false" @cancel="isShow = 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: [],



            isShow: false,

            isShowCompany: false,

            isShowArea: false,

            isShowType: false,

            isShowTime: false,

            showUpload: false,



            deptList: [],

            areaOptions: [],

            areaType: [],

            checkTypeList: [],

         }

      },

      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}年`
            }
         });
      },
      getUser() {}
   }
};
</script>

<style lang="scss" scoped>
.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;
            if (type === 'month') {
               return `${value}月`
            }
         }
      }
      .value {
         flex: 1;
         height: 100%;
         margin-left: 30rpx;
         display: flex;
         align-items: center;
         justify-content: flex-end;
         input {
            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

         },

         seletedTypeVal(e) {

            const item = e.value[0]

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

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

            console.log(item)

            this.isShow = 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: '2'

            }).then(res => {

               this.checkTypeList = [res.data]

               this.$set(this.param, 'checkTypeId', res.data[0].id)

               this.$set(this.param, 'checkTypeName', res.data[0].name)

            })

            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%;
            height: 100%;
            text-align: right;
            font-size: 28rpx;
            font-weight: 400;
            color: #222222;
         }
      }
   }
   .upload_line {
      padding: 30rpx 0;
      .adduser_list_item_ipt1_upload {
         margin-top: 24rpx;
         width: 120rpx;
         height: 120rpx;
         border: 2rpx solid #E5E5E5;
         background: #f7f7f7;
         color: #666666;
         font-size: 22rpx;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         image {
            width: 100%;
            height: 100%;
         }
      }
   }
}
.main_app {
   // padding-top: 10rpx;
}

.empty {
   width: 750rpx;
   height: 20rpx;
   background-color: #f7f7f7;
   margin: 0 -30rpx;
}
</style>
         }

         .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>