| | |
| | | } |
| | | |
| | | .left .box i { |
| | | font-size: 32px; |
| | | font-size: 24px; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .tag .el-icon-delete { |
| | | display: none; |
| | | } |
| | | |
| | | .tag .el-icon-delete:hover { |
| | | color: #F56C6C; |
| | | } |
| | | |
| | | .tag:hover .el-icon-delete { |
| | | display: block; |
| | | } |
| | | |
| | | .tag > .el-icon-s-unfold, |
| | | .el-icon-s-fold { |
| | | .el-icon-s-fold, |
| | | .el-icon-delete { |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | margin: 0 8px; |
| | | } |
| | | |
| | | .tabs { |
| | | min-width: calc(100% - 34px); |
| | | min-width: calc(100% - 68px); |
| | | height: 100%; |
| | | align-items: center; |
| | | display: flex; |
| | |
| | | height: 100%; |
| | | } |
| | | </style> |
| | | <style></style> |
| | | <template> |
| | | <div class="all"> |
| | | <div class="title"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="left" :style="`width: ${leftOpen ? '92' : '0'}px;`"> |
| | | <div |
| | | :class="`box ${activeBox == 0 ? 'active_box' : ''}`" |
| | | @click="addTab(menu[0].c[0])" |
| | | > |
| | | <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])" |
| | | > |
| | | <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" |
| | | > |
| | | <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)" |
| | | > |
| | | <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="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> |
| | | <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)" |
| | | > |
| | | <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> |
| | | <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="upIndex + '|' + index" |
| | | v-show="com.k == tabActive" @removeAllTab="removeAllTab"> |
| | | </component> |
| | | </div> |
| | | </div> |
| | |
| | | return { |
| | | userName: "value", |
| | | leftOpen: true, |
| | | menu: [ |
| | | { |
| | | menu: [{ |
| | | k: 0, |
| | | v: "首页", |
| | | i: "font icon-shouye", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 0, |
| | | v: "首页", |
| | | i: "font icon-shouye", |
| | | u: "index-index" |
| | | } |
| | | ] |
| | | }] |
| | | }, |
| | | { |
| | | k: 3, |
| | | v: "销售管理", |
| | | i: "font icon-jine", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 11, |
| | | v: "销售管理", |
| | | i: "font icon-jine", |
| | | u: "sale" |
| | | } |
| | | ] |
| | | }] |
| | | }, |
| | | { |
| | | k: 1, |
| | | v: "技术管理", |
| | | i: "font icon-ic_form_set24px", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 1, |
| | | v: "标准BOM", |
| | | i: "font icon-shouye", |
| | |
| | | k: 4, |
| | | v: "生产管理", |
| | | i: "font icon-shengchanguanli", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 12, |
| | | v: "生产订单", |
| | | i: "font icon-shouye", |
| | |
| | | k: 5, |
| | | v: "WMS管理", |
| | | i: "font icon-a-Inventorydumprequest", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 15, |
| | | v: "原材料库存", |
| | | i: "font icon-shouye", |
| | |
| | | k: 2, |
| | | v: "QMS管理", |
| | | i: "font icon-xunhuan", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 3, |
| | | v: "原材料检验", |
| | | i: "font icon-shouye", |
| | |
| | | k: 6, |
| | | v: "核算管理", |
| | | i: "font icon-caiwuhesuanxitong", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 21, |
| | | v: "产量工资", |
| | | i: "font icon-shouye", |
| | |
| | | k: 7, |
| | | v: "基础数据", |
| | | i: "font icon-a-ziyuan20", |
| | | c: [ |
| | | { |
| | | c: [{ |
| | | k: 23, |
| | | v: "生产记录维护", |
| | | i: "font icon-shouye", |
| | |
| | | i: "font icon-shouye", |
| | | u: "mbom" |
| | | }, |
| | | // { |
| | | // k: 29, |
| | | // v: "巡检项目维护", |
| | | // i: "font icon-shouye", |
| | | // u: "routinginspection" |
| | | // }, |
| | | { |
| | | k: 30, |
| | | v: "生产工艺维护", |
| | |
| | | activeBox: 0, |
| | | activeP: 0, |
| | | tabActive: 0, |
| | | tabs: [ |
| | | { |
| | | tabs: [{ |
| | | k: 0, |
| | | v: "首页", |
| | | i: "font icon-shouye", |
| | | u: "index-index" |
| | | } |
| | | ], |
| | | }], |
| | | upIndex: 0 |
| | | }; |
| | | }, |
| | |
| | | } |
| | | }, |
| | | 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("不能关闭最后的标签"); |
| | | } |
| | | }, |
| | | 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; |
| | | if (num == 0) { |
| | | this.activeBox = 0; |
| | | } else if (num > 0 && num <= 2) { |
| | | this.activeBox = 1; |
| | | } else if (num > 2 && num < 11) { |
| | | this.activeBox = 2; |
| | | } else if (num == 11) { |
| | | this.activeBox = 3; |
| | | } else if (num > 11 && num <= 14) { |
| | | this.activeBox = 4; |
| | | } else if (num > 14 && num <= 20) { |
| | | this.activeBox = 5; |
| | | } else if (num > 20 && num <= 22) { |
| | | this.activeBox = 6; |
| | | } else if (num > 22 && num <= 30) { |
| | | this.activeBox = 7; |
| | | 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++ |
| | | } |
| | | } |
| | | }; |