处理消息中心页面种的table 及 分页的样式问题

src/views/system/UserAnnouncementList.vue

@@ -4,7 +4,6 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-
           <a-col :span="6">
             <a-form-item label="Title">
               <a-input placeholder="Please enter the title" v-model="queryParam.titile"></a-input>
@@ -17,12 +16,11 @@
           </a-col>
 
           <a-col :span="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">Query</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">Reset</a-button>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
@@ -33,14 +31,14 @@
 
     <a-table
       ref="table"
-      size="default"
+      size="middle"
-      bordered
       rowKey="id"
       :columns="columns"
       :dataSource="dataSource"
       :pagination="ipagination"
       :loading="loading"
-      @change="handleTableChange">
+      @change="handleTableChange"
+    >
       <span slot="action" slot-scope="text, record">
         <a @click="showAnnouncement(record)">VIEW</a>
       </span>
@@ -58,135 +56,154 @@
 import DynamicNotice from '../../components/tools/DynamicNotice'
 
 export default {
-    name: "UserAnnouncementList",
+  name: 'UserAnnouncementList',
   mixins: [JeecgListMixin],
   components: {
     DynamicNotice,
-      ShowAnnouncement
+    ShowAnnouncement,
   },
   data() {
     return {
       description: '系统通告表管理页面',
       queryParam: {},
-        columns: [{
+      columns: [
+        {
           title: 'TITLE',
-          align:"center",
+          align: 'center',
-          dataIndex: 'titile'
+          dataIndex: 'titile',
-        },{
+        },
+        {
           title: 'MESSAGE TYPE',
-          align: "center",
+          align: 'center',
           dataIndex: 'msgCategory',
           customRender: function (text) {
             if (text == '1') {
-              return "NOTICE";
+              return 'NOTICE'
-            } else if (text == "2") {
+            } else if (text == '2') {
-              return "SYSTEM";
+              return 'SYSTEM'
             } else {
-              return text;
+              return text
             }
-          }
+          },
-        },{
+        },
+        {
           title: 'SENDER',
-          align:"center",
+          align: 'center',
-          dataIndex: 'sender'
+          dataIndex: 'sender',
-        },{
+        },
+        {
           title: 'SEND TIME',
-          align:"center",
+          align: 'center',
-          dataIndex: 'sendTime'
+          dataIndex: 'sendTime',
-        },{
+        },
+        {
           title: 'PRIORTIY',
-          align:"center",
+          align: 'center',
           dataIndex: 'priority',
           customRender: function (text) {
             if (text == 'L') {
-              return "LOW";
+              return 'LOW'
-            }else if(text=="M"){
+            } else if (text == 'M') {
-              return "MIDDLE";
+              return 'MIDDLE'
-            }else if(text=="H"){
+            } else if (text == 'H') {
-              return "HIGH";
+              return 'HIGH'
             } else {
-              return text;
+              return text
             }
-          }
+          },
-        },{
+        },
+        {
           title: 'READING STATE',
-          align:"center",
+          align: 'center',
           dataIndex: 'readFlag',
           customRender: function (text) {
             if (text == '0') {
-              return "UNREAD";
+              return 'UNREAD'
-            }else if(text=="1"){
+            } else if (text == '1') {
-              return "READ";
+              return 'READ'
             } else {
-              return text;
+              return text
             }
-          }
+          },
-        },{
+        },
+        {
           title: 'ACTION',
           dataIndex: 'action',
-          align:"center",
+          align: 'center',
           scopedSlots: { customRender: 'action' },
-        }],
+        },
+      ],
       url: {
-          list: "/sys/sysAnnouncementSend/getMyAnnouncementSend",
+        list: '/sys/sysAnnouncementSend/getMyAnnouncementSend',
-          editCementSend:"sys/sysAnnouncementSend/editByAnntIdAndUserId",
+        editCementSend: 'sys/sysAnnouncementSend/editByAnntIdAndUserId',
-          readAllMsg:"sys/sysAnnouncementSend/readAll",
+        readAllMsg: 'sys/sysAnnouncementSend/readAll',
       },
       loading: false,
       openPath: '',
-        formData:''
+      formData: '',
     }
   },
   methods: {
     handleDetail: function (record) {
-        this.$refs.sysAnnouncementModal.detail(record);
+      this.$refs.sysAnnouncementModal.detail(record)
-        this.$refs.sysAnnouncementModal.title="VIEW";
+      this.$refs.sysAnnouncementModal.title = 'VIEW'
     },
     showAnnouncement(record) {
       putAction(this.url.editCementSend, { anntId: record.anntId }).then((res) => {
         if (res.success) {
-            this.loadData();
+          this.loadData()
           this.syncHeadNotic(record.anntId)
         }
-        });
+      })
       if (record.openType === 'component') {
-          this.openPath = record.openPage;
+        this.openPath = record.openPage
-          this.formData = {id:record.busId};
+        this.formData = { id: record.busId }
-          this.$refs.showDynamNotice.detail();
+        this.$refs.showDynamNotice.detail()
       } else {
-          this.$refs.ShowAnnouncement.detail(record);
+        this.$refs.ShowAnnouncement.detail(record)
       }
     },
     syncHeadNotic(anntId) {
-        getAction("sys/annountCement/syncNotic",{anntId:anntId})
+      getAction('sys/annountCement/syncNotic', { anntId: anntId })
     },
     readAll() {
-        var that = this;
+      var that = this
       that.$confirm({
-          title:"Config",
+        title: 'Config',
-          content:"Whether all marks are read?",
+        content: 'Whether all marks are read?',
         onOk: function () {
           putAction(that.url.readAllMsg).then((res) => {
             if (res.success) {
-                that.$message.success(res.message);
+              that.$message.success(res.message)
-                that.loadData();
+              that.loadData()
-                that.syncHeadNotic();
+              that.syncHeadNotic()
             }
-            });
+          })
-          }
+        },
-        });
+      })
+    },
   },
 }
-  }
 </script>
-<style scoped>
+<style lang="less" scoped>
 .ant-card-body .table-operator {
   margin-bottom: 18px;
 }
-  .anty-row-operator button{margin: 0 5px}
+.anty-row-operator button {
-  .ant-btn-danger{background-color: #ffffff}z
+  margin: 0 5px;
-
+}
-  .ant-modal-cust-warp{height: 100%}
+.ant-btn-danger {
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
+  background-color: #ffffff;
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+}
+z .ant-modal-cust-warp {
+  height: 100%;
+}
+.ant-modal-cust-warp .ant-modal-body {
+  height: calc(100% - 110px) !important;
+  overflow-y: auto;
+}
+.ant-modal-cust-warp .ant-modal-content {
+  height: 90% !important;
+  overflow-y: hidden;
+}
 </style>