soc_app/src/views/menu/LZRegister/edit.vue

<template>
  <div class="lz-edit">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card" v-if="taskInfo">
        <van-panel :title="taskInfo.title"  :status="getDicts(taskInfo.status)">
          <van-cell title="日期时间" :value="rangDate(taskInfo.planstarttime,taskInfo.planendtime)" />
          <van-collapse :border="false" v-model="activeNames">
            <van-collapse-item title="履职总览" :name="1">
              <van-cell title="NFC："  >
                <template #extra>
                  <p class="flex-box">
                    <span >已扫 {{taskInfo.nfcScanY}}</span>
                    <span >未扫 {{taskInfo.nfcScanN}}</span>
                  </p>
                </template>
              </van-cell>
              <van-cell title="履职项：">
                <template #extra>
                  <p class="flex-box">
                    <span >已查  {{taskInfo.areaScanY}}</span>
                    <span >未查  {{taskInfo.areaScanN}}</span>
                  </p>
                </template>
              </van-cell>
              <van-cell title="履职内容：" :value="allCheckNum" />
            </van-collapse-item>
          </van-collapse>
        </van-panel>
      </div>
      <!--   检查区域   -->
      <div class="card">
        <van-panel title="巡检区域" v-if="areaList">
          <div style="padding: 10px;">
            <van-row >
              <van-col span="12"  v-for="(v,i) in areaList" :key="v.areaid">
                <div class="check-area" @click="clickArea(v,i)">
                  {{v.areaname}}
<!--                  <van-icon v-if="v.status" name="success" color="primary"/>-->
<!--                  <van-icon v-else name="fail" color="red"/>-->
                </div>
              </van-col>
            </van-row>
            <van-cell title="检查内容：" :value="checkNum" />
            <van-cell>
              <template #title>
                <span>NFC:</span>
              </template>
              <template #extra>
                <span style="display: inline-block;color:#969799;">{{NFCNum}}</span>
                <img v-if="enable && NFCNum" :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon" @click="clickNFC"/>
              </template>

            </van-cell>
            <van-cell v-show="nfcImage.length > 0" :border="false" >
              <div v-if="v.img" class="nfc-img" v-for="(v,i) in nfcImage" :key="v.img" @click="preViewNFC(i)">
                <img :src="imgUrl(v.img)" alt="" >
                <span>{{v.checkName}}</span>
              </div>
<!--              <img class="nfc-img" v-for="(v,i) in selectArea.nfclist" v-if="v.img" :src="imgUrl(v.img)" alt="" :key="v.img">-->
            </van-cell>
          </div>
        </van-panel>
      </div>

      <!--   检查事项   -->
<!--      <div class="card" v-if="selectArea" v-for="v in checkList" :key="v.itemid">-->
<!--        <van-panel  :title="v.itemname">-->
<!--          <van-collapse v-model="activeNames" v-for="(item,index) in v.checkitemlist" :key="item.pointdataid">-->
<!--            <van-collapse-item :title="item.pointname" :name="index" >-->
<!--              <van-cell :border="false" title="是否异常">-->
<!--                <template #right-icon>-->
<!--                  <van-switch-->
<!--                    v-model="item.resvalue"-->
<!--                    inactive-color="#4fc08d"-->
<!--                    active-color="orange"-->
<!--                    size="20" />-->
<!--                </template>-->
<!--              </van-cell>-->
<!--              <van-cell-group v-show="item.resvalue">-->
<!--                <van-field-->
<!--                  v-model="item.resremark"-->
<!--                  rows="1"-->
<!--                  autosize-->
<!--                  label="情况描述："-->
<!--                  type="textarea"-->
<!--                  placeholder="请输入"/>-->
<!--                <div class="upload-box" >-->
<!--                  <uploader v-model="item.imgData" multiple />-->
<!--                </div>-->
<!--                <select-cell title="整改期限" v-model="item.rectificationDeadline"  :dict="'rectification_deadline'" is-link/>-->
<!--              </van-cell-group>-->
<!--              <date-cell v-if="item.businessType === 1" v-for="(val,ind) in item.protectionVo" :title="val.protectionName"  v-model="val.statusUpdateTime" :key="val.id" date-type="datetime" />-->
<!--            </van-collapse-item  >-->
<!--          </van-collapse >-->
<!--        </van-panel>-->
<!--      </div>-->


      <!--  检查项目2    -->
      <fieldset class="fieldset"  :disabled="!enable">
        <div class="card" v-if="selectArea">
          <van-collapse v-model="activeNames" v-for="v in checkList" :key="v.itemid">
            <van-collapse-item :title="v.itemname" :name="v.itemname" >
              <div v-for="(item,index) in v.checkitemlist" :key="item.pointdataid">
                <van-cell :title="item.pointname">
                  <template #right-icon>
                    <van-switch
                      v-if="enable"
                      style="margin-left: 10px;"
                      v-model="item.resvalue"
                      :active-value="1"
                      :inactive-value="0"
                      inactive-color="#4fc08d"
                      active-color="#ee0a24"
                      @change="switchChange(item)"
                      size="20" />
                    <span v-else>
<!--                      <van-icon  v-if="item.resvalue" name="success" color="#07c160" />-->
<!--                      <van-icon v-else name="fail" color="#ee0a24"/>-->
                      <van-tag v-if="item.resvalue" type="warning">隐患</van-tag>
                      <van-tag v-else type="success">正常</van-tag>
                    </span>
                  </template>
                </van-cell>
                <van-cell-group v-show="item.resvalue">
                  <select-cell required :disabled="!enable" title="整改期限" v-model="item.rectificationDeadline"  :data-list="dayList" />
                  <van-field
                    required
                    v-model="item.resremark"
                    rows="1"
                    autosize
                    label="情况描述："
                    type="textarea"
                    placeholder="请输入"/>
                  <div class="upload-box" >
                    <uploader :maxCount="5" v-if="enable" v-model="item.imgData"/>
                    <van-cell v-else>
                      <div class="nfc-img van-hairline--surround" v-for="(v,i) in item.imgData" :key="v.imgPath" @click="clickWarnImage(item.imgData,i)">
                        <img :src="imgUrl(v.imgPath)" alt="" >
                        <span>{{v.checkName}}</span>
                      </div>
<!--                      <img class="nfc-img" v-for="v in item.imgData" :src="imgUrl(v.imgPath)" alt="" :key="v.id">-->
                    </van-cell>
                  </div>
                </van-cell-group>
                <date-cell
                  :disabled="!enable"
                  v-if="item.businessType === 1"
                  v-for="(val,ind) in item.protectionVo"
                  :title="val.protectionName"
                  v-model="val.statusUpdateTime"
                  :key="val.id"
                  date-type="datetime" />
              </div>
            </van-collapse-item>
          </van-collapse>
        </div >
        <p v-if="enable" class="warning-msg">需要完成所有区域的履职内容才能提交内容</p>
        <div v-if="enable" class="flex-box">
          <van-button type="default" style="width: 28%;" plain  @click="goBack">取消</van-button>
          <van-button type="info" style="width: 28%;" plain hairline @click="saveData">保存</van-button>
          <van-button type="info" style="width: 28%;"  @click="submitData">提交</van-button>
        </div>
      </fieldset>
    </div>

<!--    <van-image-preview v-model="showPreView" :images="preViewImages.images" :startPosition="preViewImages.startPosition">-->
<!--      <template v-slot:index>第{{ index }}页</template>-->
<!--    </van-image-preview>-->

    <!--  nfc弹窗  -->
    <nfc-popup v-if="enable" ref="NfcPopup" @change="changeNfcImg"></nfc-popup>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import SelectCell from '@/components/selectCell';
import DateCell from '@/components/dateCell';
import Uploader from '@/components/upload/uploader';
import NfcPopup from '@/components/nfcPopup/more';
import {taskDetails,saveTaskData} from "@/views/menu/LZRegister/api";
import {formatDate} from "@/filters/filter";
import {getDict} from "@/api/toConsult";
import {imgUrl} from "@/utils";
import { ImagePreview } from 'vant';
export default {
  components:{NavBar,SelectCell,DateCell,Uploader,NfcPopup},
  data(){
    return {
      activeNames: ['1'],
      //区域列表
      areaList:[],
      //基本信息
      taskInfo:[],
      //字典
      dicts: ['resumption_status'],
      //选中的区域
      selectArea:[],
      //区域下nfc列表
      NFCList:[],
      //区域下检查内容列表
      checkList:[],
      //检查内容具体项列表
      checkItemList:[],
      //nfc扫描数量
      NFCNum:0,
      //所有检查项数量
      allCheckNum:0,
      //区域下检查项数量
      checkNum:0,
      //nfc图片
      nfcImage:[],
      enable:false,
      stateList:[],
      dayList:[],
      preViewImages:{
        images:[],
        startPosition:0
      },
      showPreView:false,
    }
  },
  created() {
    getDict( 'resumption_status' ).then(res => {
      let { data } = res
      this.stateList = data;
    })
    getDict( 'rectification_deadline' ).then(res => {
      let { data } = res
      this.dayList = data;
    })
  },
  mounted() {
    this.getData();
  },
  methods:{
    clickWarnImage(arr,i){
      this.preViewImages.images = arr.map(v=>imgUrl(v.imgPath));
      this.preViewImages.startPosition = i;
      ImagePreview(this.preViewImages)
    },
    preViewNFC(i){
      this.preViewImages.images = this.nfcImage.map(v=>imgUrl(v.img));
      this.preViewImages.startPosition = i;
      ImagePreview(this.preViewImages)
    },
    getDicts(s){
      return this.stateList.find(v=> s == v.dictValue)?.dictLabel;
    },
    //初始化数据
    getData() {
      let data = {
        dateTime:new Date(),
        taskId:this.$route.query.id,
      }
      taskDetails(data).then(res=>{
        //res = json;
        console.log(res,'res')
        let {areaScanN,areaScanY,nfcScanN,nfcScanY} = res.data;
        this.taskInfo = {
          areaScanN,
          areaScanY,
          nfcScanN,
          nfcScanY,
          ...res.data.taskObj
        }
        this.taskInfo.nfcScaning = res.data.nfcScaning;
        this.enable = this.taskInfo.status === 1 || this.taskInfo.status === 2; //是否可编辑
        this.areaList = res.data.taskarealist;
        this.activeArea(this.areaList[0],0);
        this.getAllCheckItemNum();
      })
    },
    //保存数据
    saveData(){
      let pointdata = [];
      let checkNFC = [];
      this.areaList.forEach(area=>{
        area.nfclist.forEach(v=>{
          if(v.status === 1){
            checkNFC.push(v)
          }
        })
        area.checklist.forEach(item=>{
         item.checkitemlist.forEach(checkItem=>{
            checkItem.protections = checkItem.protectionVo;
            checkItem.resRemark = checkItem.resremark;
            checkItem.resStatus = checkItem.resstatus;
            checkItem.areaId = checkItem.areaid;
            checkItem.id = checkItem.pointdataid;
            checkItem.pointId = checkItem.pointid;
            checkItem.resValue = checkItem.resvalue;
            checkItem.resumptionId = this.$route.query.id;
            pointdata.push(checkItem);
          })
        })
      });
      //验证必填项
      let arr = pointdata.filter(v=>{
        if(v.resvalue === 1 ){
          return !v.resremark || !v.rectificationDeadline
        }
      })
      if(arr.length) return this.$toast(`${arr[0].areaname}-${arr[0].itemname}:信息不完整请填写`);
      let data = {
        dateTime:new Date(),
        isSubmit:0,
        resumptionId:this.$route.query.id,
        year: this.taskInfo.year,
        quarter: this.taskInfo.quarter,
        nfcData:checkNFC,
        pointdata,
      }
      saveTaskData(data).then(res=>{
        this.$toast('提交成功');
        this.$router.go(-1);
      })
    },
    //获取所有检查项数量
    getAllCheckItemNum(){
      let num = 0;
      this.areaList.forEach(v=>{
        v.checklist.forEach(item=>{
          num += item.checkitemlist.length;
        })
      });
      this.allCheckNum = num;
    },
    //点击区域
    clickArea(area,index){
      this.activeArea(area,index);
    },
    //选中区域时数据变更
    activeArea(area,index){
      //设置选中样式
      this.$nextTick(()=>{
        let doms = document.getElementsByClassName('check-area');
        Array.prototype.forEach.call(doms,item=>{
          item.classList.remove('active');
        })
        doms[index].classList.add('active');
      })
      //获取当前选中区域
      this.selectArea = area;
      //获取当前区域检查项列表
      this.checkList = area.checklist;
      //设置默认展开项
      this.activeNames = this.checkList.map(v=>v.itemname);
      //清空nfc图片
      this.nfcImage = [];
      //回显nfc图片
      area.nfclist.forEach( v =>{
        if(v.img){
          v.url = v.img;
          this.nfcImage.push(v)
        }
      });
      //获取当前区域检查项数量
      this.getCheckItemNum();
      //获取当前区域nfc数量
      this.getNFCItemNum();
    },
    //获取当前区域检查项数量
    getCheckItemNum(){
      let num = 0;
      this.selectArea.checklist.forEach(v=>{
        num += v.checkitemlist.length;
      });
      this.checkNum = num;
    },
    //获取当前区域nfc数量
    getNFCItemNum(){
      let num = 0;
      this.selectArea.nfclist.forEach(v=>{
        if(v.status === 0 || !v.img){
          num++;
        }
      })
      this.NFCNum = num;
    },
    //提交数据
    submitData(){
      let pointdata = [];
      let checkNFC = [];
      this.areaList.forEach(area=>{
        area.nfclist.forEach(v=>{
          if(v.status === 1){
            checkNFC.push(v)
          }
        })
        area.checklist.forEach(item=>{
          item.checkitemlist.forEach(checkItem=>{
            checkItem.protections = checkItem.protectionVo;
            checkItem.resRemark = checkItem.resremark;
            checkItem.resStatus = checkItem.resstatus;
            checkItem.areaId = checkItem.areaid;
            checkItem.id = checkItem.pointdataid;
            checkItem.pointId = checkItem.pointid;
            checkItem.resValue = checkItem.resvalue;
            checkItem.resumptionId = this.$route.query.id;
            pointdata.push(checkItem);
          })

        })
      })

      //验证必填项
      let arr = pointdata.filter(v=>{
        if(v.resvalue === 1 ){
          console.log(v,'验证')
          return !v.resremark || !v.rectificationDeadline
        }
      })
      if(arr.length) return this.$toast(`${arr[0].areaname}-${arr[0].itemname}:信息不完整请填写`);

      let data = {
        dateTime:new Date(),
        isSubmit:1,
        resumptionId:this.$route.query.id,
        year: this.taskInfo.year,
        quarter: this.taskInfo.quarter,
        nfcData:checkNFC,
        pointdata,
      }
      saveTaskData(data).then(res=>{
        this.$toast('提交成功');
        this.$router.go(-1);
      })
    },

    //返回
    goBack(){
      this.$router.go(-1);
      this.clearData();
    },
    //点击NFC图标
    clickNFC(){
      if(!this.NFCNum) return;
      let arr = this.selectArea.nfclist.filter(item=>{
        return item.status == 0;
      })
      this.$refs.NfcPopup.show(arr);
    },
    //清空数据
    clearData(){
      this.areaList = [];
      this.taskInfo= [];
      this.selectArea = [];
      this.NFCList = [];
      this.checkList = [];
      this.checkItemList = [];
      this.NFCNum = 0;
      this.enable = false;
    },
    //切换开关时添加操作时间
    switchChange(item){
      console.log(item,'666')
      item.resTime = formatDate(new Date());
    },
    //添加图片时的回调
    changeNfcImg(imgItem){
      console.log(imgItem,this.selectArea.nfclist,'imgItem')
      this.selectArea.nfclist.forEach(v=>{
        if(v.nfccdoe === imgItem.nfcCode){
          v.img = imgItem.url;
          v.status = 1;
          v.scanMethod = 1;
          this.nfcImage.push(v);
        }
      })
      console.log( this.selectArea.nfclist,this.nfcImage,'nfcObj')
    },
  }
}
</script>
<style lang="scss" scoped>

  .lz-edit{
    height: 100%;
    overflow: hidden;
  }
  .page-container{
    height: calc(100vh - 90px);
    overflow: auto;
    padding: 20px;
  }
  .flex-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    >span{
      margin: 0 20px;
    }
  }
  .card{
    margin-bottom: 20px;
    box-shadow: 0 10px 10px #eaeaea;
  }
  .check-area{
    background-color: #f1f1f1;
    margin: 10px;
    padding:20px;
    color:#aaa;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 6px #ddd;
  }
  .nfc-icon{
    width: 50px;
    height: 50px;
    margin-left: 20px;
  }
  .custom-title {
    align-self: center;
    vertical-align: middle;
  }
  .upload-box{
    margin: 30px;
  }
  .warning-msg{
    color: orange;
    text-align: center;
    height: 80px;
    line-height: 80px;
  }
  .active{
    color: #fff;
    background-color: #1989fa;
  }
  .nfc-img{
    display: inline-block;
    width: 140px;
    height: 140px;
    margin: 0 10px;
    position: relative;
    >img{
      width: 100%;
      height: 100%;
      border: none;
    }
    >span{
      position: absolute;
      padding: 0 10px;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      background-color: rgba(0,0,0,.2 );
      color: #eaeaea;
      font-size: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 30px;
      height: 30px;
    }
  }
</style>