增加人事系统对接

value

2024-05-16 083c818af77d33d619dba3dc20f94e996225a1c7

 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;
@@ -78,7 +85,7 @@
      color: #fff;
      width: 68px;
      height: 68px;
      margin: 12px 0;
      margin: 8px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
@@ -97,12 +104,12 @@
   }

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

   .left .box div {
      font-size: 14px;
      font-size: 12px;
   }

   .small_menu {
@@ -113,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 {
@@ -127,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);
@@ -161,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;
   }
@@ -174,21 +180,26 @@
      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{

   .tab:hover {
      color: #3A7BFA;
   }

@@ -205,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);
   }

@@ -220,61 +236,101 @@
   }

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

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

   .right_key_menu li i {
      margin-right: 10px;
   }

   .right_key_menu li:hover {
      background-color: #dedede;
      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" @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 && getPower(a.c[0].p)">
            <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 && getPower(a.p)">
            <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)" v-if="getPower(b.p)">
                     <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>
@@ -289,26 +345,55 @@
                  <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="com.k"
               v-show="com.k == tabActive" :ref="`com-${com.k}`">
            <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'}">
            <el-card :body-style="{padding: '6px'}">
               <ul>
                  <li style="color: red;" @click="removeTab(activeIndex)"><i class="el-icon-close"></i>关闭</li>
                  <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>

@@ -323,157 +408,72 @@
      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-shouyefill",
                  self: true,
                  c: [{
                     k: 0,
                     v: "首页",
                     i: "font icon-shouyefill",
                     u: "index-index"
                  }]
               },
               {
                  k: 2,
                  v: "数据上报",
                  i: "font icon-a-Group1118",
                  self: true,
                  c: [{
                     k: 2,
                     v: "数据上报",
                     i: "font icon-a-Group1118",
                     u: "data-reporting",
                     p: "selectDataReportingList"
                  }]
               },
               {
                  k: 3,
                  v: "数据统计",
                  i: "font icon-a-Group1120",
                  p: "selectProductCountDtoPageList selectRegistrantCountDtoPageList",
                  c: [{
                     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: 12,
                     v: "员工数据对比",
                     i: "font icon-24gl-clipboardList",
                     u: "data-comparison",
                     p: "selectDataComparisonDtoPageList"
                  }]
               },
               {
                  k: 5,
                  v: "进粉上报",
                  i: "font icon-a-Group1122",
                  self: true,
                  c: [{
                     k: 5,
                     v: "进粉上报",
                     i: "font icon-a-Group1122",
                     u: "fans-submit",
                     p: "selectFansSubmitList"
                  }]
               },
               {
                  k: 6,
                  v: "财务上报",
                  i: "font icon-a-Group1236",
                  self: true,
                  c: [{
                     k: 6,
                     v: "财务上报",
                     i: "font icon-a-Group1236",
                     u: "finance-submit",
                     p: "selectFinanceSubmitList"
                  }]
               },
               {
                  k: 7,
                  v: "角色管理",
                  i: "font icon-a-Group1126",
                  self: true,
                  c: [{
                     k: 7,
                     v: "角色管理",
                     i: "font icon-a-Group1126",
                     u: "role-manage",
                     p: "selectRoleLists"
                  }]
               },
               {
                  k: 4,
                  v: "数据字典",
                  i: "font icon-odbc-full",
                  p: "selectCustomEnumLists selectProductEnumLists",
                  c: [{
                        k: 4,
                        v: "客户管理",
                        i: "font icon-24gl-clipboardList",
                        u: "custom-enum",
                        p: "selectCustomEnumLists"
                     },
                     {
                        k: 11,
                        v: "项目管理",
                        i: "font icon-24gl-clipboardList",
                        u: "product-enum",
                        p: "selectProductEnumLists"
                     }
                  ]
               },
               {
                  k: 8,
                  v: "人员管理",
                  i: "font icon-a-Group1124",
                  self: true,
                  c: [{
                     k: 8,
                     v: "人员管理",
                     i: "font icon-a-Group1124",
                     u: "person-manage",
                     p: "selectUserList"
                  }]
               }
            ],
            menu: [],
            activeBox: 0,
            activeP: 0,
            tabActive: 0,
            tabs: [{
               k: 0,
               v: "首页",
               i: "font icon-a-Group1124",
               u: "index-index"
            }],
            tabs: [],
            upIndex: 0,
            activeIndex: 0,
            power: []
            power: [],
        editVisible:false,
        query:{},
        newMsg:false,
        timer:null,
        menuId: 0
         };
      },
      created() {},
      created() {
         this.menu = menus.menu
      },
      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
@@ -485,15 +485,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
@@ -501,10 +511,11 @@
            this.tabActive = 0
            this.tabs = [{
               k: 0,
               v: " 首页",
               v: "个人首页",
               i: "font icon-a-Group1124",
               u: "index-index"
            }]
            this.saveClick()
         },
         upTabActive(num) {
            this.tabActive = num;
@@ -517,10 +528,15 @@
                  }
               })
            }
            this.saveClick()
         },
         out() {
            sessionStorage.clear();
            localStorage.removeItem("autoenter");
            localStorage.removeItem("tabs")
            localStorage.removeItem("tabActive")
            localStorage.removeItem("activeP")
            localStorage.removeItem("activeBox")
            this.$router.push("/enter");
         },
         // 关闭右键菜单
@@ -531,7 +547,8 @@
         },
         // 右键菜单
         rightKeyMenu(id, e) {
            if (id == 0) return
            // if (id == 0) return
        this.menuId = id
            this.activeIndex = id
            var x = e.clientX + 'px'
            var y = e.clientY + 'px'
@@ -542,24 +559,85 @@
            })
         },
         // 刷新表格内容
         refreshTable(){
         refreshTable() {
            var thing = this.tabs.splice(this.activeIndex, 1)
            setTimeout(()=>{
            setTimeout(() => {
               this.tabs.splice(this.activeIndex, 0, thing[0])
            }, 0)
         },
         // 权限分配
         getPower(p){
            if(p==undefined) return true
         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]) {
                  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(){
        if (!this.query.oldPassword) {
          this.$message.error('请填写旧密码')
          return
        }
        if (!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>
</script>