'表头排序改动'

resources/js/queryForm/header.js

@@ -1,3 +1,9 @@
+/**
+ * 需在页面定义三个元素 tr的元素当作当前元素 id 自定义 默认header
+ * tr的父级元素 table id默认为tr的id加Parent后缀
+ * 浮动表格元素 table id默认为tr的id加Roll后缀
+ * */
+
 window.sort=require('../utilities/sort');
 window.Header = function getHeader(object) {
     this.object = object;
@@ -6,6 +12,7 @@ window.Header = function getHeader(object) {
     this._data = object.data;
     this._restorationColumn = object.restorationColumn;
     this._fixedTop = object.fixedTop || 0;
+    this._offset = object.offset || 0;
 
     let _this = this;
     let _parentNode = $(_this._header);
@@ -26,11 +33,17 @@ window.Header = function getHeader(object) {
         $(_this._header+"Roll").append(_parentNodeTemp);
         $(window).scroll(function(){
             let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-            if (scrollTop > _parentNode_top) {
+            if (scrollTop > _parentNode_top-_this._fixedTop) {
                 $(_this._header+"Roll").removeClass('d-none');
             } else {
                 $(_this._header+"Roll").addClass('d-none');
             }
+            let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+            if (scrollLeft > 0){
+                _parentNodeTemp.css('margin-left',0-(scrollLeft));
+            }else{
+                _parentNodeTemp.css('margin-left',"");
+            }
         });
     }
 
@@ -43,6 +56,72 @@ window.Header = function getHeader(object) {
      *          neglect : null || bool          --是否忽略排序
      *         }
      * */
+    let rule=function (column,column_sort,column_sort_temp) {
+        if (!sortType[column.name]){
+            sortType[column.name] = 'asc';
+            columnArr.push(column.name);
+            column_sort.removeClass('fa-sort').addClass('fa-sort-asc');
+            column_sort_temp.removeClass('fa-sort').addClass('fa-sort-asc');
+            let columnArrTemp = [];
+            columnArrTemp.push.apply(columnArrTemp,columnArr);
+            window.sort.sort(_this._data,columnArrTemp,sortType);
+            return ;
+        }
+        if (sortType[column.name] === 'asc'){
+            sortType[column.name] = 'desc';
+            column_sort.removeClass('fa-sort-asc').addClass('fa-sort-desc');
+            column_sort_temp.removeClass('fa-sort-asc').addClass('fa-sort-desc');
+            let columnArrTemp = [];
+            columnArrTemp.push.apply(columnArrTemp,columnArr);
+            window.sort.sort(_this._data,columnArrTemp,sortType);
+            return ;
+        }
+        if (sortType[column.name] === 'desc'){
+            delete sortType[column.name];
+            columnArr.some(function (name, index) {
+                if (name === column.name){
+                    columnArr.splice(index,1);
+                    return true;
+                }
+            });
+            column_sort.removeClass('fa-sort-desc').addClass('fa-sort');
+            column_sort_temp.removeClass('fa-sort-desc').addClass('fa-sort');
+            if (columnArr.length === 0){
+                //希尔排序
+                let arr = [];
+                arr.push.apply(arr,_this._data);
+                let len = arr.length;
+                for(let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
+                    for(let i = gap; i < len; i++) {
+                        let j = i;
+                        let current = arr[i];
+                        while(j - gap >= 0 && current[_this._restorationColumn] < arr[j - gap][_this._restorationColumn]) {
+                            arr[j] = arr[j - gap];
+                            j = j - gap;
+                        }
+                        arr[j] = current;
+                    }
+                }
+                //插入排序
+                /*let preIndex, current;
+                for(let i = 1; i < len; i++) {
+                    preIndex = i - 1;
+                    current = arr[i];
+                    while(preIndex >= 0 && arr[preIndex][_this._restorationColumn] > current[_this._restorationColumn]) {
+                        arr[preIndex + 1] = arr[preIndex];
+                        preIndex--;
+                    }
+                    arr[preIndex + 1] = current;
+                }*/
+                _this._data.length = 0;
+                _this._data.push.apply(_this._data,arr);
+                return;
+            }
+            let columnArrTemp = [];
+            columnArrTemp.push.apply(columnArrTemp,columnArr);
+            window.sort.sort(_this._data,columnArrTemp,sortType);
+        }
+    };
     function append() {
         _this._column.forEach(function (column) {
             if (column.customization){
@@ -54,99 +133,44 @@ window.Header = function getHeader(object) {
                 }
                 if (column.style) _td += column.style;
                 _td += "'>";
+                _td += "<span style='display: inline-block'>";
                 if(!column.neglect){
                     _td += "<span id='sort_"+column.name+"' class='fa fa-sort'></span>";
                 }
-                _td += "<span style='display: inline-block'>"+column.value+"</span>";
+                _td += column.value+"</span>";
                 _td += "</th>";
                 _parentNode.append(_td);
                 let column_dom = $('#dom_'+column.name);
-                let column_dom_temp = column_dom.clone();
-                let columnNameDom = column_dom_temp.children()[0];
-                if (!column.neglect){
-                    column_dom_temp.children()[0].id = 'sort_'+column.name+"_temp";
-                    columnNameDom = column_dom_temp.children()[1];
-                }
-                console.log(columnNameDom);
-                column_dom_temp.attr('id','dom_'+column.name+"_temp");
-                $(columnNameDom).css('width',column_dom.width());
-                _parentNodeTemp.append(column_dom_temp);
                 if (!column.neglect){
                     let column_sort = $('#sort_'+column.name);
-                    let rule=function () {
-                        if (!sortType[column.name]){
-                            sortType[column.name] = 'asc';
-                            columnArr.push(column.name);
-                            column_sort.removeClass('fa-sort').addClass('fa-sort-asc');
-                            column_dom_temp.children()[0].className = 'fa fa-sort-asc';
-                            let columnArrTemp = [];
-                            columnArrTemp.push.apply(columnArrTemp,columnArr);
-                            window.sort.sort(_this._data,columnArrTemp,sortType);
-                            return ;
-                        }
-                        if (sortType[column.name] === 'asc'){
-                            sortType[column.name] = 'desc';
-                            column_sort.removeClass('fa-sort-asc').addClass('fa-sort-desc');
-                            column_dom_temp.children()[0].className = 'fa fa-sort-desc';
-                            let columnArrTemp = [];
-                            columnArrTemp.push.apply(columnArrTemp,columnArr);
-                            window.sort.sort(_this._data,columnArrTemp,sortType);
-                            return ;
-                        }
-                        if (sortType[column.name] === 'desc'){
-                            delete sortType[column.name];
-                            columnArr.some(function (name, index) {
-                                if (name === column.name){
-                                    columnArr.splice(index,1);
-                                    return true;
-                                }
-                            });
-                            column_sort.removeClass('fa-sort-desc').addClass('fa-sort');
-                            column_dom_temp.children()[0].className = 'fa fa-sort';
-                            if (columnArr.length === 0){
-                                //希尔排序
-                                let arr = [];
-                                arr.push.apply(arr,_this._data);
-                                let len = arr.length;
-                                for(let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
-                                    for(let i = gap; i < len; i++) {
-                                        let j = i;
-                                        let current = arr[i];
-                                        while(j - gap >= 0 && current[_this._restorationColumn] < arr[j - gap][_this._restorationColumn]) {
-                                            arr[j] = arr[j - gap];
-                                            j = j - gap;
-                                        }
-                                        arr[j] = current;
-                                    }
-                                }
-                                //插入排序
-                                /*let preIndex, current;
-                                for(let i = 1; i < len; i++) {
-                                    preIndex = i - 1;
-                                    current = arr[i];
-                                    while(preIndex >= 0 && arr[preIndex][_this._restorationColumn] > current[_this._restorationColumn]) {
-                                        arr[preIndex + 1] = arr[preIndex];
-                                        preIndex--;
-                                    }
-                                    arr[preIndex + 1] = current;
-                                }*/
-                                _this._data.length = 0;
-                                _this._data.push.apply(_this._data,arr);
-                                return;
-                            }
-                            let columnArrTemp = [];
-                            columnArrTemp.push.apply(columnArrTemp,columnArr);
-                            window.sort.sort(_this._data,columnArrTemp,sortType);
-                        }
-                    };
-                    column_dom.on('click',rule);
-                    column_dom_temp.on('click',rule);
+                    let column_sort_temp = $('#sort_'+column.name+"_temp");
+                    column_dom.on('click',rule(column,column_sort,column_sort_temp));
                 }
             }
         });
     }
+    function cloneDom(){
+        _this._column.forEach(function (column) {
+            let column_dom = $('#dom_'+column.name);
+            let column_dom_temp = column_dom.clone();
+            let columnNameDom = column_dom_temp.children()[0];
+            if (!column.neglect){
+                $(column_dom_temp.children()[0]).children()[0].id = 'sort_'+column.name+"_temp";
+            }
+            column_dom_temp.attr('id','dom_'+column.name+"_temp");
+            $(columnNameDom).css('width',column_dom.width()+_this._offset);
+            _parentNodeTemp.append(column_dom_temp);
+            if (!column.neglect){
+                let column_sort = $('#sort_'+column.name);
+                let column_sort_temp = $('#sort_'+column.name+"_temp");
+                column_dom_temp.on('click',rule(column,column_sort,column_sort_temp));
+            }
+        });
+    }
+
     this.init = function() {
         append();
         fixed();
+        cloneDom();
     }
 };

resources/views/process/index.blade.php

@@ -158,8 +158,8 @@
                 </div><!-- /.modal-content -->
             </div><!-- /.modal -->
         </div>
-        <table class="table table-sm text-nowrap d-none" id="headerRoll"></table>
-        <table class="table table-sm text-nowrap" id="headerParent">
+        <table class="table table-sm text-nowrap table-bordered d-none" id="headerRoll"></table>
+        <table class="table table-sm text-nowrap table-bordered" id="headerParent">
             <tr class="row-even p-0" id="header" style="background: rgb(255, 255, 255);">
                 <th>
                     <label for="all">
@@ -461,7 +461,7 @@
 @section('lastScript')
     <script type="text/javascript" src="{{asset('js/queryForm/export200804.js')}}"></script>
     <script type="text/javascript" src="{{asset('js/queryForm/queryForm200806.js')}}"></script>
-    <script type="text/javascript" src="{{asset('js/queryForm/header.js')}}"></script>
+    <script type="text/javascript" src="{{asset('js/queryForm/header200813a.js')}}"></script>
     <script>
         new Vue({
             el:"#process",

resources/views/rejected/search/general.blade.php

@@ -7,7 +7,8 @@
         @component('rejected.search.menu')@endcomponent
     </div>
     <div class="container-fluid">
-        <div style="min-width: 2070px;">
+        <div>
+{{--        <div style="min-width: 2070px;">--}}
             <div class="d-none" id="list">
                 @if(Session::has('successTip'))
                     <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
@@ -55,44 +56,13 @@
                         <a class="dropdown-item" @click="setIsLoaded_batch(4)" href="javascript:">待确认</a>
                     </div>
                 </span>
-
-                <table class="table table-striped table-sm table-bordered table-hover" style="background: #fff;">
-                    <tr>
+                <table class="table table-striped table-sm table-bordered table-hover text-nowrap d-none" id="headerRoll" ></table>
+                <table class="table table-striped table-sm table-bordered table-hover text-nowrap" style="background: #fff;" id="headerParent">
+                    <tr id="header" style="background: rgb(255, 255, 255)">
                         <th>
                             <input type="checkbox" class="form-control-sm tooltipTarget" title="全选"
                                    id="checkSelectingAll" @click="checkBoxAllToggle" v-model="checkBoxAll" value="1">
                         </th>
-                        <th>序号</th>
-                        <th>是否审核</th>
-                        <th>是否完结</th>
-                        <th>是否入库</th>
-                        <th>创建时间</th>
-                        <th>客户名称</th>
-                        <th>退回单号</th>
-                        <th>退回公司</th>
-                        <th>订单号</th>
-                        <th>姓名</th>
-                        <th>电话</th>
-                        <th>原单单号</th>
-                        @cannot('退货管理-到付费用')<th>到付费用</th>@endcannot
-                        @can('退货管理-查询-客户定义-爱奇艺')
-                            <th>寄件方省</th>
-                            <th>重量</th>
-                        @endcan
-                        <th>商品总数</th>
-                        <th>商品条码</th>
-                        <th>商品名称</th>
-                        <th>数量</th>
-                        <th>是否正品</th>
-                        <th>批次号</th>
-                        <th>生产日期</th>
-                        <th>效期</th>
-                        <th>备注</th>
-                        <th>退单备注</th>
-                        <th>录入人</th>
-                        @can('退货管理-编辑','退货管理-删除')
-                            <th>操作</th>
-                        @endcan
                     </tr>
 
                     <tr v-for="(rejectedBill,i) in rejectedBills" :data-id="rejectedBill.id">
@@ -210,6 +180,7 @@
     </script>
     <script src="{{asset('js/queryForm/export200804.js')}}"></script>
     <script src="{{asset('js/queryForm/queryForm200806.js')}}"></script>
+    <script type="text/javascript" src="{{asset('js/queryForm/header200813a.js')}}"></script>
     <script>
         new Vue({
             el:"#list",
@@ -261,6 +232,43 @@
                     condition:data
                 });
                 this.form.init();
+                let header = new Header({
+                    el: "#header",
+                    column: [
+                        {name:'index',value: '序号', neglect: true},
+                        {name:'checked_numbers',value: '是否审核', neglect: true},
+                        {name: 'is_finished', value: '是否完结',neglect: true},
+                        {name: 'is_loaded', value: '是否入库', neglect: true},
+                        {name:'created_at',value: '创建时间'},
+                        {name: 'owner_name', value: '客户名称', neglect: true},
+                        {name: 'logistic_number_return', value: '退回单号'},
+                        {name: 'logistic_name', value: '退回公司', neglect: true},
+                        {name:'order_number',value: '订单号'},
+                        {name: 'sender', value: '姓名'},
+                        {name: 'mobile_sender', value: '电话'},
+                        {name: 'logistic_number', value: '原单单号'},
+                        @cannot('退货管理-到付费用'){name:'fee_collected',value: '到付费用'},@endcannot
+                        @can('退货管理-查询-客户定义-爱奇艺'){name:'common_01',value: '寄件方省'},@endcan
+                        {name:'common_02',value: '重量'},
+                        {name:'goods_amount',value: '商品总数'},
+                        {name:'item_barcode_goods',value: '商品条码', neglect: true},
+                        {name: 'item_name_goods', value: '商品名称', neglect: true},
+                        {name: 'item_amount', value: '数量', neglect: true},
+                        {name:'item_quality_label',value: '是否正品', neglect: true},
+                        {name:'item_batch_number',value: '批次号', neglect: true},
+                        {name:'item_made_at',value: '生产日期', neglect: true},
+                        {name:'item_validity_at',value: '效期', neglect: true},
+                        {name:'item_remark',value: '备注', neglect: true},
+                        {name:'remark',value: '退单备注'},
+                        {name:'operator_name',value: '录入人'},
+                        @can('退货管理-编辑','退货管理-删除'){name:'remove',value: '操作', neglect: true},@endcan
+                    ],
+                    data: this.rejectedBills,
+                    restorationColumn: 'id',
+                    fixedTop:($('#form_div').height())+2,
+                    offset:0.5,
+                });
+                header.init();
             },
             methods:{
                 edit(id){

webpack.mix.js

@@ -21,5 +21,5 @@ mix.js('resources/js/trix.js','public/js/trix.js');
 mix.copy('resources/sass/trix.css','public/css/trix.css');
 mix.copy('resources/js/queryForm/queryForm.js','public/js/queryForm/queryForm200806.js');
 mix.copy('resources/js/queryForm/export.js','public/js/queryForm/export200804.js');
-mix.js('resources/js/queryForm/header.js','public/js/queryForm/header.js');
+mix.js('resources/js/queryForm/header.js','public/js/queryForm/header200813a.js');