feat: 调整驱动管理页面

frontend/src/lang/en.js

@@ -1334,6 +1334,7 @@ export default {
     driver: 'Driver',
     please_choose_driver: 'Please choose driver',
     mgm: 'Driver',
+    exit_mgm: 'Exit Driver',
     add: 'ADD Driver',
     modify: 'Modify',
     show_info: 'Driver info',

frontend/src/lang/tw.js

@@ -1334,6 +1334,7 @@ export default {
     driver: '驅動',
     please_choose_driver: '青選擇驅動',
     mgm: '驅動管理',
+    exit_mgm: '退出驅動管理',
     add: '添加驅動',
     modify: '修改',
     show_info: '驅動信息',

frontend/src/lang/zh.js

@@ -1336,6 +1336,7 @@ export default {
     driver: '驱动',
     please_choose_driver: '请选择驱动',
     mgm: '驱动管理',
+    exit_mgm: '退出驱动管理',
     add: '添加驱动',
     modify: '修改',
     show_info: '驱动信息',

frontend/src/views/system/datasource/DsTree.vue

 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col class="tree-style">
     <el-col>
-      <el-row>
-        <el-tabs v-model="showView" type="card" @tab-click="changeTab">
-          <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name" />
-        </el-tabs>
+      <el-row class="title-css" v-show="showView === 'Datasource'">
+        <span class="title-text">
+          {{ $t('commons.datasource') }}
+        </span>
       </el-row>
-      <el-row>
-        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder" />
+      <el-row v-show="showView === 'Datasource'">
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder"> {{ $t('datasource.create') }}</el-button>
+        <el-button icon="el-icon-setting" type="text" size="mini" style="float: right;" @click="driverMgm"> {{ $t('driver.mgm') }}</el-button>
+        </el-button>
+      </el-row>
+
+      <el-row class="title-css" v-show="showView === 'Driver'">
+        <template>
+          <el-icon name="back" class="back-button"  size="mini"  @click.native="dsMgm" />
+          {{$t('driver.exit_mgm')}}
+        </template>
+      </el-row>
+      <el-row v-show="showView === 'Driver'">
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder"> {{ $t('driver.add') }}</el-button>
       </el-row>
+
       <el-row>
         <el-form>
           <el-form-item class="form-item">
@@ -38,16 +51,16 @@
             <span slot-scope="{ node, data }" class="custom-tree-node-list father">
               <span style="display: flex;flex: 1;width: 0;">
                 <span v-if="data.type !== 'folder' && data.status !== 'Error' && data.status !== 'Warning'">
-                  <svg-icon icon-class="datasource" class="ds-icon-scene" />
+                  <svg-icon icon-class="datasource" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.status === 'Error'">
-                  <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+                  <svg-icon icon-class="exclamationmark" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.status === 'Warning'">
-                  <svg-icon icon-class="exclamationmark2" class="ds-icon-scene" />
+                  <svg-icon icon-class="exclamationmark2" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.type === 'folder'">
-                  <i class="el-icon-folder" />
+                  <i class="el-icon-folder"/>
                 </span>
                 <span
                   v-if=" data.status === 'Error'"
@@ -108,10 +121,10 @@
       <el-dialog v-dialogDrag :title="dialogTitle" :visible="editDriver" :show-close="false" width="50%" append-to-body>
         <el-form ref="driverForm" :model="driverForm" label-position="right" label-width="100px" :rules="rule">
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="driverForm.name" />
+            <el-input v-model="driverForm.name"/>
           </el-form-item>
           <el-form-item :label="$t('commons.description')">
-            <el-input v-model="driverForm.desc" />
+            <el-input v-model="driverForm.desc"/>
           </el-form-item>
           <el-form-item :label="$t('datasource.type')" prop="type">
             <el-select
@@ -142,7 +155,7 @@
 </template>
 <script>
 
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import i18n from '@/lang'
 import {
   listDatasource,
@@ -154,7 +167,7 @@ import {
   delDriver,
   listDriverByType
 } from '@/api/system/datasource'
-import { ApplicationContext } from '@/utils/ApplicationContext'
+import {ApplicationContext} from '@/utils/ApplicationContext'
 
 export default {
   name: 'DsTree',
@@ -182,11 +195,11 @@ export default {
       },
       disabledModifyType: false,
       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' }]
+        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'}]
       },
       editableTabs: [{
         title: i18n.t('commons.datasource'),
@@ -310,12 +323,18 @@ export default {
       }
     },
 
-    changeTab() {
+    driverMgm() {
+      this.showView = 'Driver'
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
+    },
+    dsMgm() {
+      this.showView = 'Datasource'
       this.expandedArray = []
       this.tData = []
       this.queryTreeDatas()
     },
-
     addFolderWithType(data) {
       if (this.showView === 'Driver') {
         this.driverForm.type = data.id
@@ -324,7 +343,7 @@ export default {
         this.editDriver = true
         // this.switchMain(switchMain'DriverForm', {}, this.tData, this.dsTypes)
       } else {
-        this.switchMain('DsForm', { type: data.id }, this.tData, this.dsTypes)
+        this.switchMain('DsForm', {type: data.id}, this.tData, this.dsTypes)
       }
     },
     nodeClick(node, data) {
@@ -333,7 +352,7 @@ export default {
     },
 
     clickFileMore(param) {
-      const { optType, data } = param
+      const {optType, data} = param
       switch (optType) {
         case 'edit':
           this.edit(data)
@@ -346,13 +365,13 @@ export default {
       }
     },
     beforeClickFile(optType, data, node) {
-      return { optType, data, node }
+      return {optType, data, node}
     },
     edit(row) {
       this.switchMain('DsForm', row, this.tData, this.dsTypes)
     },
     showInfo(row) {
-      const param = { ...row.data, ...{ showModel: 'show' }}
+      const param = {...row.data, ...{showModel: 'show'}}
       if (this.showView === 'Datasource') {
         this.switchMain('DsForm', param, this.tData, this.dsTypes)
       } else {
@@ -366,7 +385,7 @@ export default {
         type: 'warning'
       }).then(() => {
         let method = delDriver
-        let parma = { type: datasource.type, id: datasource.id }
+        let parma = {type: datasource.type, id: datasource.id}
         if (this.showView === 'Datasource') {
           method = delDs
           parma = datasource.id