EMS_client/src/components/module_ems/UModal/UModal.vue

<template>
  <a-modal
    ref="modal"
    :class="getClass(modalClass)"
    :style="getStyle(modalStyle)"
    :visible="visible"
    v-bind="_attrs"
    v-on="$listeners"
    :destroyOnClose="destroyOnClose"
    :footer="null"
    >

    <!-- 这个slot指什么暂不清楚  -->
    <!-- <slot></slot> -->
    <!--标题必填-->
    <template slot="title">
      <a-row class="u-modal-title-row" type="flex" justify="space-between">
        <a-col class="left-title">
          <slot name="title">{{ title }}</slot>
        </a-col>
        <!-- <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
          <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
        </a-col> -->
        <a-col class="right-btn">
          <a-icon :type="isModalFull?'menu-unfold':'menu-fold'" @click="isModalFull = !isModalFull"/>
          <!-- <a-icon type="column-width" /> -->
          <a-icon :type="isContentFull?'pic-right':'pic-center'" @click="isContentFull = !isContentFull"/>
          <a-button type="primary" @click="handleOk">确定</a-button>
          <a-button @click="handleCancel">取消</a-button>
        </a-col>
      </a-row>
    </template>
    <!--没有设置标题-->
    <!-- <template v-else slot="title">
      <a-row class="u-modal-title-row" type="flex">
        <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
          <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
        </a-col>
      </a-row>
    </template> -->

    <!-- 处理 scopedSlots -->
    <!-- <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
      <slot :name="slotName"></slot>
    </template> -->

    <!-- 处理 slots -->
    <!-- <template v-for="slotName of slotsKeys" v-slot:[slotName]> -->
    <!-- </template> -->
      <div class="u-dialog-content" :class="setContentStyle">
        <slot></slot>
      </div>

  </a-modal>
</template>

<script>

import { getClass, getStyle } from '@/utils/props-util'
import { triggerWindowResizeEvent } from '@/utils/util'
import ModalDragMixins from './ModalDragMixins'

export default {
    name: 'UModal',
    mixins: [ModalDragMixins],
    props: {
      // 内容填满显示
      contentFull: {
        type: Boolean,
        default: false
      },
      // 全屏显示
      modalFull: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '内容'
      },
      // 可使用 .sync 修饰符
      visible: Boolean,
      // 是否开启拖拽：暂时隐藏不需要
      // draggable: Boolean,
      // 是否全屏弹窗，当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
      fullscreen: {
        type: Boolean,
        default: false
      },
      // 是否允许切换全屏（允许后右上角会出现一个按钮）
      // switchFullscreen: {
      //   type: Boolean,
      //   default: false
      // },
      // 点击确定按钮的时候是否关闭弹窗
      okClose: {
        type: Boolean,
        default: true
      },
      // 关闭时销毁弹窗内容
      destroyOnClose: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        // 内部使用的 slots ，不再处理
        usedSlots: ['title'],
        // 实际控制是否全屏的参数
        innerFullscreen: this.fullscreen,
        // 内容展现形式：居中活全屏
        isContentFull: null,
        isModalFull: false,
      }
    },
    computed: {
      // 一些未处理的参数或特殊处理的参数绑定到 a-modal 上
      _attrs() {
        let attrs = { ...this.$attrs }
        // 如果全屏就将宽度设为 100%
        if (this.innerFullscreen) {
          attrs['width'] = '100%'
        }
        return attrs
      },
      modalClass() {
        return {
          'u-modal-box': true,
          'fullscreen': this.innerFullscreen,
          // 'no-title': this.isNoTitle,
          'no-footer': this.isNoFooter,
          'modalFullcss': this.isModalFull,
          'modalMarginLeft': !this.isModalFull
        }
      },
      modalStyle() {
        let style = {}
        // 如果全屏就将top设为 0
        if (this.innerFullscreen) {
          style['top'] = '0'
        }
        return style
      },
      // isNoTitle() {
      //   return !this.title && !this.allSlotsKeys.includes('title')
      // },
      isNoFooter() {
        return this._attrs['footer'] === null
      },
      slotsKeys() {
        return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key))
      },
      scopedSlotsKeys() {
        return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
      },
      allSlotsKeys() {
        return Object.keys(this.$slots).concat(Object.keys(this.$scopedSlots))
      },
      // 切换全屏的按钮图标
      fullscreenButtonIcon() {
        return this.innerFullscreen ? 'fullscreen-exit' : 'fullscreen'
      },
      setContentStyle() {
        return this.isContentFull ? 'contentFullcss' : 'contentCenter'
        // return {
        //   'contentFull': this.isContentFull,
        //   'contentCenter': !this.isContentFull
        // }
      },
    },
    watch: {
      visible() {
        if (this.visible) {
          this.innerFullscreen = this.fullscreen
        }
      },
      innerFullscreen(val) {
        this.$emit('update:fullscreen', val)
      },
      // 内容填满显示
      contentFull: {
        handler(newV, oldV){
          console.log(newV, oldV)
          this.isContentFull = newV
        },
        immediate: true
      },
      modalFull: {
        handler(newV, oldV){
          console.log(newV, oldV)
          this.isModalFull = newV
        },
        immediate: true
      }
    },
    methods: {

      getClass(clazz) {
        return { ...getClass(this), ...clazz }
      },
      getStyle(style) {
        return { ...getStyle(this), ...style }
      },

      close() {
        // this.$emit('update:visible', false)
      },

      handleOk() {
        this.$emit('ok')
        // if (this.okClose) {
        //   this.close()
        // }
      },
      handleCancel() {
        this.$emit('cancel')
        // this.close()
      },

      /** 切换全屏 */
      toggleFullscreen() {
        this.innerFullscreen = !this.innerFullscreen
        triggerWindowResizeEvent()
        // 开启拖拽后的特殊处理
        if (this.draggable) {
          // 全屏的时候禁止拖动
          if (this.innerFullscreen) {
            // 还原弹窗的位置为0,0
            this.setModalPosition(0, 0, false)
            this.dragSettings.headerEl.style.cursor = null
          } else {
            // 取消全屏的时候，将弹窗移动到上次记录的位置
            this.resetModalPosition()
            this.dragSettings.headerEl.style.cursor = 'move'
          }
        }
      },

    }
  }
</script>

<style lang="less">
  
  .u-modal-box {
    // 宽高
    .ant-modal{
      height: 100vh !important;
      padding: 0 !important;
      margin-right: 0;
      top: 0;
      .ant-modal-content{
        border-radius: 0;
        height: 100%;
        overflow: hidden;
      }
      // 弹窗头部
      .ant-modal-header{
        padding: 0;
        height: 60px;
        box-shadow: 0 2px 12px rgba(211, 211, 211, 0.65);
        position: relative;
        .ant-modal-title{
          height: 100%;
        }
        .u-modal-title-row {
          height: 100%;
          padding: 0 24px;
          .left-title{
            line-height: 60px;
          }
          .right-btn{
            display: flex;
            align-items: center;
          }      
          // .left {
          //   width: 50%;
          // }
    
          // .right {
          //   width: 56px;
          //   position: inherit;
    
          //   .ant-modal-close {
          //     right: 56px;
          //     color: rgba(0, 0, 0, 0.45);
    
          //     &:hover {
          //       color: rgba(0, 0, 0, 0.75);
          //     }
          //   }
          // }
        }
      }
      // 内容区域
      .ant-modal-body{
        height: calc(100vh - 60px);
        padding: 0;
        overflow: auto;
        background: #f6faff;
        // background: #F5F7FA;
      }
      .u-dialog-content{
        padding: 25px;
        margin: 20px auto;
        background-color: #fff;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
      }
      .contentFullcss{
        width: calc(100% - 40px);
      }
      .contentCenter{
        width: 992px;
      }
      .ant-modal-close{
        display: none;
      }
      // .ant-modal-header{
      //   position: fixed;
      //   top: 0;
      //   right: 0;
      //   left: 208px;
      // }
      // .ant-modal-body{
      //   margin-top: 56px;
      //   background: #fff;
      // }
    }



    // &.fullscreen {
    //   top: 0;
    //   left: 0;
    //   padding: 0;

    //   // 兼容1.6.2版本的antdv
    //   & .ant-modal {
    //     top: 0;
    //     padding: 0;
    //     height: 100vh;
    //   }

    //   & .ant-modal-content {
    //     height: 100vh;
    //     border-radius: 0;

    //     & .ant-modal-body {
    //       /* title 和 footer 各占 55px */
    //       height: calc(100% - 55px - 55px);
    //       overflow: auto;
    //     }
    //   }

    //   &.no-title, &.no-footer {
    //     .ant-modal-body {
    //       height: calc(100% - 55px);
    //     }
    //   }
    //   &.no-title.no-footer {
    //     .ant-modal-body {
    //       height: 100%;
    //     }
    //   }
    // }

    // &.no-title{
    //   .ant-modal-header {
    //     padding: 0px 24px;
    //     border-bottom: 0px !important;
    //   }
    // }
  }

  .modalFullcss{
    .ant-modal{
      width: 100vw !important;
      margin-left: 0;
    }
  }
  .modalMarginLeft{
    .ant-modal{
      width: calc(100vw - 208px) !important;
      margin-left: 208px;
    }
  }

  @media (max-width: 767px) {
    .u-modal-box.fullscreen {
      margin: 0;
      max-width: 100vw;
    }
  }
</style>