story#7131:调度APP车辆管理功能调整的需求-新增搜索和筛选功能

src/views/index/vehicleAdd.vue

@@ -743,7 +743,7 @@ export default {
       this.vehicleLicense = result.vehicleLicense;
       this.vehicleFrontLicensePlate = result.vehicleFrontLicensePlate;
       this.hasLiabilityInsurance = result.hasLiabilityInsurance
-      this.vehicleStatus = result.vehicleStatus
+      this.insuranceCorp = result.insuranceCorp;
       if(this.insurancePicturePhoto) {
         this.insurancePictureFiles = [{url: this.insurancePicturePhoto}]
       }
@@ -848,7 +848,7 @@ export default {
           vehicleId:this.id ? this.id : '',
           plateNumber:this.carNum ? this.carNum :'',
           vehicleType:this.selectedOption?.length>0 ? this.selectedOption.join(',') : '',
-          hasPolymerization:this.isJoin,
+          // hasPolymerization:this.isJoin,
           serviceIds:this.serviceIds ? this.serviceIds : [],
           vehicleLicenseFront: this.vehicleLicenseFront,
           vehicleLicenseBack: this.vehicleLicenseBack,

src/views/index/vehicleManage.vue

@@ -18,9 +18,19 @@
       </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">
 <!--    <div >-->
-      <el-input v-model="searchVal" @blur="resetHandler" placeholder="车辆名称/车牌号/车架号" :class="{'customSel':true,'customInput':true , 'has-value': searchVal }" >
+      <!--<el-input v-model="searchVal" @blur="resetHandler" placeholder="车辆名称/车牌号/车架号" :class="{'customSel':true,'customInput':true , 'has-value': searchVal }" >
         <template #suffix>
           <i
             v-if="searchVal"
@@ -28,7 +38,7 @@
             @click="searchVal = ''"
           ></i>
         </template>
-      </el-input>
+      </el-input>-->
       <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"
@@ -47,7 +57,7 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <el-select @change="resetHandler" multiple :collapse-tags="true" v-model="liabilityInsuranceAudit" placeholder="职业责任险" :class="{'customSel':true , 'has-value': liabilityInsuranceAudit }" clearable>
+      <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"
           :key="item.value"
@@ -58,6 +68,7 @@
 <!--    </div>-->
 
   </div>
+  <div class="wrap_cls">
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
       <van-list
         v-model="loading"
@@ -65,40 +76,43 @@
         finished-text="没有更多了"
         @load="onLoad"
       >
-      <div class="carItem" v-for="(item,index) in vehicleList" :key="index">
+        <div class="carItem" v-for="(item,index) in vehicleList" :key="index" @click="updateVehicle(item)">
           <div class="carCode">
-          <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
+            <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}
-          <div class="twoBtn">
+              <span class="ml10" v-if="item.vehicleStatus" :class="{'insuranceSuccess': item.vehicleStatus == 1, 'insuranceDanger': item.vehicleStatus != 1}">{{ item.vehicleStatus == 1 ? '启用' : '停用' }} </span>
-            <span> {{ item.vehicleStatus == 1 ? '正常' : '停用' }} </span>
-<!--            <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="juhe flex-between">
-          <span class="zdJuhe mr10">核验：<span :class="item.inputStatus == 1  ? 'isYes' :'isNo'">{{item.inputStatus == 1  ? '已核验' :'未核验'}}</span></span>
+            <span class="zdJuhe">核验认证</span>
-          <span class="zdJuhe">认证：<span :class="item.authStatus == 1  ? 'isYes' :'isNo'">{{item.authStatus == 1  ? '已认证' :'未认证'}}</span></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>
+          </span>
           </div>
-        <div class="juhe">
+          <div class="juhe flex-between">
-          <span class="zdJuhe mr10">最近登录时间：{{item.lastLoginTime}}</span>
+            <span class="zdJuhe">救援责任险</span>
+            <span class="flex-right" v-if="item.rescueInsurance">
+            <span class="common_cls" @click.stop="showTip(item.liabilityInsuranceAuditMsg)" :class="getClass(item.rescueInsurance)?.className">{{item.rescueInsurance}}</span>
+          </span>
           </div>
-        <div class="juhe">
+          <div class="juhe flex-between">
-          <span class="zdJuhe mr10">救援职业责任险情况：<span :class="getClass(item.liabilityInsuranceAudit)?.className">{{getClass(item.liabilityInsuranceAudit)?.title}}</span></span>
+            <span class="zdJuhe">最近登录时间</span>
+            <span class="flex-right">{{item.lastLoginTime}}</span>
           </div>
-        <!--<div class="carType">{{ item.serviceName }}</div>
+          <van-icon class="arrow_position" v-if="permissonList.includes('vehicleModifyBtn')" name="arrow" />
-        <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>
+  </div>
+
   <van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
 </div>
 
 </template>
 
 <script>
+  import {Dialog} from "vant";
 import { myMixins} from "@/utils/myMixins";
 import {supplierVehicleList,deleteVehicle,userOperationPermissions} from "@/api/mine"
 export default {
@@ -115,11 +129,12 @@ export default {
       isLoading: false,
       loading: false,
       finished: false,
+      showPopover: false,
       permissonList:[],
       inputStatusList: [],
       searchVal: '',
       authStates: [],
-      liabilityInsuranceAudit: [],
+      liabilityInsuranceAuditList: [],
       inputStatusListOptions: [{
         name: '行驶证未录入',
         value: 0
@@ -166,36 +181,54 @@ export default {
     this.getPermissions();
   },
   methods:{
+    showTip(msg) {
+      Dialog.alert({
+        title: '未通过原因',
+        message: msg,
+      }).then(() => {
+      });
+    },
     getClass(id) {
       const ids = String(id)
       const steps = {
-        '1': {
+        '待审核': {
-          title: '待审核',
+          className: 'main_cls'
-          className: 'insuranceMain'
         },
-        '2': {
+        '有责任险': {
-          title: '有责任险',
+          className: 'success_cls'
-          className: 'insuranceSuccess'
         },
-        '3': {
+        '有货物险': {
-          title: '有货物险',
+          className: 'info_cls'
-          className: 'insuranceTip'
         },
-        '4': {
+        '未通过': {
-          title: '未通过(点击显示原因)',
+          className: 'danger_cls'
-          className: 'insuranceDanger'
         },
-        '5': {
+        '无': {
-          title: '无',
+          className: 'default_cls'
-          className: ''
         },
-        '6': {
+        '空': {
-          title: '空',
+          className: 'default_cls'
-          className: ''
+        },
+        '行驶证未录入': {
+          className: 'default_cls'
+        },
+        '行驶证验证通过': {
+          className: 'success_cls'
+        },
+        '行驶证核验不通过': {
+          className: 'danger_cls'
+        },
+        '车头照未录入': {
+          className: 'default_cls'
+        },
+        '车头照认证通过': {
+          className: 'success_cls'
+        },
+        '车头照认证不通过': {
+          className: 'danger_cls'
         }
       }
-
+      return steps[ids] || { className: 'default_cls' }
-      return steps[ids] || { title: '', className: '' }
     },
     async onLoad(){
       await this.getVehicleList()
@@ -218,7 +251,11 @@ export default {
     async getVehicleList(){
         let result = await supplierVehicleList({
           pageNum:this.pageNum,
-          pageSize:this.pageSize
+          pageSize:this.pageSize,
+          searchVal: this.searchVal,
+          inputStatusList: this.inputStatusList,
+          authStates: this.authStates,
+          liabilityInsuranceAuditList: this.liabilityInsuranceAuditList,
         })
           this.total=result.total
           if(this.pageNum == 1){// 第一页直接赋值
@@ -253,12 +290,14 @@ export default {
       // }, 1000)
     },
     updateVehicle(item){//修改
+      if( this.permissonList.includes('vehicleModifyBtn') ) {
         this.$router.push({
           name:'vehicleAdd',
           params:{
             id:item.vehicleId
           }
         })
+      }
     },
 
   }
@@ -268,12 +307,41 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.ml10 {
+  margin-left: 10px;
+}
 .wrap{
   background: #F4F5F7;
-  @include sizingPadding(13px,13px);
   @include wh(100%, 100%);
   overflow-y: auto;
 }
+.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;
+}
 .navBar{
   margin-bottom: 46px;
   .rightWrap{
@@ -292,13 +360,14 @@ export default {
   }
 }
 .carItem{
-  @include wh(100%,110px);
+  @include wh(100%,120px);
   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;
+  position: relative;
   .carCode{
     @include flexColBet;
     .codeLeft{
@@ -334,6 +403,11 @@ export default {
     opacity: .7;
     @include fontWeightSize(400,12px)
   }
+  .zdJuhe {
+    width: 80px;
+    text-align: right;
+    margin-left: -10px;
+  }
   .isYes{
     color: #09B820;
     @include fontWeightSize(400,12px);
@@ -342,6 +416,13 @@ export default {
     color: #FF0000;
     @include fontWeightSize(400,12px);
   }
+}
+.arrow_position {
+  position: absolute;
+  right: 5px;
+  top: 50px;
+  font-size: 20px;
+  opacity: 0.6;
 }
   .mr10 {
     margin-right: 10px;
@@ -361,11 +442,13 @@ export default {
   .flex-between {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
 .filterWrap {
-  width: calc(100% - 5px);
+  width: 100%;
-  padding-right: 5px;
+  padding-right: 13px;
+  padding-left: 13px;
   display: flex;
   overflow-x: auto; /* 允许横向滚动 */
   white-space: nowrap; /* 防止子元素换行 */
@@ -373,7 +456,7 @@ export default {
   -webkit-overflow-scrolling: touch; /* 在iOS上平滑滚动 */
   scrollbar-width: none; /* Firefox */
   padding-bottom: 10px;
-  padding: 10px;
+  /*padding: 10px;*/
   margin-bottom: 10px;
   background-color: #fff;
   box-sizing: border-box;
@@ -382,14 +465,14 @@ export default {
   }
   .customSel {
     flex: 0 0 auto; /* 防止子元素被压缩 */
-    width: 100px;
+    width: calc(33% - 5px);
     /*width: 100%;*/
     height: 25px;
     background: #F5F5F5;
     border-radius: 4px;
     font-size: 10px;
     color: #323233;
-    margin-left: 5px;
+    margin-right: 5px;
     ::v-deep .el-input__inner{
       padding: 0 2px;
       height: 25px;
@@ -445,5 +528,11 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+  .flex-right {
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+    margin-left: 10px;
+  }
 
 </style>