preliminary/src/components/DetailBox.vue

<template>
  <portal to="notification-detail">
    <div class="detailBoxMask"></div>
    <div class="detailBox-wrap">
      <div class="content detailBoxMain" ref="detailBox">
        <div class="main">
          <Detail :datas="privateData" 
                  ref="detail"
                  :flags="flags"
                  :data="data"
                  :tips="tips"
                  :checkF="checkF"
                  @check="changeCheck($event)"
                  @setBtnTxt="setBtnTxt($event)"
                  @close="close($event)"
                  @handleClear="handleClear($event)"
                  @checkReq="changeFins($event)"/>
        </div>
      </div>
    </div>
    <div style="position:absolute" class="foot">
      <div class="slide" @click="slideAll">{{btnTxt}}</div>
      <div class="nextBtn compete" @click="complete">完成</div>
    </div>
    <Toast :message="clearTxt" 
          :show="showToast"
          @comfirn="comfirnDel" 
          @cancel="cancelDel"/>
  </portal>
</template>
<script type="text/javascript">
  import Detail from './Detail.vue';
  import Toast from '../common/Toast.vue';
  import Picker from '../common/Picker.vue';
  import {fixedKeyboard,moduleCP} from '@utils/tools.js';
  import $ from 'jquery';
  export default {
    name:'DetailBox', //点开详情的盒子
    props:['flags'],
    data(){
      const {detailInfo,detailShow} = this.$store.state;
      const {detail} = this.$store.state.detailInfo;
      let signNum = 1,tmpData = this.$store.state.detailInfo.detail,tmpArr=[];
      if(tmpData.checkedAll != 1){
        for(let i = 0;i < tmpData.questionMapping.length;i++){
          if(tmpData.questionMapping[i].flag != 3){
              tmpArr.push(tmpData.questionMapping[i])
          }else{
            if(signNum != 1){
              tmpArr.push(tmpData.questionMapping[i])
            }else{
              ++signNum
            }
          }
        }
        tmpData.questionMapping = tmpArr
        tmpData.checkedAll = 1
      }
      return{
        msg:"胸痛详情",
        data:detailInfo,
        privateData:tmpData||{},
        compFlag:false,
        clearTxt:"是否清空当前已选内容？",
        showToast:false,
        tips:"温馨提示：请完成病情预问诊可让医生提前了解病情",
        checkF:false, //详情页有无已选项标识
        show:detailShow,
        reqFinish:false,
        showPic:false,
        btnTxt:'展开全部'
      }
    },
    mounted(){
      this.$nextTick(()=>{
        // 校验是否有已填项，有--弹窗；无--return
        let hasCheck = this.$refs.detail.check();
        let checkReq = true || this.$refs.detail.checkReq();
        if(hasCheck){
          this.checkF = true;
        }
        if(checkReq && hasCheck){
          this.reqFinish = true;
        }
      })
    },
    methods:{
      setBtnTxt(txt){
        this.btnTxt = txt
      },
      slideAll(){
        this.$refs.detail.slideAll();
      },
      close(){
        // 有必填项但没值则将choose移除 8-19
        // 没点过完成,点关闭时校验是否有必填项--有直接移除
        const type = this.data.moduleType;
        const select = this.privateData.select;
        $(".foot").css({'display':'block'})
        if(type == moduleCP['symp'] && !select){//只处理主诉症状
          const list = this.privateData.questionMapping;
          if(list){
            for(let i in list){
              // if(list[i].required==1 && !list[i].value){
              if(list[i].required==1){
                // this.$store.commit('delChoose', {id: this.privateData.id })
                // this.$store.commit('delText', { type: moduleCP['symp'], pId: this.privateData.id })
              }
            }
          }
        }
        this.$store.commit('setDetail',{detail:{}})
      },
      complete(){
      //有选中内容才可以点完成#1919
        // if(this.checkF){
      //必填项都填完了才可以点完成
        // if(this.reqFinish && this.checkF){
        //   this.$refs.detail.saveData();
        //   this.$store.commit('setSearchShow', false);
        // }
        this.$refs.detail.saveData();
        this.$store.commit('setSearchShow', false);
      },
      changeCheck(flag){//是否有选中项
        this.checkF = flag;
      },
      changeFins(flag){//必填项是否都填了
        this.reqFinish = flag;
      },
      handleClear(){//清空
        // 校验是否有已填项，有--弹窗；无--return
        if(this.checkF){
          this.showToast = true;
          $(".btscroll").css({'position':'fixed','top':'1rem'})
          $(".foot").css({'position':'fixed','bottom':'0'})
        }  
      },
      cancelDel(){
        $(".btscroll").css({'position':'absolute','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
        this.showToast = false;
      },
      comfirnDel(){
        $(".btscroll").css({'position':'absolute','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
        this.$refs.detail.clearData();
        this.showToast = false;
        this.checkF = false;
        this.reqFinish = false;
        // 让detail组件更新
        const type = this.data.moduleType;
        if(type == moduleCP['symp']){ //症状情况单独处理
          const id = this.privateData.id;
          const read = this.$store.state.symptom.datas;
          const data = read[id];
          this.$store.commit('setDetail',{detail:data,ppId:null,moduleType:moduleCP['symp']})
        }
      },
    },
    components:{
      Detail,
      Toast
    },
    computed: {
      getStoreItem () {
        return this.$store.state.detailInfo
      }
    },
    watch: {
      getStoreItem:{
        handler(newVal){
          this.data = newVal;
          this.privateData = newVal.detail||{};
        },
        deep:true
      }
    },
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .detailBoxMask {
    .mask;
    z-index: 110;
  }
  .tmpDom {
    height: 1.5rem;
  }
  .detailBox-wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    top:1rem;
    bottom: 0;
    left: 0;
    z-index: 666;
    background: #fff;
    font-size: .3rem;
    animation: wave .4s linear;
    border-radius:.2rem .2rem 0px 0px;
    overflow: hidden;
    .content{
      // height: 100%;
      // width:100%;
      // padding-bottom: 1rem;
    }
  }
  .foot{
    .footer;
    .slide {
      color: #7C828E;
      width: 49%;
      display: inline-block;
    }
    .compete {
      width: 49%;
      display: inline-block;
    }
    animation-delay:.6s;
    animation: foo .4s linear;
  }
  .check{
    color: #1A1A1A;
  }
  .noCheck{
    background: #CACCFF !important;
  }
  @keyframes wave {
    0%   {top:100% ;}
    25% {top: 75%;}
    50% {top: 50%;}
    75% {top: 25%;}
    100% {top: 45px;}
  } 
  @keyframes foo {
    0% {bottom:-1rem;}
    100% {bottom:0;}
  }
</style>