框架引入

李林

2023-12-23 5c5eccdb11df86dbd0200ffa316cddb7a671d839

 src/view/index.vue

@@ -62,6 +62,16 @@
      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 {
@@ -87,8 +97,8 @@
   }

   .left .box i {
      font-size: 32px;
      margin-bottom: 8px;
      font-size: 28px;
      margin-bottom: 4px;
   }

   .left .box div {
@@ -177,6 +187,10 @@
      user-select: none;
      flex-shrink: 0;
   }
	
   .tab:hover{
      color: #3A7BFA;
   }

   .tab i {
      font-size: 12px;
@@ -204,10 +218,36 @@
      width: 100%;
      height: 100%;
   }

   .right_key_menu {
      width: 120px;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: 999;
   }

   .right_key_menu li {
      list-style-type: none;
      padding: 5px 0;
      padding-left: 10px;
      font-size: 0.9rem;
      transition: .5s;
      cursor: pointer;
   }
	
   .right_key_menu li i{
      margin-right: 20px;
   }

   .right_key_menu li:hover {
      background-color: #dedede;
   }
</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" /> -->
@@ -244,7 +284,7 @@
            <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>
@@ -252,10 +292,22 @@
            <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="index"
               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'}">
               <ul>
                  <li style="color: red;" @click="removeTab(activeIndex)"><i class="el-icon-close"></i>关闭</li>
                  <el-divider></el-divider>
                  <li @click="refreshTable"><i class="el-icon-refresh"></i>刷新</li>
               </ul>
            </el-card>
         </el-col>
      </div>
   </div>
</template>
@@ -280,89 +332,93 @@
            menu: [{
                  k: 0,
                  v: "首页",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 0,
                     v: "首页",
                     i: "font icon-shouye",
                     i: "font icon-a-Group1124",
                     u: "index-index"
                  }]
               },
               {
                  k: 2,
                  v: "数据上报",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 2,
                     v: "数据上报",
                     i: "font icon-shouye",
                     u: "index-index"
                     i: "font icon-a-Group1124",
                     u: "data-reporting"
                  }]
               },
               {
                  k: 3,
                  v: "数据统计",
                  i: "font icon-shouye",
                  self: true,
                  i: "font icon-a-Group1124",
                  c: [{
                     k: 3,
                     v: "数据统计",
                     i: "font icon-shouye",
                     k: 9,
                     v: "项目数据统计",
                     i: "font icon-a-Group1124",
                     u: "index-index"
                  },{
                     k: 10,
                     v: "员工数据统计",
                     i: "font icon-a-Group1124",
                     u: "index-index"
                  }]
               },
               {
                  k: 5,
                  v: "进粉上报",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 5,
                     v: "进粉上报",
                     i: "font icon-shouye",
                     i: "font icon-a-Group1124",
                     u: "index-index"
                  }]
               },
               {
                  k: 6,
                  v: "财务上报",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 6,
                     v: "财务上报",
                     i: "font icon-shouye",
                     i: "font icon-a-Group1124",
                     u: "index-index"
                  }]
               },
               {
                  k: 7,
                  v: "角色管理",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 7,
                     v: "角色管理",
                     i: "font icon-shouye",
                     u: "index-index"
                     i: "font icon-a-Group1124",
                     u: "role-manage"
                  }]
               },
               {
                  k: 4,
                  v: "数据字典",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  c: [{
                        k: 4,
                        v: "客户管理",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        u: ""
                     },
                     {
                        k: 5,
                        v: "病种管理",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        u: ""
                     }
                  ]
@@ -370,12 +426,12 @@
               {
                  k: 8,
                  v: "人员管理",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 8,
                     v: "人员管理",
                     i: "font icon-shouye",
                     i: "font icon-a-Group1124",
                     u: "person-manage"
                  }]
               }
@@ -386,10 +442,11 @@
            tabs: [{
               k: 0,
               v: "首页",
               i: "font icon-shouye",
               i: "font icon-a-Group1124",
               u: "index-index"
            }],
            upIndex: 0
            upIndex: 0,
            activeIndex: 0
         };
      },
      created() {},
@@ -425,7 +482,7 @@
            this.tabs = [{
               k: 0,
               v: " 首页",
               i: "font icon-shouye",
               i: "font icon-a-Group1124",
               u: "index-index"
            }]
         },
@@ -445,6 +502,31 @@
            sessionStorage.clear();
            localStorage.removeItem("autoenter");
            this.$router.push("/enter");
         },
         // 关闭右键菜单
         closeRightKey() {
            $('.right_key_menu').css({
               'display': 'none'
            })
         },
         // 右键菜单
         rightKeyMenu(id, e) {
            if (id == 0) return
            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)
         }
      }
   };