From c0bc2331e9abb2ae003c8dc0ab4524d6101493a1 Mon Sep 17 00:00:00 2001 From: 王震 <10952869+daywangzhen@user.noreply.gitee.com> Date: 星期一, 25 九月 2023 09:12:51 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/view/index.vue | 973 ++++++++++++++++++++++++++++++++------------------------ 1 files changed, 549 insertions(+), 424 deletions(-) diff --git a/src/view/index.vue b/src/view/index.vue index 3d5a9e8..87a1449 100644 --- a/src/view/index.vue +++ b/src/view/index.vue @@ -1,461 +1,586 @@ <style scoped> -.all { - width: 100vw; - height: 100vh; - background-size: 100% 100%; - display: flex; - flex-wrap: wrap; -} + .all { + width: 100vw; + height: 100vh; + background-size: 100% 100%; + display: flex; + flex-wrap: wrap; + } -.title { - width: 100%; - height: 58px; - display: flex; - align-items: center; - padding: 0 30px; -} + .title { + width: 100%; + height: 58px; + display: flex; + align-items: center; + padding: 0 30px; + } -.logo { - width: 130px; -} + .logo { + width: 130px; + } -.logo img { - width: 100%; - height: 100%; -} + .logo img { + width: 100%; + height: 100%; + } -.title .label { - font-size: 18px; - text-align: center; - width: calc(100% - 130px - 200px); -} + .title .label { + font-size: 18px; + text-align: center; + width: calc(100% - 130px - 200px); + } -.user { - width: 200px; - height: 100%; - display: flex; - align-items: center; - justify-content: right; - color: #000; -} + .user { + width: 200px; + height: 100%; + display: flex; + align-items: center; + justify-content: right; + color: #000; + } -.user * { - margin: 0 5px; -} + .user * { + margin: 0 5px; + } -.user img { - margin-left: 20px; - cursor: pointer; - width: 14px; -} + .user img { + margin-left: 20px; + cursor: pointer; + width: 14px; + } -.user span { - font-size: 14px; -} + .user span { + font-size: 14px; + } -.left { - width: 92px; - height: calc(100vh - 58px - 40px); - background-color: #004ea2; - display: flex; - align-items: center; - flex-direction: column; - padding: 20px 0; -} + .left { + height: calc(100vh - 58px - 40px); + background-color: #004ea2; + display: flex; + align-items: center; + flex-direction: column; + padding: 20px 0; + transition: 0.3s; + overflow-y: auto; + } -.left .box { - color: #fff; - width: 68px; - height: 68px; - margin: 20px 0; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - border-radius: 8px; -} + .left::-webkit-scrollbar { + width: 0; + } -.left .box:active { - opacity: 0.8; -} + .left .box { + color: #fff; + width: 68px; + height: 68px; + margin: 8px 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border-radius: 8px; + } -.left .active_box { - background-color: #fff; - color: #004ea2; -} + .left .box:active { + opacity: 0.8; + } -.left .box i { - font-size: 32px; - margin-bottom: 8px; -} + .left .active_box { + background-color: #fff; + color: #004ea2; + } -.left .box div { - font-size: 14px; -} + .left .box i { + font-size: 24px; + margin-bottom: 8px; + } -.small_menu { - color: #666; -} + .left .box div { + font-size: 14px; + } -.small_menu .active_p { - color: #004ea2; -} + .small_menu { + color: #666; + } -.small_menu p { - padding: 12px 15px; - cursor: pointer; -} + .small_menu .active_p { + color: #004ea2; + } -.small_menu p:hover { - background-color: rgba(0, 0, 0, 0.05); -} + .small_menu p { + padding: 12px 15px; + cursor: pointer; + } -.small_menu i { - font-size: 16px; -} + .small_menu p:hover { + background-color: rgba(0, 0, 0, 0.05); + } -.small_menu span { - font-size: 14px; -} + .small_menu i { + font-size: 16px; + } -.right { - width: calc(100% - 92px); - height: calc(100vh - 58px); -} + .small_menu span { + font-size: 14px; + } -.tag { - width: 100%; - height: 36px; - background: rgb(255, 255, 255); - opacity: 0.8; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); - display: flex; - align-items: center; - color: #999; - font-size: 14px; -} + .right { + height: calc(100vh - 58px); + transition: 0.3s; + } -.tag .el-icon-s-unfold { - font-size: 18px; - cursor: pointer; - margin: 0 8px; -} + .tag { + width: 100%; + height: 36px; + background: rgb(255, 255, 255); + opacity: 0.8; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + color: #999; + font-size: 14px; + } -.tabs { - min-width: calc(100% - 34px); - height: 100%; - align-items: center; - display: flex; - overflow-x: auto; -} + .tag .el-icon-delete { + display: none; + } -.tab { - cursor: pointer; - font-size: 14px; - margin: 0 8px; - line-height: 32px; - transition: 0.3s; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; - user-select: none; - flex-shrink: 0; -} + .tag .el-icon-delete:hover { + color: #F56C6C; + } -.tab i { - font-size: 12px; - display: none; -} + .tag:hover .el-icon-delete { + display: block; + } -.active_tab { - border-bottom: 2px solid #004ea2; - color: #004ea2; -} + .tag>.el-icon-s-unfold, + .el-icon-s-fold, + .el-icon-delete { + font-size: 18px; + cursor: pointer; + margin: 0 8px; + } -.active_tab i { - display: inline; - color: #004ea2; -} + .tabs { + min-width: calc(100% - 68px); + height: 100%; + align-items: center; + display: flex; + overflow-x: auto; + } -.component_view { - height: calc(100vh - 94px - 22px); - width: calc(100% - 48px); - padding: 11px 24px; - background: rgb(245, 247, 251); -} + .tab { + cursor: pointer; + font-size: 14px; + margin: 0 8px; + line-height: 32px; + transition: 0.3s; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; + user-select: none; + flex-shrink: 0; + } -.com_index { - width: 100%; - height: 100%; -} + .tab i { + font-size: 12px; + display: none; + } + + .active_tab { + border-bottom: 2px solid #004ea2; + color: #004ea2; + } + + .active_tab i { + display: inline; + color: #004ea2; + } + + .component_view { + height: calc(100vh - 94px - 22px); + width: calc(100% - 48px); + padding: 11px 24px; + background: rgb(245, 247, 251); + overflow-y: auto; + } + + .com_index { + width: 100%; + height: 100%; + } </style> -<style></style> <template> - <div class="all"> - <div class="title"> - <div class="logo"> - <img src="../../static/img/logo 1.png" /> - </div> - <div class="label">鐢电紗闄勪欢鏂颁竴浠om绯荤粺</div> - <div class="user"> - <el-avatar :size="24">{{ userName.substring(0, 1) }}</el-avatar> - <span>{{ userName }}</span> - <img src="../../static/img/閫�鍑�.png" @click="out" /> - </div> - </div> - <div class="left"> - <div - :class="`box ${activeBox == 0 ? 'active_box' : ''}`" - @click="addTab(menu[0].c[0])" - > - <i class="font icon-shouye"></i> - <div>棣栭〉</div> - </div> - <div - :class="`box ${activeBox == 3 ? 'active_box' : ''}`" - @click="addTab(menu[1].c[0])" - > - <i class="font icon-jine"></i> - <div>閿�鍞鐞�</div> - </div> - <el-popover - placement="right-start" - width="90" - trigger="click" - v-for="(a, ai) in menu" - :key="ai" - v-if="a.k != '0' && a.k != '3'" - > - <div - :class="`box ${activeBox == a.k ? 'active_box' : ''}`" - @click="activeBox = a.k" - slot="reference" - > - <i :class="a.i"></i> - <div>{{ 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)" - > - <i :class="b.i"></i> - <span>{{ b.v }}</span> - </p> - </div> - </el-popover> - </div> - <div class="right"> - <div class="tag"> - <i class="el-icon-s-unfold"></i> - <div class="tabs"> - <div - :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`" - v-for="(a, ai) in tabs" - :key="ai" - @click="upTabActive(a.k)" - > - {{ a.v }} - <i class="el-icon-close" @click="removeTab(ai)"></i> - </div> - </div> - </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> - </div> - </div> - </div> + <div class="all"> + <div class="title"> + <div class="logo"> + <img src="../../static/img/logo 1.png" /> + </div> + <div class="label">涓ぉ娴锋磱鏂颁竴浠om绯荤粺</div> + <div class="user"> + <el-avatar :size="24">{{ userName.substring(0, 1) }}</el-avatar> + <span>{{ userName }}</span> + <img src="../../static/img/閫�鍑�.png" @click="out" /> + </div> + </div> + <div class="left" :style="`width: ${leftOpen ? '92' : '0'}px;`"> + <div :class="`box ${activeBox == 0 ? 'active_box' : ''}`" @click="addTab(menu[0].c[0])"> + <i class="font icon-shouye"></i> + <div>棣栭〉</div> + </div> + <div :class="`box ${activeBox == 3 ? 'active_box' : ''}`" @click="addTab(menu[1].c[0])"> + <i class="font icon-jine"></i> + <div>閿�鍞鐞�</div> + </div> + <el-popover placement="right-start" width="90" trigger="click" v-for="(a, ai) in menu" :key="ai" + v-if="a.k != '0' && a.k != '3'"> + <div :class="`box ${activeBox == a.k ? 'active_box' : ''}`" @click="activeBox = a.k" slot="reference"> + <i :class="a.i"></i> + <div>{{ 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)"> + <i :class="b.i"></i> + <span>{{ b.v }}</span> + </p> + </div> + </el-popover> + </div> + <div class="right" :style="`width: calc(100% - ${leftOpen ? '92' : '0'}px);`"> + <div class="tag"> + <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)"> + {{ 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" @removeAllTab="removeAllTab"> + </component> + </div> + </div> + </div> </template> <script> -const requireComponent = require.context("../components/view", false, /\.vue/); -var comObj = {}; -requireComponent.keys().forEach(fileName => { - var names = fileName - .split("/") - .pop() - .replace(".vue", ""); - const componentConfig = requireComponent(fileName); - comObj[names] = componentConfig.default || componentConfig; -}); -export default { - components: comObj, - data() { - return { - userName: "value", - menu: [ - { - k: 0, - v: "棣栭〉", - i: "font icon-shouye", - c: [ - { - k: 0, - v: "棣栭〉", - i: "font icon-shouye", - u: "index-index" - } - ] - }, - { - k: 3, - v: "閿�鍞鐞�", - i: "font icon-jine", - c: [ - { - k: 11, - v: "閿�鍞鐞�", - i: "font icon-jine", - u: "sale" - } - ] - }, - { - k: 1, - v: "鎶�鏈鐞�", - i: "font icon-shouye", - c: [ - { - k: 1, - v: "鏍囧噯BOM", - i: "font icon-shouye", - u: "standard" - }, - { - k: 2, - v: "鎶�鏈枃浠�", - i: "font icon-shouye", - u: "technical" - } - ] - }, - { - k: 2, - v: "QMS绠$悊", - i: "font icon-shouye", - c: [ - { - k: 3, - v: "鍘熸潗鏂欐楠�", - i: "font icon-shouye", - u: "rawInsBox" - }, - { - k: 4, - v: "鍘熸潗鏂欎笉鍚堟牸鍝�", - i: "font icon-shouye", - u: "rawUnqualifiedBox" - }, - { - k: 5, - v: "杩囩▼妫�楠�", - i: "font icon-shouye", - u: "processInspection" - }, - { - k: 6, - v: "鎴愬搧妫�楠�", - i: "font icon-shouye", - u: "finishedProductInspection" - }, - { - k: 7, - v: "涓嶅悎鏍煎搧绠$悊", - i: "font icon-shouye", - u: "unqualifiedManagement" - }, - { - k: 8, - v: "瀹為獙瀹ょ鐞�", - i: "font icon-shouye", - u: "laboratoryManagement" - }, - { - k: 9, - v: "璐ㄩ噺缁熻", - i: "font icon-shouye", - u: "" - }, - { - k: 10, - v: "璁¢噺绠$悊", - i: "font icon-shouye", - u: "measurementManagement" - } - ] - } - ], - activeBox: 0, - activeP: 0, - tabActive: 0, - tabs: [ - { - k: 0, - v: "棣栭〉", - i: "font icon-shouye", - u: "index-index" - } - ], - upIndex: 0 - }; - }, - created() {}, - mounted() { - this.userName = JSON.parse(localStorage.getItem("user")).name; - }, - methods: { - addTab(ob) { - if (ob.k == 0) this.activeBox = 0; - if (ob.k == 11) this.activeBox = 3; - this.activeP = ob.k; //0 - this.tabActive = ob.k; //0 - let num = -1; - this.tabs.forEach((a, ai) => { - if (ob.k == a.k) { - num = a.k; - } - }); - // 濡傛灉娌℃湁閬嶅巻鍒皌abs閲屾病鏈夎ob瀵瑰簲鐨則able锛屽線tabs閲岄潰鍔犲叆璇b - if (num == -1) { - this.tabs.push(ob); - } - }, - removeTab(index) { - if (this.tabs.length > 1) { - this.tabs.splice(index, 1); - this.activeP = this.tabs[this.tabs.length - 1].k; - this.tabActive = this.tabs[this.tabs.length - 1].k; - } else { - this.$message.warning("涓嶈兘鍏抽棴鏈�鍚庣殑鏍囩"); - } - }, - upTabActive(num) { - this.tabActive = num; - this.activeP = num; - if (num == 0) { - this.activeBox = 0; - } else if (num > 0 && num <= 2) { - this.activeBox = 1; - } else if (num > 2 && num <= 10) { - this.activeBox = 2; - } else if (num == 11) { - this.activeBox = 3; - } - }, - out() { - sessionStorage.clear(); - localStorage.removeItem("autoenter"); - this.$router.push("/enter"); - } - } -}; + const requireComponent = require.context("../components/view", false, /\.vue/); + var comObj = {}; + requireComponent.keys().forEach(fileName => { + var names = fileName + .split("/") + .pop() + .replace(".vue", ""); + const componentConfig = requireComponent(fileName); + comObj[names] = componentConfig.default || componentConfig; + }); + export default { + components: comObj, + data() { + return { + userName: "value", + leftOpen: true, + menu: [{ + k: 0, + v: "棣栭〉", + i: "font icon-shouye", + c: [{ + k: 0, + v: "棣栭〉", + i: "font icon-shouye", + u: "index-index" + }] + }, + { + k: 3, + v: "閿�鍞鐞�", + i: "font icon-jine", + c: [{ + k: 11, + v: "閿�鍞鐞�", + i: "font icon-jine", + u: "sale" + }] + }, + { + k: 1, + v: "鎶�鏈鐞�", + i: "font icon-ic_form_set24px", + c: [{ + k: 1, + v: "鏍囧噯BOM", + i: "font icon-shouye", + u: "standard" + }, + { + k: 2, + v: "璁㈠崟BOM", + i: "font icon-shouye", + u: "technical" + } + ] + }, + { + k: 4, + v: "鐢熶骇绠$悊", + i: "font icon-shengchanguanli", + c: [{ + k: 12, + v: "鐢熶骇璁㈠崟", + i: "font icon-shouye", + u: "" + }, + { + k: 13, + v: "鐢熶骇璁″垝", + i: "font icon-shouye", + u: "" + }, + { + k: 14, + v: "鐢熶骇鎶ュ伐", + i: "font icon-shouye", + u: "" + } + ] + }, + { + k: 5, + v: "WMS绠$悊", + i: "font icon-a-Inventorydumprequest", + c: [{ + k: 15, + v: "鍘熸潗鏂欏簱瀛�", + i: "font icon-shouye", + u: "" + }, + { + k: 16, + v: "鍥炲崟绠$悊", + i: "font icon-shouye", + u: "" + }, + { + k: 17, + v: "鍗婃垚鍝佸簱瀛�", + i: "font icon-shouye", + u: "" + }, + { + k: 18, + v: "鎴愬搧搴撳瓨", + i: "font icon-shouye", + u: "" + }, + { + k: 19, + v: "鎴愬搧鍙戣揣", + i: "font icon-shouye", + u: "" + }, + { + k: 20, + v: "鎴愬搧鍏ュ簱", + i: "font icon-shouye", + u: "" + } + ] + }, + { + k: 2, + v: "QMS绠$悊", + i: "font icon-xunhuan", + c: [{ + k: 3, + v: "鍘熸潗鏂欐楠�", + i: "font icon-shouye", + u: "rawInsBox" + }, + { + k: 4, + v: "鍘熸潗鏂欎笉鍚堟牸鍝�", + i: "font icon-shouye", + u: "rawUnqualifiedBox" + }, + { + k: 5, + v: "杩囩▼妫�楠�", + i: "font icon-shouye", + u: "processInspection" + }, + { + k: 6, + v: "鎴愬搧妫�楠�", + i: "font icon-shouye", + u: "finishedProductInspection" + }, + { + k: 7, + v: "涓嶅悎鏍煎搧绠$悊", + i: "font icon-shouye", + u: "unqualifiedManagement" + }, + { + k: 9, + v: "璐ㄩ噺缁熻", + i: "font icon-shouye", + u: "" + }, + { + k: 10, + v: "璁¢噺绠$悊", + i: "font icon-shouye", + u: "measurementManagement" + }, + { + k: 10.1, + v: "涓嶅悎鏍煎搧澶勭疆", + i: "font icon-shouye", + u: "Processingproducts" + } + ] + }, + { + k: 6, + v: "鏍哥畻绠$悊", + i: "font icon-caiwuhesuanxitong", + c: [{ + k: 21, + v: "浜ч噺宸ヨ祫", + i: "font icon-shouye", + u: "" + }, + { + k: 22, + v: "鍛樺伐鍑哄嫟", + i: "font icon-shouye", + u: "" + } + ] + }, + { + k: 7, + v: "鍩虹鏁版嵁", + i: "font icon-a-ziyuan20", + c: [{ + k: 23, + v: "鐢熶骇璁板綍缁存姢", + i: "font icon-shouye", + u: "record-content" + }, + { + k: 24, + v: "鑷椤圭洰缁存姢", + i: "font icon-shouye", + u: "self-inspection" + }, + { + k: 25, + v: "鎶�鏈寚鏍囩淮鎶�", + i: "font icon-shouye", + u: "Technicalindex" + }, + { + k: 26, + v: "宸ヨ壓璺嚎缁存姢", + i: "font icon-shouye", + u: "technology" + }, + { + k: 27, + v: "璁惧缁存姢", + i: "font icon-shouye", + u: "laboratoryManagement" + }, + { + k: 28, + v: "鐗╂枡娓呭崟缁存姢", + i: "font icon-shouye", + u: "mbom" + }, + { + k: 30, + v: "鐢熶骇宸ヨ壓缁存姢", + i: "font icon-shouye", + u: "equipmentmaintain" + } + ] + } + ], + activeBox: 0, + activeP: 0, + tabActive: 0, + tabs: [{ + k: 0, + v: "棣栭〉", + i: "font icon-shouye", + u: "index-index" + }], + upIndex: 0 + }; + }, + created() {}, + mounted() { + this.userName = JSON.parse(localStorage.getItem("user")).name; + }, + methods: { + addTab(ob) { + if (ob.k == 0) this.activeBox = 0; + if (ob.k == 11) this.activeBox = 3; + this.activeP = ob.k; //0 + this.tabActive = ob.k; //0 + let num = -1; + this.tabs.forEach((a, ai) => { + if (ob.k == a.k) { + num = a.k; + } + }); + // 濡傛灉娌℃湁閬嶅巻鍒皌abs閲屾病鏈夎ob瀵瑰簲鐨則able锛屽線tabs閲岄潰鍔犲叆璇b + if (num == -1) { + this.tabs.push(ob); + } + }, + removeTab(index) { + this.tabs.splice(index, 1); + this.activeP = this.tabs[this.tabs.length - 1].k; + this.tabActive = this.tabs[this.tabs.length - 1].k; + }, + allDel() { + this.activeBox = 0 + this.activeP = 0 + this.tabActive = 0 + this.tabs = [{ + k: 0, + v: " 棣栭〉", + i: "font icon-shouye", + u: "index-index" + }] + }, + + upTabActive(num) { + this.tabActive = num; + this.activeP = num; + for (var i = 0; i < this.menu.length; i++) { + this.menu[i].c.forEach(b => { + if (b.k == num) { + this.activeBox = this.menu[i].k; + return + } + }) + } + }, + out() { + sessionStorage.clear(); + localStorage.removeItem("autoenter"); + this.$router.push("/enter"); + }, + removeAllTab() { + this.upIndex++ + this.$message.warning('鏁版嵁鍙樺姩杈冨ぇ,椤甸潰鑷姩鏇存柊!') + } + } + }; </script> -- Gitblit v1.9.3