设置UModal内容显示宽度

src/components/module_ems/UModal/UModal.vue

@@ -23,10 +23,9 @@
         </a-col> -->
         <a-col class="right-btn">
           <a-icon type="menu-fold" />
-          <!-- <a-icon type="menu-unfold" /> -->
+          <a-icon type="menu-unfold" />
           <!-- <a-icon type="column-width" /> -->
-          <!-- <a-icon type="pic-right" /> -->
-          <a-icon type="pic-center" />
+          <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>
@@ -42,16 +41,16 @@
     </template> -->
 
     <!-- 处理 scopedSlots -->
-    <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
+    <!-- <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
       <slot :name="slotName"></slot>
-    </template>
+    </template> -->
 
     <!-- 处理 slots -->
-    <template v-for="slotName of slotsKeys" v-slot:[slotName]>
-      <div class="u-dialog-content">
-        <slot :name="slotName"></slot>
+    <!-- <template v-for="slotName of slotsKeys" v-slot:[slotName]> -->
+    <!-- </template> -->
+      <div class="u-dialog-content" :class="setContentStyle">
+        <slot></slot>
       </div>
-    </template>
 
   </a-modal>
 </template>
@@ -66,6 +65,11 @@ export default {
     name: 'UModal',
     mixins: [ModalDragMixins],
     props: {
+      // 内容填满显示
+      contentFull: {
+        type: Boolean,
+        default: true
+      },
       title: {
         type: String,
         default: '内容'
@@ -80,10 +84,10 @@ export default {
         default: false
       },
       // 是否允许切换全屏（允许后右上角会出现一个按钮）
-      switchFullscreen: {
-        type: Boolean,
-        default: false
-      },
+      // switchFullscreen: {
+      //   type: Boolean,
+      //   default: false
+      // },
       // 点击确定按钮的时候是否关闭弹窗
       okClose: {
         type: Boolean,
@@ -101,6 +105,9 @@ export default {
         usedSlots: ['title'],
         // 实际控制是否全屏的参数
         innerFullscreen: this.fullscreen,
+        // 内容展现形式：居中活全屏
+        isContentFull: null,
+        isSetWidthFull: true,
       }
     },
     computed: {
@@ -148,6 +155,13 @@ export default {
       fullscreenButtonIcon() {
         return this.innerFullscreen ? 'fullscreen-exit' : 'fullscreen'
       },
+      setContentStyle() {
+        return this.isContentFull ? 'contentFullcss' : 'contentCenter'
+        // return {
+        //   'contentFull': this.isContentFull,
+        //   'contentCenter': !this.isContentFull
+        // }
+      },
     },
     watch: {
       visible() {
@@ -158,6 +172,14 @@ export default {
       innerFullscreen(val) {
         this.$emit('update:fullscreen', val)
       },
+      // 内容填满显示
+      contentFull: {
+        handler(newV, oldV){
+          console.log(newV, oldV)
+          this.isContentFull = newV
+        },
+        immediate: true
+      }
     },
     methods: {
 
@@ -269,13 +291,18 @@ export default {
         // 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;
       }
+      .contentFullcss{
+        width: calc(100% - 40px);
+      }
+      .contentCenter{
+        width: 992px;
+      }
       .ant-modal-close{
         display: none;
       }

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

@@ -2,35 +2,36 @@
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
+        <div class="cmms-dialog-item-title">巡检内容基本信息</div>
         <a-row>
           <!-- <a-col :span="24">
             <a-form-model-item label="巡检内容编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contentcode">
               <a-input v-model="model.contentcode" placeholder="请输入巡检内容编号"  ></a-input>
             </a-form-model-item>
           </a-col> -->
-          <a-col :span="24">
+          <a-col :span="12">
             <a-form-model-item label="巡检内容名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contentname">
               <a-input v-model="model.contentname" placeholder="请输入巡检内容名称"  ></a-input>
             </a-form-model-item>
           </a-col>
-          <a-col :span="24">
+          <a-col :span="12">
             <a-form-model-item label="巡检设备" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentid">
               <j-search-select-tag v-model="model.equipmentid" dict="ems_tpm_equipment,equipmentname,id"  />
             </a-form-model-item>
           </a-col>
-          <a-col :span="24">
+          <a-col :span="12">
             <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
               <j-dict-select-tag type="radio" v-model="model.status" dictCode="inspect_content_status" placeholder="请选择状态" />
             </a-form-model-item>
           </a-col>
-          <a-col :span="24">
+          <a-col :span="12">
             <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
               <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"/> -->
+          <!-- <j-popup v-model="model.jPopup" code="demo" field="name" orgFields="name" destFields="name" :multi="true"/> -->
         </a-row>
+        <div class="cmms-dialog-item-title">设备巡检设置</div>
       </a-form-model>
     </j-form-container>
   </a-spin>
@@ -132,4 +133,9 @@
       },
     }
   }
-</script>
+</script>
+<style scoped>
+  @import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+</style>

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

@@ -2,7 +2,7 @@
   <u-modal
     :title="title"
     :visible.sync="visible"
-    switchFullscreen
+    contentFull
     @ok="handleOk"
     @cancel="handleCancel">
     <cmms-inspect-content-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></cmms-inspect-content-form>