fix: db api数据集不可选图标更换数据源滚动条去除

2022-09-29 16:49:58 +08:00 · 2022-09-29 16:49:58 +08:00 · 1df2a60691
commit 1df2a60691
parent 15fb1516c8
22 changed files with 96 additions and 52 deletions
--- a/frontend/src/components/TreeSelector/index.vue
+++ b/frontend/src/components/TreeSelector/index.vue
@ -10,7 +10,7 @@
      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
        <span style="display: flex;flex: 1;width: 0;">
          <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene" class="ds-icon-scene" />
+            <svg-icon icon-class="scene" />
          </span>
          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
        </span>
--- a/frontend/src/icons/svg/Checkbox.svg
+++ b/frontend/src/icons/svg/Checkbox.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="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" fill="#BBBFC4"/>
+<path d="M11.5886 4.90283L12.3971 5.71133C12.4296 5.74383 12.4554 5.78242 12.473 5.82488C12.4906 5.86735 12.4996 5.91287 12.4996 5.95883C12.4996 6.0048 12.4906 6.05031 12.473 6.09278C12.4554 6.13524 12.4296 6.17383 12.3971 6.20633L7.17862 11.4248C7.14612 11.4573 7.10754 11.4831 7.06507 11.5007C7.0226 11.5183 6.97709 11.5274 6.93112 11.5274C6.88516 11.5274 6.83964 11.5183 6.79718 11.5007C6.75471 11.4831 6.71612 11.4573 6.68362 11.4248L3.70262 8.44383C3.67012 8.41133 3.64433 8.37275 3.62674 8.33028C3.60915 8.28781 3.6001 8.2423 3.6001 8.19633C3.6001 8.15037 3.60915 8.10485 3.62674 8.06239C3.64433 8.01992 3.67012 7.98133 3.70262 7.94883L4.51112 7.14083C4.54362 7.10833 4.58221 7.08254 4.62468 7.06495C4.66714 7.04736 4.71266 7.03831 4.75862 7.03831C4.80459 7.03831 4.8501 7.04736 4.89257 7.06495C4.93504 7.08254 4.97362 7.10833 5.00612 7.14083L6.93112 9.06533L11.0941 4.90233C11.1266 4.86983 11.1652 4.84404 11.2077 4.82645C11.2501 4.80886 11.2957 4.7998 11.3416 4.7998C11.3876 4.7998 11.4331 4.80886 11.4756 4.82645C11.518 4.84404 11.5561 4.87033 11.5886 4.90283Z" fill="#EFF0F1"/>
+</svg>
--- a/frontend/src/icons/svg/scene.svg
+++ b/frontend/src/icons/svg/scene.svg
@ -1,3 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 3.66667C1 3.29848 1.32561 3 1.72727 3H7.82325C8.09872 3 8.35055 3.14267 8.47374 3.36852L9 4.33333H16.2727C16.6744 4.33333 17 4.63181 17 5V14.3333C17 14.7015 16.6744 15 16.2727 15H1.72727C1.32561 15 1 14.7015 1 14.3333V3.66667ZM2.81818 5.66667C2.61735 5.66667 2.45455 5.81591 2.45455 6V6.66667C2.45455 6.85076 2.61735 7 2.81818 7H15.1818C15.3826 7 15.5455 6.85076 15.5455 6.66667V6C15.5455 5.81591 15.3826 5.66667 15.1818 5.66667H2.81818Z" fill="#8F959E"/>
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.66667C1 3.29848 1.32561 3 1.72727 3H7.82325C8.09872 3 8.35055 3.14267 8.47374 3.36852L9 4.33333H16.2727C16.6744 4.33333 17 4.63181 17 5V14.3333C17 14.7015 16.6744 15 16.2727 15H1.72727C1.32561 15 1 14.7015 1 14.3333V3.66667ZM2.81818 5.66667C2.61735 5.66667 2.45455 5.81591 2.45455 6V6.66667C2.45455 6.85076 2.61735 7 2.81818 7H15.1818C15.3826 7 15.5455 6.85076 15.5455 6.66667V6C15.5455 5.81591 15.3826 5.66667 15.1818 5.66667H2.81818Z"/>
 </svg>
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@ -1243,6 +1243,15 @@ div:focus {
    mix-blend-mode: normal;
    border-bottom: 1px solid var(--deComBorderColor50, rgba(187, 191, 196, 0.5));

+    .text-overflow {
+      max-width: 300px;
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      flex: none;
+    }
+
    .el-drawer__close-btn {
      position: absolute;
      right: 24px;
--- a/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
+++ b/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
@ -10,7 +10,7 @@
      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
        <span style="display: flex;flex: 1;width: 0;">
          <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene" class="ds-icon-scene" />
+            <svg-icon icon-class="scene"/>
          </span>
          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
        </span>
--- a/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
+++ b/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
@ -10,7 +10,7 @@
      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
        <span style="display: flex;flex: 1;width: 0;">
          <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene" class="ds-icon-scene" />
+            <svg-icon icon-class="scene"/>
          </span>
          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
        </span>
--- a/frontend/src/views/chart/components/TreeSelector/index.vue
+++ b/frontend/src/views/chart/components/TreeSelector/index.vue
@ -10,7 +10,7 @@
      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
        <span style="display: flex;flex: 1;width: 0;">
          <span v-if="data.type === 'scene'">
-            <svg-icon icon-class="scene" class="ds-icon-scene" />
+            <svg-icon icon-class="scene"/>
          </span>
          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
        </span>
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@ -53,7 +53,8 @@
              class="item"
              @click="setActiveName(t)"
            >
-              <el-checkbox :label="t.name" :disabled="!t.enableCheck" />
+              <svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
+              <el-checkbox :label="t.name" v-else />
              <span class="label">{{ showTableNameWithComment(t) }}</span>
              <span v-if="t.nameExsit" class="error-name-exsit">
                <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@ -54,7 +54,8 @@
              class="item"
              @click="setActiveName(t)"
            >
-              <el-checkbox :label="t.name" :disabled="!t.enableCheck">
+              <svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
+              <el-checkbox v-else :label="t.name" :disabled="!t.enableCheck">
              </el-checkbox>
              <span class="label">{{ showTableNameWithComment(t) }}</span>
              <span class="error-name-exsit" v-if="t.nameExsit">
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@ -53,10 +53,18 @@
          @node-click="handleNodeClick"
          @check-change="handleCheckChange"
        >
-          <span slot-scope="{ data }" class="custom-tree-node">
+          <span
+            :title="data.excelLable"
+            slot-scope="{ data }"
+            class="custom-tree-node"
+          >
            {{ data.excelLable }}
            <span
-              v-if="data.nameExsit && !param.tableId"
+              v-if="
+                (data.nameExsit && !param.tableId) ||
+                data.empty ||
+                data.overLength
+              "
              class="error-name-exsit"
            >
              <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
@ -83,11 +91,23 @@
            @change="changeDatasetName"
          />
          <div
-            v-if="sheetObj.nameExsit && !param.tableId"
+            v-if="
+              (sheetObj.nameExsit && !param.tableId) ||
+              sheetObj.empty ||
+              sheetObj.overLength
+            "
            style="left: 107px; top: 52px"
            class="el-form-item__error"
          >
-            {{ $t('deDataset.already_exists') }}
+            {{
+              $t(
+                sheetObj.nameExsit
+                  ? 'deDataset.already_exists'
+                  : sheetObj.overLength
+                  ? 'dataset.char_can_not_more_50'
+                  : 'dataset.pls_input_name'
+              )
+            }}
          </div>
        </div>
        <div class="data">
@ -320,11 +340,18 @@ export default {
        .forEach((ele, index) => {
          if (checkList.includes(ele.datasetName)) {
            this.nameExsitValidator(ele, checkList)
+            this.nameLengthValidator(ele)
          } else {
            this.$set(ele, 'nameExsit', false)
+            this.$set(ele, 'empty', false)
+            this.$set(ele, 'overLength', false)
          }
        })
    },
+    nameLengthValidator(ele) {
+      this.$set(ele, 'empty', !ele.datasetName.length)
+      this.$set(ele, 'overLength', ele.datasetName.length > 50)
+    },
    handleNodeClick(data) {
      if (data.sheet) {
        this.sheetObj = data
@ -506,10 +533,12 @@ export default {
          cb: () => {
            table.mergeSheet = true
            this.loading = true
-            post('/dataset/table/update', table).then((response) => {
-              this.openMessageSuccess('deDataset.set_saved_successfully')
-              this.cancel(response.data)
-            }).finally(() => {
+            post('/dataset/table/update', table)
+              .then((response) => {
+                this.openMessageSuccess('deDataset.set_saved_successfully')
+                this.cancel(response.data)
+              })
+              .finally(() => {
                this.loading = false
              })
          },
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@ -44,7 +44,7 @@
                  <!--                    type="text"-->
                  <!--                    size="mini"-->
                  <!--                  />-->
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                  <svg-icon icon-class="scene"/>
                </span>
                <span
                  style="
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@ -58,7 +58,7 @@
            >
              <span style="display: flex; flex: 1; width: 0">
                <span v-if="data.modelInnerType === 'scene'">
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                  <svg-icon icon-class="scene"/>
                </span>
                <span
                  style="
--- a/frontend/src/views/dataset/common/datasetTree.vue
+++ b/frontend/src/views/dataset/common/datasetTree.vue
@ -29,7 +29,7 @@
        >
          <span style="display: flex; flex: 1; width: 0">
            <span v-if="data.modelInnerType === 'group'">
-              <svg-icon icon-class="scene" class="ds-icon-scene" />
+              <svg-icon icon-class="scene"/>
            </span>
            <span
              style="
--- a/frontend/src/views/dataset/group/CreatDsGroup.vue
+++ b/frontend/src/views/dataset/group/CreatDsGroup.vue
@ -35,7 +35,7 @@
          >
            <span slot-scope="{ data }" class="custom-tree-node-dataset">
              <span v-if="data.type === 'group'">
-                <svg-icon icon-class="scene" class="ds-icon-scene" />
+                <svg-icon icon-class="scene"/>
              </span>
              <span
                style="
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@ -164,10 +164,8 @@
                    <span class="el-dropdown-link">
                      <el-button icon="el-icon-more" type="text" size="small" />
                    </span>
-                    <el-dropdown-menu slot="dropdown" class="de-card-dropdown">
-                      <el-dropdown-item
-                        command="rename"
-                      >
+                    <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                      <el-dropdown-item command="rename">
                        <svg-icon icon-class="de-ds-rename" />
                        {{ $t('dataset.rename') }}
                      </el-dropdown-item>
@ -267,10 +265,8 @@
                    <span class="el-dropdown-link">
                      <el-button icon="el-icon-more" type="text" size="small" />
                    </span>
-                    <el-dropdown-menu slot="dropdown" class="de-card-dropdown">
-                      <el-dropdown-item
-                        command="editTable"
-                      >
+                    <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                      <el-dropdown-item command="editTable">
                        <svg-icon icon-class="de-ds-rename" />
                        {{ $t('dataset.rename') }}
                      </el-dropdown-item>
@ -278,9 +274,7 @@
                        <svg-icon icon-class="de-ds-move" />
                        {{ $t('dataset.move_to') }}
                      </el-dropdown-item>
-                      <el-dropdown-item
-                        command="deleteTable"
-                      >
+                      <el-dropdown-item command="deleteTable">
                        <svg-icon icon-class="de-ds-trash" />
                        {{ $t('dataset.delete') }}
                      </el-dropdown-item>
@ -355,13 +349,18 @@

    <!--移动分组-->
    <el-drawer
-      v-closePress
-      :title="moveDialogTitle"
      :visible.sync="moveGroup"
      custom-class="user-drawer sql-dataset-drawer"
      size="600px"
      direction="rtl"
    >
+      <template slot="title">
+        {{ $t('dataset.m1') }}
+        <span :title="moveDialogTitle" class="text-overflow">{{
+          moveDialogTitle
+        }}</span>
+        {{ $t('dataset.m2') }}
+      </template>
      <group-move-selector
        move-dir
        :item="groupForm"
@ -382,13 +381,18 @@

    <!--移动数据集-->
    <el-drawer
-      v-closePress
-      :title="moveDialogTitle"
      :visible.sync="moveDs"
      custom-class="user-drawer sql-dataset-drawer"
      size="600px"
      direction="rtl"
    >
+      <template slot="title">
+        {{ $t('dataset.m1') }}
+        <span :title="moveDialogTitle" class="text-overflow">{{
+          moveDialogTitle
+        }}</span>
+        {{ $t('dataset.m2') }}
+      </template>
      <group-move-selector :item="groupForm" @targetGroup="targetDs" />
      <div class="de-foot">
        <deBtn secondary @click="closeMoveDs()">{{
@ -912,10 +916,7 @@ export default {

    moveTo(data) {
      this.moveGroup = true
-      this.moveDialogTitle =
-        this.$t('dataset.m1') +
-        (data.name.length > 10 ? data.name.substr(0, 10) + '...' : data.name) +
-        this.$t('dataset.m2')
+      this.moveDialogTitle = data.name
    },
    closeMoveGroup() {
      this.moveGroup = false
@ -943,10 +944,7 @@ export default {

    moveToDs(data) {
      this.moveDs = true
-      this.moveDialogTitle =
-        this.$t('dataset.m1') +
-        (data.name.length > 10 ? data.name.substr(0, 10) + '...' : data.name) +
-        this.$t('dataset.m2')
+      this.moveDialogTitle = data.name
    },
    closeMoveDs() {
      this.moveDs = false
--- a/frontend/src/views/dataset/group/GroupMoveSelector.vue
+++ b/frontend/src/views/dataset/group/GroupMoveSelector.vue
@ -21,7 +21,7 @@
        <span slot-scope="{ node, data }" :class="treeClass(data, node)">
          <span style="display: flex; flex: 1; width: 0">
            <span v-if="data.type === 'group'">
-              <svg-icon icon-class="scene" class="ds-icon-scene" />
+              <svg-icon icon-class="scene"/>
            </span>
            <span
              style="
--- a/frontend/src/views/panel/appTemplate/component/TemplateList.vue
+++ b/frontend/src/views/panel/appTemplate/component/TemplateList.vue
@ -26,7 +26,7 @@
        v-for="ele in templateListComputed"
        :key="ele.name"
      >
-        <svg-icon icon-class="scene" class="ds-icon-scene" />
+        <svg-icon icon-class="scene"/>
        <span>{{ ele.name }}</span>
        <span @click.stop class="more">
          <el-dropdown
--- a/frontend/src/views/panel/template/component/TemplateList.vue
+++ b/frontend/src/views/panel/template/component/TemplateList.vue
@ -26,7 +26,7 @@
        v-for="ele in templateListComputed"
        :key="ele.name"
      >
-        <svg-icon icon-class="scene" class="ds-icon-scene" />
+        <svg-icon icon-class="scene"/>
        <span>{{ ele.name }}</span>
        <span @click.stop class="more">
          <el-dropdown
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@ -82,7 +82,7 @@
                  />
                </span>
                <span v-if="data.type === 'folder'">
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                  <svg-icon icon-class="scene"/>
                </span>
                <span
                  style="
@ -217,7 +217,7 @@
        :title="$t('datasource.create')"
        :visible.sync="dsTypeRelate"
        width="1200px"
-        class="de-dialog-form"
+        class="de-dialog-form none-scroll-bar"
        append-to-body
      >
        <el-tabs v-model="tabActive">
@ -718,9 +718,11 @@ export default {
 }
 </style>
 <style lang="scss">
+.none-scroll-bar::-webkit-scrollbar { display: none; }
+
 .db-container {
  width: 100%;
-  max-height: 60vh;
+  max-height: 65vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
--- a/frontend/src/views/system/task/TableSelector.vue
+++ b/frontend/src/views/system/task/TableSelector.vue
@ -28,7 +28,7 @@
          >
            <span slot-scope="{ data }" class="custom-tree-node">
              <span v-if="data.modelInnerType === 'group'">
-                <svg-icon icon-class="scene" class="ds-icon-scene" />
+                <svg-icon icon-class="scene"/>
                <span
                  style="
                    margin-left: 6px;
--- a/frontend/src/views/system/task/filterUser.vue
+++ b/frontend/src/views/system/task/filterUser.vue
@ -44,7 +44,7 @@
            >
              <span slot-scope="{ data }" class="custom-tree-node">
                <span v-if="data.modelInnerType === 'group'">
-                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                  <svg-icon icon-class="scene"/>
                  <span
                    style="
                      margin-left: 6px;
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@ -44,7 +44,7 @@
              >
                <span slot-scope="{ data }" class="custom-tree-node">
                  <span v-if="data.modelInnerType === 'group'">
-                    <svg-icon icon-class="scene" class="ds-icon-scene" />
+                    <svg-icon icon-class="scene"/>
                    <span
                      style="
                        margin-left: 6px;