更新

Lou

2024-02-01 24a04767b281739056ed0658bb956fccbe84cb1d

 subPackage/workbench/views/checkReform.vue

@@ -1,312 +1,185 @@
<template>
   <view class="wrap">
      <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 class="content">
         <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 class="">
      <view class="item-row flex j-c-s-b a-i-c">
         <text>场所名称</text>
         <text class="item-content">{{info.placeName}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c">
         <text>标签</text>
         <text>{{label || "未完善"}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c">
         <text>场所负责人</text>
         <text>{{info.principal || "未完善"}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c">
         <text>场所负责人电话</text>
         <text>{{info.principalPhone || "未完善"}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c">
         <text>检查人</text>
         <text>{{info.name}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c">
         <text>检查时间</text>
         <text>{{info.createTime}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c">
         <text>地址</text>
         <text class="item-content">{{info.location}}</text>
      </view>

      <footer-btn @click="sumitInfo"></footer-btn>
      <view class="item-row flex j-c-s-b a-i-c" v-if="info.remark">
         <text>其它隐患问题</text>
         <text class="item-content">{{info.remark}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c" v-if="info.rectificationNoticeFlag == 1">
         <text>下发整改通知</text>
         <text class="item-content">是</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c" v-if="info.punishFlag == 1">
         <text>是否处罚</text>
         <text class="item-content">是</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c" v-if="info.punishRemark">
         <text>处罚说明</text>
         <text class="item-content">{{info.punishRemark}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c" v-if="info.rectificationEndTime">
         <text>整改截至时间</text>
         <text class="item-content">{{info.rectificationEndTime}}</text>
      </view>
      <view class="item-row flex j-c-s-b a-i-c" v-if="inof.remark">
         <text>其它隐患问题</text>
         <text class="item-content">{{info.remark}}</text>
      </view>

      <view class="image-wrap bgc-ff" v-if="images.length">
         <view class="mb-20">
            图片
         </view>
         <view class="flex flex-wrap">
            <view class="image-item" v-for="(i,k) in images" @click="previewImage(images,i)">
               <u-image :src="i" width="100rpx" height="100rpx"></u-image>
            </view>
         </view>

      </view>

      <view class="image-wrap bgc-ff" v-if="signatureUrl.length">
         <view class="mb-20">
            签名
         </view>
         <view class="image-item" v-for="(i,k) in signatureUrl" @click="previewImage(signatureUrl,i)">
            <u-image :src="i" width="100rpx" height="100rpx"></u-image>
         </view>
      </view>
      <view class="mt-20 bgc-ff">
         <block v-for="(item,index) in itemList">
            <block v-for="(i,k) in item.children">
               <block v-for="(n,m) in info.patrolRecordVOList">
                  <view class="item-row flex j-c-s-b a-i-c" v-if="i.id == n.itemId && n.state == 1">
                     <text class="item-left">{{i.title}}</text>
                     <text>不存在</text>
                  </view>
                  <u-collapse ref="collapse" v-if="i.id == n.itemId && n.state == 0">
                     <u-collapse-item :name="index" :title="i.title" value="存在">
                        <view class="mb-20" v-if="n.remark">
                           <view class="f-26 mb-10" style="color:#000">隐患描述</view>
                           <view class="f-28" style="color:#000">
                              {{n.remark}}
                           </view>
                        </view>
                        <view class="mb-20" v-if="n.imageUrls">
                           <view class="f-26 mb-10" style="color:#000">隐患照片</view>
                           <view class="flex flex-wrap">
                              <view class="mr-20" v-for="r in ($setImageUrl(n.imageUrls))">
                                 <u-image :src="r" width="100rpx" height="100rpx"
                                    @click="previewImage($setImageUrl(n.imageUrls),i)"></u-image>
                              </view>
                           </view>
                        </view>
                        <view class="">
                           <view class="f-26 mb-10">整改后照片</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>
                     </u-collapse-item>
                  </u-collapse>
               </block>
            </block>
         </block>
      </view>


      <footer-btn />
   </view>
</template>

<script>
   import uploadMixin from "@/mixin/uploadMixin";
   import {
      addPlaceCheckTwo,
      getPlaceCheckItem
   } from "@/api/place/place.js"
      getPlaceCheckItem,
      getPlaceCheckDetail,
      getPlaceCheckReformDetail
   } from '@/api/place/place.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: 1
               },
               {
                  name: "否",
                  id: 2
               }
            ],

            info: {},
            images: [],
            signatureUrl: [],
            label: "",
            itemList: []
         }
      },
      onLoad(option) {
         this.info.houseCode = option.code;
         this.getItem();
      async onLoad(option) {
         await this.getItem();
         this.getDetail(option.id);
      },

      methods: {
         getDetail(id) {
            getPlaceCheckReformDetail({
               taskId: id
            }).then(res => {
               this.info = res.data;
               this.images = this.$setImageUrl(res.data.imageUrls);
               this.signatureUrl = this.$setImageUrl(res.data.signaturePath);
               if (res.data.placePoiLabelVOList.length) {
                  this.label = res.data.placePoiLabelVOList[res.data.placePoiLabelVOList.length - 1]
                     .labelName;
               }

               // this.label = res.data.
            })
         },


         getItem() {
            getPlaceCheckItem().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 = []
            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 || ""
                     })
                  }
               }
            }
            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) {
            this.showLoading()
            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()
                  }
               if (res.code == 200) {
                  this.itemList = res.data;
               }
            })
         },

         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.patrolRecordVOList = this.getSelected()

            addPlaceCheckTwo(this.info).then(res => {
               uni.hideLoading();
               uni.showToast({
                  icon: 'success',
                  title: '提交成功',
                  success() {
                     setTimeout(() => {
                        uni.navigateBack();
                     }, 1000)
                  }
               })
            })
         setUrl(src) {
            return this.$setImageUrl(url)
         },

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

@@ -314,134 +187,56 @@
   }
</script>

<style lang="less">
   .wrap {
      padding: 20rpx;
<style lang="scss">
   page {
      background-color: #f5f5f5;
   }

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

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

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

   .site-box {
   .item-row {
      width: 100%;
      padding: 30rpx;
      margin: 20rpx 30rpx;
      border-radius: 4rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      font-size: 28rpx;
      background-color: #fff;

      .c-aa {
         color: #aaa;
      .item-content {
         width: 70%;
         text-align: right;
      }

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

   .image-wrap {
      margin-top: 20rpx;
      padding: 20rpx;

      .image-item {
         margin-right: 20rpx;
      }
   }

   /deep/.u-cell__title-text {
      color: #000 !important;
      width: 70%;
      font-size: 28rpx !important;
   }

   /deep/ .u-cell__value {
      color: #000 !important;
      font-size: 28rpx !important;
   }

   .mr-20 {
      margin-right: 20rpx;
   }

   .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;
   }
</style>