fix: 数据源选择列表样式调整

frontend/src/components/deCustomCm/DePager.vue

@@ -112,9 +112,9 @@ export default {
         }
       }
 
-      //eslint-disable-next-line
+      // eslint-disable-next-line
       this.showPrevMore = showPrevMore
-      //eslint-disable-next-line
+      // eslint-disable-next-line
       this.showNextMore = showNextMore
 
       return array

frontend/src/views/dataset/data/FieldEdit.vue

@@ -860,8 +860,8 @@ export default {
           item.dateFormat = item.dateFormatType
         }
       }
-      if(item.dateFormatType === 'custom' && !item.dateFormat){
+      if (item.dateFormatType === 'custom' && !item.dateFormat) {
-        return;
+        return
       }
       post('/dataset/field/save', item)
         .then((response) => {

frontend/src/views/dataset/data/UpdateInfo.vue

@@ -861,7 +861,7 @@ export default {
     },
     disableExec(task) {
       return (
-        (task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status ==='Exec' || !hasDataPermission('manage', task.privileges)
+        (task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status === 'Exec' || !hasDataPermission('manage', task.privileges)
       )
     },
     disableDelete(task) {

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

@@ -255,15 +255,15 @@
         v-dialogDrag
         :title="$t('datasource.create')"
         :visible.sync="dsTypeRelate"
-        width="1200px"
+        width="1005px"
         class="de-dialog-form none-scroll-bar"
         append-to-body
       >
-        <el-tabs v-model="tabActive">
+        <el-tabs
-          <el-tab-pane
+          v-model="tabActive"
-            :label="$t('datasource.all')"
+          class="de-tabs"
-            name="all"
+          @tab-click="handleClick"
-          />
+        >
           <el-tab-pane
             :label="$t('datasource.relational_database')"
             name="RDBMS"
@@ -278,24 +278,36 @@
           />
         </el-tabs>
         <div class="db-container">
-          <div
+          <template v-for="(list, idx) in databaseList">
-            v-for="(db, index) in databaseList"
+            <div
-            :key="db.type"
+              :key="nameMap[idx]"
-            class="db-card"
+              :class="typeList[idx]"
-            :class="[{ marLeft: index % 4 === 0 }]"
+              class="name"
-            @click="addDb(db)"
+            >{{ $t(`datasource.${nameMap[idx]}`) }}</div>
-          >
+            <div
-            <img
+              :key="nameMap[idx] + 'cont'"
-              v-if="!db.isPlugin"
+              class="item-container"
-              :src="require('../../../assets/datasource/' + db.type + '.jpg')"
-              alt=""
             >
-            <img
+              <div
-              v-if="db.isPlugin"
+                v-for="(db, index) in list"
-              :src="`/api/pluginCommon/staticInfo/${db.type}/jpg`"
+                :key="db.type"
-            >
+                class="db-card"
-            <p class="db-name">{{ db.name }}</p>
+                :class="[{ marLeft: index % 5 === 0 }]"
-          </div>
+                @click="addDb(db)"
+              >
+                <img
+                  v-if="!db.isPlugin"
+                  :src="require('../../../assets/datasource/' + db.type + '.jpg')"
+                  alt=""
+                >
+                <img
+                  v-if="db.isPlugin"
+                  :src="`/api/pluginCommon/staticInfo/${db.type}/jpg`"
+                >
+                <p class="db-name">{{ db.name }}</p>
+              </div>
+            </div>
+          </template>
         </div>
       </el-dialog>
     </el-col>
@@ -329,11 +341,14 @@ export default {
   },
   data() {
     return {
-      tabActive: 'all',
+      tabActive: 'RDBMS',
+      databaseList: [],
       currentNodeId: '',
       dsTypeRelate: false,
       expandedArray: [],
       tData: [],
+      nameMap: ['relational_database', 'non_relational_database', 'other'],
+      typeList: ['RDBMS', 'NORDBMS', 'OTHER'],
       treeLoading: false,
       dsTypes: [],
       dsTypesForDriver: [],
@@ -386,15 +401,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['user']),
+    ...mapGetters(['user'])
-    databaseList() {
-      if (this.tabActive === 'all') {
-        return this.dsTypes
-      }
-      return this.dsTypes.filter(
-        (ele) => ele.databaseClassification === this.tabActive
-      )
-    }
   },
   watch: {
     key(val) {
@@ -406,6 +413,9 @@ export default {
     this.datasourceTypes()
   },
   methods: {
+    handleClick() {
+      document.querySelector(`.${this.tabActive}`).scrollIntoView()
+    },
     createDriveOrDs() {
       if (this.showView === 'Driver') {
         this.addDriver()
@@ -478,11 +488,17 @@ export default {
     datasourceTypes() {
       listDatasourceType().then((res) => {
         this.dsTypes = res.data
+        const databaseList = [[], [], []]
         this.dsTypes.forEach((item) => {
+          const index = this.typeList.findIndex(ele => ele === item.databaseClassification)
+          if (index !== -1) {
+            databaseList[index].push(item)
+          }
           if (item.isJdbc) {
             this.dsTypesForDriver.push(item)
           }
         })
+        this.databaseList = databaseList
       })
     },
     refreshType(datasource) {
@@ -802,24 +818,38 @@ export default {
   width: 100%;
   max-height: 65vh;
   overflow-y: auto;
-  display: flex;
+  margin-top: 3px;
-  flex-wrap: wrap;
-  margin-top: -3px;
   position: relative;
   z-index: 10;
+
+  .name {
+    margin: 16px 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--deTextPrimary, #1F2329);
+  }
+
+  .item-container {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
   .db-card {
-    height: 193px;
+    height: 141px;
-    width: 270px;
+    width: 177.6px;
     display: flex;
     flex-wrap: wrap;
     background: #ffffff;
     border: 1px solid #dee0e3;
     border-radius: 4px;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
-    margin-left: 22px;
+    margin-left: 16px;
     img {
       width: 100%;
-      height: 154.58px;
+      height: 102px;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
     }

frontend/src/views/system/task/DatasetTaskList.vue

@@ -634,7 +634,7 @@ export default {
       )
     },
     disableExec(task) {
-      return ((task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status ==='Exec' || !hasDataPermission('manage', task.privileges))
+      return ((task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status === 'Exec' || !hasDataPermission('manage', task.privileges))
     },
     disableDelete(task) {
       return false