Browse Source

完善通知公告和首页右上角的通知公告显示

zhanglei
yunuo970428 1 year ago
parent
commit
fdaa61d5f8
  1. 1
      anrui-system-ui/package.json
  2. 73
      anrui-system-ui/src/api/notificationannouncement/notificationannouncement.js
  3. 9
      anrui-system-ui/src/api/system/home/home.js
  4. 279
      anrui-system-ui/src/components/Editor/index.vue
  5. 89
      anrui-system-ui/src/components/uploadFile/uploadFile.vue
  6. 2
      anrui-system-ui/src/main.js
  7. 13
      anrui-system-ui/src/router/index.js
  8. 203
      anrui-system-ui/src/views/Home/Home.vue
  9. 476
      anrui-system-ui/src/views/notificationannouncement/notificationannouncement.vue
  10. 190
      anrui-system-ui/src/views/notificationannouncement/notificationannouncementAdd.vue

1
anrui-system-ui/package.json

@ -30,6 +30,7 @@
"vue": "2.6.10",
"vue-amap": "^0.5.10",
"vue-monoplasty-slide-verify": "^1.3.1",
"vue-quill-editor": "^3.0.6",
"vue-router": "3.0.6",
"vuex": "3.1.0",
"vuex-persistedstate": "^4.0.0",

73
anrui-system-ui/src/api/notificationannouncement/notificationannouncement.js

@ -0,0 +1,73 @@
import request from '@/utils/request'
export function listPage(data) {
return request({
url: '/portal/v1/SysNotice/listPage',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
export function details(data) {
return request({
url: '/portal/v1/SysNotice/getDetails',
method: 'get',
params: data
})
}
export function setState(data) {
return request({
url: '/portal/v1/SysNotice/setState',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
export function setTopping(data) {
return request({
url: '/portal/v1/SysNotice/setTopping',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
export function saveOrUpdate(data) {
return request({
url: '/portal/v1/SysNotice/saveOrUpdate',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
export function delBySids(data) {
return request({
url: '/portal/v1/SysNotice/delBySids',
method: 'DELETE',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
// 根据当前登录用户的角色获取菜单分页列表页面右上角按钮的隐藏
export function getButtonPermissions(data) {
return request({
url: '/portal/v1/sysfunction/getButtonPermissions',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
// 根据当前登录人orgSidPath(全路径sid)查询分公司
export function getOrgSidByPath(data) {
return request({
url: '/portal/v1/sysstafforg/getOrgSidByPath',
method: 'get',
params: data
})
}

9
anrui-system-ui/src/api/system/home/home.js

@ -7,3 +7,12 @@ export function getTodoNum(data) {
method: 'get'
})
}
// 获取当前用户的待办数量
export function getLists(data) {
return request({
url: '/portal/v1/SysNotice/getLists',
method: 'get'
})
}

279
anrui-system-ui/src/components/Editor/index.vue

@ -0,0 +1,279 @@
<template>
<div>
<el-upload
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
name="file"
:show-file-list="false"
:headers="headers"
style="display: none"
ref="upload"
v-if="this.type == 'url'"
>
</el-upload>
<div class="editor" ref="editor" :style="styles"></div>
</div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { getToken } from '@/utils/auth'
export default {
name: 'Editor',
props: {
/* 编辑器的内容 */
value: {
type: String,
default: ''
},
/* 高度 */
height: {
type: Number,
default: null
},
/* 最小高度 */
minHeight: {
type: Number,
default: null
},
/* 只读 */
readOnly: {
type: Boolean,
default: false
},
// (MB)
fileSize: {
type: Number,
default: 5
},
/* 类型(base64格式、url格式) */
type: {
type: String,
default: 'url'
}
},
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API + '/portal/file/upload', //
headers: {
Authorization: 'Bearer ' + getToken()
},
Quill: null,
currentValue: '',
options: {
theme: 'snow',
bounds: document.body,
debug: 'warn',
modules: {
//
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 线 线
['blockquote', 'code-block'], //
[{ list: 'ordered' }, { list: 'bullet' }], //
[{ indent: '-1' }, { indent: '+1' }], //
[{ size: ['small', false, 'large', 'huge'] }], //
[{ header: [1, 2, 3, 4, 5, 6, false] }], //
[{ color: [] }, { background: [] }], //
[{ align: [] }], //
['clean'], //
['link', 'image', 'video'] //
]
},
placeholder: '请输入内容',
readOnly: this.readOnly
}
}
},
computed: {
styles() {
let style = {}
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`
}
if (this.height) {
style.height = `${this.height}px`
}
return style
}
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
this.currentValue = val === null ? '' : val
if (this.Quill) {
this.Quill.pasteHTML(this.currentValue)
}
}
},
immediate: true
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.Quill = null
},
methods: {
init() {
const editor = this.$refs.editor
this.Quill = new Quill(editor, this.options)
//
if (this.type == 'url') {
let toolbar = this.Quill.getModule('toolbar')
toolbar.addHandler('image', (value) => {
this.uploadType = 'image'
if (value) {
this.$refs.upload.$children[0].$refs.input.click()
} else {
this.quill.format('image', false)
}
});
}
this.Quill.pasteHTML(this.currentValue)
this.Quill.on('text-change', (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML
const text = this.Quill.getText()
const quill = this.Quill
this.currentValue = html
this.$emit('input', html)
this.$emit('on-change', { html, text, quill })
})
this.Quill.on('text-change', (delta, oldDelta, source) => {
this.$emit('on-text-change', delta, oldDelta, source)
})
this.Quill.on('selection-change', (range, oldRange, source) => {
this.$emit('on-selection-change', range, oldRange, source)
})
this.Quill.on('editor-change', (eventName, ...args) => {
this.$emit('on-editor-change', eventName, ...args)
})
},
//
handleBeforeUpload(file) {
//
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
return false
}
}
return true
},
handleUploadSuccess(res, file) {
//
let quill = this.Quill
//
// if (res.code == 200) {
// //
// let length = quill.getSelection().index;
// // res.url
// quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
// //
// quill.setSelection(length + 1);
if (res.code == '200') {
//
let length = quill.getSelection().index
// res.url
quill.insertEmbed(length, 'image', res.data.fullUrl)
//
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
},
handleUploadError() {
this.$message.error('图片插入失败')
}
}
}
</script>
<style>
.editor, .ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
.quill-img {
display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
</style>

89
anrui-system-ui/src/components/uploadFile/uploadFile.vue

@ -0,0 +1,89 @@
<template>
<div>
<el-upload class="avatar-uploader" :action="uploadFile" :accept="accept" :file-list="files" :on-remove="removeImage" :on-success="uploadImgSuccess_FuJian">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
</div>
</template>
<script>
import { uploadImgFile } from '@/api/Common/Upload'
export default {
model: {
prop: 'name',
event: 'change'
},
props: {
accept: {
type: String,
default: '.doc, .docx, .pdf, .jpg,.jpeg,.png, .xls, .xlsx'
},
//
name: {
type: Array,
required: true
},
},
data() {
return {
accessToken: null,
uploadFile: uploadImgFile,
files: []
}
},
watch: {
name: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
console.log('aaaa1', newVal)
console.log('aaaa2', oldVal)
this.files = newVal
console.log('aaaa2this.files', this.files)
}
}
},
mounted() {
this.$nextTick(() => {
this.Init()
})
},
methods: {
//
Init() {
if (this.name !== undefined) {
this.files = []
for (var i = 0; i < this.name.length; i++) {
this.files.push({
name: this.name[i],
url: this.name[i]
})
}
}
},
// --
uploadImgSuccess_FuJian(response, file) {
console.log('您选择的file:', file)
if (file.response.code === '200') {
this.files.push({
name: file.response.data.sourceFileName,
url: file.response.data.fullUrl,
size: file.response.data.size
})
this.$emit('change', this.files)
}
},
removeImage(file) {
this.files.splice(this.files.indexOf(file), 1)
const imgFiles = []
this.files.forEach((o) => {
imgFiles.push(o.url)
})
this.$emit('fileDelete', this.files)
}
}
}
</script>
<style lang="scss" scoped></style>

2
anrui-system-ui/src/main.js

@ -6,6 +6,8 @@ import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import slideVerify from 'vue-monoplasty-slide-verify'
Vue.use(slideVerify)
import quill from 'vue-quill-editor'
Vue.use(quill)
Vue.use(ElementUI)

13
anrui-system-ui/src/router/index.js

@ -215,6 +215,19 @@ export const constantRoutes = [
}
}]
},
{
path: '/notificationannouncement',
component: Layout,
redirect: '/notificationannouncement',
children: [{
path: '/notificationannouncement',
component: () => import('@/views/notificationannouncement/notificationannouncement.vue'),
name: 'TongZhiGongGao',
meta: {
title: '通知公告'
}
}]
},
{
path: '/logManage',
component: Layout,

203
anrui-system-ui/src/views/Home/Home.vue

@ -52,30 +52,10 @@
<img class="anrui" src="@/assets/home/anrui.png"/>
<p class="rt_title">通知公告</p>
<ul>
<li>
<li v-for="(item, index) in noticeandannouncement" :key="index" @click="lookInfo(item)">
<img class="rtImg" src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知...</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
<span class="notice bluezi">{{ item.title }}</span>
<span class="anrui_time">{{ item.createTime }}</span>
</li>
</ul>
</div>
@ -89,91 +69,6 @@
</ul>
<p class="copy">Copyright © {{ year }} 安瑞集团 All Rights Reserved</p>
</div>
<!--<ul class="nav-box">-->
<!--<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>-->
<!--<template v-for="(item, i) in menus">
<li v-if="item.sourceName == '系统管理'" :key="i" @click="toNav('index','系统管理')" :style="{backgroundColor: item.iconBgColor}">
<img :src="item.iconUrl">
<p>{{ item.sourceName }}</p>
</li>
<li v-else :key="i" @click="toNavbar(item.pageUrl)" :style="{backgroundColor: item.iconBgColor}">
<img :src="item.iconUrl">
<p>{{ item.sourceName }}</p>
</li>
</template>-->
<!-- <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>
<li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li> -->
<!-- <li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li style="background-color: #ffb751;" @click="xxzx">
<img src="@/assets/images/cxjl.png">
<p>诚信计量</p>
</li>
<li style="background-color: #6fb3e0;" @click="xxzx">
<img src="@/assets/images/zwsm.png">
<p>C标志自我声明</p>
</li>
<li style="background-color: #87b880;" @click="xxzx">
<img src="@/assets/images/sjcc.png">
<p>双随机抽查</p>
</li>
<li style="background-color: #448fb9;" @click="xxzx">
<img src="@/assets/images/jlsc.png">
<p>能量计量审查</p>
</li>
<li style="background-color: #24ca95;" @click="xxzx">
<img src="@/assets/images/qjsh.png">
<p>强检计量器具审核</p>
</li>
<li style="background-color: #b4429d;" @click="xxzx">
<img src="@/assets/images/jsxd.png">
<p>技术规范制修订</p>
</li>
<li style="background-color: #b3b442;" @click="toNavbar('http://39.104.100.138:8083/')">
<img src="@/assets/images/xtbg.png">
<p>协同办公</p>
</li>
<li style="background-color: #eab054;" @click="xxzx">
<img src="@/assets/images/tjfx.png">
<p>统计分析</p>
</li>
<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>
<li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>
<li style="background-color: #617be8;" @click="toNav('index','系统管理')">
<img src="@/assets/images/xtgl.png">
<p>系统管理</p>
</li> -->
<!--</ul>-->
<el-dialog center :visible.sync="dialogVisible" width="40%" :show-close="false" :close-on-click-modal="false">
<el-form :model="form" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
@ -206,15 +101,41 @@
<el-button size="small" @click="handleQuXiao"> </el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="TZGGVisible" width="50%">
<el-form :model="formobj" class="formaddcopy02">
<div style="text-align: center;font-weight: bold;font-size: 16px">{{ formobj.title }}</div>
<el-row style="border-left: 0px;margin-top: 10px">
<el-col :span="12" style="border-right: 0px;border-bottom: 0px">
<div class="span-sty" style="border-right: 0px">发布日期:</div>
<el-form-item><span class="addinputInfo">{{ formobj.createTime }}</span></el-form-item>
</el-col>
<el-col :span="12" style="border-right: 0px;border-bottom: 0px">
<div class="span-sty" style="border-right: 0px">有效期至:</div>
<el-form-item><span class="addinputInfo">{{ formobj.validityDate }}</span></el-form-item>
</el-col>
</el-row>
<el-row style="border-left: 0px">
<el-col :span="24" style="border-right: 0px;border-bottom: 0px">
<el-form-item><span v-html="formobj.content"></span></el-form-item>
</el-col>
</el-row>
<el-row style="border-left: 0px">
<el-col :span="24" style="border-right: 0px;border-bottom: 0px">
<div class="span-sty" style="border-right: 0px">附件:</div>
<el-form-item><span class="bluezi addinputInfo" v-for="(item, index) in formobj.filesList" :key="index" @click="handleDownLoad(item.url)">{{ item.name }}</span></el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { getToken, removeToken, getStorage, removeStorage } from '@/utils/auth'
import {sourcesofrole} from '@/api/system/Role/role.js'
import { getStorage, removeStorage } from '@/utils/auth'
import User from '@/api/User/login.js'
import { getTodoNum } from '@/api/system/home/home'
import { getLists, getTodoNum } from '@/api/system/home/home'
import { getToBeReadNum } from '@/api/flow/read'
import { details } from '@/api/notificationannouncement/notificationannouncement'
export default {
data() {
@ -256,6 +177,7 @@ export default {
workCount: '',
toBeReadCount: ''
},
noticeandannouncement: [], //
dialogVisible: false,
form: {
original: '',
@ -272,7 +194,20 @@ export default {
defaultOrgPath: '',
roleName: '',
postName: '',
year: ''
year: '',
TZGGVisible: false,
formobj: {
content: '',
createTime: '',
filesList: [],
sid: '',
title: '',
topping: '',
type: '',
typeKey: '',
validityDate: '',
userSid: ''
}
}
},
beforeCreate() {
@ -292,9 +227,6 @@ export default {
this.name = window.sessionStorage.getItem('name')
var nowDate = new Date()
this.year = nowDate.getFullYear()
// sourcesofrole({ psid: '0', roleSid: this.$store.getters.userInfo.roleSid }).then(res => {
// this.menus = res.data
// })
},
methods: {
getsPasswordByUserSid() {
@ -303,6 +235,7 @@ export default {
this.dialogVisible = true
} else {
this.getNum()
this.getLists()
this.timer = setInterval(this.getNum, 20000)
}
})
@ -313,17 +246,55 @@ export default {
})
},
getNum() {
//
getTodoNum(window.sessionStorage.getItem('userSid')).then((resp) => {
if (resp.success) {
this.shuliang.workCount = resp.data
}
})
//
getToBeReadNum(window.sessionStorage.getItem('userSid')).then((resp) => {
if (resp.success) {
this.shuliang.toBeReadCount = resp.data
}
})
},
//
getLists() {
getLists().then((res) => {
if (res.success) {
this.noticeandannouncement = res.data
}
})
},
//
lookInfo(item) {
if (item.pcUrl !== '' && item.pcUrl !== null) {
} else {
this.formobj = {
content: '',
createTime: '',
filesList: [],
sid: '',
title: '',
topping: '',
type: '',
typeKey: '',
validityDate: '',
userSid: ''
}
this.TZGGVisible = true
details({ sid: item.sid }).then((res) => {
if (res.success) {
this.formobj = res.data
}
})
}
},
//
handleDownLoad(val) {
window.open(val, '_parent')
},
handleConirm() {
if (this.form.original === '') {
this.$message({ showClose: true, type: 'error', message: '原密码不能为空' })
@ -382,7 +353,7 @@ export default {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
User.logout({token: getStorage()}).then(res => {
User.logout({ token: getStorage() }).then(res => {
removeStorage()
this.$store.commit('user/SET_UESRINFO', '')
this.$router.push({ path: '/login' })

476
anrui-system-ui/src/views/notificationannouncement/notificationannouncement.vue

@ -0,0 +1,476 @@
<template>
<div class="app-container">
<!--列表页面-->
<div v-show="viewState == 1">
<button-bar view-title="通知公告管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<!--Start查询列表部分-->
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="标题">
<el-input v-model="listQuery.params.title" placeholder="" clearable/>
</el-form-item>
<el-form-item label="发布日期">
<el-date-picker v-model="listQuery.params.createDateStart" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
<span style="padding: 0 8px"></span>
<el-date-picker v-model="listQuery.params.createDateEnd" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="listQuery.params.state" clearable filterable>
<el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
<el-form-item label="置顶">
<el-select v-model="listQuery.params.topping" clearable filterable>
<el-option v-for="item in topping_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
</el-select>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
</div>
</div>
</div>
<!--End查询列表部分-->
<div class="listtop">
<div class="tit">通知公告列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!--Start 主页面主要部分 -->
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50"/>
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/>
<el-table-column label="标题" align="center">
<template slot-scope="scope">
<span>{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column label="发布时间" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.createDate }}</span>
</template>
</el-table-column>
<el-table-column label="有效期至" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.validityDate }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="80">
<template slot-scope="scope">
<span>{{ scope.row.stateValue }}</span>
</template>
</el-table-column>
<el-table-column label="是否置顶" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.topping }}</span>
</template>
</el-table-column>
</el-table>
</div>
<!--End 主页面主要部分-->
<div class="pages">
<div class="tit"/>
<!-- 翻页 -->
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!--End查询列表部分-->
</div>
</div>
<!--新增及修改 -->
<notificationannouncementAdd v-show="viewState == 2 || viewState == 3" ref="divAdd" @doback="resetState" @reloadlist="getList"/>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import { listPage, delBySids, setState, setTopping } from '@/api/notificationannouncement/notificationannouncement'
import notificationannouncementAdd from './notificationannouncementAdd'
export default {
name: 'TongZhiGongGao',
components: {
Pagination,
pageye,
ButtonBar,
notificationannouncementAdd
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增'
},
{
type: 'primary',
size: 'small',
icon: 'edit',
btnKey: 'toEdit',
btnLabel: '编辑'
},
{
type: 'primary',
size: 'small',
icon: '',
btnKey: 'toOpen',
btnLabel: '开启'
},
{
type: 'danger',
size: 'small',
icon: '',
btnKey: 'toBlockUp',
btnLabel: '停用'
},
{
type: 'primary',
size: 'small',
icon: '',
btnKey: 'toTop',
btnLabel: '置顶'
},
{
type: 'danger',
size: 'small',
icon: '',
btnKey: 'toUntop',
btnLabel: '取消置顶'
},
{
type: 'danger',
size: 'small',
icon: 'del',
btnKey: 'doDel',
btnLabel: '删除'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
viewState: 1, // 1 2 3 4
tableKey: 0,
list: [],
sids: [], // SIDs
state_list: [
{
dictKey: '1',
dictValue: '开启'
},
{
dictKey: '2',
dictValue: '关闭'
}
],
topping_list: [
{
dictKey: '1',
dictValue: '是'
},
{
dictKey: '0',
dictValue: '否'
}
],
FormLoading: false,
listLoading: false,
//
listQuery: {
current: 1,
size: 10,
total: 0,
params: {
createDateEnd: '',
createDateStart: '',
state: '',
title: '',
topping: ''
}
}
}
},
created() {
//
this.getList()
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
//
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'toEdit':
this.toEdit()
break
case 'toOpen':
this.toOpen()
break
case 'toBlockUp':
this.toBlockUp()
break
case 'toTop':
this.toTop()
break
case 'toUntop':
this.toUntop()
break
case 'doDel':
this.doDel()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
// sid
handleSelectionChange(row) {
const aa = []
row.forEach(element => {
aa.push(element.sid)
})
this.sids = aa
},
//
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
//
getList() {
listPage(this.listQuery).then(response => {
this.listLoading = false
if (response.success) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
//
handleFilter() {
this.listQuery.current = 1
this.getList()
},
//
handleReset() {
this.listQuery = {
current: 1,
size: 10,
total: 0,
params: {
createDateEnd: '',
createDateStart: '',
state: '',
title: '',
topping: ''
}
}
this.getList()
},
toAdd() {
this.viewState = 2
this.$refs['divAdd'].showAdd()
},
toEdit() {
if (this.sids.length === 1) {
this.viewState = 3
this.$refs['divAdd'].showEdit(this.sids[0])
} else {
this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行操作' })
}
},
toOpen() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
return
}
const tip = '请确认是否开启所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
setState({ sidsList: this.sids, state: '1' }).then(resp => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
toBlockUp() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
return
}
const tip = '请确认是否停用所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
setState({ sidsList: this.sids, state: '0' }).then(resp => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
toTop() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
return
}
const tip = '请确认是否置顶所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
setTopping({ sidsList: this.sids, topping: '是' }).then(resp => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
toUntop() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
return
}
const tip = '请确认是否取消置顶所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
setTopping({ sidsList: this.sids, topping: '否' }).then(resp => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
toInfo(row) {
this.viewState = 4
this.$refs['divInfo'].showInfo(row)
},
doDel() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' })
return
}
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
delBySids(this.sids).then(resp => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
//
resetState() {
this.viewState = 1
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
</style>

190
anrui-system-ui/src/views/notificationannouncement/notificationannouncementAdd.vue

@ -0,0 +1,190 @@
<template>
<div class="app-container">
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate()">保存</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="24">
<div class="span-sty">标题</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="formobj.title" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">发布日期</div>
<el-form-item><el-date-picker class="addinputInfo" v-model="formobj.createTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" /></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">有效期至</div>
<el-form-item><el-date-picker class="addinputInfo" v-model="formobj.validityDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">类别</div>
<el-form-item>
<el-select class="addinputInfo" v-model="formobj.typeKey" placeholder="" @change="typeChange">
<el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">是否置顶</div>
<el-form-item>
<el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.topping">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">内容</div>
<el-form-item>
<editor class="addinputInfo" :height="300" :min-height="100" :value="formobj.content" @input="contentInput"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">附件</div>
<el-form-item><uploadFile class="addinputInfo" v-model="formobj.filesList" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import { saveOrUpdate, details } from '@/api/notificationannouncement/notificationannouncement'
import Editor from '@/components/Editor'
import uploadFile from '@/components/uploadFile/uploadFile'
import { pullDown } from '@/api/system/postManage/index'
export default {
name: 'TongZhiGongGaoAdd',
components: {
Editor,
uploadFile
},
data() {
return {
viewTitle: '',
submitdisabled: false,
type_list: [],
formobj: {
content: '',
createTime: '',
filesList: [],
sid: '',
title: '',
topping: '',
type: '',
typeKey: '',
validityDate: '',
userSid: ''
},
rules: {}
}
},
methods: {
init() {
pullDown({ type: 'noticeType' }).then((resp) => {
if (resp.success) {
this.type_list = resp.data
}
})
},
showAdd() {
this.viewTitle = '【新增】通知公告'
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.init()
var nowDate = new Date()
var date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
day: nowDate.getDate()
}
this.formobj.createTime = date.year + '-' + (date.month >= 10 ? date.month : '0' + date.month) + '-' + (date.day >= 10 ? date.day : '0' + date.day)
},
showEdit(sid) {
this.viewTitle = '【编辑】通知公告'
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.init()
details({ sid: sid }).then((res) => {
if (res.success) {
this.formobj = res.data
}
})
},
typeChange(value) {
const choose = this.type_list.filter((item) => item.dictKey === value)
if (choose.length > 0 && choose !== null) {
this.formobj.type = choose[0].dictValue
} else {
this.formobj.type = ''
}
},
contentInput(val) {
this.formobj.content = val
},
saveOrUpdate() {
this.formobj.userSid = window.sessionStorage.getItem('userSid')
this.$refs['form_obj'].validate((valid) => {
if (valid) {
this.submitdisabled = true
saveOrUpdate(this.formobj).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.submitdisabled = false
}
}).catch(() => {
this.submitdisabled = false
})
}
})
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.formobj = {
content: '',
createTime: '',
filesList: [],
sid: '',
title: '',
topping: '',
type: '',
typeKey: '',
validityDate: '',
userSid: ''
}
this.submitdisabled = false
this.$emit('doback')
}
}
}
</script>
<style scoped>
.span-sty {
width: 100px !important;
}
.addinputInfo {
margin-left: 90px !important;
}
</style>
Loading…
Cancel
Save