From 256ca05f1e4b5937e51cef436504bccf4240c151 Mon Sep 17 00:00:00 2001
From: gaoluyang <gaoluyang@rengu.cc>
Date: 星期三, 24 七月 2024 16:18:24 +0800
Subject: [PATCH] 检测中心-班次时间配置功能
---
src/view/index.vue | 531 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 370 insertions(+), 161 deletions(-)
diff --git a/src/view/index.vue b/src/view/index.vue
index 4ba58ec..38dc5a4 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -9,14 +9,15 @@
.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 {
@@ -25,7 +26,7 @@
}
.title .label {
- font-size: 16px;
+ font-size: 14px;
text-align: center;
width: calc(100% - 130px - 200px);
}
@@ -52,9 +53,15 @@
.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;
@@ -62,13 +69,23 @@
padding: 20px 0;
transition: .3s;
overflow-y: auto;
+ user-select: none;
+ }
+
+ .left::-webkit-scrollbar {
+ width: 0px;
+ }
+
+ .left::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 3px;
}
.left .box {
color: #fff;
width: 68px;
height: 68px;
- margin: 12px 0;
+ margin: 8px 0;
cursor: pointer;
display: flex;
align-items: center;
@@ -87,12 +104,12 @@
}
.left .box i {
- font-size: 32px;
- margin-bottom: 8px;
+ font-size: 24px;
+ margin-bottom: 4px;
}
.left .box div {
- font-size: 14px;
+ font-size: 12px;
}
.small_menu {
@@ -103,13 +120,13 @@
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 {
@@ -117,17 +134,17 @@
}
.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);
@@ -151,9 +168,8 @@
}
.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;
}
@@ -164,18 +180,27 @@
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 {
+ color: #3A7BFA;
}
.tab i {
@@ -191,12 +216,17 @@
.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);
}
@@ -204,37 +234,103 @@
width: 100%;
height: 100%;
}
+
+ .right_key_menu {
+ width: 130px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
+ z-index: 9998;
+ padding: 0;
+ }
+
+ .right_key_menu li {
+ list-style-type: none;
+ padding: 6px 0;
+ padding-left: 10px;
+ font-size: 12px;
+ transition: .3s;
+ cursor: pointer;
+ }
+
+ .right_key_menu li i {
+ margin-right: 10px;
+ }
+
+ .right_key_menu li:hover {
+ 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">
+ <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">
+ <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">
+ <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)">
- <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>
@@ -244,19 +340,60 @@
<i :class="`${leftOpen?'el-icon-s-unfold':'el-icon-s-fold'}`" @click="leftOpen = !leftOpen"></i>
<div class="tabs">
<div :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`" v-for="(a, ai) in tabs" :key="ai"
- @click="upTabActive(a.k)">
+ @click="upTabActive(a.k)" @contextmenu.prevent="rightKeyMenu(ai, $event)">
{{ a.v }}
<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="upIndex + '|' + index"
- v-show="com.k == tabActive">
+ <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'}">
+ <ul>
+ <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>
@@ -271,132 +408,81 @@
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-shouye",
- self: true,
- c: [{
- k: 0,
- v: "棣栭〉",
- i: "font icon-shouye",
- u: "index-index"
- }]
- },
- {
- k: 2,
- v: "鏁版嵁涓婃姤",
- i: "font icon-shouye",
- self: true,
- c: [{
- k: 2,
- v: "鏁版嵁涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
- }]
- },
- {
- k: 3,
- v: "鏁版嵁缁熻",
- i: "font icon-shouye",
- self: true,
- c: [{
- k: 3,
- v: "鏁版嵁缁熻",
- i: "font icon-shouye",
- u: "index-index"
- }]
- },
- {
- k: 5,
- v: "杩涚矇涓婃姤",
- i: "font icon-shouye",
- self: true,
- c: [{
- k: 5,
- v: "杩涚矇涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
- }]
- },
- {
- k: 6,
- v: "璐㈠姟涓婃姤",
- i: "font icon-shouye",
- self: true,
- c: [{
- k: 6,
- v: "璐㈠姟涓婃姤",
- i: "font icon-shouye",
- u: "index-index"
- }]
- },
- {
- k: 7,
- v: "瑙掕壊绠＄悊",
- i: "font icon-shouye",
- self: true,
- c: [{
- k: 7,
- v: "瑙掕壊绠＄悊",
- i: "font icon-shouye",
- u: "index-index"
- }]
- },
- {
- k: 4,
- v: "鏁版嵁瀛楀吀",
- i: "font icon-shouye",
- c: [{
- k: 4,
- v: "瀹㈡埛绠＄悊",
- i: "font icon-shouye",
- u: ""
- },
- {
- k: 5,
- v: "鐥呯绠＄悊",
- i: "font icon-shouye",
- u: ""
- }
- ]
- },
- {
- k: 8,
- v: "浜哄憳绠＄悊",
- i: "font icon-shouye",
- self: true,
- c: [{
- k: 8,
- v: "浜哄憳绠＄悊",
- i: "font icon-shouye",
- u: "person-manage"
- }]
- }
- ],
+ menu: [],
activeBox: 0,
activeP: 0,
tabActive: 0,
- tabs: [{
- k: 0,
- v: "棣栭〉",
- i: "font icon-shouye",
- u: "index-index"
- }],
- upIndex: 0
+ tabs: [],
+ upIndex: 0,
+ activeIndex: 0,
+ power: [],
+ editVisible:false,
+ query:{},
+ newMsg:false,
+ timer:null,
+ menuId: 0
};
},
- created() {},
+ created() {
+ this.menu = menus.menu
+ if (this.PROJECT !== '瑁呭鐢电紗') { // 妫�娴嬩腑蹇冩殏鏃�'鍘熸潗鏂欐楠屼笅鍗�'鍔熻兘
+ const index = this.menu.findIndex(item => item.v === '涓氬姟绠＄悊')
+ if (index > -1) {
+ const index2 = this.menu[index].c.findIndex(obj => obj.v === '鍘熸潗鏂欐楠屼笅鍗�')
+ if (index2 > -1) {
+ this.menu[index].c.splice(index2, 1)
+ }
+ }
+ }
+ },
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
@@ -408,15 +494,25 @@
}
});
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
@@ -424,10 +520,11 @@
this.tabActive = 0
this.tabs = [{
k: 0,
- v: " 棣栭〉",
- i: "font icon-shouye",
+ v: "涓汉棣栭〉",
+ i: "font icon-a-Group1124",
u: "index-index"
}]
+ this.saveClick()
},
upTabActive(num) {
this.tabActive = num;
@@ -440,12 +537,124 @@
}
})
}
+ this.saveClick()
},
out() {
sessionStorage.clear();
localStorage.removeItem("autoenter");
+ localStorage.removeItem("tabs")
+ localStorage.removeItem("tabActive")
+ localStorage.removeItem("activeP")
+ localStorage.removeItem("activeBox")
this.$router.push("/enter");
- }
- }
+ },
+ // 鍏抽棴鍙抽敭鑿滃崟
+ closeRightKey() {
+ $('.right_key_menu').css({
+ 'display': 'none'
+ })
+ },
+ // 鍙抽敭鑿滃崟
+ rightKeyMenu(id, e) {
+ // if (id == 0) return
+ this.menuId = id
+ this.activeIndex = id
+ var x = e.clientX + 'px'
+ var y = e.clientY + 'px'
+ $('.right_key_menu').css({
+ 'top': y,
+ 'left': x,
+ 'display': 'block'
+ })
+ },
+ // 鍒锋柊琛ㄦ牸鍐呭
+ refreshTable() {
+ var thing = this.tabs.splice(this.activeIndex, 1)
+ setTimeout(() => {
+ this.tabs.splice(this.activeIndex, 0, thing[0])
+ }, 0)
+ },
+ // 鏉冮檺鍒嗛厤
+ 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]) {
+ 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(){
+ const reg2 =
+ /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[~!#@$%^*&()_+{}\[\]|\\;:'",<.>\/?])[a-zA-Z\d~!#@$%^*&()_+{}\[\]|\\;:'",<.>\/?]*$/;
+ if (!this.query.oldPassword) {
+ this.$message.error('璇峰～鍐欐棫瀵嗙爜')
+ return
+ }else if (!reg2.test(this.query.oldPassword)) {
+ this.$message.error('瀵嗙爜蹇呴』鍖呮嫭鏁板瓧銆佸ぇ灏忓啓瀛楁瘝浠ュ強鐗规畩瀛楃')
+ return
+ }
+ if (!this.query.newPassWord) {
+ this.$message.error('璇峰～鍐欐棫瀵嗙爜')
+ return
+ }else if (!reg2.test(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>
\ No newline at end of file
+</script>
--
Gitblit v1.9.3