From c8d237f941828ea175512ba22ee21085e1223fc4 Mon Sep 17 00:00:00 2001
From: taojinlong <jinlong@fit2cloud.com>
Date: Tue, 23 Aug 2022 17:08:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E6=BA=90):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=A4=8D=E5=88=B6=20API=20=E6=95=B0=E6=8D=AE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/datasource/DsConfiguration.vue     | 207 ++++++++++--------
 1 file changed, 117 insertions(+), 90 deletions(-)

diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index b9cec2f697..0519aacd44 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -76,6 +76,13 @@
                       circle
                       @click="addApiItem(scope.row)"
                     />
+                    <el-button
+                      size="mini"
+                      type="success"
+                      icon="el-icon-document-copy"
+                      circle
+                      @click="copyItem(scope.row)"
+                    />
                     <el-button
                       size="mini"
                       type="danger"
@@ -94,7 +101,7 @@
             :label="$t('datasource.host')"
             prop="configuration.host"
           >
-            <el-input v-model="form.configuration.host" autocomplete="off" />
+            <el-input v-model="form.configuration.host" autocomplete="off"/>
           </el-form-item>
 
           <el-form-item
@@ -126,7 +133,7 @@
             prop="configuration.connectionType"
           >
             <el-radio v-model="form.configuration.connectionType" label="sid"
-              >{{ $t("datasource.oracle_sid") }}
+            >{{ $t("datasource.oracle_sid") }}
             </el-radio>
             <el-radio
               v-model="form.configuration.connectionType"
@@ -278,7 +285,7 @@
             "
           >
             <el-button icon="el-icon-plus" size="mini" @click="getSchema()"
-              >{{ $t("datasource.get_schema") }}
+            >{{ $t("datasource.get_schema") }}
             </el-button>
           </el-form-item>
 
@@ -437,7 +444,7 @@
             <span>{{ $t("datasource.base_info") }}</span>
           </div>
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="apiItem.name" autocomplete="off" />
+            <el-input v-model="apiItem.name" autocomplete="off"/>
           </el-form-item>
 
           <el-form-item :label="$t('datasource.request')" prop="url">
@@ -492,50 +499,51 @@
           </div>
           <div class="table-container">
             <el-table
-            :data="apiItem.jsonFields"
-            style="width: 100%"
-            row-key="jsonPath"
-            ref="apiItemTable"
-          >
-            <el-table-column prop="originName" :label="$t('dataset.parse_filed')"  :show-overflow-tooltip="true" width="255">
-              <template slot-scope="scope">
-                <el-checkbox
-                  v-model="scope.row.checked"
-                  :key="scope.row.jsonPath"
-                  @change="handleCheckAllChange(scope.row)"
-                >
-                  {{ scope.row.originName }}
-                </el-checkbox>
-              </template>
-            </el-table-column>
-            <el-table-column prop="name" :label="$t('dataset.field_rename')">
-              <template slot-scope="scope">
-                <el-input
-                  size="mini"
-                  type="text"
-                  v-model="scope.row.name"
-                  @change="fieldNameChange(scope.row)"
-                />
-              </template>
-            </el-table-column>
-
-            <el-table-column
-              prop="deExtractType"
-              :label="$t('dataset.field_type')"
+              :data="apiItem.jsonFields"
+              style="width: 100%"
+              row-key="jsonPath"
+              ref="apiItemTable"
             >
-              <template slot-scope="scope">
-                <el-select
-                  v-model="scope.row.deExtractType"
-                  size="mini"
-                  style="display: inline-block; width: 120px"
-                  @change="fieldTypeChange(scope.row)"
-                >
-                  <el-option
-                    v-for="item in fieldOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+              <el-table-column prop="originName" :label="$t('dataset.parse_filed')" :show-overflow-tooltip="true"
+                               width="255">
+                <template slot-scope="scope">
+                  <el-checkbox
+                    v-model="scope.row.checked"
+                    :key="scope.row.jsonPath"
+                    @change="handleCheckAllChange(scope.row)"
                   >
+                    {{ scope.row.originName }}
+                  </el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" :label="$t('dataset.field_rename')">
+                <template slot-scope="scope">
+                  <el-input
+                    size="mini"
+                    type="text"
+                    v-model="scope.row.name"
+                    @change="fieldNameChange(scope.row)"
+                  />
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                prop="deExtractType"
+                :label="$t('dataset.field_type')"
+              >
+                <template slot-scope="scope">
+                  <el-select
+                    v-model="scope.row.deExtractType"
+                    size="mini"
+                    style="display: inline-block; width: 120px"
+                    @change="fieldTypeChange(scope.row)"
+                  >
+                    <el-option
+                      v-for="item in fieldOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
                     <span style="float: left">
                       <svg-icon
                         v-if="item.value === '0'"
@@ -548,15 +556,15 @@
                         class="field-icon-value"
                       />
                     </span>
-                    <span
-                      style="float: left; color: #8492a6; font-size: 12px"
+                      <span
+                        style="float: left; color: #8492a6; font-size: 12px"
                       >{{ item.label }}</span
-                    >
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-          </el-table>
+                      >
+                    </el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
 
           <div class="row-rules">
@@ -608,14 +616,16 @@
       <div class="foot">
         <el-button class="btn normal" @click="closeEditItem">{{ $t("commons.cancel") }}</el-button>
         <el-button class="btn" type="primary" @click="next" :disabled="disabledNext" v-show="active === 1"
-          >{{ $t("fu.steps.next") }}
+        >{{ $t("fu.steps.next") }}
         </el-button>
         <el-button class="btn" type="primary" @click="before" v-show="active === 2">{{
-          $t("fu.steps.prev")
-        }}</el-button>
+            $t("fu.steps.prev")
+          }}
+        </el-button>
         <el-button class="btn" type="primary" @click="saveItem" v-show="active === 2">{{
-          $t("commons.save")
-        }}</el-button>
+            $t("commons.save")
+          }}
+        </el-button>
       </div>
     </el-drawer>
   </div>
@@ -623,7 +633,7 @@
 
 <script>
 import i18n from "@/lang";
-import { checkApiDatasource, getSchema } from "@/api/system/datasource";
+import {checkApiDatasource, getSchema} from "@/api/system/datasource";
 import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
 import LayoutContent from "@/components/business/LayoutContent";
 
@@ -859,22 +869,22 @@ export default {
         ],
       },
       reqOptions: [
-        { id: "GET", label: "GET" },
-        { id: "POST", label: "POST" },
+        {id: "GET", label: "GET"},
+        {id: "POST", label: "POST"},
       ],
       loading: false,
-      responseData: { type: "HTTP", responseResult: {}, subRequestResults: [] },
+      responseData: {type: "HTTP", responseResult: {}, subRequestResults: []},
       api_step2_active_name: "first",
       fieldTypes: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.time"), value: 1 },
-        { label: this.$t("dataset.value"), value: 2 },
+        {label: this.$t("dataset.text"), value: 0},
+        {label: this.$t("dataset.time"), value: 1},
+        {label: this.$t("dataset.value"), value: 2},
         {
           label:
             this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
           value: 3,
         },
-        { label: this.$t("dataset.location"), value: 5 },
+        {label: this.$t("dataset.location"), value: 5},
       ],
       height: 500,
       disabledNext: false,
@@ -889,8 +899,8 @@ export default {
         },
       ],
       fieldOptions: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.value"), value: 2 },
+        {label: this.$t("dataset.text"), value: 0},
+        {label: this.$t("dataset.value"), value: 2},
         {
           label:
             this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
@@ -899,7 +909,8 @@ export default {
       ],
     };
   },
-  created() {},
+  created() {
+  },
   watch: {},
   methods: {
     getSchema() {
@@ -968,14 +979,14 @@ export default {
       this.edit_api_item = false;
     },
     saveItem() {
-      if(this.apiItem.fields.length === 0){
+      if (this.apiItem.fields.length === 0) {
         this.$message.warning(i18n.t('datasource.api_field_not_empty'))
         return
       }
 
-      for (var i = 0; i < this.apiItem.fields.length -1; i++) {
-        for (var j = i+1; j < this.apiItem.fields.length; j++) {
-          if(this.apiItem.fields[i].name === this.apiItem.fields[j].name){
+      for (var i = 0; i < this.apiItem.fields.length - 1; i++) {
+        for (var j = i + 1; j < this.apiItem.fields.length; j++) {
+          if (this.apiItem.fields[i].name === this.apiItem.fields[j].name) {
             this.$message.error(this.apiItem.fields[i].name + ', ' + i18n.t('datasource.has_repeat_field_name'))
             return
           }
@@ -988,11 +999,19 @@ export default {
       if (!this.add_api_item) {
         for (var i = 0; i < this.form.apiConfiguration.length; i++) {
           if (this.form.apiConfiguration[i].serialNumber === this.apiItem.serialNumber) {
-            this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(this.form.apiConfiguration[i]), 1);
+            this.form.apiConfiguration[i] = JSON.parse(JSON.stringify(this.apiItem))
           }
         }
+      } else {
+        this.form.apiConfiguration.push(this.apiItem);
       }
-      this.form.apiConfiguration.push(this.apiItem);
+
+    },
+    copyItem(item){
+      var newItem = JSON.parse(JSON.stringify(item))
+      newItem.serialNumber = this.form.apiConfiguration[this.form.apiConfiguration.length - 1].serialNumber + 1
+      newItem.name = item.name + '_copy'
+      this.form.apiConfiguration.push(newItem)
     },
     addApiItem(item) {
       if (item) {
@@ -1002,6 +1021,7 @@ export default {
       } else {
         this.add_api_item = true;
         this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
+        this.apiItem.serialNumber = this.form.apiConfiguration[this.form.apiConfiguration.length - 1].serialNumber + 1
         this.api_table_title = this.$t("datasource.add_api_table");
       }
       this.active = 1;
@@ -1027,12 +1047,12 @@ export default {
       }
     },
 
-    handleFiledChange2(jsonFields){
+    handleFiledChange2(jsonFields) {
       for (var i = 0; i < jsonFields.length; i++) {
-        if (jsonFields[i].checked  && jsonFields[i].children === undefined) {
+        if (jsonFields[i].checked && jsonFields[i].children === undefined) {
 
           for (var j = 0; j < this.apiItem.fields.length; j++) {
-            if(this.apiItem.fields[j].name === jsonFields[i].name){
+            if (this.apiItem.fields[j].name === jsonFields[i].name) {
               this.$nextTick(() => {
                 jsonFields[i].checked = false;
               })
@@ -1076,7 +1096,8 @@ export default {
     fieldNameChange(row) {
       this.previewData();
     },
-    fieldTypeChange(row) {},
+    fieldTypeChange(row) {
+    },
   },
 };
 </script>
@@ -1142,6 +1163,7 @@ export default {
       background: #e9e9ea;
     }
   }
+
   .el-drawer__body {
     padding: 0 24px 81px 24px;
   }
@@ -1173,6 +1195,7 @@ export default {
     .el-input-group__prepend {
       background-color: #fff;
       border-color: #bbbfc4;
+
       .el-select {
         width: 84px !important;
         color: #1f2329;
@@ -1188,6 +1211,7 @@ export default {
   .el-steps {
     margin-top: 23px !important;
     justify-content: center;
+
     .el-step__line {
       line-height: 1.5;
       text-align: center;
@@ -1208,7 +1232,7 @@ export default {
     .el-step__icon.is-text {
       border: none;
       font-family: PingFang SC;
-        font-weight: 400;
+      font-weight: 400;
       color: #fff;
       width: 28px;
       height: 28px;
@@ -1238,10 +1262,11 @@ export default {
         border: 1px solid #8f959e;
       }
     }
+
     .is-process.el-step__title {
-        font-weight: 400;
-        color: #8f959e;
-      }
+      font-weight: 400;
+      color: #8f959e;
+    }
   }
 
   .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
@@ -1292,14 +1317,16 @@ export default {
   .table-container {
     padding: 20px;
     border: 1px solid #DEE0E3;
+
     .el-table__header-wrapper {
-    background-color: #f5f6f7;
-    border-top: 1px solid #DEE0E3;
-    // border-top: 1px solid rgba(31, 35, 41, 0.15);
+      background-color: #f5f6f7;
+      border-top: 1px solid #DEE0E3;
+      // border-top: 1px solid rgba(31, 35, 41, 0.15);
     }
+
     .el-table__fixed-header-wrapper {
       th {
-          background-color: var(--TableBG, #f5f6f7) !important;
+        background-color: var(--TableBG, #f5f6f7) !important;
       }
     }
   }
@@ -1317,8 +1344,8 @@ export default {
     box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
   }
 
-  .el-checkbox__label{
-    width:150px;
+  .el-checkbox__label {
+    width: 150px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;