|
|
@@ -0,0 +1,120 @@
|
|
|
+@extends('layouts.app')
|
|
|
+@section('title')客户管理-即时账单@endsection
|
|
|
+
|
|
|
+@section('content')
|
|
|
+ @component('customer.finance.menu')@endcomponent
|
|
|
+ <div class="container-fluid" id="container">
|
|
|
+ <div id="form_div"></div>
|
|
|
+ <div class="mt-1">
|
|
|
+ <button type="button" class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'']"
|
|
|
+ data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果,将其全部记录(每一页)导出">
|
|
|
+ 导出Excel
|
|
|
+ </button>
|
|
|
+ <div class="dropdown-menu">
|
|
|
+ <a class="dropdown-item" @click="excelExport(false)" href="javascript:">导出勾选内容</a>
|
|
|
+ <a class="dropdown-item" @click="excelExport(true)" href="javascript:">导出所有页</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="all" id="cloneCheckAll" class="d-none">
|
|
|
+ <input id="all" type="checkbox" @click="checkAll($event)">全选
|
|
|
+ </label>
|
|
|
+ <table class="d-none" id="headerRoll"></table>
|
|
|
+ <table class="table table-sm text-nowrap table-striped table-hover" id="headerParent">
|
|
|
+ <tr class="text-center">
|
|
|
+ <td colspan="2"></td>
|
|
|
+ <td colspan="8" class="bg-light-info">单据信息</td>
|
|
|
+ <td colspan="4" class="bg-light-khaki">物流作业信息</td>
|
|
|
+ <td colspan="4" class="bg-light-cyanogen">费用信息</td>
|
|
|
+ </tr>
|
|
|
+ <tr id="header"></tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+@stop
|
|
|
+
|
|
|
+@section("lastScript")
|
|
|
+ <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
|
|
|
+ <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
|
|
|
+ <script>
|
|
|
+ let vue = new Vue({
|
|
|
+ el:"#container",
|
|
|
+ data:{
|
|
|
+ checkData:[],
|
|
|
+ bills : [],
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ let data=[
|
|
|
+ [
|
|
|
+ {name:'shop_name',type:'select',tip:'店铺',placeholder: '店铺',data:[]},
|
|
|
+ {name:'counting_month_start',type:'dateMonth',tip:'起始结算月'},
|
|
|
+ {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表,回车确定','选择要显示的项目'],
|
|
|
+ placeholder:['项目','定位或多选项目'],data:[]},
|
|
|
+ {name: 'operation_bill', type: 'input', tip: '发/收/退/提货单号:可在两侧增加百分号(%)进行模糊搜索', placeholder: '单据号'},
|
|
|
+ {name:'type',type:'select',tip:'类型',placeholder: '类型',data:[]},
|
|
|
+ ],[
|
|
|
+ {name:'customer_id',type:'select',tip:'客户',placeholder: '客户',data:[]},
|
|
|
+ {name:'counting_month_end',type:'dateMonth',tip:'结束结算月'},
|
|
|
+ {name:'status',type:'select',placeholder:'状态',data:[]},
|
|
|
+ {name:'logistic_bill', type: 'input', tip: '物流/快递单号:可在两侧增加百分号(%)进行模糊搜索', placeholder: '快递单号'},
|
|
|
+ ],
|
|
|
+ ];
|
|
|
+ this.form = new query({
|
|
|
+ el:"#form_div",
|
|
|
+ condition:data,
|
|
|
+ });
|
|
|
+ this.form.init();
|
|
|
+ let column = [
|
|
|
+ {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
|
|
|
+ dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
|
|
|
+ {name:'index',value: '序号', neglect: true},
|
|
|
+ {name:'owner_name',value: '项目', class: "bg-info"},
|
|
|
+ {name:'worked_at',value: '作业时间', class: "bg-info"},
|
|
|
+ {name:'type',value: '类型', class: "bg-info"},
|
|
|
+ {name:'shop_name',value: '店铺', class: "bg-info"},
|
|
|
+ {name:'operation_bill',value: '单号(发/收/退/提)', class: "bg-info"},
|
|
|
+ {name:'consignee_name',value: '收件人', class: "bg-info"},
|
|
|
+ {name:'consignee_phone',value: '收件人电话', class: "bg-info"},
|
|
|
+ {name:'commodity_amount',value: '商品数量', class: "bg-info", neglect: true},
|
|
|
+ {name:'logistic_bill',value: '物流/快递单号', class: "bg-khaki"},
|
|
|
+ {name:'volume',value: '体积', class: "bg-khaki", neglect: true},
|
|
|
+ {name:'weight',value: '重量', class: "bg-khaki", neglect: true},
|
|
|
+ {name:'logistic_name',value: '承运商', class: "bg-khaki"},
|
|
|
+ {name:'work_fee',value: '操作费', class: "bg-cyanogen"},
|
|
|
+ {name:'logistic_fee',value: '物流费', class: "bg-cyanogen"},
|
|
|
+ {name:'total_fee',value: '合计', class: "bg-cyanogen"},
|
|
|
+ ];
|
|
|
+ let _this=this;
|
|
|
+ setTimeout(function () {
|
|
|
+ let header = new Header({
|
|
|
+ el: "#header",
|
|
|
+ column: column,
|
|
|
+ data: _this.bills,
|
|
|
+ restorationColumn: 'id',
|
|
|
+ fixedTop:($('#form_div').height())+2,
|
|
|
+ offset:0.5,
|
|
|
+ vue:vue
|
|
|
+ });
|
|
|
+ header.init();
|
|
|
+ },0);
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ excelExport(isAll){
|
|
|
+
|
|
|
+ },
|
|
|
+ //全选事件
|
|
|
+ checkAll(e){
|
|
|
+ if (e.target.checked){
|
|
|
+ this.owners.forEach((el)=>{
|
|
|
+ if (this.checkData.indexOf(el.id) === '-1'){
|
|
|
+ this.checkData.push(el.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ this.checkData = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+@stop
|