#419 Connection string of Zk cluster info can be updated

vipshop · May 25, 2018 · 8e40596 · 8e40596
1 parent 428b5e1
commit 8e40596
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 13 deletions.
diff --git a/saturn-console-web/src/pages/registry_manage/cluster_info_dialog.vue b/saturn-console-web/src/pages/registry_manage/cluster_info_dialog.vue
@@ -1,14 +1,14 @@
 <template>
-    <el-dialog title="添加集群" width="35%" :visible.sync="isVisible" :before-close="closeDialog" v-loading="loading" element-loading-text="请稍等···">
+    <el-dialog :title="clusterInfoTitle" width="35%" :visible.sync="isVisible" :before-close="closeDialog" v-loading="loading" element-loading-text="请稍等···">
         <el-form :model="clusterInfo" :rules="rules" ref="clusterInfo" label-width="100px">
             <el-form-item label="集群ID" prop="zkClusterKey">
                 <el-col :span="20">
-                    <el-input v-model="clusterInfo.zkClusterKey"></el-input>
+                    <el-input v-model="clusterInfo.zkClusterKey" :disabled="!isEditable"></el-input>
                 </el-col>
             </el-form-item>
             <el-form-item label="集群名称" prop="alias">
                 <el-col :span="20">
-                    <el-input v-model="clusterInfo.alias"></el-input>
+                    <el-input v-model="clusterInfo.alias" :disabled="!isEditable"></el-input>
                 </el-col>
             </el-form-item>
             <el-form-item label="连接串" prop="connectString">
@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  props: ['clusterInfo'],
+  props: ['clusterInfo', 'clusterInfoTitle', 'clusterInfoOperate'],
   data() {
     return {
       isVisible: true,
@@ -50,18 +50,34 @@ export default {
       });
     },
     clusterInfoRequest(url) {
-      this.$http.post(url, this.clusterInfo).then(() => {
+      if (this.clusterInfoOperate === 'add') {
         this.loading = true;
-        setTimeout(() => {
-          this.loading = false;
-          this.$emit('cluster-info-success');
-        }, 3000);
-      })
-      .catch(() => { this.$http.buildErrorHandler(`${url}请求失败！`); });
+        this.$http.post(url, this.clusterInfo).then(() => {
+          setTimeout(() => {
+            this.loading = false;
+            this.$emit('cluster-info-success');
+          }, 3000);
+        })
+        .catch(() => { this.$http.buildErrorHandler(`${url}请求失败！`); });
+      } else {
+        this.loading = true;
+        this.$http.put(url, this.clusterInfo).then(() => {
+          setTimeout(() => {
+            this.loading = false;
+            this.$emit('cluster-info-success');
+          }, 3000);
+        })
+        .catch(() => { this.$http.buildErrorHandler(`${url}请求失败！`); });
+      }
     },
     closeDialog() {
       this.$emit('close-dialog');
     },
   },
+  computed: {
+    isEditable() {
+      return this.clusterInfoOperate !== 'edit';
+    },
+  },
 };
 </script>
diff --git a/saturn-console-web/src/pages/registry_manage/clusters_manage.vue b/saturn-console-web/src/pages/registry_manage/clusters_manage.vue
@@ -28,12 +28,19 @@
                                 </template>
                             </el-table-column>
                             <el-table-column prop="zkAddr" label="连接串" width="500px" :show-overflow-tooltip="true"></el-table-column>
+                            <el-table-column label="操作" width="80px" align="center">
+                                <template slot-scope="scope">
+                                    <el-tooltip content="编辑" placement="top" v-if="$common.hasPerm('registryCenter:addZkCluster')">
+                                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
+                                    </el-tooltip>
+                                </template>
+                            </el-table-column>
                         </el-table>
                     </div>
                 </template>
             </FilterPageList>
             <div v-if="isClusterVisible">
-                <cluster-info-dialog :cluster-info="clusterInfo" @cluster-info-success="clusterInfoSuccess" @close-dialog="closeInfoDialog"></cluster-info-dialog>
+                <cluster-info-dialog :cluster-info="clusterInfo" :cluster-info-title="clusterInfoTitle" :cluster-info-operate="clusterInfoOperate" @cluster-info-success="clusterInfoSuccess" @close-dialog="closeInfoDialog"></cluster-info-dialog>
             </div>
         </div>
     </div>
@@ -48,6 +55,8 @@ export default {
       isClusterVisible: false,
       zkClusterList: [],
       clusterInfo: {},
+      clusterInfoTitle: '',
+      clusterInfoOperate: '',
       filters: {
         zkClusterKey: '',
       },
@@ -61,13 +70,15 @@ export default {
   },
   methods: {
     handleAdd() {
-      this.isClusterVisible = true;
       const clusterAddInfo = {
         zkClusterKey: '',
         alias: '',
         connectString: '',
       };
+      this.clusterInfoTitle = '添加ZK集群';
+      this.clusterInfoOperate = 'add';
       this.clusterInfo = JSON.parse(JSON.stringify(clusterAddInfo));
+      this.isClusterVisible = true;
     },
     closeInfoDialog() {
       this.isClusterVisible = false;
@@ -77,6 +88,24 @@ export default {
       this.getAllClusters();
       this.$message.successNotify('保存ZK集群操作成功,若列表未更新,请稍后手动刷新页面');
     },
+    handleEdit(row) {
+      this.loading = true;
+      this.$http.get('/console/zkClusters', { zkClusterKey: row.zkClusterKey }).then((data) => {
+        const clusterEditInfo = {
+          zkClusterKey: data.zkClusterKey,
+          alias: data.zkAlias,
+          connectString: data.zkAddr,
+        };
+        this.clusterInfoTitle = '编辑ZK集群';
+        this.clusterInfoOperate = 'edit';
+        this.clusterInfo = JSON.parse(JSON.stringify(clusterEditInfo));
+        this.isClusterVisible = true;
+      })
+      .catch(() => { this.$http.buildErrorHandler('获取集群信息请求失败！'); })
+      .finally(() => {
+        this.loading = false;
+      });
+    },
     getAllClusters() {
       this.loading = true;
       this.$http.get('/console/zkClusters').then((data) => {