全新弹窗组件和使用

src/components/module_ems/UModal/UModal.vue

@@ -9,29 +9,37 @@
     :destroyOnClose="destroyOnClose"
     :footer="null"
     >
-    <!-- @ok="handleOk"
-    @cancel="handleCancel" -->
 
-    <slot></slot>
-    <!--有设置标题-->
-    <template v-if="!isNoTitle" slot="title">
-      <a-row class="u-modal-title-row" type="flex">
-        <a-col class="left">
+    <!-- 这个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-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="menu-fold" />
+          <!-- <a-icon type="menu-unfold" /> -->
+          <!-- <a-icon type="column-width" /> -->
+          <!-- <a-icon type="pic-right" /> -->
+          <a-icon type="pic-center" />
+          <a-button type="primary" @click="handleOk">确定</a-button>
+          <a-button @click="handleCancel">取消</a-button>
         </a-col>
       </a-row>
     </template>
     <!--没有设置标题-->
-    <template v-else slot="title">
+    <!-- <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>
+    </template> -->
 
     <!-- 处理 scopedSlots -->
     <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
@@ -40,7 +48,9 @@
 
     <!-- 处理 slots -->
     <template v-for="slotName of slotsKeys" v-slot:[slotName]>
-      <slot :name="slotName"></slot>
+      <div class="u-dialog-content">
+        <slot :name="slotName"></slot>
+      </div>
     </template>
 
   </a-modal>
@@ -56,11 +66,14 @@ export default {
     name: 'UModal',
     mixins: [ModalDragMixins],
     props: {
-      title: String,
+      title: {
+        type: String,
+        default: '内容'
+      },
       // 可使用 .sync 修饰符
       visible: Boolean,
-      // 是否开启拖拽
-      draggable: Boolean,
+      // 是否开启拖拽：暂时隐藏不需要
+      // draggable: Boolean,
       // 是否全屏弹窗，当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
       fullscreen: {
         type: Boolean,
@@ -104,7 +117,7 @@ export default {
         return {
           'u-modal-box': true,
           'fullscreen': this.innerFullscreen,
-          'no-title': this.isNoTitle,
+          // 'no-title': this.isNoTitle,
           'no-footer': this.isNoFooter,
         }
       },
@@ -116,9 +129,9 @@ export default {
         }
         return style
       },
-      isNoTitle() {
-        return !this.title && !this.allSlotsKeys.includes('title')
-      },
+      // isNoTitle() {
+      //   return !this.title && !this.allSlotsKeys.includes('title')
+      // },
       isNoFooter() {
         return this._attrs['footer'] === null
       },
@@ -156,16 +169,18 @@ export default {
       },
 
       close() {
-        this.$emit('update:visible', false)
+        // this.$emit('update:visible', false)
       },
 
       handleOk() {
-        if (this.okClose) {
-          this.close()
-        }
+        this.$emit('ok')
+        // if (this.okClose) {
+        //   this.close()
+        // }
       },
       handleCancel() {
-        this.close()
+        this.$emit('cancel')
+        // this.close()
       },
 
       /** 切换全屏 */
@@ -193,68 +208,133 @@ export default {
 
 <style lang="less">
   
-  // .u-modal-box {
-  //   &.fullscreen {
-  //     top: 0;
-  //     left: 0;
-  //     padding: 0;
+  .u-modal-box {
+    // 宽高
+    .ant-modal{
+      width: calc(100vw - 208px) !important;
+      height: 100vh !important;
+      padding: 0 !important;
+      margin-left: 208px;
+      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{
+        width: 992px;
+        padding: 25px;
+        margin: 20px auto;
+        background-color: #fff;
+        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+      }
+      .ant-modal-close{
+        display: none;
+      }
+      // .ant-modal-header{
+      //   position: fixed;
+      //   top: 0;
+      //   right: 0;
+      //   left: 208px;
+      // }
+      // .ant-modal-body{
+      //   margin-top: 56px;
+      //   background: #fff;
+      // }
+    }
 
-  //     // 兼容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;
-  //       }
-  //     }
+    // &.fullscreen {
+    //   top: 0;
+    //   left: 0;
+    //   padding: 0;
 
-  //     &.no-title, &.no-footer {
-  //       .ant-modal-body {
-  //         height: calc(100% - 55px);
-  //       }
-  //     }
-  //     &.no-title.no-footer {
-  //       .ant-modal-body {
-  //         height: 100%;
-  //       }
-  //     }
-  //   }
+    //   // 兼容1.6.2版本的antdv
+    //   & .ant-modal {
+    //     top: 0;
+    //     padding: 0;
+    //     height: 100vh;
+    //   }
 
-  //   .u-modal-title-row {
-  //     .left {
-  //       width: calc(100% - 56px - 56px);
-  //     }
+    //   & .ant-modal-content {
+    //     height: 100vh;
+    //     border-radius: 0;
 
-  //     .right {
-  //       width: 56px;
-  //       position: inherit;
+    //     & .ant-modal-body {
+    //       /* title 和 footer 各占 55px */
+    //       height: calc(100% - 55px - 55px);
+    //       overflow: auto;
+    //     }
+    //   }
 
-  //       .ant-modal-close {
-  //         right: 56px;
-  //         color: rgba(0, 0, 0, 0.45);
+    //   &.no-title, &.no-footer {
+    //     .ant-modal-body {
+    //       height: calc(100% - 55px);
+    //     }
+    //   }
+    //   &.no-title.no-footer {
+    //     .ant-modal-body {
+    //       height: 100%;
+    //     }
+    //   }
+    // }
 
-  //         &:hover {
-  //           color: rgba(0, 0, 0, 0.75);
-  //         }
-  //       }
-  //     }
-  //   }
-  //   &.no-title{
-  //     .ant-modal-header {
-  //       padding: 0px 24px;
-  //       border-bottom: 0px !important;
-  //     }
-  //   }
-  // }
+    // &.no-title{
+    //   .ant-modal-header {
+    //     padding: 0px 24px;
+    //     border-bottom: 0px !important;
+    //   }
+    // }
+  }
 
   @media (max-width: 767px) {
     .u-modal-box.fullscreen {

src/views/module_ems/cmmsInspectContent/CmmsInspectContentList.vue

@@ -17,7 +17,7 @@
           <template v-if="toggleSearchStatus">
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="状态">
-                <a-input placeholder="请输入状态：启用：0、禁用:1" v-model="queryParam.status"></a-input>
+                <a-input placeholder="请选择状态" v-model="queryParam.status"></a-input>
               </a-form-item>
             </a-col>
           </template>

src/views/module_ems/cmmsInspectContent/modules/CmmsInspectContentForm.vue

@@ -28,6 +28,7 @@
               <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
             </a-form-model-item>
           </a-col>
+          <p v-for="i in 220" :key="i">1111111</p>
           <!-- <j-popup v-model="formData.jPopup" code="demo" field="name" orgFields="name" destFields="name" :multi="true"/> -->
         </a-row>
       </a-form-model>

src/views/module_ems/cmmsInspectContent/modules/CmmsInspectContentModal.vue

@@ -1,13 +1,10 @@
 <template>
   <u-modal
     :title="title"
-    :width="width"
-    :visible="visible"
+    :visible.sync="visible"
     switchFullscreen
     @ok="handleOk"
-    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
-    @cancel="handleCancel"
-    cancelText="关闭">
+    @cancel="handleCancel">
     <cmms-inspect-content-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></cmms-inspect-content-form>
   </u-modal>
 </template>
@@ -23,7 +20,6 @@
     data () {
       return {
         title:'',
-        width:800,
         visible: false,
         disableSubmit: false
       }