更新

Lou

2024-04-23 c58045702dde6f6ce21992ef781e151fb6c61abd

 subPackage/school/security.vue

@@ -1,8 +1,592 @@
<template>
   <view class="wrap">
      <view class="section mb-20">
         <u-collapse :value="itemIndex" ref="collapse">
            <u-collapse-item :title="item.title" :name="index" v-for="(item,index)  in questionList">
               <u-form :model="info" ref="form">
                  <block v-for="(i,k) in item.children">
                     <view class="f-30 c-33">
                        {{i.title}}
                     </view>
                     <u-form-item labelWidth="90" label="隐患" prop="gateStatus">
                        <view class="btn-group flex">
                           <view class="value-item" :class="i.state == 0?'active bgc-main c-ff':''"
                              @click="changeStatus(0,i,index,k)">
                              存在
                           </view>
                           <view class="value-item" :class="i.state == 1?'active bgc-main c-ff':''"
                              @click="changeStatus(1,i,index,k)">
                              不存在
                           </view>
                        </view>
                     </u-form-item>
                     <view class="" v-if="i.state == 0">
                        <u-form-item labelWidth="100" label="隐患照片" prop="gateStatus">
                           <u-upload :fileList="i.urls" :previewFullImage="uploadConfig.previewFullImage"
                              :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
                              :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
                              @afterRead="afterReadImgs($event,i,index,k)"
                              @delete="deleteImages($event,index,k)">
                              <view class="upload-item upload-icon flex_base">
                                 <u-icon name="/static/icon/upload.png" width="60rpx"
                                    height="60rpx"></u-icon>
                              </view>
                           </u-upload>
                        </u-form-item>
                        <u-form-item labelWidth="100" label="隐患描述" prop="gateStatus">
                           <u-textarea v-model="i.remark" placeholder="请输入隐患描述"
                              placeholderClass="c-99 f-26"></u-textarea>
                        </u-form-item>
                     </view>
                  </block>
               </u-form>
            </u-collapse-item>
         </u-collapse>
      </view>

      <view class="content bgc-ff">
         <view class="upload ">
            <view class="f-28 mb-20">其它隐患问题</view>
            <u-textarea v-model="info.remark" placeholder="请输入内容" placeholderClass="c-99 f-26"></u-textarea>
            <view class="mt-20">
               <view class="f-28 mb-20">图片</view>
               <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
                  :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
                  :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"
                  @delete="deletePic">
                  <view class="upload-item upload-icon flex_base">
                     <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
                  </view>
               </u-upload>
            </view>
         </view>


      </view>

      <!-- <footer-btn @click="sumitInfo"></footer-btn> -->


      <button class="submit-btn" @click="sumitInfo">提交</button>
      <button class="list-btn mb-20" @click="navTo">我上报的事件</button>


      <u-popup mode="bottom" :show="showSignature" round="10" :closeable="true" @close="showSignature=false">
         <view class="signture-popup">
            <jushi-signature :settings="signatureSettings" @change="signatureChange"></jushi-signature>
         </view>
      </u-popup>

      <view class="blank"></view>
   </view>
</template>

<script>
   import uploadMixin from "@/mixin/uploadMixinPlace";
   import {
      getPlaceCheckItem
   } from "@/api/place/place.js"

   import {
      savePlaceCheck,
      getPlaceCheckDetail,
      updatePlaceCheck,
      auditPlaceCheck
   } from "@/api/reporting/reporting.js"

   export default {
      mixins: [uploadMixin],
      data() {
         return {
            form: {
               images: []
            },
            info: {
               remark: "",
               imageUrls: "",
               signaturePath: ""
            },

            desc: "",
            title: "",
            curSelectSite: {},
            showSignature: false,
            signatureUrl: "",
            signatureSettings: { //签名设置
               width: '700', //签名区域的宽
               height: '800', //签名区域的高
               lineWidth: 3, //签名时线宽
               textColor: '#007AFF' //签名文字颜色
            },
            statusOption: [{
                  text: "存在",
                  value: 0
               },
               {
                  text: "不存在",
                  value: 1
               },
            ],
            questionList: [],
            itemIndex: [],
            patrolRecordVOList: [],
            count: 0,
            statusList: [{
                  name: "是",
                  id: 2
               },
               {
                  name: "否",
                  id: 1
               }
            ],
            time: Number(new Date()),
            showSelectDate: false,
            dangerCount: 0, //隐患项数量
            isEdit: false

         }
      },
      async onLoad(option) {
         await this.getItem();
         if (option.taskId) {
            this.isEdit = true;
            this.getDetail(option.taskId)
         } else {
            this.info.houseCode = uni.getStorageSync("siteInfo").houseCode;
            this.info.placeName = uni.getStorageSync("siteInfo").name;
         }



      },

      methods: {

         getDetail(id) {
            getPlaceCheckDetail({
               taskId: id
            }).then(res => {
               let data = res.data;
               for (let i = 0, ii = this.questionList.length; i < ii; i++) {
                  for (let k = 0, kk = this.questionList[i].children.length; k < kk; k++) {
                     for (let j = 0, jj = data.taskPlaceRecordVOList.length; j < jj; j++) {
                        if (this.questionList[i].children[k].id == data.taskPlaceRecordVOList[j].itemId) {
                           let children = this.questionList[i]
                           children.children[k].state = data.taskPlaceRecordVOList[j].state;
                           if (data.taskPlaceRecordVOList[j].imageUrls) {
                              children.children[k].urls = this.$setImageUrl(data.taskPlaceRecordVOList[j]
                                 .imageUrls, 2);
                           }
                           children.children[k].remark = data.taskPlaceRecordVOList[j].remark || "";
                           this.$set(this.questionList, i, children)
                        }
                     }
                  }
               }
               this.info.id = data.id;
               this.info.taskId = data.taskId;
               this.info.remark = data.remark;
               if (data.signaturePath) {
                  this.signatureUrl = this.$setFullUrl(data.signaturePath);
                  this.info.signaturePath = data.signaturePath;
               }
               this.form.images = this.$setImageUrl(data.imageUrls, 2)

            })
         },


         getItem() {
            getPlaceCheckItem({
               childType: 3,
               type: 3
            }).then(res => {
               let data = res.data;
               this.questionList = res.data;
               let arr = []
               let obj = {
                  itemId: "",
                  state: "",
                  imagesUrl: "",
                  remark: ""
               }
               let count = 0;
               for (let i = 0, ii = data.length; i < ii; i++) {
                  arr.push(i);
                  for (let k = 0, kk = data[i].children.length; k < kk; k++) {
                     // this.info.patrolRecordVOList.push(obj);
                     count += 1;
                  }
               }
               this.count = count;
               this.itemIndex = arr;
            })
         },

         changeStatus(value, item, fIndex, cIndex) {
            let children = this.questionList[fIndex];
            children.children[cIndex].state = value;
            this.$set(this.questionList, fIndex, children)
            if (value == 0 && !item.urls) {
               children.children[cIndex].urls = [];
               this.$set(this.questionList, fIndex, children)
            }
            this.$nextTick(() => {
               this.$refs.collapse.init();
            })
            this.getSelected()
         },

         getSelected() {
            let arr = [];
            let count = 0;
            for (let i = 0, ii = this.questionList.length; i < ii; i++) {
               for (let k = 0, kk = this.questionList[i].children.length; k < kk; k++) {
                  if (this.questionList[i].children[k].state != null) {
                     arr.push({
                        itemId: this.questionList[i].children[k].id,
                        state: this.questionList[i].children[k].state,
                        imageUrls: this.setImages(this.questionList[i].children[k].urls),
                        remark: this.questionList[i].children[k].remark || ""
                     })
                     if (this.questionList[i].children[k].state == 0) {
                        count += 1;
                     }
                  }
               }
            }
            this.dangerCount = count;
            return arr;
         },

         setImages(key) {
            if (!key) {
               return ""
            } else {
               let urls = [];
               for (let i of key) {
                  urls.push(i.name);
               }
               return urls.join(",")
            }
         },

         async afterReadImgs(event, item, fIndex, cIndex) {
            uni.showLoading({
               title: "上传中..."
            })
            let children = this.questionList[fIndex];
            let lists = [].concat(event.file)
            let fileListLen = item.urls.length;
            lists.map((item) => {
               children.children[cIndex].urls.push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               })
               this.$set(this.questionList, fIndex, children)
            })
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url)
               children.children[cIndex].urls.splice(fileListLen, 1, Object.assign({}, {
                  url: result.data.link,
                  name: result.data.name
               }))
               this.$set(this.questionList, fIndex, children)
               fileListLen++
            }
            this.loadingClose()
            this.getSelected()
         },

         deleteImages(event, fIndex, cIndex) {
            let children = this.questionList[fIndex];
            children.children[cIndex].urls.splice(event.index, 1);
            this.$set(this.questionList, fIndex, children);
            this.getSelected()
         },

         signatureChange(e) {
            // this.signatureUrl = e;
            this.uploadSignImg(e)
         },

         showSignPopup() {
            // if (this.getSelected().length < this.count) {
            //    this.$showTips("还有内容还未完善");
            //    return;
            // }

            let data = this.getSelected();
            for (let i of data) {
               if (i.state == 1) {
                  if (i.imageUrls || i.remark) {
                     i.imageUrls = "";
                     i.remark = "";
                  }
               } else {
                  if (!i.imageUrls && !i.remark) {
                     this.$showTips("请上传隐患照片或填写隐患描述");
                     return;
                  }
               }
            }
            this.showSignature = true;
         },

         uploadSignImg(url) {
            uni.uploadFile({
               url: this.uploadConfig.url,
               filePath: url,
               name: 'file',
               header: this.uploadConfig.header,
               success: (res) => {
                  console.log(res);
                  let data = JSON.parse(res.data);
                  if (res.statusCode == 200 && data.code == 200) {
                     // this.handleSubmit(data.data.name);
                     this.showSignature = false;
                     this.signatureUrl = data.data.link;
                     this.info.signaturePath = data.data.name;
                     // this.sumitInfo()
                  }
               }
            })
         },

         sumitInfo() {
            uni.showLoading({
               title: "加载中..."
            })
            if (this.form.images.length > 0) {
               let urls = []
               this.form.images.forEach(e => {
                  urls.push(e.name)
               })
               this.info.imageUrls = urls.join(",")
            }
            this.info.taskPlaceRecordVOList = this.getSelected()
            this.info.status = 1;
            if (this.isEdit) {
               auditPlaceCheck(this.info).then(res => {
                  uni.hideLoading();
                  uni.showToast({
                     icon: 'success',
                     title: '提交成功',
                     success() {
                        setTimeout(() => {
                           uni.navigateBack();
                        }, 300)
                     }
                  })
               })
            } else {
               savePlaceCheck(this.info).then(res => {
                  uni.hideLoading();
                  uni.showToast({
                     icon: 'success',
                     title: '提交成功',
                     success() {
                        setTimeout(() => {
                           uni.navigateBack();
                        }, 300)
                     }
                  })
               })
            }
         },


         previewImg() {
            uni.previewImage({
               urls: [this.signatureUrl],
               current: this.signatureUrl
            })
         },

         navTo() {
            uni.navigateTo({
               url: 'checkList'
            })
         },




      }
   }
</script>

<style>
<style lang="less">
   page {
      background-color: #f5f5f5;
   }

   .wrap {
      .section {
         padding: 0 20rpx;
         margin: 20rpx 20rpx 0;
         background-color: #fff;
      }
   }

   .top {
      display: flex;
      justify-content: flex-end;
      padding: 20rpx;
   }

   .top-btn {
      padding: 16rpx 22rpx;
      border-radius: 6rpx;
      text-align: center;
   }

   .content {
      margin: 20rpx;
      padding: 20rpx 30rpx;
   }

   .cell {
      margin: 0 20rpx;
      padding: 20rpx 30rpx;
   }

   .site-box {
      padding: 30rpx;
      margin: 20rpx 30rpx;
      border-radius: 4rpx;

      .c-aa {
         color: #aaa;
      }

      .address {
         width: 60%;
         margin-left: 25rpx;
      }
   }

   .upload-item {
      width: 140rpx;
      height: 140rpx;
      border: 1px solid #EEEEEE;
   }

   .upload {
      // margin: 0 30rpx;
      padding: 30rpx 0;
   }

   .submit-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }

   .list-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }

   .address-row {
      flex: 1;
      justify-content: flex-end;
      align-items: center;
   }

   .address-content {
      width: calc(100% - 116rpx - 20rpx);
      margin-right: 20rpx;
      text-align: right;
   }

   .location-btn {
      width: 116rpx;
      height: 46rpx;
      line-height: 46rpx;
      border-radius: 4rpx;
      border: 1px solid currentColor;
      padding: 0;
      background-color: #fff;
      text-align: center;
   }


   .signture-popup {
      padding-bottom: 20rpx;
   }

   .sign {
      padding: 30rpx;
      // margin: 0 30rpx;
   }

   .value-item {
      flex: 1;
      // background-color: #ffffff;
      // width: 120rpx;
      border: 2rpx solid #f5f5f5;
      height: 70rpx;
      line-height: 70rpx;
      box-sizing: border-box;
      text-align: center;
   }

   .active {
      border: 2rpx solid currentColor;
   }

   .btn-group {
      flex: 1;
   }

   /deep/ .u-cell__title-text {
      font-weight: bold;
      font-size: 30rpx;
   }

   /deep/ .u-form-item__body__left__content {
      font-size: 26rpx;
   }

   .blank {
      width: 100%;
      height: 140rpx;
   }


   .submit-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }

   .list-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }
</style>