修订版本1.0

李林

2024-01-08 310ebbbc42e94e947484ec7f4014ddbe9a5612f2

 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" /> -->
@@ -221,17 +261,17 @@
      </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 placement="right-start" width="90" 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>
               <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)">
                  <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>
@@ -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="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'}">
               <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,103 +332,118 @@
            menu: [{
                  k: 0,
                  v: "首页",
                  i: "font icon-shouye",
                  i: "font icon-shouyefill",
                  self: true,
                  c: [{
                     k: 0,
                     v: "首页",
                     i: "font icon-shouye",
                     i: "font icon-shouyefill",
                     u: "index-index"
                  }]
               },
               {
                  k: 2,
                  v: "数据上报",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1118",
                  self: true,
                  c: [{
                     k: 2,
                     v: "数据上报",
                     i: "font icon-shouye",
                     u: "index-index"
                     i: "font icon-a-Group1118",
                     u: "data-reporting",
                     p: "selectDataReportingList"
                  }]
               },
               {
                  k: 3,
                  v: "数据统计",
                  i: "font icon-shouye",
                  self: true,
                  i: "font icon-a-Group1120",
                  p: "selectProductCountDtoPageList selectRegistrantCountDtoPageList",
                  c: [{
                     k: 3,
                     v: "数据统计",
                     i: "font icon-shouye",
                     u: "index-index"
                     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: 5,
                  v: "进粉上报",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1122",
                  self: true,
                  c: [{
                     k: 5,
                     v: "进粉上报",
                     i: "font icon-shouye",
                     u: "index-index"
                     i: "font icon-a-Group1122",
                     u: "fans-submit",
                     p: "selectFansSubmitList"
                  }]
               },
               {
                  k: 6,
                  v: "财务上报",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1236",
                  self: true,
                  c: [{
                     k: 6,
                     v: "财务上报",
                     i: "font icon-shouye",
                     u: "index-index"
                     i: "font icon-a-Group1236",
                     u: "finance-submit",
                     p: "selectFinanceSubmitList"
                  }]
               },
               {
                  k: 7,
                  v: "角色管理",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1126",
                  self: true,
                  c: [{
                     k: 7,
                     v: "角色管理",
                     i: "font icon-shouye",
                     u: "index-index"
                     i: "font icon-a-Group1126",
                     u: "role-manage",
                     p: "selectRoleLists"
                  }]
               },
               {
                  k: 4,
                  v: "数据字典",
                  i: "font icon-shouye",
                  i: "font icon-odbc-full",
                  p: "selectCustomEnumLists selectProductEnumLists",
                  c: [{
                        k: 4,
                        v: "客户管理",
                        i: "font icon-shouye",
                        u: ""
                        i: "font icon-24gl-clipboardList",
                        u: "custom-enum",
                        p: "selectCustomEnumLists"
                     },
                     {
                        k: 5,
                        v: "病种管理",
                        i: "font icon-shouye",
                        u: ""
                        k: 11,
                        v: "项目管理",
                        i: "font icon-24gl-clipboardList",
                        u: "product-enum",
                        p: "selectProductEnumLists"
                     }
                  ]
               },
               {
                  k: 8,
                  v: "人员管理",
                  i: "font icon-shouye",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 8,
                     v: "人员管理",
                     i: "font icon-shouye",
                     u: "person-manage"
                     i: "font icon-a-Group1124",
                     u: "person-manage",
                     p: "selectUserList"
                  }]
               }
            ],
@@ -386,15 +453,19 @@
            tabs: [{
               k: 0,
               v: "首页",
               i: "font icon-shouye",
               i: "font icon-a-Group1124",
               u: "index-index"
            }],
            upIndex: 0
            upIndex: 0,
            activeIndex: 0,
            power: []
         };
      },
      created() {},
      mounted() {
         this.userName = JSON.parse(localStorage.getItem("user")).name;
         this.power = JSON.parse(sessionStorage.getItem('power'))
         this.getPower()
      },
      methods: {
         addTab(ob, self) {
@@ -425,7 +496,7 @@
            this.tabs = [{
               k: 0,
               v: " 首页",
               i: "font icon-shouye",
               i: "font icon-a-Group1124",
               u: "index-index"
            }]
         },
@@ -445,6 +516,43 @@
            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)
         },
         // 权限分配
         getPower(p){
            if(p==undefined) 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
                  }
               }
            }
         }
      }
   };