From a60bc5c0562eb7fd110a5c15428de6adfa77312b Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 22 Jun 2021 11:54:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90ID1001685=E3=80=91=E3=80=90?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=BA=90=E3=80=91=E9=A2=84=E8=A7=88=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E4=BF=A1=E6=81=AF=E7=9A=84=E6=97=B6=E5=80=99?=
 =?UTF-8?q?=EF=BC=8C=E7=82=B9=E5=87=BB=E9=A2=84=E8=A7=88=E9=A1=B5=E4=B8=8B?=
 =?UTF-8?q?=E6=96=B9=E7=9A=84=E7=BC=96=E8=BE=91=E6=8C=89=E9=92=AE=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/system/datasource.js         |  4 +
 .../src/views/system/datasource/DsTree.vue    | 12 ++-
 frontend/src/views/system/datasource/form.vue | 93 ++++++++++++-------
 3 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/frontend/src/api/system/datasource.js b/frontend/src/api/system/datasource.js
index ab1d5632d7..87b607b940 100644
--- a/frontend/src/api/system/datasource.js
+++ b/frontend/src/api/system/datasource.js
@@ -19,6 +19,7 @@ export function addDs(data) {
   return request({
     url: 'datasource/add/',
     method: 'post',
+    loading: true,
     data
   })
 }
@@ -27,6 +28,7 @@ export function editDs(data) {
   return request({
     url: 'datasource/update/',
     method: 'post',
+    loading: true,
     data
   })
 }
@@ -34,6 +36,7 @@ export function editDs(data) {
 export function delDs(id) {
   return request({
     url: 'datasource/delete/' + id,
+    loading: true,
     method: 'post'
   })
 }
@@ -42,6 +45,7 @@ export function validateDs(data) {
   return request({
     url: 'datasource/validate/',
     method: 'post',
+    loading: true,
     data
   })
 }
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 3bfb2edc86..854e54bc3e 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -58,7 +58,15 @@
 
                 </span>
                 <span v-if="data.type !=='folder'" style="margin-left: 12px;" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickFileMore">
+                  <span class="el-dropdown-link">
+                    <el-button
+                      icon="el-icon-delete"
+                      type="text"
+                      size="small"
+                      @click="_handleDelete(data)"
+                    />
+                  </span>
+                  <!-- <el-dropdown trigger="click" size="small" @command="clickFileMore">
                     <span class="el-dropdown-link">
                       <el-button
                         icon="el-icon-more"
@@ -75,7 +83,7 @@
                         {{ $t('panel.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
-                  </el-dropdown>
+                  </el-dropdown> -->
                 </span>
               </span>
             </span>
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index ad8cb70cb0..cdf06c7b41 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -2,49 +2,64 @@
   <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')">
     <template v-slot:header>
       <el-icon name="back" class="back-button" @click.native="backToList" />
-      {{ params && params.id && params.showModel && params.showModel === 'show' ? $t('datasource.show_info') : formType=='add' ? $t('datasource.create') : $t('datasource.modify') }}
+      {{ params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType=='add' ? $t('datasource.create') : $t('datasource.modify') }}
     </template>
-    <el-form ref="dsForm" :model="form" :rules="rule" size="small" :disabled="params && params.id && params.showModel && params.showModel === 'show'" label-width="auto" label-position="right">
-      <el-form-item :label="$t('commons.name')" prop="name">
-        <el-input v-model="form.name" autocomplete="off" />
-      </el-form-item>
-      <el-form-item :label="$t('commons.description')" prop="desc">
+    <div>
 
-        <el-input v-model="form.desc" autocomplete="off" type="textarea" />
-      </el-form-item>
-      <el-form-item :label="$t('datasource.type')" prop="type">
-        <el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" :disabled="formType=='modify'" @change="changeType()">
-          <el-option
-            v-for="item in allTypes"
-            :key="item.name"
-            :label="item.label"
-            :value="item.name"
-          />
-        </el-select>
-      </el-form-item>
+      <el-form ref="dsForm" :model="form" :rules="rule" size="small" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit " label-width="auto" label-position="right">
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item :label="$t('commons.description')" prop="desc">
 
-      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host">
-        <el-input v-model="form.configuration.host" autocomplete="off" :disabled="formType=='modify'" />
-      </el-form-item>
-      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase">
-        <el-input v-model="form.configuration.dataBase" autocomplete="off" :disabled="formType=='modify'" />
-      </el-form-item>
-      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username">
-        <el-input v-model="form.configuration.username" autocomplete="off" :disabled="formType=='modify'" />
-      </el-form-item>
-      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password">
-        <el-input v-model="form.configuration.password" autocomplete="off" show-password />
-      </el-form-item>
-      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port">
-        <el-input v-model="form.configuration.port" autocomplete="off" />
-      </el-form-item>
+          <el-input v-model="form.desc" autocomplete="off" type="textarea" />
+        </el-form-item>
+        <el-form-item :label="$t('datasource.type')" prop="type">
+          <el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" :disabled="formType=='modify'" @change="changeType()">
+            <el-option
+              v-for="item in allTypes"
+              :key="item.name"
+              :label="item.label"
+              :value="item.name"
+            />
+          </el-select>
+        </el-form-item>
 
-      <el-form-item v-if="!(params && params.id && params.showModel && params.showModel === 'show')">
+        <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host">
+          <el-input v-model="form.configuration.host" autocomplete="off" :disabled="formType=='modify'" />
+        </el-form-item>
+        <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase">
+          <el-input v-model="form.configuration.dataBase" autocomplete="off" :disabled="formType=='modify'" />
+        </el-form-item>
+        <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username">
+          <el-input v-model="form.configuration.username" autocomplete="off" :disabled="formType=='modify'" />
+        </el-form-item>
+        <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password">
+          <el-input v-model="form.configuration.password" autocomplete="off" show-password />
+        </el-form-item>
+        <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port">
+          <el-input v-model="form.configuration.port" autocomplete="off" />
+        </el-form-item>
+
+      <!-- <el-form-item v-if="canEdit">
         <el-button @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
         <el-button type="primary" @click="save">{{ $t('commons.save') }}</el-button>
       </el-form-item>
-    </el-form>
 
+      <el-form-item v-else>
+        <el-button @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
+        <el-button @click="changeEdit">{{ $t('commons.edit') }}</el-button>
+      </el-form-item> -->
+      </el-form>
+      <div v-if="canEdit" slot="footer" class="dialog-footer">
+        <el-button @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
+        <el-button type="primary" @click="save">{{ $t('commons.save') }}</el-button>
+      </div>
+      <div v-else slot="footer" class="dialog-footer">
+        <el-button @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
+        <el-button type="primary" @click="changeEdit">{{ $t('commons.edit') }}</el-button>
+      </div>
+    </div>
   </layout-content>
 </template>
 
@@ -76,7 +91,8 @@ export default {
         'configuration.port': [{ required: true, message: this.$t('datasource.please_input_port'), trigger: 'change' }]
       },
       allTypes: [{ name: 'mysql', label: 'MySQL', type: 'jdbc' },
-        { name: 'sqlServer', label: 'SQL Server', type: 'jdbc' }]
+        { name: 'sqlServer', label: 'SQL Server', type: 'jdbc' }],
+      canEdit: false
     }
   },
 
@@ -103,8 +119,13 @@ export default {
     // }
   },
   methods: {
+    changeEdit() {
+      this.canEdit = true
+      this.formType = 'modify'
+    },
     create() {
       this.formType = 'add'
+      this.canEdit = true
     },
     edit(row) {
       this.formType = 'modify'