1

lzhe

2024-06-06 4c810c1feb3f78c458084d73e89adc6c4f2256f1

 src/views/home/widgets/components/welcome.vue

@@ -2,17 +2,49 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-05 11:36:56
 * @LastEditTime: 2024-06-06 16:17:02
 * @FilePath: /src/views/home/widgets/components/welcome.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
   <el-card shadow="hover" header="公告">
      <div class="announcement">
         <!-- <img src="./quesheng.bd026700.png"> -->
         <div>暂无内容</div>
         <div v-if="noticeList.length != 0" v-for="item in noticeList" class="mesg">
            <div>
               <span>{{item.categoryName}}</span>
               <span @click="showDialog(item)">{{item.title}}</span>
            </div>
            <span>{{item.updateTime}}</span>
         </div>
         <div v-if="noticeList.length == 0">暂无内容</div>
      </div>
   </el-card>
   <el-dialog title="查看" v-model="visible" :width="600" destroy-on-close>
      <el-form :model="viewNoticeForm" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
         <el-row>
            <el-col :span="24">
               <el-form-item label="通知标题">
                  <span>{{viewNoticeForm.title}}</span>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="通知类型">
                  <span>{{viewNoticeForm.categoryName}}</span>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="通知时间">
                  <span>{{viewNoticeForm.updateTime}}</span>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="通知内容">
                  <div v-html="viewNoticeForm.content"></div>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
   </el-dialog>
</template>

<script>
@@ -22,12 +54,35 @@
      description: "系统内通知、公告通知快速查看",
      data() {
         return {

            viewNoticeForm: {
               title: "",
               categoryName: "",
               updateTime: "",
               content: ""
            },
            mode: "show",
            visible: false,
            noticeList: []
         }
      },
      mounted() {
         this.showDetail();
      },
      methods: {
         godoc(){
            window.open("https://lolicode.gitee.io/scui-doc/")
         showDialog(item) {
            this.$HTTP.get(`/api/blade-notify/notice/detail?id=${item.id}`).then(res=> {
               if(res.code == 200) {
                  this.visible = true;
                  this.viewNoticeForm = res.data;
               }
            })
         },
         showDetail(){
            this.$HTTP.get("/api/blade-notify/notice/page?current=1&size=-1").then(res=> {
               if(res.code == 200) {
                  this.noticeList = res.data.records;
               }
            })
         }
      }
   }
@@ -42,4 +97,26 @@
      width:150px;
      height:150px;
   }
   .mesg {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
   }
   .mesg > div {
      padding-left: 12px;
   }
   .mesg > div span:nth-child(1) {
      margin-right: 12px;
      padding: 0 10px;
      border: 1px solid #94c4f6;
      background-color: #e5ecf4;
   }
   .mesg > div span:nth-child(2) {
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
   }
   .mesg > span {
      padding-right: 12px;
   }
</style>