This commit is contained in:
clay
2022-12-10 13:15:34 +08:00
parent 2cfbfef8bd
commit 3ebf61c936
7 changed files with 370 additions and 209 deletions

View File

@@ -1,19 +1,28 @@
<template>
<div>
<!--通告弹出框-->
<el-dialog :title="notice.noticeTitle" :visible.sync="open" width="780px" append-to-body>
<span v-html="notice.noticeContent"></span>
<div slot="footer" class="dialog-footer">
<el-button type="danger" @click="userDelNotice(notice.noticeId,notice.noticeType)"> </el-button>
</div>
<el-dialog :visible.sync="open" width="1100px" append-to-body style="padding-bottom: 10vh">
<el-form ref="form" label-width="80px">
<el-row>
<el-col :offset="1" :span="22">
<div style="font-size: 24px;font-weight: bold;text-align:center;">{{ notice.noticeTitle }}</div>
<div v-html="notice.noticeContent"></div>
<div style="text-align:center;">
<el-button type="danger" @click="userDelNotice(notice.noticeId,notice.noticeType)"> </el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-dialog>
<div id="bell_block" @mouseleave="closeBellBlock">
<ul>
<li v-for="(item,index) in informList" :key="index">
<span @click="noticeClick(item.noticeId,item.noticeType)">{{item.noticeTitle}}
<span @click="noticeClick(item.noticeId,item.noticeType)">{{ item.noticeTitle }}
<i v-if="item.status == '1'" class="dots"></i>
</span>
<el-button @click="userDelNotice(notice.noticeId,notice.noticeType)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
<el-button @click="userDelNotice(notice.noticeId,notice.noticeType)" type="danger" size="mini"
icon="el-icon-delete" circle
></el-button>
</li>
</ul>
</div>
@@ -26,9 +35,9 @@
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
<!-- position: absolute; top: 20px; left: 300px; width: 700px;-->
<!-- <div id="notice">-->
<!-- <span id="notice_text" @click="noticeClick(fiche.noticeId)">{{ fiche.noticeTitle }}</span>-->
<!-- </div>-->
<!-- <div id="notice">-->
<!-- <span id="notice_text" @click="noticeClick(fiche.noticeId)">{{ fiche.noticeTitle }}</span>-->
<!-- </div>-->
<breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
@@ -133,33 +142,33 @@ export default {
},
mounted() {
this.initInform()
// let notice_text = document.getElementById('notice_text')
// notice_text.addEventListener('webkitAnimationEnd', function() {
// this.style.marginLeft = 0
// }, false)
let notice_text = document.getElementById('notice_text')
notice_text.addEventListener('webkitAnimationEnd', function() {
this.style.marginLeft = 0
}, false)
// this.initFiche()
},
methods: {
userDelNotice(id,type) {
userDelNotice(id, type) {
userDel(id)
setTimeout(()=>{
if (type != '1'){
setTimeout(() => {
if (type != '1') {
this.initFiche()
}else {
} else {
this.initInform()
}
},300)
}, 300)
this.open = false
},
initInform(){
initInform() {
this.noticeState = false
this.informList = []
getInform().then(res=>{
getInform().then(res => {
let data = res.data
for (let datum of data) {
if (datum.status == "1"){
this.noticeState = true;
}
if (datum.status == '1') {
this.noticeState = true
}
}
this.informList = data
})
@@ -167,26 +176,26 @@ export default {
initFiche() {
getFiche().then(res => {
let data = res.data
if (data){
if (data) {
this.fiche = data
}else {
this.fiche.noticeTitle = ""
} else {
this.fiche.noticeTitle = ''
}
})
},
noticeClick(noticeId,type) {
noticeClick(noticeId, type) {
getNotice(noticeId).then(res => {
this.notice = res.data
})
this.open = true
read(noticeId)
setTimeout(()=>{
if (type != '1'){
setTimeout(() => {
if (type != '1') {
this.initFiche()
}else {
} else {
this.initInform()
}
},300)
}, 300)
},
handleClickBellBlock() {
let bell_block = document.getElementById('bell_block')
@@ -265,9 +274,9 @@ export default {
}
}
/deep/ .el-dialog__body {
height: 600px !important;
}
///deep/ .el-dialog__body {
// height: 600px !important;
//}
/deep/ .el-dialog__header {
padding: 20px 30px 10px 20px;

View File

@@ -166,6 +166,37 @@ export const constantRoutes = [
},
]
},
{
path: '/notice',
component: Layout,
hidden: true,
children: [
{
path: 'add',
component: (resolve) => require(['@/views/system/notice/notice'], resolve),
name: 'addNotice',
meta: { title: '添加通知' }
},
{
path: 'edit/:noticeId',
component: (resolve) => require(['@/views/system/notice/notice'], resolve),
name: 'editNotice',
meta: { title: '修改通知' }
},
{
path: 'view/:noticeId',
component: (resolve) => require(['@/views/system/notice/view'], resolve),
name: 'viewNotice',
meta: { title: '查看通知' }
},
{
path: 'view/user/:noticeId',
component: (resolve) => require(['@/views/system/notice/viewuser'], resolve),
name: 'viewUser',
meta: { title: '查看通知' }
},
]
},
{
path: '/module',
component: Layout,

View File

@@ -113,6 +113,13 @@
v-hasPermi="['system:notice:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="view(scope.row)"
>查看
</el-button>
<el-button
size="mini"
type="text"
@@ -134,96 +141,26 @@
/>
<!-- 添加或修改公告对话框 -->
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
<el-dialog :visible.sync="open" width="1100px" append-to-body style="padding-bottom: 10vh">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="公告标题" prop="noticeTitle">
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题"/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="公告类型" prop="noticeType">-->
<!-- <el-select v-model="form.noticeType" placeholder="请选择">-->
<!-- <el-option-->
<!-- v-for="dict in typeOptions"-->
<!-- :key="dict.dictValue"-->
<!-- :label="dict.dictLabel"-->
<!-- :value="dict.dictValue"-->
<!-- ></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="24">-->
<!-- <el-form-item label="状态">-->
<!-- <el-radio-group v-model="form.status">-->
<!-- <el-radio-->
<!-- v-for="dict in statusOptions"-->
<!-- :key="dict.dictValue"-->
<!-- :label="dict.dictValue"-->
<!-- >{{dict.dictLabel}}</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="24">
<el-form-item label="公告标题" prop="noticeContent">
<el-row>
<el-col :offset="1" :span="22">
<el-upload
class="upload-demo"
ref="upload"
:action="uploadFileUrl"
:headers="headers"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:file-list="fileList"
:auto-upload="true"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>-->
</el-upload>
</el-col>
</el-row>
<el-row>
<el-col :offset="1" :span="22">
<!-- <TinymceEditor ref="tinymce" v-model="form.noticeContent"></TinymceEditor>-->
<editor v-model="form.noticeContent" :min-height="192"/>
</el-col>
</el-row>
</el-form-item>
<el-col>
<div style="font-size: 24px;font-weight: bold;text-align:center;">{{ form.noticeTitle }}</div>
<div v-html="form.noticeContent"></div>
</el-col>
</el-row>
<!-- <TinymceEditor v-model="form.noticeContent"></TinymceEditor>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice'
import Editor from '@/components/Editor'
import { addFile, delFile } from '../../../api/sist/file'
import { getToken } from '../../../utils/auth'
import { listNotice, getNotice, delNotice} from '@/api/system/notice'
export default {
name: 'Notice',
components: {
Editor
},
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
headers: {
Authorization: 'Bearer ' + getToken()
},
fileList: [],
fileMapper: [],
// 遮罩层
loading: true,
// 选中数组
@@ -255,13 +192,7 @@ export default {
status: undefined
},
// 表单参数
form: {
noticeId: undefined,
noticeTitle: undefined,
noticeType: '2',
noticeContent: undefined,
status: '0'
},
form: {},
// 表单校验
rules: {
noticeTitle: [
@@ -273,6 +204,15 @@ export default {
}
}
},
watch: {
$route(now, old) {
// 判断逻辑
if (now.name == 'Notice') {
// 需要执行的方法
this.getList()
}
}
},
created() {
this.getList()
this.getDicts('sys_notice_status').then(response => {
@@ -283,51 +223,6 @@ export default {
})
},
methods: {
handleRemove(file, fileList) {
let fileId = null
let index = 0
for (let item of this.fileMapper) {
console.log(file.uid, item)
if (file.uid == item.uid) {
fileId = item.id
break
}
index++
}
console.log(index)
let that = this
delFile(fileId).then(res => {
that.fileMapper.splice(index, 1)
console.log(that.fileMapper)
that.$message.success('提交成功!')
})
},
// 上传成功回调
handleUploadSuccess(res, file) {
let data = {
isPublic: '1',
fileType: '',
fileName: res.fileName,
fileAddr: res.fileAddr
}
addFile(data).then(res => {
console.log(res)
let dataFile = res.data
let mapperItem = {
id: dataFile.fileId,
uid: file.uid,
url: dataFile.url,
fileName: data.fileName
}
let url = dataFile.uri
url = url.replace('/pubfiles', '/attached')
let fileStr = '<p><a style="color: blue;text-decoration: underline;" target="_blank" href="' + url + '">' + mapperItem.fileName + '</a><br/></p>'
this.form.noticeContent = this.form.noticeContent + fileStr
this.fileMapper.push(mapperItem)
})
this.$message.success('提交成功!')
},
/** 查询公告列表 */
getList() {
this.loading = true
@@ -345,22 +240,6 @@ export default {
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.noticeType)
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
noticeId: undefined,
noticeTitle: undefined,
noticeType: '2',
noticeContent: undefined,
status: '0'
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
@@ -379,41 +258,20 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加公告'
this.$router.push('/notice/add')
},
view(row){
let that = this
const noticeId = row.noticeId || this.ids
getNotice(noticeId).then(response => {
that.form = response.data
that.open = true
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const noticeId = row.noticeId || this.ids
getNotice(noticeId).then(response => {
this.form = response.data
this.open = true
this.title = '修改公告'
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
this.form.noticeType = '1'
this.form.status = '0'
if (valid) {
if (this.form.noticeId != undefined) {
updateNotice(this.form).then(response => {
this.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addNotice(this.form).then(response => {
this.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
this.$router.push('/notice/edit/' + noticeId)
},
/** 删除按钮操作 */
handleDelete(row) {

View File

@@ -0,0 +1,155 @@
<template>
<div class="app-container">
<el-form ref="form" :model="formData" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="公告标题" prop="noticeTitle">
<el-input v-model="formData.noticeTitle" placeholder="请输入公告标题"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="公告标题">
<el-col :span="24">
<el-upload
class="upload-demo"
ref="upload"
:action="uploadFileUrl"
:headers="headers"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:file-list="fileList"
:auto-upload="true"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</el-col>
<el-col :span="24">
<TinymceEditor ref="edit" v-model="formData.noticeContent"/>
</el-col>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" style="text-align:center;" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</div>
</template>
<script>
import { getToken } from '../../../utils/auth'
import { addFile, delFile } from '../../../api/sist/file'
import { addNotice, getNotice, updateNotice } from '../../../api/system/notice'
import TinymceEditor from '@/views/utils/tinymce/Tinymce'
export default {
name: 'notice',
components: {
TinymceEditor,
},
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
headers: {
Authorization: 'Bearer ' + getToken()
},
fileList: [],
fileMapper: [],
formData: {
noticeId: undefined,
noticeTitle: undefined,
noticeType: '2',
noticeContent: '',
status: '0'
}
}
},
created() {
this.formData.id = this.$route.params && this.$route.params.noticeId
if (this.formData.id === undefined) {
this.formData.id = null
} else {
getNotice(this.formData.id).then(response => {
this.formData = response.data
})
}
},
methods: {
handleRemove(file, fileList) {
let fileId = null
let index = 0
for (let item of this.fileMapper) {
console.log(file.uid, item)
if (file.uid == item.uid) {
fileId = item.id
break
}
index++
}
console.log(index)
let that = this
delFile(fileId).then(res => {
that.fileMapper.splice(index, 1)
console.log(that.fileMapper)
that.$message.success('提交成功!')
})
},
// 上传成功回调
handleUploadSuccess(res, file) {
let data = {
isPublic: '1',
fileType: '',
fileName: res.fileName,
fileAddr: res.fileAddr
}
addFile(data).then(res => {
console.log(res)
let dataFile = res.data
let mapperItem = {
id: dataFile.fileId,
uid: file.uid,
url: dataFile.url,
fileName: data.fileName
}
let url = dataFile.uri
url = url.replace('/pubfiles', '/attached')
let fileStr = '<p><a style="color: blue;text-decoration: underline;" target="_blank" href="' + url + '">' + mapperItem.fileName + '</a><br/></p>'
this.formData.noticeContent = this.formData.noticeContent + fileStr
this.fileMapper.push(mapperItem)
})
this.$message.success('提交成功!')
},
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
this.formData.noticeType = '1'
this.formData.status = '0'
if (valid) {
if (this.formData.noticeId != undefined) {
updateNotice(this.formData).then(response => {
this.msgSuccess('修改成功')
this.open = false
this.cancel()
})
} else {
addNotice(this.formData).then(response => {
this.msgSuccess('新增成功')
this.open = false
this.cancel()
})
}
}
})
},
// 取消按钮
cancel() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({ path: '/system/notice', query: { t: Date.now() } })
}
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,53 @@
<template>
<div class="app-container">
<el-row>
<el-col :offset="1" :span="22">
<div style="font-size: 24px;font-weight: bold;text-align:center;">{{ formData.noticeTitle }}</div>
<div v-html="formData.noticeContent"></div>
</el-col>
</el-row>
<div slot="footer" style="text-align:center;" class="dialog-footer">
<el-button type="danger" @click="cancel"> </el-button>
</div>
</div>
</template>
<script>
import { getNotice } from '../../../api/system/notice'
export default {
name: 'view',
data() {
return {
formData: {
noticeId: undefined,
noticeTitle: undefined,
noticeType: '2',
noticeContent: '',
status: '0'
}
}
},
created() {
this.formData.id = this.$route.params && this.$route.params.noticeId
if (this.formData.id === undefined) {
this.formData.id = null
} else {
getNotice(this.formData.id).then(response => {
this.formData = response.data
})
}
},
methods:{
// 取消按钮
cancel() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({ path: '/system/notice', query: { t: Date.now() } })
}
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,53 @@
<template>
<div class="app-container">
<el-row>
<el-col :offset="1" :span="20">
<div style="font-size: 24px;font-weight: bold;text-align:center;">{{ formData.noticeTitle }}</div>
<div v-html="formData.noticeContent"></div>
</el-col>
</el-row>
<!-- <div slot="footer" style="text-align:center;" class="dialog-footer">-->
<!-- <el-button type="danger" @click="cancel"> </el-button>-->
<!-- </div>-->
</div>
</template>
<script>
import {getNotice} from '@/api/system/notice'
export default {
name: 'view',
data() {
return {
formData: {
noticeId: undefined,
noticeTitle: undefined,
noticeType: '2',
noticeContent: '',
status: '0'
}
}
},
created() {
this.formData.id = this.$route.params && this.$route.params.noticeId
if (this.formData.id === undefined) {
this.formData.id = null
} else {
getNotice(this.formData.id).then(response => {
this.formData = response.data
})
}
},
methods:{
// 取消按钮
cancel() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({ path: '/system/notice', query: { t: Date.now() } })
}
}
}
</script>
<style scoped>
</style>

View File

@@ -191,6 +191,8 @@ export default {
// },
methods: {
initTinymce(){
this.$forceUpdate()
console.log("qqqq")
tinymce.init({
images_upload_handler: (blobInfo, success, failure) => {
this.upload_handler(blobInfo, success, failure)