|
|
@@ -1,11 +1,9 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<!--:row-style="{height:'20px',padding:'0px',fontSize:'12px'}"-->
|
|
|
- <avue-crud :option="option" :data="tableData" id="out-table" ref="crud"
|
|
|
+ <avue-crud :option="optionBack" :data="filteredData" v-loadmore="handelLoadmore" id="out-table" ref="crud"
|
|
|
@selection-change="handleSelectionChange" :header-cell-style="tableHeaderCellStyle"
|
|
|
- :row-class-name="rowClassName" :cell-style="cellStyle"
|
|
|
- @resetColumn="resetColumn('crud', 'option', 'optionBack', 492)"
|
|
|
- @saveColumn="saveColumn('crud', 'option', 'optionBack', 492)">
|
|
|
+ :row-class-name="rowClassName" :cell-style="cellStyle" :data-size="tableData.length">
|
|
|
<template slot="menuLeft">
|
|
|
<slot name="menuLeft"></slot>
|
|
|
</template>
|
|
|
@@ -77,7 +75,8 @@ export default {
|
|
|
curCodeData: [], // 币种
|
|
|
option: {},
|
|
|
optionBack: {
|
|
|
- height: 'auto',
|
|
|
+ height: '300px',
|
|
|
+ // maxHeight: '300px',
|
|
|
calcHeight: 30,
|
|
|
menuWidth: 60,
|
|
|
tip: false,
|
|
|
@@ -88,9 +87,12 @@ export default {
|
|
|
editBtn: false,
|
|
|
delBtn: false,
|
|
|
refreshBtn: false,
|
|
|
- index: true,
|
|
|
+ // index: true,
|
|
|
selection: true,
|
|
|
align: 'center',
|
|
|
+ selectionFixed: false,
|
|
|
+ // // expandFixed: false,
|
|
|
+ // menuFixed: false,
|
|
|
column: [
|
|
|
{
|
|
|
label: "所属公司",
|
|
|
@@ -126,14 +128,14 @@ export default {
|
|
|
}],
|
|
|
overHidden: true,
|
|
|
},
|
|
|
-/*
|
|
|
- {
|
|
|
- label: "发票号",
|
|
|
- prop: "invoiceNo",
|
|
|
- width: 80,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
-*/
|
|
|
+ /*
|
|
|
+ {
|
|
|
+ label: "发票号",
|
|
|
+ prop: "invoiceNo",
|
|
|
+ width: 80,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ */
|
|
|
{
|
|
|
label: "费用名称",
|
|
|
prop: "feeCnName",
|
|
|
@@ -252,20 +254,20 @@ export default {
|
|
|
width: 100,
|
|
|
overHidden: true
|
|
|
},
|
|
|
-/*
|
|
|
- {
|
|
|
- label: "签收人",
|
|
|
- prop: "signforName",
|
|
|
- width: 80,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "签收日期",
|
|
|
- prop: "signforDate",
|
|
|
- width: 100,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
-*/
|
|
|
+ /*
|
|
|
+ {
|
|
|
+ label: "签收人",
|
|
|
+ prop: "signforName",
|
|
|
+ width: 80,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "签收日期",
|
|
|
+ prop: "signforDate",
|
|
|
+ width: 100,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ */
|
|
|
{
|
|
|
label: "BOOKINGNO",
|
|
|
prop: "bookingNo",
|
|
|
@@ -334,6 +336,62 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
+ currentStartIndex: 0,
|
|
|
+ currentEndIndex: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ loadmore: {
|
|
|
+ componentUpdated: function (el, binding, vnode, oldVnode) {
|
|
|
+ // 设置默认溢出显示数量
|
|
|
+ var spillDataNum = 20;
|
|
|
+
|
|
|
+ // 设置隐藏函数
|
|
|
+ var timeout = false;
|
|
|
+ let setRowDisableNone = function (topNum, showRowNum, binding) {
|
|
|
+ if (timeout) {
|
|
|
+ clearTimeout(timeout);
|
|
|
+ }
|
|
|
+ timeout = setTimeout(() => {
|
|
|
+ binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ setTimeout(() => {
|
|
|
+ const dataSize = vnode.data.attrs['data-size'];
|
|
|
+ const oldDataSize = oldVnode.data.attrs['data-size'];
|
|
|
+ if (dataSize === oldDataSize) return;
|
|
|
+ const selectWrap = el.querySelector('.el-table__body-wrapper');
|
|
|
+ const selectTbody = selectWrap.querySelector('table tbody');
|
|
|
+ const selectRow = selectWrap.querySelector('table tr');
|
|
|
+ if (!selectRow) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const rowHeight = selectRow.clientHeight;
|
|
|
+ let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);
|
|
|
+
|
|
|
+ const createElementTR = document.createElement('tr');
|
|
|
+ let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
|
|
|
+ createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
|
|
|
+ selectTbody.append(createElementTR);
|
|
|
+
|
|
|
+ // 监听滚动后事件
|
|
|
+ selectWrap.addEventListener('scroll', function () {
|
|
|
+ let topPx = this.scrollTop - spillDataNum * rowHeight;
|
|
|
+ let topNum = Math.round(topPx / rowHeight);
|
|
|
+ let minTopNum = dataSize - spillDataNum - showRowNum;
|
|
|
+ if (topNum > minTopNum) {
|
|
|
+ topNum = minTopNum;
|
|
|
+ }
|
|
|
+ if (topNum < 0) {
|
|
|
+ topNum = 0;
|
|
|
+ topPx = 0;
|
|
|
+ }
|
|
|
+ selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
|
|
|
+ createElementTR.setAttribute('style', `height: ${createElementTRHeight - topPx > 0 ? createElementTRHeight - topPx : 0}px;`);
|
|
|
+ setRowDisableNone(topNum, showRowNum, binding);
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
|
@@ -342,6 +400,10 @@ export default {
|
|
|
this.invoicelosWorkDictsfun()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handelLoadmore(currentStartIndex, currentEndIndex) {
|
|
|
+ this.currentStartIndex = currentStartIndex;
|
|
|
+ this.currentEndIndex = currentEndIndex;
|
|
|
+ },
|
|
|
armbChange(row) {
|
|
|
if (Number(row.amount - row.reconciliationAmount) > 0) {
|
|
|
if (Number(row.currentStlAmountRMB) < 0) {
|
|
|
@@ -614,6 +676,18 @@ export default {
|
|
|
return this.handleSelectionData.reduce((start, end) => {
|
|
|
return start.rowIndex < end.rowIndex ? start : end;
|
|
|
});
|
|
|
+ },
|
|
|
+ filteredData() {
|
|
|
+ let list = this.tableData.filter((item, index) => {
|
|
|
+ if (index < this.currentStartIndex) {
|
|
|
+ return false;
|
|
|
+ } else if (index > this.currentEndIndex) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return list
|
|
|
}
|
|
|
},
|
|
|
|