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

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div class="title">
        <span>
          快速发起
        </span>
      </div>
      <div class="content">
        <div v-if="entrust" class="content-icon" @click="inPage('wt')">
          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
          <span>委托</span>
        </div>
        <div v-if="dispatch" class="content-icon" @click="inPage('dd')">
          <i class="tradingIcon icon-receipt" style="color:#409EFF"></i>
          <span>调度</span>
        </div>
        <div v-if="sendACar" class="content-icon" @click="inPage('pc')">
          <i class="tradingIcon icon-ship" style="color:#921939"></i>
          <span>派车</span>
        </div>
        <div v-if="track" class="content-icon" @click="inPage('gz')">
          <i class="tradingIcon icon-ship" style="color:#7db4ff"></i>
          <span>跟踪</span>
        </div>
        <div v-if="sBook" class="content-icon" @click="inPage('lytz')">
          <i class="tradingIcon icon-sales" style="color:#143056"></i>
          <span>台账</span>
        </div>
        <div v-if="reminder" class="content-icon" @click="inPage('dqtx')">
          <div style="width: 36px;height: 36px;background-color: #3a8ee6;border-radius: 5px;line-height: 36px;text-align: center;padding-top: 4px">
            <i class="el-icon-bell" style="color:#fff;font-size: 28px;"></i>
          </div>
          <span>到期提醒</span>
        </div>
      </div>
    </el-card>
    <el-dialog
        title="消息提醒"
        :visible.sync="enclosure"
        append-to-body
        width="70%">
      <avue-crud :data="data" @on-load="onLoad" :option="option" :page.sync="page"></avue-crud>
      <span slot="footer" class="dialog-footer">
          <el-button @click="enclosure = false" size="small">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {driverRemind} from "@/api/landTransportation/driver";

export default {
  name: "basicContainer",
  data() {
    return {
      enclosure:false,
      data:[],
      roleName: localStorage.getItem("roleName").split(','),
      option:{
        align:'center',
        dialogWidth:'85%',
        index: true,
        searchIcon: true,
        addBtn:false,
        searchIndex: 2,
        menu:false,
        refreshBtn:false,
        searchLabelWidth:100,
        searchSpan:8,
        column:[{
          label: '车队',
          prop: 'fleetName',
        },{
          label: '车号',
          prop: 'plateNo',
        },{
          label: '司机',
          prop: 'driverName',
        },{
          label: '电话',
          prop: 'tel',
        },{
          label: '年审日期',
          prop: 'inspectExpired',
        },{
          label: '保险日期',
          prop: 'insuranceExpired',
        }]
      },
      entrust:false,
      dispatch:false,
      sBook:false,
      reminder:false,
      sendACar:false,
      track:false,
    };
  },
  props: {
    sysType: Number
  },
  mounted() {
    if (this.roleName.indexOf('平台') !== -1){
      if (this.roleName.indexOf('总调度') !== -1 || this.roleName.indexOf('分管调度') !== -1){
        // 调度、台账、到期提醒
        this.dispatch = true //调度
        this.sBook = true //台账
        this.reminder = true //到期提醒
      }
    }
    if (this.roleName.indexOf('admin') !== -1){
      this.entrust = true
      this.dispatch = true
      this.sBook = true
      this.reminder = true
      this.sendACar = true
      this.track = true
    }
    if (this.roleName.indexOf('客户') !== -1){
      if (this.roleName.indexOf('总经理') !== -1 || this.roleName.indexOf('部门经理') !== -1 || this.roleName.indexOf('业务员') !== -1){
        // 委托、台账
        this.entrust = true //委托
        this.sBook = true //台账
      }else {
        this.entrust = true
        this.dispatch = false
        this.sBook = false
        this.reminder = false
        this.sendACar = false
        this.track = false
      }
    }
    if (this.roleName.indexOf('车队') !== -1){
      this.entrust = false
      this.dispatch = false
      this.sBook = false
      this.reminder = false
      this.sendACar = true
      this.track = false
    }
  },
  methods: {
    inPage(type) {
      switch (type) {
        case "wt":
          this.$router.push("/landTransportation/placeAnOrder/index");
          break;
        case "dd":
          this.$router.push("/landTransportation/dispatchingCars/index");
          break;
        case "pc":
          this.$router.push("/landTransportation/motorcadeDriver/index");
          break;
        case "gz":
          this.$router.push("/landTransportation/driver/index");
          break;
        case "lytz":
          this.$router.push("/landTransportation/reportAnalysis/index");
          break;
        case "dqtx":
          this.enclosure = true
          break;
      }
    },
    //查询
    onLoad() {
      driverRemind().then(res=>{
        this.data = res.data.data
      })
    }
  }
};
</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>