From f1be625f7fdd3069d82b4866b1a4451568a1b6eb Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Sun, 29 May 2022 10:00:46 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=A6=81=E6=AD=A2=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E4=B8=AD=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=81=A2=E5=A4=8D=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E6=95=B0=E6=8D=AE=E9=9B=86form=E4=B8=AD=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/system/datasource/DriverForm.vue    | 102 +++++++------
 .../src/views/system/datasource/DsForm.vue    | 137 ++++++++++--------
 2 files changed, 123 insertions(+), 116 deletions(-)

diff --git a/frontend/src/views/system/datasource/DriverForm.vue b/frontend/src/views/system/datasource/DriverForm.vue
index 9b5c2fdd4b..4a8f04b38a 100644
--- a/frontend/src/views/system/datasource/DriverForm.vue
+++ b/frontend/src/views/system/datasource/DriverForm.vue
@@ -1,16 +1,15 @@
 <template>
   <layout-content>
     <template v-slot:header>
-      <el-icon name="back" class="back-button" @click.native="backToList"/>
+      <el-icon name="back" class="back-button" @click.native="backToList" />
       {{
         params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('driver.show_info') : $t('driver.modify')
       }}
-      <el-button v-if="canEdit"  size="mini"   style="float: right;"type="primary" @click="save">{{ $t('commons.save') }}
+      <el-button v-if="canEdit" size="mini" style="float: right;"type="primary" @click="save">{{ $t('commons.save') }}
       </el-button>
-      <el-button v-else size="mini"  style="float: right;" type="primary" @click="changeEdit">{{ $t('commons.edit') }}
+      <el-button v-else size="mini" style="float: right;" type="primary" @click="changeEdit">{{ $t('commons.edit') }}
       </el-button>
 
-
     </template>
     <div>
 
@@ -24,16 +23,17 @@
         label-position="right"
       >
         <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="driverForm.name" autocomplete="off"/>
+          <el-input v-model="driverForm.name" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('commons.description')">
-          <el-input v-model="driverForm.desc" autocomplete="off"/>
+          <el-input v-model="driverForm.desc" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('datasource.type')" prop="type">
           <el-select
             v-model="driverForm.type"
             :placeholder="$t('datasource.please_choose_type')"
             class="select-width"
+            style="width: 100%"
             disabled
             filterable
           >
@@ -46,27 +46,26 @@
           </el-select>
         </el-form-item>
 
-<!--        <el-form-item :label="$t('driver.driver')" >-->
-<!--          <el-select-->
-<!--            v-model="driverForm.driverClass"-->
-<!--            :placeholder="$t('driver.please_choose_driver')"-->
-<!--            class="select-width"-->
-<!--            filterable-->
-<!--          >-->
-<!--            <el-option-->
-<!--              v-for="item in driverClassList"-->
-<!--              :key="item"-->
-<!--              :label="item"-->
-<!--              :value="item"-->
-<!--            />-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('driver.driver')" >-->
+        <!--          <el-select-->
+        <!--            v-model="driverForm.driverClass"-->
+        <!--            :placeholder="$t('driver.please_choose_driver')"-->
+        <!--            class="select-width"-->
+        <!--            filterable-->
+        <!--          >-->
+        <!--            <el-option-->
+        <!--              v-for="item in driverClassList"-->
+        <!--              :key="item"-->
+        <!--              :label="item"-->
+        <!--              :value="item"-->
+        <!--            />-->
+        <!--          </el-select>-->
+        <!--        </el-form-item>-->
 
         <el-form-item :label="$t('driver.driver')" prop="driverClass">
-          <el-input v-model="driverForm.driverClass" autocomplete="off"/>
+          <el-input v-model="driverForm.driverClass" autocomplete="off" />
         </el-form-item>
 
-
       </el-form>
 
       <el-upload
@@ -83,16 +82,16 @@
         :headers="headers"
         style="float: right;"
       >
-        <el-button size="mini" type="primary"  style="float: right;" :disabled="uploading">
+        <el-button size="mini" type="primary" style="float: right;" :disabled="uploading">
           <span v-if="!uploading" style="font-size: 12px;">{{ $t('dataset.upload_file') }}</span>
           <span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
         </el-button>
       </el-upload>
-    <fu-table :data="driverFiles">
-      <el-table-column prop="fileName" :label="$t('driver.file_name')"/>
-<!--      <el-table-column prop="version" :label="$t('driver.version')"/>-->
-      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix/>
-    </fu-table>
+      <fu-table :data="driverFiles">
+        <el-table-column prop="fileName" :label="$t('driver.file_name')" />
+        <!--      <el-table-column prop="version" :label="$t('driver.version')"/>-->
+        <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
+      </fu-table>
 
     </div>
   </layout-content>
@@ -102,13 +101,13 @@
 import LayoutContent from '@/components/business/LayoutContent'
 import i18n from '@/lang/index'
 import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from "@/views/system/datasource/DsConfiguration";
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import {deleteDriverFile, listDriverDetails, updateDriver} from "@/api/system/datasource";
-import {delUser} from "@/api/system/user";
-import {$alert} from "@/utils/message";
-import store from "@/store";
-import {getToken} from "@/utils/auth";
+import { deleteDriverFile, listDriverDetails, updateDriver } from '@/api/system/datasource'
+import { delUser } from '@/api/system/user'
+import { $alert } from '@/utils/message'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
 
 const token = getToken()
 
@@ -138,7 +137,7 @@ export default {
     return {
       disabled: false,
       driverForm: {
-        id:'',
+        id: '',
         name: '',
         desc: '',
         type: '',
@@ -147,12 +146,12 @@ export default {
       datasourceType: {},
       driverClassList: [],
       rule: {
-        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
-          {min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
-        desc: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
-          {min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
-        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}],
-        driverClass: [{required: true, message: i18n.t('driver.please_set_driverClass'), trigger: 'blur'}]
+        name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
+        desc: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
+        type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }],
+        driverClass: [{ required: true, message: i18n.t('driver.please_set_driverClass'), trigger: 'blur' }]
       },
       canEdit: false,
       driverFiles: [],
@@ -179,7 +178,6 @@ export default {
   mounted() {
   },
 
-
   methods: {
     beforeUpload(file) {
       this.uploading = true
@@ -191,7 +189,7 @@ export default {
     uploadFail(response, file, fileList) {
       let myError = response.toString()
       myError = myError.replace('Error: ', '')
-      if(myError.indexOf('AuthenticationException') >= 0){
+      if (myError.indexOf('AuthenticationException') >= 0) {
         const message = i18n.t('login.tokenError')
         $alert(message, () => {
           store.dispatch('user/logout').then(() => {
@@ -211,13 +209,13 @@ export default {
         showClose: true
       })
     },
-    deleteDriverFile(row){
+    deleteDriverFile(row) {
       deleteDriverFile(row).then(res => {
         this.$success(this.$t('commons.delete_success'))
         this.listDriverDetails()
       })
     },
-    listDriverDetails(){
+    listDriverDetails() {
       listDriverDetails(this.driverForm.id).then(res => {
         this.driverFiles = res.data
         this.driverClassList = []
@@ -231,11 +229,11 @@ export default {
       this.formType = 'modify'
       this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
     },
-    save(){
+    save() {
       this.$refs.driverForm.validate(valid => {
-          if (!valid) {
-            return false
-          }
+        if (!valid) {
+          return false
+        }
         updateDriver(this.driverForm).then(res => {
           this.$success(i18n.t('commons.success'))
           this.canEdit = false
@@ -256,13 +254,13 @@ export default {
 }
 </script>
 <style scoped>
-.el-input {
+/* .el-input {
   width: 300px;
 }
 
 .el-select {
   width: 300px;
-}
+} */
 
 .ms-http-input {
   width: 500px;
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index 693bcfa323..1b0dddac48 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -1,7 +1,7 @@
 <template>
   <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"/>
+      <el-icon name="back" class="back-button" @click.native="backToList" />
       {{
         params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType == 'add' ? $t('datasource.create') : $t('datasource.modify')
       }}
@@ -18,19 +18,20 @@
         label-position="right"
       >
         <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="form.name" autocomplete="off"/>
+          <el-input v-model="form.name" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('commons.description')" prop="desc">
-          <el-input v-model="form.desc" autocomplete="off"/>
+          <el-input v-model="form.desc" autocomplete="off" />
         </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"
+            style="width: 100%"
             :disabled="formType=='modify' || (formType==='add' && params && !!params.type)"
-            @change="changeType()"
             filterable
+            @change="changeType()"
           >
             <el-option
               v-for="item in dsTypes"
@@ -41,11 +42,12 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item  v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
+        <el-form-item v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
           <el-select
             v-model="form.configuration.customDriver"
             :placeholder="$t('driver.please_choose_driver')"
             class="select-width"
+            style="width: 100%"
             filterable
           >
             <el-option
@@ -58,27 +60,35 @@
           </el-select>
         </el-form-item>
 
-      <ds-configuration ref="dsConfig" v-if="!datasourceType.isPlugin" :datasource-type='datasourceType' :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"></ds-configuration>
-      <plugin-com ref="pluginDsConfig" v-if="datasourceType.isPlugin"  :component-name="datasourceType.type" :obj="{form, disabled }" />
-
+        <ds-configuration v-if="!datasourceType.isPlugin" ref="dsConfig" :datasource-type="datasourceType" :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit" />
+        <plugin-com v-if="datasourceType.isPlugin" ref="pluginDsConfig" :component-name="datasourceType.type" :obj="{form, disabled }" />
 
       </el-form>
 
-
       <div v-if="canEdit" slot="footer" class="dialog-footer">
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
-                   @click="validaDatasource">{{ $t('commons.validate') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          @click="validaDatasource"
+        >{{ $t('commons.validate') }}
         </el-button>
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)" type="primary"
-                   @click="save">{{ $t('commons.save') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          type="primary"
+          @click="save"
+        >{{ $t('commons.save') }}
         </el-button>
       </div>
       <div v-else slot="footer" class="dialog-footer">
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
-                   @click="validaDatasource">{{ $t('commons.validate') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          @click="validaDatasource"
+        >{{ $t('commons.validate') }}
         </el-button>
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)" type="primary"
-                   @click="changeEdit">{{ $t('commons.edit') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          type="primary"
+          @click="changeEdit"
+        >{{ $t('commons.edit') }}
         </el-button>
       </div>
     </div>
@@ -96,10 +106,10 @@ import {
   checkApiDatasource,
   listDriverByType
 } from '@/api/system/datasource'
-import {$confirm} from '@/utils/message'
+import { $confirm } from '@/utils/message'
 import i18n from '@/lang/index'
 import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from "@/views/system/datasource/DsConfiguration";
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import PluginCom from '@/views/system/plugin/PluginCom'
 
 export default {
@@ -143,10 +153,10 @@ export default {
       },
       datasourceType: {},
       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'}],
+        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'),
@@ -167,9 +177,9 @@ export default {
           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.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'),
@@ -200,8 +210,8 @@ export default {
           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'}]
+        'url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
+        'dataPath': [{ required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur' }]
       },
       schemas: [],
       canEdit: false,
@@ -216,9 +226,9 @@ export default {
         request: {
           headers: [{}],
           body: {
-            "type": "",
-            "raw": "",
-            "kvs": []
+            'type': '',
+            'raw': '',
+            'kvs': []
           }
         },
         fields: []
@@ -232,25 +242,25 @@ export default {
         request: {
           headers: [],
           body: {
-            "type": "",
-            "raw": "",
-            "kvs": []
+            'type': '',
+            'raw': '',
+            'kvs': []
           },
           authManager: {}
         },
         fields: []
       },
-      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: []},
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
       api_table_title: '',
       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,
@@ -288,7 +298,6 @@ export default {
         connectTimeout: 5,
         customDriver: 'default'
       }
-
     },
     changeEdit() {
       this.canEdit = true
@@ -328,15 +337,15 @@ export default {
         return
       }
       let repeat = false
-      let repeatDsName = []
+      const repeatDsName = []
       this.tData.forEach(item => {
         if (item.id === this.form.type) {
           item.children.forEach(child => {
             if (this.formType === 'modify' && child.id === this.form.id) {
               return
             }
-            let configuration = JSON.parse(child.configuration)
-            if(!configuration){
+            const configuration = JSON.parse(child.configuration)
+            if (!configuration) {
               return
             }
             switch (this.form.type) {
@@ -378,16 +387,16 @@ export default {
         }
       })
 
-      let status = null;
-      if(this.datasourceType.isPlugin){
-        status = this.$refs['pluginDsConfig'].callPluginInner({methodName: 'validate'})
-      }else {
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
+      } else {
         this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
           status = valid
         })
       }
-      if(!status){
-        return;
+      if (!status) {
+        return
       }
 
       this.$refs.dsForm.validate(valid => {
@@ -462,19 +471,19 @@ export default {
         this.$message.error(i18n.t('datasource.port_no_less_then_0'))
         return
       }
-      let status = null;
-      if(this.datasourceType.isPlugin){
-        status = this.$refs['pluginDsConfig'].callPluginInner({methodName: 'validate'})
-      }else {
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
+      } else {
         this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
           status = valid
-          if(!valid){
+          if (!valid) {
             return
           }
         })
       }
-      if(!status){
-        return;
+      if (!status) {
+        return
       }
       this.$refs.dsForm.validate(valid => {
         if (valid) {
@@ -523,15 +532,15 @@ export default {
     changeType(init) {
       for (let i = 0; i < this.dsTypes.length; i++) {
         if (this.dsTypes[i].type === this.form.type) {
-          if(this.form.type !== 'api' && !init){
+          if (this.form.type !== 'api' && !init) {
             this.form.configuration.extraParams = this.dsTypes[i].extraParams
             this.form.configuration.customDriver = 'default'
           }
           this.datasourceType = this.dsTypes[i]
-          if(this.datasourceType.isJdbc){
+          if (this.datasourceType.isJdbc) {
             listDriverByType(this.datasourceType.type).then(res => {
               this.driverList = []
-              this.driverList.push({id: 'default', name: 'Default', driverClass:'Default'})
+              this.driverList.push({ id: 'default', name: 'Default', driverClass: 'Default' })
               this.driverList = this.driverList.concat(res.data)
             })
           }
@@ -554,7 +563,7 @@ export default {
             }
           })
         } else {
-          let 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
@@ -652,13 +661,13 @@ export default {
 }
 </script>
 <style scoped>
-.el-input {
+/* .el-input {
   width: 300px;
 }
 
 .el-select {
   width: 300px;
-}
+} */
 
 .ms-http-input {
   width: 500px;