| | |
| | | } |
| | | |
| | | .logo { |
| | | width: 130px; |
| | | width: 118px; |
| | | height: 40px; |
| | | } |
| | | |
| | |
| | | .user span { |
| | | font-size: 14px; |
| | | } |
| | | .el-dropdown{ |
| | | display: flex; |
| | | align-items: center; |
| | | color: #000; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .left { |
| | | height: calc(100vh - 48px - 40px); |
| | |
| | | } |
| | | |
| | | .tag>.el-icon-s-unfold, |
| | | .el-icon-s-fold, |
| | | .el-icon-delete { |
| | | .el-icon-s-fold{ |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | margin: 0 8px; |
| | |
| | | .active_tab i { |
| | | display: inline; |
| | | color: #3A7BFA; |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | .active_tab i:hover{ |
| | | background-color: rgba(0, 0, 0, 0.08); |
| | | } |
| | | |
| | | .component_view { |
| | | height: calc(100vh - 84px); |
| | | width: calc(100% - 52px); |
| | | padding: 0 26px; |
| | | width: calc(100% - 40px); |
| | | padding: 0 20px; |
| | | background: rgb(245, 247, 251); |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .right_key_menu { |
| | | width: 120px; |
| | | width: 130px; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | display: none; |
| | | z-index: 999; |
| | | z-index: 9998; |
| | | padding: 0; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .right_key_menu li i { |
| | | margin-right: 14px; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .right_key_menu li:hover { |
| | |
| | | cursor: auto !important; |
| | | margin: 8px 12px; |
| | | } |
| | | |
| | | .search_thing { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 50px; |
| | | } |
| | | |
| | | .search_label { |
| | | width: 90px; |
| | | font-size: 14px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .search_input { |
| | | width: calc(100% - 120px); |
| | | } |
| | | </style> |
| | | <style></style> |
| | | <template> |
| | |
| | | </div> |
| | | <div class="label">LIMS实验室管理系统</div> |
| | | <div class="user"> |
| | | <el-avatar :size="26">{{ userName.substring(0, 1) }}</el-avatar> |
| | | <span>{{ userName }}</span> |
| | | <el-badge :is-dot="newMsg" style="cursor: pointer;margin-right: 10px;"> |
| | | <i class="el-icon-bell" style="font-size: 20px;" @click="openNotice"></i> |
| | | </el-badge> |
| | | <el-dropdown trigger="click" @command="handleCommand"> |
| | | <el-avatar :size="26">{{ userName.substring(0, 1) }}</el-avatar> |
| | | <span>{{ userName }}</span> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item>修改密码</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | <img src="../../static/img/退出.png" @click="out" title="退出账号" /> |
| | | </div> |
| | | </div> |
| | |
| | | <i :class="a.i"></i> |
| | | <div>{{a.v}}</div> |
| | | </div> |
| | | <el-popover placement="right-start" trigger="click" v-if="a.self != true && getPower(a.p)"> |
| | | <el-popover ref="popoverName" placement="right-start" trigger="click" v-if="a.self != true && getPower(a.p)"> |
| | | <div :class="`box ${activeBox == a.k ? 'active_box' : ''}`" slot="reference"> |
| | | <i :class="a.i"></i> |
| | | <div style="text-align: center;">{{ a.v }}</div> |
| | |
| | | </div> |
| | | </div> |
| | | </el-popover> |
| | | </el-popover> |
| | | </div> |
| | | </div> |
| | | <div class="right" :style="`width: calc(100% - ${leftOpen?'92':'0'}px);`"> |
| | |
| | | <i class="el-icon-close" @click="removeTab(ai)" v-if="tabActive!=0"></i> |
| | | </div> |
| | | </div> |
| | | <i class="el-icon-delete" @click="allDel" title="删除所有标签页"></i> |
| | | </div> |
| | | <div class="component_view"> |
| | | <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="com.k" v-show="com.k == tabActive" |
| | |
| | | <el-col :span="24"> |
| | | <el-card :body-style="{padding: '6px'}"> |
| | | <ul> |
| | | <li style="color: red;" @click="removeTab(activeIndex)"><i class="el-icon-close"></i>关闭</li> |
| | | <li @click="removeTab(activeIndex)" v-show="menuId!=0"><i class="el-icon-close"></i>关闭</li> |
| | | <li @click="allDel"><i class="el-icon-delete"></i>关闭所有</li> |
| | | <li @click="rightDel(activeIndex)"><i class="el-icon-d-arrow-right"></i>关闭右侧页签</li> |
| | | <el-divider></el-divider> |
| | | <li @click="refreshTable"><i class="el-icon-refresh"></i>刷新</li> |
| | | </ul> |
| | | </el-card> |
| | | </el-col> |
| | | </div> |
| | | <!-- 修改密码 --> |
| | | <el-dialog |
| | | title="修改密码" |
| | | :visible.sync="editVisible" |
| | | width="400px" |
| | | :before-close="handleClose"> |
| | | <el-row> |
| | | <el-col class="search_thing" :span="24"> |
| | | <div class="search_label"><span class="required-span">* </span>旧密码:</div> |
| | | <div class="search_input"> |
| | | <el-input v-model="query.oldPassword" size="small" clearable show-password></el-input> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col class="search_thing" :span="24"> |
| | | <div class="search_label"><span class="required-span">* </span>新密码:</div> |
| | | <div class="search_input"> |
| | | <el-input v-model="query.newPassWord" size="small" clearable show-password></el-input> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="handleClose">取 消</el-button> |
| | | <el-button type="primary" @click="handleEdit">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <notice ref="notice" @goNoticeDetail="checkForUnreadData()" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | }); |
| | | import menus from '../../static/js/menu.js' |
| | | import nullFace from '../view/404.vue' |
| | | import notice from './notice.vue' |
| | | comObj['nullFace'] = nullFace |
| | | export default { |
| | | components: comObj, |
| | | components: {...comObj,notice}, |
| | | data() { |
| | | return { |
| | | userName: "value", |
| | |
| | | activeBox: 0, |
| | | activeP: 0, |
| | | tabActive: 0, |
| | | tabs: [{ |
| | | k: 0, |
| | | v: "个人首页", |
| | | i: "font icon-a-Group1124", |
| | | u: "nullFace" |
| | | }], |
| | | tabs: [], |
| | | upIndex: 0, |
| | | activeIndex: 0, |
| | | power: [] |
| | | power: [], |
| | | editVisible:false, |
| | | query:{}, |
| | | newMsg:false, |
| | | timer:null, |
| | | menuId: 0 |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | mounted() { |
| | | this.userName = JSON.parse(localStorage.getItem("user")).name; |
| | | this.power = JSON.parse(sessionStorage.getItem('power')) |
| | | this.tabs = JSON.parse(localStorage.getItem('tabs')) |
| | | if (this.tabs == undefined || this.tabs == null) { |
| | | this.tabs = [{ |
| | | k: 0, |
| | | v: "个人首页", |
| | | i: "font icon-a-Group1124", |
| | | u: "index-index" |
| | | }] |
| | | } |
| | | this.tabActive = JSON.parse(localStorage.getItem('tabActive')) |
| | | if (this.tabActive == undefined || this.tabActive == null) { |
| | | this.tabActive = 0 |
| | | } |
| | | this.activeP = JSON.parse(localStorage.getItem('activeP')) |
| | | if (this.activeP == undefined || this.activeP == null) { |
| | | this.activeP = 0 |
| | | } |
| | | this.activeBox = JSON.parse(localStorage.getItem('activeBox')) |
| | | if (this.activeBox == undefined || this.activeBox == null) { |
| | | this.activeBox = 0 |
| | | } |
| | | this.getPower() |
| | | this.timer&&clearInterval(this.timer); |
| | | this.checkForUnreadData() |
| | | this.timer = setInterval(()=>{ |
| | | this.checkForUnreadData() |
| | | },30000) |
| | | }, |
| | | methods: { |
| | | saveClick(){ |
| | | localStorage.setItem('tabs', JSON.stringify(this.tabs)) |
| | | localStorage.setItem('tabActive', JSON.stringify(this.tabActive)) |
| | | localStorage.setItem('activeP', JSON.stringify(this.activeP)) |
| | | localStorage.setItem('activeBox', JSON.stringify(this.activeBox)) |
| | | }, |
| | | addTab(ob, self) { |
| | | this.activeBox = self == -1 ? ob.k : self |
| | | this.activeP = ob.k; //0 |
| | |
| | | } |
| | | }); |
| | | if (num == -1) { |
| | | if(ob.u == "") ob.u = "nullFace" |
| | | if (ob.u == "") ob.u = "nullFace" |
| | | this.tabs.push(ob); |
| | | } |
| | | this.$refs['popoverName'].forEach(a=>{ |
| | | a.doClose() |
| | | }) |
| | | this.saveClick() |
| | | }, |
| | | removeTab(index) { |
| | | this.tabs.splice(index, 1); |
| | | let data = this.tabs[this.tabs.length - 1] |
| | | this.activeP = data.k; |
| | | this.tabActive = data.k; |
| | | this.activeBox = data.k |
| | | this.upTabActive(data.k) |
| | | }, |
| | | rightDel(index){ |
| | | for (var i = this.tabs.length - 1; i > index; i--) { |
| | | this.tabs.splice(i, 1); |
| | | } |
| | | let data = this.tabs[this.tabs.length - 1] |
| | | this.upTabActive(data.k) |
| | | }, |
| | | allDel() { |
| | | this.activeBox = 0 |
| | |
| | | this.tabActive = 0 |
| | | this.tabs = [{ |
| | | k: 0, |
| | | v: " 首页", |
| | | v: "个人首页", |
| | | i: "font icon-a-Group1124", |
| | | u: "index-index" |
| | | }] |
| | | this.saveClick() |
| | | }, |
| | | upTabActive(num) { |
| | | this.tabActive = num; |
| | |
| | | } |
| | | }) |
| | | } |
| | | this.saveClick() |
| | | }, |
| | | out() { |
| | | sessionStorage.clear(); |
| | | localStorage.removeItem("autoenter"); |
| | | localStorage.removeItem("tabs") |
| | | localStorage.removeItem("tabActive") |
| | | localStorage.removeItem("activeP") |
| | | localStorage.removeItem("activeBox") |
| | | this.$router.push("/enter"); |
| | | }, |
| | | // 关闭右键菜单 |
| | |
| | | }, |
| | | // 右键菜单 |
| | | rightKeyMenu(id, e) { |
| | | if (id == 0) return |
| | | // if (id == 0) return |
| | | this.menuId = id |
| | | this.activeIndex = id |
| | | var x = e.clientX + 'px' |
| | | var y = e.clientY + 'px' |
| | |
| | | groupCount(g1, gs) { |
| | | if (g1 == undefined) return 24 |
| | | let count = 0 |
| | | gs.forEach(a=>{ |
| | | if(a.g == g1) count++ |
| | | gs.forEach(a => { |
| | | if (a.g == g1) count++ |
| | | }) |
| | | if (count > 4) return 8 |
| | | if (count > 1) return 12 |
| | | if (count == 1) return 24 |
| | | } |
| | | } |
| | | }, |
| | | // 修改密码-打开弹窗 |
| | | handleCommand(e){ |
| | | this.editVisible = true; |
| | | }, |
| | | handleEdit(){ |
| | | if (!this.query.oldPassword) { |
| | | this.$message.error('请填写旧密码') |
| | | return |
| | | } |
| | | if (!this.query.newPassWord) { |
| | | this.$message.error('请填写旧密码') |
| | | return |
| | | } |
| | | this.$axios.post(this.$api.user.upUserPassword, {...this.query}).then(res => { |
| | | if (res.code == 201) { |
| | | this.$message.error('修改失败') |
| | | return |
| | | } |
| | | this.$message.success('修改成功') |
| | | this.editVisible = false |
| | | this.query = {} |
| | | this.out(); |
| | | }) |
| | | }, |
| | | handleClose(){ |
| | | this.editVisible = false |
| | | this.query = {} |
| | | }, |
| | | openNotice(){ |
| | | this.$refs.notice.open() |
| | | this.$refs.notice.handleType() |
| | | }, |
| | | checkForUnreadData(){ |
| | | this.$axios.get(this.$api.informationNotification.checkForUnreadData).then(res => { |
| | | if (res.code == 201) { |
| | | return |
| | | } |
| | | this.newMsg = res.data |
| | | }) |
| | | } |
| | | }, |
| | | destroyed() { |
| | | this.timer&&clearInterval(this.timer); |
| | | } |
| | | }; |
| | | </script> |