Merge pull request #3271 from dataease/pr@dev_dataset_bugfix

fix: 创建数据集左侧列表可拉宽 保存数据集校验 数据请求添加loading

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

@@ -1,9 +1,10 @@
 <template>
-  <div class="dataset-api" v-loading="loading">
+  <div class="dataset-api" @mouseup="mouseupDrag" v-loading="loading">
     <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
       <i class="el-icon-d-arrow-right" />
     </p>
-    <div v-show="showLeft" class="table-list">
+    <div v-show="showLeft" @mousedown="mousedownDrag" :style="{ left: LeftWidth + 'px' }" class="drag-left"></div>
+    <div v-show="showLeft" :style="{ width: LeftWidth + 'px' }" class="table-list">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
         <i class="el-icon-d-arrow-left" @click="showLeft = false" />
@@ -36,7 +37,7 @@
           没有找到相关内容
         </div>
       </div>
-      <div class="table-checkbox-list" v-else>
+      <div v-loading="dsLoading" class="table-checkbox-list" v-else>
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
             v-for="t in tableData"
@@ -51,6 +52,7 @@
                 { active: activeName === t.name, 'not-allow': !t.enableCheck }
               ]"
               class="item"
+              :title="t.name"
               @click="setActiveName(t)"
             >
               <svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
@@ -180,12 +182,14 @@ export default {
       showLeft: true,
       tableLoading: false,
       loading: false,
+      LeftWidth: 240,
       height: 400,
       fields: [],
       fieldsData: [],
       searchTable: '',
       options: [],
       dataSource: '',
+      dsLoading: false,
       tables: [],
       checkTableList: [],
       mode: '1',
@@ -222,6 +226,7 @@ export default {
       if (val) {
         this.checkTableList = []
         this.activeName = ''
+        this.dsLoading = true
         const dsName = this.options.find((ele) => ele.id === val).name
         post('/datasource/getTables/' + val, {}).then((response) => {
           this.tables = response.data
@@ -231,6 +236,8 @@ export default {
             this.$set(ele, 'nameExsit', false)
           })
           this.avilibelTable = !this.tableData.some((ele) => ele.enableCheck)
+        }).finally(() => {
+          this.dsLoading = false
         })
         for (let i = 0; i < this.options.length; i++) {
           if (this.options[i].id === val) {
@@ -272,6 +279,27 @@ export default {
     })
   },
   methods: {
+    mousedownDrag() {
+      document
+        .querySelector('.dataset-api')
+        .addEventListener('mousemove', this.caculateHeight)
+    },
+    mouseupDrag() {
+      document
+        .querySelector('.dataset-api')
+        .removeEventListener('mousemove', this.caculateHeight)
+    },
+    caculateHeight(e) {
+      if (e.pageX < 240) {
+        this.LeftWidth = 240
+        return
+      }
+      if (e.pageX > 500) {
+        this.LeftWidth = 500
+        return
+      }
+      this.LeftWidth = e.pageX
+    },
     nameExsitValidator(activeIndex) {
       this.tableData[activeIndex].nameExsit =
         this.nameList
@@ -385,6 +413,15 @@ export default {
   position: relative;
   width: 100%;
 
+  .drag-left {
+    position: absolute;
+    height: calc(100vh - 56px);
+    width: 2px;
+    top: 0;
+    z-index: 5;
+    cursor: col-resize;
+  }
+
   .arrow-right {
     position: absolute;
     z-index: 2;
@@ -438,7 +475,7 @@ export default {
       overflow-y: auto;
       .item {
         height: 40px;
-        width: 215px;
+        width: 100%;
         border-radius: 4px;
         display: flex;
         align-items: center;

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

@@ -1,9 +1,10 @@
 <template>
-  <div class="dataset-db" v-loading="loading">
+  <div class="dataset-db" @mouseup="mouseupDrag" v-loading="loading">
     <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
-    <div class="table-list" v-show="showLeft">
+    <div v-show="showLeft" @mousedown="mousedownDrag" :style="{ left: LeftWidth + 'px' }" class="drag-left"></div>
+    <div class="table-list" :style="{ width: LeftWidth + 'px' }" v-show="showLeft">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
         <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
@@ -37,7 +38,7 @@
           没有找到相关内容
         </div>
       </div>
-      <div v-else class="table-checkbox-list">
+      <div v-loading="dsLoading" v-else class="table-checkbox-list">
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
             :disabled="t.enableCheck"
@@ -52,6 +53,7 @@
                 { active: activeName === t.name, 'not-allow': !t.enableCheck }
               ]"
               class="item"
+              :title="t.name"
               @click="setActiveName(t)"
             >
               <svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
@@ -181,6 +183,7 @@ export default {
   data() {
     return {
       showLeft: true,
+      LeftWidth: 240,
       tableLoading: false,
       loading: false,
       height: 400,
@@ -189,6 +192,7 @@ export default {
       searchTable: '',
       options: [],
       dataSource: '',
+      dsLoading: false,
       tables: [],
       checkTableList: [],
       mode: '0',
@@ -223,6 +227,7 @@ export default {
     },
     dataSource(val) {
       if (val) {
+        this.dsLoading = true
         this.checkTableList = []
         this.activeName = ''
         const dsName = this.options.find((ele) => ele.id === val).name
@@ -234,6 +239,8 @@ export default {
             this.$set(ele, 'nameExsit', false)
           })
           this.avilibelTable = !this.tableData.some((ele) => ele.enableCheck)
+        }).finally(() => {
+          this.dsLoading = false
         })
         for (let i = 0; i < this.options.length; i++) {
           if (this.options[i].id === val) {
@@ -285,6 +292,27 @@ export default {
     })
   },
   methods: {
+    mousedownDrag() {
+      document
+        .querySelector('.dataset-db')
+        .addEventListener('mousemove', this.caculateHeight)
+    },
+    mouseupDrag() {
+      document
+        .querySelector('.dataset-db')
+        .removeEventListener('mousemove', this.caculateHeight)
+    },
+    caculateHeight(e) {
+      if (e.pageX < 240) {
+        this.LeftWidth = 240
+        return
+      }
+      if (e.pageX > 500) {
+        this.LeftWidth = 500
+        return
+      }
+      this.LeftWidth = e.pageX
+    },
     nameExsitValidator(activeIndex) {
       this.tableData[activeIndex].nameExsit =
         this.nameList
@@ -398,6 +426,15 @@ export default {
   position: relative;
   width: 100%;
 
+  .drag-left {
+    position: absolute;
+    height: calc(100vh - 56px);
+    width: 2px;
+    top: 0;
+    z-index: 5;
+    cursor: col-resize;
+  }
+
 
   .arrow-right {
     position: absolute;
@@ -452,7 +489,7 @@ export default {
       overflow-y: auto;
       .item {
         height: 40px;
-        width: 215px;
+        width: 100%;
         border-radius: 4px;
         display: flex;
         align-items: center;

frontend/src/views/dataset/form.vue

@@ -27,7 +27,7 @@
           >{{ $t('deDataset.selected') }} {{ tableNum }}
           {{ ['excel'].includes(datasetType) ? $t('deDataset.table') : '项' }}</span
         >
-        <deBtn @click="datasetSave" type="primary">{{
+        <deBtn :disabled="['db', 'excel', 'api'].includes(datasetType) && !tableNum" @click="datasetSave" type="primary">{{
           $t('commons.save')
         }}</deBtn>
       </span>