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 == 999">
        <div class="content-icon" @click="inPage('xs')">
          <i class="tradingIcon icon-sales" style="color:#57927a"></i>
          <span>销售订单</span>
        </div>
        <div class="content-icon" @click="inPage('ck')">
          <i class="tradingIcon icon-sales" style="color:#576892"></i>
          <span>出库任务</span>
        </div>
        <div class="content-icon" @click="inPage('ckgd')">
          <i class="tradingIcon icon-receipt" style="color:#57927a"></i>
          <span>出库工单</span>
        </div>
        <div class="content-icon" @click="inPage('rk')">
          <i class="tradingIcon icon-ship" style="color:#576892"></i>
          <span>入库工单</span>
        </div>
      </div>

        <div class="content" v-if="sysType == 11 && tenantNumber == 883868">
            <div class="content-icon" @click="inPage('xs')" v-if="menuAll.includes('1649222564150513666')">
                <i class="tradingIcon icon-sales" style="color:#57927a"></i>
                <span>销售订单(L)</span>
            </div>
            <div class="content-icon" @click="inPage('ck')" v-if="menuAll.includes('1649222726755291138')">
                <i class="tradingIcon icon-sales" style="color:#576892"></i>
                <span>出库任务(L)</span>
            </div>
            <div class="content-icon" @click="inPage('ckgd')" v-if="menuAll.includes('1649222873652400129')">
                <i class="tradingIcon icon-receipt" style="color:#57927a"></i>
                <span>出库工单(L)</span>
            </div>
            <div class="content-icon" @click="inPage('cgdd')" v-if="menuAll.includes('1649221237009813506')">
                <i class="tradingIcon icon-ship" style="color:#576892"></i>
                <span>采购订单(L)</span>
            </div>
            <div class="content-icon" @click="inPage('rkrw')" v-if="menuAll.includes('1649221831804063745')">
                <i class="tradingIcon icon-ship" style="color:#576892"></i>
                <span>入库任务(L)</span>
            </div>
            <div class="content-icon" @click="inPage('rk')" v-if="menuAll.includes('1649221486306660353')">
                <i class="tradingIcon icon-ship" style="color:#576892"></i>
                <span>采购入库(L)</span>
            </div>
        </div>

        <div class="content" v-else-if="sysType == 11">
          <div class="content-icon" @click="inPage('xs')" v-if="menuAll.includes('1649222227737972738')">
            <i class="tradingIcon icon-sales" style="color:#57927a"></i>
            <span>销售订单</span>
          </div>
          <div class="content-icon" @click="inPage('ck')" v-if="menuAll.includes('1649222227737972738')">
            <i class="tradingIcon icon-sales" style="color:#576892"></i>
            <span>出库任务</span>
          </div>
          <div class="content-icon" @click="inPage('ckgd')" v-if="menuAll.includes('1649222227737972738')">
            <i class="tradingIcon icon-receipt" style="color:#57927a"></i>
            <span>出库工单</span>
          </div>
          <div class="content-icon" @click="inPage('cgdd')" v-if="menuAll.includes('1649220603598606338')">
            <i class="tradingIcon icon-ship" style="color:#576892"></i>
            <span>采购订单</span>
          </div>
          <div class="content-icon" @click="inPage('rkrw')" v-if="menuAll.includes('1649220603598606338')">
            <i class="tradingIcon icon-ship" style="color:#576892"></i>
            <span>入库任务</span>
          </div>
          <div class="content-icon" @click="inPage('rk')" v-if="menuAll.includes('1649221486306660353')">
            <i class="tradingIcon icon-ship" style="color:#576892"></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 {
      tenantNumber: -1,
      largeScreenToken: '',
      roleName:'',
      menuAll:[] //所有路由菜单id
    };
  },
  props: {
    sysType: Number
  },
  created() {
    this.tenantNumber = JSON.parse(localStorage.getItem('saber-tenantId')).content
    //从缓存中获取所有路由信息
    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;
        }
      }else if (this.sysType == 11) {
          switch(type){
              case 'xs':
                  this.$router.push('/tirePartsMall/salesManagement/saleOrder/index');
                  break;
              case 'ck':
                  this.$router.push('/tirePartsMall/salesManagement/outboundTask/index');
                  break;
              case 'ckgd':
                  this.$router.push('/tirePartsMall/salesManagement/outboundWorkOrder/index');
                  break;
              case 'cgdd':
                  this.$router.push('/tirePartsMall/salesManagement/purchaseOrder/index');
                  break;
              case 'rkrw':
                  this.$router.push('/tirePartsMall/salesManagement/inboundTask/index');
                  break;
              case 'rk':
                  this.$router.push('/tirePartsMall/purchasingManagement/warehouseEntryOrder/index');
                  break;
          }
      }else if(this.sysType == 999){
        switch(type){
          case 'xs':
            this.$router.push('/tirePartsMall/salesManagement/saleOrder/index');
            break;
            case 'ck':
            this.$router.push('/tirePartsMall/salesManagement/outboundTask/index');
            break;
            case 'ckgd':
            this.$router.push('/tirePartsMall/salesManagement/outboundWorkOrder/index');
            break;
            case 'rk':
            this.$router.push('/tirePartsMall/purchasingManagement/warehouseEntryOrder/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>