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