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

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,9 +400,13 @@ 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, '');

src/views/index/driverManage.vue

@@ -18,6 +18,43 @@
         </template>
       </van-nav-bar>
     </div>
+    <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"
@@ -25,13 +62,28 @@
             finished-text="没有更多了"
             @load="onLoad"
         >
-        <div class="itemWrap" v-for="(item,index) in driverList" :key="index">
+          <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 }}</div>
+              <div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}
-            <div class="twoBtn">
+                <span style="margin-left: 10px" :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
-              <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 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 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="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">
@@ -47,22 +99,24 @@
               <span class="halfOpci">身份证号:</span>
               <span class="allOpci">{{ item.identityCardNumber }}</span>
             </div>
-          <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>
-
         </van-list>
       </van-pull-refresh>
 
     </div>
+  </div>
 </template>
 
 <script>
 
 import {myMixins} from "@/utils/myMixins"
 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
         }
+      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>

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;