middleground_code_v2/src/views/newVersionView/IntegrationTaskCenter/index.vue

/**
  desc 集成任务
 */
<template>
  <div class="workbench">
    <h3 class="workbench-title">全部应用</h3>
    <el-tabs>
      <el-tab-pane
        v-for="(item, index) in routeData"
        :key="index"
        :label="item.meta ? item.meta.title : ''"
        v-if="item.meta"
      >
        <div class="menuContainer">
          <div
            v-for="(list, listIndex) in item.children"
            class="menuBox"
            @click="goRoute(item, list)"
            v-if="!list.meta.hidden"
          >
            <img class="menuIcon" :src="list.meta.icon" v-if="list.meta.icon" />
            <img class="menuIcon" src="../logo1.png" v-else />
            <p class="menuContent">{{ list.meta.title }}</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { TagsView } from "@/layout/components";
import request from "@/utils/request";

export default {
  name: "ApplicationCenter",
  components: {
    TagsView,
  },
  created() {
    this.$store.dispatch("settings/changeSetting", {
      key: "showTagsView",
      value: true,
    });
  },
  data() {
    return {
      routeData: [], //菜单数据
    };
  },
  mounted() {
    let routeList = localStorage.getItem("routeList")
      ? JSON.parse(localStorage.getItem("routeList"))
      : [];
    this.routeData = this.OrganizeMenus(routeList);
  },
  methods: {
    goRoute(val, item) {
      let routeData = this.$router.resolve({
        path: item.path,
        name: item.name,
        query: { mdmCode: item.meta.mdmCode, viewType: item.meta.viewType },
      });
      window.open(routeData.href, "_self");
    },
    // 处理icon
    handlerIcon(item) {
      let str = "";
      if (item.includes("?")) {
        str = item.split("?")[1];
      } else {
        str = item;
      }
      return str;
    },
    handlerIconColor(item) {
      let color = "";
      if (item.includes("?")) {
        color = item.split("?")[0];
      } else {
        color = "#1478F6";
      }
      return color;
    },
    // 整理菜单数据
    OrganizeMenus(data) {
      let arrData = [];
      // 集成任务
      let arrID = ["5f1182ffd4c1451291a211c4a820fb6b"];
      arrID.forEach((a) => {
        data.forEach((b) => {
          if (a === b.id) {
            arrData.push(b);
          }
        });
      });
      arrData.forEach((bItem) => {
        if (bItem.children && bItem.children.length > 0) {
          bItem.children.forEach((cItem) => {
            if (cItem.meta.icon) {
              this.getLogoUrl(cItem.meta.icon).then((res) => {
                let imageUrl =
                  "data:image/png/jpg;base64," +
                  btoa(
                    new Uint8Array(res).reduce(
                      (el, byte) => el + String.fromCharCode(byte),
                      ""
                    )
                  );
                this.$set(cItem.meta, "icon", imageUrl);
              });
            }
          });
        }
      });
      return arrData;
    },
    getLogoUrl(id) {
      return request({
        url:
          "/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
        method: "get",
        responseType: "arraybuffer",
      }).then((res) => {
        return res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.workbench {
  background: #fff;
  padding: 15px;
  //margin: 0 10px;
}

.workbench-title {
  margin: 15px 0;
}

.menuContainer {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}

.menuBox {
  display: flex;
  align-items: center;
  background: #fafafa;
  padding: 10px 15px;
  border-radius: 10px;
  width: 200px;
  margin: 10px;
  cursor: pointer;
}

.menuIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 12px;
  margin-right: 10px;
}

.menuContent {
  font-size: 14px;
  color: #333333;
}
</style>