1、VAT日记账数据预览改变Grid防止水平滚轮滚动导致一些列会出现短暂空白

atms-web/src/main/webapp/app/vat/preview/vat-preview-journal/vat-preview-journal.ctrl.js

@@ -75,7 +75,7 @@
                     data.list.forEach(function (v) {
                         v.index = index++;
                     });
-                    $scope.gridOptions.data = data.list;
+                    $scope.gridDataSource = data.list;
                     $scope.queryJournalEntryResult.pageInfo = data;
                     computeJournalEntryPage();
                     $scope.ledgerName = data.list[0].ledgerName;
@@ -303,235 +303,103 @@
 
 
             $scope.gridOptions = {
-                rowHeight: constant.UIGrid.rowHeight,
-                selectionRowHeaderWidth: constant.UIGrid.rowHeight,
-                // expandableRowTemplate: '<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>',
-                virtualizationThreshold: 50,//默认加载50条数据，避免在数据展示时，只显示前面4条
-                enableSorting: false,
-                enableColumnMenus: false,
-                enableHorizontalScrollbar: 1,
-                columnDefs: [
-                    {
-                        name: $translate.instant('ApprovalStatus'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.approvalStatus}}<span></div>'
-                    },
-                    // { name: $translate.instant('InvoiceQJ'), width: '8%', cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.periodID}}<span></div>' },
-                    {
-                        name: $translate.instant('Posting'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.postedStatus}}<span></div>'
-                    },
-                    {
-                        name: $translate.instant('AccountingPeriod'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span >{{row.entity.period}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('DocumentDate'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span >{{row.entity.accountingDate | date:"yyyy-MM-dd"}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('JournalSource'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span >{{row.entity.journalSource}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('JournalCategory'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span >{{row.entity.category}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('JournalName'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span >{{row.entity.name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('DocumentNo'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span >{{row.entity.voucherNum}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('Summary'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.description}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('MainBodyDescription'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment1Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDescription'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment2Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('SubjectDescription'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment3Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('AuxiliaryAccountDescription'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment4Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('ProfitCenterDescription'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment5Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('ProductManual'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment6Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('ProjectInstruction'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment7Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('InterCompanyDescription'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment8Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('Alternate1Description'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment9Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('Alternate2Description'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.segment10Name}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('Currency'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.journalCurrencyCode}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('LocalCurrency'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.currencyCode}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('JournalDebitAmount'),
-                        headerCellClass: 'rightHeader',
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents" style="text-align: right"><span>{{row.entity.accountedDr | number:2}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('JournalCreditAmount'),
-                        headerCellClass: 'rightHeader',
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents" style="text-align: right"><span>{{row.entity.accountedCr | number:2}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('LocalCurrencyDebitAmount'),
-                        headerCellClass: 'rightHeader',
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents" style="text-align: right"><span>{{row.entity.enteredDr | number:2}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('LocalCurrencyCreditAmount'),
-                        headerCellClass: 'rightHeader',
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents" style="text-align: right"><span>{{row.entity.enteredCr | number:2}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CashFlowEntry'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.cfItem}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('City'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute1}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('TransactionDate'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute2| date:"yyyy-MM-dd"}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('BankAccountNumber'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute3}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('BankSerialNumber'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute4}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('SupplierCode'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute5}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('TransactionOrderNumber'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute6}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('SupplierName'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute7}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('ReceiveCode'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute8}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('PreparedBy'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute9}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('Reviewer'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute10}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDepartmentDescription1'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute11}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDepartmentDescription2'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute12}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDepartmentDescription3'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute13}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDepartmentDescription4'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute14}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDepartmentDescription5'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute15}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('CostCenterDepartmentDescription6'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.attribute16}}</span></div>'
-                    },
-                    {
-                        name: $translate.instant('GroupCertificateNumber'),
-                        width: 200,
-                        cellTemplate: '<div class="ui-grid-cell-contents"><span></span></div>'
-                    }
-                ]
+                bindingOptions: {
+                    dataSource: 'gridDataSource'
+                },
+                columns: [
+                    {caption: $translate.instant('ApprovalStatus'),dataField: "approvalStatus",width: 120},
+                    {caption: $translate.instant('Posting'), dataField: "postedStatus",width: 120},
+                    {caption: $translate.instant('AccountingPeriod'), dataField: "period",width: 100},
+                    {caption: $translate.instant('DocumentDate'), dataField: "accountingDate", dataType: "date", format: "yyyy-MM-dd",width: 100},
+                    {caption: $translate.instant('JournalSource'), dataField: "journalSource",width: 200},
+                    {caption: $translate.instant('JournalCategory'), dataField: "category",width: 200},
+                    {caption: $translate.instant('JournalName'), dataField: "name",width: 200},
+                    {caption: $translate.instant('DocumentNo'), dataField: "voucherNum",width: 200},
+                    {caption: $translate.instant('Summary'), dataField: "description",width: 200},
+                    {caption: $translate.instant('MainBodyDescription'), dataField: "segment1Name",width: 200},
+                    {caption: $translate.instant('CostCenterDescription'), dataField: "segment2Name",width: 200},
+                    {caption: $translate.instant('SubjectDescription'), dataField: "segment3Name",width: 200},
+                    {caption: $translate.instant('AuxiliaryAccountDescription'), dataField: "segment4Name",width: 200},
+                    {caption: $translate.instant('ProfitCenterDescription'), dataField: "segment5Name",width: 200},
+                    {caption: $translate.instant('ProductManual'), dataField: "segment6Name",width: 200},
+                    {caption: $translate.instant('ProjectInstruction'), dataField: "segment7Name",width: 200},
+                    {caption: $translate.instant('InterCompanyDescription'), dataField: "segment8Name",width: 200},
+                    {caption: $translate.instant('Alternate1Description'), dataField: "segment9Name",width: 200},
+                    {caption: $translate.instant('Alternate2Description'), dataField: "segment10Name",width: 200},
+                    {caption: $translate.instant('currency'), dataField: "journalCurrencyCode",width: 200},
+                    {caption: $translate.instant('LocalCurrency'), dataField: "currencyCode",width: 200},
+                    {
+                        caption: $translate.instant('JournalDebitAmount'),
+                        dataField: "accountedDr",
+                        format: {type: 'fixedPoint', precision: 2},
+                        width: 100
+                    },
+                    {
+                        caption: $translate.instant('JournalCreditAmount'),
+                        dataField: "accountedCr",
+                        format: {type: 'fixedPoint', precision: 2},
+                        width: 100
+                    },
+                    {
+                        caption: $translate.instant('LocalCurrencyDebitAmount'),
+                        dataField: "enteredDr",
+                        format: {type: 'fixedPoint', precision: 2},
+                        width: 150
+                    },
+                    {
+                        caption: $translate.instant('LocalCurrencyCreditAmount'),
+                        dataField: "enteredCr",
+                        format: {type: 'fixedPoint', precision: 2},
+                        width: 150
+                    },
+                    {caption: $translate.instant('CashFlowEntry'), dataField: "cfItem",width: 200},
+                    {caption: $translate.instant('City'), dataField: "attribute1",width: 200},
+                    {
+                        caption: $translate.instant('TransactionDate'),
+                        dataField: "attribute2",
+                        dataType: "date",
+                        format: "yyyy-MM-dd",
+                        width: 100
+                    },
+                    {caption: $translate.instant('BankAccountNumber'), dataField: "attribute3",width: 200},
+                    {caption: $translate.instant('BankSerialNumber'), dataField: "attribute4",width: 200},
+                    {caption: $translate.instant('SupplierCode'), dataField: "attribute5",width: 200},
+                    {caption: $translate.instant('TransactionOrderNumber'), dataField: "attribute6",width: 200},
+                    {caption: $translate.instant('SupplierName'), dataField: "attribute7",width: 200},
+                    {caption: $translate.instant('ReceiveCode'), dataField: "attribute8",width: 200},
+                    {caption: $translate.instant('PreparedBy'), dataField: "attribute9",width: 200},
+                    {caption: $translate.instant('Reviewer'), dataField: "attribute10",width: 120},
+                    {caption: $translate.instant('CostCenterDepartmentDescription1'), dataField: "attribute11",width: 120},
+                    {caption: $translate.instant('CostCenterDepartmentDescription2'), dataField: "attribute12",width: 120},
+                    {caption: $translate.instant('CostCenterDepartmentDescription3'), dataField: "attribute13",width: 120},
+                    {caption: $translate.instant('CostCenterDepartmentDescription4'), dataField: "attribute14",width: 120},
+                    {caption: $translate.instant('CostCenterDepartmentDescription5'), dataField: "attribute15",width: 120},
+                    {caption: $translate.instant('CostCenterDepartmentDescription6'), dataField: "attribute16",width: 120}
+
+                ],
+                // onContentReady: function (e) {
+                //     $scope.extractFinancialInstance = e.component;
+                //     var totalCount = e.component.totalCount();
+                //     if (totalCount > 0) {
+                //         $scope.totalCount = totalCount;
+                //     }
+                // },
+                allowColumnResizing: true,
+                loadPanel: {
+                    enabled: true
+                },
+                selection: {
+                    mode: "single"
+                },
+                paging: {
+                    pageSize: 50,
+                },
+                showBorders: true,
+                showRowLines: true,
+                showColumnLines: true,
+                rowAlternationEnabled: true,  //单双行颜色
+                hoverStateEnabled: true,
+                noDataText: $translate.instant('NoDataText'),
             };
 
             $scope.doDataFilter = doDataFilter;

atms-web/src/main/webapp/app/vat/preview/vat-preview-journal/vat-preview-journal.html

@@ -39,8 +39,7 @@
     </div>
 
     <div id="mainAreaDiv" class="main-area">
-        <div class="inputInvoiceGrid" ui-grid="gridOptions">
-            <div class="watermark" ng-show="!gridOptions.data.length"><span translate="NoDataAvailable"></span></div>
+        <div id="journalEntryGridContainer" dx-data-grid="gridOptions">
         </div>
         <div class="pagination-container">
             <span>本页{{curPageItemCount}}条记录，共{{queryJournalEntryResult.pageInfo.total}}条记录</span>

atms-web/src/main/webapp/app/vat/preview/vat-preview-journal/vat-preview-journal.less

@@ -93,6 +93,10 @@
             z-index: 1000;
         }
 
+        #journalEntryGridContainer{
+            height: 460px;
+        }
+
         .inputInvoiceGrid {
             width: 100%;
             height: calc(~'100% - 158px');