朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 354e01ba126e590e9df8c3f92ef218bbd7e8cfa2 1 个父辈 b7a347f3

新添加ES信息界面，基本完善

内嵌 并排对比
正在显示 1 个修改的文件 包含 187 行增加 和 65 行删除
@@ -97,23 +97,24 @@ @@ -97,23 +97,24 @@
97 <!-- 添加，对话框 --> 97 <!-- 添加，对话框 -->
98 <div> 98 <div>
99 <el-dialog title="添加ES节点" 99 <el-dialog title="添加ES节点"
100 - :visible.sync="es_dialog.addDialog" element-loading-text="拼命添加配置中" 100 + v-loading="es_loading.addLoading" element-loading-text="正在拼命加载，请稍等"
  101 + :visible.sync="es_dialog.addDialog"
101 style="margin-top: -50px" text-align="center" width="50%" 102 style="margin-top: -50px" text-align="center" width="50%"
102 @close="es_addDialogClosed"> 103 @close="es_addDialogClosed">
103 <el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center" 104 <el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center"
104 :model="es_addForm" :rules="es_addFormRules" ref="es_addFormRef"> 105 :model="es_addForm" :rules="es_addFormRules" ref="es_addFormRef">
105 - <el-form-item label="集群名称：" prop="clusterName">  
106 - <el-input v-model="es_addForm.clusterName" style="width:280px" size="small" clearable  
107 - placeholder="请输入集群名称">  
108 - </el-input>  
109 - </el-form-item>  
110 - <el-form-item label="节点名称：" prop="elasticsearchName">  
111 - <el-input v-model="es_addForm.elasticsearchName" style="width:280px" size="small" clearable  
112 - placeholder="请输入ES（节点）名称">  
113 - </el-input>  
114 - </el-form-item> 106 + <!-- <el-form-item label="集群名称：" prop="clusterName">-->
  107 + <!-- <el-input v-model="es_addForm.clusterName" style="width:280px" size="small" clearable-->
  108 + <!-- placeholder="请输入集群名称">-->
  109 + <!-- </el-input>-->
  110 + <!-- </el-form-item>-->
  111 + <!-- <el-form-item label="节点名称：" prop="elasticsearchName">-->
  112 + <!-- <el-input v-model="es_addForm.elasticsearchName" style="width:280px" size="small" clearable-->
  113 + <!-- placeholder="请输入ES（节点）名称">-->
  114 + <!-- </el-input>-->
  115 + <!-- </el-form-item>-->
115 <el-form-item label="协议：" prop="scheme"> 116 <el-form-item label="协议：" prop="scheme">
116 - <el-input v-model="es_addForm.scheme" style="width:280px" size="small" clearable readonly 117 + <el-input v-model="es_addForm.scheme" style="width:280px" size="small" clearable
117 placeholder="请输入协议名称：http"> 118 placeholder="请输入协议名称：http">
118 </el-input> 119 </el-input>
119 </el-form-item> 120 </el-form-item>
@@ -148,7 +149,7 @@ @@ -148,7 +149,7 @@
148 <el-button type="info" @click="es_dialog.addDialog = false" size="medium" style="width: 100px"> 149 <el-button type="info" @click="es_dialog.addDialog = false" size="medium" style="width: 100px">
149 取消 150 取消
150 </el-button> 151 </el-button>
151 - <el-button type="success" @click="es_add_test" size="medium" style="width: 100px"> 152 + <el-button type="success" @click="es_add_test" :loading="es_loading.addLoading" size="medium" style="width: 100px">
152 测试连接 153 测试连接
153 </el-button> 154 </el-button>
154 <el-button type="primary" @click="es_add" :loading="es_loading.addLoading" size="medium" style="width: 100px"> 155 <el-button type="primary" @click="es_add" :loading="es_loading.addLoading" size="medium" style="width: 100px">
@@ -160,7 +161,8 @@ @@ -160,7 +161,8 @@
160 <!-- 编辑，对话框 --> 161 <!-- 编辑，对话框 -->
161 <div> 162 <div>
162 <el-dialog title="编辑ES信息" 163 <el-dialog title="编辑ES信息"
163 - :visible.sync="es_dialog.editDialog" element-loading-text="拼命添加配置中" 164 + :visible.sync="es_dialog.editDialog"
  165 + v-loading="es_loading.editLoading" element-loading-text="正在拼命加载，请稍等"
164 style="margin-top: -50px" text-align="center" width="50%" 166 style="margin-top: -50px" text-align="center" width="50%"
165 @close="es_editDialogClosed"> 167 @close="es_editDialogClosed">
166 <el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center" 168 <el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center"
@@ -211,6 +213,9 @@ @@ -211,6 +213,9 @@
211 <el-button type="info" @click="es_dialog.editDialog = false" size="medium" style="width: 100px"> 213 <el-button type="info" @click="es_dialog.editDialog = false" size="medium" style="width: 100px">
212 取消 214 取消
213 </el-button> 215 </el-button>
  216 + <el-button type="success" @click="es_edit_test" :loading="es_loading.editLoading" size="medium" style="width: 100px">
  217 + 测试连接
  218 + </el-button>
214 <el-button type="primary" @click="es_edit" :loading="es_loading.editLoading" size="medium" style="width: 100px"> 219 <el-button type="primary" @click="es_edit" :loading="es_loading.editLoading" size="medium" style="width: 100px">
215 编辑 220 编辑
216 </el-button> 221 </el-button>
@@ -396,6 +401,7 @@ @@ -396,6 +401,7 @@
396 this.es_page.esList = res.data.list; 401 this.es_page.esList = res.data.list;
397 this.es_page.total = res.data.total; 402 this.es_page.total = res.data.total;
398 this.es_loading.listLoading = false; 403 this.es_loading.listLoading = false;
  404 + this.es_viewStatus();
399 }).catch(error => { 405 }).catch(error => {
400 this.es_loading.listLoading = false; 406 this.es_loading.listLoading = false;
401 this.$message.error(error.toString()); 407 this.$message.error(error.toString());
@@ -457,6 +463,7 @@ @@ -457,6 +463,7 @@
457 es_add_test() { 463 es_add_test() {
458 this.$refs.es_addFormRef.validate(valid => { 464 this.$refs.es_addFormRef.validate(valid => {
459 if (!valid) return; 465 if (!valid) return;
  466 +
460 let scheme = this.es_addForm.scheme; 467 let scheme = this.es_addForm.scheme;
461 let hostname = this.es_addForm.hostname; 468 let hostname = this.es_addForm.hostname;
462 let port = this.es_addForm.port; 469 let port = this.es_addForm.port;
@@ -468,9 +475,27 @@ @@ -468,9 +475,27 @@
468 type: 'warning' 475 type: 'warning'
469 } 476 }
470 ).then(() => { 477 ).then(() => {
471 - window.open(url, '_blank') 478 + this.es_loading.addLoading = true;
  479 + fetch(url, {
  480 + method: 'get',
  481 + timeout: 2000,
  482 + headers: {
  483 + 'Content-type': 'application/json;charset=UTF-8',
  484 + }
  485 + }).then((response) => {
  486 + if (response.status === 200) {
  487 + this.es_loading.addLoading = false;
  488 + this.$message.success("测试ES连接：通过！！！");
  489 + window.open(url, '_blank')
  490 + } else {
  491 + this.$message.error("测试ES连接：失败！请仔细检查ES信息");
  492 + this.es_loading.addLoading = false;
  493 + }
  494 + }).catch(error => {
  495 + this.$message.error("测试ES连接：失败！请仔细检查ES信息");
  496 + this.es_loading.addLoading = false;
  497 + });
472 }); 498 });
473 -  
474 }); 499 });
475 }, 500 },
476 /** 501 /**
@@ -486,48 +511,43 @@ @@ -486,48 +511,43 @@
486 let port = this.es_addForm.port; 511 let port = this.es_addForm.port;
487 let url = scheme + "://" + hostname + ":" + port; 512 let url = scheme + "://" + hostname + ":" + port;
488 513
489 - // 'Access-Control-Allow-Headers': 'content-type,token,id',  
490 - // 'Access-Control-Request-Headers': 'Origin, X-Requested-With, content-Type, Accept, Authorization',  
491 - // 'Content-type': 'application/json;charset=UTF-8',  
492 - // this.$axios.get(url, {  
493 - // headers: {  
494 - // 'Access-Control-Allow-Origin': '*'  
495 - // }  
496 - // }).then(  
497 - // (response) => {  
498 - // console.log(response);  
499 - // }  
500 - // ).catch(error => {  
501 - // this.$message.error(error.toString());  
502 - // this.es_loading.addLoading = false;  
503 - // }  
504 - // );  
505 -  
506 -  
507 - http.get(url).then((response) => {  
508 - console.log(response); 514 + fetch(url, {
  515 + method: 'get',
  516 + headers: {
  517 + 'Content-type': 'application/json;charset=UTF-8',
  518 + }
  519 + }).then((response) => {
  520 + return response.json();
  521 + }).then((data) => {
  522 + this.es_addForm.clusterName = data.cluster_name;
  523 + this.es_addForm.elasticsearchName = data.name;
  524 + this.addESInfo();
  525 + this.es_loading.addLoading = false;
509 }).catch(error => { 526 }).catch(error => {
510 - this.$message.error(error.toString()); 527 + this.$message.error("请您务必先测试ES连接！！！");
511 this.es_loading.addLoading = false; 528 this.es_loading.addLoading = false;
512 }); 529 });
513 -  
514 -  
515 - // insertElasticSearchInfo(this.es_addForm).then((response) => {  
516 - // let res = response.data;  
517 - // if (res.code !== '200') {  
518 - // this.es_loading.addLoading = false;  
519 - // return this.$message.error(res.msg);  
520 - // }  
521 - // this.es_loading.addLoading = false;  
522 - // this.es_dialog.addDialog = false;  
523 - // this.es_getList();  
524 - // }).catch(error => {  
525 - // this.es_loading.addLoading = false;  
526 - // this.$message.error(error.toString());  
527 - // });  
528 } 530 }
529 ) 531 )
530 }, 532 },
  533 + /**
  534 + * 增加ES信息至后台
  535 + */
  536 + addESInfo() {
  537 + insertElasticSearchInfo(this.es_addForm).then((response) => {
  538 + let res = response.data;
  539 + if (res.code !== '200') {
  540 + this.es_loading.addLoading = false;
  541 + return this.$message.error(res.msg);
  542 + }
  543 + this.es_loading.addLoading = false;
  544 + this.es_dialog.addDialog = false;
  545 + this.es_getList();
  546 + }).catch(error => {
  547 + this.es_loading.addLoading = false;
  548 + this.$message.error(error.toString());
  549 + });
  550 + },
531 551
532 /** 552 /**
533 * 删除 553 * 删除
@@ -575,33 +595,135 @@ @@ -575,33 +595,135 @@
575 this.$refs.es_editFormRef.resetFields(); 595 this.$refs.es_editFormRef.resetFields();
576 }, 596 },
577 597
  598 + /**
  599 + * 编辑事件之测试连接
  600 + */
  601 + es_edit_test() {
  602 + this.$refs.es_editFormRef.validate(valid => {
  603 + if (!valid) return;
  604 + let scheme = this.es_editForm.scheme;
  605 + let hostname = this.es_editForm.hostname;
  606 + let port = this.es_editForm.port;
  607 + let url = scheme + "://" + hostname + ":" + port;
  608 +
  609 + this.$confirm('测试ES信息，是否可用?', '警告', {
  610 + confirmButtonText: '继续',
  611 + cancelButtonText: '取消',
  612 + type: 'warning'
  613 + }
  614 + ).then(() => {
  615 + this.es_loading.editLoading = true;
  616 + fetch(url, {
  617 + method: 'get',
  618 + timeout: 2000,
  619 + headers: {
  620 + 'Content-type': 'application/json;charset=UTF-8',
  621 + }
  622 + }).then((response) => {
  623 + if (response.status === 200) {
  624 + this.es_loading.editLoading = false;
  625 + this.$message.success("测试ES连接：通过！！！");
  626 + // window.open(url, '_blank')
  627 + } else {
  628 + this.es_loading.editLoading = false;
  629 + this.$message.error("测试ES连接：失败！请仔细检查ES信息");
  630 + }
  631 + }).catch(error => {
  632 + this.es_loading.editLoading = false;
  633 + this.$message.error("测试ES连接：失败！请仔细检查ES信息");
  634 + });
  635 + });
  636 + });
  637 + },
  638 + /**
  639 + * ES信息，编辑事件
  640 + */
578 es_edit() { 641 es_edit() {
579 this.$refs.es_editFormRef.validate(valid => { 642 this.$refs.es_editFormRef.validate(valid => {
580 if (!valid) return; 643 if (!valid) return;
581 this.es_loading.editLoading = true; 644 this.es_loading.editLoading = true;
582 - updateElasticSearchInfo(this.es_editForm).then((response) => {  
583 - let res = response.data;  
584 - if (res.code !== '200') { 645 +
  646 + let scheme = this.es_editForm.scheme;
  647 + let hostname = this.es_editForm.hostname;
  648 + let port = this.es_editForm.port;
  649 + let url = scheme + "://" + hostname + ":" + port;
  650 +
  651 + fetch(url, {
  652 + method: 'get',
  653 + timeout: 2000,
  654 + headers: {
  655 + 'Content-type': 'application/json;charset=UTF-8',
  656 + }
  657 + }).then((response) => {
  658 + if (response.status === 200) {
  659 + this.editESInfo();
585 this.es_loading.editLoading = false; 660 this.es_loading.editLoading = false;
586 - return this.$message.error(res.msg); 661 + } else {
  662 + this.es_loading.editLoading = false;
  663 + this.$message.error("请仔细检查ES信息,请务必进行ES连接测试！");
587 } 664 }
588 - this.es_loading.editLoading = false;  
589 - this.$message.success(res.msg);  
590 - this.es_dialog.editDialog = false;  
591 - this.es_getList();  
592 }).catch(error => { 665 }).catch(error => {
593 this.es_loading.editLoading = false; 666 this.es_loading.editLoading = false;
594 - this.$message.error(error.toString()); 667 + this.$message.error("请仔细检查ES信息,请务必进行ES连接测试！");
595 }); 668 });
596 - })  
597 - } 669 + });
  670 + },
  671 + /**
  672 + * 编辑ES信息至后台
  673 + */
  674 + editESInfo() {
  675 + updateElasticSearchInfo(this.es_editForm).then((response) => {
  676 + let res = response.data;
  677 + if (res.code !== '200') {
  678 + this.es_loading.editLoading = false;
  679 + return this.$message.error(res.msg);
  680 + }
  681 + this.$message.success(res.msg);
  682 + this.es_dialog.editDialog = false;
  683 + this.es_getList();
  684 + }).catch(error => {
  685 + this.es_loading.editLoading = false;
  686 + this.$message.error(error.toString());
  687 + });
  688 + },
  689 + /**
  690 + * 监控es信息的状态
  691 + */
  692 + es_viewStatus() {
  693 + if (this.es_page.esList !== null) {
  694 + this.es_page.esList.forEach((item) => {
  695 + let scheme = item.scheme;
  696 + let hostname = item.hostname;
  697 + let port = item.port;
  698 + let url = scheme + "://" + hostname + ":" + port;
  699 + fetch(url, {
  700 + method: 'get',
  701 + timeout: 3000,
  702 + headers: {
  703 + 'Content-type': 'application/json;charset=UTF-8',
  704 + }
  705 + }).then((response) => {
  706 + if (response.status === 200) {
  707 + item.elasticsearchState = true;
  708 + } else {
  709 + item.elasticsearchState = false;
  710 + }
  711 + }).catch(error => {
  712 + item.elasticsearchState = false;
  713 + });
  714 + })
  715 + }
  716 + },
598 }, 717 },
599 created() { 718 created() {
600 719
601 }, 720 },
602 mounted() { 721 mounted() {
603 -  
604 - } 722 + this.timer = setInterval(this.es_viewStatus, 5000);
  723 + },
  724 + beforeDestroy() {
  725 + clearInterval(this.timer);
  726 + },
605 } 727 }
606 </script> 728 </script>
607 729