tire-platform-ui/src/views/wel/components/quick-launch.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div class="title">
        <span>
          快速发起
        </span>
      </div>
      <div class="content" v-if="sysType == 3">
        <div class="content-icon" @click="inPage('cg')">
          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
          <span>采购</span>
        </div>
        <div class="content-icon" @click="inPage('xs')">
          <i class="tradingIcon icon-sales" style="color:#409EFF"></i>
          <span>销售</span>
        </div>
        <div class="content-icon" @click="inPage('sh')">
          <i class="tradingIcon icon-receipt" style="color:#921939"></i>
          <span>收货</span>
        </div>
        <div class="content-icon" @click="inPage('fh')">
          <i class="tradingIcon icon-ship" style="color:#143056"></i>
          <span>发货</span>
        </div>
        <div class="content-icon" @click="inPage('sqfk')">
          <i class="tradingIcon icon-apply" style="color:#BE3216"></i>
          <span>付费申请</span>
        </div>
        <div class="content-icon" @click="inPage('ff')">
          <i class="tradingIcon icon-pay" style="color:#7E8270"></i>
          <span>付费</span>
        </div>
        <div class="content-icon" @click="inPage('sf')">
          <i class="tradingIcon icon-charge" style="color:#4D6016"></i>
          <span>收费</span>
        </div>
      </div>
      <!-- <div class="content" v-if="sysType == 5">
        <div class="content-icon" @click="inPage('zy')">
          <i class="tradingIcon icon-pay" style="color:#57927a"></i>
          <span>主营业务</span>
        </div>
        <div class="content-icon" @click="inPage('yf')">
          <i class="tradingIcon icon-pay" style="color:#576892"></i>
          <span>业绩分析</span>
        </div>
        <div class="content-icon" @click="inPage('tj')">
          <i class="tradingIcon icon-pay" style="color:#57927a"></i>
          <span>统计列表</span>
        </div>
        <div class="content-icon" @click="inPage('fw')">
          <i class="tradingIcon icon-pay" style="color:#576892"></i>
          <span>服务项目</span>
        </div>
        <div class="content-icon" @click="inPage('sp')">
          <i class="tradingIcon icon-pay" style="color:#57927a"></i>
          <span>商品信息</span>
        </div>
        <div class="content-icon" @click="inPage('fy')">
          <i class="tradingIcon icon-pay" style="color:#576892"></i>
          <span>费用详情</span>
        </div>
      </div> -->
      <div class="content2" v-if="sysType === 5" v-loading="loading">
        <div class="content2-item">
          <div class="card">
            <div class="card-title card-title1">
              <span>
                销
              </span>
            </div>
            <div class="card-content">
              <span class="card-content-text">销售机会</span>
            </div>
          </div>
        </div>
        <div class="divider" />
        <div class="content2-item">
          <div class="card">
            <div class="card-title card-title2">
              <span>
                主
              </span>
            </div>
            <div class="card-content">
              <span class="card-content-text">主营业务</span>
            </div>
          </div>
        </div>
        <div class="divider" />
        <div class="content2-item">
          <div class="card">
            <div class="card-title card-title3">
              <span>
                任
              </span>
            </div>
            <div class="card-content">
              <span class="card-content-text">任务</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-if="sysType == 4 || sysType == 2">
        <div class="content-icon" @click="inPage('bj')" v-if="sysType == 4&&roleName!='采购'" v-show="menuAll.includes('1452458513768214529')">
          <i class="tradingIcon icon-sales" style="color:#606266"></i>
          <span>报价</span>
        </div>
        <div class="content-icon" @click="inPage('xs')" v-if="roleName!='采购'" v-show="menuAll.includes('1450016264090353666') || menuAll.includes('1441312491209768961')">
          <i class="tradingIcon icon-sales" style="color:#409EFF"></i>
          <span>销售</span>
        </div>
        <div class="content-icon" @click="inPage('cg')" v-if="menuAll.includes('1450016028588572673') || menuAll.includes('1448934850062209025')">
          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
          <span>采购</span>
        </div>
        <div class="content-icon" @click="inPage('fh')" v-if="menuAll.includes('1450016865054425090') || menuAll.includes('1448814205181689857')">
          <i class="tradingIcon icon-ship" style="color:#143056"></i>
          <span v-if="sysType == 4">跟单</span>
          <span v-if="sysType == 2">客户收货</span>
        </div>
        <div class="content-icon" @click="inPage('sh')" v-if="menuAll.includes('1450016559952363522') || menuAll.includes('1447461646420480002')">
          <i class="tradingIcon icon-receipt" style="color:#921939"></i>
          <span v-if="sysType == 4">收货</span>
          <span v-if="sysType == 2">工厂发货</span>
        </div>
        <div class="content-icon" @click="inPage('sqfk')" v-if="menuAll.includes('1476082159704887297')">
          <i class="tradingIcon icon-apply" style="color:#BE3216"></i>
          <span>付费申请</span>
        </div>
        <div class="content-icon" @click="inPage('sf')" v-if="menuAll.includes('1450737630586388482')">
          <i class="tradingIcon icon-charge" style="color:#4D6016"></i>
          <span>收费</span>
        </div>
        <div class="content-icon" @click="inPage('ff')" v-if="menuAll.includes('1465162366688710658')">
          <i class="tradingIcon icon-charge" style="color:#7E8270"></i>
          <span>付费</span>
        </div>
        <div class="content-icon" @click="inPage('smart')" v-if="sysType == 2">
          <div
            style="width: 36px;height: 37px;border-radius: 10px;background-color: #0771e3;text-align: center;margin-top: 1px">
            <i class="el-icon-basketball" style="color:#FFFFFF;font-size: 26px;line-height: 37px;"></i>
          </div>
          <span style="margin-top: 4px">智慧大屏</span>
        </div>
      </div>
      <div class="content" v-if="sysType == 6">
        <div class="content-icon" @click="inPage('cg')">
          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
          <span>采购</span>
        </div>
        <div class="content-icon" @click="inPage('xs')">
          <i class="tradingIcon icon-sales" style="color:#409EFF"></i>
          <span>销售</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from "@/util/auth";
export default {
  name: "basicContainer",
  data() {
    return {
      largeScreenToken: '',
      roleName:'',
      menuAll:[] //所有路由菜单id
    };
  },
  props: {
    sysType: Number
  },
  created() {
    //从缓存中获取所有路由信息
    let menu = JSON.parse(localStorage.getItem("saber-menuAll")).content
    for (let item of menu){
      this.menuAll.push(item.id)
      if (item.children.length > 0){
        this.getMenuId(item.children)
      }
    }
    if (this.sysType == 2) {
      this.getWorkDicts('large_screen').then(res => {
        this.largeScreenToken = res.data.data[0].dictKey;
      })
    }
    this.roleName=localStorage.getItem("roleName")
  },
  methods: {
    //获取所有路由信息id
    getMenuId(array){
      for (let item of array){
        this.menuAll.push(item.id)
      }
    },
    inPage(type) {
      //出口
      if (this.sysType == 4) {
        switch (type) {
          case "bj":
            this.$router.push("/exportTrade/customerInquiry/index");
            break;
          case "xs":
            this.$router.push("/exportTrade/salesContract/index");
            break;
          case "cg":
            this.$router.push("/exportTrade/purchaseContract/index");
            break;
          case "fh":
            this.$router.push("/exportTrade/invoice/index");
            break;
          case "sh":
            this.$router.push("/exportTrade/receipt/index");
            break;
          case "sqfk":
            this.$router.push("/financialManagement/paymentRequest/index");
            break;
          case "sf":
            this.$router.push(
              "/financialManagement/receiptSettle/receiptSettle"
            );
            break;
          case "ff":
            this.$router.push(
              "/financialManagement/paymentSettle/paymentSettle"
            );
            break;
        }
      } else if (this.sysType == 2) {
        switch (type) {
          case "xs":
            this.$router.push("/businessManagement/salesOrder/index");
            break;
          case "cg":
            this.$router.push("/businessManagement/purchaseOrder/index");
            break;
          case "fh":
            this.$router.push("/businessManagement/deliveryNotice/index");
            break;
          case "sh":
            this.$router.push("/businessManagement/receipt/index");
            break;
          case "sqfk":
            this.$router.push("/financialManagement/paymentRequest/index");
            break;
          case "sf":
            this.$router.push(
              "/financialManagement/receiptSettle/receiptSettle"
            );
            break;
          case "ff":
            this.$router.push(
              "/financialManagement/paymentSettle/paymentSettle"
            );
            break;
          case "smart":
            if (((localStorage.getItem("roleName").split(',')).indexOf('数据中心') !== -1) || (localStorage.getItem("roleName").split(',')).indexOf('admin') !== -1) {
              window.open('http://119.3.74.195:9527/view/' + this.largeScreenToken + '?token=' + getToken())
            } else {
              this.$message.error('此帐号无权限');
            }
            break;
        }
      } else if (this.sysType == 3) {
        switch (type) {
          case "xs":
            this.$router.push("/salesManagement/salesContract/index");
            break;
          case "cg":
            this.$router.push("/purchase/contract/index");
            break;
          case "fh":
            this.$router.push("/importTrade/invoice/index");
            break;
          case "sh":
            this.$router.push("/importTrade/receipt/index");
            break;
          case "sqfk":
            this.$router.push("/financialManagement/paymentRequest/index");
            break;
          case "sf":
            this.$router.push(
              "/financialManagement/receiptSettle/receiptSettle"
            );
            break;
          case "ff":
            this.$router.push(
              "/financialManagement/paymentSettle/paymentSettle"
            );
            break;
        }
      } else if (this.sysType == 5) {
        switch (type) {
          case "zy":
            this.$router.push("/workManagement/main-items/list");
            break;
          case "yf":
            this.$router.push("/workManagement/performanceAnalysis/index");
            break;
          case "tj":
            this.$router.push("/workManagement/receipt/statisticalList");
            break;
          case "fw":
            this.$router.push("/workManagement/service-items/project");
            break;
          case "sp":
            this.$router.push("/basicData/commodityType/index");
            break;
          case "fy":
            this.$router.push("/basicData/basicFeesDesc/index");
            break;
        }
      } else if (this.sysType == 6) {
        switch (type) {
          case "xs":
            this.$router.push("/dealer/sales/index");
            break;
          case "cg":
            this.$router.push("/dealer/purchase/index");
            break;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

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

.tradingIcon {
  font-size: 36px;
}

.content {
  display: flex;

  &-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5vh 1vw 0vh 1vw;

    span {
      margin-top: 0.2vh;
    }
  }
}

.content2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  width: 80vw;

  .divider {
    display: block;
    height: 0px;
    width: 100%;
    margin-top: -20px;
    border-top: 1px dashed #dcdfe6;
  }

  &-item {
    margin-left: 1vw;

    .card {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-title {
        width: 40px;
        height: 40px;
        text-align: center;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          line-height: 20px;
        }
      }

      &-title1 {
        color: #037fe1;
        background-color: rgba(3, 127, 225, 0.15);
      }

      &-title2 {
        color: #ffa21e;
        background-color: rgba(255, 162, 30, 0.15);
      }

      &-title3 {
        color: #fb5b60;
        background-color: rgba(251, 91, 96, 0.15);
      }

      &-title4 {
        color: #42bc6f;
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-content {
        display: flex;
        flex-direction: column;
        margin-top: 4px;
        &-text {
          color: #909399;
        }
      }
    }
  }
}
</style>