工单对账代码优化

src/styles/mixin.scss

@@ -39,6 +39,10 @@
     display: flex;
     justify-content: space-between;
 }
+@mixin flexColAround(){
+    display: flex;
+    justify-content: space-around;
+}
 @mixin flexCenter(){
     display: flex;
     align-items: center;

src/views/workOrder/accounting.vue

@@ -102,7 +102,7 @@
             <div>收取客户金额:</div>
             <div class="halfOpcity inputContent"><input type="number" v-model="form.supplierCustomerAmount"/>元</div>
         </div>
-        <div  class="flex-between bgDisable" >
+        <div  class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } " >
           <div>基本费用:</div>
           <div class="halfOpcity inputContent "  ><input  class="disable" type="number" :readonly="basePriceDisabled" v-model="form.supplierBasePrice"/><span >元</span></div>
         </div>
@@ -601,8 +601,7 @@ export default {
 }
 .title{
   @include fontWeightSize(bold,14px);
-  color: #323643;
+  @include colorOpa(#323643,0.66);
-  opacity: 0.66;
 }
 .line{
   @include wh(100%,2px);
@@ -671,11 +670,9 @@ img{
   .multipleTxt{
     @include wh(100%,87px);
     background: #FAFAFA;
-    border-radius: 3px;
+    @include sizingPadRadius(8px,8px,3px);
     border: 1px solid #E6E6E6;
     backdrop-filter: blur(10px);
-    padding: 8px;
-    box-sizing: border-box;
   }
   .btn{
     margin-top: 28px;
@@ -698,8 +695,9 @@ img{
     opacity: 1 !important;
     .reason{
       @include fontWeightSize(400,11px);
-      color: #FF8F37;
+      @include colorOpa(#FF8F37,1);
-      opacity: 1 !important;
+      //color: #FF8F37;
+      //opacity: 1 !important;
     }
     .camerImg{
       @include widHeiMar(54px,42px,5px);
@@ -739,12 +737,11 @@ img{
   }
   .btnCom{
     border: none;
-    //width: 48px;
-    //@include all-height(18px);
     padding: 4px 7px;
-    display: flex;
+    @include flexTwoCenter;
-    justify-content: center;
+    //display: flex;
-    align-items: center;
+    //justify-content: center;
+    //align-items: center;
     background: #354D93;
     border-radius: 3px;
     color: #FFFFFF;
@@ -768,26 +765,23 @@ img{
   margin-top: 28px;
   margin-bottom: 30px;
   @include flexColBet;
-  padding:0  15px;
+  @include sizingPadding(0 ,15px);
-  box-sizing: border-box;
   button{
     @include whLin(152px,39px);
-    border-radius: 5px;
-    color: #FFFFFF;
     @include fontWeightSize(bold,14px);
-    background-color: #354D93;
+    @include bgFontColor(#FFFFFF,#354D93);
+    border-radius: 5px;
   }
 }
 .btn{
   margin-top: 31px;
   margin-bottom: 31px;
-  display: flex;
+  @include flexColAround;
-  justify-content: space-around;
   box-sizing: border-box;
   button{
-    @include wh(105px,39px);
     line-height: 39px;
     border-radius: 5px;
+    @include wh(105px,39px);
     @include bgFontColor(#FFFFFF,#9EA7C0);
     @include fontWeightSize(bold,14px);
     border: none;

src/views/workOrder/aduitCompleteDetail.vue

@@ -43,8 +43,6 @@
       <span class="titleLeft">结算方式：</span>
       <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
         <span>{{orderInfo.taskSettleType?.label}}</span>
-        <!--        <span>包含公里数:15</span>-->
-        <!--        <span>超出单价:6</span>-->
       </div>
     </div>
     <div class="item">
@@ -120,7 +118,6 @@
 <script>
 import {myMixins} from "@/utils/myMixins"
 import {getAccountRecordDetail} from "@/api/mine"
-// import {leftCopy} from "@/utils/common";
 export default {
   name: "aduitCompleteDetail",
   mixins:[myMixins],
@@ -199,13 +196,6 @@ export default {
         this.accountStatus = this.orderInfo.accountStatus?.code
         this.appCode=this.orderInfo.appCode
       }
-      // if(this.accountStatus == 1 || this.accountStatus == 0){//没有记录，等待审核
-      //   leftCopy(this.form, {...res.data})
-      // }
-      // if(this.accountStatus == 2 || this.accountStatus == 3){//审核失败，再次审核
-      //   leftCopy(this.form, {...res.data})
-      //   this.auditFormShow = true;//是否显示审核数据
-      // }
       if(this.settleType == '实拖'  && this.basePriceDisabled){
         this.bcState = true
 
@@ -234,16 +224,6 @@ export default {
         this.basementFeeState = true
       }
     },
-
-    // async getDetail() {
-    //   let res = await getAccountRecordDetail({
-    //     id: this.id,
-    //     postfix: this.postfix
-    //   })
-    //   if (res.code === 200) {
-    //     this.orderInfo = res.data
-    //   }
-    // },
   }
 }
 </script>
@@ -252,8 +232,7 @@ export default {
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
 .wrap{
-  width: 100%;
+  @include wh(100%,100%);
-  height: 100%;
   background-color: #F4F5F7;
   overflow-y: auto;
 }
@@ -262,8 +241,7 @@ export default {
 }
 .title{
   @include fontWeightSize(bold,14px);
-  color: #323643;
+  @include colorOpa(#323643,0.66);
-  opacity: 0.66;
 }
 .line{
   @include wh(100%,2px);
@@ -273,11 +251,9 @@ export default {
   border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
 }
 .item{
-  display: flex;
+  @include flexCenter;
-  align-items: center;
   font-size: 12px !important;
   font-weight: 400 !important;
-  //@include fontWeightSize(400,12px) !important;
   .titleLeft{
     opacity: .5;
     line-height: 27px;
@@ -301,8 +277,7 @@ img{
   @include wh(100%, 438px);
 
   .inpInfo {
-    display: flex;
+    @include flexColBet;
-    justify-content: space-between;
     margin: 0 5px;
     color: #323643;
     line-height: 32px;
@@ -324,16 +299,12 @@ img{
 
     .inputContent {
       text-align: right;
-      //opacity: .5;e
       .btnComputed {
         width: 48px;
-        @include all-height(18px);
         text-align: center;
-        color: #FFFFFF;
-        background: #354D93;
         border-radius: 3px;
-        //position: absolute;
+        @include all-height(18px);
-        //right: 24px;
+        @include bgFontColor(#FFFFFF,#354D93);
       }
     }
   }

src/views/workOrder/workOrderReconciliation.vue

@@ -66,8 +66,8 @@
         </div>
       </div>
     </van-pull-refresh>
-    <div style="height: 85% ;background-color: #FAFAFA;display: flex;justify-content: center;align-items: center" v-show="show" >
+    <div class="bgEmptyImg" v-show="show" >
-      <img style="width: 100%" src="@/assets/empty.png" />
+      <img  src="@/assets/empty.png" />
     </div>
   </div>
 </template>
@@ -87,13 +87,12 @@ export default {
       pageNum: 1,
       pageSize: 10,
       total: 0,
-      queryType:1,
+      queryType:1,//默认显示待记账
-      queryTime:'',
+      queryTime:'',//默认查询时间为当年当月
-      showDatetime: false,
+      showDatetime: false,//时间选择器
       currentDate: new Date(),
-      ymTime: '',
+      ymTime: '',//默认显示时间为当年当月
       isLoading:"",
-      // show:false
     }
   },
   mounted() {
@@ -116,17 +115,6 @@ export default {
         this.isLoading = false;
       }, 1000);
     },
-    initIndex(){
-      if(this.activeIndex === 0){
-        this.queryType = 1
-      }else if(this.activeIndex === 1){
-        this.queryType = 3
-      }else if(this.activeIndex === 2){
-        this.queryType = 5
-      }else if(this.activeIndex === 3){
-        this.queryType = 7
-      }
-    },
     async changeTab(index) {
       this.activeIndex = index
       this.initIndex()
@@ -156,6 +144,17 @@ export default {
         }
       });
     },
+    initIndex(){
+      if(this.activeIndex === 0){
+        this.queryType = 1
+      }else if(this.activeIndex === 1){
+        this.queryType = 3
+      }else if(this.activeIndex === 2){
+        this.queryType = 5
+      }else if(this.activeIndex === 3){
+        this.queryType = 7
+      }
+    },
     goPageDetail(item){
       this.$router.push({
         name: 'aduitCompleteDetail',  // 目标路由的名称
@@ -181,7 +180,6 @@ export default {
       const month = (this.currentDate.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
       this.ymTime = year + '-' + month;
       this.queryTime=timeFormat(new Date());
-      // console.log(this.queryTime)
     },
   }
 }
@@ -193,9 +191,7 @@ export default {
 
 .wrap {
   @include wh(100%, 100%);
-  //background: #F4F5F7;
+  @include sizingPadding(0,12px);
-  box-sizing: border-box;
-  padding: 0 12px;
   overflow-y: auto;
 }
 
@@ -211,8 +207,7 @@ export default {
   margin-bottom: 46px;
 
   .rightWrap {
-    @include flexCenter;
+    @include flexBetCen;
-    justify-content: space-around;
     @include wh(106px, 26px);
     background: linear-gradient(180deg, #A3B8E9 0%, #6C81CD 100%);
     border-radius: 4px;
@@ -222,26 +217,22 @@ export default {
     .img1 {
       @include wh(1px, 18px)
     }
-
     .img2 {
       @include wh(7px, 5px)
     }
 
     .dateTitle {
       @include fontWeightSize(bolder, 12px);
-      color: #FFFFFF;
+      @include colorOpa(#FFFFFF,0.9);
-      opacity: .9;
     }
   }
 }
 
 .tab_wrap {
   @include fontWeightSize(bolder, 15px);
-  display: flex;
+  @include flexColBet;
-  justify-content: space-around;
+  @include colorOpa(#737373,0.7);
   padding: 10px 0 15px 0;
-  color: #737373;
-  opacity: .7;
   div {
     padding-top: 8px;
   }
@@ -266,12 +257,10 @@ export default {
   @include wh(100%, 96px);
   background: #FFFFFF;
   box-shadow: 0px 1px 4px 0px rgba(39, 52, 125, 0.05);
-  border-radius: 6px;
   border: 1px solid #E6E6E6;
   backdrop-filter: blur(5.602678571428572px);
   @include flexBetween;
-  box-sizing: border-box;
+  @include sizingPadRadius(10px,0,6px);
-  padding: 10px 0;
   margin-bottom: 10px;
   .common {
     @include flexColBet();
@@ -288,12 +277,11 @@ export default {
     margin-right: 14px;
   }
   .btn {
-    //@include wh(48px, 18px);
-    @include all-height(20px);
     text-align: center;
-    @include bgFontColor(#FFFFFF, #354D93);
     border-radius: 3px;
     border: none;
+    @include bgFontColor(#FFFFFF, #354D93);
+    @include all-height(20px);
   }
   .halfTxt {
     display: inline-block;
@@ -317,4 +305,12 @@ export default {
     color: #09B820;
   }
 }
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 85% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
 </style>