Smart_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="content" v-if="sysType == 4 || sysType == 2">
        <div class="content-icon" @click="inPage('bj')">
          <i class="tradingIcon icon-sales" style="color:#606266"></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('cg')">
          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
          <span>采购</span>
        </div>
        <div class="content-icon" @click="inPage('fh')">
          <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')">
          <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')">
          <i class="tradingIcon icon-apply" style="color:#BE3216"></i>
          <span>付费申请</span>
        </div>
        <div class="content-icon" @click="inPage('sf')">
          <i class="tradingIcon icon-charge" style="color:#4D6016"></i>
          <span>收费</span>
        </div>
        <div class="content-icon" @click="inPage('ff')">
          <i class="tradingIcon icon-pay" style="color:#7E8270"></i>
          <span>付费</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>
export default {
  name: "basicContainer",
  data() {
    return {};
  },
  props: {
    sysType: Number
  },
  methods: {
    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;
        }
      } 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: 1vh;
    }
  }
}
</style>