CRM_26-01-13#story#7852,为推进人车梳理工作优化调度APP车辆、司机管理功能的需求

2026-01-09 14:02:14 +08:00
parent c6b23f6bb3
commit ccf61a73ee
3 changed files with 323 additions and 68 deletions
--- a/src/views/index/driverAdd.vue
+++ b/src/views/index/driverAdd.vue
@@ -67,7 +67,7 @@
      accept="image "
    />
  </div>
-  <div class="lineBot"></div>
+<!--  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
@@ -80,11 +80,12 @@
      :preview-size="54"
      accept="image "
    />
-  </div>
+  </div>-->
  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
-      <span>头像</span>
+      <img class="startImg" src="@/assets/start.png" />
+      <span>免冠正面照</span>
    </div>
    <van-uploader
      v-model="iconList"
@@ -307,7 +308,7 @@ export default {
      let res = await uploadImage(formData)
      this.drivingLicenceContrary = res.data;
    },
-    async iconListHandler(file) {           // 上传头像
+    async iconListHandler(file) {           // 上传免冠正面照
      const formData = new FormData();
      formData.append("file" , file.file);
      let res = await uploadImage(formData)
@@ -399,10 +400,14 @@ export default {
        this.$toast('驾驶证首页未上传')
        return
      }
-      if(!this.drivingLicenceContrary) {
+     /* if(!this.drivingLicenceContrary) {
        this.$toast('驾驶证副页未上传')
        return
-      }
+      }*/
+       if(!this.icon) {
+       this.$toast('免冠正面照未上传')
+       return
+     }
      let drivingLicenceName=this.drivingLicenceName.replace(/[^\u4e00-\u9fff]+/g, '');
      let driverName=this.driverName.replace(/[^\u4e00-\u9fff]+/g, '');

--- a/src/views/index/driverManage.vue
+++ b/src/views/index/driverManage.vue
@@ -18,51 +18,105 @@
        </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>
+    <van-search
+        v-model="searchVal"
+        show-action
+        placeholder="请输入司机姓名、电话、身份证号"
+        @search="resetHandler"
+    >
+      <template #action>
+        <div @click="resetHandler">搜索</div>
+      </template>
+    </van-search>
+    <div class="filterWrap">
+      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="idCardStatusList" placeholder="身份证录入状态" :class="{'customSel':true , 'has-value': idCardStatusList }" clearable>
+        <el-option
+            v-for="item in idCardStatusListOptions"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="driverLicenseStatusList" placeholder="驾驶证录入状态" :class="{'customSel':true , 'has-value': driverLicenseStatusList }" clearable>
+        <el-option
+            v-for="item in driverLicenseStatusListOptions"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStatusList" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStatusList }" clearable>
+        <el-option
+            v-for="item in authStatesOptions"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="wrap_cls">
+      <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" @click.stop="updateDriver(item)">
+            <div class="name-status">
+              <div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}
+                <span style="margin-left: 10px" :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
+              </div>
+              <div class="twoBtn">
+<!--               只有启用状态下才展示停用按钮-->
+                <button v-if="permissonList.includes('driverModifyBtn') && item.states?.code==1" class="del" @click.stop="handleStatus(item)">停用</button>
+                <!--              <button v-if="permissonList.includes('driverModifyBtn')" class="revise" @click="updateDriver(item)">修改</button>-->
+              </div>
            </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 class="juhe flex-between">
+              <span class="zdJuhe">录入状态</span>
+              <span class="flex-right" v-if="item.idCardStatusStr">
+                <span class="common_cls" :class="getClass(item.idCardStatus)?.className">{{item.idCardStatusStr}}</span>
+              </span>
            </div>
-            <div class="carType">
-              <span class="halfOpci">准驾车型:</span>
-              <span class="allOpci">{{item.drivingModel}}</span>
+            <div class="juhe flex-between">
+              <span class="zdJuhe">认证状态</span>
+              <span class="flex-right" v-if="item.driverLicenseStatusStr">
+                <span class="common_cls"  :class="getClass(item.driverLicenseStatus)?.className">{{item.driverLicenseStatusStr}}</span>
+              </span>
            </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>
+            <van-icon class="arrow_position" v-if="permissonList.includes('driverModifyBtn')" name="arrow" />
+<!--            <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>
-          <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>
+        </van-list>
+      </van-pull-refresh>

+    </div>
  </div>
 </template>

 <script>

 import {myMixins} from "@/utils/myMixins"
-import {driverList,enableAction,userOperationPermissions} from  "@/api/mine"
+import {driverList, enableAction, userOperationPermissions} from "@/api/mine"
+import {Dialog} from "vant";
 export default {
  name: "driverManage",
  mixins:[myMixins],
@@ -79,6 +133,40 @@ export default {
      loading: false,
      finished: false,
      permissonList:[],
+      searchVal:'',
+      idCardStatusList:[],
+      driverLicenseStatusList:[],
+      authStatusList:[],
+      idCardStatusListOptions: [{
+        name: '身份证未录入',
+        value: 0
+      },{
+        name: '身份证核验通过',
+        value: 1
+      },{
+        name: '身份证核验不通过',
+        value: 2
+      }],
+      authStatesOptions: [{
+        name: '免冠正面照未录入',
+        value: 1
+      },{
+        name: '免冠正面照认证通过',
+        value: 3
+      },{
+        name: '免冠正面照认证不通过',
+        value: 2
+      }],
+      driverLicenseStatusListOptions: [{
+        name: '驾驶证未录入',
+        value: 0
+      },{
+        name: '驾驶证认证通过',
+        value: 1
+      },{
+        name: '驾驶证认证不通过',
+        value: 2
+      }],
    }
  },
  mounted() {
@@ -88,6 +176,27 @@ export default {
    // this.getDriverList()
  },
  methods:{
+    getClass(id) {
+      const ids = String(id)
+      const steps = {
+        0: {
+          className: 'default_cls'
+        },
+        1: {
+          className: 'success_cls'
+        },
+        2: {
+          className: 'danger_cls'
+        },
+      }
+      return steps[ids] || { className: 'default_cls' }
+    },
+    async resetHandler() {
+      this.pageNum=1
+      this.finished = false;
+      this.total = 0;
+      await this.getDriverList();
+    },
    async onLoad(){
      await this.getDriverList()
      this.pageNum++;
@@ -118,7 +227,11 @@ export default {
    async getDriverList(){
        let res = await  driverList({
          pageNum:this.pageNum,
-          pageSize:this.pageSize
+          pageSize:this.pageSize,
+          searchVal: this.searchVal,
+          idCardStatusList: this.idCardStatusList,
+          driverLicenseStatusList: this.driverLicenseStatusList,
+          authStatusList: this.authStatusList,
        });
        if(res.code == 200){
          this.total=res.total
@@ -134,8 +247,6 @@ export default {
    async getPermissions(){
      let res = await userOperationPermissions();
      this.permissonList = res.data
-      // console.log("司机管理",this.permissonList.includes('driverAddBtn'))
-
    },
    async handleStatus(item){
        if(item.states.code === 0){
@@ -143,14 +254,23 @@ export default {
        }else{
          this.states = 0
        }
-       await enableAction({
-         driverId:item.driverId,
-         states:this.states
-       })
-      this.pageNum = 1;
-      await this.getDriverList();
+      Dialog.confirm({
+        message: '当前状态为启用，是否要改为停用?',
+      }).then(async () => {
+        await enableAction({
+          driverId:item.driverId,
+          states:this.states
+        })
+        this.pageNum = 1;
+        await this.getDriverList();
+      }).catch(() => {
+      });
+
    },
    updateDriver(item){
+      if(!this.permissonList.includes('driverModifyBtn')){//有权限才能修改
+        return
+      }
      // 在当前组件中进行路由跳转并传递参数对象
      this.$router.push({
        name: 'driverAdd',  // 目标路由的名称
@@ -185,7 +305,7 @@ export default {

 .wrap {
  background: #F4F5F7;
-  @include sizingPadding(13px,13px);
+  //@include sizingPadding(13px,13px);
  @include wh(100%, 100%);
  overflow-y: auto;
 }
@@ -208,7 +328,7 @@ export default {
 }

 .itemWrap {
-  @include wh(100%, 104px);
+  @include wh(100%, 140px);
  @include radiusSizing(6px);
  @include fontWeightSize(400, 12px);
  @include flexBetween;
@@ -216,6 +336,7 @@ export default {
  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
  margin-bottom: 10px;
  padding: 11px 13px 9px 15px;
+  position: relative;
  .halfOpci {
    opacity: .5;
    margin-right: 5px;
@@ -224,15 +345,15 @@ export default {
    opacity: 1;
  }
  .statusNo {
-    color: #FF0000;
+    color: red;
  }
  .statusYes {
-    color: #09B820
+    color: green
  }
 }

 .name-status {
-  @include flexColBet;
+  @include flexBetCen;
  .namephone {
    @include fontWeightSize(bold, 14px)
  }
@@ -256,6 +377,128 @@ export default {
      margin-left: 15px;
    }
  }
-
+}
+.filterWrap {
+  width: 100%;
+  padding-right: 13px;
+  padding-left: 13px;
+  display: flex;
+  overflow-x: auto; /* 允许横向滚动 */
+  white-space: nowrap; /* 防止子元素换行 */
+  padding-bottom: 10px;
+  -webkit-overflow-scrolling: touch; /* 在iOS上平滑滚动 */
+  scrollbar-width: none; /* Firefox */
+  padding-bottom: 10px;
+  /*padding: 10px;*/
+  margin-bottom: 10px;
+  background-color: #fff;
+  box-sizing: border-box;
+  &::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+  .customSel {
+    flex: 0 0 auto; /* 防止子元素被压缩 */
+    width: calc(33% - 5px);
+    /*width: 100%;*/
+    height: 25px;
+    background: #F5F5F5;
+    border-radius: 4px;
+    font-size: 10px;
+    color: #323233;
+    margin-right: 5px;
+    ::v-deep .el-input__inner{
+      padding: 0 2px;
+      height: 25px;
+      font-size: 10px;
+      background: #F5F5F5;
+      border-radius: 4px;
+      border: none;
+    }
+    ::v-deep .el-input__icon{
+      line-height: 25px;
+      font-size: 10px;
+      width: 18px;
+      color: #2A5094;
+    }
+    ::v-deep .el-input__suffix{
+      right: 2px;
+    }
+  }
+  .customInput{
+    /*width: 49%;*/
+    width: 130px;
+  }
+  .has-value  ::v-deep .el-input__inner{
+    background: #F1F6FF ;
+    color: #007BE9;
+    font-weight: bold;
+    padding-left: 8px;
+  }
+  .has-value ::v-deep .el-input__icon{
+    color: #007BE9;
+  }
+  .priceSel{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #C0C4CC;
+    .iconSpan{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 8px;
+    }
+  }
+  .has-price{
+    color: #007BE9 !important;
+  }
+}
+.wrap_cls {
+  width: 100%;
+  padding-left: 13px;
+  padding-right: 13px;
+  box-sizing: border-box;
+}
+.common_cls {
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 3px;
+  margin-right: 6px;
+}
+.default_cls {
+  background-color: #B0BEC5;
+}
+.danger_cls {
+  background-color: red;
+}
+.success_cls {
+  background-color: #4CAF50;
+}
+.info_cls {
+  background-color: #FF9800;
+}
+.main_cls {
+  background-color: #6C9BFF;
+}
+.arrow_position {
+  position: absolute;
+  right: 5px;
+  top: 50px;
+  font-size: 20px;
+  opacity: 0.6;
+}
+.carType,.zdJuhe{
+  opacity: .7;
+  @include fontWeightSize(400,12px);
+  margin-right: 8px;
+}
+/*.zdJuhe {
+  width: 80px;
+  text-align: right;
+  margin-left: -10px;
+}*/
+.flex-between{
+  line-height: 24px;
 }
 </style>
--- a/src/views/index/vehicleManage.vue
+++ b/src/views/index/vehicleManage.vue
@@ -21,7 +21,7 @@
  <van-search
    v-model="searchVal"
    show-action
-    placeholder="车辆名称/车牌号/车架号"
+    placeholder="请输入车辆名称、车牌号、车架号"
    @search="resetHandler"
  >
    <template #action>
@@ -39,6 +39,14 @@
          ></i>
        </template>
      </el-input>-->
+    <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStates" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStates }" clearable>
+      <el-option
+          v-for="item in authStatesOptions"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value">
+      </el-option>
+    </el-select>
      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="inputStatusList" placeholder="录入状态" :class="{'customSel':true , 'has-value': inputStatusList }" clearable>
        <el-option
          v-for="item in inputStatusListOptions"
@@ -49,14 +57,6 @@
      </el-select>
 <!--    </div>-->
 <!--    <div>-->
-      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStates" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStates }" clearable>
-        <el-option
-          v-for="item in authStatesOptions"
-          :key="item.value"
-          :label="item.name"
-          :value="item.value">
-        </el-option>
-      </el-select>
      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="liabilityInsuranceAuditList" placeholder="职业责任险" :class="{'customSel':true , 'has-value': liabilityInsuranceAuditList }" clearable>
        <el-option
          v-for="item in insuresOptions"
@@ -79,11 +79,12 @@
        <div class="carItem" v-for="(item,index) in vehicleList" :key="index" @click.stop="updateVehicle(item)">
          <div class="carCode">
            <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}
-              <span class="ml10" @click.stop="updateStatus(item)"  :class="{'insuranceSuccess': item.vehicleStatus == 1, 'insuranceDanger': item.vehicleStatus == 2 ,'insuranceGray': !item.vehicleStatus }">{{ item.vehicleStatus == 1 ? '启用' :( item.vehicleStatus == 2 ? '停用' : ( item.vehicleStatus == 12 ? '否-服务商停用' : '无状态')) }} </span>
+              <span class="ml10"  :class="{'insuranceSuccess': item.vehicleStatus == 1, 'insuranceDanger': item.vehicleStatus == 2 ,'insuranceGray': !item.vehicleStatus }">{{ item.vehicleStatus == 1 ? '启用' :( item.vehicleStatus == 2 ? '停用' : ( item.vehicleStatus == 12 ? '否-服务商停用' : '无状态')) }} </span>
            </div>
-
+            <div class="codeRight" v-if="item.vehicleStatus == 1" @click.stop="updateStatus(item)">停用</div>
          </div>
          <div class="juhe flex-between">
+            <span class="zdJuhe">核验认证</span>
            <span class="flex-right">
            <span class="common_cls" v-if="item.inputStatusString" :class="getClass(item.inputStatusString)?.className">{{item.inputStatusString}}</span>
            <span class="common_cls" v-if="item.authStateString" :class="getClass(item.authStateString)?.className">{{item.authStateString}}</span>
@@ -95,12 +96,12 @@
            <span class="common_cls" @click.stop="showTip(item.liabilityInsuranceAuditMsg)" :class="getClass(item.rescueInsurance)?.className">{{item.rescueInsurance}}</span>
          </span>
          </div>
-          <div class="juhe flex-between">
+<!--          <div class="juhe flex-between">
            <span class="zdJuhe">车辆信息</span>
            <span class="flex-right" v-if="item.auditStatusStr">
            <span class="common_cls" @click.stop="showTip(item.auditMsg)" :class="getClass(item.auditStatusStr)?.className">{{item.auditStatusStr}}</span>
          </span>
-          </div>
+          </div>-->
          <div class="juhe flex-between">
            <span class="zdJuhe">最近登录时间</span>
            <span class="flex-right">{{item.lastLoginTime}}</span>
@@ -412,6 +413,12 @@ export default {
    .codeLeft{
      @include fontWeightSize(bold,14px)
    }
+    .codeRight{
+      padding: 2px 8px;
+      border: 1px solid #DDDDDD;
+      border-radius: 3px;
+      font-weight: bold;
+    }
    .twoBtn{
      display: flex;
      align-items: center;