forked from liweijie/education
1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\HeaderNotice\\DetailView.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\HeaderNotice\\DetailView.vue","mtime":1787567871536},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\babel-loader\\lib\\index.js","mtime":1787309793142},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgeyBnZXROb3RpY2UgfSBmcm9tICdAL2FwaS9zeXN0ZW0vbm90aWNlJw0KDQpleHBvcnQgZGVmYXVsdCB7DQogIG5hbWU6ICdOb3RpY2VEZXRhaWxWaWV3JywNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgdmlzaWJsZTogZmFsc2UsDQogICAgICBsb2FkaW5nOiBmYWxzZSwNCiAgICAgIGRldGFpbDogbnVsbA0KICAgIH0NCiAgfSwNCiAgY29tcHV0ZWQ6IHsNCiAgICBpc1N0YXR1c05vcm1hbCgpIHsNCiAgICAgIGNvbnN0IHMgPSB0aGlzLmRldGFpbCAmJiB0aGlzLmRldGFpbC5zdGF0dXMNCiAgICAgIHJldHVybiBzID09PSAnMCcgfHwgcyA9PT0gMA0KICAgIH0sDQogICAgaGFzQ29udGVudCgpIHsNCiAgICAgIGNvbnN0IGMgPSB0aGlzLmRldGFpbCAmJiB0aGlzLmRldGFpbC5ub3RpY2VDb250ZW50DQogICAgICByZXR1cm4gYyAhPSBudWxsICYmIFN0cmluZyhjKS50cmltKCkgIT09ICcnDQogICAgfQ0KICB9LA0KICBtZXRob2RzOiB7DQogICAgb3BlbihwYXlsb2FkKSB7DQogICAgICBsZXQgaWQgPSBudWxsDQogICAgICBsZXQgcHJlc2V0ID0gbnVsbA0KICAgICAgaWYgKHBheWxvYWQgIT0gbnVsbCAmJiB0eXBlb2YgcGF5bG9hZCA9PT0gJ29iamVjdCcpIHsNCiAgICAgICAgaWQgPSBwYXlsb2FkLm5vdGljZUlkDQogICAgICAgIGlmIChwYXlsb2FkLm5vdGljZUNvbnRlbnQgIT0gbnVsbCkgew0KICAgICAgICAgIHByZXNldCA9IHBheWxvYWQNCiAgICAgICAgfQ0KICAgICAgfSBlbHNlIHsNCiAgICAgICAgaWQgPSBwYXlsb2FkDQogICAgICB9DQogICAgICB0aGlzLnZpc2libGUgPSB0cnVlDQogICAgICBpZiAocHJlc2V0KSB7DQogICAgICAgIHRoaXMuZGV0YWlsID0gcHJlc2V0DQogICAgICAgIHJldHVybg0KICAgICAgfQ0KICAgICAgaWYgKGlkID09IG51bGwgfHwgaWQgPT09ICcnKSB7DQogICAgICAgIHRoaXMuZGV0YWlsID0gbnVsbA0KICAgICAgICByZXR1cm4NCiAgICAgIH0NCiAgICAgIHRoaXMubG9hZGluZyA9IHRydWUNCiAgICAgIHRoaXMuZGV0YWlsID0gbnVsbA0KICAgICAgZ2V0Tm90aWNlKGlkKS50aGVuKHJlcyA9PiB7DQogICAgICAgIHRoaXMuZGV0YWlsID0gcmVzLmRhdGENCiAgICAgIH0pLmNhdGNoKCgpID0+IHsNCiAgICAgICAgdGhpcy5kZXRhaWwgPSBudWxsDQogICAgICB9KS5maW5hbGx5KCgpID0+IHsNCiAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2UNCiAgICAgIH0pDQogICAgfSwNCiAgICBoYW5kbGVDbG9zZSgpIHsNCiAgICAgIHRoaXMudmlzaWJsZSA9IGZhbHNlDQogICAgICB0aGlzLmRldGFpbCA9IG51bGwNCiAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlDQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["DetailView.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"DetailView.vue","sourceRoot":"src/layout/components/HeaderNotice","sourcesContent":["<template>\r\n <el-drawer title=\"公告详情\" :visible.sync=\"visible\" direction=\"rtl\" size=\"50%\" append-to-body :before-close=\"handleClose\" custom-class=\"notice-detail-drawer\">\r\n <div v-loading=\"loading\" class=\"notice-detail-drawer__body\">\r\n <div v-if=\"!detail\" class=\"notice-empty\">\r\n <i class=\"el-icon-document\"></i>\r\n <span>暂无数据</span>\r\n </div>\r\n <div v-else class=\"notice-page\">\r\n <div class=\"notice-type-wrap\">\r\n <span v-if=\"detail.noticeType === '1'\" class=\"notice-type-tag type-notify\">\r\n <i class=\"el-icon-bell\"></i> 通知\r\n </span>\r\n <span v-else-if=\"detail.noticeType === '2'\" class=\"notice-type-tag type-announce\">\r\n <i class=\"el-icon-message\"></i> 公告\r\n </span>\r\n <span v-else class=\"notice-type-tag type-notify\">\r\n <i class=\"el-icon-document\"></i> 消息\r\n </span>\r\n </div>\r\n\r\n <h1 class=\"notice-title\">{{ detail.noticeTitle }}</h1>\r\n\r\n <div class=\"notice-meta\">\r\n <span class=\"meta-item\">\r\n <i class=\"el-icon-user\"></i>\r\n <span>{{ detail.createBy || '—' }}</span>\r\n </span>\r\n <span class=\"meta-item\">\r\n <i class=\"el-icon-time\"></i>\r\n <span>{{ detail.createTime || '—' }}</span>\r\n </span>\r\n <span class=\"meta-item\">\r\n <span :class=\"['status-dot', isStatusNormal ? 'status-ok' : 'status-off']\"></span>\r\n <span>{{ isStatusNormal ? '正常' : '已关闭' }}</span>\r\n </span>\r\n </div>\r\n\r\n <div class=\"notice-divider\">\r\n <span class=\"notice-divider-dot\"></span>\r\n <span class=\"notice-divider-dot\"></span>\r\n <span class=\"notice-divider-dot\"></span>\r\n </div>\r\n\r\n <div class=\"notice-body\">\r\n <div v-if=\"hasContent\" class=\"notice-content\" v-html=\"detail.noticeContent\" />\r\n <div v-else class=\"notice-empty notice-empty--inner\">\r\n <i class=\"el-icon-document\"></i> 暂无内容\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </el-drawer>\r\n</template>\r\n\r\n<script>\r\nimport { getNotice } from '@/api/system/notice'\r\n\r\nexport default {\r\n name: 'NoticeDetailView',\r\n data() {\r\n return {\r\n visible: false,\r\n loading: false,\r\n detail: null\r\n }\r\n },\r\n computed: {\r\n isStatusNormal() {\r\n const s = this.detail && this.detail.status\r\n return s === '0' || s === 0\r\n },\r\n hasContent() {\r\n const c = this.detail && this.detail.noticeContent\r\n return c != null && String(c).trim() !== ''\r\n }\r\n },\r\n methods: {\r\n open(payload) {\r\n let id = null\r\n let preset = null\r\n if (payload != null && typeof payload === 'object') {\r\n id = payload.noticeId\r\n if (payload.noticeContent != null) {\r\n preset = payload\r\n }\r\n } else {\r\n id = payload\r\n }\r\n this.visible = true\r\n if (preset) {\r\n this.detail = preset\r\n return\r\n }\r\n if (id == null || id === '') {\r\n this.detail = null\r\n return\r\n }\r\n this.loading = true\r\n this.detail = null\r\n getNotice(id).then(res => {\r\n this.detail = res.data\r\n }).catch(() => {\r\n this.detail = null\r\n }).finally(() => {\r\n this.loading = false\r\n })\r\n },\r\n handleClose() {\r\n this.visible = false\r\n this.detail = null\r\n this.loading = false\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.notice-page {\r\n max-width: 760px;\r\n margin: 0 auto;\r\n padding: 8px 8px 20px;\r\n animation: notice-fade-up 0.28s ease both;\r\n}\r\n\r\n@keyframes notice-fade-up {\r\n from {\r\n opacity: 0;\r\n transform: translateY(14px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.notice-type-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n padding: 3px 12px;\r\n border-radius: 2px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n margin-bottom: 14px;\r\n}\r\n\r\n.type-notify {\r\n background: #fff8e6;\r\n color: #b7791f;\r\n border-left: 3px solid #d97706;\r\n}\r\n\r\n.type-announce {\r\n background: #e8f5e9;\r\n color: #276749;\r\n border-left: 3px solid #38a169;\r\n}\r\n\r\n.notice-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1a202c;\r\n line-height: 1.45;\r\n margin: 0 0 16px;\r\n letter-spacing: -0.2px;\r\n}\r\n\r\n.notice-meta {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n padding: 12px 0;\r\n border-top: 1px solid #e9ecef;\r\n border-bottom: 1px solid #e9ecef;\r\n margin-bottom: 28px;\r\n}\r\n\r\n.meta-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n font-size: 12px;\r\n color: #718096;\r\n}\r\n\r\n.meta-item i {\r\n font-size: 12px;\r\n color: #a0aec0;\r\n}\r\n\r\n.status-dot {\r\n display: inline-block;\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n margin-right: 4px;\r\n}\r\n\r\n.status-ok {\r\n background: #38a169;\r\n}\r\n\r\n.status-off {\r\n background: #e53e3e;\r\n}\r\n\r\n.notice-divider {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.notice-divider::before,\r\n.notice-divider::after {\r\n content: '';\r\n flex: 1;\r\n height: 1px;\r\n background: linear-gradient(to right, transparent, #dee2e6, transparent);\r\n}\r\n\r\n.notice-divider-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #cbd5e0;\r\n}\r\n\r\n.notice-body {\r\n background: #fff;\r\n border-radius: 6px;\r\n padding: 28px 32px;\r\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\r\n min-height: 120px;\r\n}\r\n\r\n.notice-content {\r\n font-size: 14px;\r\n line-height: 1.85;\r\n color: #2d3748;\r\n word-break: break-word;\r\n}\r\n\r\n.notice-content ::v-deep p {\r\n margin: 0 0 1em;\r\n}\r\n\r\n.notice-content ::v-deep h1,\r\n.notice-content ::v-deep h2,\r\n.notice-content ::v-deep h3 {\r\n font-weight: 700;\r\n color: #1a202c;\r\n margin: 1.4em 0 0.6em;\r\n}\r\n\r\n.notice-content ::v-deep h1 {\r\n font-size: 18px;\r\n}\r\n\r\n.notice-content ::v-deep h2 {\r\n font-size: 16px;\r\n}\r\n\r\n.notice-content ::v-deep h3 {\r\n font-size: 14px;\r\n}\r\n\r\n.notice-content ::v-deep a {\r\n color: #3182ce;\r\n text-decoration: underline;\r\n}\r\n\r\n.notice-content ::v-deep a:hover {\r\n color: #2b6cb0;\r\n}\r\n\r\n.notice-content ::v-deep img {\r\n max-width: 100%;\r\n border-radius: 4px;\r\n margin: 8px 0;\r\n}\r\n\r\n.notice-content ::v-deep ul,\r\n.notice-content ::v-deep ol {\r\n padding-left: 20px;\r\n margin: 0 0 1em;\r\n}\r\n\r\n.notice-content ::v-deep li {\r\n margin-bottom: 4px;\r\n}\r\n\r\n.notice-content ::v-deep blockquote {\r\n border-left: 3px solid #cbd5e0;\r\n margin: 1em 0;\r\n padding: 6px 16px;\r\n color: #718096;\r\n background: #f7fafc;\r\n}\r\n\r\n.notice-content ::v-deep table {\r\n border-collapse: collapse;\r\n width: 100%;\r\n margin: 1em 0;\r\n font-size: 13px;\r\n}\r\n\r\n.notice-content ::v-deep table th,\r\n.notice-content ::v-deep table td {\r\n border: 1px solid #e2e8f0;\r\n padding: 7px 12px;\r\n}\r\n\r\n.notice-content ::v-deep table th {\r\n background: #f7fafc;\r\n font-weight: 600;\r\n}\r\n\r\n.notice-empty {\r\n text-align: center;\r\n padding: 40px 0;\r\n color: #a0aec0;\r\n font-size: 13px;\r\n}\r\n\r\n.notice-empty i {\r\n font-size: 28px;\r\n display: block;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.notice-empty--inner {\r\n padding: 32px 0;\r\n}\r\n\r\n.notice-empty--inner i {\r\n font-size: 28px;\r\n}\r\n\r\n::v-deep .notice-detail-drawer {\r\n .el-drawer__header {\r\n margin-bottom: 0;\r\n padding: 16px 20px;\r\n border-bottom: 1px solid #ebeef5;\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #303133;\r\n }\r\n .el-drawer__body {\r\n background: #f5f6f8;\r\n }\r\n}\r\n\r\n.notice-detail-drawer__body {\r\n height: 100%;\r\n overflow: auto;\r\n padding: 10px 16px 22px;\r\n}\r\n</style>\r\n"]}]} |