feat(contract-select): 为合同选择组件添加分页功能并优化搜索逻辑
1. 移除了vis-network依赖包 2. 重构两个合同选择页面的搜索与列表逻辑,移除本地合并合同数据的操作,改为直接使用接口返回数据 3. 为所有合同tab添加分页组件,支持分页查询、搜索重置页码 4. 调整表格高度优化布局,更新搜索触发事件为失焦、回车和清空按钮 5. 新增搜索查询按钮,优化搜索交互体验
This commit is contained in:
@@ -55,13 +55,14 @@
|
||||
<!-- 所有合同tab -->
|
||||
<el-tab-pane label="所有合同" name="all">
|
||||
<div style="margin-bottom: 16px;">
|
||||
<el-input v-model="searchKeyword" placeholder="搜索合同" @input="handleSearch" clearable
|
||||
<el-input v-model="searchKeyword" placeholder="搜索合同" @blur="handleSearch"
|
||||
@keyup.enter.native="handleSearch" @clear="handleSearch" clearable
|
||||
size="small">
|
||||
<el-button slot="append" icon="el-icon-search" size="small"></el-button>
|
||||
<el-button slot="append" icon="el-icon-search" @click="handleSearch" size="small"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<el-table :data="allContracts" style="width: 100%" size="mini" height="600">
|
||||
<el-table :data="allContracts" style="width: 100%" size="mini" height="520">
|
||||
<el-table-column prop="contractCode" label="合同编号" width="160" />
|
||||
<el-table-column prop="contractName" label="合同名称" width="180" />
|
||||
<el-table-column prop="customer" label="客户" width="140" />
|
||||
@@ -93,6 +94,10 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination v-if="allTotal > 0" background layout="total, prev, pager, next, jumper"
|
||||
:total="allTotal" :page-size="allPageSize" :current-page.sync="allPageNum"
|
||||
@current-change="handleAllPageChange" style="margin-top: 12px; text-align: right;" />
|
||||
|
||||
<div v-if="allContracts.length === 0" style="text-align: center; padding: 20px;">
|
||||
暂无合同数据
|
||||
</div>
|
||||
@@ -125,6 +130,9 @@ export default {
|
||||
searchKeyword: '',
|
||||
allContracts: [],
|
||||
activeTab: 'configured', // 默认显示已配置合同tab
|
||||
allPageNum: 1,
|
||||
allPageSize: 20,
|
||||
allTotal: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -227,15 +235,12 @@ export default {
|
||||
async loadAllContracts() {
|
||||
try {
|
||||
const res = await listOrder({
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
pageNum: this.allPageNum,
|
||||
pageSize: this.allPageSize,
|
||||
keyword: this.searchKeyword || undefined,
|
||||
});
|
||||
// 合并现有合同(包括手动添加的)
|
||||
const existingContracts = this.contractList;
|
||||
this.allContracts = [...res.rows || [], ...existingContracts].filter((item, index, self) =>
|
||||
index === self.findIndex(t => t.orderId === item.orderId)
|
||||
);
|
||||
this.allTotal = res.total || 0;
|
||||
this.allContracts = res.rows || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load all contracts:', error);
|
||||
this.allContracts = [];
|
||||
@@ -244,6 +249,12 @@ export default {
|
||||
|
||||
// 搜索合同
|
||||
handleSearch() {
|
||||
this.allPageNum = 1;
|
||||
this.loadAllContracts();
|
||||
},
|
||||
|
||||
handleAllPageChange(page) {
|
||||
this.allPageNum = page;
|
||||
this.loadAllContracts();
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user