3 changed files with 254 additions and 101 deletions
-
105src/views/system/user/messageCenter/index.vue
-
226src/views/system/user/messageCenter/module/list.vue
-
24src/views/system/user/processCenter/index.vue
@ -0,0 +1,226 @@ |
|||||
|
<template> |
||||
|
<div class="message-center-list"> |
||||
|
<div class="more-btn"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div> |
||||
|
<div class="message-item" @click="handleDetail(isIndex)"> |
||||
|
<div class="message-date">2020-10-01 10:00:00</div> |
||||
|
<div class="message-cont"> |
||||
|
<div class="message-cont-info"> |
||||
|
<span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ title }}</span> |
||||
|
<span class="is-read-tip">未读</span> |
||||
|
<div class="message-title">这是系统通知标题</div> |
||||
|
<ul class="message-list-info"> |
||||
|
<li>创建人：admin</li> |
||||
|
<li>创建时间：2020-10-01 10:00:00</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="message-more">查看详情<i class="iconfont icon-chakan" /></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="message-detail"> |
||||
|
<span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ title }}</span> |
||||
|
<span class="detail-date">【admin】 2020-10-01 10:00:00</span> |
||||
|
<div class="message-title">这是系统通知标题</div> |
||||
|
<el-input v-model="opinionTxt" placeholder="请输入" type="textarea" :rows="10" /> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button v-if="isIndex===1" @click="dealWithCont">流程处理</el-button> |
||||
|
<el-button type="primary" @click="messageVisible=false">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<detail ref="detail" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import detail from '../../processCenter/module/detail.vue' |
||||
|
export default { |
||||
|
name: 'MessageList', |
||||
|
components: { detail }, |
||||
|
props: { |
||||
|
listIndex: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isIndex: 0, |
||||
|
title: '系统通知', |
||||
|
messageVisible: false, |
||||
|
opinionTxt: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
listIndex: function(newValue, oldValue) { |
||||
|
this.isIndex = newValue |
||||
|
this.getIndex() |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
getIndex() { |
||||
|
console.log(this.isIndex) |
||||
|
switch (this.isIndex) { |
||||
|
case 0: |
||||
|
this.title = '系统通知' |
||||
|
this.opinionTxt = '这是一条系统通知' |
||||
|
break |
||||
|
case 1: |
||||
|
this.title = '有流程达到' |
||||
|
this.opinionTxt = '这是一条有流程达到提醒' |
||||
|
break |
||||
|
case 2: |
||||
|
this.title = '流程完成提醒' |
||||
|
this.opinionTxt = '这是一条流程完成提醒' |
||||
|
break |
||||
|
case 3: |
||||
|
this.title = '赋权到期提醒' |
||||
|
this.opinionTxt = '这是一条赋权到期提醒' |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
handleDetail(index) { |
||||
|
this.messageVisible = true |
||||
|
switch (index) { |
||||
|
case 0: |
||||
|
this.opinionTxt = '这是一条系统通知' |
||||
|
break |
||||
|
case 1: |
||||
|
this.opinionTxt = '这是一条有流程达到提醒' |
||||
|
break |
||||
|
case 2: |
||||
|
this.opinionTxt = '这是一条流程完成提醒' |
||||
|
break |
||||
|
case 3: |
||||
|
this.opinionTxt = '这是一条赋权到期提醒' |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
dealWithCont() { |
||||
|
this.$refs.detail.detailVisible = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.message-center-list{ |
||||
|
height: calc(100% - 90px); |
||||
|
padding: 16px 30px; |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #F5F5F5; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
.more-btn{ |
||||
|
margin-bottom: 30px; |
||||
|
line-height: 30px; |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
color: #0348F3; |
||||
|
cursor: pointer; |
||||
|
i{ |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
.message-item{ |
||||
|
font-size: 14px; |
||||
|
.message-date{ |
||||
|
text-align: center; |
||||
|
color: #A6ADB6; |
||||
|
} |
||||
|
.message-cont{ |
||||
|
margin: 12px 0 16px 0; |
||||
|
background-color: #fff; |
||||
|
.message-cont-info{ |
||||
|
position: relative; |
||||
|
padding: 16px 20px; |
||||
|
color: #545B65; |
||||
|
|
||||
|
.is-read-tip{ |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
top: 16px; |
||||
|
font-size: 12px; |
||||
|
height: 20px; |
||||
|
line-height: 20px; |
||||
|
padding: 0 7px; |
||||
|
color: #ED4A41; |
||||
|
background-color: #FDEFEE; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.message-list-info{ |
||||
|
font-size: 12px; |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
.message-more{ |
||||
|
position: relative; |
||||
|
padding: 0 20px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
color: #545B65; |
||||
|
border-top: 1px solid #E6E8ED; |
||||
|
cursor: pointer; |
||||
|
i{ |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 0; |
||||
|
font-size: 12px; |
||||
|
color: #888D94; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.message-type-title{ |
||||
|
display: block; |
||||
|
padding-left: 33px; |
||||
|
height: 33px; |
||||
|
line-height: 33px; |
||||
|
&.type-title1{ |
||||
|
background: url('~@/assets/images/icon/xttz.png') no-repeat left center; |
||||
|
background-size: 23px 23px; |
||||
|
} |
||||
|
&.type-title2{ |
||||
|
background: url('~@/assets/images/icon/lcdd.png') no-repeat left center; |
||||
|
background-size: 23px 23px; |
||||
|
} |
||||
|
&.type-title3{ |
||||
|
background: url('~@/assets/images/icon/lcwc.png') no-repeat left center; |
||||
|
background-size: 23px 23px; |
||||
|
} |
||||
|
&.type-title4{ |
||||
|
background: url('~@/assets/images/icon/fqdq.png') no-repeat left center; |
||||
|
background-size: 23px 23px; |
||||
|
} |
||||
|
} |
||||
|
.message-title{ |
||||
|
margin: 8px 0 20px 0; |
||||
|
font-weight: 400; |
||||
|
color: #0C0E1E; |
||||
|
} |
||||
|
.message-detail{ |
||||
|
position: relative; |
||||
|
.detail-date{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
font-size: 12px; |
||||
|
line-height: 32px; |
||||
|
color: #A6ADB6; |
||||
|
} |
||||
|
.message-title{ |
||||
|
margin: 10px 0 20px 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue