client-base-v5/src/workflow/CreateWorkflow.vue

<template>
  <div class="container-fluid">
    <div class="row m-row">
      <div
        v-for="(item, index) in menuItems"
        :key="item.no"
        class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
      >
        <a
          :class="type(index)"
          style="
            background-color: #337ab7;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            border: 1px solid #fff;
            border-radius: 10px;
            text-align: center;
          "
          @click="open(item)"
        >
          <div class="menu-icon">
            <span :class="item.icon" />
          </div>
          <p class="menu-text">
            {{ item.name }}
          </p>
        </a>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';

import { Uuid } from 'pc-component-v3';

import WindowClientUtil from '../resource/dictionary/WindowClientUtil.js';
import WindowServerUtil from '../resource/dictionary/WindowServerUtil.js';

export default {

  components: {
    
  },
  data: function () {
    return {
      menuItems: [],
      loading: false,
    };
  },

  mounted: function () {
    this.init();
  },

  methods: {
    init: function () {
      var _self = this;
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('MenuResource/findNeedApproveMenuDtoByRoleId'),
        type: 'GET',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading=false;
          _self.menuItems = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    type: function (index) {
      var typeNum = index % 5;
      switch (typeNum) {
      case 0:
        return 'btn btn-primary';
      case 1:
        return 'btn btn-info';
      case 2:
        return 'btn btn-success';
      case 3:
        return 'btn btn-warning';
      case 4:
        return 'btn btn-danger';
      default:
        return;
      }
    },
    open: function (menuItem) {
      var _self = this;
      _self.loading=true;
      var windowId = menuItem.curdWindowNo;
      WindowServerUtil.getWindowById(
        windowId,
        function (data) {
          var tab = data.tabs[0];
          _self.loading=false;
          window.open(
            Common.getRedirectUrl(
              '#/desktop/window/window-edit/create/' +
                windowId +
                '/' +
                tab.tabIndex +
                '?currPage=' +
                1 +
                '&totalCount=' +
                1 +
                '&uuid=' +
                Uuid.createUUID(),
            ),
          );
        },
        function () {
          _self.loading=false;
        },
      );
    },
  },
};
</script>

<style>
.menu-box {
  background-color: red;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid #fff;
  border-radius: 10px;
  text-align: center;
}
.menu-icon {
  width: 100%;
  height: 60px;
  color: #337ab7;
}
.menu-icon span {
  font-size: 35px;
  line-height: 60px;
  margin: 0px;
  width: 100%;
  color: white;
}
.menu-text {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
}
</style>