supplier-dispatch-h5/src/views/index/driverManage.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('driverAddBtn')">
          <div class="rightWrap" @click="addDriver" >
            <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="itemWrap" v-for="(item,index) in driverList" :key="index">
          <div class="name-status">
            <div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}</div>
            <div class="twoBtn">
              <button v-if="permissonList.includes('driverModifyBtn')" class="del" @click="handleStatus(item)">{{ item.states?.label == '启用'  ? '停用' : '启用' }}</button>
              <button v-if="permissonList.includes('driverModifyBtn')" class="revise" @click="updateDriver(item)">修改</button>
            </div>
          </div>
          <div class="" style="display: flex">
            <div class="sex" style="margin-right: 40px">
              <span class="halfOpci">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
              <span class="allOpci">{{item.sex?.label}}</span>
            </div>
            <div class="carType">
              <span class="halfOpci">准驾车型:</span>
              <span class="allOpci">{{item.drivingModel}}</span>
            </div>
          </div>
          <div>
            <span class="halfOpci">身份证号:</span>
            <span class="allOpci">{{ item.identityCardNumber }}</span>
          </div>
          <div>
            <span class="halfOpci">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
            <span :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
          </div>
        </div>

      </van-list>
  </van-pull-refresh>

  </div>
</template>

<script>

import {myMixins} from "@/utils/myMixins"
import {driverList,enableAction,userOperationPermissions} from  "@/api/mine"
export default {
  name: "driverManage",
  mixins:[myMixins],
  data(){
    return{
      pageNum:1,
      pageSize:10,
      total:'',
      driverList:[],
      states:'',
      supplierType:'',
      count: 0,
      isLoading: false,
      loading: false,
      finished: false,
      permissonList:[],
    }
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.supplierType = urlParams.get('supplierType');
    this.getPermissions();
    // this.getDriverList()
  },
  methods:{
    async onLoad(){
      await this.getDriverList()
      this.pageNum++;
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (this.driverList.length >= this.total) {
        this.finished = true;
      }
    },
    onRefresh() {
      this.pageNum=1;
      // this.getDriverList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    addDriver(){
      if(this.supplierType == 1){
        this.$toast("无权添加")
      }else{
        this.$router.push({
          name: 'driverAdd',
        })
      }
    },
    async getDriverList(){
        let res = await  driverList({
          pageNum:this.pageNum,
          pageSize:this.pageSize
        });
        if(res.code == 200){
          this.total=res.total
          if(this.pageNum == 1){
            this.driverList=res.data
          }else{
            let preList = this.driverList;
            let arr = res.data;
            this.driverList = preList.concat(arr)
          }
        }
     },
    async getPermissions(){
      let res = await userOperationPermissions();
      this.permissonList = res.data
      // console.log("司机管理",this.permissonList.includes('driverAddBtn'))

    },
    async handleStatus(item){
        if(item.states.code === 0){
            this.states = 1
        }else{
          this.states = 0
        }
       await enableAction({
         driverId:item.driverId,
         states:this.states
       })
      this.pageNum = 1;
      await this.getDriverList();
    },
    updateDriver(item){
      // 在当前组件中进行路由跳转并传递参数对象
      this.$router.push({
        name: 'driverAdd',  // 目标路由的名称
        params: {
          id: item.driverId,                  // 参数对象的属性
          name: item.driverName,
          phone:item.driverPhone,
          drivingModel:item.drivingModel,
          identityCardNumber:item.identityCardNumber,
          states:item.states.code,
          createTime:item.createTime,
          supplierType:this.supplierType,
          drivingBeginDate: item.drivingBeginDate,
          drivingLicenceContrary: item.drivingLicenceContrary,
          drivingLicenceFront: item.drivingLicenceFront,
          drivingLicenceValidityDate: item.drivingLicenceValidityDate,
          icon: item.icon,
          identityCardContrary: item.identityCardContrary,
          identityCardFront: item.identityCardFront,
          lssueDate: item.lssueDate,
          drivingLicenceName: item.drivingLicenceName
        }
      });
    },
  }
}
</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);
    }
  }
}

.itemWrap {
  @include wh(100%, 104px);
  @include radiusSizing(6px);
  @include fontWeightSize(400, 12px);
  @include flexBetween;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
  margin-bottom: 10px;
  padding: 11px 13px 9px 15px;
  .halfOpci {
    opacity: .5;
    margin-right: 5px;
  }
  .allOpci {
    opacity: 1;
  }
  .statusNo {
    color: #FF0000;
  }
  .statusYes {
    color: #09B820
  }
}

.name-status {
  @include flexColBet;
  .namephone {
    @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;
    }
  }

}
</style>