task#15638,电瓶详情列表根据时间排序

src/api/order.js

@@ -77,3 +77,21 @@ export function updateOrderSettlement(data){
     data
   })
 }
+// 电瓶数量列表
+export function batteryCountList(){
+  return request({
+    url:'/supplierAppV2/dispatchApp/battery/batteryCountList',
+    method:'POST',
+    contentType:'application/json',
+    // data
+  })
+}
+// 电瓶详情
+export function batteryDetailList (data){
+  return request({
+    url:'/supplierAppV2/dispatchApp/battery/batteryDetailList',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}

src/router/index.js

@@ -215,6 +215,22 @@ const routes = [
             title:'维保申请'
         }
     },
+    {
+        path: '/batteryList',
+        name: 'batteryList',
+        component:()=>import('@/views/battery/batteryList.vue'),
+        meta: {
+            title:'电瓶进销存'
+        }
+    },
+    {
+        path: '/batteryDetail',
+        name: 'batteryDetail',
+        component:()=>import('@/views/battery/batteryDetail.vue'),
+        meta: {
+            title:'电瓶详情'
+        }
+    },
     ...kpiRouter,
   ]
 

src/views/battery/batteryDetail.vue

@@ -0,0 +1,138 @@
+<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"
+      > </van-nav-bar>
+    </div>
+    <div class="container" v-if="batteryDetailList && batteryDetailList.length>0">
+      <div class="itemWrap" v-for="(item,index) in batteryDetailList" :key="index">
+        <div>
+          <span class="halfOpci">设备号</span>
+          <span class="allOpci">{{ item.productNo }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">品牌</span>
+          <span class="allOpci">{{ item.brand }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">型号</span>
+          <span class="allOpci">{{ item.model }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">售卖人员</span>
+          <span class="allOpci">{{ item.saleName }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">售卖时间</span>
+          <span class="allOpci">{{ item.createTime }}</span>
+        </div>
+      </div></div>
+  </div>
+</template>
+
+<script>
+
+import {myMixins} from "@/utils/myMixins"
+import {batteryDetailList} from  "@/api/order"
+export default {
+  name: "batteryDetail",
+  mixins:[myMixins],
+  data(){
+    return{
+      batteryDetailList:[],
+      isLoading: false,
+      loading: false,
+      brand: '',
+      model:'',
+    }
+  },
+  async mounted() {
+    this.brand = this.$route.params.brand;
+    this.model = this.$route.params.model;
+    await this.getDetailList()
+  },
+  methods:{
+    async getDetailList(){
+      let res = await batteryDetailList({
+        brand:this.brand,
+        model:this.model,
+      })
+      this.batteryDetailList=res.data.reverse();
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixin.scss';
+@import "@/styles/common.scss";
+
+.wrap {
+  background: #F4F5F7;
+  @include wh(100%, 100%);
+}
+.navBar{
+  margin-bottom: 46px;
+  .rightWrap{
+    @include wh(50px,20px);
+    border-radius: 10px;
+    opacity: 0.7;
+    border: 1px solid #FFFFFF;
+    @include flexTwoCenter;
+    img{
+      @include widHeiMar(9px,8px,4px);
+    }
+    .addTxt{
+      @include fontWeightSize(bolder,11px);
+      @include colorOpa( #FFFFFF,0.7);
+    }
+  }
+}
+.container{
+  @include wh(100%, calc(100% - 56px));
+  overflow-y: auto;
+  @include sizingPadding(13px,13px);
+}
+.itemWrap {
+  @include wh(100%, 104px);
+  @include radiusSizing(6px);
+  @include fontWeightSize(400, 12px);
+  @include flexBetween;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  margin-bottom: 10px;
+  padding: 11px 13px 9px 15px;
+  position: relative;
+  .halfOpci {
+    display: inline-block;
+    width: 60px;
+    opacity: .5;
+    margin-right: 5px;
+  }
+  .allOpci {
+    opacity: 1;
+  }
+  .statusNo {
+    color: #FF0000;
+  }
+  .statusYes {
+    color: #09B820
+  }
+  .img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 35%;
+    cursor: pointer;
+  }
+}
+
+</style>

src/views/battery/batteryList.vue

@@ -0,0 +1,171 @@
+<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="goBack"
+      >
+      </van-nav-bar>
+    </div>
+    <van-field class="input" right-icon="search" v-model="keyword" placeholder="请输入品牌或型号"   @input="filterBatteryList"/>
+    <div class="container" v-if="batteryList && batteryList.length>0">
+      <div class="itemWrap" v-for="(item,index) in batteryList" :key="index">
+        <div>
+          <span class="halfOpci">品牌</span>
+          <span class="allOpci">{{ item.brand }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">型号</span>
+          <span class="allOpci">{{ item.model }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">总量</span>
+          <span class="allOpci">{{ item.totalNum }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">库存数量</span>
+          <span class="allOpci">{{ item.stockNum }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">已售数量</span>
+          <span class="allOpci">{{ item.sellNum }}</span>
+        </div>
+        <img @click="goBatteryDetail(item)" class="img" src="@/assets/arrow_rht.png" />
+      </div>
+    </div>
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {myMixins} from "@/utils/myMixins"
+import {batteryCountList} from  "@/api/order"
+export default {
+  name: "batteryList",
+  mixins:[myMixins],
+  data(){
+    return{
+      batteryList:[],
+      isLoading: false,
+      keyword:'',
+    }
+  },
+  computed:{
+    show() {
+      return (this.batteryList.length < 0 || this.batteryList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
+  mounted() {
+    this.getList()
+  },
+  methods:{
+    async filterBatteryList(){
+      await this.getList()
+      this.batteryList = this.batteryList.filter(item =>
+          item.brand.includes(this.keyword) || item.model.includes(this.keyword)
+      );
+    },
+    goBatteryDetail(item){//电瓶详情
+      this.$router.push({
+        name: "batteryDetail",
+        params: {
+          brand: item.brand,
+          model: item.model,
+        }
+      })
+    },
+    async getList(){
+      let res = await batteryCountList()
+      this.batteryList=res.data
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixin.scss';
+@import "@/styles/common.scss";
+
+.wrap {
+  background: #F4F5F7;
+  @include wh(100%, 100%);
+}
+.navBar{
+  margin-bottom: 46px;
+  .rightWrap{
+    @include wh(50px,20px);
+    border-radius: 10px;
+    opacity: 0.7;
+    border: 1px solid #FFFFFF;
+    @include flexTwoCenter;
+    img{
+      @include widHeiMar(9px,8px,4px);
+    }
+    .addTxt{
+      @include fontWeightSize(bolder,11px);
+      @include colorOpa( #FFFFFF,0.7);
+    }
+  }
+}
+.input{
+  //@include sizingPadding(13px,13px);
+  //margin: 13px 0;
+}
+.container{
+  @include sizingPadding(13px,13px);
+  overflow-y: auto;
+  @include wh(100%, calc(100% - 96px));
+}
+
+.itemWrap {
+  @include wh(100%, 104px);
+  @include radiusSizing(6px);
+  @include fontWeightSize(400, 12px);
+  @include flexBetween;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  margin-bottom: 10px;
+  padding: 11px 13px 9px 15px;
+  position: relative;
+  //margin-top: 10px;
+  .halfOpci {
+    display: inline-block;
+    width: 60px;
+    opacity: .5;
+    margin-right: 5px;
+  }
+  .allOpci {
+    opacity: 1;
+  }
+  .statusNo {
+    color: #FF0000;
+  }
+  .statusYes {
+    color: #09B820
+  }
+  .img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 35%;
+    cursor: pointer;
+  }
+}
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
+</style>

src/views/index/workOrderDetail.vue

@@ -70,6 +70,22 @@
         </div>
       </div>
     </div>
+    <div class="serviceInfo common">
+      <div class="title">电瓶信息:</div>
+      <div class="line"></div>
+      <div class="infoContent">
+        <div class="item">
+          <span class="leftTitle fontColor">设备号:</span><span class="rightContent"></span>
+        </div>
+        <div class="item">
+          <span class="leftTitle fontColor">品牌:</span><span class="rightContent"></span>
+        </div>
+        <div class="item">
+          <span class="leftTitle fontColor">型号:</span><span class="rightContent"></span>
+        </div>
+      </div>
+    </div>
+
     <div class="map" v-show="showPopup"   id="container">
       <img @click="showPopup = false"  src="@/assets/delKey.png" class="mapImg">
     </div>