| | |
| | | |
| | | .title { |
| | | width: 100%; |
| | | height: 58px; |
| | | height: 48px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 30px; |
| | | padding: 0 24px; |
| | | } |
| | | |
| | | .logo { |
| | | width: 130px; |
| | | width: 118px; |
| | | height: 40px; |
| | | } |
| | | |
| | | .logo img { |
| | |
| | | } |
| | | |
| | | .title .label { |
| | | font-size: 16px; |
| | | font-size: 14px; |
| | | text-align: center; |
| | | width: calc(100% - 130px - 200px); |
| | | } |
| | |
| | | .user span { |
| | | font-size: 14px; |
| | | } |
| | | .el-dropdown{ |
| | | display: flex; |
| | | align-items: center; |
| | | color: #000; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .left { |
| | | height: calc(100vh - 58px - 40px); |
| | | height: calc(100vh - 48px - 40px); |
| | | background-color: #3A7BFA; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | color: #fff; |
| | | width: 68px; |
| | | height: 68px; |
| | | margin: 12px 0; |
| | | margin: 8px 0; |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | |
| | | .left .box i { |
| | | font-size: 28px; |
| | | font-size: 24px; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .left .box div { |
| | | font-size: 14px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .small_menu { |
| | |
| | | color: #3A7BFA; |
| | | } |
| | | |
| | | .small_menu p { |
| | | padding: 12px 15px; |
| | | .small_menu .p { |
| | | padding: 6px 10px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .small_menu p:hover { |
| | | background-color: rgba(0, 0, 0, 0.05); |
| | | .small_menu .p:hover { |
| | | color: #3A7BFA; |
| | | } |
| | | |
| | | .small_menu i { |
| | |
| | | } |
| | | |
| | | .small_menu span { |
| | | font-size: 14px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .right { |
| | | height: calc(100vh - 58px); |
| | | height: calc(100vh - 48px); |
| | | transition: .3s; |
| | | } |
| | | |
| | | .tag { |
| | | width: 100%; |
| | | height: 36px; |
| | | height: 32px; |
| | | background: rgb(255, 255, 255); |
| | | opacity: 0.8; |
| | | box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); |
| | |
| | | } |
| | | |
| | | .tag>.el-icon-s-unfold, |
| | | .el-icon-s-fold, |
| | | .el-icon-delete { |
| | | font-size: 18px; |
| | | .el-icon-s-fold{ |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | margin: 0 8px; |
| | | } |
| | |
| | | align-items: center; |
| | | display: flex; |
| | | overflow-x: auto; |
| | | overflow-y: hidden; |
| | | } |
| | | |
| | | .tabs::-webkit-scrollbar { |
| | | height: 4px; |
| | | } |
| | | |
| | | .tab { |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | font-size: 12px; |
| | | margin: 0 8px; |
| | | line-height: 32px; |
| | | line-height: 28px; |
| | | transition: 0.3s; |
| | | border-top: 2px solid transparent; |
| | | border-bottom: 2px solid transparent; |
| | | user-select: none; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .tab:hover{ |
| | | |
| | | .tab:hover { |
| | | color: #3A7BFA; |
| | | } |
| | | |
| | |
| | | .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 - 94px); |
| | | width: calc(100% - 52px); |
| | | padding: 0 26px; |
| | | height: calc(100vh - 84px); |
| | | 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 { |
| | | list-style-type: none; |
| | | padding: 5px 0; |
| | | padding: 6px 0; |
| | | padding-left: 10px; |
| | | font-size: 0.9rem; |
| | | transition: .5s; |
| | | font-size: 12px; |
| | | transition: .3s; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .right_key_menu li i{ |
| | | margin-right: 20px; |
| | | |
| | | .right_key_menu li i { |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .right_key_menu li:hover { |
| | | background-color: #dedede; |
| | | background-color: #eeeeee; |
| | | } |
| | | |
| | | .group { |
| | | font-size: 12px; |
| | | color: #ed940d; |
| | | background-color: transparent !important; |
| | | 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 class="all" @click="closeRightKey"> |
| | | <div class="title"> |
| | | <div class="logo"> |
| | | <!-- <img src="../../static/img/logo 1.png" /> --> |
| | | <img src="../../static/img/logo1.png" /> |
| | | </div> |
| | | <div class="label">山东胜云数据管理系统</div> |
| | | <div class="label">LIMS实验室管理系统</div> |
| | | <div class="user"> |
| | | <el-avatar :size="26">{{ userName.substring(0, 1) }}</el-avatar> |
| | | <span>{{ userName }}</span> |
| | | <img src="../../static/img/退出.png" @click="out" /> |
| | | <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> |
| | | <div class="left" :style="`width: ${leftOpen?'92':'0'}px;`"> |
| | | <div v-for="(a, ai) in menu" :key="ai"> |
| | | <div :class="`box ${activeBox == a.c[0].k ? 'active_box' : ''}`" @click="addTab(a.c[0], -1)" v-if="a.self && getPower(a.c[0].p)"> |
| | | <div :class="`box ${activeBox == a.c[0].k ? 'active_box' : ''}`" @click="addTab(a.c[0], -1)" |
| | | v-if="a.self && getPower(a.c[0].p)"> |
| | | <i :class="a.i"></i> |
| | | <div>{{a.v}}</div> |
| | | </div> |
| | | <el-popover placement="right-start" width="90" 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>{{ a.v }}</div> |
| | | <div style="text-align: center;">{{ a.v }}</div> |
| | | </div> |
| | | <div class="small_menu"> |
| | | <p v-for="(b, bi) in a.c" :key="bi" :class="activeP == b.k ? 'active_p' : ''" @click="addTab(b, a.k)" v-if="getPower(b.p)"> |
| | | <i :class="b.i"></i> |
| | | <span>{{ b.v }}</span> |
| | | </p> |
| | | <div v-for="(b, bi) in a.c" :key="bi"> |
| | | <el-col v-if="groupMenu(b.g, a.c[bi - 1])" class="group">{{b.g}}</el-col> |
| | | <el-col :span="groupCount(b.g, a.c)" :class="activeP == b.k ? 'active_p p' : 'p'" |
| | | @click.native="addTab(b, a.k)" v-if="getPower(b.p)"> |
| | | <p :title="b.v" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> |
| | | <i :class="b.i"></i> |
| | | <span>{{ b.v }}</span> |
| | | </p> |
| | | </el-col> |
| | | </div> |
| | | </div> |
| | | </el-popover> |
| | | </div> |
| | |
| | | <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" :ref="`com-${com.k}`"> |
| | | <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="com.k" v-show="com.k == tabActive" |
| | | :ref="`com-${com.k}`"> |
| | | </component> |
| | | </div> |
| | | </div> |
| | | <!-- 右键菜单 --> |
| | | <div class="right_key_menu"> |
| | | <el-col :span="24"> |
| | | <el-card :body-style="{padding: '6px 0'}"> |
| | | <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> |
| | | |
| | |
| | | const componentConfig = requireComponent(fileName); |
| | | comObj[names] = componentConfig.default || componentConfig; |
| | | }); |
| | | 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", |
| | | leftOpen: true, |
| | | menu: [{ |
| | | k: 0, |
| | | v: "首页", |
| | | i: "font icon-shouyefill", |
| | | self: true, |
| | | c: [{ |
| | | k: 0, |
| | | v: "首页", |
| | | i: "font icon-shouyefill", |
| | | u: "index-index" |
| | | }] |
| | | }, |
| | | { |
| | | k: 2, |
| | | v: "数据上报", |
| | | i: "font icon-a-Group1118", |
| | | self: true, |
| | | c: [{ |
| | | k: 2, |
| | | v: "数据上报", |
| | | i: "font icon-a-Group1118", |
| | | u: "data-reporting", |
| | | p: "selectDataReportingList" |
| | | }] |
| | | }, |
| | | { |
| | | k: 3, |
| | | v: "数据统计", |
| | | i: "font icon-a-Group1120", |
| | | p: "selectProductCountDtoPageList selectRegistrantCountDtoPageList", |
| | | c: [{ |
| | | k: 9, |
| | | v: "项目数据统计", |
| | | i: "font icon-24gl-clipboardList", |
| | | u: "product-count", |
| | | p: "selectProductCountDtoPageList" |
| | | },{ |
| | | k: 10, |
| | | v: "员工数据统计", |
| | | i: "font icon-24gl-clipboardList", |
| | | u: "registrant-count", |
| | | p: "selectRegistrantCountDtoPageList" |
| | | },{ |
| | | k: 12, |
| | | v: "员工数据对比", |
| | | i: "font icon-24gl-clipboardList", |
| | | u: "data-comparison", |
| | | p: "selectDataComparisonDtoPageList" |
| | | }] |
| | | }, |
| | | { |
| | | k: 5, |
| | | v: "进粉上报", |
| | | i: "font icon-a-Group1122", |
| | | self: true, |
| | | c: [{ |
| | | k: 5, |
| | | v: "进粉上报", |
| | | i: "font icon-a-Group1122", |
| | | u: "fans-submit", |
| | | p: "selectFansSubmitList" |
| | | }] |
| | | }, |
| | | { |
| | | k: 6, |
| | | v: "财务上报", |
| | | i: "font icon-a-Group1236", |
| | | self: true, |
| | | c: [{ |
| | | k: 6, |
| | | v: "财务上报", |
| | | i: "font icon-a-Group1236", |
| | | u: "finance-submit", |
| | | p: "selectFinanceSubmitList" |
| | | }] |
| | | }, |
| | | { |
| | | k: 7, |
| | | v: "角色管理", |
| | | i: "font icon-a-Group1126", |
| | | self: true, |
| | | c: [{ |
| | | k: 7, |
| | | v: "角色管理", |
| | | i: "font icon-a-Group1126", |
| | | u: "role-manage", |
| | | p: "selectRoleLists" |
| | | }] |
| | | }, |
| | | { |
| | | k: 4, |
| | | v: "数据字典", |
| | | i: "font icon-odbc-full", |
| | | p: "selectCustomEnumLists selectProductEnumLists", |
| | | c: [{ |
| | | k: 4, |
| | | v: "客户管理", |
| | | i: "font icon-24gl-clipboardList", |
| | | u: "custom-enum", |
| | | p: "selectCustomEnumLists" |
| | | }, |
| | | { |
| | | k: 11, |
| | | v: "项目管理", |
| | | i: "font icon-24gl-clipboardList", |
| | | u: "product-enum", |
| | | p: "selectProductEnumLists" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | k: 8, |
| | | v: "人员管理", |
| | | i: "font icon-a-Group1124", |
| | | self: true, |
| | | c: [{ |
| | | k: 8, |
| | | v: "人员管理", |
| | | i: "font icon-a-Group1124", |
| | | u: "person-manage", |
| | | p: "selectUserList" |
| | | }] |
| | | } |
| | | ], |
| | | menu: [], |
| | | activeBox: 0, |
| | | activeP: 0, |
| | | tabActive: 0, |
| | | tabs: [{ |
| | | k: 0, |
| | | v: "首页", |
| | | i: "font icon-a-Group1124", |
| | | u: "index-index" |
| | | }], |
| | | tabs: [], |
| | | upIndex: 0, |
| | | activeIndex: 0, |
| | | power: [] |
| | | power: [], |
| | | editVisible:false, |
| | | query:{}, |
| | | newMsg:false, |
| | | timer:null, |
| | | menuId: 0 |
| | | }; |
| | | }, |
| | | created() {}, |
| | | created() { |
| | | this.menu = menus.menu |
| | | }, |
| | | 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" |
| | | 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' |
| | |
| | | }) |
| | | }, |
| | | // 刷新表格内容 |
| | | refreshTable(){ |
| | | refreshTable() { |
| | | var thing = this.tabs.splice(this.activeIndex, 1) |
| | | setTimeout(()=>{ |
| | | setTimeout(() => { |
| | | this.tabs.splice(this.activeIndex, 0, thing[0]) |
| | | }, 0) |
| | | }, |
| | | // 权限分配 |
| | | getPower(p){ |
| | | if(p==undefined) return true |
| | | getPower(p) { |
| | | if (p == undefined || p == '') return true |
| | | let str = p.split(' ') |
| | | for (var a = 0; a < str.length; a++) { |
| | | for (var i = 0; i < this.power.length; i++) { |
| | | if(this.power[i].menuMethod == str[a]) { |
| | | if (this.power[i].menuMethod == str[a]) { |
| | | return true |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | // 菜单栏分类判断 |
| | | groupMenu(g1, g2) { |
| | | if (g1 == undefined) return false |
| | | if (g2 == undefined) return true |
| | | if (g1 == g2.g) return false |
| | | return true |
| | | }, |
| | | // 相同分类的菜单数量是否大于4 |
| | | groupCount(g1, gs) { |
| | | if (g1 == undefined) return 24 |
| | | let count = 0 |
| | | 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> |
| | | </script> |