Browse Source

modal框居中

zhangdan 4 years ago
parent
commit
843c802c34

+ 1 - 0
src/views/appSetting/bannerSetting.vue

@@ -36,6 +36,7 @@
       :visible="visible"
       :footer="null"
       :closable="closable"
+      :centered="true"
       @cancel="close"
       width="45%">
       <a-form

+ 5 - 15
src/views/bnSetting/menu/childModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
+    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :centered="true">
       <a-form :form="form" @submit="handleSubmit">
         <!-- 上级菜单 -->
         <a-form-item label="上级菜单" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
@@ -33,13 +33,13 @@
         <!-- 名称 -->
         <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
           <a-input
-            placeholder="请输入名称30个字以内"
+            placeholder="请输入名称(最多30个字符)"
             :maxLength="30"
             id="childModal-name"
             allowClear
             v-decorator="['formData.name', {
               initialValue: formData.name,getValueFromEvent: $filterEmpty,
-              rules: [{ required: true, message: '请输入名称30个字以内!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符,最多30个字符'}] }]"
+              rules: [{ required: true, message: '请输入名称(最多30个字符)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符,最多30个字符'}] }]"
           />
         </a-form-item>
         <!-- 路由英文名 -->
@@ -184,7 +184,7 @@
           </a-radio-group>
         </a-form-item>
 
-        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+        <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
           <a-button type="primary" @click="handleSubmit()" id="childModal-handleSubmit">
             保存
           </a-button>
@@ -282,17 +282,7 @@ export default {
     },
     // 取消
     handleCancel () {
-      const _this = this
-      this.$confirm({
-        title: '提示',
-        content: '确定取消吗?',
-        okText: '确定',
-        cancelText: '取消',
-        onOk () {
-          _this.clear()
-          _this.cancel()
-        }
-      })
+      this.cancel()
     },
     clear () {
       this.form.resetFields()

+ 11 - 15
src/views/power/dataDictionary/codeItemModal.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
+    <a-modal
+      class="modalBox"
+      :title="titleText"
+      v-model="isshow"
+      @cancle="cancel"
+      :centered="true"
+      width="45%">
       <a-form :form="form" @submit="handleSubmit">
         <a-row :gutter="24">
           <a-col :span="24">
@@ -24,13 +30,13 @@
             <!-- 名称 -->
             <a-form-item label="名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
               <a-input
-                placeholder="请输入名称30个字以内"
+                placeholder="请输入名称(最多30个字符)"
                 id="codeItemModal-dispName"
                 allowClear
                 :maxLength="30"
                 v-decorator="['formData.dispName', {
                   initialValue: formData.dispName,getValueFromEvent: $filterEmpty,
-                  rules: [{ required: true, message: '请输入名称30个字以内!' }] }]"
+                  rules: [{ required: true, message: '请输入名称(最多30个字符)!' }] }]"
               />
             </a-form-item>
           </a-col>
@@ -174,7 +180,7 @@
                     rules: [] },
                 ]"
                 style="min-height: 50px;"
-                placeholder="输入内容为500个字以内"
+                placeholder="请输入备注(最多500个字符)"
                 :maxLength="500"
                 id="codeItemModal-remarks"
                 autosize />
@@ -269,17 +275,7 @@ export default {
     },
     // 取消
     handleCancel () {
-      const _this = this
-      this.$confirm({
-        title: '提示',
-        content: '确定取消吗?',
-        okText: '确定',
-        cancelText: '取消',
-        onOk () {
-          _this.clear()
-          _this.cancel()
-        }
-      })
+      this.cancel()
     },
     clear () {
       this.form.resetFields()

+ 13 - 17
src/views/power/dataDictionary/codeModal.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
+    <a-modal
+      class="modalBox"
+      :title="titleText"
+      v-model="isshow"
+      @cancle="cancel"
+      :centered="true"
+      width="45%">
       <a-form :form="form" @submit="handleSubmit">
         <!-- 类别编码 -->
         <a-form-item label="类别编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
@@ -8,7 +14,7 @@
             id="codeModal-code"
             placeholder="请输入类别编码"
             :disabled="true"
-			allowClear
+            allowClear
             v-decorator="['formData.code', {
               initialValue: formData.code,getValueFromEvent: $filterEmpty,
               rules: [{ required: true, message: '请输入类别编码!' }] }]"
@@ -20,8 +26,8 @@
           <a-input
             placeholder="请输入名称30个字以内"
             id="codeModal-name"
-			allowClear
-			:maxLength="30"
+            allowClear
+            :maxLength="30"
             v-decorator="['formData.name', {
               initialValue: formData.name,getValueFromEvent: $filterEmpty,
               rules: [{ required: true, message: '请输入名称30个字以内!' }] }]"
@@ -34,7 +40,7 @@
             type="number"
             placeholder="请输入排序值"
             id="codeModal-sort"
-			allowClear
+            allowClear
             v-decorator="['formData.sort', {
               initialValue: formData.sort,getValueFromEvent: $filterEmpty,
               rules: [{ required: true, message: '请输入排序值!' }] }]"
@@ -64,7 +70,7 @@
               { initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
                 rules: [] },
             ]"
-			:maxLength="500"
+            :maxLength="500"
             id="codeModal-remarks"
             style="min-height: 60px;"
             placeholder=""
@@ -150,17 +156,7 @@ export default {
     },
     // 取消
     handleCancel () {
-      const _this = this
-      this.$confirm({
-        title: '提示',
-        content: '确定取消吗?',
-        okText: '确定',
-        cancelText: '取消',
-        onOk () {
-          _this.clear()
-          _this.cancel()
-        }
-      })
+      this.cancel()
     },
     clear () {
       this.form.resetFields()

+ 2 - 14
src/views/power/menu/childModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
+    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :centered="true">
       <a-form :form="form" @submit="handleSubmit">
         <!-- 上级菜单 -->
         <a-form-item label="上级菜单" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
@@ -244,17 +244,7 @@ export default {
     },
     // 取消
     handleCancel () {
-      const _this = this
-      this.$confirm({
-        title: '提示',
-        content: '确定取消吗?',
-        okText: '确定',
-        cancelText: '取消',
-        onOk () {
-          _this.clear()
-          _this.cancel()
-        }
-      })
+      this.cancel()
     },
     clear () {
       this.form.resetFields()
@@ -305,8 +295,6 @@ export default {
 </script>
 
 <style >
-  .modalBox{
-  }
   .ant-modal-footer {
     display: none;
   }

+ 1 - 1
src/views/power/role/menuModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="roleName" v-model="isshow" @cancle="cancel">
+    <a-modal class="modalBox" :title="roleName" v-model="isshow" @cancle="cancel" :centered="true">
       <a-form class="form-box" style="max-height: 600px;" :form="form" @submit="handleSubmit">
         <a-tree
           checkable

+ 7 - 1
src/views/power/role/roleModal.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" width="45%">
+    <a-modal
+      class="modalBox"
+      :title="titleText"
+      v-model="isshow"
+      @cancle="cancel"
+      width="45%"
+      :centered="true">
       <a-form :form="form" @submit="handleSubmit">
         <!-- 用户名称 -->
         <a-form-item label="角色名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">

+ 7 - 1
src/views/power/user/userModal.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" width="45%">
+    <a-modal
+      class="modalBox"
+      :title="titleText"
+      v-model="isshow"
+      @cancle="cancel"
+      width="45%"
+      :centered="true">
       <a-form :form="form" @submit="handleSubmit">
         <a-row :gutter="24">
           <a-col :span="12">