司机管理模块，开票通知模块

src/views/workOrder/accounting.vue

@@ -1,44 +1,55 @@
 <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="h5GoBack"
+    />
+  </div>
   <div class="baseInfo common">
     <div class="title">基本信息:</div>
     <div class="line"></div>
     <div class="item">
-      <span class="title">工单编号：</span>
-      <span class="content" id="copyText">ZD230626124283</span>
+      <span class="titleLeft">工单编号：</span>
+      <span class="content" id="copyText">{{ orderInfo.orderCode }}</span>
       <img @click="copyText" src="@/assets/copy.png" />
     </div>
     <div class="item">
-      <span class="title">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
-      <span class="content">湘H-DD899</span>
+      <span class="titleLeft">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
+      <span class="content">{{orderInfo.plateNumber}}</span>
     </div>
     <div class="item">
-      <span class="title">服务类型：</span>
-      <span class="content" >搭电</span>
+      <span class="titleLeft">服务类型：</span>
+      <span class="content" >{{ orderInfo.serviceName }}</span>
     </div>
     <div class="item">
-      <span class="title">工单状态：</span>
-      <span class="content" >未完成</span>
+      <span class="titleLeft">工单状态：</span>
+      <span class="content" >{{ orderInfo.taskSuccessStatus?.label }}</span>
     </div>
     <div class="item">
-      <span class="title">结算比例：</span>
-      <span class="content" >按服务不成功结算</span>
+      <span class="titleLeft">结算比例：</span>
+      <span class="content" >{{ orderInfo.supplierSettleRatio?.label }}</span>
     </div>
     <div class="item">
-      <span class="title">结算类型：</span>
-      <span class="content" >系统一口价</span>
+      <span class="titleLeft">结算类型：</span>
+      <span class="content" >{{ orderInfo.settleType?.label }}</span>
     </div>
     <div class="item" >
-      <span class="title">结算方式：</span>
+      <span class="titleLeft">结算方式：</span>
       <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
-        <span>起步价:135</span>
-        <span>包含公里数:15</span>
-        <span>超出单价:6</span>
+        <span>{{orderInfo.taskSettleType?.label}}</span>
+<!--        <span>包含公里数:15</span>-->
+<!--        <span>超出单价:6</span>-->
          </div>
     </div>
     <div class="item">
-      <span class="title">扣除责任险费：</span>
-      <span class="content">0</span>
+      <span class="titleLeft">扣除责任险费：</span>
+      <span class="content">{{orderInfo.policyAmount}} {{orderInfo.cutInsuranceAmount}}</span>
     </div>
 
   </div>
@@ -55,10 +66,10 @@
         <div>备注说明:</div>
       </div>
       <div class="inputContent">
-        <div class="halfOpcity"><input type="number"/>公里</div>
-        <div class="halfOpcity"><input type="number"/>元</div>
-        <div class="halfOpcity"><input type="number"/>元</div>
+        <div class="halfOpcity"><input type="number" />公里</div>
         <div class="halfOpcity"><input type="number"/>元</div>
+        <div class="halfOpcity"><input type="number" v-model="form.supplierTyreAmount"/>元</div>
+        <div class="halfOpcity"><input type="number" v-model="form.supplierCustomerAmount"/>元</div>
         <div class="btnComputed">计算</div>
       </div>
     </div>
@@ -70,11 +81,44 @@
 
 <script>
 import {myMixins} from '@/utils/myMixins'
+import {getAccountRecordDetail} from "@/api/mine"
 import TwoCommonBtn from "@/components/twoBtnCommon.vue"
+import order from "../../store/modules/order";
 export default {
   name: "accountingView",
+  computed: {
+    order() {
+      return order
+    }
+  },
   mixins:[myMixins],
+  data(){
+    return{
+      id:'',
+      postfix:'',
+      orderInfo:{},
+      form:{
+        supplierCustomerAmount:'',
+        supplierTyreAmount:'',
+      }
+    }
+  },
+  async mounted() {
+    this.id=this.$route.params?.id;
+    this.postfix=this.$route.params?.postfix;
+    await this.getDetail()
+  },
   methods:{
+    async getDetail(){
+      let res= await getAccountRecordDetail({
+        id:this.id,
+        postfix:this.postfix
+      })
+      if(res.code === 200){
+        this.orderInfo=res.data
+      }
+      // console.log("res",res)
+    },
     cancelBtn(){
       console.log("取消")
     },
@@ -90,11 +134,15 @@ export default {
 
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
 .wrap{
   width: 100%;
   height: 100%;
   background-color: #F4F5F7;
 }
+.navBar{
+  margin-bottom: 46px;
+}
 .title{
   @include fontWeightSize(bold,14px);
   color: #323643;
@@ -110,8 +158,10 @@ export default {
 .item{
   display: flex;
   align-items: center;
-  @include fontWeightSize(400,12px);
-  .title{
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  //@include fontWeightSize(400,12px) !important;
+  .titleLeft{
     opacity: .5;
     line-height: 27px;
   }
@@ -128,6 +178,7 @@ img{
 }
 .baseInfo{
   @include wh(100%,276px);
+
 }
 .supplierData{
   @include wh(100%,438px);

src/views/workOrder/workOrderReconciliation.vue

@@ -1,24 +1,152 @@
 <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="goPage"
+  <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">
+          <div class="rightWrap">
+            <span class="dateTitle">{{ ymTime }}</span>
+            <img src="@/assets/line.png" class="img1"/>
+            <img src="@/assets/arrow_bottom.png" class="img2" @click="showDatetime = !showDatetime"/>
+          </div>
+        </template>
+      </van-nav-bar>
+    </div>
+    <van-datetime-picker
+        class="dataTime"
+        v-if="showDatetime"
+        v-model="currentDate"
+        type="year-month"
+        title="查询时间"
+        @confirm="onConfirm"
+        @cancel="showDatetime == false"
     />
-  </div>
-</div>
+    <div class="tab_wrap">
+      <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+           @click="changeTab(index)">
+        {{ item.name }}
+      </div>
+    </div>
+    <div >
+      <div  class="content_wrap" v-for="(item,index) in orderList" :key="index">
+        <div class="codeTxt common">
+          <div class="leftStatus ">
+            <span style="margin-right: 20px" class="orderCode">{{item.orderCode}}</span>
+            <span class="carCode">{{ item.plateNumber }}</span>
+          </div>
+          <div class="rightBtn">
+            <span class="serviceStatus">{{ item.taskStatus?.label }}</span>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="supplier">
+          <span class="halfTxt">服务商:</span>
+          <span class="allTxt">{{ item.supplierName }}</span>
+        </div>
+        <div class="status common">
+          <div class="leftStatus" >
+            <span class="halfTxt">审核状态:</span>
+            <span class="allTxt">{{ item.accountStatus?.label }}</span>
+          </div>
+          <div class="rightBtn">
+            <button class="btn" v-if="queryType == 1" @click="handleAccounting(item)">记账</button>
+            <button class="btn"  v-if="[3, 5].includes(queryType)">重新记账</button>
+            <button class="btn"  v-if="queryType == 7">查看详情</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+ </div>
 </template>
 
 <script>
+import {myMixins} from "@/utils/myMixins"
+import {accountRecordList} from "@/api/mine"
+import {timeFormat} from "@/utils/common"
 export default {
   name: "workOrderReconciliation",
-  methods:{
-
+  mixins: [myMixins],
+  data() {
+    return {
+      tabArr: [{name: '待记账', status: 1}, {name: '待审核', status: 3}, {name: '审核失败', status: 5}, {name: '审核完成', status: 7}],
+      activeIndex: 0,
+      orderList: [],
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      queryType:1,
+      queryTime:'',
+      showDatetime: false,
+      currentDate: new Date(),
+      ymTime: ''
+    }
+  },
+  mounted() {
+    this.initSelectTime();
+    this.getList();
+  },
+  methods: {
+    async changeTab(index) {
+      this.activeIndex = index
+      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
+      }
+      this.total = 0;
+      this.pageNum = 1
+      this.orderList = [];
+      await this.getList()
+    },
+    async getList(){
+      let res = await accountRecordList({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        queryType:this.queryType,
+        queryTime:this.queryTime
+      })
+      if(res.code === 200){
+        this.orderList = res.data;
+      }
+    },
+    handleAccounting(item){
+      console.log("iiii",item)
+      this.$router.push({
+        name: 'accountingView',  // 目标路由的名称
+        params: {
+          id: item.id,                  // 参数对象的属性
+          postfix:item.postfix
+        }
+      });
+    },
+    onConfirm(value) {
+      this.showDatetime = false
+      const date = new Date(value);
+      const year = date.getFullYear(); // 获取年份，结果为 2023
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
+      this.ymTime = year + '-' + month
+      this.queryTime=timeFormat(value);
+      this.getList();
+    },
+    initSelectTime() {//初始化查询时间
+      const year = this.currentDate.getFullYear(); // 获取年份，结果为 2023
+      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)
+    },
   }
 }
 </script>
@@ -26,7 +154,141 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
-.navBar{
+
+.wrap {
+  @include wh(100%, 100%);
+  background: #F4F5F7;
+  box-sizing: border-box;
+  padding: 0 12px;
+  overflow-y: auto;
+}
+
+.dataTime {
+  position: absolute;
+  z-index: 11;
+  top: 46px;
+  right: 0;
+}
+
+.navBar {
   margin-bottom: 46px;
+
+  .rightWrap {
+    @include flexCenter;
+    justify-content: space-around;
+    @include wh(106px, 26px);
+    background: linear-gradient(180deg, #A3B8E9 0%, #6C81CD 100%);
+    border-radius: 4px;
+    border: 1px solid;
+    border-image: linear-gradient(270deg, rgba(103, 122, 193, 1), rgba(160, 178, 226, 1), rgba(160, 178, 226, 1), rgba(103, 122, 193, 1)) 1 1;
+
+    .img1 {
+      @include wh(1px, 18px)
+    }
+
+    .img2 {
+      @include wh(7px, 5px)
+    }
+
+    .dateTitle {
+      @include fontWeightSize(bolder, 12px);
+      color: #FFFFFF;
+      opacity: .9;
+    }
+  }
+}
+
+.tab_wrap {
+  @include fontWeightSize(bolder, 15px);
+  display: flex;
+  justify-content: space-around;
+  padding: 10px 0 15px 0;
+  color: #737373;
+  opacity: .7;
+
+  div {
+    padding-top: 8px;
+  }
+
+  .active {
+    color: #3678FF;
+    position: relative;
+  }
+
+  .active:after {
+    content: '';
+    display: block;
+    width: 18px;
+    height: 3px;
+    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.content_wrap {
+  @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;
+  padding: 10px 0;
+  margin-bottom: 10px;
+  .common {
+    @include flexColBet();
+    margin-left: 18px;
+    margin-right: 14px;
+
+  }
+
+  .line {
+    @include wh(100%, 1px);
+    background: #E9E9EA;
+    opacity: 0.6;
+  }
+
+  .supplier {
+    margin-left: 18px;
+    margin-right: 14px;
+  }
+
+  .btn {
+    //@include wh(48px, 18px);
+    @include all-height(20px);
+    text-align: center;
+    @include bgFontColor(#FFFFFF, #354D93);
+    border-radius: 3px;
+    border: none;
+  }
+
+  .halfTxt {
+    display: inline-block;
+    width: 55px;
+    @include fontWeightSize(400, 12px);
+    opacity: .5;
+  }
+
+  .allTxt {
+    @include fontWeightSize(400, 12px)
+  }
+
+  .orderCode {
+    @include fontWeightSize(bold, 13px)
+  }
+
+  .carCode {
+    @include fontWeightSize(bold, 12px)
+  }
+
+  .serviceStatus {
+    @include fontWeightSize(bolder, 13x);
+    color: #09B820;
+  }
 }
 </style>