spfm-market-front/src/pages/main/leader/leaderHprocess.vue

<template>
  <div class="pmain">
    <div class="layui-col-md6" v-for="(ite, index) in funcData" :key="index">
      <div class="mc-nomal-title">
        <span style="font-size: 15px">{{ ite.lineName }}</span>
      </div>
      <div class="bg-style">
        <div class="mc-function-box">
          <div
            v-for="item in ite.unitList"
            :key="item.unitName"
            class="function-box"
          >
            <div
              v-for="items in item.modList"
              :key="items.moduleName"
              class="f-box-info"
            >
              <el-badge
                :value="items.noTaskNum"
                :max="99"
                :hidden="items.noTaskNum == 0"
              >
                <div class="elbadgefather">
                  <div class="elbadgeson1">
                    <i
                      @click="jumpTo(items)"
                      v-if="items.sts == '0' && items.icon"
                      v-html="items.icon"
                    >
                      {{ items.icon }}
                    </i>
                    <i
                      @click="jumpTo(items)"
                      :class="'el-icon-user'"
                      v-if="items.sts == '0' && !items.icon"
                      style="background: #0b82ff"
                    ></i>
                    <i
                      :class="'iconfont icon-tongji'"
                      v-if="items.sts != '0'"
                      style="background: #ddd"
                    ></i>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="items.moduleName"
                      placement="bottom"
                    >
                    </el-tooltip>
                  </div>
                  <div class="elbadgeson2">
                    <div
                      class="span"
                      style="float: right"
                      @click="jumpTo(items)"
                    >
                      {{ items.moduleName }}
                    </div>
                    <div class="f-box-tit">
                      {{ item.unitName }}
                    </div>
                  </div>
                </div>
              </el-badge>
            </div>
            <div class="f-box-info" v-if="item.modList.length == 0"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      funcData: [],
      boxHeight: {
        height: "auto",
      },
      outsideModules: [],
      groupName: "",
    };
  },
  methods: {
    getList() {
      let loginNo = JSON.parse(window.sessionStorage.userInfo).loginNo;
      this.$http({
        url: "/market/cmkline/queryInfo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.funcData = res.data.lineList;
        this.outsideModules = res.data.outsideModules;
        this.groupName = res.data.groupName;
      });
    },
    hAuto() {
      let boxLinel = this.$refs.boxLinel.offsetHeight;
      let boxLiner = this.$refs.boxLiner.offsetHeight;
      if (boxLinel > boxLiner) {
        this.boxHeight.height = boxLinel + "px";
      } else {
        this.boxHeight.height = boxLiner + "px";
      }
    },
    jumpTo(v) {
      if (v.moduleUrl) {
        if (this.groupName == "default") {
          //加入外部人员权限控制start
          if (this.outsideModules.length > 0) {
            let moduleIndex = -1;
            for (let i = 0; i < this.outsideModules.length; i++) {
              if (this.outsideModules[i].moduleUrl == v.moduleUrl) {
                moduleIndex = i;
                break;
              }
            }
            if (moduleIndex < 0) {
              global.$vm.$notify.error({
                title: "提示",
                message: "暂无使用权限",
              });
              return;
            }
          }
          //加入外部人员权限控制end
        } else {
          let childrenMenus = JSON.parse(window.sessionStorage.childrenMenus);
          if (childrenMenus != undefined && childrenMenus.length > 0) {
            let moduleIndex = -1;
            for (let a = 0; a < childrenMenus.length; a++) {
              if (childrenMenus[a].jspUrl == v.moduleUrl) {
                moduleIndex = a;
                break;
              }
            }
            if (moduleIndex < 0) {
              global.$vm.$notify.error({
                title: "提示",
                message: "暂无使用权限",
              });
              return;
            }
          }
        }

        this.$router.push({
          path: v.moduleUrl,
        });
        this.setabList(v.moduleName, v.moduleUrl);
      }
    },
    setabList(n, p) {
      let params = {
        children: "",
        name: n,
        rountPath: p,
        target: "_self",
      };
      // console.log(this.$store.state.tabList)
      // for (let i = 0; i < this.$store.state.tabList.length; i++) {
      //     if (this.$store.state.tabList[i].name === params.name) {
      //         this.$store.state.tabList[i] = params;
      //     }
      // }
      // let set = new Set([...this.$store.state.tabList, params]);
      // set.add(params);
      // this.$store.commit("setDefaultActive", params.rountPath);
      // this.$store.commit("setTabList", Array.from(set));
    },
  },
  mounted() {},
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
.mc-red {
  color: #ff6060;
}

.pmain {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .layui-col-md6 {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
    background: #fafafa;
    border-radius: 5px;
  }
}

.mc-nomal-title {
  padding-left: 38px;
  background: url(../../../../src/assets/dbyb-bt-bj3.jpg) no-repeat 10px center;
  // font-size: 20px;
  line-height: 20px;
  width: 150px;
  // font-weight: 500;
  color: rgb(255, 255, 255);
  padding-bottom: 10px;
  padding-top: 10px;
}

.mc-nomal-checked {
  color: #999;
  font-size: 12px;
}

.mc-title-box {
  display: flex;
  justify-content: space-between;
}

.mc-nomal-show-num {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 10px;

  .num-box {
    margin-right: 40px;
  }
}

.mc-right-title {
  margin-top: 10px;
  text-align: right;
  padding-right: 20px;
}

.mc-nomal-num {
  font-size: 20px;
}

.bg-style {
  height: 60px;
  overflow-y: auto;
  margin: 5px;
  .custom-tree-node {
    width: 100%;
  }

  .tree-box {
    overflow: hidden;
    height: 26px;
    width: 100%;

    img {
      width: 26px;
      height: 26px;
      float: left;
    }

    div {
      display: inline-block;
      height: 26px;
      line-height: 26px;
    }
  }
}

.mc-function-box {
  margin-left: 5px;
  margin-right: 5px;
  .function-box {
    display: inline;

    .f-box-tit {
      font-size: 14px;
      color: #4aaff5;
    }

    .f-box-info {
      display: inline-block;
      height: 60px;
      width: 245px; 
      text-align: center;

      i {
        width: 40px;
        height: 40px;
        border-radius: 18px;
        display: block;
        color: #fff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }

      .span {
        font-size: 13px;
        text-align: left;
        width: 200px;
        // height: 40px;
        line-height: 20px;
        cursor: pointer;
      }
      .f-box-tit{
        font-size: 13px;
        text-align: left;
        width: 200px;
        // height: 20px;
        line-height: 20px;
        cursor: pointer;
      }
      .span:hover {
        color: blue;
      }

      .mybadge {
        top: 0;
        right: 40px;
      }

      .icon {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
  .function-box:nth-child(2) {
    .f-box-tit {
      color: #9dc914;
    }
  }
  .function-box:nth-child(3) {
    .f-box-tit {
      color: #ffa042;
    }
  }
  .function-box:nth-child(4) {
    .f-box-tit {
      color: palevioletred;
    }
  }
}

::v-deep .el-badge__content {
  margin-top: 8px;
  margin-right: 35px;
}
.elbadgefather{
  display: flex;
}
.elbadgeson2{
  display: flex;
  flex-direction: column;
}
</style>