<el-col >
<div style="border: 1px solid #c9c9c9;">
<el-table
border
height="475"
ref="recordTable"
:row-key="recordKeys"
:data="tableData"
stripe
:header-row-style="{ height: '66px' }"
:cell-style="{ padding: '7px 0' }"
tooltip-effect="dark"
style="width: 100%;cursor: pointer;"
highlight-current-row
@selection-change="recordSelectionChange"
@row-click="singleClickChange"
:header-cell-style="{ 'text-align': 'center' }"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
:selectable="checkSelect"
v-if="radio === '案卷' ? true : false"
>
</el-table-column>
<el-table-column
prop="recordYear"
label="年度"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="recordTimeLimit"
label="保管期限"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="recordOrderNum"
label="案卷号"
width="100"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="recordHeading"
label="案卷题名"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="recordCount"
label="卷内文件数"
width="150"
align="center"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</div>
<div style="text-align: center;margin-top: 10px">
<el-pagination
@size-change="handleSizeChangeClick"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 50]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</el-col>
<el-col :span="8">
<div style="border: 1px solid #c9c9c9;">
<el-table
border
:data="tableDataFile"
ref="multipleFileTable"
:row-key="rowFileKey"
height="475"
stripe
:header-row-style="{ height: '66px' }"
:cell-style="{ padding: '7px 0' }"
tooltip-effect="dark"
style="width: 100%"
:header-cell-style="{ 'text-align': 'center' }"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
prop="fileOrderNum"
label="文件号"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="fileHeading"
label="文件题名"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
</div>
</el-col>
data
ruleForm: {
items: []
},
selectAllChildMap: new Map(),
tableData: [
{
recordYear: "2011",
recordTimeLimit: "永久",
recordOrderNum: "1",
recordHeading: "案卷号1",
recordId: "1",
subList: [
{
// customerOrderItemId: 10,
fileId: "3",
recordId: "1",
fileNum: "CG2022083100",
fileHeading: "文件题名1"
},
{
// customerOrderItemId: 100,
fileId: "4",
recordId: "1",
fileNum: "CG2022083200",
fileHeading: "文件题名2"
}
],
childIdList: ["4"]
},
{
recordYear: "2022",
recordTimeLimit: "定期",
recordOrderNum: "2",
recordHeading: "案卷号2",
recordId: "21",
subList: [
{
// customerOrderItemId: 20,
fileId: "5",
recordId: "21",
fileNum: "CG2022091900",
fileHeading: "文件题名2"
}
],
childIdList: ["5"]
},
{
recordYear: "2022",
recordTimeLimit: "定期",
recordOrderNum: "2",
recordHeading: "案卷号2",
recordId: "21",
subList: [
{
// customerOrderItemId: 20,
fileId: "5",
recordId: "21",
fileNum: "CG2022091900",
fileHeading: "文件题名2"
}
],
childIdList: ["5"]
},
{
recordYear: "2022",
recordTimeLimit: "定期",
recordOrderNum: "2",
recordHeading: "案卷号2",
recordId: "21",
subList: [
{
// customerOrderItemId: 20,
fileId: "5",
recordId: "21",
fileNum: "CG2022091900",
fileHeading: "文件题名2"
}
],
childIdList: ["5"]
}
],
active: 1,
disableStep: true,
currentPage: 1,
pageSize: 2,
total: 0,
multipleSelection: [], // 第二步表格多选
methods
handleSelectionChange(val) {
let fileArr = [];
fileArr = val.map(item => {
return {
fileHeading: item.fileHeading,
recordId: item.recordId,
fileId: item.fileId,
fileOrderNum: item.fileOrderNum
};
});
let tableArr = [];
fileArr.forEach(el => {
tableArr = this.tableData.filter(e => e.recordId === el.recordId);
this.tableNewArr.push(tableArr[0]);
});
this.tableNewArr = this.tableNewArr.map(k => {
return {
recordYear: k.recordYear,
recordTimeLimit: k.recordTimeLimit,
recordOrderNum: k.recordOrderNum,
recordHeading: k.recordHeading,
recordCount: k.recordCount,
recordId: k.recordId,
currentNum: 0,
sonData: []
};
});
this.tableNewArr.forEach(k => {
fileArr.forEach(i => {
if (k.recordId === i.recordId) {
k.sonData.push(i);
k.currentNum = k.sonData.length;
}
});
});
for (let i = 0; i < this.tableNewArr.length; i++) {
for (let j = i + 1; j < this.tableNewArr.length; j++) {
if (this.tableNewArr[i].recordId == this.tableNewArr[j].recordId) {
this.tableNewArr.splice(j, 1);
j--;
}
}
}
this.tableNewArr = this.tableNewArr.filter(item => {
return item.currentNum > 0;
});
this.multipleSelection = val;
},