主页面上部分信息提示的气泡+假数据

ys_vue/src/views/Home.vue

@@ -1,328 +1,445 @@
 <template>
-	<el-row class="container">
-		<el-col :span="24" class="header">
-			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
-				{{collapsed?'':sysName}}
-			</el-col>
-			<el-col :span="10">
-				<div class="tools" @click.prevent="collapse">
-					<i class="fa fa-align-justify"></i>
-				</div>
-			</el-col>
-			<el-col :span="4" class="userinfo">
-				<el-dropdown trigger="hover">
-					<span class="el-dropdown-link userinfo-inner"><img src="../assets/image/userHead.jpg" /> {{sysUserName}}</span>
-					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item @click.native="reset">修改密码</el-dropdown-item>
-						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
-					</el-dropdown-menu>
-				</el-dropdown>
-                <el-badge is-dot class="itemNew">
-                    <i class="el-icon-message-solid" style="font-size:24px"></i>
-                </el-badge>
-			</el-col>
-		</el-col>
-		<el-col :span="24" class="main">
-			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
-				<!--导航菜单-->
-				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-if="!collapsed">
-					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
-						<el-submenu :index="index+''" v-if="!item.leaf">
-							<template slot="title"><i :class="item.iconCls"></i><span class="itemName">{{item.name}}</span></template>
-							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
-						</el-submenu>
-						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
-					</template>
-				</el-menu>
-				<!--导航菜单-折叠后-->
-				<ul class="el-menu el-menu-vertical-demo collapsed" v-if="collapsed" ref="menuCollapsed">
-					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item" :style="{overflow:!item.leaf?'':'hidden'}">
-						<template v-if="!item.leaf">
-							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
-							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
-								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
-							</ul>
-						</template>
-						<template v-else>
-							<li class="el-submenu">
-								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
-							</li>
-						</template>
-					</li>
-				</ul>
-			</aside>
-			<section class="content-container">
-				<div class="grid-content bg-purple-light">
-					<!-- <el-col :span="24" class="breadcrumb-container">
+  <el-row class="container">
+    <el-col :span="24" class="header">
+      <el-col
+        :span="10"
+        class="logo"
+        :class="collapsed?'logo-collapse-width':'logo-width'"
+      >{{collapsed?'':sysName}}</el-col>
+      <el-col :span="10">
+        <div class="tools" @click.prevent="collapse">
+          <i class="fa fa-align-justify"></i>
+        </div>
+      </el-col>
+      <el-col :span="4" class="userinfo">
+        <el-badge is-dot class="itemNew">
+          <i class="el-icon-message-solid" style="font-size:24px" v-popover:popover1></i>
+          <!-- 消息中心 -->
+          <el-popover ref="popover1" placement="bottom" width="400" trigger="hover">
+            <div class="popover-main">消息盒子</div>
+            <div class="popover-item" v-for="item in popoverData">
+              <p class="popover-title">
+                {{item.title}}
+                <span class="popover-type">[{{item.type}}]</span>
+              </p>
+              <p>{{item.article}}</p>
+            </div>
+            <div class="popover-button">查看全部</div>
+          </el-popover>
+        </el-badge>
+        <el-dropdown trigger="hover">
+          <span class="el-dropdown-link userinfo-inner">
+            <img src="../assets/image/userHead.jpg" />
+            {{sysUserName}}
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click.native="reset">修改密码</el-dropdown-item>
+            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-col>
+    <el-col :span="24" class="main">
+      <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
+        <!--导航菜单-->
+        <el-menu
+          :default-active="$route.path"
+          class="el-menu-vertical-demo"
+          @open="handleopen"
+          @close="handleclose"
+          @select="handleselect"
+          unique-opened
+          router
+          v-if="!collapsed"
+        >
+          <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
+            <el-submenu :index="index+''" v-if="!item.leaf">
+              <template slot="title">
+                <i :class="item.iconCls"></i>
+                <span class="itemName">{{item.name}}</span>
+              </template>
+              <el-menu-item
+                v-for="child in item.children"
+                :index="child.path"
+                :key="child.path"
+                v-if="!child.hidden"
+              >{{child.name}}</el-menu-item>
+            </el-submenu>
+            <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
+              <i :class="item.iconCls"></i>
+              {{item.children[0].name}}
+            </el-menu-item>
+          </template>
+        </el-menu>
+        <!--导航菜单-折叠后-->
+        <ul class="el-menu el-menu-vertical-demo collapsed" v-if="collapsed" ref="menuCollapsed">
+          <li
+            v-for="(item,index) in $router.options.routes"
+            v-if="!item.hidden"
+            class="el-submenu item"
+            :style="{overflow:!item.leaf?'':'hidden'}"
+          >
+            <template v-if="!item.leaf">
+              <div
+                class="el-submenu__title"
+                style="padding-left: 20px;"
+                @mouseover="showMenu(index,true)"
+                @mouseout="showMenu(index,false)"
+              >
+                <i :class="item.iconCls"></i>
+              </div>
+              <ul
+                class="el-menu submenu"
+                :class="'submenu-hook-'+index"
+                @mouseover="showMenu(index,true)"
+                @mouseout="showMenu(index,false)"
+              >
+                <li
+                  v-for="child in item.children"
+                  v-if="!child.hidden"
+                  :key="child.path"
+                  class="el-menu-item"
+                  style="padding-left: 40px;"
+                  :class="$route.path==child.path?'is-active':''"
+                  @click="$router.push(child.path)"
+                >{{child.name}}</li>
+              </ul>
+            </template>
+            <template v-else>
+              <li class="el-submenu">
+                <div
+                  class="el-submenu__title el-menu-item"
+                  style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;"
+                  :class="$route.path==item.children[0].path?'is-active':''"
+                  @click="$router.push(item.children[0].path)"
+                >
+                  <i :class="item.iconCls"></i>
+                </div>
+              </li>
+            </template>
+          </li>
+        </ul>
+      </aside>
+      <section class="content-container">
+        <div class="grid-content bg-purple-light">
+          <!-- <el-col :span="24" class="breadcrumb-container">
 						<strong class="title">{{$route.name}}</strong>
 						<el-breadcrumb separator="/" class="breadcrumb-inner">
 							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
 								{{ item.name }}
 							</el-breadcrumb-item>
 						</el-breadcrumb>
-					</el-col> -->
-					<el-col :span="24" class="content-wrapper">
-						<transition name="fade" mode="out-in">
-							<router-view></router-view>
-						</transition>
-					</el-col>
-				</div>
+          </el-col>-->
+          <el-col :span="24" class="content-wrapper">
+            <transition name="fade" mode="out-in">
+              <router-view></router-view>
+            </transition>
+          </el-col>
+        </div>
 
-                <!--修改密码-->
-                <el-dialog title="修改密码" v-if="editPassWord" :visible.sync="editPassWord" :close-on-click-modal="false" customClass='customWidth'>
-                    <el-form :model="addForm" label-width="80px" :rules="passRule" ref="addForm">
-                        <el-form-item label="新密码" prop="password">
-                            <el-input v-model="addForm.password" autocomplete="off" placeholder="请输入新密码" show-password></el-input>
-                        </el-form-item>
-                    </el-form>
-                    <div slot="footer" class="dialog-footer">
-                        <el-button @click.native="editPassWord = false">取消</el-button>
-                        <el-button type="primary" @click.native="resetPwd" :loading="editLoading">提交</el-button>
-                    </div>
-                </el-dialog>
-			</section>
-		</el-col>
-	</el-row>
+        <!--修改密码-->
+        <el-dialog
+          title="修改密码"
+          v-if="editPassWord"
+          :visible.sync="editPassWord"
+          :close-on-click-modal="false"
+          customClass="customWidth"
+        >
+          <el-form :model="addForm" label-width="80px" :rules="passRule" ref="addForm">
+            <el-form-item label="新密码" prop="password">
+              <el-input
+                v-model="addForm.password"
+                autocomplete="off"
+                placeholder="请输入新密码"
+                show-password
+              ></el-input>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click.native="editPassWord = false">取消</el-button>
+            <el-button type="primary" @click.native="resetPwd" :loading="editLoading">提交</el-button>
+          </div>
+        </el-dialog>
+      </section>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-                user: sessionStorage.getItem('user'),
-				sysName:'云塑网后台管理系统',
-				collapsed:false,
-				sysUserName: '',
-				
-                editPassWord: false,
-                editLoading: false,
-                addForm: {
-                    password: ''
-                },
-                passRule: {
-                    password: [
-                        { required: true, message: '请输入新密码', trigger: 'blur' }
-                    ]
-                }
-			}
-		},
-		methods: {
-            onSubmit() {
-			},
-			handleopen() {
-			},
-			handleclose() {
-			},
-			handleselect: function (a, b) {
-			},
-			//退出登录
-			logout: function () {
-				var _this = this;
-				this.$confirm('确认退出吗?', '提示', {
-					//type: 'warning'
-				}).then(() => {
-					sessionStorage.removeItem('user');
-					_this.$router.push('/login');
-				});
-			},
-			//折叠导航栏
-			collapse:function(){
-                this.collapsed=!this.collapsed;
-			},
-			showMenu(i,status){
-				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
-            },
-            reset() {
-                this.editPassWord = true;
-                this.addForm.id = JSON.parse(sessionStorage.getItem('user')).id;
-                this.addForm.account = JSON.parse(sessionStorage.getItem('user')).account;
-            },
-            resetPwd(){
-                this.$refs.addForm.validate((valid) => {
-					if (valid) {
-                        this.editLoading = true;
-                        this.http.post(this.port.pwd.resetPwd, this.addForm , res => {
-                            this.editLoading = false;
-                            this.editPassWord = false;
-                            if (res.code == "ok") {
-                                this.$message({
-                                    message: '修改成功,请重新登录',
-                                    type: 'success'
-                                });
-                                this.$router.push('/login');
-                            } else {
-                                this.$message({
-                                    message: res.msg,
-                                    type: 'error'
-                                });
-                            }
-                        }, error => {
-                            this.editLoading = false;
-                            this.editPassWord = false;
-                            this.$message({
-                                message: error,
-                                type: 'error'
-                            });
-                        })
-					}
-				});
-            }
+export default {
+  data() {
+    return {
+      user: sessionStorage.getItem("user"),
+      sysName: "云塑网后台管理系统",
+      collapsed: false,
+      sysUserName: "",
+
+      editPassWord: false,
+      editLoading: false,
+      addForm: {
+        password: ""
+      },
+      passRule: {
+        password: [{ required: true, message: "请输入新密码", trigger: "blur" }]
+      },
+      popoverData: [
+        {
+          title: "墨盒测试项目——零件文档",
+          article: "模具开发人员：王有财已上传完毕，待您审核",
+          type: "审批"
         },
-		mounted() {
-			if (this.user) {
-                var user = JSON.parse(this.user);
-                this.user = user;
-                this.sysUserName = user.username || '';
-            } else {
-                this.$router.push('/login');
+        {
+          title: "墨盒测试项目——零件文档",
+          article: "您上传的文档未通过项目经理：张多金审批，请修改后重新上传",
+          type: "审批"
+        },
+        {
+          title: "墨盒测试项目——零件文档",
+          article: "该模具需要保养，请前往处理",
+          type: "保养"
+        }
+      ]
+    };
+  },
+  methods: {
+    onSubmit() {},
+    handleopen() {},
+    handleclose() {},
+    handleselect: function(a, b) {},
+    //退出登录
+    logout: function() {
+      var _this = this;
+      this.$confirm("确认退出吗?", "提示", {
+        //type: 'warning'
+      }).then(() => {
+        sessionStorage.removeItem("user");
+        _this.$router.push("/login");
+      });
+    },
+    //折叠导航栏
+    collapse: function() {
+      this.collapsed = !this.collapsed;
+    },
+    showMenu(i, status) {
+      this.$refs.menuCollapsed.getElementsByClassName(
+        "submenu-hook-" + i
+      )[0].style.display = status ? "block" : "none";
+    },
+    reset() {
+      this.editPassWord = true;
+      this.addForm.id = JSON.parse(sessionStorage.getItem("user")).id;
+      this.addForm.account = JSON.parse(sessionStorage.getItem("user")).account;
+    },
+    resetPwd() {
+      this.$refs.addForm.validate(valid => {
+        if (valid) {
+          this.editLoading = true;
+          this.http.post(
+            this.port.pwd.resetPwd,
+            this.addForm,
+            res => {
+              this.editLoading = false;
+              this.editPassWord = false;
+              if (res.code == "ok") {
+                this.$message({
+                  message: "修改成功,请重新登录",
+                  type: "success"
+                });
+                this.$router.push("/login");
+              } else {
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            },
+            error => {
+              this.editLoading = false;
+              this.editPassWord = false;
+              this.$message({
+                message: error,
+                type: "error"
+              });
             }
-		}
-	}
-
+          );
+        }
+      });
+    }
+  },
+  mounted() {
+    if (this.user) {
+      var user = JSON.parse(this.user);
+      this.user = user;
+      this.sysUserName = user.username || "";
+    } else {
+      this.$router.push("/login");
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
-    @import '~scss_vars';
-	
-    .el-menu-vertical-demo i {
-        margin-right: 10px;
-    }
+@import "~scss_vars";
+
+.el-menu-vertical-demo i {
+  margin-right: 10px;
+}
+
+.itemNew {
+  height: 25px;
+  margin-left: 15px;
+  i {
+    vertical-align: top;
+  }
+}
 
-    .itemNew {
-        height: 25px;
-        margin-left: 15px;
-        i {
-            vertical-align: top;
+.container {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 100%;
+  .header {
+    height: 60px;
+    line-height: 60px;
+    background: $color-primary;
+    color: #fff;
+    .userinfo {
+      text-align: right;
+      padding-right: 35px;
+      float: right;
+      .userinfo-inner {
+        cursor: pointer;
+        color: #fff;
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 20px;
+          margin: 10px 10px 10px 10px;
+          // float: right;
+          float: left;
         }
+      }
     }
+    .logo {
+      //width:230px;
+      height: 60px;
+      font-size: 21px;
+      padding-left: 20px;
+      padding-right: 20px;
+      border-color: rgba(238, 241, 146, 0.3);
+      border-right-width: 1px;
+      border-right-style: solid;
+      img {
+        width: 40px;
+        float: left;
+        margin: 10px 10px 10px 18px;
+      }
+      .txt {
+        color: #fff;
+      }
+    }
+    .logo-width {
+      width: 230px;
+    }
+    .logo-collapse-width {
+      width: 60px;
+    }
+    .tools {
+      padding: 0px 23px;
+      width: 14px;
+      height: 60px;
+      line-height: 60px;
+      cursor: pointer;
+    }
+  }
+  .main {
+    display: flex;
+    // background: #324057;
+    position: absolute;
+    top: 60px;
+    bottom: 0px;
+    overflow: hidden;
+    aside {
+      flex: 0 0 230px;
+      width: 230px;
+      // position: absolute;
+      // top: 0px;
+      // bottom: 0px;
+      .el-menu {
+        height: 100%;
+      }
+      .collapsed {
+        width: 60px;
+        .item {
+          position: relative;
+        }
+        .submenu {
+          position: absolute;
+          top: 0px;
+          left: 60px;
+          z-index: 99999;
+          height: auto;
+          display: none;
+        }
+      }
+    }
+    .menu-collapsed {
+      flex: 0 0 60px;
+      width: 60px;
+    }
+    .menu-expanded {
+      flex: 0 0 230px;
+      width: 230px;
+    }
+    .content-container {
+      // background: #f8f8f8;
+      //f1f2f7
+      flex: 1;
+      width: 80%;
+      // position: absolute;
+      // right: 0px;
+      // top: 0px;
+      // bottom: 0px;
+      // left: 230px;
+      // overflow-y: scroll;
+      padding: 20px;
+      .breadcrumb-container {
+        //margin-bottom: 15px;
+        .title {
+          width: 200px;
+          float: left;
+          color: #475669;
+        }
+        .breadcrumb-inner {
+          float: right;
+        }
+      }
+      .content-wrapper {
+        background-color: #fff;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
 
-	.container {
-		position: absolute;
-		top: 0px;
-		bottom: 0px;
-		width: 100%;
-		.header {
-			height: 60px;
-			line-height: 60px;
-			background: $color-primary;
-			color:#fff;
-			.userinfo {
-				text-align: right;
-				padding-right: 35px;
-				float: right;
-				.userinfo-inner {
-					cursor: pointer;
-					color:#fff;
-					img {
-						width: 40px;
-						height: 40px;
-						border-radius: 20px;
-						margin: 10px 10px 10px 10px;
-						// float: right;
-                        float: left;
-					}
-				}
-			}
-			.logo {
-				//width:230px;
-				height:60px;
-				font-size: 21px;
-				padding-left:20px;
-				padding-right:20px;
-				border-color: rgba(238,241,146,0.3);
-				border-right-width: 1px;
-				border-right-style: solid;
-				img {
-					width: 40px;
-					float: left;
-					margin: 10px 10px 10px 18px;
-				}
-				.txt {
-					color:#fff;
-				}
-			}
-			.logo-width{
-				width:230px;
-			}
-			.logo-collapse-width{
-				width:60px
-			}
-			.tools{
-				padding: 0px 23px;
-				width:14px;
-				height: 60px;
-				line-height: 60px;
-				cursor: pointer;
-			}
-		}
-		.main {
-			display: flex;
-			// background: #324057;
-			position: absolute;
-			top: 60px;
-			bottom: 0px;
-			overflow: hidden;
-			aside {
-				flex:0 0 230px;
-				width: 230px;
-				// position: absolute;
-				// top: 0px;
-				// bottom: 0px;
-				.el-menu{
-					height: 100%;
-				}
-				.collapsed{
-					width:60px;
-					.item{
-						position: relative;
-					}
-					.submenu{
-						position:absolute;
-						top:0px;
-						left:60px;
-						z-index:99999;
-						height:auto;
-						display:none;
-					}
-
-				}
-			}
-			.menu-collapsed{
-				flex:0 0 60px;
-				width: 60px;
-			}
-			.menu-expanded{
-				flex:0 0 230px;
-				width: 230px;
-			}
-			.content-container {
-				// background: #f8f8f8;
-                //f1f2f7
-				flex:1;
-                width: 80%;
-				// position: absolute;
-				// right: 0px;
-				// top: 0px;
-				// bottom: 0px;
-				// left: 230px;
-				// overflow-y: scroll;
-				padding: 20px;
-				.breadcrumb-container {
-					//margin-bottom: 15px;
-					.title {
-						width: 200px;
-						float: left;
-						color: #475669;
-					}
-					.breadcrumb-inner {
-						float: right;
-					}
-				}
-				.content-wrapper {
-					background-color: #fff;
-					box-sizing: border-box;
-				}
-			}
-		}
-	}
+.popover-main {
+  font-weight: 700;
+  padding-bottom: 12px;
+  border-bottom: 1px grey solid;
+}
+.popover-title {
+  color: blue;
+}
+.popover-type {
+  color: black;
+  float: right;
+}
+.popover-item {
+  border-bottom: 1px grey solid;
+}
+.popover-button {
+  font-weight: 700;
+  padding-top: 12px;
+  text-align: center;
+}
 </style>