更新了专家库UI 新增待导出列表 优化了多选逻辑

This commit is contained in:
unknown 2023-09-21 09:38:43 +08:00
parent 3ab246e20e
commit e04c5a6440
1 changed files with 121 additions and 51 deletions

View File

@ -7,60 +7,115 @@
<el-input v-model="searchInfo.keyWords" suffix-icon="el-icon-edit" clearable placeholder="请输入专家姓名">
<el-button slot="append" icon="el-icon-search" @click="nameSearch"></el-button>
</el-input>
<el-button type="primary" @click="dialogVisible = true" style="margin-left: 10px" >一键导入专家信息</el-button>
<el-button type="primary" style="margin-left: 10px" @click="exportFile">生成专家咨询费发放表</el-button>
<el-button type="primary" @click="dialogVisible = true" style="margin-left: 10px" plain>一键导入专家信息</el-button>
<el-button type="primary" style="margin-left: 10px" @click="exportFile" plain>生成专家咨询费发放表</el-button>
<el-button type="danger" @click="clearList" plain>清除导出列表</el-button>
</div>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
ref="table"
:row-class-name="rowClassName"
stripe
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="expertId"
label="ID"
width="100">
</el-table-column>
<el-table-column
prop="expertName"
label="专家姓名"
width="100">
</el-table-column>
<el-table-column
prop="expertRankName"
label="专家职称"
width="130">
</el-table-column>
<el-table-column
prop="expertUnit"
label="专家单位">
</el-table-column>
<el-table-column
prop="expertCardNum"
label="银行卡号">
</el-table-column>
<el-table-column
prop="expertBankName"
label="开户行">
</el-table-column>
<el-table-column
prop="expertIdCard"
label="身份证">
</el-table-column>
<el-table-column
prop="expertStandard"
label="开支标准">
</el-table-column>
<div style="display: flex; justify-content: space-between; width: 100%;">
<div style="width: 49%;">
<h2>专家列表</h2>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
ref="table"
:row-class-name="rowClassName"
stripe
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="expertId"
label="ID"
width="100">
</el-table-column>
<el-table-column
prop="expertName"
label="专家姓名"
width="100">
</el-table-column>
<el-table-column
prop="expertRankName"
label="专家职称"
width="130">
</el-table-column>
<el-table-column
prop="expertUnit"
label="专家单位">
</el-table-column>
<el-table-column
prop="expertCardNum"
label="银行卡号">
</el-table-column>
<el-table-column
prop="expertBankName"
label="开户行">
</el-table-column>
<el-table-column
prop="expertIdCard"
label="身份证">
</el-table-column>
<el-table-column
prop="expertStandard"
label="开支标准">
</el-table-column>
</el-table>
</el-table>
</div>
<div style="width: 49%;">
<h2>待导出列表</h2>
<el-table
:data="exportList"
ref="exportTable"
stripe
style="width: 100%">
<el-table-column
prop="expertId"
label="ID"
width="100">
</el-table-column>
<el-table-column
prop="expertName"
label="专家姓名"
width="100">
</el-table-column>
<el-table-column
prop="expertRankName"
label="专家职称"
width="130">
</el-table-column>
<el-table-column
prop="expertUnit"
label="专家单位">
</el-table-column>
<el-table-column
prop="expertCardNum"
label="银行卡号">
</el-table-column>
<el-table-column
prop="expertBankName"
label="开户行">
</el-table-column>
<el-table-column
prop="expertIdCard"
label="身份证">
</el-table-column>
<el-table-column
prop="expertStandard"
label="开支标准">
</el-table-column>
</el-table>
</div>
</div>
<el-dialog
@ -127,6 +182,13 @@ export default {
},
methods:{
//
clearList(){
this.exportList = []
//
this.$refs.table.clearSelection();
},
//
downloadImportTemplate(){
@ -195,7 +257,15 @@ export default {
// })
}
this.exportList = val
val.forEach(item => {
// exportList
if (!this.exportList.find(i => i.expertId === item.expertId)) {
this.exportList.push(item);
}
});
// this.exportList = val
},