From f75d44cd135104bd474cbc56c06e179eaa421149 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Fri, 22 Jul 2022 13:39:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20API=E6=95=B0=E6=8D=AE=E6=BA=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |    1 +
 frontend/src/lang/tw.js                       |    1 +
 frontend/src/lang/zh.js                       |    1 +
 .../system/datasource/DsConfiguration.vue     | 1441 ++++++++++++-----
 frontend/src/views/system/user/userEditer.vue |    2 +-
 5 files changed, 1018 insertions(+), 428 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 6cfe191bcb..90c8eb4b47 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1179,6 +1179,7 @@ export default {
     remark_bg_color: 'Background Fill'
   },
   dataset: {
+    parse_filed: 'Parse Field',
     field_rename: 'Rename Field',
     params_work: 'Effective only when editing SQL',
     sql_variable_limit_1: '1、SQL variables can only be used in where conditions',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 7d8a88d4c5..0174d7d61e 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1178,6 +1178,7 @@ export default {
     remark_bg_color: '背景填充'
   },
   dataset: {
+    parse_filed: '解析字段',
     field_rename: '字段重命名',
     params_work: '僅在編輯 sql 時生效',
     sql_variable_limit_1: '1、SQL變數只能在WHERE條件中使用',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index bb46e8a0a4..f6a75d3e85 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1180,6 +1180,7 @@ export default {
     remark_bg_color: '背景填充'
   },
   dataset: {
+    parse_filed: '解析字段',
     field_rename: '字段重命名',
     params_work: '仅在编辑sql时生效',
     select_year: '选择年',
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index a63f32b8a6..deb9f97656 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -11,178 +11,135 @@
           label-width="180px"
           label-position="right"
         >
-          <el-form-item v-if="form.type == 'api'" :label="$t('datasource.data_table')">
+          <el-form-item
+            v-if="form.type == 'api'"
+            :label="$t('datasource.data_table')"
+          >
             <el-col>
-              <el-button size="mini" icon="el-icon-plus" type="text" @click="addApiItem(undefined)" />
-              <el-table :data="form.apiConfiguration" class="my_table" max-height="300" height="300">
-                <el-table-column prop="name" :label="$t('datasource.data_table_name')" width="150"
-                                 show-overflow-tooltip />
-                <el-table-column prop="method" :label="$t('datasource.method')" width="150"
-                                 show-overflow-tooltip />
-                <el-table-column prop="url" :label="$t('datasource.url')" width="150"
-                                 show-overflow-tooltip />
-                <el-table-column prop="status" :label="$t('commons.status')" width="150">
+              <el-button
+                size="mini"
+                icon="el-icon-plus"
+                type="text"
+                @click="addApiItem(undefined)"
+              />
+              <el-table
+                :data="form.apiConfiguration"
+                class="my_table"
+                max-height="300"
+                height="300"
+              >
+                <el-table-column
+                  prop="name"
+                  :label="$t('datasource.data_table_name')"
+                  width="150"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="method"
+                  :label="$t('datasource.method')"
+                  width="150"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="url"
+                  :label="$t('datasource.url')"
+                  width="150"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="status"
+                  :label="$t('commons.status')"
+                  width="150"
+                >
                   <template slot-scope="scope">
-                  <span v-if="scope.row.status === 'Success'" style="color: green">
-                    {{ $t('datasource.valid') }}
-                  </span>
-                    <span v-if="scope.row.status === 'Error'" style="color: #ff0000">
-                    {{ $t('datasource.invalid') }}
-                  </span>
+                    <span
+                      v-if="scope.row.status === 'Success'"
+                      style="color: green"
+                    >
+                      {{ $t("datasource.valid") }}
+                    </span>
+                    <span
+                      v-if="scope.row.status === 'Error'"
+                      style="color: #ff0000"
+                    >
+                      {{ $t("datasource.invalid") }}
+                    </span>
                   </template>
                 </el-table-column>
 
-
                 <el-table-column :label="$t('dataset.operate')">
                   <template slot-scope="scope" style="float: right">
-                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="addApiItem(scope.row)"/>
-                    <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteItem(scope.row)"/>
+                    <el-button
+                      size="mini"
+                      type="primary"
+                      icon="el-icon-edit"
+                      circle
+                      @click="addApiItem(scope.row)"
+                    />
+                    <el-button
+                      size="mini"
+                      type="danger"
+                      icon="el-icon-delete"
+                      circle
+                      @click="deleteItem(scope.row)"
+                    />
                   </template>
                 </el-table-column>
               </el-table>
             </el-col>
           </el-form-item>
 
-          <el-dialog :title="api_table_title" :visible="edit_api_item" :before-close="closeEditItem" width="60%"
-                     class="dialog-css" append-to-body>
-            <el-steps :active="active" align-center>
-              <el-step :title="$t('datasource.api_step_1')"></el-step>
-              <el-step :title="$t('datasource.api_step_2')"></el-step>
-            </el-steps>
-
-            <el-row v-show="active === 1">
-              <el-form ref="apiItem" size="small" :model="apiItem" label-position="top" label-width="100px"
-                       :rules="rule">
-                <p class="tip">{{ $t('datasource.base_info') }} </p>
-
-                <el-form-item :label="$t('commons.name')" prop="name">
-                  <el-input v-model="apiItem.name" autocomplete="off"/>
-                </el-form-item>
-
-                <el-form-item :label="$t('datasource.request')" prop="url">
-                  <el-input :placeholder="$t('datasource.path_all_info')" v-model="apiItem.url" class="ms-http-input"
-                            size="small">
-                    <el-select v-model="apiItem.method" slot="prepend" style="width: 100px" size="small">
-                      <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
-                    </el-select>
-                  </el-input>
-                </el-form-item>
-
-                <div v-loading="loading">
-                  <p class="tip">{{ $t('datasource.req_param') }} </p>
-                  <!-- HTTP 请求参数 -->
-                  <el-form-item>
-                    <api-http-request-form :headers="apiItem.request.headers" :request="apiItem.request"
-                                           :response="responseData"/>
-                  </el-form-item>
-                </div>
-
-              </el-form>
-            </el-row>
-            <el-row v-show="active === 2">
-              <el-form ref="apiItem" size="small" :model="apiItem" label-position="top" label-width="100px"
-                       :rules="rule">
-                <p class="tip">{{ $t('datasource.column_info') }} </p>
-
-                <el-table :data="apiItem.jsonFields" style="width: 100%;" row-key="jsonPath">
-                  <el-table-column prop="originName" label="" 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'" icon-class="field_text" class="field-icon-text"/>
-                                  <svg-icon v-if="item.value === '2' || item.value === '3'" icon-class="field_value"
-                                            class="field-icon-value"/>
-                            </span>
-                          <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
-
-                        </el-option>
-                      </el-select>
-                    </template>
-
-                  </el-table-column>
-                </el-table>
-
-                <p class="tip">{{ $t('dataset.data_preview') }} </p>
-
-                <ux-grid ref="plxTable" size="mini" style="width: 100%;" :height="height"
-                         :checkbox-config="{highlight: true}" :width-resize="true">
-                  <ux-table-column v-for="field in apiItem.fields" :key="field.name + field.deExtractType"
-                                   min-width="200px"
-                                   :field="field.name" :resizable="true">
-                    <template slot="header">
-                      <svg-icon v-if="field.deExtractType === 0" icon-class="field_text" class="field-icon-text"/>
-                      <svg-icon v-if="field.deExtractType === 1" icon-class="field_time" class="field-icon-time"/>
-                      <svg-icon v-if="field.deExtractType === 2 || field.deExtractType === 3" icon-class="field_value"
-                                class="field-icon-value"/>
-                      <svg-icon v-if="field.deExtractType === 5" icon-class="field_location"
-                                class="field-icon-location"/>
-                      <span>{{ field.name }}</span>
-                    </template>
-                  </ux-table-column>
-                </ux-grid>
-              </el-form>
-            </el-row>
-            <div slot="footer" class="dialog-footer">
-              <el-button @click="closeEditItem">{{ $t('commons.cancel') }}</el-button>
-              <el-button @click="next" :disabled="disabledNext" v-show="active === 1">{{
-                  $t('fu.steps.next')
-                }}
-              </el-button>
-              <el-button @click="before" v-show="active === 2">{{ $t('fu.steps.prev') }}</el-button>
-              <el-button @click="saveItem" v-show="active === 2">{{ $t('commons.save') }}</el-button>
-            </div>
-          </el-dialog>
-
-          <el-form-item v-if="form.type !== 'es' && form.type !== 'api'"
-                        :label="$t('datasource.host')" prop="configuration.host">
-            <el-input v-model="form.configuration.host" autocomplete="off"/>
+          <el-form-item
+            v-if="form.type !== 'es' && form.type !== 'api'"
+            :label="$t('datasource.host')"
+            prop="configuration.host"
+          >
+            <el-input v-model="form.configuration.host" autocomplete="off" />
           </el-form-item>
 
-          <el-form-item v-if="form.type=='es'"
-                        :label="$t('datasource.datasource_url')" prop="configuration.url">
-            <el-input v-model="form.configuration.url" :placeholder="$t('datasource.please_input_datasource_url')"
-                      autocomplete="off"/>
+          <el-form-item
+            v-if="form.type == 'es'"
+            :label="$t('datasource.datasource_url')"
+            prop="configuration.url"
+          >
+            <el-input
+              v-model="form.configuration.url"
+              :placeholder="$t('datasource.please_input_datasource_url')"
+              autocomplete="off"
+            />
           </el-form-item>
 
-          <el-form-item v-if="form.type !== 'es'  && form.type !== 'api'"
-                        :label="$t('datasource.data_base')" prop="configuration.dataBase">
-            <el-input v-model="form.configuration.dataBase" autocomplete="off"/>
+          <el-form-item
+            v-if="form.type !== 'es' && form.type !== 'api'"
+            :label="$t('datasource.data_base')"
+            prop="configuration.dataBase"
+          >
+            <el-input
+              v-model="form.configuration.dataBase"
+              autocomplete="off"
+            />
           </el-form-item>
 
-          <el-form-item v-if="form.type=='oracle' && form.type !== 'api'"
-                        :label="$t('datasource.oracle_connection_type')"
-                        prop="configuration.connectionType">
-            <el-radio v-model="form.configuration.connectionType" label="sid">{{
-                $t('datasource.oracle_sid')
-              }}
+          <el-form-item
+            v-if="form.type == 'oracle' && form.type !== 'api'"
+            :label="$t('datasource.oracle_connection_type')"
+            prop="configuration.connectionType"
+          >
+            <el-radio v-model="form.configuration.connectionType" label="sid"
+              >{{ $t("datasource.oracle_sid") }}
             </el-radio>
-            <el-radio v-model="form.configuration.connectionType" label="serviceName">
-              {{ $t('datasource.oracle_service_name') }}
+            <el-radio
+              v-model="form.configuration.connectionType"
+              label="serviceName"
+            >
+              {{ $t("datasource.oracle_service_name") }}
             </el-radio>
           </el-form-item>
 
-          <el-form-item v-if="form.type=='hive' " :label="$t('datasource.auth_method')">
+          <el-form-item
+            v-if="form.type == 'hive'"
+            :label="$t('datasource.auth_method')"
+          >
             <el-select
               v-model="form.configuration.authMethod"
               class="select-width"
@@ -196,134 +153,490 @@
             </el-select>
           </el-form-item>
 
-          <el-form-item v-if="form.type === 'hive'  && form.configuration.authMethod === 'kerberos'"
-                        :label="$t('datasource.client_principal')">
-            <el-input v-model="form.configuration.username" autocomplete="off"/>
+          <el-form-item
+            v-if="
+              form.type === 'hive' &&
+              form.configuration.authMethod === 'kerberos'
+            "
+            :label="$t('datasource.client_principal')"
+          >
+            <el-input
+              v-model="form.configuration.username"
+              autocomplete="off"
+            />
           </el-form-item>
 
-          <el-form-item v-if="form.type === 'hive'  && form.configuration.authMethod === 'kerberos'"
-                        :label="$t('datasource.keytab_Key_path')">
-            <el-input v-model="form.configuration.password" autocomplete="off" show-password/>
+          <el-form-item
+            v-if="
+              form.type === 'hive' &&
+              form.configuration.authMethod === 'kerberos'
+            "
+            :label="$t('datasource.keytab_Key_path')"
+          >
+            <el-input
+              v-model="form.configuration.password"
+              autocomplete="off"
+              show-password
+            />
             <p>
-              {{ $t('datasource.kerbers_info') }}
+              {{ $t("datasource.kerbers_info") }}
             </p>
           </el-form-item>
 
-          <span v-if="form.type === 'hive'  && form.configuration.authMethod === 'kerberos'">
-
+          <span
+            v-if="
+              form.type === 'hive' &&
+              form.configuration.authMethod === 'kerberos'
+            "
+          >
           </span>
 
           <el-form-item
-            v-if="form.type !== 'es'  && form.type !== 'api' && form.configuration.authMethod !== 'kerberos'"
-            :label="$t('datasource.user_name')">
-            <el-input v-model="form.configuration.username" autocomplete="off"/>
+            v-if="
+              form.type !== 'es' &&
+              form.type !== 'api' &&
+              form.configuration.authMethod !== 'kerberos'
+            "
+            :label="$t('datasource.user_name')"
+          >
+            <el-input
+              v-model="form.configuration.username"
+              autocomplete="off"
+            />
           </el-form-item>
 
           <el-form-item
-            v-if="form.type !== 'es'  && form.type !== 'api' && form.configuration.authMethod !== 'kerberos'"
-            :label="$t('datasource.password')">
-            <el-input v-model="form.configuration.password" autocomplete="off" show-password/>
-          </el-form-item>
-
-          <el-form-item v-if="form.type ==='es'"
-                        :label="$t('datasource.user_name')">
-            <el-input v-model="form.configuration.esUsername" autocomplete="off"/>
-          </el-form-item>
-
-          <el-form-item v-if="form.type ==='es'"
-                        :label="$t('datasource.password')">
-            <el-input v-model="form.configuration.esPassword" autocomplete="off" show-password/>
-          </el-form-item>
-
-          <el-form-item v-if="form.type !=='es' && form.type!=='oracle' && form.type !== 'api'"
-                        :label="$t('datasource.extra_params')">
-            <el-input v-model="form.configuration.extraParams" autocomplete="off"/>
-          </el-form-item>
-
-          <el-form-item v-if="form.type !=='es' && form.type !== 'api'"
-                        :label="$t('datasource.port')" prop="configuration.port">
-            <el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
+            v-if="
+              form.type !== 'es' &&
+              form.type !== 'api' &&
+              form.configuration.authMethod !== 'kerberos'
+            "
+            :label="$t('datasource.password')"
+          >
+            <el-input
+              v-model="form.configuration.password"
+              autocomplete="off"
+              show-password
+            />
           </el-form-item>
 
           <el-form-item
-            v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'">
-            <el-button icon="el-icon-plus" size="mini" @click="getSchema()">{{
-                $t('datasource.get_schema')
-              }}
+            v-if="form.type === 'es'"
+            :label="$t('datasource.user_name')"
+          >
+            <el-input
+              v-model="form.configuration.esUsername"
+              autocomplete="off"
+            />
+          </el-form-item>
+
+          <el-form-item
+            v-if="form.type === 'es'"
+            :label="$t('datasource.password')"
+          >
+            <el-input
+              v-model="form.configuration.esPassword"
+              autocomplete="off"
+              show-password
+            />
+          </el-form-item>
+
+          <el-form-item
+            v-if="
+              form.type !== 'es' &&
+              form.type !== 'oracle' &&
+              form.type !== 'api'
+            "
+            :label="$t('datasource.extra_params')"
+          >
+            <el-input
+              v-model="form.configuration.extraParams"
+              autocomplete="off"
+            />
+          </el-form-item>
+
+          <el-form-item
+            v-if="form.type !== 'es' && form.type !== 'api'"
+            :label="$t('datasource.port')"
+            prop="configuration.port"
+          >
+            <el-input
+              v-model="form.configuration.port"
+              autocomplete="off"
+              type="number"
+              min="0"
+            />
+          </el-form-item>
+
+          <el-form-item
+            v-if="
+              form.type == 'oracle' ||
+              form.type == 'sqlServer' ||
+              form.type == 'pg' ||
+              form.type == 'redshift' ||
+              form.type == 'db2'
+            "
+          >
+            <el-button icon="el-icon-plus" size="mini" @click="getSchema()"
+              >{{ $t("datasource.get_schema") }}
             </el-button>
           </el-form-item>
 
           <el-form-item
-            v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'"
-            :label="$t('datasource.schema')">
-            <el-select v-model="form.configuration.schema" filterable
-                       :placeholder="$t('datasource.please_choose_schema')"
-                       class="select-width">
-              <el-option v-for="item in schemas" :key="item" :label="item" :value="item"/>
+            v-if="
+              form.type == 'oracle' ||
+              form.type == 'sqlServer' ||
+              form.type == 'pg' ||
+              form.type == 'redshift' ||
+              form.type == 'db2'
+            "
+            :label="$t('datasource.schema')"
+          >
+            <el-select
+              v-model="form.configuration.schema"
+              filterable
+              :placeholder="$t('datasource.please_choose_schema')"
+              class="select-width"
+            >
+              <el-option
+                v-for="item in schemas"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
             </el-select>
           </el-form-item>
 
-          <el-form-item v-if="form.type=='oracle'" :label="$t('datasource.charset')">
-            <el-select v-model="form.configuration.charset" filterable
-                       :placeholder="$t('datasource.please_choose_charset')"
-                       class="select-width">
-              <el-option v-for="item in datasourceType.charset" :key="item" :label="item" :value="item"/>
+          <el-form-item
+            v-if="form.type == 'oracle'"
+            :label="$t('datasource.charset')"
+          >
+            <el-select
+              v-model="form.configuration.charset"
+              filterable
+              :placeholder="$t('datasource.please_choose_charset')"
+              class="select-width"
+            >
+              <el-option
+                v-for="item in datasourceType.charset"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
             </el-select>
           </el-form-item>
 
-          <el-form-item v-if="form.type=='oracle'" :label="$t('datasource.targetCharset')">
-            <el-select v-model="form.configuration.targetCharset" filterable
-                       :placeholder="$t('datasource.please_choose_targetCharset')"
-                       class="select-width">
-              <el-option v-for="item in datasourceType.targetCharset" :key="item" :label="item" :value="item"/>
+          <el-form-item
+            v-if="form.type == 'oracle'"
+            :label="$t('datasource.targetCharset')"
+          >
+            <el-select
+              v-model="form.configuration.targetCharset"
+              filterable
+              :placeholder="$t('datasource.please_choose_targetCharset')"
+              class="select-width"
+            >
+              <el-option
+                v-for="item in datasourceType.targetCharset"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
             </el-select>
           </el-form-item>
 
-          <el-collapse v-if="form.type !=='es' && form.type !== 'api' && form.type !== 'mongo'">
+          <el-collapse
+            v-if="
+              form.type !== 'es' && form.type !== 'api' && form.type !== 'mongo'
+            "
+          >
             <el-collapse-item :title="$t('datasource.priority')" name="1">
-              <el-form-item :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
-                <el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0"
-                          size="small"/>
+              <el-form-item
+                :label="$t('datasource.initial_pool_size')"
+                prop="configuration.initialPoolSize"
+              >
+                <el-input
+                  v-model="form.configuration.initialPoolSize"
+                  autocomplete="off"
+                  type="number"
+                  min="0"
+                  size="small"
+                />
               </el-form-item>
-              <el-form-item :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
-                <el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
+              <el-form-item
+                :label="$t('datasource.min_pool_size')"
+                prop="configuration.minPoolSize"
+              >
+                <el-input
+                  v-model="form.configuration.minPoolSize"
+                  autocomplete="off"
+                  type="number"
+                  min="0"
+                />
               </el-form-item>
-              <el-form-item :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
-                <el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
+              <el-form-item
+                :label="$t('datasource.max_pool_size')"
+                prop="configuration.maxPoolSize"
+              >
+                <el-input
+                  v-model="form.configuration.maxPoolSize"
+                  autocomplete="off"
+                  type="number"
+                  min="0"
+                />
               </el-form-item>
-              <el-form-item v-if="datasourceType.isJdbc" :label="$t('datasource.query_timeout')"
-                            prop="configuration.queryTimeout">
-                <el-input v-model="form.configuration.queryTimeout" autocomplete="off" type="number" min="0"/>
+              <el-form-item
+                v-if="datasourceType.isJdbc"
+                :label="$t('datasource.query_timeout')"
+                prop="configuration.queryTimeout"
+              >
+                <el-input
+                  v-model="form.configuration.queryTimeout"
+                  autocomplete="off"
+                  type="number"
+                  min="0"
+                />
               </el-form-item>
             </el-collapse-item>
           </el-collapse>
         </el-form>
-
       </el-col>
     </el-row>
+    <el-drawer
+      :title="api_table_title"
+      :visible.sync="edit_api_item"
+      custom-class="api-datasource-drawer"
+      size="840px"
+      :before-close="closeEditItem"
+      direction="rtl"
+    >
+      <el-steps :active="active" align-center :space="144">
+        <el-step
+          v-if="active === 1"
+          :title="$t('datasource.api_step_1')"
+        ></el-step>
+        <el-step
+          v-else
+          icon="el-icon-circle-check"
+          :title="$t('datasource.api_step_1')"
+        ></el-step>
+        <el-step :title="$t('datasource.api_step_2')"></el-step>
+      </el-steps>
+
+      <el-row v-show="active === 1">
+        <el-form
+          ref="apiItem"
+          size="small"
+          :model="apiItem"
+          label-position="top"
+          label-width="100px"
+          :rules="rule"
+        >
+          <div class="row-rules">
+            <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-form-item>
+
+          <el-form-item :label="$t('datasource.request')" prop="url">
+            <el-input
+              :placeholder="$t('datasource.path_all_info')"
+              v-model="apiItem.url"
+              class="input-with-select"
+              size="small"
+            >
+              <el-select
+                v-model="apiItem.method"
+                slot="prepend"
+                style="width: 100px"
+                size="small"
+              >
+                <el-option
+                  v-for="item in reqOptions"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-input>
+          </el-form-item>
+
+          <div v-loading="loading">
+            <div class="row-rules">
+              <span>{{ $t("datasource.req_param") }}</span>
+            </div>
+            <!-- HTTP 请求参数 -->
+            <el-form-item>
+              <api-http-request-form
+                :headers="apiItem.request.headers"
+                :request="apiItem.request"
+                :response="responseData"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-row>
+      <el-row v-show="active === 2">
+        <el-form
+          ref="apiItem"
+          size="small"
+          :model="apiItem"
+          label-position="top"
+          label-width="100px"
+          :rules="rule"
+        >
+          <div class="row-rules">
+            <span>{{ $t("datasource.column_info") }}</span>
+          </div>
+          <div class="table-container">
+            <el-table
+            :data="apiItem.jsonFields"
+            style="width: 100%"
+            row-key="jsonPath"
+          >
+            <el-table-column prop="originName" :label="$t('dataset.parse_filed')" 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'"
+                        icon-class="field_text"
+                        class="field-icon-text"
+                      />
+                      <svg-icon
+                        v-if="item.value === '2' || item.value === '3'"
+                        icon-class="field_value"
+                        class="field-icon-value"
+                      />
+                    </span>
+                    <span
+                      style="float: left; color: #8492a6; font-size: 12px"
+                      >{{ item.label }}</span
+                    >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+          </div>
+
+          <div class="row-rules">
+            <span>{{ $t("dataset.data_preview") }}</span>
+          </div>
+
+          <ux-grid
+            ref="plxTable"
+            size="mini"
+            style="width: 100%"
+            :height="height"
+            :checkbox-config="{ highlight: true }"
+            :width-resize="true"
+          >
+            <ux-table-column
+              v-for="field in apiItem.fields"
+              :key="field.name + field.deExtractType"
+              min-width="200px"
+              :field="field.name"
+              :resizable="true"
+            >
+              <template slot="header">
+                <svg-icon
+                  v-if="field.deExtractType === 0"
+                  icon-class="field_text"
+                  class="field-icon-text"
+                />
+                <svg-icon
+                  v-if="field.deExtractType === 1"
+                  icon-class="field_time"
+                  class="field-icon-time"
+                />
+                <svg-icon
+                  v-if="field.deExtractType === 2 || field.deExtractType === 3"
+                  icon-class="field_value"
+                  class="field-icon-value"
+                />
+                <svg-icon
+                  v-if="field.deExtractType === 5"
+                  icon-class="field_location"
+                  class="field-icon-location"
+                />
+                <span>{{ field.name }}</span>
+              </template>
+            </ux-table-column>
+          </ux-grid>
+        </el-form>
+      </el-row>
+      <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") }}
+        </el-button>
+        <el-button class="btn" type="primary" @click="before" v-show="active === 2">{{
+          $t("fu.steps.prev")
+        }}</el-button>
+        <el-button class="btn" type="primary" @click="saveItem" v-show="active === 2">{{
+          $t("commons.save")
+        }}</el-button>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-
-
 import i18n from "@/lang";
-import {checkApiDatasource, getSchema} from "@/api/system/datasource";
-import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import LayoutContent from '@/components/business/LayoutContent'
+import { checkApiDatasource, getSchema } from "@/api/system/datasource";
+import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
+import LayoutContent from "@/components/business/LayoutContent";
 
 export default {
   name: "DsConfiguration",
   components: {
     ApiHttpRequestForm,
-    LayoutContent
+    LayoutContent,
   },
   props: {
     disabled: {
       type: Boolean,
       default() {
         return false;
-      }
+      },
     },
     method: String,
     request: {},
@@ -339,89 +652,165 @@ export default {
         return {
           configuration: {
             initialPoolSize: 5,
-            extraParams: '',
+            extraParams: "",
             minPoolSize: 5,
             maxPoolSize: 50,
             maxIdleTime: 30,
             acquireIncrement: 5,
             idleConnectionTestPeriod: 5,
             connectTimeout: 5,
-            queryTimeout: 30
+            queryTimeout: 30,
           },
-          apiConfiguration: []
-        }
-      }
+          apiConfiguration: [],
+        };
+      },
     },
   },
   data() {
     return {
       rule: {
-        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
-          {min: 2, max: 25, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
-        desc: [{min: 2, max: 50, message: i18n.t('datasource.input_limit_2_50'), trigger: 'blur'}],
-        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}],
-        'configuration.dataBase': [{
-          required: true,
-          message: i18n.t('datasource.please_input_data_base'),
-          trigger: 'blur'
-        }],
-        'configuration.connectionType': [{
-          required: true,
-          message: i18n.t('datasource.please_select_oracle_type'),
-          trigger: 'blur'
-        }],
-        'configuration.username': [{
-          required: true,
-          message: i18n.t('datasource.please_input_user_name'),
-          trigger: 'blur'
-        }],
-        'configuration.password': [{
-          required: true,
-          message: i18n.t('datasource.please_input_password'),
-          trigger: 'blur'
-        }],
-        'configuration.host': [{required: true, message: i18n.t('datasource.please_input_host'), trigger: 'blur'}],
-        'configuration.url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur'}],
-        'configuration.port': [{required: true, message: i18n.t('datasource.please_input_port'), trigger: 'blur'}],
-        'configuration.initialPoolSize': [{
-          required: true,
-          message: i18n.t('datasource.please_input_initial_pool_size'),
-          trigger: 'blur'
-        }],
-        'configuration.minPoolSize': [{
-          required: true,
-          message: i18n.t('datasource.please_input_min_pool_size'),
-          trigger: 'blur'
-        }],
-        'configuration.maxPoolSize': [{
-          required: true,
-          message: i18n.t('datasource.please_input_max_pool_size'),
-          trigger: 'blur'
-        }],
-        'configuration.maxIdleTime': [{
-          required: true,
-          message: i18n.t('datasource.please_input_max_idle_time'),
-          trigger: 'blur'
-        }],
-        'configuration.acquireIncrement': [{
-          required: true,
-          message: i18n.t('datasource.please_input_acquire_increment'),
-          trigger: 'blur'
-        }],
-        'configuration.queryTimeout': [{
-          required: true,
-          message: i18n.t('datasource.please_input_query_timeout'),
-          trigger: 'blur'
-        }],
-        'configuration.connectTimeout': [{
-          required: true,
-          message: i18n.t('datasource.please_input_connect_timeout'),
-          trigger: 'blur'
-        }],
-        'url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur'}],
-        'dataPath': [{required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur'}]
+        name: [
+          {
+            required: true,
+            message: i18n.t("datasource.input_name"),
+            trigger: "blur",
+          },
+          {
+            min: 2,
+            max: 25,
+            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
+            trigger: "blur",
+          },
+        ],
+        desc: [
+          {
+            min: 2,
+            max: 50,
+            message: i18n.t("datasource.input_limit_2_50"),
+            trigger: "blur",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: i18n.t("datasource.please_choose_type"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.dataBase": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_data_base"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.connectionType": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_select_oracle_type"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.username": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_user_name"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.password": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_password"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.host": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_host"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.url": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_url"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.port": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_port"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.initialPoolSize": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_initial_pool_size"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.minPoolSize": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_min_pool_size"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.maxPoolSize": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_max_pool_size"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.maxIdleTime": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_max_idle_time"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.acquireIncrement": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_acquire_increment"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.queryTimeout": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_query_timeout"),
+            trigger: "blur",
+          },
+        ],
+        "configuration.connectTimeout": [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_connect_timeout"),
+            trigger: "blur",
+          },
+        ],
+        url: [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_url"),
+            trigger: "blur",
+          },
+        ],
+        dataPath: [
+          {
+            required: true,
+            message: i18n.t("datasource.please_input_dataPath"),
+            trigger: "blur",
+          },
+        ],
       },
-      api_table_title: '',
+      api_table_title: "",
       schemas: [],
       canEdit: false,
       originConfiguration: {},
@@ -429,239 +818,264 @@ export default {
       add_api_item: true,
       active: 0,
       defaultApiItem: {
-        name: '',
-        url: '',
-        method: 'GET',
+        name: "",
+        url: "",
+        method: "GET",
         request: {
           headers: [{}],
           body: {
-            "type": "",
-            "raw": "",
-            "kvs": []
-          }
+            type: "",
+            raw: "",
+            kvs: [],
+          },
         },
-        fields: []
+        fields: [],
       },
       apiItem: {
-        status: '',
-        name: '',
-        url: '',
-        method: 'GET',
-        dataPath: '',
+        status: "",
+        name: "",
+        url: "",
+        method: "GET",
+        dataPath: "",
         request: {
           headers: [],
           body: {
-            "type": "",
-            "raw": "",
-            "kvs": []
+            type: "",
+            raw: "",
+            kvs: [],
           },
-          authManager: {}
+          authManager: {},
         },
         fields: [],
         jsonFields: [
           {
-            "deType":0,
-            "size":65535,
-            "children":null,
-            "name":"comments",
-            "checked":false,
-            "extField":0,
-            "jsonPath":"$[*].comments",
-            "type":"STRING",
-            "originName":"comments",
-            "deExtractType":0
-          }
-        ]
+            deType: 0,
+            size: 65535,
+            children: null,
+            name: "comments",
+            checked: false,
+            extField: 0,
+            jsonPath: "$[*].comments",
+            type: "STRING",
+            originName: "comments",
+            deExtractType: 0,
+          },
+        ],
       },
-      reqOptions: [{ id: 'GET', label: 'GET'}, {id: 'POST', label: 'POST' }],
+      reqOptions: [
+        { id: "GET", label: "GET" },
+        { id: "POST", label: "POST" },
+      ],
       loading: false,
-      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
-      api_step2_active_name: 'first',
+      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.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
-        { label: this.$t('dataset.location'), value: 5 }
+        { 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 },
       ],
       height: 500,
       disabledNext: false,
       authMethodList: [
         {
-          id: 'passwd',
-          label: i18n.t('datasource.passwd')
-        }, {
-          id: 'kerberos',
-          label: 'Kerberos'
-        }],
+          id: "passwd",
+          label: i18n.t("datasource.passwd"),
+        },
+        {
+          id: "kerberos",
+          label: "Kerberos",
+        },
+      ],
       fieldOptions: [
-        { label: this.$t('dataset.text'), value: 0 },
-        { label: this.$t('dataset.value'), value: 2 },
-        { label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 }
-      ]
-    }
-  },
-  created() {
+        { label: this.$t("dataset.text"), value: 0 },
+        { label: this.$t("dataset.value"), value: 2 },
+        {
+          label:
+            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
+          value: 3,
+        },
+      ],
+    };
   },
+  created() {},
   watch: {},
   methods: {
     getSchema() {
-      this.$refs.DsConfig.validate(valid => {
+      this.$refs.DsConfig.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form))
-          data.configuration = JSON.stringify(data.configuration)
-          getSchema(data).then(res => {
-            this.schemas = res.data
-            this.$success(i18n.t('commons.success'))
-          })
+          const data = JSON.parse(JSON.stringify(this.form));
+          data.configuration = JSON.stringify(data.configuration);
+          getSchema(data).then((res) => {
+            this.schemas = res.data;
+            this.$success(i18n.t("commons.success"));
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     next() {
       if (this.active === 1) {
-        let hasRepeatName = false
+        let hasRepeatName = false;
         if (this.add_api_item) {
-          this.form.apiConfiguration.forEach(item => {
+          this.form.apiConfiguration.forEach((item) => {
             if (item.name === this.apiItem.name) {
-              hasRepeatName = true
+              hasRepeatName = true;
             }
-          })
+          });
         } else {
-          const index = this.form.apiConfiguration.indexOf(this.apiItem)
+          const index = this.form.apiConfiguration.indexOf(this.apiItem);
           for (let i = 0; i < this.form.apiConfiguration.length; i++) {
-            if (i !== index && this.form.apiConfiguration[i].name === this.apiItem.name) {
-              hasRepeatName = true
+            if (
+              i !== index &&
+              this.form.apiConfiguration[i].name === this.apiItem.name
+            ) {
+              hasRepeatName = true;
             }
           }
         }
         if (hasRepeatName) {
-          this.$message.error(i18n.t('datasource.has_repeat_name'))
-          return
+          this.$message.error(i18n.t("datasource.has_repeat_name"));
+          return;
         }
-        this.$refs.apiItem.validate(valid => {
+        this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem))
-            this.loading = true
-            this.disabledNext = true
-            checkApiDatasource(data).then(res => {
-              this.loading = false
-              this.disabledNext = false
-              this.apiItem.status = 'Success'
-              this.$success(i18n.t('commons.success'))
-              this.active++
-              this.apiItem.jsonFields = res.data.jsonFields
-              this.apiItem.fields = []
-              this.handleFiledChange()
-              this.previewData()
-            }).catch(res => {
-              this.loading = false
-              this.disabledNext = false
-            })
+            const data = JSON.parse(JSON.stringify(this.apiItem));
+            this.loading = true;
+            this.disabledNext = true;
+            checkApiDatasource(data)
+              .then((res) => {
+                this.loading = false;
+                this.disabledNext = false;
+                this.apiItem.status = "Success";
+                this.$success(i18n.t("commons.success"));
+                this.active++;
+                this.apiItem.jsonFields = res.data.jsonFields;
+                this.apiItem.fields = [];
+                this.handleFiledChange();
+                this.previewData();
+              })
+              .catch((res) => {
+                this.loading = false;
+                this.disabledNext = false;
+              });
           } else {
-            this.apiItem.fields = []
-            return false
+            this.apiItem.fields = [];
+            return false;
           }
-        })
+        });
       }
     },
     before() {
-      this.active--
+      this.active--;
     },
     closeEditItem() {
-      this.active = 0
-      this.edit_api_item = false
+      this.active = 0;
+      console.log(1, this.$refs.apiItem);
+      this.$refs.apiItem.clearValidate();
+      this.edit_api_item = false;
     },
     saveItem() {
-      this.active = 0
-      this.edit_api_item = false
+      this.active = 0;
+      this.edit_api_item = false;
       if (this.add_api_item) {
-        this.form.apiConfiguration.push(this.apiItem)
+        this.form.apiConfiguration.push(this.apiItem);
       }
     },
     addApiItem(item) {
-      this.$nextTick(() => {
-        this.$refs.apiItem.clearValidate()
-      })
       if (item) {
-        this.add_api_item = false
-        this.api_table_title = this.$t('datasource.edit_api_table')
-        this.apiItem = item
+        this.add_api_item = false;
+        this.api_table_title = this.$t("datasource.edit_api_table");
+        this.apiItem = item;
       } else {
-        this.add_api_item = true
-        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
-        this.api_table_title = this.$t('datasource.add_api_table')
+        this.add_api_item = true;
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
+        this.api_table_title = this.$t("datasource.add_api_table");
       }
-      this.active = 1
-      this.edit_api_item = true
+      this.active = 1;
+      this.edit_api_item = true;
     },
     deleteItem(item) {
-      this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(item), 1)
+      this.form.apiConfiguration.splice(
+        this.form.apiConfiguration.indexOf(item),
+        1
+      );
     },
     handleCheckAllChange(row) {
-      console.log(row)
-      this.handleCheckChange(row)
-      this.apiItem.fields = []
-      this.handleFiledChange()
-      this.previewData()
+      console.log(row);
+      this.handleCheckChange(row);
+      this.apiItem.fields = [];
+      this.handleFiledChange();
+      this.previewData();
     },
     handleFiledChange(data) {
-      let jsonField = data === undefined ? this.apiItem.jsonFields : data
-      for(var i=0;i< jsonField.length;i++) {
+      let jsonField = data === undefined ? this.apiItem.jsonFields : data;
+      for (var i = 0; i < jsonField.length; i++) {
         if (jsonField[i].checked && jsonField[i].children === null) {
-          this.apiItem.fields.push(jsonField[i])
+          this.apiItem.fields.push(jsonField[i]);
         }
         if (jsonField[i].children !== null) {
-          this.handleFiledChange(jsonField[i].children)
+          this.handleFiledChange(jsonField[i].children);
         }
       }
     },
     previewData() {
-      let datas = []
-      let maxPreviewNum = 0
+      let datas = [];
+      let maxPreviewNum = 0;
       for (let j = 0; j < this.apiItem.fields.length; j++) {
-        if (this.apiItem.fields[j].value && this.apiItem.fields[j].value.length > maxPreviewNum) {
-          maxPreviewNum = this.apiItem.fields[j].value.length
+        if (
+          this.apiItem.fields[j].value &&
+          this.apiItem.fields[j].value.length > maxPreviewNum
+        ) {
+          maxPreviewNum = this.apiItem.fields[j].value.length;
         }
       }
       for (let i = 0; i < maxPreviewNum; i++) {
-        datas.push({})
+        datas.push({});
       }
       for (let i = 0; i < this.apiItem.fields.length; i++) {
         for (let j = 0; j < this.apiItem.fields[i].value.length; j++) {
-          this.$set(datas[j], this.apiItem.fields[i].name, this.apiItem.fields[i].value[j]);
+          this.$set(
+            datas[j],
+            this.apiItem.fields[i].name,
+            this.apiItem.fields[i].value[j]
+          );
         }
-        this.$refs.plxTable.reloadData(datas)
+        this.$refs.plxTable.reloadData(datas);
       }
     },
     handleCheckChange(node) {
       if (node.children !== null) {
         node.children.forEach((item) => {
-          item.checked = node.checked
-          this.handleCheckChange(item)
-        })
+          item.checked = node.checked;
+          this.handleCheckChange(item);
+        });
       }
     },
     fieldNameChange(row) {
-      this.previewData()
+      this.previewData();
     },
-    fieldTypeChange(row) {
-    }
-  }
-}
+    fieldTypeChange(row) {},
+  },
+};
 </script>
 
 <style scoped>
 .ms-query {
-  background: #409EFF;
+  background: #409eff;
   color: white;
   height: 18px;
   border-radius: 42%;
 }
 
 .ms-header {
-  background: #409EFF;
+  background: #409eff;
   color: white;
   height: 18px;
   border-radius: 42%;
@@ -681,7 +1095,180 @@ export default {
   padding: 3px 5px;
   font-size: 16px;
   border-radius: 0;
-  border-left: 4px solid #409EFF;
+  border-left: 4px solid #409eff;
   margin: 5px 5px 10px 5px;
 }
 </style>
+<style lang="scss">
+.api-datasource-drawer {
+  .el-drawer__header {
+    padding: 24px;
+    margin: 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #1f2329;
+    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+  }
+  .el-drawer__body {
+    padding: 0 24px 81px 24px;
+  }
+
+  .row-rules {
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    padding-left: 10px;
+    margin: 24px 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 14px;
+      width: 2px;
+      background: #3370ff;
+    }
+  }
+
+  .input-with-select {
+    .el-input-group__prepend {
+      background-color: #fff;
+      .el-select {
+        width: 84px !important;
+      }
+    }
+  }
+
+  ::v-deep .el-form-item__label {
+    width: 100% !important;
+    text-align: left;
+  }
+
+  .el-steps {
+    margin-top: 23px !important;
+    justify-content: center;
+    .el-step__line {
+      line-height: 1.5;
+      text-align: center;
+      box-sizing: inherit;
+      position: absolute;
+      background-color: rgba(187, 191, 196, 0.5);
+      height: 1px;
+      top: 13px;
+      left: calc(50% + 22px);
+      width: 100px;
+      margin-right: 0px;
+
+      i {
+        border-top: none;
+      }
+    }
+
+    .el-step__icon.is-text {
+      border: none;
+      font-family: PingFang SC;
+        font-weight: 400;
+      color: #fff;
+      width: 28px;
+      height: 28px;
+      background: #3370ff;
+    }
+
+    .el-step__icon.is-icon {
+      i {
+        font-size: 27px;
+      }
+    }
+
+    .el-step__title {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+      text-align: center;
+      color: #1f2329;
+    }
+
+    .is-process {
+      .el-step__icon.is-text {
+        background: none;
+        color: #8f959e;
+        border: 1px solid #8f959e;
+      }
+    }
+    .is-process.el-step__title {
+        font-weight: 400;
+        color: #8f959e;
+      }
+  }
+
+  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+    display: none;
+  }
+
+  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::after {
+    content: "*";
+    color: #f54a45;
+    margin-left: 2px;
+  }
+
+  ::v-deep .el-form-item__content {
+    margin-left: 0 !important;
+  }
+
+  .btn {
+    border-radius: 4px;
+    padding: 5px 26px 5px 26px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: center;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .normal {
+    color: #1f2329;
+    border: 1px solid #bbbfc4;
+    margin-left: 12px;
+  }
+
+  .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);
+    }
+    .el-table__fixed-header-wrapper {
+      th {
+          background-color: var(--TableBG, #f5f6f7) !important;
+      }
+    }
+  }
+
+  .foot {
+    width: 100%;
+    z-index: 5;
+    height: 80px;
+    padding: 24px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    text-align: right;
+    background: #FFFFFF;
+    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/user/userEditer.vue b/frontend/src/views/system/user/userEditer.vue
index d416887bb0..8dfe9bed70 100644
--- a/frontend/src/views/system/user/userEditer.vue
+++ b/frontend/src/views/system/user/userEditer.vue
@@ -502,11 +502,11 @@ export default {
       font-weight: 400;
       line-height: 22px;
       text-align: left;
-      color: #1f2329;
     }
 
     .pwd {
       margin: 0 8px;
+      color: #1f2329;
     }
 
     .btn-text {