Merge pull request #3216 from dataease/pr@dev_dataset_source

Pr@dev dataset source

frontend/src/icons/svg/de-ds-error.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.5C7.07786 1.5 5.30656 1.7586 3.98986 2.1975C3.33543 2.41564 2.75172 2.69192 2.31622 3.03514C1.88917 3.37169 1.5 3.86104 1.5 4.5V13.5C1.5 14.139 1.88917 14.6283 2.31622 14.9649C2.75172 15.3081 3.33543 15.5844 3.98986 15.8025C5.30656 16.2414 7.07786 16.5 9 16.5C10.9221 16.5 12.6934 16.2414 14.0101 15.8025C14.6646 15.5844 15.2483 15.3081 15.6838 14.9649C16.1108 14.6283 16.5 14.139 16.5 13.5V4.5C16.5 3.86104 16.1108 3.37169 15.6838 3.03514C15.2483 2.69192 14.6646 2.41564 14.0101 2.1975C12.6934 1.7586 10.9221 1.5 9 1.5ZM15 6.39495C14.6991 6.54883 14.365 6.68421 14.0101 6.8025C12.6934 7.2414 10.9221 7.5 9 7.5C7.07786 7.5 5.30656 7.2414 3.98986 6.8025C3.63499 6.68421 3.30092 6.54883 3 6.39495V9C3 9.00091 3.00012 9.00435 3.00229 9.01147C3.00484 9.01983 3.01112 9.03634 3.02631 9.06107C3.05814 9.11293 3.12306 9.1909 3.24468 9.28674C3.49231 9.4819 3.89712 9.69045 4.4642 9.87948C5.59052 10.2549 7.19422 10.5 9 10.5C10.8058 10.5 12.4095 10.2549 13.5358 9.87948C14.1029 9.69045 14.5077 9.4819 14.7553 9.28674C14.8769 9.1909 14.9419 9.11293 14.9737 9.06107C14.9889 9.03634 14.9952 9.01983 14.9977 9.01147C14.9999 9.00429 15 9.00105 15 9.00017C15 9.0002 15 9.00012 15 9.00017V6.39495ZM15 10.8949C14.6991 11.0488 14.365 11.1842 14.0101 11.3025C12.6934 11.7414 10.9221 12 9 12C7.07786 12 5.30656 11.7414 3.98986 11.3025C3.63499 11.1842 3.30092 11.0488 3 10.8949V13.5C3 13.5007 2.99999 13.5039 3.00229 13.5115C3.00484 13.5198 3.01112 13.5363 3.02631 13.5611C3.05814 13.6129 3.12306 13.6909 3.24468 13.7867C3.49231 13.9819 3.89712 14.1905 4.4642 14.3795C5.59052 14.7549 7.19422 15 9 15C10.8058 15 12.4095 14.7549 13.5358 14.3795C14.1029 14.1905 14.5077 13.9819 14.7553 13.7867C14.8769 13.6909 14.9419 13.6129 14.9737 13.5611C14.9889 13.5363 14.9952 13.5198 14.9977 13.5115C15 13.5039 15 13.5007 15 13.5V10.8949Z" fill="#1F2329"/>
+<g clip-path="url(#clip0_3097_94188)">
+<path d="M15 19.5832C17.5313 19.5832 19.5834 17.5311 19.5834 14.9998C19.5834 12.4685 17.5313 10.4165 15 10.4165C12.4687 10.4165 10.4167 12.4685 10.4167 14.9998C10.4167 17.5311 12.4687 19.5832 15 19.5832Z" fill="#F54A45"/>
+<path d="M14.7916 12.9165C14.6766 12.9165 14.5833 13.0098 14.5833 13.1248V15.6248C14.5833 15.7399 14.6766 15.8332 14.7916 15.8332H15.2083C15.3234 15.8332 15.4166 15.7399 15.4166 15.6248V13.1248C15.4166 13.0098 15.3234 12.9165 15.2083 12.9165H14.7916Z" fill="white"/>
+<path d="M14.7916 16.2498C14.6766 16.2498 14.5833 16.3431 14.5833 16.4582V16.8748C14.5833 16.9899 14.6766 17.0832 14.7916 17.0832H15.2083C15.3234 17.0832 15.4166 16.9899 15.4166 16.8748V16.4582C15.4166 16.3431 15.3234 16.2498 15.2083 16.2498H14.7916Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3097_94188">
+<rect width="10" height="10" fill="white" transform="translate(10 10)"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/icons/svg/de-ds-move.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0019 1.77734C14.3394 1.77734 14.6183 2.02815 14.6625 2.35355L14.6686 2.44401V13.5614C14.6686 13.8989 14.4177 14.1779 14.0923 14.222L14.0019 14.2281H9.89143C9.73034 14.2281 9.59595 14.1138 9.56486 13.962L9.55809 13.8948V13.2281C9.55809 13.067 9.67235 12.9326 9.82425 12.9015L9.89143 12.8948H13.3352V3.11068H4.40539L4.40628 6.11325C4.40628 6.29735 4.25704 6.44659 4.07294 6.44659H3.40628C3.22218 6.44659 3.07294 6.29735 3.07294 6.11325V2.11068C3.07294 1.94959 3.1872 1.8152 3.3391 1.78412L3.40628 1.77734H14.0019ZM6.64089 7.59282C6.739 7.59282 6.83394 7.6276 6.90884 7.69097L9.70369 10.0559C9.87858 10.2038 9.90039 10.4656 9.7524 10.6405C9.73754 10.658 9.72125 10.6743 9.70369 10.6892L6.90884 13.0541C6.73395 13.202 6.47221 13.1802 6.32422 13.0053C6.26085 12.9304 6.22607 12.8355 6.22607 12.7374L6.22656 11.1164L2.11141 11.1164C1.92731 11.1164 1.77808 10.9672 1.77808 10.7831V10.1164C1.77808 9.93231 1.92731 9.78307 2.11141 9.78307L6.22656 9.78305L6.22607 8.00764C6.22607 7.77854 6.41179 7.59282 6.64089 7.59282Z" fill="#646A73"/>
+</svg>

frontend/src/icons/svg/de-ds-rename.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35408 11.2487H7.62476L14.3788 4.49447C14.6109 4.26241 14.6114 3.88631 14.3799 3.65363L12.3343 1.59723C12.1018 1.36473 11.7248 1.36473 11.4923 1.59723L11.0724 2.01709L11.0741 2.01875L4.75873 8.38268V10.6534C4.75873 10.9822 5.02528 11.2487 5.35408 11.2487ZM11.8944 2.84338L13.1001 4.0554L12.0798 5.07666L10.8804 3.87724L11.8944 2.84338ZM11.2383 5.91901L7.12259 10.0386H7.12077L5.9688 8.88486L10.0466 4.72734L11.2383 5.91901Z" fill="#646A73"/>
+<path d="M8.76322 2.31588H2.44348C2.07815 2.31588 1.78198 2.61204 1.78198 2.97737V13.5614C1.78198 13.9267 2.07815 14.2229 2.44348 14.2229H13.0275C13.3928 14.2229 13.689 13.9267 13.689 13.5614V7.16128L12.3577 8.5006V12.898H3.11322V3.64068H7.46248L8.76322 2.31588Z" fill="#646A73"/>
+</svg>

frontend/src/icons/svg/de-ds-trash.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33325 2.66634V1.99967C5.33325 1.63148 5.63173 1.33301 5.99992 1.33301H9.99992C10.3681 1.33301 10.6666 1.63148 10.6666 1.99967V2.66634H14.2393C14.3879 2.66634 14.4417 2.68181 14.4961 2.71086C14.5504 2.73991 14.593 2.78255 14.6221 2.83687C14.6511 2.89119 14.6666 2.94507 14.6666 3.09366V3.57236C14.6666 3.72095 14.6511 3.77483 14.6221 3.82915C14.593 3.88347 14.5504 3.9261 14.4961 3.95515C14.4417 3.9842 14.3879 3.99967 14.2393 3.99967H13.3333V13.9997C13.3333 14.3679 13.0348 14.6663 12.6666 14.6663H3.33325C2.96506 14.6663 2.66659 14.3679 2.66659 13.9997V3.99967H1.76057C1.61198 3.99967 1.5581 3.9842 1.50378 3.95515C1.44946 3.9261 1.40683 3.88347 1.37777 3.82915C1.34872 3.77483 1.33325 3.72095 1.33325 3.57236V3.09366C1.33325 2.94507 1.34872 2.89119 1.37777 2.83687C1.40683 2.78255 1.44946 2.73991 1.50378 2.71086C1.5581 2.68181 1.61198 2.66634 1.76057 2.66634H5.33325ZM3.99992 3.99967V13.333H11.9999V3.99967H3.99992ZM6.33325 5.33301H6.99992C7.18401 5.33301 7.33325 5.48225 7.33325 5.66634V11.6663C7.33325 11.8504 7.18401 11.9997 6.99992 11.9997H6.33325C6.14916 11.9997 5.99992 11.8504 5.99992 11.6663V5.66634C5.99992 5.48225 6.14916 5.33301 6.33325 5.33301ZM8.99992 5.33301H9.66659C9.85068 5.33301 9.99992 5.48225 9.99992 5.66634V11.6663C9.99992 11.8504 9.85068 11.9997 9.66659 11.9997H8.99992C8.81582 11.9997 8.66659 11.8504 8.66659 11.6663V5.66634C8.66659 5.48225 8.81582 5.33301 8.99992 5.33301Z" fill="#646A73"/>
+</svg>

frontend/src/styles/index.scss

@@ -1405,6 +1405,7 @@ div:focus {
   width: 100%;
   padding: 24px;
   right: 0;
+  z-index: 1;
   bottom: 0;
   text-align: right;
   background-color: #fff;
@@ -1478,7 +1479,8 @@ div:focus {
       background: rgba(31, 35, 41, 0.1);
     }
 
-    i {
+    .el-icon-more,
+    .el-icon-plus {
       width: 24px;
       height: 24px;
       line-height: 24px;
@@ -1488,12 +1490,14 @@ div:focus {
       cursor: pointer;
     }
 
-    i:hover {
+    .el-icon-more:hover,
+    .el-icon-plus:hover {
       background: rgba(31, 35, 41, 0.1);
       border-radius: 4px;
     }
 
-    i:active {
+    .el-icon-more:active,
+    .el-icon-plus:active {
       background: rgba(31, 35, 41, 0.2);
       border-radius: 4px;
     }

frontend/src/views/dataset/add/AddApi.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dataset-api">
+  <div class="dataset-api" v-loading="loading">
     <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
       <i class="el-icon-d-arrow-right" />
     </p>
@@ -154,14 +154,19 @@
 import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
 import cancelMix from './cancelMix'
+import msgCfm from '@/components/msgCfm/index'
 
 export default {
   name: 'AddApi',
-  mixins: [cancelMix],
+  mixins: [cancelMix, msgCfm],
   props: {
     param: {
       type: Object,
       default: null
+    },
+    nameList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -203,6 +208,10 @@ export default {
     }
   },
   watch: {
+    checkTableList(val) {
+      this.validateName()
+      this.$emit('setTableNum', val.length)
+    },
     dataSource(val) {
       if (val) {
         this.checkTableList = []
@@ -258,14 +267,6 @@ export default {
   },
   methods: {
     nameExsitValidator(activeIndex) {
-      if (
-        !this.nameList ||
-        this.nameList.length === 0 ||
-        !this.checkDatasetName.includes(this.tableData[activeIndex].datasetName)
-      ) {
-        this.tableData[activeIndex].nameExsit = false
-        return
-      }
       this.tableData[activeIndex].nameExsit =
         this.nameList
           .concat(this.checkDatasetName)
@@ -276,6 +277,8 @@ export default {
       this.tableData.forEach((ele, index) => {
         if (this.checkDatasetName.includes(ele.datasetName)) {
           this.nameExsitValidator(index)
+        } else {
+          ele.nameExsit = false;
         }
       })
     },
@@ -335,7 +338,7 @@ export default {
       const tables = []
       const mode = this.mode
       const syncType = this.syncType
-      this.checkTableList.forEach(function(name) {
+      this.checkTableList.forEach((name) => {
         const datasetName = this.tableData.find(
           (ele) => ele.name === name
         ).datasetName

frontend/src/views/dataset/add/AddExcel.vue

@@ -215,7 +215,11 @@ export default {
     nameList: {
       type: Array,
       default: () => []
-    }
+    },
+    originName: {
+      type: String,
+      default: ''
+    },
   },
   data() {
     return {
@@ -255,6 +259,11 @@ export default {
       defaultCheckedKeys: []
     }
   },
+  computed: {
+    nameListCopy() {
+      return this.nameList.filter((ele) => ele !== this.originName)
+    }
+  },
   mounted() {
     window.onresize = () => {
       this.calHeight()
@@ -285,8 +294,8 @@ export default {
       this.validateName()
       const labelList = this.$refs.tree
         .getCheckedNodes()
-        .map((ele) => ele.excelLable)
+        .map((ele) => ele.id)
-      const excelList = this.excelData.map((ele) => ele.excelLable)
+      const excelList = this.excelData.map((ele) => ele.id)
       this.$emit(
         'setTableNum',
         labelList.filter((ele) => !excelList.includes(ele)).length
@@ -296,7 +305,7 @@ export default {
       this.$set(
         ele,
         'nameExsit',
-        this.nameList
+        this.nameListCopy
           .concat(checkList)
           .filter((name) => name === ele.datasetName).length > 1
       )
@@ -379,7 +388,7 @@ export default {
       this.sheets = []
       this.data = []
       const datas = this.data
-      this.$refs.plxTable.reloadData(datas)
+      this.$refs.plxTable?.reloadData(datas)
       this.fileList = []
       this.uploading = false
       this.$message({

frontend/src/views/dataset/add/AddSQL.vue

@@ -105,7 +105,7 @@
               "
             />
           </p>
-          <p v-if="dataSource">
+          <p v-if="dataSource" style="margin-top: 16px">
             <span>
               <svg-icon icon-class="db-de" />
               {{ (showTable && dataTable) || selectedDatasource.name }}
@@ -527,7 +527,15 @@ export default {
         .removeEventListener('mousemove', this.caculateHeight)
     },
     caculateHeight(e) {
-      this.sqlHeight = e.pageY - 56
+      if (e.pageY - 120 < 248) {
+        this.sqlHeight = 248
+        return
+      }
+      if (e.pageY - 120 > document.documentElement.clientHeight - 170) {
+        this.sqlHeight = document.documentElement.clientHeight - 170
+        return
+      }
+      this.sqlHeight = e.pageY - 120
     },
     kettleState() {
       isKettleRunning().then((res) => {
@@ -551,13 +559,15 @@ export default {
         }
       }
       this.tableLoading = true
-      post('/datasource/getTables/' + this.dataSource, {}).then((response) => {
+      post('/datasource/getTables/' + this.dataSource, {})
-        this.tableData = response.data
+        .then((response) => {
-      }).finally(() => {
+          this.tableData = response.data
-        this.tableLoading = false
+        })
-      })
+        .finally(() => {
+          this.tableLoading = false
+        })
     },
-    calHeight: _.debounce(function() {
+    calHeight: _.debounce(function () {
       const sqlHeight = Math.max(this.sqlHeight, 248)
       const currentHeight = document.documentElement.clientHeight
       this.height = currentHeight - sqlHeight - 56 - 54 - 36 - 64
@@ -712,6 +722,7 @@ export default {
     saveVariable() {
       this.variables = JSON.parse(JSON.stringify(this.variablesTmp)).concat()
       this.showVariableMgm = false
+      this.openMessageSuccess('参数设置成功')
     },
     variableTypeChange(row) {
       row.defaultValue = ''
@@ -847,6 +858,14 @@ export default {
           align-items: center;
           padding-left: 4px;
 
+          &.field {
+            color: var(--deTextPrimary, #1f2329);
+          }
+
+          &.field:hover {
+            background: none;
+          }
+
           &:hover {
             background: rgba(31, 35, 41, 0.1);
           }

frontend/src/views/dataset/add/AddUnion.vue

@@ -197,6 +197,14 @@ export default {
         .removeEventListener('mousemove', this.caculateHeight)
     },
     caculateHeight(e) {
+      if (e.pageY - 56 < 298) {
+        this.unionHeight = 298
+        return
+      }
+      if (e.pageY - 56 > document.documentElement.clientHeight - 100) {
+        this.unionHeight = document.documentElement.clientHeight - 100
+        return
+      }
       this.unionHeight = e.pageY - 56
     },
     save() {

frontend/src/views/dataset/common/DatasetDetail.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-if="tabStatus" class="info-tab">
     <div v-if="type === 'chart' && detail.chart" class="info-card">
+      <div class="title-type">
+        {{ $t('chart.datalist') }}
+      </div>
       <div class="info-item">
         <p class="info-title">
           {{ $t('chart.datalist') + $t('desearchbutton.text') }}
@@ -28,6 +31,9 @@
     </div>
 
     <div v-if="detail.table" class="info-card">
+      <div class="title-type">
+        {{ $t('dataset.datalist') }}
+      </div>
       <div class="info-item">
         <p class="info-title">
           {{ $t('dataset.datalist') + $t('desearchbutton.text') }}
@@ -51,6 +57,7 @@
         <p v-if="detail.table.type === 'union'" class="info-content">
           {{ $t('dataset.union_data') }}
         </p>
+        <p v-if="detail.table.type === 'api'" class="info-content">Api</p>
       </div>
       <div v-show="detail.table.type === 'db'" class="info-item">
         <p class="info-title">{{ $t('dataset.table') }}</p>
@@ -81,6 +88,9 @@
     </div>
 
     <div v-if="detail.datasource" class="info-card">
+      <div class="title-type">
+        {{ $t('datasource.datasource') }}
+      </div>
       <div class="info-item">
         <p class="info-title">
           {{ $t('datasource.datasource') + $t('desearchbutton.text') }}
@@ -93,38 +103,8 @@
       </div>
       <div class="info-item">
         <p class="info-title">{{ $t('datasource.type') }}</p>
-        <p v-if="detail.datasource.type === 'mysql'" class="info-content">
+        <p class="info-content">
-          MySQL
+          {{ detail.datasource.type }}
-        </p>
-        <p v-if="detail.datasource.type === 'sqlServer'" class="info-content">
-          SQL Server
-        </p>
-        <p v-if="detail.datasource.type === 'oracle'" class="info-content">
-          Oracle
-        </p>
-        <p v-if="detail.datasource.type === 'hive'" class="info-content">
-          Apache Hive
-        </p>
-        <p v-if="detail.datasource.type === 'pg'" class="info-content">
-          PostgreSQL
-        </p>
-        <p v-if="detail.datasource.type === 'es'" class="info-content">
-          Elasticsearch
-        </p>
-        <p v-if="detail.datasource.type === 'mariadb'" class="info-content">
-          MariaDB
-        </p>
-        <p v-if="detail.datasource.type === 'ds_doris'" class="info-content">
-          Doris
-        </p>
-        <p v-if="detail.datasource.type === 'ck'" class="info-content">
-          ClickHouse
-        </p>
-        <p v-if="detail.datasource.type === 'redshift'" class="info-content">
-          AWS Redshift
-        </p>
-        <p v-if="detail.datasource.type === 'mongo'" class="info-content">
-          MongoDB
         </p>
       </div>
       <div class="info-item">
@@ -222,18 +202,26 @@ export default {
 
 <style lang="scss" scoped>
 .info-tab {
-  padding: 0 4;
   width: 100%;
+  padding: 0 4px;
+  font-family: PingFang SC;
   box-sizing: border-box;
 
+  .title-type {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: var(--deTextPrimary, #1f2329);
+  }
+
   .info-card {
     padding-bottom: 4px;
     border-bottom: 1px solid rgba(31, 35, 41, 0.15);
+    margin-bottom: 12px;
     .info-item {
-      margin: 6px 0;
       font-family: PingFang SC;
       font-weight: 400;
-      margin-bottom: 8px;
+      margin-bottom: 8px !important;
       p {
         margin: 0;
       }
@@ -241,7 +229,7 @@ export default {
     .info-title {
       font-size: 12px;
       color: var(--deTextPrimary, #1f2329);
-      margin-bottom: 4px;
+      margin-bottom: 4px !important;
     }
     .info-content {
       font-size: 14px;

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

@@ -3,8 +3,8 @@
     <el-row style="margin: 6px 0 16px 0">
       <el-col :span="12">
         <deBtn
-          type="primary"
+          secondary
-          icon="el-icon-circle-plus-outline"
+          icon="el-icon-plus"
           @click="() => addTask()"
           >{{ $t('dataset.add_task') }}</deBtn
         >
@@ -75,13 +75,6 @@
               >{{
                 $t(`dataset.${scope.row.lastExecStatus.toLocaleLowerCase()}`)
               }}
-              <svg-icon
-                style="cursor: pointer"
-                v-if="scope.row.lastExecStatus === 'Error'"
-                @click="showErrorMassage(scope.row.msg)"
-                icon-class="icon-maybe"
-                class="field-icon-location"
-              />
             </span>
             <span v-else>-</span>
           </template>
@@ -242,7 +235,6 @@
               <span v-if="scope.row.status === 'Error'" style="color: red">
                 <el-link
                   type="danger"
-                  style="font-size: 12px"
                   @click="showErrorMassage(scope.row.info)"
                   >{{ $t('dataset.error') }}</el-link
                 >
@@ -264,9 +256,9 @@
       </el-row>
     </el-drawer>
     <el-drawer
-      :title="$t('dataset.add_task')"
+      :title="header"
       :visible.sync="update_task"
-      custom-class="update-drawer-task"
+      custom-class="user-drawer update-drawer-task"
       size="680px"
       v-closePress
       direction="rtl"
@@ -277,6 +269,7 @@
         :model="taskForm"
         label-width="100px"
         class="de-form-item"
+        :disabled="disableForm"
         :rules="taskFormRules"
       >
         <el-form-item :label="$t('dataset.task_name')" prop="name">
@@ -444,7 +437,7 @@
       </el-form>
       <div class="de-foot">
         <deBtn secondary @click="closeTask">{{ $t('dataset.cancel') }}</deBtn>
-        <deBtn type="primary" @click="saveTask(taskForm)">{{
+        <deBtn v-if="!disableForm" type="primary" @click="saveTask(taskForm)">{{
           $t('dataset.confirm')
         }}</deBtn>
       </div>
@@ -506,6 +499,7 @@ export default {
       show_error_massage: false,
       update_task_dialog_title: '',
       error_massage: '',
+      disableForm: false,
       taskForm: {
         name: '',
         type: 'all_scope',
@@ -600,7 +594,14 @@ export default {
   computed: {
     codemirror() {
       return this.$refs.myCm.codemirror
-    }
+    },
+    header() {
+      return this.disableForm
+        ? "查看任务"
+        : this.taskForm.id
+        ? "编辑任务"
+        : this.$t('dataset.add_task');
+    },
   },
   watch: {
     table: {
@@ -705,6 +706,7 @@ export default {
       if (!task) {
         // add
         this.resetTaskForm()
+        this.disableForm = false
         this.taskForm.name =
           this.table.name + ' ' + this.$t('dataset.task_update')
         this.taskForm.startTime = new Date()
@@ -712,7 +714,11 @@ export default {
       } else {
         // update
         this.taskForm = JSON.parse(JSON.stringify(task))
-        this.taskForm.extraData = JSON.parse(this.taskForm.extraData)
+        this.taskForm.extraData = JSON.parse(this.taskForm.extraData) || {
+          simple_cron_type: 'hour',
+          simple_cron_value: 1
+        }
+        this.showCron = this.taskForm.rate === 'CRON'
         this.update_task_dialog_title = this.$t('dataset.task_edit_title')
       }
       this.update_task = true
@@ -739,16 +745,15 @@ export default {
     handleSizeChange(pageSize) {
       this.paginationConfig.currentPage = 1
       this.paginationConfig.pageSize = pageSize
-      this.search()
+      this.listTask()
     },
     handleCurrentChange(currentPage) {
       this.paginationConfig.currentPage = currentPage
-      this.search()
+      this.listTask()
     },
     initSearch() {
       this.handleCurrentChange(1)
     },
-    search() {},
     handleCommand(key, row) {
       switch (key) {
         case 'exec':
@@ -776,7 +781,7 @@ export default {
       )
         .then(() => {
           post('/dataset/task/execTask', task).then((response) => {
-            this.initSearch(true)
+            this.initSearch()
           })
         })
         .catch(() => {})
@@ -814,6 +819,7 @@ export default {
       this.handlerConfirm(options)
     },
     selectDataset(row) {
+      this.disableForm = this.disableEdit(row);
       this.addTask(row)
     },
     changeTaskStatus(task) {
@@ -1023,6 +1029,7 @@ export default {
           simple_cron_value: 1
         }
       }
+      this.sql = ''
     },
     showSQL(val) {
       this.sql = val || ''
@@ -1088,6 +1095,8 @@ export default {
 .update-drawer-task {
   .el-drawer__body {
     padding: 24px;
+    padding-bottom: 80px;
+    position: unset;
   }
   .simple-cron {
     display: flex;

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

@@ -5,12 +5,14 @@
         <span class="title-text" style="line-height: 26px">
           {{ table.name }}
         </span>
-        <span v-if="table.mode === 0" class="de-tag primary">{{
+        <template v-if="['db', 'sql'].includes(param.modelInnerType)">
-          $t('dataset.direct_connect')
+          <span v-if="table.mode === 0" class="de-tag primary">{{
-        }}</span>
+            $t('dataset.direct_connect')
-        <span v-if="table.mode === 1" class="de-tag warning">{{
+          }}</span>
-          $t('dataset.sync_data')
+          <span v-if="table.mode === 1" class="de-tag warning">{{
-        }}</span>
+            $t('dataset.sync_data')
+          }}</span>
+        </template>
         <span
           v-if="sycnStatus === 'Underway'"
           class="blue-color"
@@ -102,9 +104,7 @@
       <el-tab-pane
         v-if="
           table.mode === 1 &&
-          (table.type === 'db' ||
+          (table.type === 'db' || table.type === 'sql' || table.type === 'api')
-            table.type === 'sql' ||
-            table.type === 'api')
         "
         :label="$t('dataset.update_info')"
         name="updateInfo"

frontend/src/views/dataset/form.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="de-dataset-form">
-    <div class="top" v-if="table.id && !createDataset">
+    <div class="top">
       <span class="name">
         <i @click="back" class="el-icon-arrow-left"></i>
         <svg-icon
@@ -35,94 +35,13 @@
     <div class="container">
       <component
         @setTableNum="(val) => (tableNum = val)"
-        v-if="table.name || !createDataset"
         :param="table"
         :is="component"
         ref="addDataset"
+        :originName="originName"
         :nameList="nameList"
       />
     </div>
-
-    <el-dialog
-      :title="dialogTitle"
-      class="de-dialog-form"
-      :visible.sync="createDataset"
-      width="600px"
-      v-loading="loading"
-      :before-close="back"
-    >
-      <el-form
-        ref="datasetForm"
-        class="de-form-item"
-        :model="datasetForm"
-        :rules="datasetFormRules"
-      >
-        <el-form-item
-          v-if="datasetFormRules.name"
-          :label="$t('dataset.name')"
-          prop="name"
-        >
-          <el-input v-model="datasetForm.name" />
-        </el-form-item>
-        <el-form-item :label="$t('deDataset.folder')" prop="id">
-          <el-popover
-            placement="bottom"
-            popper-class="user-popper dataset-filed"
-            width="552"
-            trigger="click"
-          >
-            <el-tree
-              :data="tData"
-              ref="tree"
-              node-key="id"
-              class="de-tree"
-              :expand-on-click-node="false"
-              highlight-current
-              :filter-node-method="filterNode"
-              @node-click="nodeClick"
-            >
-              <span slot-scope="{ data }" class="custom-tree-node-dataset">
-                <span v-if="data.type === 'group'">
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
-                </span>
-                <span
-                  style="
-                    margin-left: 6px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                  "
-                  :title="data.name"
-                  >{{ data.name }}</span
-                >
-              </span>
-            </el-tree>
-            <el-select
-              v-model="datasetForm.id"
-              slot="reference"
-              filterable
-              popper-class="tree-select-dataset"
-              style="width: 100%"
-              :filter-method="filterMethod"
-              :placeholder="$t('commons.please_select')"
-            >
-              <el-option
-                v-for="item in selectDatasets"
-                :key="item.label"
-                :label="item.label"
-                :value="item.id"
-              />
-            </el-select>
-          </el-popover>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <deBtn secondary @click="back">{{ $t('dataset.cancel') }}</deBtn>
-        <deBtn type="primary" @click="saveDataset"
-          >{{ $t('dataset.confirm') }}
-        </deBtn>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -133,13 +52,12 @@ import AddSQL from './add/AddSQL'
 import AddExcel from './add/AddExcel'
 import AddUnion from '@/views/dataset/add/AddUnion'
 import { post } from '@/api/dataset/dataset'
-import { groupTree } from '@/api/dataset/dataset'
+import { datasetTypeMap } from './group/options'
 export default {
   name: 'DatasetForm',
   components: { AddDB, AddSQL, AddExcel, AddApi, AddUnion },
   data() {
     return {
-      sceneId: '',
       originName: '',
       tableNum: 0,
       showInput: false,
@@ -147,9 +65,6 @@ export default {
       loading: false,
       selectDatasets: [],
       tData: [],
-      filterText: '',
-      dialogTitle: '',
-      createDataset: false,
       datasetType: '',
       component: '',
       table: {},
@@ -158,7 +73,6 @@ export default {
       datasetForm: {
         id: '',
         name: '',
-        sceneName: ''
       },
       datasetFormRules: {
         name: [
@@ -197,15 +111,20 @@ export default {
     }
   },
   created() {
-    const { datasetType, sceneId, id, editType } = this.$route.query
+    const fromGroup = this.$route.params.fromGroup
+    const routeInfo = fromGroup ? this.$route.params : this.$route.query
+    const { datasetType, sceneId, id, editType, name } =  routeInfo
     this.datasetType = datasetType
     this.editType = editType
-    this.sceneId = sceneId
     if (id) {
       this.initTable(id)
     } else {
-      this.tree(sceneId)
+      const name = name || this.$t('commons.create') + this.$t(datasetTypeMap[datasetType]) + this.$t('auth.datasetAuth')
-      this.createDataset = true
+      this.table = {
+        name,
+        id: sceneId
+      }
+      this.getDatasetNameFromGroup(sceneId, name)
     }
     this.switchComponent(datasetType)
   },
@@ -217,10 +136,13 @@ export default {
       this.nameExsitValidator()
       this.showInput = this.nameExsit
     },
-    getDatasetNameFromGroup(sceneId) {
+    getDatasetNameFromGroup(sceneId, name) {
       post(`/dataset/table/getDatasetNameFromGroup/${sceneId}`, null).then(
         (res) => {
           this.nameList = res.data
+          if (name && ['sql', 'union'].includes(this.datasetType)) {
+            this.nameBlur()
+          }
         }
       )
     },
@@ -238,53 +160,6 @@ export default {
         this.showInput = true
       }
     },
-    nodeClick({ id, label }) {
-      this.selectDatasets = [
-        {
-          id,
-          label
-        }
-      ]
-      this.$nextTick(() => {
-        this.datasetForm.id = id
-      })
-      this.getDatasetNameFromGroup(id)
-    },
-    tree(sceneId) {
-      this.loading = true
-      groupTree({
-        name: '',
-        pid: '0',
-        level: 0,
-        type: 'group',
-        children: [],
-        sort: 'type desc,name asc'
-      }).then((res) => {
-        this.tData = res.data
-        if (sceneId) {
-          this.dfsTree(res.data, sceneId)
-        }
-        this.loading = false
-      })
-    },
-    dfsTree(arr, sceneId) {
-      arr.some((ele) => {
-        if (sceneId === ele.id) {
-          this.nodeClick(ele)
-        } else if (ele.children?.length) {
-          this.dfsTree(ele.children, sceneId)
-        }
-        return false
-      })
-    },
-    filterMethod(val) {
-      if (!val) this.$refs.tree.filter(val)
-      this.$refs.tree.filter(val)
-    },
-    filterNode(value, data) {
-      if (!value) return true
-      return data.name.indexOf(value) !== -1
-    },
     nameRepeat(value) {
       if (!this.nameList || this.nameList.length === 0) {
         return false
@@ -307,19 +182,6 @@ export default {
         (name) => name === this.table.name && name !== this.originName
       )
     },
-    saveDataset() {
-      this.$refs.datasetForm.validate((result) => {
-        if (result) {
-          const { name, id } = this.datasetForm
-          this.table = {
-            id,
-            name
-          }
-          this.createDataset = false
-          this.getDatasetNameFromGroup(id)
-        }
-      })
-    },
     initTable(id) {
       post('/dataset/table/getWithPermission/' + id, null)
         .then((response) => {
@@ -339,36 +201,25 @@ export default {
         .catch(() => {})
     },
     switchComponent(c) {
-      let type = ''
-      if (['db', 'excel', 'api'].includes(c)) {
-        this.$delete(this.datasetFormRules, 'name')
-      }
       switch (c) {
         case 'db':
-          type = 'deDataset.database'
           this.component = AddDB
           break
         case 'sql':
-          type = 'SQL'
           this.component = AddSQL
           break
         case 'excel':
-          type = 'EXCEL'
           this.component = AddExcel
           break
         case 'union':
-          type = 'dataset.union'
           this.component = AddUnion
           break
         case 'api':
-          type = 'API'
           this.component = AddApi
           break
         default:
           break
       }
-      this.dialogTitle =
-        this.$t('commons.create') + this.$t(type) + this.$t('auth.datasetAuth')
     }
   }
 }

frontend/src/views/dataset/group/CreatDsGroup.vue

@@ -0,0 +1,230 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    class="de-dialog-form"
+    :visible.sync="createDataset"
+    width="600px"
+    v-loading="loading"
+    :before-close="resetForm"
+  >
+    <el-form
+      ref="datasetForm"
+      class="de-form-item"
+      :model="datasetForm"
+      :rules="datasetFormRules"
+    >
+      <el-form-item v-if="datasetFormRules.name" :label="$t('dataset.name')" prop="name">
+        <el-input v-model="datasetForm.name" />
+      </el-form-item>
+      <el-form-item :label="$t('deDataset.folder')" prop="id">
+        <el-popover
+          placement="bottom"
+          popper-class="user-popper dataset-filed"
+          width="552"
+          trigger="click"
+        >
+          <el-tree
+            :data="tData"
+            ref="tree"
+            node-key="id"
+            class="de-tree"
+            :expand-on-click-node="false"
+            highlight-current
+            :filter-node-method="filterNode"
+            @node-click="nodeClick"
+          >
+            <span slot-scope="{ data }" class="custom-tree-node-dataset">
+              <span v-if="data.type === 'group'">
+                <svg-icon icon-class="scene" class="ds-icon-scene" />
+              </span>
+              <span
+                style="
+                  margin-left: 6px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                "
+                :title="data.name"
+                >{{ data.name }}</span
+              >
+            </span>
+          </el-tree>
+          <el-select
+            v-model="datasetForm.id"
+            slot="reference"
+            filterable
+            popper-class="tree-select-dataset"
+            style="width: 100%"
+            :filter-method="filterMethod"
+            :placeholder="$t('commons.please_select')"
+          >
+            <el-option
+              v-for="item in selectDatasets"
+              :key="item.label"
+              :label="item.label"
+              :value="item.id"
+            />
+          </el-select>
+        </el-popover>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <deBtn secondary @click="resetForm">{{ $t('dataset.cancel') }}</deBtn>
+      <deBtn type="primary" @click="saveDataset"
+        >{{ $t('dataset.confirm') }}
+      </deBtn>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+import { datasetTypeMap } from './options'
+import { groupTree } from '@/api/dataset/dataset'
+export default {
+  data() {
+    return {
+      selectDatasets: [],
+      createDataset: false,
+      tData: [],
+      loading: false,
+      nameList: [],
+      datasetForm: {
+        id: '',
+        name: ''
+      },
+      datasetType: '',
+      dialogTitle: '',
+      datasetFormRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t('commons.input_content'),
+            trigger: 'change'
+          },
+          {
+            max: 50,
+            message: this.$t('commons.char_can_not_more_50'),
+            trigger: 'change'
+          },
+          { required: true, trigger: 'blur', validator: this.nameValidator }
+        ],
+        id: [
+          {
+            required: true,
+            message: this.$t('fu.search_bar.please_select'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    saveDataset() {
+      this.$refs.datasetForm.validate((result) => {
+        if (result) {
+          const { name, id } = this.datasetForm
+          this.createDataset = false
+          this.$router.push({
+            name: 'dataset-form',
+            params: {
+              datasetType: this.datasetType,
+              sceneId: id,
+              fromGroup: true,
+              name
+            }
+          })
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.datasetForm.clearValidate()
+      this.datasetForm = {
+        id: '',
+        name: ''
+      }
+      this.createDataset = false
+    },
+    init(type) {
+      this.tree()
+      if (['db', 'excel', 'api'].includes(type)) {
+        this.$delete(this.datasetFormRules, 'name')
+      }
+      this.datasetType = type
+      this.createDataset = true
+      this.dialogTitle =
+        this.$t('commons.create') +
+        this.$t(datasetTypeMap[type]) +
+        this.$t('auth.datasetAuth')
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    filterMethod(val) {
+      if (!val) this.$refs.tree.filter(val)
+      this.$refs.tree.filter(val)
+    },
+    nameRepeat(value) {
+      if (!this.nameList || this.nameList.length === 0) {
+        return false
+      }
+      return this.nameList.some((name) => name === value)
+    },
+    nameValidator(rule, value, callback) {
+      if (this.nameRepeat(value)) {
+        callback(new Error(this.$t('deDataset.already_exists')))
+      } else {
+        callback()
+      }
+    },
+    getDatasetNameFromGroup(sceneId) {
+      post(`/dataset/table/getDatasetNameFromGroup/${sceneId}`, null).then(
+        (res) => {
+          this.nameList = res.data
+        }
+      )
+    },
+    tree() {
+      this.loading = true
+      groupTree({
+        name: '',
+        pid: '0',
+        level: 0,
+        type: 'group',
+        children: [],
+        sort: 'type desc,name asc'
+      })
+        .then((res) => {
+          this.tData = res.data
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    nodeClick({ id, label }) {
+      this.selectDatasets = [
+        {
+          id,
+          label
+        }
+      ]
+      this.$nextTick(() => {
+        this.datasetForm.id = id
+      })
+      this.getDatasetNameFromGroup(id)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.dataset-filed {
+  height: 400px;
+  overflow-y: auto;
+}
+
+.tree-select-dataset {
+  display: none;
+}
+</style>

frontend/src/views/dataset/group/Group.vue

@@ -167,15 +167,17 @@
                     </span>
                     <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
                       <el-dropdown-item
-                        icon="el-icon-edit-outline"
                         command="rename"
                       >
+                      <svg-icon icon-class="de-ds-rename" />
                         {{ $t('dataset.rename') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-right" command="move">
+                      <el-dropdown-item command="move">
+                        <svg-icon icon-class="de-ds-move" />
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-delete" command="delete">
+                      <el-dropdown-item command="delete">
+                        <svg-icon icon-class="de-ds-trash" />
                         {{ $t('dataset.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -263,18 +265,19 @@
                     </span>
                     <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
                       <el-dropdown-item
-                        icon="el-icon-edit-outline"
                         command="editTable"
                       >
+                      <svg-icon icon-class="de-ds-rename" />
                         {{ $t('dataset.rename') }}
                       </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-right" command="moveDs">
+                      <el-dropdown-item command="moveDs">
+                         <svg-icon icon-class="de-ds-move" />
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
                       <el-dropdown-item
-                        icon="el-icon-delete"
                         command="deleteTable"
                       >
+                      <svg-icon icon-class="de-ds-trash" />
                         {{ $t('dataset.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -297,6 +300,7 @@
           class="de-form-item"
           :model="groupForm"
           :rules="groupFormRules"
+          :before-close="close"
           @submit.native.prevent
           @keypress.enter.native="saveGroup(groupForm)"
         >
@@ -390,6 +394,9 @@
         </deBtn>
       </div>
     </el-drawer>
+
+    <!-- 新增数据集文件夹 -->
+    <CreatDsGroup ref="CreatDsGroup" />
   </el-col>
 </template>
 
@@ -405,6 +412,7 @@ import {
   alter
 } from '@/api/dataset/dataset'
 import GroupMoveSelector from './GroupMoveSelector'
+import CreatDsGroup from './CreatDsGroup'
 import { queryAuthModel } from '@/api/authModel/authModel'
 import { engineMode } from '@/api/system/engine'
 import _ from 'lodash'
@@ -412,7 +420,7 @@ import msgCfm from '@/components/msgCfm/index'
 
 export default {
   name: 'Group',
-  components: { GroupMoveSelector },
+  components: { GroupMoveSelector, CreatDsGroup },
   mixins: [msgCfm],
   props: {
     saveStatus: {
@@ -616,7 +624,7 @@ export default {
         this.add('group')
         return
       }
-      this.dfsTdata(this.tData, param.id)
+      this.fileList = (param?.children || []).map((ele) => ele.label)
       this.add(param.modelInnerType)
       this.groupForm.pid = param.id
       this.groupForm.level = param.level + 1
@@ -831,7 +839,7 @@ export default {
         return
       }
       this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
-      if (!this.tData.length) {
+      if (!this.tData?.length) {
         this.openMessageSuccess('deDataset.new_folder_first', 'error')
         return
       }
@@ -856,6 +864,11 @@ export default {
           break
       }
 
+      if (!param.id) {
+        this.$refs.CreatDsGroup.init(datasetType)
+        return
+      }
+
       this.$router.push({
         path: '/dataset-form',
         query: {
@@ -863,6 +876,7 @@ export default {
           sceneId: param.id
         }
       })
+      
     },
     addData(name) {
       this.$emit('switchComponent', { name: name, param: this.currGroup })
@@ -945,6 +959,7 @@ export default {
         this.closeMoveDs()
         this.expandedArray.push(newSceneId)
         this.treeNode()
+        this.openMessageSuccess('移动成功')
       })
     },
     targetDs(val) {
@@ -1013,7 +1028,7 @@ export default {
 
 <style scoped lang="scss">
 .de-fill-block {
-  margin-left: 35px !important;
+  margin-left: 25px !important;
 }
 
 .custom-tree-container {

frontend/src/views/dataset/group/options.js

@@ -0,0 +1,7 @@
+export const datasetTypeMap = {
+    db: 'deDataset.database',
+    sql: 'SQL',
+    excel: 'EXCEL',
+    union: 'dataset.union',
+    api: 'API',
+}

frontend/src/views/dataset/index.vue

@@ -3,7 +3,7 @@
     v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
   >
     <de-aside-container type="dataset">
-      <group :currentNodeId="param.id" :save-status="saveStatus" @switchComponent="switchComponent" />
+      <group :currentNodeId="currentNodeId" :save-status="saveStatus" @switchComponent="switchComponent" />
     </de-aside-container>
       <de-main-container>
         <component
@@ -45,6 +45,11 @@ export default {
       saveStatus: null
     }
   },
+  computed: {
+    currentNodeId() {
+      return this.param?.id
+    }
+  },
   mounted() {
     removeClass(document.body, 'showRightPanel')
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="de-ds-form">
+  <div class="de-ds-form" v-loading="formLoading">
     <div class="de-ds-top">
       <span class="name">
         <i @click="backToList" class="el-icon-arrow-left"></i>
@@ -359,6 +359,7 @@ export default {
         { id: 'POST', label: 'POST' }
       ],
       loading: false,
+      formLoading: false,
       responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
       api_table_title: '',
       api_step2_active_name: 'first',
@@ -695,10 +696,13 @@ export default {
       })
     },
     method(method, form) {
+      this.formLoading = true
       method(form).then((res) => {
         this.$success(i18n.t('commons.save_success'))
         this.refreshType(form)
         this.backToList()
+      }).finally(() => {
+        this.formLoading = false
       })
     },
     getSchema() {

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

@@ -125,8 +125,8 @@ export default {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  flex-wrap: nowrap;
   display: flex;
+  flex-wrap: wrap;
   box-sizing: border-box;
   .el-empty {
     height: 100%;
@@ -146,6 +146,7 @@ export default {
   align-content: center;
 }
 .is-driver-mgm {
+  height: calc(100vh - 56px);
   background-color: var(--MainBG, #f5f6f7);
   padding: 24px;
   .ms-aside-container,

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

@@ -40,7 +40,14 @@
 
       <el-col class="custom-tree-container de-tree">
         <div class="block">
+          <div v-if="!tData.length && !treeLoading" class="no-tdata">
+            {{ showView === 'Driver' ? '暂无驱动' : '暂无数据源' }}
+            <span @click="() => addFolder()" class="no-tdata-new">{{
+              $t('deDataset.create')
+            }}</span>
+          </div>
           <el-tree
+            v-else
             ref="myDsTree"
             :default-expanded-keys="expandedArray"
             :data="tData"
@@ -64,7 +71,7 @@
                 </span>
                 <span v-if="data.status === 'Error'">
                   <svg-icon
-                    icon-class="exclamationmark"
+                    icon-class="de-ds-error"
                     class="ds-icon-scene"
                   />
                 </span>
@@ -282,6 +289,7 @@ export default {
       dsTypeRelate: false,
       expandedArray: [],
       tData: [],
+      treeLoading: false,
       dsTypes: [],
       dsTypesForDriver: [],
       showSearchInput: false,
@@ -365,15 +373,20 @@ export default {
       this.showSearchInput = false
     },
     queryTreeDatas() {
+      this.treeLoading = true
       if (this.showView === 'Datasource') {
         listDatasource().then((res) => {
           this.tData = this.buildTree(res.data)
-        })
+        }).finally(() => {
+        this.treeLoading = false
+      })
       }
       if (this.showView === 'Driver') {
         listDrivers().then((res) => {
           this.tData = this.buildTree(res.data)
-        })
+        }).finally(() => {
+        this.treeLoading = false
+      })
       }
     },
     datasourceTypes() {
@@ -418,7 +431,7 @@ export default {
         }
       })
     },
-    buildTree(array) {
+    buildTree(array = []) {
       const types = {}
       const newArr = []
       for (let index = 0; index < array.length; index++) {
@@ -630,6 +643,18 @@ export default {
 <style lang="scss" scoped>
 .custom-tree-container {
   margin-top: 16px;
+  .no-tdata {
+    text-align: center;
+    margin-top: 80px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    color: var(--deTextSecondary, #646a73);
+    font-weight: 400;
+    .no-tdata-new {
+      cursor: pointer;
+      color: var(--primary, #3370ff);
+    }
+  }
 }
 .custom-tree-node {
   flex: 1;

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

@@ -2,7 +2,7 @@
   <div class="ds-table de-serach-table">
     <el-row class="top-operate">
       <el-col :span="10">
-        <span class="table-name">{{ params.name }}</span>
+        <span class="table-name-top">{{ params.name }}</span>
       </el-col>
       <el-col :span="14" class="right-user">
         <el-input
@@ -46,13 +46,11 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-drawer
+    <el-dialog
       :title="$t('dataset.detail')"
       :visible.sync="userDrawer"
-      custom-class="user-drawer-task ds-table-drawer"
+      class="de-dialog-form ds-table-drawer"
-      size="840px"
+      width="840px"
-      v-closePress
-      direction="rtl"
     >
       <el-row style="margin-top: 12px" :gutter="24">
         <el-col :span="12">
@@ -89,7 +87,7 @@
       :label="$t('datasource.field_description')">
     </el-table-column>
   </el-table>
-    </el-drawer>
+    </el-dialog>
   </div>
 </template>
 
@@ -168,7 +166,7 @@ export default {
   .mar3 {
     margin-left: -5px;
   }
-  .table-name {
+  .table-name-top {
     font-family: PingFang SC;
     font-size: 16px;
     font-weight: 500;

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

@@ -359,6 +359,7 @@ export default {
           res.data.extraData = JSON.parse(res.data.extraData);
         }
         this.taskForm = res.data;
+        this.showCron = this.taskForm.rate === 'CRON'
         this.disableForm = this.disableEdit();
       });
     },