1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
<span>
<c-button type="primary" icon="el-icon-search" class="m-inputbtn-btn" @click="onDialogOpen"></c-button>
<el-dialog title="机构选择(双击以选择机构)" :visible.sync="dialogOpen" append-to-body>
<c-list-search ref="listSearch" @form-reset="handleReset" @form-search="handleSearch" :formCount="formCount">
<template v-slot="slotProps">
<el-form class="m-table-search-form" :model="model" ref="paramsForm" :inline="true" label-position="right"
label-width="100px" size="small">
<el-form-item label="机构号" prop="instCode">
<c-input v-model="model.instCode" style="width:100%" maxlength="16" placeholder="请输入"></c-input>
</el-form-item>
<el-form-item label="机构名称" prop="instName">
<c-input v-model="model.instName" style="width:100%" maxlength="16" placeholder="请输入"></c-input>
</el-form-item>
</el-form>
</template>
</c-list-search>
<c-list-page
ref="cList"
:columnsConfig="columnsConfig"
:params="searchParams"
:pageSize="pageSize"
:multipleSelect="false"
:loadDataFirstRender="false"
:url="url"
:watchCurrentChg="false"
@current-change="handleCurrentChange"
@row-dblclick="handleRowDBClick"
maxHeight="300px"
/>
</el-dialog>
</span>
</template>
<script>
import Api from "~/service/Api";
import Utils from "~/utils"
export default {
data: function () {
return {
dialogOpen:false,
loading:true,
model:{
instCode:'',
instName:''
},
formCount: 2, // 传入搜索项的数量，组件根据数量判断是否可收起
// 映射到 list 中的搜索参数模型，searchParams 改变后会自动重新拉取数据
searchParams: {},
// 列表的配置项
columnsConfig: [
{
prop: "instCode",
label: "机构代码",
width: '100'
},
{
prop: "instName",
label: "机构名称",
width: '100'
},
{
prop: "inClearInstTpName",
label: "国结机构类型",
width: '120'
},
{
prop: "instLvlName",
label: "机构层级",
width: '100'
},
{
prop: "supInstName",
label: "上级机构名称",
width: '120'
},
{
prop: "supBusiInstNo",
label: "上级业务机构",
width: '120'
},
{
prop: "swiftNo",
label: "swift号码",
width: '100'
},
{
prop: "instCnAddr",
label: "机构中文地址",
width: '120'
},
{
prop: 'enableFlagName',
label: '启用标识',
width: '100'
}
],
// 每页展示的数据。默认为20
pageSize: 10,
url:"v1/pm/instManage/queryPage"
}
},
methods: {
onDialogOpen(){
this.dialogOpen = true
},
handleRowDBClick: function (row) {
this.$emit('instselect',row)
this.dialogOpen = false
},
// 重置搜索条件需要更新到 searchParams 上
handleReset: function () {
this.model = {
instCode: '',
instName: ''
}
},
handleCurrentChange: async function(){
this.handleSearch()
},
// 点击搜索需要更新 searchParams 的值，注意不能直接将 params 赋值给 searchParams
handleSearch: async function () {
let requrl = this.url+"?pageIndex="
+this.$refs['cList'].listConfig.current
+"&pageSize="+this.pageSize;
this.$refs['cList'].loading = true;
let rtnmsg = await Api.post(requrl,this.model);
if(rtnmsg.code == 0){
this.$refs['cList'].listConfig.list = rtnmsg.data;
this.$refs['cList'].listConfig.total = rtnmsg.pageInfo.total;
this.$refs['cList'].listConfig.current = rtnmsg.pageInfo.pageIndex;
}else {
this.$notify.error({ title: "错误", message: "服务请求失败！" });
}
this.$refs['cList'].loading = false;
}
}
}
</script>
<style>
.m-table .m-table-operation {
margin-top: 15px;
}
.m-table .m-table-search-operation-simple {
position: absolute;
right: 20px;
top: 20px;
}
</style>