朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 2742040c9cae683a5af6a008a99a5d78e1ecb728 1 个父辈 d1dc40e5

批量添加路由

内嵌 并排对比
正在显示 1 个修改的文件 包含 164 行增加 和 126 行删除
@@ -5,10 +5,12 @@ @@ -5,10 +5,12 @@
5 <!-- 搜素区域 --> 5 <!-- 搜素区域 -->
6 <el-row> 6 <el-row>
7 <el-col :span="24" align="left"> 7 <el-col :span="24" align="left">
8 - <el-button type="warning" size="medium" icon="el-icon-search" @click="loadRouter" :loading="loadingStatus"> 8 + <el-button type="warning" size="medium" icon="el-icon-search" @click="loadRouter"
  9 + :loading="loadingStatus">
9 加载已配置消息 10 加载已配置消息
10 </el-button> 11 </el-button>
11 - <el-button type="primary" size="medium" icon="el-icon-plus" @click="batchAddRouter" :loading="loadingStatus"> 12 + <el-button type="primary" size="medium" icon="el-icon-plus" @click="batchAddRouter"
  13 + :loading="loadingStatus">
12 生成路由 14 生成路由
13 </el-button> 15 </el-button>
14 </el-col> 16 </el-col>
@@ -16,98 +18,102 @@ @@ -16,98 +18,102 @@
16 <el-divider></el-divider> 18 <el-divider></el-divider>
17 <el-row> 19 <el-row>
18 <div style="border: 6px solid #6F8294;"> 20 <div style="border: 6px solid #6F8294;">
19 - <el-row style="margin: -2px">  
20 - <el-col :span="6">  
21 - <el-row class="bt">  
22 - <span>选择消息发送者</span>  
23 - </el-row>  
24 - <el-row>  
25 - <el-tree  
26 - :data="sndr"  
27 - show-checkbox  
28 - node-key="username"  
29 - :props="userProps"  
30 - ref="sndrTree"  
31 - @check-change="treeSndrCheckChange" 21 + <el-row style="margin: -2px">
  22 + <el-col :span="6">
  23 + <el-row class="bt">
  24 + <span>选择消息发送者</span>
  25 + </el-row>
  26 + <el-row>
  27 + <el-tree
  28 + :data="sndr"
  29 + show-checkbox
  30 + node-key="username"
  31 + :props="userProps"
  32 + ref="sndrTree"
  33 + @check-change="treeSndrCheckChange"
32 34
33 - >  
34 - </el-tree>  
35 - </el-row>  
36 - </el-col>  
37 - <el-col :span="6" align="center">  
38 - <el-row class="bt">  
39 - <span>选择要发送的消息类型</span>  
40 - </el-row>  
41 - <el-row>  
42 - <el-tree  
43 - :data="message_type"  
44 - show-checkbox  
45 - node-key="name"  
46 - default-expand-all  
47 - check-strictly  
48 - :props="defaultProps"  
49 - highlight-current  
50 - ref="typeTree"  
51 - @check-change="treeTypeCheckChange"  
52 - >  
53 - </el-tree>  
54 - </el-row>  
55 - </el-col>  
56 - <el-col :span="6">  
57 - <el-row class="bt">  
58 - <span>选择消息接收者</span>  
59 - </el-row>  
60 - <el-row>  
61 - <el-tree  
62 - :data="rcvr"  
63 - show-checkbox  
64 - node-key="id"  
65 - :props="userProps"  
66 - ref="rcvrTree"  
67 - @check-change="treeRcvrCheckChange"  
68 - >  
69 - </el-tree>  
70 - </el-row>  
71 - </el-col>  
72 - <el-col :span="6">  
73 - <el-row class="bt">  
74 - <span>消息路由配置其他属性</span>  
75 - </el-row>  
76 - <el-row>  
77 - <el-form :inline="true" :model="params" class="demo-form-inline" align="center" style="border:3px solid #6F8294;height: 800px;padding-top: 15px">  
78 - <el-form-item label="路由状态：">  
79 - <el-select v-model="params.status" placeholder="请选择" style="width: 150px" size="mini">  
80 - <el-option  
81 - v-for="item in status_options"  
82 - :key="item.value"  
83 - :label="item.label"  
84 - :value="item.value">  
85 - <span style="float: left">{{ item.label }}</span>  
86 - <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>  
87 - </el-option>  
88 - </el-select>  
89 - </el-form-item>  
90 - <el-form-item label="路由用途：">  
91 - <el-select v-model="params.usage" placeholder="请选择" style="width: 150px" size="mini">  
92 - <el-option  
93 - v-for="item in usage_options"  
94 - :key="item.value"  
95 - :label="item.label"  
96 - :value="item.value">  
97 - <span style="float: left">{{ item.label }}</span>  
98 - <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>  
99 - </el-option>  
100 - </el-select>  
101 - </el-form-item>  
102 - <el-form-item label="路由描述：">  
103 - <el-input type="textarea" v-model="params.des" style="width: 150px" size="mini"></el-input>  
104 - </el-form-item>  
105 - </el-form> 35 + >
  36 + </el-tree>
  37 + </el-row>
  38 + </el-col>
  39 + <el-col :span="6" align="center">
  40 + <el-row class="bt">
  41 + <span>选择要发送的消息类型</span>
  42 + </el-row>
  43 + <el-row>
  44 + <el-tree
  45 + :data="message_type"
  46 + show-checkbox
  47 + node-key="name"
  48 + default-expand-all
  49 + check-strictly
  50 + :props="defaultProps"
  51 + highlight-current
  52 + ref="typeTree"
  53 + @check-change="treeTypeCheckChange"
  54 + >
  55 + </el-tree>
  56 + </el-row>
  57 + </el-col>
  58 + <el-col :span="6">
  59 + <el-row class="bt">
  60 + <span>选择消息接收者</span>
  61 + </el-row>
  62 + <el-row>
  63 + <el-tree
  64 + :data="rcvr"
  65 + show-checkbox
  66 + node-key="id"
  67 + :props="queueProps"
  68 + ref="rcvrTree"
  69 + @check-change="treeRcvrCheckChange"
  70 + >
  71 + </el-tree>
  72 + </el-row>
  73 + </el-col>
  74 + <el-col :span="6">
  75 + <el-row class="bt">
  76 + <span>消息路由配置其他属性</span>
  77 + </el-row>
  78 + <el-row>
  79 + <el-form :inline="true" :model="params" class="demo-form-inline" align="center"
  80 + style="border:3px solid #6F8294;height: 800px;padding-top: 15px">
  81 + <el-form-item label="路由状态：">
  82 + <el-select v-model="params.status" placeholder="请选择" style="width: 150px"
  83 + size="mini">
  84 + <el-option
  85 + v-for="item in status_options"
  86 + :key="item.value"
  87 + :label="item.label"
  88 + :value="item.value">
  89 + <span style="float: left">{{ item.label }}</span>
  90 + <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
  91 + </el-option>
  92 + </el-select>
  93 + </el-form-item>
  94 + <el-form-item label="路由用途：">
  95 + <el-select v-model="params.usage" placeholder="请选择" style="width: 150px"
  96 + size="mini">
  97 + <el-option
  98 + v-for="item in usage_options"
  99 + :key="item.value"
  100 + :label="item.label"
  101 + :value="item.value">
  102 + <span style="float: left">{{ item.label }}</span>
  103 + <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
  104 + </el-option>
  105 + </el-select>
  106 + </el-form-item>
  107 + <el-form-item label="路由描述：">
  108 + <el-input type="textarea" v-model="params.des" style="width: 150px"
  109 + size="mini"></el-input>
  110 + </el-form-item>
  111 + </el-form>
  112 + </el-row>
  113 + </el-col>
106 </el-row> 114 </el-row>
107 - </el-col>  
108 - </el-row>  
109 115
110 - </div> 116 + </div>
111 </el-row> 117 </el-row>
112 </el-card> 118 </el-card>
113 </el-main> 119 </el-main>
@@ -115,7 +121,8 @@ @@ -115,7 +121,8 @@
115 </template> 121 </template>
116 122
117 <script> 123 <script>
118 - import { getAlltype,api_batchAddRouter,loadRouterBySndr } from "../../api/message_bus"; 124 + import {getAlltype, api_batchAddRouter, loadRouterBySndr, selectBusQueueList} from "../../api/message_bus";
  125 +
119 export default { 126 export default {
120 name: "Configure", 127 name: "Configure",
121 128
@@ -125,7 +132,7 @@ @@ -125,7 +132,7 @@
125 sndr: [], 132 sndr: [],
126 rcvr: [], 133 rcvr: [],
127 api_back: [], 134 api_back: [],
128 - params:{ 135 + params: {
129 sndr: '', 136 sndr: '',
130 sndrs: [], 137 sndrs: [],
131 types: [], 138 types: [],
@@ -135,38 +142,44 @@ @@ -135,38 +142,44 @@
135 des: "", 142 des: "",
136 ver: "1.0" 143 ver: "1.0"
137 }, 144 },
138 - status_options:[ 145 + status_options: [
139 { 146 {
140 label: "启用", 147 label: "启用",
141 value: 1 148 value: 1
142 }, 149 },
143 { 150 {
144 - label:"关闭", 151 + label: "关闭",
145 value: 0 152 value: 0
146 } 153 }
147 ], 154 ],
148 - usage_options:[ 155 + usage_options: [
149 { 156 {
150 label: "生产用", 157 label: "生产用",
151 value: 1 158 value: 1
152 }, 159 },
153 { 160 {
154 - label:"测试用", 161 + label: "测试用",
155 value: 2 162 value: 2
156 } 163 }
157 ], 164 ],
158 message_type: [], 165 message_type: [],
159 defaultProps: { 166 defaultProps: {
160 children: 'children', 167 children: 'children',
161 - label: function (data,node) {  
162 - return '[' + data.name+ ']' + data.des; 168 + label: function (data, node) {
  169 + return '[' + data.name + ']' + data.des;
163 }, 170 },
164 disabled: 'disabled' 171 disabled: 'disabled'
165 }, 172 },
166 userProps: { 173 userProps: {
167 children: 'children', 174 children: 'children',
168 label: function (data, node) { 175 label: function (data, node) {
169 - return '('+data.username + ')' + data.des; 176 + return '(' + data.username + ')' + data.des;
  177 + }
  178 + },
  179 + queueProps:{
  180 + children: 'children',
  181 + label: function (data, node) {
  182 + return '(' + data.queueName + ')' + data.description;
170 } 183 }
171 } 184 }
172 } 185 }
@@ -174,12 +187,12 @@ @@ -174,12 +187,12 @@
174 methods: { 187 methods: {
175 typeFilterNode(treeList) { 188 typeFilterNode(treeList) {
176 let _this = this; 189 let _this = this;
177 - if (Array.isArray(treeList)){  
178 - treeList.forEach(function(item,index){  
179 - if (item.type == 1 || item.type==2){ 190 + if (Array.isArray(treeList)) {
  191 + treeList.forEach(function (item, index) {
  192 + if (item.type == 1 || item.type == 2) {
180 item.disabled = true; 193 item.disabled = true;
181 } 194 }
182 - if (item.children !== undefined){ 195 + if (item.children !== undefined) {
183 _this.typeFilterNode(item.children); 196 _this.typeFilterNode(item.children);
184 } 197 }
185 }) 198 })
@@ -187,7 +200,7 @@ @@ -187,7 +200,7 @@
187 200
188 }, 201 },
189 getAllType() { 202 getAllType() {
190 - let _this =this; 203 + let _this = this;
191 _this.loadingStatus = true; 204 _this.loadingStatus = true;
192 getAlltype().then((response) => { 205 getAlltype().then((response) => {
193 let res = response.data; 206 let res = response.data;
@@ -210,7 +223,7 @@ @@ -210,7 +223,7 @@
210 /** 223 /**
211 * 访问用户服务,绑定用户列表，按组搜索 224 * 访问用户服务,绑定用户列表，按组搜索
212 */ 225 */
213 - getUserInfo(){ 226 + getUserInfo() {
214 let userResponse = [{ 227 let userResponse = [{
215 id: 1, 228 id: 1,
216 username: "zp260", 229 username: "zp260",
@@ -220,14 +233,13 @@ @@ -220,14 +233,13 @@
220 username: "test04", 233 username: "test04",
221 des: "测试用户2" 234 des: "测试用户2"
222 }, 235 },
223 - {  
224 - id: 3,  
225 - username: "zp2505",  
226 - des: "测试用户3"  
227 - } 236 + {
  237 + id: 3,
  238 + username: "zp2505",
  239 + des: "测试用户3"
  240 + }
228 ]; 241 ];
229 this.sndr = userResponse; 242 this.sndr = userResponse;
230 - this.rcvr = userResponse;  
231 }, 243 },
232 treeSndrCheckChange(data, checked, indeterminate) { 244 treeSndrCheckChange(data, checked, indeterminate) {
233 if (checked) { 245 if (checked) {
@@ -238,15 +250,15 @@ @@ -238,15 +250,15 @@
238 }, 250 },
239 treeRcvrCheckChange(data, checked, indeterminate) { 251 treeRcvrCheckChange(data, checked, indeterminate) {
240 if (checked) { 252 if (checked) {
241 - this.params.rcvrs.push(data.username); 253 + this.params.rcvrs.push(data.queueName);
242 } else { 254 } else {
243 - this.params.rcvrs.splice(this.params.rcvrs.contains(data.username), 1); 255 + this.params.rcvrs.splice(this.params.rcvrs.contains(data.queueName), 1);
244 } 256 }
245 }, 257 },
246 treeTypeCheckChange(data, checked, indeterminate) { 258 treeTypeCheckChange(data, checked, indeterminate) {
247 let mt = { 259 let mt = {
248 - name:'',  
249 - type:0 260 + name: '',
  261 + type: 0
250 }; 262 };
251 mt.name = data.name; 263 mt.name = data.name;
252 mt.type = data.type; 264 mt.type = data.type;
@@ -257,10 +269,10 @@ @@ -257,10 +269,10 @@
257 } 269 }
258 console.log(this.params.types); 270 console.log(this.params.types);
259 }, 271 },
260 - loadRouter(){ 272 + loadRouter() {
261 let _this = this; 273 let _this = this;
262 this.loadingStatus = true; 274 this.loadingStatus = true;
263 - if(this.params.sndrs.length !== 1){ 275 + if (this.params.sndrs.length !== 1) {
264 this.$confirm('请选择单个发送者', '错误', { 276 this.$confirm('请选择单个发送者', '错误', {
265 confirmButtonText: '确定', 277 confirmButtonText: '确定',
266 type: 'error', 278 type: 'error',
@@ -268,9 +280,9 @@ @@ -268,9 +280,9 @@
268 }).then(() => { 280 }).then(() => {
269 _this.loadingStatus = false; 281 _this.loadingStatus = false;
270 }).catch(() => { 282 }).catch(() => {
271 - 283 + _this.loadingStatus = false;
272 }); 284 });
273 - }else{ 285 + } else {
274 let pam = { 286 let pam = {
275 sndr: _this.params.sndrs[0] 287 sndr: _this.params.sndrs[0]
276 }; 288 };
@@ -293,21 +305,22 @@ @@ -293,21 +305,22 @@
293 ) 305 )
294 } 306 }
295 }, 307 },
296 - loadRouterHandle(){  
297 - if (Array.isArray(this.api_back) && this.api_back.length>0){ 308 + loadRouterHandle() {
  309 + if (Array.isArray(this.api_back) && this.api_back.length > 0) {
298 let typeList = []; 310 let typeList = [];
299 - this.api_back.forEach(function(routerItem,index){  
300 - typeList.push({name:routerItem.stype}); 311 + this.api_back.forEach(function (routerItem, index) {
  312 + typeList.push({name: routerItem.stype});
301 }); 313 });
302 this.typeTreeSet(typeList); 314 this.typeTreeSet(typeList);
303 } 315 }
304 }, 316 },
305 - typeTreeSet(typeList){ 317 + typeTreeSet(typeList) {
306 this.$refs.typeTree.setCheckedNodes(typeList); 318 this.$refs.typeTree.setCheckedNodes(typeList);
307 }, 319 },
308 batchAddRouter() { 320 batchAddRouter() {
309 let _this = this; 321 let _this = this;
310 _this.loadingStatus = true; 322 _this.loadingStatus = true;
  323 + //todo: 生产者列表，消费者列表，及路由类型判空后再访问接口
311 api_batchAddRouter(this.params).then(response => { 324 api_batchAddRouter(this.params).then(response => {
312 let res = response.data; 325 let res = response.data;
313 console.log(res) 326 console.log(res)
@@ -331,11 +344,33 @@ @@ -331,11 +344,33 @@
331 this.$refs.sndrTree.setCheckedKeys([]); 344 this.$refs.sndrTree.setCheckedKeys([]);
332 this.$refs.typeTree.setCheckedKeys([]); 345 this.$refs.typeTree.setCheckedKeys([]);
333 this.$refs.rcvrTree.setCheckedKeys([]); 346 this.$refs.rcvrTree.setCheckedKeys([]);
  347 + },
  348 + queue_getList() {
  349 + let queue_queryInfo = {
  350 + // 当前页数
  351 + pageNum: 1,
  352 + // 每页条数
  353 + pageSize: 100000
  354 + };
  355 + selectBusQueueList(queue_queryInfo).then((response) => {
  356 + let res = response.data;
  357 + if (res.code !== '200') {
  358 + // 关闭加载
  359 + return this.$message.error(res.msg);
  360 + }
  361 + // 获取列表数据
  362 + this.rcvr = res.data.list;
  363 + this.$message.success(res.msg);
  364 + }).catch(error => {
  365 + // 关闭加载
  366 + this.$message.error(error.toString());
  367 + });
334 } 368 }
335 }, 369 },
336 mounted() { 370 mounted() {
337 this.getAllType(); 371 this.getAllType();
338 this.getUserInfo(); 372 this.getUserInfo();
  373 + this.queue_getList();
339 } 374 }
340 375
341 } 376 }
@@ -348,14 +383,17 @@ @@ -348,14 +383,17 @@
348 color: #ffffff; 383 color: #ffffff;
349 text-align: center 384 text-align: center
350 } 385 }
  386 +
351 .el-col { 387 .el-col {
352 margin-right: 0px; 388 margin-right: 0px;
353 } 389 }
  390 +
354 .el-tree { 391 .el-tree {
355 padding-top: 15px; 392 padding-top: 15px;
356 - border:3px solid #6F8294; 393 + border: 3px solid #6F8294;
357 height: 800px 394 height: 800px
358 } 395 }
  396 +
359 .el-row .el-col .el-row { 397 .el-row .el-col .el-row {
360 margin-top: 0px; 398 margin-top: 0px;
361 } 399 }