From 09a1d1d0f675c7241f9897bc21bf2e0380c50379 Mon Sep 17 00:00:00 2001
From: leozhang2018 <leozhang2018@gmail.com>
Date: Wed, 19 May 2021 20:53:46 +0800
Subject: [PATCH] Checking service name when add service

Signed-off-by: leozhang2018 <leozhang2018@gmail.com>
---
 .../service_mgr/common/service_tree.vue       | 138 ++++++++++--------
 1 file changed, 77 insertions(+), 61 deletions(-)

diff --git a/zadig-portal/src/components/projects/service_mgr/common/service_tree.vue b/zadig-portal/src/components/projects/service_mgr/common/service_tree.vue
index 25de65ffc2..618f64f5a2 100644
--- a/zadig-portal/src/components/projects/service_mgr/common/service_tree.vue
+++ b/zadig-portal/src/components/projects/service_mgr/common/service_tree.vue
@@ -300,15 +300,24 @@
       </keep-alive>
       <div v-if="showNewServiceInput && mode==='edit'"
            class="add-new-service">
-        <span class="service-status new"></span>
-        <i class="service-type iconfont iconrongqifuwu"></i>
-        <el-input v-model="newServiceName"
-                  size="mini"
-                  autofocus
-                  ref="serviceNamedRef"
-                  @blur="inputServiceNameDoneWhenBlur"
-                  @keyup.enter.native="inputServiceNameDoneWhenEnter"
-                  placeholder="请输入服务名称"></el-input>
+        <el-form :model="service"
+                 :rules="serviceRules"
+                 ref="newServiceNameForm"
+                 @submit.native.prevent>
+          <el-form-item label=""
+                        prop="newServiceName">
+            <span class="service-status new"></span>
+            <i class="service-type iconfont iconrongqifuwu"></i>
+            <el-input v-model="service.newServiceName"
+                      size="mini"
+                      autofocus
+                      ref="serviceNamedRef"
+                      @blur="inputServiceNameDoneWhenBlur"
+                      @keyup.enter.native="inputServiceNameDoneWhenEnter"
+                      placeholder="请输入服务名称"></el-input>
+          </el-form-item>
+
+        </el-form>
       </div>
       <el-tree v-if="mode==='arrange' && deployType === 'k8s'"
                :data="serviceGroup"
@@ -438,7 +447,9 @@ export default {
   data() {
     return {
       mode: 'edit',
-      newServiceName: '',
+      service: {
+        newServiceName: ''
+      },
       showHover: {},
       searchService: '',
       serviceGroup: [],
@@ -488,7 +499,7 @@ export default {
             type: 'string',
             required: true,
             validator: validateServiceName,
-            trigger: 'blur'
+            trigger: ['blur', 'change']
           }
         ]
 
@@ -738,57 +749,62 @@ export default {
 
     },
     inputServiceNameDoneWhenBlur() {
-      const val = this.newServiceName;
-      const node = this.$refs.serviceTree.getNode(val);
-      if (val && !node) {
-        const data = {
-          label: val,
-          status: 'named',
-          service_name: val,
-          type: this.deployType ? this.deployType : 'k8s',
-          visibility: 'private'
-        };
-        this.services.push(data);
-        this.setServiceSelected(data.service_name);
-        this.$router.replace({ query: { service_name: data.service_name, rightbar: 'help' } });
-        this.$emit('onSelectServiceChange', data);
-        this.showNewServiceInput = false;
-        this.newServiceName = '';
-      }
-      else {
-        this.showNewServiceInput = false;
-      }
+      this.$refs['newServiceNameForm'].validate((valid) => {
+        if (valid) {
+          const val = this.service.newServiceName;
+          const node = this.$refs.serviceTree.getNode(val);
+          if (!node) {
+            const data = {
+              label: val,
+              status: 'named',
+              service_name: val,
+              type: this.deployType ? this.deployType : 'k8s',
+              visibility: 'private'
+            };
+            this.services.push(data);
+            this.setServiceSelected(data.service_name);
+            this.$router.replace({ query: { service_name: data.service_name, rightbar: 'help' } });
+            this.$emit('onSelectServiceChange', data);
+            this.showNewServiceInput = false;
+            this.service.newServiceName = '';
+          }
+        }
+      });
     },
     inputServiceNameDoneWhenEnter() {
-      const val = this.newServiceName;
-      const node = this.$refs.serviceTree.getNode(val);
-      let data = null;
-      if (val && !node) {
-        data = {
-          label: val,
-          status: 'named',
-          service_name: val,
-          type: this.deployType ? this.deployType : 'k8s',
-          visibility: 'private'
-        };
-      }
-      else {
-        data = {
-          label: 'untitled',
-          status: 'named',
-          service_name: 'untitled',
-          type: this.deployType ? this.deployType : 'k8s',
-          visibility: 'private'
-        };
-      }
-      if (!node) {
-        this.services.push(data);
-      }
-      this.setServiceSelected(data.service_name);
-      this.$router.replace({ query: { service_name: data.service_name, rightbar: 'help' } });
-      this.$emit('onSelectServiceChange', data);
-      this.showNewServiceInput = false;
-      this.newServiceName = '';
+      this.$refs['newServiceNameForm'].validate((valid) => {
+        if (valid) {
+          const val = this.service.newServiceName;
+          const node = this.$refs.serviceTree.getNode(val);
+          let data = null;
+          if (!node) {
+            data = {
+              label: val,
+              status: 'named',
+              service_name: val,
+              type: this.deployType ? this.deployType : 'k8s',
+              visibility: 'private'
+            };
+          }
+          else {
+            data = {
+              label: 'untitled',
+              status: 'named',
+              service_name: 'untitled',
+              type: this.deployType ? this.deployType : 'k8s',
+              visibility: 'private'
+            };
+          }
+          if (!node) {
+            this.services.push(data);
+          }
+          this.setServiceSelected(data.service_name);
+          this.$router.replace({ query: { service_name: data.service_name, rightbar: 'help' } });
+          this.$emit('onSelectServiceChange', data);
+          this.showNewServiceInput = false;
+          this.service.newServiceName = '';
+        }
+      });
     },
     reEditServiceName(node, data) {
       const service = this.$utils.cloneObj(data);
@@ -798,7 +814,7 @@ export default {
       const index = this.filteredServices.findIndex(d => d.service_name === service.service_name);
       this.services.splice(index, 1);
       this.showNewServiceInput = true;
-      this.newServiceName = service.service_name;
+      this.service.newServiceName = service.service_name;
       this.$nextTick(() => {
         this.$refs.serviceNamedRef.focus();
       });