系统通知功能优化

src/store/modules/global.js

@@ -128,7 +128,14 @@ const actions = {
         if (response.IsSuccess) {
           var noticeList = []
           response.Result.forEach(el => {
-            noticeList.push({ Id: el.Id, Content: el.NoticeContent, NoticeTypeEnum: el.NoticeTypeEnum })
+            noticeList.push({
+              Id: el.Id,
+              Content: el.NoticeContent,
+              NoticeTypeEnum: el.NoticeTypeEnum,
+              PublishedTime: el.PublishedTime,
+              FileName: el.FileName,
+              Path: el.Path
+            })
           })
 
           commit('SET_NOTICE', noticeList)

src/views/system/notice/components/from.vue

@@ -4,30 +4,38 @@
       <el-form ref="NoticeForm" :model="form" :rules="rules" label-width="180px" size="small">
         <el-form-item :label="$t('system:notice:label:NoticeLevel')" prop="NoticeLevelEnum">
           <el-select v-model="form.NoticeLevelEnum" clearable size="small">
-            <el-option v-for="item of dict.type.NoteLevel" :key="item.value" :label="item.label"
+            <el-option v-for="item of $d.NoteLevel" :key="item.value" :label="item.label"
               :value="item.raw.Code * 1" />
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:NoticeType')" prop="NoticeTypeEnum">
           <el-select v-model="form.NoticeTypeEnum" clearable size="small">
-            <el-option v-for="item of dict.type.NoteType" :key="item.value" :label="item.label"
+            <el-option v-for="item of $d.NoteType" :key="item.value" :label="item.label"
               :value="item.raw.Code * 1" />
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:ApplicableProject')" prop="ApplicableProjectEnum">
           <el-select v-model="form.ApplicableProjectEnum" clearable size="small">
-            <el-option v-for="item of dict.type.NoticeApplicableTrial" :key="item.value" :label="item.label"
+            <el-option v-for="item of $d.NoticeApplicableTrial" :key="item.value" :label="item.label"
               :value="item.raw.Code * 1" />
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:NoticeUserTypeIdList')" prop="NoticeUserTypeIdList">
-          <el-select v-model="form.NoticeUserTypeIdList" multiple clearable size="small">
+          <div class="role-checkbox-group">
-            <el-option v-for="item of roleList" :key="item.Id" :label="item.UserTypeShortName" :value="item.Id" />
+            <div class="role-checkbox-actions">
-          </el-select>
+              <el-button size="small" type="text" @click="handleSelectAllRoles">全选</el-button>
+              <el-button size="small" type="text" @click="handleClearRoles">清空</el-button>
+            </div>
+            <el-checkbox-group v-model="form.NoticeUserTypeIdList" class="role-checkbox-list">
+              <el-checkbox v-for="item of roleList" :key="item.Id" :label="item.Id">
+                {{ item.UserTypeShortName }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:NoticeMode')" prop="NoticeModeEnum">
           <el-select v-model="form.NoticeModeEnum" clearable size="small">
-            <el-option v-for="item of dict.type.NoticeMode" :key="item.value" :label="item.label"
+            <el-option v-for="item of $d.NoticeMode" :key="item.value" :label="item.label"
               :value="item.raw.Code * 1" />
           </el-select>
         </el-form-item>
@@ -35,13 +43,14 @@
           <el-date-picker v-model="form.StartDate" type="datetime" />
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:EndDate')" prop="EndDate">
-          <el-date-picker v-model="form.EndDate" type="datetime" :default-time="'23:59:59'" />
+          <el-date-picker v-model="form.EndDate" type="datetime" :default-time="'23:59:59'"
+            @change="handleEndDateChange" />
         </el-form-item>
         <el-form-item v-if="!form.Id" :label="$t('system:notice:label:IsPush')" prop="IsPush">
           <el-switch v-model="form.IsPush" :active-value="true" :inactive-value="false" />
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:NoticeContent')" prop="NoticeContent">
-          <el-input v-model="form.NoticeContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
+          <el-input v-model="form.NoticeContent" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" />
         </el-form-item>
         <el-form-item :label="$t('system:notice:label:file')">
           <el-upload class="upload-demo" action :before-upload="beforeUpload" :http-request="handleUploadFile"
@@ -106,12 +115,44 @@ export default {
         NoticeUserTypeIdList: [{ required: true, message: 'Please specify', trigger: 'blur' }]
       },
       fileList: [],
-      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true }
+      model_cfg: {
+        visible: false,
+        showClose: true,
+        width: '800px',
+        title: '',
+        appendToBody: true,
+        bodyStyle: {
+          maxHeight: '60vh',
+          overflowY: 'auto'
+        }
+      }
     }
   },
   mounted() {
   },
   methods: {
+    handleSelectAllRoles() {
+      this.form.NoticeUserTypeIdList = this.roleList.map(item => item.Id)
+    },
+    handleClearRoles() {
+      this.form.NoticeUserTypeIdList = []
+    },
+    handleEndDateChange(value) {
+      this.form.EndDate = this.normalizeEndDate(value)
+    },
+    normalizeEndDate(value) {
+      if (!value) {
+        return value
+      }
+      const date = new Date(value)
+      if (Number.isNaN(date.getTime())) {
+        return value
+      }
+      if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
+        date.setHours(23, 59, 59, 0)
+      }
+      return date
+    },
     handleRemoveFile() {
       this.form.FileName = null
       this.form.Path = null
@@ -147,6 +188,7 @@ export default {
           this.fileList[0] = { name: this.form.FileName, path: this.form.FilePath, fullPath: this.form.FullFilePath }
         }
         this.$set(this.form, 'NoticeUserTypeIdList', this.form.NoticeUserTypeList.map(v => v.Id))
+        this.form.EndDate = this.normalizeEndDate(this.form.EndDate)
       } else {
         this.form = formDataDefault()
       }
@@ -177,3 +219,27 @@ export default {
   }
 }
 </script>
+<style scoped>
+.role-checkbox-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.role-checkbox-actions {
+  margin-bottom: 8px;
+}
+
+.role-checkbox-actions .el-button + .el-button {
+  margin-left: 12px;
+}
+
+.role-checkbox-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+
+.role-checkbox-list .el-checkbox {
+  margin-right: 0;
+}
+</style>

src/views/system/notice/index.vue

@@ -57,14 +57,21 @@
           <el-button type="primary" icon="el-icon-plus" @click="handleAdd">{{ $t('common:button:add') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="loading" v-adaptive="{bottomOffset:45}" height="100" :data="list" class="table">
+      <el-table 
+        v-loading="loading" 
+        v-adaptive="{bottomOffset:45}" 
+        height="100" 
+        :data="list" 
+        class="table"
+        @sort-change="handleSortChange"
+      >
         <el-table-column type="index" width="50" />
-        <el-table-column :label="$t('system:notice:table:NoticeLevel')" prop="NoticeLevelEnum" min-width="120" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:NoticeLevel')" prop="NoticeLevelEnum" min-width="120" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
             {{ $d.NoteLevel.find(v => {return v.raw.Code * 1 === scope.row.NoticeLevelEnum}) ? $d.NoteLevel.find(v => {return v.raw.Code * 1 === scope.row.NoticeLevelEnum}).label : '' }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:NoticeType')" prop="NoticeTypeEnum" min-width="100" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:NoticeType')" prop="NoticeTypeEnum" min-width="100" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
             {{ $d.NoteType.find(v => {return v.raw.Code * 1 === scope.row.NoticeTypeEnum}) ? $d.NoteType.find(v => {return v.raw.Code * 1 === scope.row.NoticeTypeEnum}).label : '' }}
           </template>
@@ -74,46 +81,47 @@
             {{ scope.row.NoticeContent }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:NoticeState')" prop="NoticeStateEnum" min-width="100" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:NoticeState')" prop="NoticeStateEnum" min-width="100" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
             <el-tag :type="scope.row.ActualNoticeStateEnum === 0 ? 'info' : scope.row.ActualNoticeStateEnum === 1 ? 'success' : 'danger'">
               {{ $d.NoticeState.find(v => {return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum}) ? $d.NoticeState.find(v => {return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum}).label : '' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:ApplicableProject')" prop="ApplicableProjectEnum" min-width="100" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:ApplicableProject')" prop="ApplicableProjectEnum" min-width="100" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
             {{ $d.NoticeApplicableTrial.find(v => {return v.raw.Code * 1 === scope.row.ApplicableProjectEnum}) ? $d.NoticeApplicableTrial.find(v => {return v.raw.Code * 1 === scope.row.ApplicableProjectEnum}).label : '' }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:NoticeUserTypeList')" prop="NoticeUserTypeList" min-width="80" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:NoticeUserTypeList')" prop="NoticeUserTypeList" min-width="100" show-overflow-tooltip>
           <template slot-scope="scope">
             {{ scope.row.NoticeUserTypeList.map(v => v.UserTypeShortName).toString() }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:NoticeMode')" prop="NoticeModeEnum" min-width="100" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:NoticeMode')" prop="NoticeModeEnum" min-width="100" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
             {{ dict.type.NoticeMode.find(v => {return v.raw.Code * 1 === scope.row.NoticeModeEnum}) ? $d.NoticeMode.find(v => {return v.raw.Code * 1 === scope.row.NoticeModeEnum}).label : '' }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:StartDate')" prop="StartDate" min-width="240" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:StartDate')" prop="StartDate" min-width="160" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
-            {{ scope.row.StartDate }}-{{ scope.row.EndDate }}
+            {{ scope.row.StartDate }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:PublishUserName')" prop="PublishUserName" min-width="100" show-overflow-tooltip />
+        <el-table-column :label="$t('system:notice:table:UpdateTime')" prop="EndDate" min-width="160" show-overflow-tooltip sortable="custom">
-        <el-table-column :label="$t('system:notice:table:PublishedTime')" prop="PublishedTime" min-width="160" show-overflow-tooltip />
-        <el-table-column :label="$t('system:notice:table:UpdateTime')" prop="UpdateTime" min-width="160" show-overflow-tooltip>
           <template slot-scope="scope">
-            {{ scope.row.StartDate ? scope.row.StartDate: scope.row.CreateTime }}
+            {{ scope.row.EndDate }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:notice:table:FileName')" fixed="right" prop="FileName" min-width="120" show-overflow-tooltip>
+        <el-table-column :label="$t('system:notice:table:PublishUserName')" prop="PublishUserName" min-width="100" show-overflow-tooltip sortable="custom"/>
+        <el-table-column :label="$t('system:notice:table:PublishedTime')" prop="PublishedTime" min-width="160" show-overflow-tooltip sortable="custom"/>
+        
+        <el-table-column :label="$t('system:notice:table:FileName')" fixed="right" prop="FileName" min-width="120" show-overflow-tooltip sortable="custom">
           <template slot-scope="scope">
             <a :href="OSSclientConfig.basePath + scope.row.FullFilePath" target="_blank" style="color:#428bca">{{ scope.row.FileName }}</a>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('common:action:action')" fixed="right" prop="UserTypeShortName" min-width="200" show-overflow-tooltip>
+        <el-table-column :label="$t('common:action:action')" fixed="right" prop="UserTypeShortName" min-width="120" show-overflow-tooltip>
           <template slot-scope="scope">
             <el-button
               type="text"
@@ -236,6 +244,17 @@ export default {
       }).catch(() => {
         this.loading = false
       })
+    },
+    // 排序
+    handleSortChange(column) {
+      if (column.order === 'ascending') {
+        this.searchData.Asc = true
+      } else {
+        this.searchData.Asc = false
+      }
+      this.searchData.SortField = column.prop
+      this.searchData.PageIndex = 1
+      this.getList()
     }
   }
 }

src/views/trials/components/NoticeDetailDialog.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-dialog
+    class="notice-detail-dialog"
+    :visible.sync="dialogVisible"
+    :title="title"
+    width="700px"
+    append-to-body
+    :close-on-click-modal="false"
+    @closed="handleClosed"
+  >
+    <div class="notice-detail-dialog__body">
+      <div v-if="publishedTime" class="notice-detail-dialog__meta">
+        <span class="notice-detail-dialog__time">{{ publishedTime }}</span>
+      </div>
+
+      <div class="notice-detail-dialog__content">
+        {{ content || '-' }}
+      </div>
+
+      <div v-if="filePath" class="notice-detail-dialog__attachment">
+        <div class="notice-detail-dialog__attachment-label">{{ $t('trials:notice:table:appendix') }}</div>
+        <div class="notice-detail-dialog__attachment-card">
+          <i class="el-icon-paperclip" />
+          <el-button size="small" type="text" @click="$emit('open-file', filePath)">
+            {{ fileName}}
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <span slot="footer" class="notice-detail-dialog__footer">
+      <el-button size="small" @click="handleClose">{{ $t('common:button:close') }}</el-button>
+      <el-button
+        v-if="showConfirmButton"
+        size="small"
+        type="primary"
+        :loading="confirmLoading"
+        @click="$emit('confirm')"
+      >
+        {{ $t('common:button:confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'NoticeDetailDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    publishedTime: {
+      type: String,
+      default: '',
+    },
+    fileName: {
+      type: String,
+      default: '',
+    },
+    filePath: {
+      type: String,
+      default: '',
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: false,
+    },
+    confirmLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(value) {
+        this.$emit('update:visible', value)
+      },
+    },
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleClosed() {
+      this.$emit('closed')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-detail-dialog {
+  ::v-deep .el-dialog__header {
+    padding: 18px 20px 10px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0;
+  }
+
+  ::v-deep .el-dialog__footer {
+    padding: 12px 20px 18px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+
+.notice-detail-dialog__body {
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 18px 20px;
+}
+
+.notice-detail-dialog__meta {
+  margin-bottom: 12px;
+  color: #909399;
+  font-size: 13px;
+}
+
+.notice-detail-dialog__content {
+  padding: 14px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #f8f9fb;
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.7;
+  color: #303133;
+}
+
+.notice-detail-dialog__attachment {
+  margin-top: 16px;
+}
+
+.notice-detail-dialog__attachment-label {
+  margin-bottom: 8px;
+  color: #606266;
+  font-size: 13px;
+}
+
+.notice-detail-dialog__attachment-card {
+  display: flex;
+  align-items: center;
+  padding: 12px 14px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.notice-detail-dialog__attachment-card .el-icon-paperclip {
+  margin-right: 8px;
+  color: #409eff;
+  font-size: 16px;
+}
+
+.notice-detail-dialog__attachment-name {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #303133;
+}
+</style>

src/views/trials/trials-layout/components/noticeMarquee.vue

@@ -7,16 +7,45 @@
         {{ item.Content }}
       </span>
     </marquee>
+    <notice-detail-dialog
+      :visible.sync="detailDialog.visible"
+      :title="detailDialog.title"
+      :content="detailDialog.content"
+      :published-time="detailDialog.publishedTime"
+      :file-name="detailDialog.fileName"
+      :file-path="detailDialog.filePath"
+      :show-confirm-button="detailDialog.showConfirmButton"
+      :confirm-loading="detailDialog.confirmLoading"
+      @confirm="handleDetailConfirm"
+      @open-file="downLoadFile"
+      @closed="handleDetailClosed"
+    />
   </div>
 </template>
 <script>
 import { setSystemNoticeHaveRead } from '@/api/global'
 import { getBasicDataSelects } from '@/api/dictionary/dictionary'
+import NoticeDetailDialog from '@/views/trials/components/NoticeDetailDialog'
+const detailDialogDefault = () => {
+  return {
+    visible: false,
+    title: '',
+    content: '',
+    publishedTime: '',
+    fileName: '',
+    filePath: '',
+    showConfirmButton: false,
+    confirmLoading: false,
+    noticeId: null
+  }
+}
 export default {
   name: 'NoticeMarquee',
+  components: { NoticeDetailDialog },
   data() {
     return {
-      noteType: []
+      noteType: [],
+      detailDialog: detailDialogDefault()
     }
   },
   computed: {
@@ -40,25 +69,41 @@ export default {
       if (i > -1) {
         currentNoticeType = this.noteType[i].Value
       }
-      const h = this.$createElement
+      this.detailDialog = {
-      this.$msgbox({
+        visible: true,
         title: currentNoticeType,
-        message: h('span', null, item.Content),
+        content: item.Content || '',
-        beforeClose: (action, instance, done) => {
+        publishedTime: item.PublishedTime || '',
-          if (action === 'confirm') {
+        fileName: item.FileName || '',
-            instance.confirmButtonLoading = true
+        filePath: item.Path || '',
-            setSystemNoticeHaveRead(item.Id).then(async res => {
+        showConfirmButton: true,
-              if (res.IsSuccess) {
+        confirmLoading: false,
-                await this.$store.dispatch('global/getNoticeList')
+        noticeId: item.Id
-              }
+      }
-              instance.confirmButtonLoading = false
+    },
-              done()
+    async handleDetailConfirm() {
-            }).catch(() => { instance.confirmButtonLoading = false })
+      if (!this.detailDialog.noticeId) {
-          } else {
+        return
-            done()
+      }
-          }
+      this.detailDialog.confirmLoading = true
+      try {
+        const res = await setSystemNoticeHaveRead(this.detailDialog.noticeId)
+        if (res.IsSuccess) {
+          await this.$store.dispatch('global/getNoticeList')
+          this.detailDialog.visible = false
         }
-      })
+      } catch (err) {
+        console.log(err)
+      } finally {
+        this.detailDialog.confirmLoading = false
+      }
+    },
+    handleDetailClosed() {
+      this.detailDialog = detailDialogDefault()
+    },
+    downLoadFile(filePath) {
+      if (!filePath) return
+      window.open(this.OSSclientConfig.basePath + filePath, '_blank')
     },
     getDicData() {
       getBasicDataSelects(['NoteType']).then(res => {

src/views/trials/trials-notice/index.vue

@@ -172,6 +172,19 @@
         :limit.sync="searchData.PageSize"
         @pagination="getList"
       />
+      <notice-detail-dialog
+        :visible.sync="detailDialog.visible"
+        :title="detailDialog.title"
+        :content="detailDialog.content"
+        :published-time="detailDialog.publishedTime"
+        :file-name="detailDialog.fileName"
+        :file-path="detailDialog.filePath"
+        :show-confirm-button="detailDialog.showConfirmButton"
+        :confirm-loading="detailDialog.confirmLoading"
+        @confirm="handleDetailConfirm"
+        @open-file="downLoadFile"
+        @closed="handleDetailClosed"
+      />
     </template>
   </BaseContainer>
 </template>
@@ -179,6 +192,7 @@
 import { getUserSystemNoticeList, setSystemNoticeHaveRead } from '@/api/global'
 import BaseContainer from '@/components/BaseContainer'
 import Pagination from '@/components/Pagination'
+import NoticeDetailDialog from '@/views/trials/components/NoticeDetailDialog'
 const searchDataDefault = () => {
   return {
     NoticeContent: '',
@@ -193,9 +207,22 @@ const searchDataDefault = () => {
     PageSize: 20,
   }
 }
+const detailDialogDefault = () => {
+  return {
+    visible: false,
+    title: '',
+    content: '',
+    publishedTime: '',
+    fileName: '',
+    filePath: '',
+    showConfirmButton: false,
+    confirmLoading: false,
+    noticeId: null,
+  }
+}
 export default {
   name: 'TrialsNotice',
-  components: { BaseContainer, Pagination },
+  components: { BaseContainer, Pagination, NoticeDetailDialog },
   dicts: ['NoteType', 'NoticeState', 'NoticeMode'],
   data() {
     return {
@@ -203,6 +230,7 @@ export default {
       list: [],
       total: 0,
       loading: false,
+      detailDialog: detailDialogDefault(),
     }
   },
   mounted() {
@@ -222,38 +250,39 @@ export default {
         })
     },
     showDetail(row) {
-      var currentNoticeType = this.$fd('NoteType', row.NoticeTypeEnum)
+      this.detailDialog = {
-      if (row.IsRead || row.ActualNoticeStateEnum !== 1) {
+        visible: true,
-        this.$alert(row.NoticeContent, currentNoticeType, {
+        title: this.$fd('NoteType', row.NoticeTypeEnum),
-          showConfirmButton: false,
+        content: row.NoticeContent || '',
-        })
+        publishedTime: row.PublishedTime || '',
-      } else {
+        fileName: row.FileName || '',
-        const h = this.$createElement
+        filePath: row.Path || '',
-        this.$msgbox({
+        showConfirmButton: !row.IsRead && row.ActualNoticeStateEnum === 1,
-          title: currentNoticeType,
+        confirmLoading: false,
-          message: h('span', null, row.NoticeContent),
+        noticeId: row.Id
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true
-              setSystemNoticeHaveRead(row.Id)
-                .then(async (res) => {
-                  if (res.IsSuccess) {
-                    await this.$store.dispatch('global/getNoticeList')
-                    this.getList()
-                  }
-                  instance.confirmButtonLoading = false
-                  done()
-                })
-                .catch(() => {
-                  instance.confirmButtonLoading = false
-                })
-            } else {
-              done()
-            }
-          },
-        })
       }
     },
+    async handleDetailConfirm() {
+      if (!this.detailDialog.noticeId) {
+        return
+      }
+      this.detailDialog.confirmLoading = true
+      try {
+        const res = await setSystemNoticeHaveRead(this.detailDialog.noticeId)
+        if (res.IsSuccess) {
+          await this.$store.dispatch('global/getNoticeList')
+          this.detailDialog.visible = false
+          this.getList()
+        }
+      } catch (err) {
+        console.log(err)
+      } finally {
+        this.detailDialog.confirmLoading = false
+      }
+    },
+    handleDetailClosed() {
+      this.detailDialog = detailDialogDefault()
+    },
     downLoadFile(filePath) {
       if (!filePath) return
       window.open(this.OSSclientConfig.basePath + filePath, '_blank')
@@ -281,4 +310,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.notice-content-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
 </style>