Merge remote-tracking branch 'origin/master'

jiangping

2024-05-31 6be28040e74e1ff7764478174a9b5d706fe4fc39

 h5/pages/staff/snapshot.vue

@@ -1,198 +1,427 @@
<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="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.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="28"></u-icon
          ></view>
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in submitFileList"
            :key="i"
            ><image :src="item.fileurlFull" mode="widthFix"></image
          ></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="text"
            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="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>
      <view class="footer"
        ><view class="footer_btn" @click="onSubmit">提交</view></view
      >
    </view>
    <!--  -->
    <!-- 区域 -->
    <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"
      :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 } from '@/api'
import {
  uploadUrl,
  DangerCreate,
  DangerConfigType
} from '@/api'
import dayjs from 'dayjs'
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();
                        }
                     }
                  });
               }
            }
         });
      },
      getUser() {}
   }
  data() {
    return {
      param: {},
      submitFileList: [],

      isShowArea: false,
      isShowType: false,
      isShowTime: false,
      showUpload: false,

      areaOptions: [],
      areaType: [],
    }
  },
  onLoad(option) {
    if (option && option.id) {
      this.$set(this.param, 'checkUserId', option.id)
      this.$set(this.param, 'applyCheckUserId', option.id)
      this.$set(this.param, 'checkorName', option.name)
    }
    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'))
  },
  methods: {
    onSubmit() {
      const { param, submitFileList } = this
      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'
      })

      DangerCreate({
        ...param,
        submitFileList
      }).then(res => {
        if (res.code === 200) {
          this.$jump('/pages/staff/snapshotResult')
        }
      })
    },
    seletedArea(e) {
      const item = e.value[0]
      this.$set(this.param, 'areaId', item.id)
      this.$set(this.param, 'areaName', item.name)
      console.log(item)
      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() {
      DangerConfigType({ type: '1' }).then(res => {
        this.areaType = [res.data]
      })
      DangerConfigType({ type: '0' }).then(res => {
        this.areaOptions = [res.data]
      })
    },
    selMember() {
      uni.navigateTo({
        url: '/pages/staff/memberSel'
      })
    },
    uploadImage() {
      this.showUpload = false
      uni.chooseImage({
        count: 6,
        success: (chooseImageRes) => {
          console.log('chooseImageRes.tempFilePaths', chooseImageRes.tempFilePaths)
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('res', res)
                let obj = {
                  type: '0'
                }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                this.submitFileList.push(obj)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },
    uploadVideo() {
      this.showUpload = false
      let that = this
      uni.chooseVideo({
        success: (chooseImageRes) => {
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('uploadFileRes', res)
                let obj = { type: '1' }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                that.submitFileList.push(obj)
                console.log(that.submitFileList)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  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;
      .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%;
         }
      }
   }
  .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;
    }
    .adduser_list_item_ipt1_upload {
      margin-top: 24rpx;
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;
      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;
.upload_wrap {
  width: 100%;
  .btn {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
  }
}
.footer {
  width: 100%;
  padding: 0 30rpx;
  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: #4e99a9;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.empty {
   width: 750rpx;
   height: 20rpx;
   background-color: #f7f7f7;
   margin: 0 -30rpx;
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
</style>