XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

系统通知功能优化

main
caiyiling 2026-06-11 13:18:28 +08:00
parent 05e9bbb050
commit 3907123c1d
6 changed files with 426 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/store/modules/global.js
View File

@ -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)

86
src/views/system/notice/components/from.vue
View File

@ -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">
<el-option v-for="item of roleList" :key="item.Id" :label="item.UserTypeShortName" :value="item.Id" />
</el-select>
<div class="role-checkbox-group">
<div class="role-checkbox-actions">
<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>

49
src/views/system/notice/index.vue
View File

@ -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: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>
<el-table-column :label="$t('system:notice:table:UpdateTime')" prop="EndDate" min-width="160" show-overflow-tooltip sortable="custom">
<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()
}
}
}

178
src/views/trials/components/NoticeDetailDialog.vue Normal file
View File

@ -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>

85
src/views/trials/trials-layout/components/noticeMarquee.vue
View File

@ -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.$msgbox({
title: currentNoticeType,
message: h('span', null, item.Content),
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true
setSystemNoticeHaveRead(item.Id).then(async res => {
if (res.IsSuccess) {
await this.$store.dispatch('global/getNoticeList')
}
instance.confirmButtonLoading = false
done()
}).catch(() => { instance.confirmButtonLoading = false })
} else {
done()
}
}
})
this.detailDialog = {
visible: true,
title: currentNoticeType,
content: item.Content || '',
publishedTime: item.PublishedTime || '',
fileName: item.FileName || '',
filePath: item.Path || '',
showConfirmButton: true,
confirmLoading: false,
noticeId: item.Id
}
},
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
}
} 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 => {

96
src/views/trials/trials-notice/index.vue
View File

@ -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)
if (row.IsRead || row.ActualNoticeStateEnum !== 1) {
this.$alert(row.NoticeContent, currentNoticeType, {
showConfirmButton: false,
})
} else {
const h = this.$createElement
this.$msgbox({
title: currentNoticeType,
message: h('span', null, row.NoticeContent),
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()
}
},
})
this.detailDialog = {
visible: true,
title: this.$fd('NoteType', row.NoticeTypeEnum),
content: row.NoticeContent || '',
publishedTime: row.PublishedTime || '',
fileName: row.FileName || '',
filePath: row.Path || '',
showConfirmButton: !row.IsRead && row.ActualNoticeStateEnum === 1,
confirmLoading: false,
noticeId: row.Id
}
},
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>