zfire-newmall-admin/src/layout/components/Navbar.vue

<template>
  <div>
    <div class="navbar">
      <!-- 菜单展开缩起 -->
      <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
      <div class="menu_module">
        <div class="menu_module_view">
          <v-scroll-view
            :x="true"
            :y="false"
            slidingBgClassName="slidingBgClassName"
            slidingBlockClassName="slidingBlockClassName"
          >
            <div class="menu_module_fj">
              <div
                v-for="(item, index) in routes"
                :key="index"
                :class="{ item: true, select: path === item.path }"
                @click="path = item.path"
              >
                {{ item.meta.title }}
              </div>
            </div>
          </v-scroll-view>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-menu">
        <!-- <div class="right-menu-item">
          <el-autocomplete
            v-model="pathurl"
            :fetch-suggestions="querySearchAsync"
            placeholder="搜索菜单"
            @select="handleSelect"
          ></el-autocomplete>
        </div> -->
		<div style="margin-right: 20px;cursor: pointer;" @click="getList();isShow = true">
			<i class="el-icon-message-solid"></i>
			<el-badge :is-dot="isDot1 || isDot2"></el-badge>
		</div>
        <shortcut />
        <template v-if="device !== 'mobile'">
          <!-- 全屏控制 -->
          <screenfull id="screenfull" class="right-menu-item hover-effect" />
        </template>
        <el-dropdown class="user-container" trigger="click">
          <div class="user right-menu-item hover-effect">
            <div class="flex">
              <i class="el-icon-user-solid" />
              <span :class="name.length > 5 ? 'ellipsis' : ''">{{ name }}</span>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link :to="{ name: 'profile' }">
              <el-dropdown-item>个人信息</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <notice-bar />
	<el-drawer
	  title="系统消息"
	  :visible.sync="isShow"
	  :append-to-body="true"
	  :with-header="false"
	  direction="rtl"
	  size="25%">
		<div class="message">
			<div class="head">
				<div class="flex_asb">
					<el-radio-group size="small" v-model="messageType" @change="getList">
						<el-badge :is-dot="isDot1" class="item">
							<el-radio-button :label="['WBI','WBK','CRE_ORDER','SEND_MALL','RP_MALL','CR_SALES']">系统消息</el-radio-button>
						</el-badge>
						<el-badge :is-dot="isDot2" class="item">
							<el-radio-button :label="['NOTICE']">平台公告</el-radio-button>
						</el-badge>
					</el-radio-group>
					<el-switch
					  v-model="isOpen"
					  @change="updateIsNotice"
					  inactive-text="消息弹窗"
					  active-color="#13ce66"
					  inactive-color="#ff4949">
					</el-switch>
				</div>
				<el-radio-group size="mini" v-model="dateType" @change="getList" style="margin: 10px 0;">
				  <el-radio-button label="">全部</el-radio-button>
				  <el-radio-button :label="0">今天</el-radio-button>
				  <el-radio-button :label="1">昨天</el-radio-button>
				  <el-radio-button :label="6">近7天</el-radio-button>
				  <el-radio-button :label="29">近30天</el-radio-button>
				</el-radio-group>
				<div class="flex_asb">
					<el-radio-group size="mini" v-model="readFlag" @change="getList">
						<el-radio-button label="">全部</el-radio-button>
						<el-badge :hidden="count>0?false:true" :value="count" class="item" style="margin: 0 10px">
							<el-radio-button label="NO">未读</el-radio-button>
						</el-badge>
						<el-badge :value="count" :hidden="true" class="item" >
							<el-radio-button label="YES">已读</el-radio-button>
						</el-badge>
					</el-radio-group>
					<div style="color: #409EFF;cursor: pointer;" @click="confirmRead">
						<i class="el-icon-message-solid"></i>
						<span style="font-size: 14px;">全部已读</span>
					</div>
				</div>
			</div>
			<el-card class="box-card" v-for="(item,index) in messageData" style="margin-top: 10px;">
				<div @click="isShow = false;toDetail(item.adminNoticeType,item.paidType,(item.adminNoticeType=='NOTICE'?item.noticeId:item.orderId),item.id)">
					<div v-if="item.adminNoticeType == 'NOTICE'">
						<div class="flex_asb item">
							<div>
								<span>公告类型：</span>
								<span>{{statusFilter(item.adminNoticeType)}}</span>
							</div>
							<div class="read1" v-if="item.readFlag == 'NO'">未读</div>
							<div class="read2" v-if="item.readFlag == 'YES'">已读</div>
						</div>
						<div class="item">
							<div>
								<span>文件标题：</span>
								<span style="color: #409Eff">{{item.title}}</span>
							</div>
						</div>
						<div class="item">
							<div>
								<span>发布人：</span>
								<span>{{item.issueNickName | ''}}</span>
							</div>
						</div>
						<div class="item">
							<div>
								<span>发布时间：</span>
								<span>{{item.issueTime}}</span>
							</div>
						</div>
						<div v-if="item.readFlag == 'YES'" class="item">
							<span>阅读人：</span>
							<span>{{item.adminNickName }} {{item.readTime}}</span>
						</div>
					</div>
					<div v-else>
						<div class="flex_asb item">
							<div>
								<span>消息类型：</span>
								<span>{{statusFilter(item.adminNoticeType)}}</span>
							</div>
							<div class="read1" v-if="item.readFlag == 'NO'">未读</div>
							<div class="read2" v-if="item.readFlag == 'YES'">已读</div>
						</div>
						<div class="item">
							<div>
								<span>订单编号：</span>
								<span style="color: #409Eff">{{item.orderId}}</span>
							</div>
						</div>
						<div class="item">
							<div>
								<span>消息内容：</span>
								<span>{{item.content}}</span>
							</div>
						</div>
						<div class="item">
							<div>
								<span>创建时间：</span>
								<span>{{item.createTime}}</span>
							</div>
						</div>
						<div v-if="item.readFlag == 'YES'" class="item">
							<span>阅读人：</span>
							<span>{{item.adminNickName }} {{item.readTime}}</span>
						</div>
					</div>
				</div>
			</el-card>
			<el-empty v-if="messageData.length == 0" description="暂无数据"></el-empty>
			<div class="flex_ac bottom">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					layout="prev, pager, next"
					background
					:total="listTotal"
				></el-pagination>
			</div>
		</div>
	</el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
import Shortcut from '@/components/Shortcut'
import Screenfull from '@/components/Screenfull'
import NavMenu from '@/components/NavMenu'
import vScrollView from 'v-scroll-view'
import NoticeBar from '@/components/NoticeBar'
import { pages } from '@/settings'
import request from '@/utils/request'
function getc(obj) {
  if (!obj.children || !obj.children.length) {
    return obj
  } else {
    return getc(obj.children[0])
  }
}
export default {
  components: {
    NoticeBar,
    Hamburger,
    Screenfull,
    NavMenu,
    Shortcut,
    vScrollView
  },
  data() {
    return {
      pathurl: '',
      visible: false,
      noticeCount: 0,
      path: `/${this.$route.path.split('/')[1] || ''}`,
	  isShow: false,
	  isOpen: true,
	  checked: false,
	  messageType: ['WBI','WBK','CRE_ORDER','SEND_MALL','RP_MALL','CR_SALES'],
	  messageData: [],
	  dateType: '',
	  readFlag: '',
	  timer: null,
	  listTotal: 0,
	  currentPage: 1, // 当前页码
	  pageSize: 10, // 每页数量
		count: 0,
		isDot1: false,
		isDot2: false
    }
  },
  computed: {
    routes() {
      return global.antRouter.filter(item => item.meta)
    },
    noticeVisible() {
      return this.noticeCount > 0
    },
	...mapGetters([
	  'userid'
	]),
    ...mapGetters(['sidebar', 'avatar', 'device', 'name', 'isNotice']),
	filterTime(){
		if(this.dateType === ''){
			return ['','']
		}else{
			var date = new Date();
			var base = Date.parse(date); // 转换为时间戳
			var year = date.getFullYear(); //获取当前年份
			var mon = date.getMonth() + 1; //获取当前月份
			var day = date.getDate(); //获取当前日
			var oneDay = 24 * 3600 *1000
			
			var daytimeArr = []
			var now = new Date((base - oneDay*this.dateType));
			var myear = now.getFullYear();
			var month = now.getMonth() + 1;
			var mday = now.getDate()
			if(this.dateType == 1){
				return [`${myear}-${month>9?month:'0'+month}-${mday>9?mday:'0'+mday} 00:00:00`,`${myear}-${month>9?month:'0'+month}-${mday>9?mday:'0'+mday} 23:59:59`]
			}else{
				return [`${myear}-${month>9?month:'0'+month}-${mday>9?mday:'0'+mday} 00:00:00`,`${year}-${mon>9?mon:'0'+mon}-${day>9?day:'0'+day} 23:59:59`]
			}
		}
	},
	statusFilter() {
		return function(val){
			const MAP = {
				NOTICE: '平台公告',
				WBI: '维保消息费用申请',
				WBK: '维保费用申请审批',
				CRE_ORDER: '创建工单',
				SEND_MALL: '商城订单发货',
				RP_MALL: '商城订单维权',
				CR_SALES: '订单支付成功'
			}
			return MAP[val]
		}
	},
	typeFilter() {
		return function(val,paidType){
			const MAP = {
				NOTICE: 'systemMessage',
				WBI: 'applicationWithoutFee',
				WBK: 'applicationWithoutFee',
				CRE_ORDER: 'workOrderPool',
				SEND_MALL: 'order_list',
				RP_MALL: 'order_pr',
				CR_SALES: (paidType=='M'?'auxiliarySalesOrder':paidType=='P'?'attachmentSalesOrder':paidType=='YB'?'orderSettleManag':paidType=='MALL'?'order_list':'')
			}
			return MAP[val]
		}
	}
  },
  watch: {
    $route() {
      this.path = `/${this.$route.path.split('/')[1] || ''}`
    },
    path(newVal) {
      this.$store.commit('app/SET_L1_PATH', newVal)
      if (
        !~this.$route.path
          .split('/')
          .map(str => `/${str}`)
          .indexOf(newVal)
      ) {
        var item = getc(this.routes.find(item => item.path === newVal))
        if (item) {
          this.$router.push(item.path)
        }
      }
    }
  },
  created(){
	  clearInterval(this.timer)
	  this.getUserInfo()
	  this.redDot()
  },
  mounted() {
    this.$store.commit('app/SET_L1_PATH', this.path)
  },
  methods: {
    handlePage() {
      let link = null
      if (process.env.VUE_APP_ENV === 'production') {
        link = 'https://fw.gd-jxm.com/#/home'
      } else {
        link = 'https://jiasm.zfire.top/center/#/home'
      }
      window.open(link)
    },

    querySearchAsync(queryString, cb) {
      var data = pages.filter(item => ~item.meta.title.indexOf(queryString))
      cb(
        data.map(item => ({
          value: item.meta.title,
          path: item.path
        }))
      )
    },
    handleSelect(item) {
      if (item.path) {
        this.$router.push({
          path: item.path
        })
      }
      this.pathurl = ''
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$store.commit('tagsView/SET_RESET_VIES')
      this.$router.push(`/login`)
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
	//获取最新消息并弹窗
	getMessageTips(){
		console.log(111)
		const that = this
		this.timer = setInterval(()=>{
			request({
			  url: `/notice/list/out`,
			  method: 'get',
			  params: {
				  num: 30,
			  }
			}).then(res=>{
				res.data.forEach(item=>{
					this.$notify({
						title: '新消息',
						position: 'bottom-right',
						duration: 30000,
						message: that.$createElement(
							"div",
							{
								style: 'cursor: pointer;',
								on: {
									click: that.toDetail.bind(that,item.adminNoticeType,item.paidType,(item.adminNoticeType=='NOTICE'?item.noticeId:item.orderId),item.id)
								},
							},[
								that.$createElement(
									"span",
									null,
									that.statusFilter(item.adminNoticeType) + ' '
								),
								that.$createElement(
									"span",
									{
										style: 'color: #409EFF;',
									},
									' ' + item.adminNoticeType=='NOTICE'?item.title:item.orderId
								),
								that.$createElement(
									"span",
									null,
									item.adminNoticeType=='NOTICE'?'':item.content
								),
							// that.$createElement(
							// 	"el-checkbox",
							// 	{
							// 		on: {
							// 			change: that.updateIsNotice.bind(that)
							// 		},
							// 	}, '不再弹窗新消息'
							// )
						])
					});
				})
			})
		},30000)
		
	},
	getCount(){
		request({
		  url: `/notice/list/count`,
		  method: 'get',
		  params: {
			  noticeType: this.messageType.join(','),
			  readFlag: 'NO'
		  }
		}).then(res=>{
			this.count = res.data
		})
	},
	redDot(){
		request({
		  url: `/notice/list/count`,
		  method: 'get',
		  params: {
			  noticeType: ['WBI','WBK','CRE_ORDER','SEND_MALL','RP_MALL','CR_SALES'].join(','),
			  readFlag: 'NO'
		  }
		}).then(res=>{
			this.isDot1 = res.data > 0?true:false
		})
		request({
		  url: `/notice/list/count`,
		  method: 'get',
		  params: {
			  noticeType: ['NOTICE'].join(','),
			  readFlag: 'NO'
		  }
		}).then(res=>{
			this.isDot2 = res.data > 0?true:false
		})
	},
	getUserInfo(){
		const that = this
		request({
		  url: `/admin/user/detail`,
		  method: 'get',
		  params: {
			  adminUserId: this.userid
		  }
		}).then(res=>{
			this.isOpen = res.data.isNotice=='YES'?true:false
			if(res.data.isNotice=='NO'){
				clearInterval(this.timer)
			}else{
				clearInterval(this.timer)
				this.getMessageTips()
			}
		})
	},
	//全部已读
	confirmRead(){
		this.$confirm('是否全部设为已读, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			request({
			  url: `/notice/mark/read/all`,
			  method: 'post',
			  data: {}
			}).then(res=>{
				if(res.code == 200){
					this.getList()
					this.$message.success('全部已读成功！');
				}
			})
		}).catch(() => {
			this.$message({
				type: 'info',
				message: '已取消'
			});
		});
	},
	//点击不再弹窗新消息
	updateIsNotice(e){
		request({
		  url: `/notice/updateIsNotice`,
		  method: 'post',
		  params: {
			  isNotice: e?'YES':'NO',
		  }
		}).then(res=>{
			if(res.code == 200){
				this.getUserInfo()
				this.$message.success(e?'已开启弹窗消息提醒':'已关闭弹窗消息提醒');
				if(!e){
					clearInterval(this.timer)
				}
			}
		})
	},
	getList(){
		request({
		  url: `/notice/list`,
		  method: 'post',
		  data: {
			  pageNum: this.currentPage,
			  pageSize: this.pageSize,
			  params: [{param: "nr.read_flag", compare: "=", value: this.readFlag},{param: 'nr.admin_notice_type', compare: "=", value: this.messageType},{param: 'nr.issue_time', compare: ">=", value: this.filterTime[0]},{param: 'nr.issue_time', compare: "<=", value: this.filterTime[1]}]
		  }
		}).then(res=>{
			this.getCount()
			this.redDot()
			this.listTotal = res.data.total
			this.messageData = res.data.records
		})
	},
	// 更改当前页
	handleCurrentChange(val) {
		this.currentPage = val;
		this.getList();
	},
	toDetail(type,paidType,orderId,id){
		console.log(this.typeFilter(type,paidType))
		this.read(id)
		this.$router.push({
			name: this.typeFilter(type,paidType),
			query: {
				id: orderId,
				activeName: "workOrderInfo",
			}
		})
	},
	read(id){
		request({
		  url: `/notice/mark/read`,
		  method: 'post',
		  params: {
			  noticeIds: id,
		  }
		}).then(res=>{
			
		})
	}
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
// ::v-deep .el-drawer__container{
//   top: 50px;

// }
::v-deep .is-fixed {
  right: 10px !important;
}
::v-deep .slidingBgClassName {
  background: rgba(0, 0, 0, 0.01) !important;
}
::v-deep .slidingBlockClassName {
  background: rgba(0, 0, 0, 0.05) !important;
}
.flex_asb{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex_ac{
	display: flex;
	justify-content: center;
}
.message{
	padding: 20px;position: relative;min-height: 100%;padding-bottom:60px;padding-top: 150px;box-sizing: border-box;
	.head{
		width:25%;position: fixed;top: 0;right:0;background: #ffffff;padding: 20px;
	}
	.bottom{
		width:25%;position: fixed;bottom: 0;right:0;background: #ffffff;padding: 10px 0;
	}
}
.box-card{
	.item{
		cursor: pointer;
		margin-bottom: 6px;
	}
	.read1{
		color: #f5680e;
		background: #fff2da;
		padding: 2px 4px;
		border-radius: 4px;
		font-size: 14px;
	}
	.read2{
		color: #42b983;
		background: #d7fdde;
		padding: 2px 4px;
		border-radius: 4px;
		font-size: 14px;
	}
}
.navbar {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #{$navbarBg};
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    color: #{$navbarText};
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    border-right: 1px solid #eaeaea;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
  .menu_module {
    height: 100%;
    flex: 1;
    position: relative;
    .menu_module_view {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      .menu_module_fj {
        height: 100%;
        width: fit-content;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 0 10px;
        .item {
          display: inline-block;
          height: 100%;
          line-height: 50px;
          box-sizing: border-box;
          padding: 0 10px;
          cursor: pointer;
        }
        .select {
          border-bottom: 1px solid #000;
        }
      }
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .ellipsis {
    display: inline-block;
    width: (16px * 6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .right-menu {
    height: 100%;
    line-height: 50px;

    & > div {
      float: left;
    }

    &:focus {
      outline: none;
    }

    .user-container {
      height: 50px;

      .user {
        i {
          font-size: 18px;
          margin-right: 5px;
        }

        span {
          font-size: 16px;
        }
      }
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 15px;
      height: 100%;
      font-size: 18px;
      color: #{$navbarText};
      vertical-align: text-bottom;
      border-left: 1px solid #eaeaea;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }

      .notice-icon {
        padding-top: 0;
        padding-bottom: 0;
      }
      .right-menu-item {
        .notice-icon > i {
          font-size: 18px;
        }

        sup {
          top: 12px;
          right: 25px;
        }
      }
    }
  }
}
::v-deep .el-badge__content.is-fixed{
	z-index: 99;
}
</style>