点击单个看详情公告

src/views/index.vue

@@ -510,8 +510,9 @@
           title="新闻公告"
           iconName="el-icon-s-cooperation"
           :More="true"
+          @seeMore="jumpMoreNews"
         >
-          <div slot="content" style="height: 260px">
+          <div slot="content" style="height: 260px;" class="jingrun-news">
             <div
               style="padding: 4px 15px; font-size: 14px"
               v-for="(item, index) in tableDataTwo"
@@ -519,12 +520,25 @@
               :style="{
                 backgroundColor: index % 2 == 0 ? '#fafbfd' : '#FFFFFF',
               }"
+              @click="openNewsDetails(item.noticeId)"
             >
-              {{ item.noticeTitle }}
+              <span style="cursor: pointer">{{ item.noticeTitle }}</span>
             </div>
           </div>
         </chi-card>
       </div>
+      <el-dialog
+        title="新闻公告"
+        :visible.sync="newsVisible"
+        width="700px"
+        v-dialogDrag
+        :close-on-click-modal="false">
+        <h3>{{ newsDetails.noticeTitle }}</h3>
+        <p class="html-box" v-html="newsDetails.noticeContent"></p>
+        <span slot="footer">
+          <el-button @click="newsVisible = false">关闭</el-button>
+        </span>
+      </el-dialog>
       <div class="home-right">
         <chi-card title="运行车辆" iconName="el-icon-s-order" :More="true">
           <div slot="content" class="upper-right">
@@ -587,33 +601,33 @@
             </div>
           </div>
         </chi-card>
-        <chi-card title="审核列表" iconName="el-icon-s-order" :More="true">
-          <div slot="content" class="upper-right2">
-            <div
-              style="
-                font-size: 14px;
-                display: flex;
-                margin: 4px 15px;
-                border-bottom: 1px dashed #e6ebf5;
-              "
-            >
-              <div style="width: 30%" class="single_line">FK221516485645</div>
-              <div style="width: 20%" class="single_line">运费运费运费</div>
-              <div style="width: 15%" class="single_line">李刚</div>
-              <div style="width: 15%; color: #67c23a">待审批</div>
-              <div style="width: 20%" class="single_line">2020/10/10</div>
-            </div>
-            <div style="font-size: 14px; display: flex; margin: 4px 15px">
-              <div style="width: 30%" class="single_line">FK221516485645</div>
-              <div style="width: 20%" class="single_line">运费运费运费</div>
-              <div style="width: 15%" class="single_line">李刚</div>
-              <div style="width: 15%; color: #67c23a" class="single_line">
-                待审批
-              </div>
-              <div style="width: 20%" class="single_line">2020/10/10</div>
-            </div>
-          </div>
-        </chi-card>
+<!--        <chi-card title="审核列表" iconName="el-icon-s-order" :More="true">-->
+<!--          <div slot="content" class="upper-right2">-->
+<!--            <div-->
+<!--              style="-->
+<!--                font-size: 14px;-->
+<!--                display: flex;-->
+<!--                margin: 4px 15px;-->
+<!--                border-bottom: 1px dashed #e6ebf5;-->
+<!--              "-->
+<!--            >-->
+<!--              <div style="width: 30%" class="single_line">FK221516485645</div>-->
+<!--              <div style="width: 20%" class="single_line">运费运费运费</div>-->
+<!--              <div style="width: 15%" class="single_line">李刚</div>-->
+<!--              <div style="width: 15%; color: #67c23a">待审批</div>-->
+<!--              <div style="width: 20%" class="single_line">2020/10/10</div>-->
+<!--            </div>-->
+<!--            <div style="font-size: 14px; display: flex; margin: 4px 15px">-->
+<!--              <div style="width: 30%" class="single_line">FK221516485645</div>-->
+<!--              <div style="width: 20%" class="single_line">运费运费运费</div>-->
+<!--              <div style="width: 15%" class="single_line">李刚</div>-->
+<!--              <div style="width: 15%; color: #67c23a" class="single_line">-->
+<!--                待审批-->
+<!--              </div>-->
+<!--              <div style="width: 20%" class="single_line">2020/10/10</div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </chi-card>-->
       </div>
     </div>
     <div v-if="sysType == 3">
@@ -814,6 +828,13 @@ export default {
       upperLeftCntrs: {},
       sysType: "",
       upperRights: [],
+      // 新闻公告详情弹窗
+      newsVisible: false,
+      // 新闻公告内容
+      newsDetails: {
+        noticeTitle: '',
+        noticeContent: ''
+      },
     };
   },
   filters: {
@@ -1307,7 +1328,8 @@ export default {
       this.loading = true;
       listCorps(this.queryParams).then((response) => {
         if (response.rows.length > 0) {
-          this.tableDataTwo = response.rows.slice(0, 10);
+          // this.tableDataTwo = response.rows.slice(0, 10);
+          this.tableDataTwo = response.rows
         }
       });
     },
@@ -1537,6 +1559,21 @@ export default {
         ],
       });
     },
+    openNewsDetails(id) {
+      this.tableDataTwo.forEach(item => {
+        if (item.noticeId === id) {
+          this.newsDetails.noticeTitle = item.noticeTitle;
+          this.newsDetails.noticeContent = item.noticeContent
+        }
+      })
+      this.newsVisible = true
+    },
+    // 跳转到更多公告页面
+    jumpMoreNews() {
+      this.$router.push({
+        path: "/notice/seeMore",
+      });
+    },
   },
 };
 </script>
@@ -1692,7 +1729,8 @@ export default {
   }
   .upper-right {
     padding: 10px 0;
-    height: 260px;
+    //height: 260px;
+    height: 417px;
   }
   .upper-right2 {
     padding: 10px 0;
@@ -1745,4 +1783,15 @@ export default {
   justify-content: space-around;
   align-self: center;
 }
+.jingrun-news {
+  overflow: auto;
+}
+.html-box p {
+  width: 100%;
+}
+.html-box p img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100% !important;
+}
 </style>