Skip to content

S
so-manage-ui
Commit d01f7926 authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

update: 对接消息中心，对接菜单导航

parent bdd160b7
Show whitespace changes
Inline Side-by-side
Showing with 1149 additions and 40 deletions
.beagle.yml
View file @ d01f7926
......@@ -65,7 +65,7 @@ steps: # 定义流水线执行步骤，这些步骤将顺序执行
base: registry.cn-qingdao.aliyuncs.com/wod/nginx:1.19.5 # 基础镜像,根据项目需求进行使用，如果第三方登录改成ui-base
dockerfile: .beagle/dockerfile
repo: wod/apaas-system-ui # 生成镜像的 分组/名称
version: "5.0.4" # 版本号
version: "5.0.5" # 版本号
channel: alpha # 后缀 example: alpha test fix-alpha fix等
args: "TARGETOS=linux,TARGETARCH=amd64" # 不同架构的构建参数
registry: registry.cn-qingdao.aliyuncs.com # 私有仓库地址
......@@ -80,7 +80,7 @@ steps: # 定义流水线执行步骤，这些步骤将顺序执行
namespace: apaas-v5
deployment: apaas-manage-ui
container: apaas-manage-ui
image: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.4-alpha
image: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.5-alpha
environment:
KUBERNETES_SERVER:
from_secret: KUBERNETES_SERVER
......@@ -96,7 +96,7 @@ steps: # 定义流水线执行步骤，这些步骤将顺序执行
base: registry.cn-qingdao.aliyuncs.com/wod/nginx:1.19.5-arm64
dockerfile: .beagle/dockerfile
repo: wod/apaas-system-ui
version: "5.0.4"
version: "5.0.5"
channel: alpha-arm64
args: "TARGETOS=linux,TARGETARCH=arm64"
registry: registry.cn-qingdao.aliyuncs.com
......@@ -134,8 +134,8 @@ steps:
REGISTRY_PASSWORD:
from_secret: REGISTRY_PASSWORD_ALIYUN
settings:
source: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.4-alpha
target: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.4
source: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.5-alpha
target: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.5
registry: registry.cn-qingdao.aliyuncs.com
- name: harbor-arm64
......@@ -152,8 +152,8 @@ steps:
REGISTRY_PASSWORD:
from_secret: REGISTRY_PASSWORD_ALIYUN
settings:
source: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.4-alpha-arm64
target: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.4-arm64
source: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.5-alpha-arm64
target: registry.cn-qingdao.aliyuncs.com/wod/apaas-system-ui:5.0.5-arm64
registry: registry.cn-qingdao.aliyuncs.com
##--------------对于需要保密的信息隐藏，减少账户信息的泄密⬇-----------------##
---
......
src/App.vue
View file @ d01f7926
<template>
<div id="app">
<div id="app" @click="readFlag = false">
<el-config-provider>
<bg-menu :path="nowParent.path" v-if="menuShow"></bg-menu>
<bg-menu :path="nowParent.path" v-if="menuShow" @openMsg="openMsg"></bg-menu>
<div class="container" :class="menuShow ? '' : 'full_screen'" v-if="pageShow">
<!-- <bg-nav :highlightParentRule="highlightParentRule" :title="nowParent.menuName" width="208px" :list="nowParent.children" v-show="navShow" class="con-nav" /> -->
<bg-nav :highlightParentRule="highlightParentRule" width="208px" :list="nowParent.children" v-show="navShow" class="con-nav" />
......@@ -19,6 +19,7 @@
<page404></page404>
</div>
</div>
<msg v-model="readFlag" v-show="readFlag"></msg>
</el-config-provider>
</div>
</template>
......@@ -77,6 +78,12 @@ export default {
watch:{
msgBoxFlag(n,o){
this.readFlag = !this.readFlag
},
userInfo: {
handler() {
this.initMsg()
},
deep: true,
}
},
data(){
......@@ -85,10 +92,28 @@ export default {
menuIndex:'',
}
},
created(){
created(){},
mounted() {
this.initMsg()
},
methods:{
openMsg(data) {
console.log(123123123)
this.readFlag = !this.readFlag;
},
initMsg() {
if(this.userInfo && this.userInfo.userId) {
this.$trace.setOptionValue('userId',this.userInfo.userId)
this.$trace.setOptionValue('userType',this.userInfo.userType)
this.$trace.setOptionValue('roleId',this.userInfo.roleIds.join(','))
this.$trace.setOptionValue('organization',this.userInfo.orgId)
}
},
handleClose() {
if(this.readFlag) {
this.readFlag = false;
}
},
pathToData(data,path){
let arr = path.split('.')
......
src/assets/css/index.css
View file @ d01f7926
......@@ -286,6 +286,9 @@ div {
.dialog_box .el-dialog__footer {
padding: 16px;
}
.dialog_box1 .el-dialog__body {
padding: 16px;
}
/* 设置tab切换的样式 */
.el-tabs__item.is-disabled {
color: #8890a7 !important;
......
src/components/bg-menu.vue
View file @ d01f7926
......@@ -8,9 +8,9 @@
>
<!-- LOGO -->
<div @click="gotoPage" class="bg-logo">
<router-link to="/" class="bg-logo">
<img style="width:140px;height:22px;" src="../assets/imgs/img_logo.png"/>
</div>
</router-link>
<!-- 菜单 -->
<div class="main-menu" v-if="userInfo&& userInfo.system_id">
......@@ -19,7 +19,7 @@
<div class="nav-item" :style="path==item.path?{backgroundColor:'#3753a4'}:''" v-show="item.menuType!==2" v-for="(item,index) in fontMenu" :key="'font'+index">
<span @click="menuAction(item.path,item)">
{{item.menuName}}
<bg-icon v-if="item.children&&item.children.length" icon="#bg-ic-arrow-down" style="font-size:8px;margin-left: 3px;"></bg-icon>
<bg-icon v-if="item.children&&item.children.length&&item.menuType!==1" icon="#bg-ic-arrow-down" style="font-size:8px;margin-left: 3px;"></bg-icon>
</span>
<div class="menu-virtual"></div>
<div class="menu-list" v-if="item.children&&item.children.length">
......@@ -45,7 +45,29 @@
<div class="person-menu" v-if="userInfo&& userInfo.system_id">
<!-- 信息 -->
<div class="nav-item" @click.stop="openMsg">
<el-tooltip
class="box-item"
effect="light"
content="消息"
placement="bottom"
>
<bg-icon icon="#bg-ic-mail" style="font-size: 17px;"></bg-icon>
</el-tooltip>
<div class="message">{{msgUnreadNum}}</div>
</div>
<!-- 购物车 -->
<div class="nav-item">
<el-tooltip
class="box-item"
effect="light"
content="我的订阅"
placement="bottom"
>
<bg-icon icon="#bg-ic-rss" style="font-size: 18px;"></bg-icon>
</el-tooltip>
<div class="message">123</div>
</div>
<!-- 用户中心 -->
<div class="user-center nav-item">
<span class="user-icon">
......@@ -92,7 +114,7 @@ export default {
path:{
type:String,
default:''
}
},
},
data() {
return {
......@@ -105,6 +127,9 @@ export default {
};
},
computed: {
msgUnreadNum(){
return this.$store.state.msgUnreadNum
},
nameFlag(){
return this.$store.state.nameFlag
},
......@@ -128,20 +153,27 @@ export default {
...mapState({
fontMenu (state) {
let temp = []
// state.menu.forEach(e => {
// if(e.dict_group_id=='2cb4f767-fad7-44f2-afa3-f055e15dd2b6'){//font
// temp.push(e)
// }
// });
state.menu.forEach(e => {
if(e.dict_group_id=='2cb4f767-fad7-44f2-afa3-f055e15dd2b6'){//font
temp.push(e)
}
});
return temp
},
managerMenu(state){
let temp = []
// state.menu.forEach(e => {
// if(e.dict_group_id=='64c156e0-bfff-4bfc-a63a-56effe130a25'){//system
state.menu.forEach(e => {
if(e.dict_group_id=='64c156e0-bfff-4bfc-a63a-56effe130a25'){//system
// 暂时处理运营管控中心-调用日志，后期规划位置后修改
if (e.menuName !== '运营看板') {
temp.push(e)
}
// temp.push(e)
// }
// });
}
});
return temp
},
systemMenu(state){
......@@ -168,13 +200,13 @@ export default {
// },
},
methods: {
openMsg() {
this.$emit('openMsg',true)
},
...mapMutations(["setCartNum"]),
navAction(path) {
this.$router.push(path);
},
gotoPage(){
window.open('/apaas/portal/ui/#/','_blank')
},
changezz(item){
this.$trace.setOptionValue('appID',item.value)
},
......@@ -214,7 +246,7 @@ export default {
//是否有子路由，有则寻找子路由的第一个进行跳转，无则直接进行跳转
//使用childMenuAction是模拟template中，子路径点击跳转使用childMenuAction，
//防止出现层级错误的问题
if(parent.children&&parent.children.length){
if(parent.children&&parent.children.length&&parent.menuType!==1){
this.childMenuAction(parent.children[0],parent)
}else{
this.pathToUrl(n,parent)
......@@ -476,9 +508,11 @@ export default {
.font-menu{
height: 100%;
display: flex;
}
.manager-menu{
height: 100%;
display: flex;
}
.nav-item {
......@@ -646,16 +680,32 @@ export default {
height: 100%;
padding-left: 32px;
position: inherit;
display: flex;
align-items: center;
column-gap: 35px;
// &::before{
// content:'';
// width: 1px;
// height: 24px;
// background-color: #5c6da4;
// position: absolute;
// left: 0;
// top: 16px;
// }
&::before{
content:'';
width: 1px;
height: 24px;
background-color: #5c6da4;
position: absolute;
left: 0;
top: 16px;
}
.message{
height: 16px;
line-height: 16px;
background-color: #d14731;
border-radius: 8px;
padding: 0 6px;
font-size: 12px;
color: #ffffff;
position: absolute;
top: -8px;
left: 12px;
}
}
// 用户中心
.user-center {
......
src/main.js
View file @ d01f7926
......@@ -9,8 +9,8 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import bgui from "@/bg-ui";
import "@/bg-ui/index.scss";
import msgSdk from './msg-sdk/index.js';
console.log(bgui,"-=-=-=-=-=-=-=-=-=")
import App from './App.vue'
import router from './router'
......@@ -30,6 +30,24 @@ import axios from './request/http.js'
const createVue = createApp(App)
createVue.use(ElementPlus, { locale });
function getMsgAppid() {
axios.get(`/apaas/system/v5/message/account`).then(res => {
if (res.data.code == 200) {
createVue.use(msgSdk, {
requestUrl: 'https://msg.wodcloud.com', // 请求地址
appID: decodeURIComponent(escape(window.atob(res.data.data.app_id))), // 应用id
secretKey: decodeURIComponent(escape(window.atob(res.data.data.secret_key))), // 应用密钥
userId: '',
userType: '',
roleId: '',
organization: '',
})
}
})
}
getMsgAppid()
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
createVue.component(key, component)
}
......
src/msg-sdk/index.js 0 → 100644
View file @ d01f7926
import msg from './lib/msg.vue'
let option = null
const setAppID = (appID)=>{
option.appID = appID
}
const setSecretKey = (secretKey)=>{
option.secretKey = secretKey
}
const setRequestUrl = (requestUrl)=>{
option.requestUrl = requestUrl
}
const setOptionValue = (opt,val)=>{
option[opt] = val
}
const methods = {
setAppID,
setSecretKey,
setRequestUrl,
setOptionValue,
}
const init = (options = {}) => {
const _options = {
requestUrl: '', // 请求地址
appID: '', // 应用id
secretKey: '', // 应用密钥
userId:'',
userType:'',
roleId:'',
organization:'',
};
// 将传过来的参数转换
transitionOptions(_options, options);
option = _options
}
const transitionOptions = (_options, options) => {
const {
requestUrl,
appID,
secretKey,
userId,
userType,
roleId,
organization,
} = options;
if (!requestUrl) throw Error('请传入requestUrl参数');
if (!appID) throw Error('请传入appID参数');
// if (!secretKey) throw Error('secretKey');
_options.requestUrl = requestUrl;
_options.appID = appID;
_options.secretKey = secretKey;
_options.userId = userId;
_options.userType = userType;
_options.roleId = roleId;
_options.organization = organization;
}
const install = (Vue, options = {}) => {
console.log("执行以下")
init(options);
if (Vue.prototype) {
Vue.prototype.$trace = { ...methods,option };
} else {
Vue.config.globalProperties.$trace = { ...methods,option };
}
Vue.component('msg', msg);
}
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
init,
...methods
};
export { install, init, methods };
\ No newline at end of file
src/msg-sdk/lib/detail-table2.vue 0 → 100644
View file @ d01f7926
<template>
<div class="out-detail">
<div class="row-box" v-for="(item,index) in list" :style="{width:item.width}" :key="'row-box'+index">
<p class="detail-module" v-if="!item.slot">
<span :style="{width:itemWidth}">{{item.label}}</span>
<span class="text_clip" :title="item.value" v-if="!item.childSlot">{{item.value}}</span>
<span v-else>
<slot :name="item.childSlot" :data="item"></slot>
</span>
</p>
<template v-else>
<slot :name="item.slot" :data="item"></slot>
</template>
</div>
</div>
</template>
<script>
export default {
props: {
list:{
type:Array,
default:()=>[]
},
itemWidth:{
type:String,
default:''
}
},
components: {
},
data() {
return {
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
.out-detail{
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
border-right: solid 1px #dadee7;
border-bottom: solid 1px #dadee7;
}
.row-box{
width: 50%;
flex-grow:1;
text-align: left;
line-height: 48px;
min-height: 48px;
border-left: solid 1px #dadee7;
border-top: solid 1px #dadee7;
font-size: 14px;
color: #404a62;
}
.row-box .detail-module{
height: 100%;
display: flex;
}
.row-box .detail-module span{
height: 100%;
display: inline-block;
padding-left: 15px;
box-sizing: border-box;
}
.row-box .detail-module span:nth-of-type(1){
background-color: #f7f7f9;
min-width: 114px;
border-right: solid 1px #dadee7;
}
.row-box .detail-module span:nth-of-type(2){
flex-grow:1;
}
</style>
src/msg-sdk/lib/msg.vue 0 → 100644
View file @ d01f7926
<template>
<div class="msg-container-bdx12" @click.stop>
<el-dialog title="详情" v-model="dialogVisible" width="640px" custom-class="dialog_box1">
<div>
<detail-table2 :list="detailData">
<template v-slot:action="{data}">
<div :style="{backgroundColor:item.buttonHex,color:item.textHex}" @click="gotoPage(item.links)" class="ac-button-bdx12" v-for="(item,index) in data.value" :key="'btn'+index">{{item.desc}}</div>
</template>
<template v-slot:file="{data}">
<div class="content-file-bdx12 content-no-scroll">
<div @click="downLoadPage(item)" class="file-button-bdx12" v-for="(item,index) in data.value" :key="'file'+index">{{item.fileName}}</div>
</div>
</template>
<template v-slot:content="{data}">
<div class="content-box-bdx12 content-no-scroll">
<template v-if="data.value.msgType==1||data.value.msgType==3">
<div class="markdown-body" v-html="mdRender(data.value.msgInfo)"></div>
</template>
<template v-if="data.value.msgType==2">
<div style="margin-bottom:20px;" v-for="(item,index) in data.value.image" :key="'img'+index">
<el-image style="width: 430px;height:200px;" :src="item.url" fit="contain" :preview-src-list="[item.url]">
<template #error>
<div class="el-image__error">
<span>图片链接失效，无法加载</span>
</div>
</template>
</el-image>
<!-- <p @click="gotoPage(item.link)" style="line-height:24px;font-size:12px;text-align:center;margin-top:-20px;cursor: pointer;">点击前往图片地址</p> -->
<div class="markdown-body" v-html="mdRender(item.content)"></div>
</div>
</template>
</div>
</template>
</detail-table2>
</div>
</el-dialog>
<div class="msg-box-bdx12" :style="modelValue?{top:'75px'}:''">
<div class="msg-box-header">
<div class="msg-title">消息盒子</div>
<div class="msg-action">
<el-input prefix-icon="Search" v-model.trim ="msgText" style="width:240px;border-color: #dadee7;" @input="changeText" placeholder="请输入搜索内容"></el-input>
<bg-icon class="el-icon-close" icon="#bg-ic-close" style="font-size:14px;margin-left: 16px;color: #909bb6;"></bg-icon>
</div>
</div>
<div class="msg-box-content">
<div class="msg-box-read">
<div @click="changeRead(0)" :style="activeName==0?{color:'#3759be',}:{border:0,}">全部</div>
<div @click="changeRead(1)" :style="activeName==1?{color:'#3759be',}:{border:0,}">
<div class="unread-num" v-if="unReadNum">{{unReadNum}}</div>
未读
</div>
<span class="can_click_text" @click="allRead">
<bg-icon icon="#bg-ic-mail-open" style="font-size:16px;margin-right: 8px;"></bg-icon>全部已读
</span>
</div>
<div class="msg-box-list content-no-scroll">
<div class="msg-box-item" v-for="(item,index) in msgList" :key="'msgitem'+index">
<p :class="{'msg-title':item.readStatus==1}" class="msg-title1">{{item.msgTitle}}</p>
<p>{{megDeal(item)}}</p>
<p>
<span>{{item.createTime}}</span>
<span>{{item.systemName}}</span>
<span class="can_click_text" @click="getDetail(item.msgId)">查看详情</span>
</p>
</div>
</div>
<div class="msg-box-page">
<el-pagination @current-change="readPageChange" :current-page="readPage" :page-size="10" layout="total, prev, pager, next" :total="readTotal">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import "github-markdown-css/github-markdown.css";
import detailTable2 from "./detail-table2.vue";
import MarkdownIt from "markdown-it";
import axios from "axios";
var md = new MarkdownIt();
export default {
// model: {
// prop: "value",
// event: "change",
// },
props: {
modelValue: {
type: Boolean,
default: false,
},
},
emits: ['update:modelValue'],
components: {
detailTable2,
},
data() {
return {
dialogVisible: false,
msgText: "",
md,
unReadNum: 0,
activeName: 0,
url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
srcList: [
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
],
detailData: [
{
label: "标题",
value: "",
width: "100%",
},
{
label: "消息来源",
value: "",
width: "100%",
},
{
label: "发送时间",
value: "",
width: "100%",
},
{
label: "消息类型",
value: "",
width: "100%",
},
{
label: "消息内容",
value: '',
width: "100%",
childSlot: "content",
},
],
readTotal: 0,
readPage: 1,
textTime: null,
msgList: [],
timer:null,
};
},
watch: {
modelValue(n,o){
console.log(n)
if(n==true){
this.getUnreadNum();
this.changeRead(0)
}
}
},
computed: {},
created() {
this.timer = setInterval(() => {
this.getNowMsg()
}, 60000);
},
mounted() {
this.getReadList();
this.getUnreadNum();
},
destroyed(){
clearInterval(this.timer)
},
methods: {
getNowMsg(){
axios
.get(`${this.$trace.option.requestUrl}/msg/api/current`, {
params: {
appId: this.$trace.option.appID,
userId: this.$trace.option.userId,
userType: this.$trace.option.userType,
roleId: this.$trace.option.roleId,
organization: this.$trace.option.organization,
},
})
.then((res) => {
if (res.data.code == 200) {
let data = res.data.data||[]
data.forEach(e => {
setTimeout(() => {
this.msgTipsAdd(e)
}, 1000);
});
}else{
this.$message.error(res.data.desc)
}
});
},
//消息推送
msgTipsAdd(data) {
const h = this.$createElement;
this.$notify({
title: data.msgTitle,
dangerouslyUseHTMLString: true,
message: h("div", { class: "msg-tips-xxb1" }, [
h("div", { class: "msg-text-xxb1" }, this.megDeal(data)),
h(
"p",
{
class: "detail-xxb1",
on: {
click: () => {
this.getDetail(data.msgId);
},
},
},
"查看详情"
),
h("p", { class: "msg-time-info-xxb1" }, [
h("span", data.createTime),
h("span", data.systemName),
]),
]),
iconClass: "el-icon-info",
});
},
//获取详情
getDetail(id) {
this.dialogVisible = true;
//刷新未读数量
console.log(id);
axios
.get(`${this.$trace.option.requestUrl}/msg/api/my/msg/detail`, {
params: {
msgId: id,
userId: this.$trace.option.userId,
userType: this.$trace.option.userType,
roleId: this.$trace.option.roleId,
organization: this.$trace.option.organization,
},
})
.then((res) => {
if (res.data.code == 200) {
let data = res.data.data
this.detailData = [
{
label: "标题",
value: data.msgTitle,
width: "100%",
},
{
label: "消息来源",
value: data.systemName,
width: "100%",
},
{
label: "发送时间",
value: data.createTime,
width: "100%",
},
{
label: "消息类型",
value: ['','文本消息','图片消息','动作消息'][data.msgType],
width: "100%",
},
{
label: "消息内容",
value: data,
width: "100%",
childSlot: "content",
},
];
if(data.file){
this.detailData.push({
label: "附件",
childSlot: "file",
value: JSON.parse(data.file),
width: "100%",
})
}
if(data.msgType==3){
this.detailData.push({
label: "快捷操作",
childSlot: "action",
value: data.action,
width: "100%",
})
}else{
console.log(md.render(data.msgInfo));
console.log(this.mdRender(data.msgInfo))
}
this.getUnreadNum();
this.getReadList();
}else{
this.$message.error(res.data.desc)
}
});
},
mdRender(val){
let str = md.render(val)
return str.replace(/<a/g,'<a target="_blank" style="text-decoration: underline;"')
},
//调整页面
gotoPage(url) {
this.dialogVisible = false;
if (url) {
window.open(url, "_blank");
}
},
//下载
downLoadPage(file){
if(file.url){
const filename = file.fileName;
const a = document.createElement('a');
a.href = file.url;
a.download = filename;
a.click();
a.remove()
}
},
//切换全部和未读
changeRead(val) {
this.activeName = val;
this.readPage = 1
this.getUnreadNum();
this.getReadList();
},
//翻页
readPageChange(page) {
this.readPage = page;
this.getReadList();
},
//消息列表
getReadList() {
let url = "";
if (this.activeName == 0) {
url = `/msg/api/my/list/10`;
} else {
url = `/msg/api/my/unRead/list/10`;
}
axios
.get(`${this.$trace.option.requestUrl}${url}/${this.readPage}`, {
params: {
appId: this.$trace.option.appID,
userId: this.$trace.option.userId,
userType: this.$trace.option.userType,
roleId: this.$trace.option.roleId,
organization: this.$trace.option.organization,
content: this.msgText,
},
})
.then((res) => {
if (res.data.code == 200) {
this.msgList = res.data.data || [];
this.readTotal = res.data.total;
}else{
this.$message.error(res.data.desc)
}
});
},
//输入消息查询
changeText() {
if (this.textTime) {
clearTimeout(this.textTime);
}
this.textTime = setTimeout(() => {
this.getReadList();
}, 500);
},
// 关闭消息列表
closeRead() {
this.$emit("update:modelValu", false);
},
//全部已读
allRead() {
axios
.put(`${this.$trace.option.requestUrl}/msg/api/read?appId=${this.$trace.option.appID}&userId=${this.$trace.option.userId}&userType=${this.$trace.option.userType}&roleId=${this.$trace.option.roleId}&organization=${this.$trace.option.organization}`
)
.then((res) => {
if (res.data.code == 200) {
this.changeRead(0)
this.$message.success("全部已读成功");
}else{
this.$message.error(res.data.desc)
}
});
},
//获取未读数量
getUnreadNum() {
axios
.get(`${this.$trace.option.requestUrl}/msg/api/my/unRead/count`, {
params: {
appId: this.$trace.option.appID,
userId: this.$trace.option.userId,
userType: this.$trace.option.userType,
roleId: this.$trace.option.roleId,
organization: this.$trace.option.organization,
},
})
.then((res) => {
if (res.data.code == 200) {
this.unReadNum = res.data.data;
this.$store.commit("setUnreadNum",this.unReadNum)
}else{
this.$message.error(res.data.desc)
}
});
},
//消息内容处理
megDeal(obj){
//文本
// debugger
if(obj.msgType==1){
return obj.msgInfo
}else if(obj.msgType==2){//图文
let img = obj.image||[]
let str = ''
img.forEach(e => {
str = str+'[img]'+e.content
});
return str
}else{//动作消息
let act = obj.action||[]
let actStr = ''
act.forEach(e => {
actStr = actStr + `[${e.desc}]`+' '
});
return actStr
}
},
replaceImg(html) {
let imgReg = /<img[^>]+>/g;
let text = html.replace(imgReg, "[图片]");
return text;
},
},
};
</script>
<style lang="scss" scoped>
.ac-button-bdx12,.file-button-bdx12 {
height: 39px;
line-height: 39px;
background-color: #fff;
color: #000;
font-size: 14px;
padding: 0 15px;
border-radius: 4px;
display: inline-block;
cursor: pointer;
margin-right: 15px;
}
.file-button-bdx12{
color: #3759be;
text-decoration: underline;
}
.content-box-bdx12 {
height: 367px;
overflow-x: hidden;
overflow-y: scroll;
}
.content-file-bdx12 {
max-height: 100px;
overflow-x: hidden;
overflow-y: scroll;
}
.content-no-scroll::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.msg-box-bdx12 {
width: 720px;
height: 560px;
background-color: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
border-radius: 4px;
border: solid 1px #e6e9ef;
z-index: 1999;
position: fixed;
right: 15px;
bottom: -700px;
transition: all 0.5s;
.msg-box-header {
width: 100%;
height: 64px;
border-bottom: 1px solid #e6e9ef;
padding: 0 15px;
display: flex;
justify-content: space-between;
.msg-title {
font-size: 18px;
font-weight: 600;
line-height: 64px;
color: #202531;
&::before {
content: "";
width: 4px;
height: 16px;
background-color: #2b4695;
border-radius: 2px;
display: inline-block;
vertical-align: -1px;
margin-right: 10px;
}
}
.msg-action {
display: flex;
align-items: center;
.el-icon-close {
cursor: pointer;
}
}
}
.msg-box-content {
.msg-box-read {
width: 100%;
height: 50px;
border-bottom: 2px solid #f7f7f9;
padding: 0 15px;
div {
float: left;
line-height: 48px;
margin-right: 40px;
border-bottom: 3px solid #2b4695;
cursor: pointer;
position: relative;
.unread-num {
position: absolute;
padding: 0 6px;
border: 0;
line-height: 16px;
height: 16px;
background-color: #d14731;
border-radius: 8px;
font-size: 12px;
color: #ffffff;
left: 28px;
top: 9px;
}
}
span {
font-size: 14px;
float: right;
margin-top: 14px;
}
}
.msg-box-list {
width: 100%;
height: 382px;
overflow-x: hidden;
overflow-y: scroll;
.msg-box-item {
height: 126px;
border-bottom: 1px solid #e6e9ef;
margin: 15px;
.msg-title1 {
font-size: 16px;
font-weight: 700;
color: #202531;
}
.msg-title{
&::before{
content:'';
display:inline-block;
width: 6px;
height: 6px;
vertical-align: 2px;
margin-right: 8px;
border-radius: 50%;
background-color: #d75138;
}
}
P {
margin-bottom: 16px;
}
p:nth-of-type(1) {
font-size: 16px;
font-weight: 600;
color: #202531;
}
p:nth-of-type(2) {
font-size: 14px;
height: 40px;
color: #404a62;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
p:nth-of-type(3) {
font-size: 14px;
color: #909bb6;
span {
margin-right: 20px;
&:nth-last-of-type(1){
float: right;
}
}
}
}
}
.msg-box-page {
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
:deep() .el-pager li.active {
color: #3759be;
}
}
}
}
.markdown-body{
font-size: 14px;
color: rgb(64, 74, 98);
}
</style>
<style>
.el-notification .el-icon-info:before {
color: #2b4695;
}
.el-notification .msg-tips-xxb1 {
width: 100%;
}
.el-notification .msg-text-xxb1 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
font-size: 14px;
-webkit-box-orient: vertical;
}
.el-notification .detail-xxb1 {
text-align: right;
color: #3759be;
cursor: pointer;
font-size: 14px;
margin: 15px 0;
}
.el-notification .msg-time-info-xxb1 {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #909bb6;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
.el-notification__group {
flex-grow: 1;
}
</style>
src/msg-sdk/lib/tip.vue 0 → 100644
View file @ d01f7926
<template>
<div :ref="ref" class="msg-container-bdx1">
<p class="msg-title-xxb1">
<img src="../img/ic_tips.png" alt="">
{{title}}
<i @click="close('msg-short-log')" class="el-icon-close"></i>
</p>
<div class="msg-tips-xxb1">
<div class="msg-text-xxb1">
{{text}}
</div>
<p class="detail-xxb1" @click="aas">查看详情</p>
<p class="msg-time-info-xxb1"><span>{{time}}</span> <span>{{source}}</span></p>
</div>
</div>
</template>
<script>
export default {
props: {
},
components: {
},
data() {
return {
title:'',
text:'',
time:'',
source:'',
ref:''
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
console.log(ref,right);
appendToBody(this.ref,'20px')
},
methods: {
appendToBody(ref,right){
console.log(ref,right);
if(right){
this.$refs[ref].style.right = right
}
},
},
};
</script>
<style scoped>
.msg-container-bdx1{
width: 400px;
background-color: #ffffff;
box-shadow: 0px 4px 12px 0px
rgba(18, 30, 63, 0.1);
border-radius: 4px;
border: solid 1px #e6e9ef;
padding: 17px;
position: fixed;
z-index: 9999;
top: 100px;
right: -500px;
transition: all 0.5s;
}
.el-icon-close{
float: right;
cursor: pointer;
}
.msg-title-xxb1{
font-size: 16px;
font-weight: 600;
color: #202531;
margin-bottom: 10px;
}
.msg-title-xxb1 img{
vertical-align: -5px;
margin-right: 12px;
}
.msg-tips-xxb1{
margin-left: 40px;
font-size: 14px;
}
.msg-text-xxb1{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
font-size: 14px;
-webkit-box-orient: vertical;
}
.detail-xxb1{
text-align: right;
color: #3759be;
cursor: pointer;
font-size: 14px;
margin: 15px 0;
}
.msg-time-info-xxb1{
display: flex;
justify-content: space-between;
font-size: 14px;
color: #909bb6;
}
</style>
src/store/index.js
View file @ d01f7926
......@@ -12,6 +12,7 @@ const store = createStore({
menuObj:{},
treeFlag:false,
registerValid:false,
msgUnreadNum: 0
},
getters: {
count(state) {
......@@ -45,7 +46,10 @@ const store = createStore({
},
setRegisterValid(state,registerValid){
state.registerValid = registerValid
}
},
setUnreadNum(state, num) {
state.msgUnreadNum = num
},
},
actions: {}
});
......
yarn.lock
View file @ d01f7926
......@@ -470,6 +470,11 @@ anymatch@~3.1.2:
normalize-path "^3.0.0"
picomatch "^2.0.4"
argparse@^2.0.1:
version "2.0.1"
resolved "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
async-validator@^4.2.5:
version "4.2.5"
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz"
......@@ -599,6 +604,11 @@ element-plus@^2.2.19:
memoize-one "^6.0.0"
normalize-wheel-es "^1.2.0"
entities@~3.0.1:
version "3.0.1"
resolved "https://registry.npmmirror.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@~0.10.14:
version "0.10.62"
resolved "https://registry.npmmirror.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
......@@ -798,6 +808,11 @@ function-bind@^1.1.1:
resolved "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
github-markdown-css@^5.1.0:
version "5.1.0"
resolved "https://registry.npmmirror.com/github-markdown-css/-/github-markdown-css-5.1.0.tgz#a96281cd90a8969e3c13b9d3ca6a733a523a00a6"
integrity sha512-QLtORwHHtUHhPMHu7i4GKfP6Vx5CWZn+NKQXe+cBhslY1HEt0CTEkP4d/vSROKV0iIJSpl4UtlQ16AD8C6lMug==
glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz"
......@@ -895,6 +910,13 @@ is-url@^1.2.4:
resolved "https://registry.npmmirror.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
linkify-it@^4.0.1:
version "4.0.1"
resolved "https://registry.npmmirror.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
dependencies:
uc.micro "^1.0.1"
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz"
......@@ -952,6 +974,22 @@ magic-string@^0.25.7:
dependencies:
sourcemap-codec "^1.4.8"
markdown-it@^13.0.1:
version "13.0.1"
resolved "https://registry.npmmirror.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
dependencies:
argparse "^2.0.1"
entities "~3.0.1"
linkify-it "^4.0.1"
mdurl "^1.0.1"
uc.micro "^1.0.5"
mdurl@^1.0.1:
version "1.0.1"
resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
memoize-one@^6.0.0:
version "6.0.0"
resolved "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz"
......@@ -1162,6 +1200,11 @@ type@^2.5.0:
resolved "https://registry.npmmirror.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
uc.micro@^1.0.1, uc.micro@^1.0.5:
version "1.0.6"
resolved "https://registry.npmmirror.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
utrie@^1.0.2:
version "1.0.2"
resolved "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment