supplier-dispatch-h5/src/views/index/vehicleManage.vue

<template>
<div class="wrap"  >
  <div class="navBar">
    <van-nav-bar
        title="车辆管理"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goBack"
    >
      <template slot="right" v-if="permissonList.includes('vehicleAddBtn')">
        <div class="rightWrap" @click="goPage('vehicleAdd')">
              <img src="@/assets/addImg.png" />
              <span class="addTxt">添加</span>
        </div>
      </template>
    </van-nav-bar>
  </div>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="carItem" v-for="(item,index) in vehicleList" :key="index">
        <div class="carCode">
          <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
          <div class="twoBtn">
            <button v-if="permissonList.includes('vehicleAddBtn')" class="del" @click="deleteItem(item.vehicleId)">删除</button>
            <button v-if="permissonList.includes('vehicleModifyBtn')" class="revise" @click="updateVehicle(item)">修改</button>
          </div>
        </div>
        <div class="carType">{{ item.serviceName }}</div>
        <div class="juhe">
          <span class="zdJuhe">是否参与中道聚合:        </span>
          <span :class="item.hasPolymerization.code == 0  ? 'isYes' :'isNo'">{{item.hasPolymerization.label}}</span>
        </div>
      </div>

    </van-list>
 </van-pull-refresh>
  <van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
</div>

</template>

<script>
import { myMixins} from "@/utils/myMixins";
import {supplierVehicleList,deleteVehicle,userOperationPermissions} from "@/api/mine"
export default {
  name: "vehicleManage",
  mixins:[myMixins],
  data(){
    return{
      vehicleList:[],
      show:false,
      id:'',
      pageNum:1,
      pageSize:10,
      total:'',
      isLoading: false,
      loading: false,
      finished: false,
      permissonList:[],
    }
  },
  mounted() {
    // this.getVehicleList();
    this.getPermissions();
  },
  methods:{
    async onLoad(){
      await this.getVehicleList()
      this.pageNum++;
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (this.vehicleList.length >= this.total) {
        this.finished = true;
      }
    },
    onRefresh() {
      this.pageNum=1
      // this.getVehicleList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    async getVehicleList(){
        let result = await supplierVehicleList({
          pageNum:this.pageNum,
          pageSize:this.pageSize
        })
          this.total=result.total
          if(this.pageNum == 1){// 第一页直接赋值
            this.vehicleList=result.data;
          }else{// 第二页数据拼接
            let preList = this.vehicleList;
            let arr = result.data;
            this.vehicleList = preList.concat(arr)
          }
      },
    async getPermissions(){
      let res = await userOperationPermissions();
      this.permissonList = res.data
      // console.log("车辆管理",this.permissonList.includes('vehicleAddBtn','vehicleModifyBtn'))
    },
    deleteItem(id){//删除车辆
        this.show=true
        this.id=id
    },
   async handleConfirm(){//调删除车辆接口
      await deleteVehicle({
        vehicleId:this.id
      })
       this.$toast('删除成功');
      this.pageNum=1
      await this.getVehicleList();
    },
    updateVehicle(item){//修改
      this.$router.push({
        name:'vehicleAdd',
        params:{
          id:item.vehicleId
        }
      })
    },

  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  background: #F4F5F7;
  @include sizingPadding(13px,13px);
  @include wh(100%, 100%);
  overflow-y: auto;
}
.navBar{
  margin-bottom: 46px;
  .rightWrap{
    @include wh(50px,20px);
    border-radius: 10px;
    opacity: 0.7;
    border: 1px solid #FFFFFF;
    @include flexTwoCenter;
    img{
      @include widHeiMar(9px,8px,4px);
    }
    .addTxt{
      @include fontWeightSize(bolder,11px);
      @include colorOpa(#FFFFFF,0.7);
    }
  }
}
.carItem{
  @include wh(100%,86px);
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
  @include radiusSizing(6px);
  padding: 11px 13px 11px 15px;
  margin-bottom: 10px;
  @include flexBetween;
  .carCode{
    @include flexColBet;
    .codeLeft{
      @include fontWeightSize(bold,14px)
    }
    .twoBtn{
      display: flex;
      button{
        border: none;
        padding: 4px  8px;
        border-radius: 3px;
        @include flexTwoCenter;
        @include fontWeightSize(bold,12px)
      }
      .del{
        border: 1px solid #DDDDDD;
        background-color: #FFFFFF;
      }
      .revise{
        @include bgFontColor( #FFFFFF,#354D93);
        margin-left: 15px;
      }
    }
  }
  .carType{
    width: 95%;
    white-space: nowrap; // 防止文本换行
    text-overflow: ellipsis; // 使用省略号表示超出部分
    overflow: hidden; // 隐藏超出容器宽度的内容
  }
  .carType,.zdJuhe{
    opacity: .7;
    @include fontWeightSize(400,12px)
  }
  .isYes{
    color: #09B820;
    @include fontWeightSize(400,12px);
  }
  .isNo{
    color: #FF0000;
    @include fontWeightSize(400,12px);
  }
}
</style>