Merge branch 'master' of http://47.107.53.207:3000/ymy/oms

src/api/delivery.ts

@@ -79,4 +79,12 @@ export function queryByOrderNo(data?:any){
 		method: 'POST',
 		params: data
 	})
+}
+//快递发货
+export function express(data?:any){
+	return request({
+		url: '/omsOrder/omsShippingOrder/express',
+		method: 'POST',
+		data: data
+	})
 }

src/benyun/components/moduleView/moduleView.vue

@@ -87,6 +87,12 @@ export default class ModuleView extends ModuleViewHandle {
       }
     })
   }
+  //设置表格配置
+  setTableCOnfig(config:any){
+    if(this.$refs[this.tableID]){
+      (this.$refs[this.tableID] as any).setConfig(config)
+    }
+  }
   initTable(){
     if(!this.$refs[this.tableID]){
       this.calculateCount ++;

src/views/oms/order/components/batchbyOneModal.vue

@@ -13,7 +13,7 @@
           :page-size="1"
           :current-page="currentOrder + 1"
           layout="prev, pager, next"
-          @current-change="currentChange"
+          @current-change="currentChange"planType
           :total="data.length">
         </el-pagination>
       </div>
@@ -405,6 +405,7 @@ export default class BatchbyOneModal extends Vue {
     params.startAddressCode = data.tmsShipmentCityNo + '000';
     params.endAddressCode = data.tmsUnloadingCityNo + '000';
     params.omsIds=[this.data[0].omsOrderIds];
+    params.planType = data.tmsTransportMethod;
     this.load = true;
     queryPricePackage(params).then((res:any) => {
       // if(this.currentPrice && this.currentPrice[data.omsOrderIds]){

src/views/oms/order/components/carpoolModal.vue

@@ -44,7 +44,7 @@ import { add,multiply,subtract,divide } from '@/benyun/utils/accuracy'
 import { getMultipleToOnePrice,addMultipleToOne,getInventoryByStoreHouseIdAndSkuids } from  '@/api/delivery'
 import Format from '@/benyun/utils/dateFormat'
 @Component({components:{DeliveryGoodsInfo,DeliveryPrice}})
-export default class carpoolModal extends Vue {
+export default class CarpoolModal extends Vue {
   drawer=false;
   direction='rtl'
   checked=false;
@@ -106,6 +106,7 @@ export default class carpoolModal extends Vue {
     let params:any={};
     params.startAddressCode = data.tmsShipmentCityNo + '000';
     params.endAddressCode = data.tmsUnloadingCityNo + '000';
+    params.planType = data.tmsTransportMethod;
     params.omsIds=[];
     for(const item of this.data){
       params.omsIds.push(item.id);

src/views/oms/order/components/deliveryGoodsInfo.vue

@@ -228,6 +228,9 @@ export default class DeliveryGoodsInfo extends Vue {
         }],
         tmsDeliveryDate:[{
           required: true, message: '期望提货时间不能为空！', trigger: 'blur'
+        }],
+        tmsTransportMethod: [{
+          required: true, message: '运输方式不能为空！', trigger: 'blur'
         }]
       }
     },

src/views/oms/order/components/expressDeliveryModal.vue

@@ -0,0 +1,514 @@
+<template>
+  <el-drawer
+    v-loading="load"
+    title="快递发货"
+    :visible.sync="drawer"
+    :direction="direction"
+    size="50%">
+    <div class="content">
+      <div class="info">
+        <div class="edit">
+          <span @click="edit">编辑</span>
+        </div>
+        <div class="g-box">
+          <!-- <div class="info-row">
+            <div class="info-col">
+              <span class="label">单号：</span>
+              <span :title="value.tmsOrderNo">{{ value.tmsOrderNo }}</span>
+            </div>
+          </div> -->
+          <div class="info-row">
+            <div class="info-col">
+              <span class="label">业务员：</span>
+              <span :title="value.tmsBusinessMan">{{ value.tmsBusinessMan }}</span>
+            </div>
+            <div class="info-col">
+              <span class="label">业务员手机：</span>
+              <span :title="value.tmsBusinessPhone">{{ value.tmsBusinessPhone }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-col">
+              <span class="label">备注：</span>
+              <span :title="value.wmsRemark">{{ value.wmsRemark }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="g-box">
+          <div class="goods-top">
+            <div class="g-label">物料信息</div>
+            <div class="g-cont">
+              <div class="g-total">
+                <span class="name-label">重量合计：</span>
+                <span class="total-num">{{totalWeight}}kg</span>
+              </div>
+            </div>
+          </div>
+          <div class="table">
+            <vxe-table
+              border
+              size="mini"
+              align="center"
+              header-cell-class-name="header-cell"
+              :data="value.subItem">
+              <vxe-column field="tmsGoodsCode" title="物料编码" width="130"></vxe-column>
+              <vxe-column field="name" title="物料名称" width="260"></vxe-column>
+              <vxe-column field="weight" title="重量"></vxe-column>
+              <vxe-column field="price" title="单价"></vxe-column>
+              <vxe-column field="tmsQuantity" title="数量"></vxe-column>
+              <vxe-column field="tmsGoodsTotalPrice" title="小计"></vxe-column>
+            </vxe-table>
+          </div>
+        </div>
+      </div>
+      <vxe-modal v-model="showModal" id="deliverInfoEdit" width="700" height="70%" @show="show" @hide="hide" title="编辑" resize show-zoom transfer show-footer>
+        <by-form :propConfig="config" ref="form" />
+        <template #footer>
+          <div class="btn">
+            <el-button plain size="small" @click="showModal = false">取消</el-button>
+            <el-button type="primary" size="small" @click="btnEdit">确定</el-button>
+          </div>
+        </template>
+      </vxe-modal>
+    </div>
+    <div class="space"></div>
+    <div class="deli-footer">
+      <div class="d-left">
+        <!-- <div class="estimate-total">
+          预计总价<span class="total">￥{{currentPrice.estimateFreight?currentPrice.estimateFreight:'0.00'}}</span> 
+        </div> -->
+        <div class="agreement">
+          <el-checkbox v-model="checked">已读并同意《XXX电子运单协议》</el-checkbox>
+        </div>
+      </div>
+      <div class="send-btn" @click="btn">确认发货</div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { add,multiply,subtract,divide } from '@/benyun/utils/accuracy'
+import { getInventoryByStoreHouseIdAndSkuids,express } from  '@/api/delivery'
+@Component({components:{}})
+export default class ExpressDeliveryModal extends Vue {
+  drawer=false;
+  direction='rtl';
+  load=false;
+  checked=false;
+  stopHandle=false;
+  data:Array<any>=[]
+  totalWeight=0;
+  value:any = {}
+  showModal=false;
+  config:any={
+    size:'small',
+    labelWidth:'120px',
+    rules:{
+      tmsBusinessMan:[{
+        required: true, message: '业务员不能为空！', trigger: 'blur'
+      }],
+      tmsBusinessPhone:[{
+        required: true, message: '业务员手机不能为空！', trigger: 'blur'
+      }],
+      storeHouseId:[{
+        required: true, message: '请选择仓库！', trigger: 'change'
+      }]
+    },
+    columns:[
+      [{
+        label:'业务员',
+        prop:'tmsBusinessMan',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            clearable:true
+          }
+        }
+      }],
+      [{
+        label:'业务员手机',
+        prop:'tmsBusinessPhone',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            clearable:true
+          }
+        }
+      }],
+      [{
+        label:'仓库',
+        prop:'storeHouseId',
+        component:'warehouse',
+        compConfig:{
+          attr:{
+            placeholder:'请选择仓库',
+            clearable:true
+          }
+        }
+      }],
+      [{
+        label:'物流',
+        prop:'wmsLogisticsCode',
+        component:'by-select',
+        compConfig:{
+          attr:{
+            clearable:true,
+            data: [{
+              value:'EMS',
+              label:'EMS'
+            },{
+              value:'YTO',
+              label:'圆通'
+            },{
+              value:'STO',
+              label:'申通'
+            },{
+              value:'SF',
+              label:'顺丰'
+            },{
+              value:'YUNDA',
+              label:'韵达'
+            },{
+              value:'ZTO',
+              label:'中通'
+            },{
+              value:'ANE',
+              label:'安能'
+            },{
+              value:'DBWL',
+              label:'德邦物流'
+            },{
+              value:'UC',
+              label:'优速'
+            },{
+              value:'POSTB',
+              label:'邮政小包'
+            },{
+              value:'DBKD',
+              label:'德邦快递'
+            },{
+              value:'FENGWANG',
+              label:'丰网速运'
+            },{
+              value:'KYE',
+              label:'跨越物流'
+            },{
+              value:'ZTKY',
+              label:'中通快运'
+            },{
+              value:'JT',
+              label:'极兔'
+            },{
+              value:'JD',
+              label:'京东'
+            },{
+              value:'JGSD',
+              label:'京广速递'
+            },{
+              value:'XNEXPRESS',
+              label:'虚拟快递'
+            }]
+          }
+        }
+      }],
+      [{
+        label:'备注',
+        prop:'wmsRemark',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            clearable:true
+          }
+        }
+      }]
+    ]
+  }
+
+  setShow(v:boolean){
+    this.drawer=v;
+  }
+  setValue(data:Array<any>){
+    this.data =data;
+    this.value={};
+    this.value.tmsBusinessMan = (this as any).$store.getters.userInfo.userName;
+    this.value.tmsBusinessPhone = (this as any).$store.getters.userInfo.phonenumber;
+    this.value.subItem=[];
+    this.checked = false;
+    const requestId =  new Date().getTime() + this.getUuid();
+    this.value.requestId = requestId;
+    this.totalWeight = 0;
+    for(let item of data){     
+      if(item.items){
+        for(const i of item.items){
+          let total:any = 0;
+          if(Number(i.qty) && Number(i.price)){
+            total = multiply(Number(i.qty),Number(i.price))
+          }
+          if(Number(i.weight)){
+            this.totalWeight = Number(i.weight)
+          }
+          this.value.subItem.push({
+            requestId:requestId,
+            omsOrderId:item.id,
+            omsOrderItemId:i.itemId,
+            tmsGoodsModel:i.styleId,
+            tmsGoodsCode:i.skuId,
+            tmsQuantity:Number(i.qty)?Number(i.qty):0,
+            tmsGoodsTotalPrice:total,
+            name:i.name,
+            price:i.price,
+            weight:i.weight
+          })
+        }
+      }
+    }
+  }
+  getUuid(){
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  }
+  btnEdit(){
+    if(this.$refs.form){
+      (this.$refs.form as any).validate().then(()=>{
+        this.value = (this.$refs.form as any).getValue();
+        this.getStoreCount(this.value);
+      })
+    }
+    this.showModal = false;
+  }
+  hide(){
+    this.drawer = true;
+  }
+  //查库存
+  getStoreCount(item:any){
+    let params:any={};
+    params.storeHouseId = item.storeHouseId;
+    params.skuIds=[]
+    if(item.subItem){
+      for(const i of item.subItem){
+        if(params.skuIds.indexOf(i.omsOrderItemId) == -1){
+          params.skuIds.push(i.omsOrderItemId)
+        }
+      }
+    }
+    this.load = true;
+    getInventoryByStoreHouseIdAndSkuids(params).then((res:any) => {
+      this.load = false;
+      let m='';
+      for(const i of item.subItem){
+        for(const d of res.data){
+          let s = Number(d.inventory) - Number(d.useInventory) - Number(i.tmsQuantity);
+          if(i.omsOrderItemId == d.skuid && s < 0){
+            m = m ? m + ',' + i.name : i.name;          
+          }else{
+            d.inventory = subtract(d.inventory, i.tmsQuantity);
+          }
+        }
+      }
+      if(m){
+        this.$message({
+          message:'商品“'+m+'”库存不足！',
+          type:'error'
+        })
+        this.stopHandle = true;
+        return
+      }
+    }).catch(()=>{
+      this.load = false;
+    })
+  }
+  show(){
+    
+    this.$nextTick(()=>{
+      if(this.$refs.form){
+        (this.$refs.form as any).clearValue();
+        (this.$refs.form as any).setValue(this.value);
+      }
+    })
+  }
+  edit(){
+    this.showModal = true;
+    this.drawer = false;
+  }
+  
+  btn() {
+    if(this.stopHandle){
+      this.$message('库存不足！')
+      return
+    }
+    if(!this.checked){
+      this.$message('请阅读并同意运单协议！')
+      return
+    }
+    let params:any=(this as any).$lodash.cloneDeep(this.value);
+    params.omsOrderIds=[]
+    for(const item of this.data){
+      params.omsOrderIds.push(item.id);
+    }
+    params.tmsMaterials=[];
+    if(this.value.subItem){
+      let skuIds:Array<any>=[];
+      for(const item of this.value.subItem){
+        if(skuIds.indexOf(item.omsOrderItemId) == -1){
+          skuIds.push(item.omsOrderItemId);
+          params.tmsMaterials.push({
+            storeHouseId:this.value.storeHouseId,
+            materialSkuId:item.omsOrderItemId
+          })
+        }
+        
+      }
+    }
+    delete params.subItem;
+    this.load = true;
+    express(params).then((res:any) => {
+      this.load = false;
+      if(res.code == 200){
+        this.$message({
+          message:'订单发货成功！',
+          type:'success'
+        })
+        this.$emit('handleSuccess');
+        this.drawer=false;
+      }
+    }).catch(()=>{  
+      this.load = false;
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  background-color: #FFF;
+  .info{
+    width: 100%;
+    .edit{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      padding-bottom: 8px;
+      span{
+        color: rgb(0, 119, 255);
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+    .g-box{
+      width: 100%;
+      background-color: rgba(160,205,255,0.22);
+      margin-bottom: 16px;
+      padding:16px;
+      box-sizing: border-box;
+      .info-row{
+        width: 100%;
+        display: flex;
+        padding-bottom: 16px;
+        .info-col{
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          span{
+            font-size: 14px;
+          }
+          .label{
+            color: #666;
+          }
+          .time{
+            color: #F00;
+          }
+        }
+        .col-width{
+          width: 50%;
+        }
+      }
+      .info-row:last-child{
+        padding: 0;
+      }
+      .goods-top{
+        padding-bottom: 8px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .g-label{
+          font-size: 14px;
+        }
+        .g-cont{
+          width: 60%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          .g-total{
+            padding-left: 8px;
+            font-size: 12px;
+            .name-label{
+              color: #999;
+            }
+          }
+        }
+      }
+      .table{
+        width: 100%;
+      }
+    }
+    .btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+.deli-footer{
+  height: 60px;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  box-shadow: 0 -5px 10px #EEE;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  background-color: #FFF;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  .d-left{
+    width: 70%;
+    .estimate-total{
+      font-size: 14px;
+      padding-bottom: 4px;
+      .total{
+        font-size: 16px;
+        color: #F00;
+      }
+      .detail{
+        color: #1684FC;
+        padding-left: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+  .send-btn{
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+    background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
+    color: rgba(255, 255, 255, 100);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 100);
+    cursor: pointer;
+  }
+}
+.space{
+  height: 60px;
+  width: 100%;
+  margin-top: 16px;
+}
+</style>

src/views/oms/order/components/orderTable.vue

@@ -125,7 +125,7 @@
       <template #default="{ row }">
         <el-button type="text" size="mini" v-if="showMerge(row)" @click="mergeHandle(row)">合并</el-button>
         <el-button type="text" size="mini" v-if="showSplit(row)" @click="splitHandle(row)">拆分</el-button>
-        <el-button type="text" size="mini" v-if="showSend(row)" @click="sendGoods(row)">发货</el-button>
+        <!-- <el-button type="text" size="mini" v-if="showSend(row)" @click="sendGoods(row)">发货</el-button> -->
         <el-button type="text" size="mini" v-if="row.status == 'Delivering'  || row.status == 'Sent'" @click="sendGoodsDetail(row)">发货明细</el-button>
       </template>
     </vxe-column>

src/views/oms/order/components/orderTool.vue

@@ -46,7 +46,7 @@
     <el-button type="text" @click="handle('producePurchase')" title="选取已提交数据">生成采购单</el-button>
     <el-button type="text" @click="handle('orderFile')">订单归档</el-button>
     <div class="split"></div>
-    <el-button type="text" @click="handle('batchSendGoods')">批量发货</el-button>
+    <el-button type="text" @click="handle('batchSendGoods')">发货</el-button>
   </div>
 </template>
 

src/views/oms/order/components/sendModeModal.vue

@@ -19,6 +19,13 @@
         <div class="msg">处理后形成多张物流单<br />优惠多多</div>
         <div class="moda-title">拼车/整车发货</div>
       </div>
+      <div class="moda-item" :class="{'onModal': mode==='2'}" @click="modeHandle('2')">
+        <div class="check">
+          <i class="el-icon-success"></i>
+        </div>
+        <div class="msg">处理后形成新物流单</div>
+        <div class="moda-title">快递发货</div>
+      </div>
     </div>
   </vxe-modal>
 </template>

src/views/oms/order/index.vue

@@ -190,6 +190,8 @@
       <deliveryDetail ref="deliveryDetail" @handleSuccess="handleSuccess" @showLogistics="showLogistics" />
       <!-- 物流信息 -->
       <logisticsInfo ref="logisticsInfo" />
+      <!-- 快递发货 -->
+      <express-delivery-modal ref="expressDeliveryModal" @handleSuccess="handleSuccess" />
     </div>
   </div>
 </template>
@@ -223,11 +225,12 @@ import batchbyOneModal from './components/batchbyOneModal.vue'
 import carpoolModal from './components/carpoolModal.vue'
 import DeliveryDetail from "./components/deliveryDetail.vue";
 import LogisticsInfo from "./components/logisticsInfo.vue";
+import ExpressDeliveryModal from "./components/expressDeliveryModal.vue";
 import { query,getProvince,smt,unSmt,purchaseQty,unCancel,resetQuestion,archive } from '@/api/omsOrder'
 import { queryAll } from '@/api/question'
 @Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable,AddOrder,InputSelect,OrderProduct,
   filterMinMax,loadOrderModal,PurchaseModel,MergeModel,SplitModel,CancelOrderModel,QuestModel,SetQuesModal,UpdateRmkModal,UpdateSalerModal,
-  TabModal,AddProductModal,FreightModal,LabelsModal,SendModeModal,batchbyOneModal,carpoolModal,DeliveryDetail,LogisticsInfo}})
+  TabModal,AddProductModal,FreightModal,LabelsModal,SendModeModal,batchbyOneModal,carpoolModal,DeliveryDetail,LogisticsInfo,ExpressDeliveryModal}})
 export default class Order extends Vue {
   activeNames:Array<any>=['1','statusList']
   radio=''
@@ -547,18 +550,38 @@ export default class Order extends Vue {
   //发货模式
   modeChange(v:string){
     let data:Array<any>= (this.$refs.orderTable as any).getSelectData();
-    if(v == '0'){
-      if(this.$refs.batchbyOneModal){
-        (this.$refs.batchbyOneModal as any).setShow(true);
-        (this.$refs.batchbyOneModal as any).setValue(data);
-      }
-    }
-    if(v == '1'){
-      if(this.$refs.carpoolModal){
-        (this.$refs.carpoolModal as any).setShow(true);
-        (this.$refs.carpoolModal as any).setValue(data);
-      }
+    switch(v){
+      case '0':
+        if(this.$refs.batchbyOneModal){
+          (this.$refs.batchbyOneModal as any).setShow(true);
+          (this.$refs.batchbyOneModal as any).setValue(data);
+        }
+        break;
+      case '1':
+        if(this.$refs.carpoolModal){
+          (this.$refs.carpoolModal as any).setShow(true);
+          (this.$refs.carpoolModal as any).setValue(data);
+        }
+        break;
+      case '2':
+        if(this.$refs.expressDeliveryModal){
+          (this.$refs.expressDeliveryModal as any).setShow(true);
+          (this.$refs.expressDeliveryModal as any).setValue(data);
+        }
     }
+
+    // if(v == '0'){
+    //   if(this.$refs.batchbyOneModal){
+    //     (this.$refs.batchbyOneModal as any).setShow(true);
+    //     (this.$refs.batchbyOneModal as any).setValue(data);
+    //   }
+    // }
+    // if(v == '1'){
+    //   if(this.$refs.carpoolModal){
+    //     (this.$refs.carpoolModal as any).setShow(true);
+    //     (this.$refs.carpoolModal as any).setValue(data);
+    //   }
+    // }
   }
   //z整车发货
   sendGoods(item:any){

src/views/settle/dbFee/index.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="fee" v-loading="load">
+    <div class="fee-tab">
+      <div class="item-tab" :class="{'on-tab':ontab == 0}" @click="tabChange(0)">待结算</div>
+      <div class="item-tab" :class="{'on-tab':ontab == 1}" @click="tabChange(1)">已结算</div>
+    </div>
+    <div class="fee-main">
+      <div class="fee-box" :class="{'onShow':ontab == 0}">
+        <module-view :propConfig="config" ref="willSettle" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" 
+        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
+      </div>
+      <div class="fee-box" :class="{'onShow':ontab == 1}">
+        <module-view :propConfig="config" ref="Settled" @pagination="pagination" @onRefresh="getSettledList" @resert="queryList" @search="queryList" 
+        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
+      </div>
+    </div>
+    <el-drawer
+      :with-header="false"
+      :visible.sync="drawer"
+      :direction="direction"
+      size="35%"
+    >
+      <div class="top">
+        <div class="name">选中单据（<span>{{checkCount}}单</span>）</div>
+        <div class="btn-group">
+          <div class="pay-btn">立即支付</div>
+          <div class="back" @click="drawer = false">返回</div>
+        </div>
+      </div>
+      <div class="top-space"></div>
+      <div class="pay-bill">
+        <div class="pay-item" v-for="(item,index) of payData" :key="index" @click="checkHandle(index)">
+          <div class="amount">
+            金额<span>￥{{item.amount}}</span>
+          </div>
+          <div class="pay-info">时间：{{item.time}}</div>
+          <div class="pay-info">单号：{{item.code}}</div>
+          <div class="pay-info">服务方：{{item.servicer}}</div>
+          <div class="pay-info">服务类型：{{item.type}}</div>
+          <div class="check" :class="{'showCheck':item.check}">
+            <i class="el-icon-check"></i>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+
+@Component({components:{}})
+export default class DbFee extends Vue {
+  load=false
+  drawer=false
+  direction= 'rtl'
+  ontab=0
+  checkCount=0
+  config:any={
+    attr:{
+      calculateH:true
+    },
+    search:{
+      attr:{
+        size:'small'
+      },
+      columns:[
+        [{
+          span:6,
+          label:'结算单号',
+          prop:'code',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入',
+              clearable:true
+            }
+          }
+        },{
+          span:6,
+          label:'业务类型',
+          prop:'type',
+          component:'by-select',
+          compConfig:{
+            attr:{
+              clearable:true,
+              data:[{
+                label:'freemarker',
+                value:'freemarker'
+              },{
+                label:'thymeleaf',
+                value:'thymeleaf'
+              }]
+            }
+          }
+        },{
+          span:6,
+          label:'时间',
+          prop:'createTime',
+          component:'by-date-picker',
+          compConfig:{
+            attr:{
+              clearable:true,
+              format:'yyyy-MM-dd HH:mm:ss',
+              type:'datetimerange'
+            }
+          }
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        seq:true,
+        // checkbox:true
+      },
+      columns:[{
+        title:'结算单号',
+        // isDetail:true,
+        field:'code'
+      },{
+        title:'付款公司',
+        field:'payCompany',
+        width:130,
+      },{
+        title:'收款公司',
+        field:'receiveCompany',
+        width:130
+      },{
+        title:'结算金额',
+        field:'settleMoney',
+        width:100
+      },{
+        title:'手续费',
+        field:'commission',
+        width:100
+      },{
+        title:'业务类型',
+        field:'type',
+        width:140
+      },{
+        title:'状态',
+        field:'state',
+        width:100
+      },{
+        title:'创建时间',
+        field:'createTime',
+        width:140
+      },{
+        title:'操作',
+        action:true,
+        width:130,
+        plugins:[{
+          name:'立即支付',
+          event:{
+            show:(item:any) => {
+              // console.log(item);
+              return item.state == '待结算'
+            },
+            click:(item:any) => {
+              
+            }
+          }
+        },{
+          name:'明细',
+          event:{
+            click:(item:any) => {
+              this.showDetail()
+            }
+          }
+        }]
+      }]
+    },
+  }
+  page:any={
+    pageNo: 1,
+    pageSize:20,
+    total:2
+  }
+  payData:Array<any>=[{
+    amount:'10.00',
+    time:'2023-08-10 12:45:33',
+    code:1,
+    servicer:'犇云科技',
+    type:'短驳结算'
+  },{
+    amount:'5.50',
+    time:'2023-08-10 12:45:33',
+    code:1,
+    servicer:'犇云科技',
+    type:'短驳结算'
+  },{
+    amount:'205.50',
+    time:'2023-08-16 12:52:30',
+    code:3,
+    servicer:'犇云科技',
+    type:'短驳结算'
+  }]
+  tabChange(v:number){
+    this.ontab = v
+  }
+  showDetail() {
+    this.drawer = true
+  }
+  checkHandle(index:number){
+    this.payData[index].check = !this.payData[index].check
+    let n = 0;
+    for(const item of this.payData){
+      if(item.check){
+        n++
+      }
+    }
+    this.checkCount = n;
+    this.$forceUpdate()
+  }
+  pagination(){}
+  getList(){
+    let data:Array<any>=[{
+      code:1,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:32000,
+      commission:50,
+      type:'短驳费用',
+      state:'已结算',
+      createTime:'2023-08-10 10:30:26'
+    },{
+      code:2,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:60000,
+      commission:420,
+      type:'短驳费用',
+      state:'已结算',
+      createTime: '2023-08-12 11:21:25'
+    }];
+    (this.$refs.Settled as any).setTableValue(data);
+    (this.$refs.Settled as any).setPage(this.page)
+  }
+  getSettledList(){
+    let data:Array<any>=[{
+      code:1,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:50000,
+      commission:100,
+      type:'短驳费用',
+      state:'待结算',
+      createTime:'2023-08-25 12:36:22'
+    },{
+      code:2,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:100000,
+      commission:1000,
+      type:'短驳费用',
+      state:'待结算',
+      createTime: '2023-08-27 20:20:15'
+    }];
+    (this.$refs.willSettle as any).setTableValue(data);
+    (this.$refs.willSettle as any).setPage(this.page)
+  }
+  queryList(){}
+  modalHandle(){}
+  clickHandle(){}
+  detail(){}
+  mounted(){
+    this.load = true
+    setTimeout(()=>{
+      this.load = false
+      this.getList()
+      this.getSettledList()
+    },1500)
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .fee-tab{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding: 16px 16px 0;
+    .item-tab{
+      padding-bottom: 8px;
+      margin-right: 32px;
+      border-bottom: solid 3px #FFF;
+      cursor: pointer;
+    }
+    .on-tab{
+      border-bottom: solid 3px #1684FC;
+      color: #1684FC;
+    }
+  }
+  .fee-main{
+    width: 100%;
+    height: calc(100% - 50px);
+    .fee-box{
+      width: 100%;
+      height: 100%;
+      display: none;
+    }
+    .onShow{
+      display: block;
+    }
+  }
+}
+.top{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 16px;
+  justify-content: space-between;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #FFF;
+  .name{
+    font-size: 14px;
+    span{
+      color: #fc8516;
+    }
+  }
+  .btn-group{
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .pay-btn{
+      width: 120px;
+      height: 36px;
+      line-height: 36px;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      text-align: center;
+      box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 1);
+      margin-right: 16px;
+      cursor: pointer;;
+    }
+    .back{
+      cursor: pointer;
+      width: 110px;
+      height: 36px;
+      box-sizing: border-box;
+      line-height: 36px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      color: rgba(22, 132, 252, 1);
+      font-size: 14px;
+      text-align: center;
+      border: 1px solid rgba(22, 132, 252, 1);
+    }
+  }
+}
+.top-space{
+  height: 60px;
+}
+.pay-bill{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  .pay-item{
+    width: 44%;
+    box-sizing: border-box;
+    padding: 16px;
+    margin-left: 4%;
+    border:solid 1px #CCC;
+    margin-bottom: 16px;
+    cursor: pointer;
+    position: relative;
+    .check{
+      height: 24px;
+      width: 24px;
+      background-color: #1684FC;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      border-radius: 50%;
+      visibility: hidden;
+      i.el-icon-check{
+        color: #FFF;
+        font-size: 16px;
+        font-weight: 700;
+      }
+    }
+    .showCheck{
+      visibility: visible;
+    }
+    .amount{
+      font-size: 20px;
+      >span{
+        color: #F00;
+      }
+    }
+    .pay-info{
+      font-size: 14px;
+      color: #999;
+      padding-top: 4px;
+    }
+  }
+  .pay-item:hover{
+    border-color: #1684FC;
+    .check{
+      visibility: visible;
+    }
+  }
+}
+</style>

src/views/settle/logistics/index.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="fee" v-loading="load">
+    <div class="fee-tab">
+      <div class="item-tab" :class="{'on-tab':ontab == 0}" @click="tabChange(0)">待结算</div>
+      <div class="item-tab" :class="{'on-tab':ontab == 1}" @click="tabChange(1)">已结算</div>
+    </div>
+    <div class="fee-main">
+      <div class="fee-box" :class="{'onShow':ontab == 0}">
+        <module-view :propConfig="config" ref="willSettle" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" 
+        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
+      </div>
+      <div class="fee-box" :class="{'onShow':ontab == 1}">
+        <module-view :propConfig="config" ref="Settled" @pagination="pagination" @onRefresh="getSettledList" @resert="queryList" @search="queryList" 
+        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
+      </div>
+    </div>
+    <el-drawer
+      :with-header="false"
+      :visible.sync="drawer"
+      :direction="direction"
+      size="35%"
+    >
+      <div class="top">
+        <div class="name">选中单据（<span>{{checkCount}}单</span>）</div>
+        <div class="btn-group">
+          <div class="pay-btn">立即支付</div>
+          <div class="back" @click="drawer = false">返回</div>
+        </div>
+      </div>
+      <div class="top-space"></div>
+      <div class="pay-bill">
+        <div class="pay-item" v-for="(item,index) of payData" :key="index" @click="checkHandle(index)">
+          <div class="amount">
+            金额<span>￥{{item.amount}}</span>
+          </div>
+          <div class="pay-info">时间：{{item.time}}</div>
+          <div class="pay-info">单号：{{item.code}}</div>
+          <div class="pay-info">服务方：{{item.servicer}}</div>
+          <div class="pay-info">服务类型：{{item.type}}</div>
+          <div class="check" :class="{'showCheck':item.check}">
+            <i class="el-icon-check"></i>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+
+@Component({components:{}})
+export default class DbFee extends Vue {
+  load=false
+  drawer=false
+  direction= 'rtl'
+  ontab=0
+  checkCount=0
+  config:any={
+    attr:{
+      calculateH:true
+    },
+    search:{
+      attr:{
+        size:'small'
+      },
+      columns:[
+        [{
+          span:6,
+          label:'结算单号',
+          prop:'code',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入',
+              clearable:true
+            }
+          }
+        },{
+          span:6,
+          label:'业务类型',
+          prop:'type',
+          component:'by-select',
+          compConfig:{
+            attr:{
+              clearable:true,
+              data:[{
+                label:'freemarker',
+                value:'freemarker'
+              },{
+                label:'thymeleaf',
+                value:'thymeleaf'
+              }]
+            }
+          }
+        },{
+          span:6,
+          label:'时间',
+          prop:'createTime',
+          component:'by-date-picker',
+          compConfig:{
+            attr:{
+              clearable:true,
+              format:'yyyy-MM-dd HH:mm:ss',
+              type:'datetimerange'
+            }
+          }
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        seq:true,
+        // checkbox:true
+      },
+      columns:[{
+        title:'结算单号',
+        // isDetail:true,
+        field:'code'
+      },{
+        title:'付款公司',
+        field:'payCompany',
+        width:130,
+      },{
+        title:'收款公司',
+        field:'receiveCompany',
+        width:130
+      },{
+        title:'结算金额',
+        field:'settleMoney',
+        width:100
+      },{
+        title:'手续费',
+        field:'commission',
+        width:100
+      },{
+        title:'业务类型',
+        field:'type',
+        width:140
+      },{
+        title:'状态',
+        field:'state',
+        width:100
+      },{
+        title:'创建时间',
+        field:'createTime',
+        width:140
+      },{
+        title:'操作',
+        action:true,
+        width:130,
+        plugins:[{
+          name:'立即支付',
+          event:{
+            show:(item:any) => {
+              // console.log(item);
+              return item.state == '待结算'
+            },
+            click:(item:any) => {
+              
+            }
+          }
+        },{
+          name:'明细',
+          event:{
+            click:(item:any) => {
+              this.showDetail()
+            }
+          }
+        }]
+      }]
+    },
+  }
+  page:any={
+    pageNo: 1,
+    pageSize:20,
+    total:2
+  }
+  payData:Array<any>=[{
+    amount:'12.00',
+    time:'2023-08-10 12:45:33',
+    code:1,
+    servicer:'犇云科技',
+    type:'物流结算'
+  },{
+    amount:'15.50',
+    time:'2023-08-10 12:45:33',
+    code:1,
+    servicer:'犇云科技',
+    type:'物流结算'
+  },{
+    amount:'105.50',
+    time:'2023-08-16 12:52:30',
+    code:3,
+    servicer:'犇云科技',
+    type:'物流结算'
+  }]
+  tabChange(v:number){
+    this.ontab = v
+  }
+  showDetail() {
+    this.drawer = true
+  }
+  checkHandle(index:number){
+    this.payData[index].check = !this.payData[index].check
+    let n = 0;
+    for(const item of this.payData){
+      if(item.check){
+        n++
+      }
+    }
+    this.checkCount = n;
+    this.$forceUpdate()
+  }
+  pagination(){}
+  getList(){
+    let data:Array<any>=[{
+      code:1,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:4100,
+      commission:63,
+      type:'物流费用',
+      state:'已结算',
+      createTime:'2023-08-10 10:30:26'
+    },{
+      code:2,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:4500,
+      commission:64,
+      type:'物流费用',
+      state:'已结算',
+      createTime: '2023-08-12 11:21:25'
+    }];
+    (this.$refs.Settled as any).setTableValue(data);
+    (this.$refs.Settled as any).setPage(this.page)
+  }
+  getSettledList(){
+    let data:Array<any>=[{
+      code:1,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:8000,
+      commission:70,
+      type:'物流费用',
+      state:'待结算',
+      createTime:'2023-08-25 12:36:22'
+    },{
+      code:2,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:63000,
+      commission:45,
+      type:'物流费用',
+      state:'待结算',
+      createTime: '2023-08-27 20:20:15'
+    }];
+    (this.$refs.willSettle as any).setTableValue(data);
+    (this.$refs.willSettle as any).setPage(this.page)
+  }
+  queryList(){}
+  modalHandle(){}
+  clickHandle(){}
+  detail(){}
+  mounted(){
+    this.load = true
+    setTimeout(()=>{
+      this.load = false
+      this.getList()
+      this.getSettledList()
+    },1500)
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .fee-tab{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding: 16px 16px 0;
+    .item-tab{
+      padding-bottom: 8px;
+      margin-right: 32px;
+      border-bottom: solid 3px #FFF;
+      cursor: pointer;
+    }
+    .on-tab{
+      border-bottom: solid 3px #1684FC;
+      color: #1684FC;
+    }
+  }
+  .fee-main{
+    width: 100%;
+    height: calc(100% - 50px);
+    .fee-box{
+      width: 100%;
+      height: 100%;
+      display: none;
+    }
+    .onShow{
+      display: block;
+    }
+  }
+}
+.top{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 16px;
+  justify-content: space-between;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #FFF;
+  .name{
+    font-size: 14px;
+    span{
+      color: #fc8516;
+    }
+  }
+  .btn-group{
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .pay-btn{
+      width: 120px;
+      height: 36px;
+      line-height: 36px;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      text-align: center;
+      box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 1);
+      margin-right: 16px;
+      cursor: pointer;;
+    }
+    .back{
+      cursor: pointer;
+      width: 110px;
+      height: 36px;
+      box-sizing: border-box;
+      line-height: 36px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      color: rgba(22, 132, 252, 1);
+      font-size: 14px;
+      text-align: center;
+      border: 1px solid rgba(22, 132, 252, 1);
+    }
+  }
+}
+.top-space{
+  height: 60px;
+}
+.pay-bill{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  .pay-item{
+    width: 44%;
+    box-sizing: border-box;
+    padding: 16px;
+    margin-left: 4%;
+    border:solid 1px #CCC;
+    margin-bottom: 16px;
+    cursor: pointer;
+    position: relative;
+    .check{
+      height: 24px;
+      width: 24px;
+      background-color: #1684FC;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      border-radius: 50%;
+      visibility: hidden;
+      i.el-icon-check{
+        color: #FFF;
+        font-size: 16px;
+        font-weight: 700;
+      }
+    }
+    .showCheck{
+      visibility: visible;
+    }
+    .amount{
+      font-size: 20px;
+      >span{
+        color: #F00;
+      }
+    }
+    .pay-info{
+      font-size: 14px;
+      color: #999;
+      padding-top: 4px;
+    }
+  }
+  .pay-item:hover{
+    border-color: #1684FC;
+    .check{
+      visibility: visible;
+    }
+  }
+}
+</style>

src/views/settle/storeFee/index.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="fee" v-loading="load">
+    <div class="fee-tab">
+      <div class="item-tab" :class="{'on-tab':ontab == 0}" @click="tabChange(0)">待结算</div>
+      <div class="item-tab" :class="{'on-tab':ontab == 1}" @click="tabChange(1)">已结算</div>
+    </div>
+    <div class="fee-main">
+      <div class="fee-box" :class="{'onShow':ontab == 0}">
+        <module-view :propConfig="config" ref="willSettle" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" 
+        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
+      </div>
+      <div class="fee-box" :class="{'onShow':ontab == 1}">
+        <module-view :propConfig="config" ref="Settled" @pagination="pagination" @onRefresh="getSettledList" @resert="queryList" @search="queryList" 
+        @modalHandle="modalHandle" @clickHandle="clickHandle"/>
+      </div>
+    </div>
+    <el-drawer
+      :with-header="false"
+      :visible.sync="drawer"
+      :direction="direction"
+      size="35%"
+    >
+      <div class="top">
+        <div class="name">选中单据（<span>{{checkCount}}单</span>）</div>
+        <div class="btn-group">
+          <div class="pay-btn">立即支付</div>
+          <div class="back" @click="drawer = false">返回</div>
+        </div>
+      </div>
+      <div class="top-space"></div>
+      <div class="pay-bill">
+        <div class="pay-item" v-for="(item,index) of payData" :key="index" @click="checkHandle(index)">
+          <div class="amount">
+            金额<span>￥{{item.amount}}</span>
+          </div>
+          <div class="pay-info">时间：{{item.time}}</div>
+          <div class="pay-info">单号：{{item.code}}</div>
+          <div class="pay-info">服务方：{{item.servicer}}</div>
+          <div class="pay-info">服务类型：{{item.type}}</div>
+          <div class="check" :class="{'showCheck':item.check}">
+            <i class="el-icon-check"></i>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+
+@Component({components:{}})
+export default class DbFee extends Vue {
+  load=false
+  drawer=false
+  direction= 'rtl'
+  ontab=0
+  checkCount=0
+  config:any={
+    attr:{
+      calculateH:true
+    },
+    search:{
+      attr:{
+        size:'small'
+      },
+      columns:[
+        [{
+          span:6,
+          label:'结算单号',
+          prop:'code',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入',
+              clearable:true
+            }
+          }
+        },{
+          span:6,
+          label:'业务类型',
+          prop:'type',
+          component:'by-select',
+          compConfig:{
+            attr:{
+              clearable:true,
+              data:[{
+                label:'freemarker',
+                value:'freemarker'
+              },{
+                label:'thymeleaf',
+                value:'thymeleaf'
+              }]
+            }
+          }
+        },{
+          span:6,
+          label:'时间',
+          prop:'createTime',
+          component:'by-date-picker',
+          compConfig:{
+            attr:{
+              clearable:true,
+              format:'yyyy-MM-dd HH:mm:ss',
+              type:'datetimerange'
+            }
+          }
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        seq:true,
+        // checkbox:true
+      },
+      columns:[{
+        title:'结算单号',
+        // isDetail:true,
+        field:'code'
+      },{
+        title:'付款公司',
+        field:'payCompany',
+        width:130,
+      },{
+        title:'收款公司',
+        field:'receiveCompany',
+        width:130
+      },{
+        title:'结算金额',
+        field:'settleMoney',
+        width:100
+      },{
+        title:'手续费',
+        field:'commission',
+        width:100
+      },{
+        title:'业务类型',
+        field:'type',
+        width:140
+      },{
+        title:'状态',
+        field:'state',
+        width:100
+      },{
+        title:'创建时间',
+        field:'createTime',
+        width:140
+      },{
+        title:'操作',
+        action:true,
+        width:130,
+        plugins:[{
+          name:'立即支付',
+          event:{
+            show:(item:any) => {
+              // console.log(item);
+              return item.state == '待结算'
+            },
+            click:(item:any) => {
+              
+            }
+          }
+        },{
+          name:'明细',
+          event:{
+            click:(item:any) => {
+              this.showDetail()
+            }
+          }
+        }]
+      }]
+    },
+  }
+  page:any={
+    pageNo: 1,
+    pageSize:20,
+    total:2
+  }
+  payData:Array<any>=[{
+    amount:'12.00',
+    time:'2023-08-10 12:45:33',
+    code:1,
+    servicer:'犇云科技',
+    type:'仓储结算'
+  },{
+    amount:'15.50',
+    time:'2023-08-10 12:45:33',
+    code:1,
+    servicer:'犇云科技',
+    type:'仓储结算'
+  },{
+    amount:'105.50',
+    time:'2023-08-16 12:52:30',
+    code:3,
+    servicer:'犇云科技',
+    type:'仓储结算'
+  }]
+  tabChange(v:number){
+    this.ontab = v
+  }
+  showDetail() {
+    this.drawer = true
+  }
+  checkHandle(index:number){
+    this.payData[index].check = !this.payData[index].check
+    let n = 0;
+    for(const item of this.payData){
+      if(item.check){
+        n++
+      }
+    }
+    this.checkCount = n;
+    this.$forceUpdate()
+  }
+  pagination(){}
+  getList(){
+    let data:Array<any>=[{
+      code:1,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:5200,
+      commission:60,
+      type:'仓储费用',
+      state:'已结算',
+      createTime:'2023-08-10 10:30:26'
+    },{
+      code:2,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:7000,
+      commission:680,
+      type:'仓储费用',
+      state:'已结算',
+      createTime: '2023-08-12 11:21:25'
+    }];
+    (this.$refs.Settled as any).setTableValue(data);
+    (this.$refs.Settled as any).setPage(this.page)
+  }
+  getSettledList(){
+    let data:Array<any>=[{
+      code:1,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:8000,
+      commission:70,
+      type:'仓储费用',
+      state:'待结算',
+      createTime:'2023-08-25 12:36:22'
+    },{
+      code:2,
+      payCompany:'犇云科技',
+      receiveCompany: '盈和动力',
+      settleMoney:63000,
+      commission:45,
+      type:'仓储费用',
+      state:'待结算',
+      createTime: '2023-08-27 20:20:15'
+    }];
+    (this.$refs.willSettle as any).setTableValue(data);
+    (this.$refs.willSettle as any).setPage(this.page)
+  }
+  queryList(){}
+  modalHandle(){}
+  clickHandle(){}
+  detail(){}
+  mounted(){
+    this.load = true
+    setTimeout(()=>{
+      this.load = false
+      this.getList()
+      this.getSettledList()
+    },1500)
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .fee-tab{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding: 16px 16px 0;
+    .item-tab{
+      padding-bottom: 8px;
+      margin-right: 32px;
+      border-bottom: solid 3px #FFF;
+      cursor: pointer;
+    }
+    .on-tab{
+      border-bottom: solid 3px #1684FC;
+      color: #1684FC;
+    }
+  }
+  .fee-main{
+    width: 100%;
+    height: calc(100% - 50px);
+    .fee-box{
+      width: 100%;
+      height: 100%;
+      display: none;
+    }
+    .onShow{
+      display: block;
+    }
+  }
+}
+.top{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 16px;
+  justify-content: space-between;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #FFF;
+  .name{
+    font-size: 14px;
+    span{
+      color: #fc8516;
+    }
+  }
+  .btn-group{
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .pay-btn{
+      width: 120px;
+      height: 36px;
+      line-height: 36px;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      text-align: center;
+      box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 1);
+      margin-right: 16px;
+      cursor: pointer;;
+    }
+    .back{
+      cursor: pointer;
+      width: 110px;
+      height: 36px;
+      box-sizing: border-box;
+      line-height: 36px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      color: rgba(22, 132, 252, 1);
+      font-size: 14px;
+      text-align: center;
+      border: 1px solid rgba(22, 132, 252, 1);
+    }
+  }
+}
+.top-space{
+  height: 60px;
+}
+.pay-bill{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  .pay-item{
+    width: 44%;
+    box-sizing: border-box;
+    padding: 16px;
+    margin-left: 4%;
+    border:solid 1px #CCC;
+    margin-bottom: 16px;
+    cursor: pointer;
+    position: relative;
+    .check{
+      height: 24px;
+      width: 24px;
+      background-color: #1684FC;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      border-radius: 50%;
+      visibility: hidden;
+      i.el-icon-check{
+        color: #FFF;
+        font-size: 16px;
+        font-weight: 700;
+      }
+    }
+    .showCheck{
+      visibility: visible;
+    }
+    .amount{
+      font-size: 20px;
+      >span{
+        color: #F00;
+      }
+    }
+    .pay-info{
+      font-size: 14px;
+      color: #999;
+      padding-top: 4px;
+    }
+  }
+  .pay-item:hover{
+    border-color: #1684FC;
+    .check{
+      visibility: visible;
+    }
+  }
+}
+</style>