From 40e6032fb940c538978aef4353fd3336c04d9031 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 18 Jun 2024 14:34:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E9=9B=86):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=95=B0=E6=8D=AE=E9=9B=86=E5=AD=97=E6=AE=B5=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=94=B9=E5=8F=98=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../v-query/QueryConditionConfiguration.vue   |   2 -
 .../visualized/data/dataset/form/AddSql.vue   | 209 ++++++++++--------
 .../visualized/data/dataset/form/index.vue    |  17 +-
 3 files changed, 118 insertions(+), 110 deletions(-)

diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index edf5679ada..49c8794564 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -667,8 +667,6 @@ const confirmValueSource = () => {
     ElMessage.error('手工输入-选项值不能为空')
     return
   }
-  console.log(cloneDeep(valueSource.value), 'valueSource')
-
   curComponent.value.valueSource = cloneDeep(
     valueSource.value.filter(ele => {
       if (typeof ele === 'string') {
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 121a0caa07..8894f3c7bf 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -1,7 +1,9 @@
 <script lang="tsx" setup>
-import { ref, reactive, onMounted, PropType, toRefs, watch, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted, PropType, toRefs, watch, onBeforeUnmount, shallowRef } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Base64 } from 'js-base64'
+import FixedSizeList from 'element-plus-secondary/es/components/virtual-list/src/components/fixed-size-list.mjs'
+import { useWindowSize } from '@vueuse/core'
 import useClipboard from 'vue-clipboard3'
 import { ElMessage, ElMessageBox, ElIcon } from 'element-plus-secondary'
 import { Icon } from '@/components/icon-custom'
@@ -56,7 +58,6 @@ const state = reactive({
   sqlData: [],
   variablesTmp: [],
   dataSourceList: [],
-  tableData: [],
   table: {
     name: '',
     id: ''
@@ -66,6 +67,8 @@ const state = reactive({
   }
 })
 
+const datasourceTableData = shallowRef([])
+
 const paginationConfig = reactive({
   currentPage: 1,
   pageSize: 10,
@@ -76,6 +79,7 @@ const setActiveName = ({ name, enableCheck }) => {
   if (!enableCheck) return
   activeName.value = name
 }
+const { height: windowHeight } = useWindowSize()
 
 const generateColumns = (arr: Field[]) =>
   arr.map(ele => ({
@@ -295,7 +299,7 @@ const getSQLPreview = () => {
 
 let tableList = []
 watch(searchTable, val => {
-  state.tableData = tableList.filter(ele => ele.tableName.includes(val))
+  datasourceTableData.value = tableList.filter(ele => ele.tableName.includes(val))
 })
 
 const getIconName = (type: string) => {
@@ -328,7 +332,7 @@ const dsChange = (val: string) => {
   getTables({ datasourceId: val })
     .then(res => {
       tableList = res || []
-      state.tableData = [...tableList]
+      datasourceTableData.value = [...tableList]
     })
     .finally(() => {
       dsLoading.value = false
@@ -473,7 +477,7 @@ const mousedownDrag = () => {
             <el-icon class="icon-color">
               <Icon name="reference-table"></Icon>
             </el-icon>
-            {{ state.tableData.length }}
+            {{ datasourceTableData.length }}
           </span>
         </p>
         <el-input
@@ -489,7 +493,7 @@ const mousedownDrag = () => {
           </template>
         </el-input>
       </div>
-      <div v-if="!state.tableData.length && searchTable !== ''" class="el-empty">
+      <div v-if="!datasourceTableData.length && searchTable !== ''" class="el-empty">
         <div
           class="el-empty__description"
           style="margin-top: 80px; color: #5e6d82; text-align: center"
@@ -498,97 +502,118 @@ const mousedownDrag = () => {
         </div>
       </div>
       <div v-else class="table-checkbox-list">
-        <template v-for="ele in state.tableData" :key="ele.tableName">
-          <div
-            :class="[{ active: activeName === ele.tableName }]"
-            class="list-item_primary"
-            :title="ele.tableName"
-            @click="setActiveName(ele)"
-          >
-            <el-icon class="icon-color">
-              <Icon name="icon_form_outlined"></Icon>
-            </el-icon>
-            <span class="label">{{ ele.tableName }}</span>
-            <span class="name-copy">
-              <el-tooltip effect="dark" :content="t('common.copy')" placement="top">
-                <el-icon class="hover-icon" @click="copyInfo(ele.tableName)">
-                  <Icon name="icon_copy_outlined"></Icon>
-                </el-icon>
-              </el-tooltip>
-
-              <el-popover
-                popper-class="sql-table-info"
-                placement="right"
-                :width="502"
-                :persistent="false"
-                @show="getNodeField(ele)"
-                trigger="click"
-              >
-                <template #reference>
-                  <el-icon class="hover-icon">
-                    <Icon name="icon_info_outlined"></Icon>
+        <FixedSizeList
+          :itemSize="40"
+          :data="datasourceTableData"
+          :total="datasourceTableData.length"
+          :width="223"
+          :height="windowHeight - 350"
+          :scrollbarAlwaysOn="false"
+          class-name="el-select-dropdown__list"
+          layout="vertical"
+        >
+          <template #default="{ index, style }">
+            <div
+              :class="[{ active: activeName === datasourceTableData[index].tableName }]"
+              class="list-item_primary"
+              :style="style"
+              :title="datasourceTableData[index].tableName"
+              @click="setActiveName(datasourceTableData[index])"
+            >
+              <el-icon class="icon-color">
+                <Icon name="icon_form_outlined"></Icon>
+              </el-icon>
+              <span class="label">{{ datasourceTableData[index].tableName }}</span>
+              <span class="name-copy">
+                <el-tooltip effect="dark" :content="t('common.copy')" placement="top">
+                  <el-icon
+                    class="hover-icon"
+                    @click="copyInfo(datasourceTableData[index].tableName)"
+                  >
+                    <Icon name="icon_copy_outlined"></Icon>
                   </el-icon>
-                </template>
-                <div class="table-filed" v-loading="gridDataLoading">
-                  <div class="top flex-align-center">
-                    <div class="title ellipsis">
-                      {{ ele.name || ele.tableName }}
-                    </div>
-                    <el-icon
-                      class="hover-icon de-hover-icon-primary"
-                      @click.stop="copyInfo(ele.name || ele.tableName)"
-                    >
-                      <Icon name="icon_copy_outlined"></Icon>
+                </el-tooltip>
+
+                <el-popover
+                  popper-class="sql-table-info"
+                  placement="right"
+                  :width="502"
+                  :persistent="false"
+                  @show="getNodeField(datasourceTableData[index])"
+                  trigger="click"
+                >
+                  <template #reference>
+                    <el-icon class="hover-icon">
+                      <Icon name="icon_info_outlined"></Icon>
                     </el-icon>
-                    <div class="num flex-align-center">
-                      <el-icon>
-                        <Icon name="icon_text-box_outlined"></Icon>
+                  </template>
+                  <div class="table-filed" v-loading="gridDataLoading">
+                    <div class="top flex-align-center">
+                      <div class="title ellipsis">
+                        {{
+                          datasourceTableData[index].name || datasourceTableData[index].tableName
+                        }}
+                      </div>
+                      <el-icon
+                        class="hover-icon de-hover-icon-primary"
+                        @click.stop="
+                          copyInfo(
+                            datasourceTableData[index].name || datasourceTableData[index].tableName
+                          )
+                        "
+                      >
+                        <Icon name="icon_copy_outlined"></Icon>
                       </el-icon>
-                      {{ gridData.length }}
+                      <div class="num flex-align-center">
+                        <el-icon>
+                          <Icon name="icon_text-box_outlined"></Icon>
+                        </el-icon>
+                        {{ gridData.length }}
+                      </div>
+                    </div>
+                    <div class="table-grid">
+                      <el-table
+                        height="405"
+                        style="width: 100%"
+                        header-cell-class-name="header-cell"
+                        :data="gridData"
+                      >
+                        <el-table-column label="物理字段名">
+                          <template #default="scope">
+                            <div class="flex-align-center icon">
+                              <el-icon>
+                                <Icon
+                                  :className="`field-icon-${fieldType[scope.row.deType]}`"
+                                  :name="`field_${fieldType[scope.row.deType]}`"
+                                ></Icon>
+                              </el-icon>
+                              {{ scope.row.originName }}
+                            </div>
+                          </template>
+                        </el-table-column>
+                        <el-table-column :label="t('common.label')">
+                          <template #default="scope">
+                            {{ scope.row.description || '-' }}
+                          </template>
+                        </el-table-column>
+                        <el-table-column :label="t('common.operate')">
+                          <template #default="scope">
+                            <el-icon
+                              class="hover-icon de-hover-icon-primary"
+                              @click.stop="copyInfo(scope.row.originName)"
+                            >
+                              <Icon name="icon_copy_outlined"></Icon>
+                            </el-icon>
+                          </template>
+                        </el-table-column>
+                      </el-table>
                     </div>
                   </div>
-                  <div class="table-grid">
-                    <el-table
-                      height="405"
-                      style="width: 100%"
-                      header-cell-class-name="header-cell"
-                      :data="gridData"
-                    >
-                      <el-table-column label="物理字段名">
-                        <template #default="scope">
-                          <div class="flex-align-center icon">
-                            <el-icon>
-                              <Icon
-                                :className="`field-icon-${fieldType[scope.row.deType]}`"
-                                :name="`field_${fieldType[scope.row.deType]}`"
-                              ></Icon>
-                            </el-icon>
-                            {{ scope.row.originName }}
-                          </div>
-                        </template>
-                      </el-table-column>
-                      <el-table-column :label="t('common.label')">
-                        <template #default="scope">
-                          {{ scope.row.description || '-' }}
-                        </template>
-                      </el-table-column>
-                      <el-table-column :label="t('common.operate')">
-                        <template #default="scope">
-                          <el-icon
-                            class="hover-icon de-hover-icon-primary"
-                            @click.stop="copyInfo(scope.row.originName)"
-                          >
-                            <Icon name="icon_copy_outlined"></Icon>
-                          </el-icon>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                  </div>
-                </div>
-              </el-popover>
-            </span>
-          </div>
-        </template>
+                </el-popover>
+              </span>
+            </div>
+          </template>
+        </FixedSizeList>
       </div>
     </div>
     <div class="sql-code-right" :style="{ width: `calc(100% - ${showLeft ? LeftWidth : 0}px)` }">
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index 381fce9f60..f65c060b53 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -1352,21 +1352,6 @@ const getDsIconName = data => {
               </div>
             </template>
           </FixedSizeList>
-          <!-- <template v-for="ele in datasourceTableData" :key="ele.tableName">
-            <div
-              class="list-item_primary"
-              :title="ele.tableName"
-              @dragstart="$event => dragstart($event, ele)"
-              @dragend="maskShow = false"
-              :draggable="true"
-              @click="setActiveName(ele)"
-            >
-              <el-icon class="icon-color">
-                <Icon name="reference-table"></Icon>
-              </el-icon>
-              <span class="label">{{ ele.tableName }}</span>
-            </div>
-          </template> -->
         </div>
       </div>
       <div class="drag-right" :style="{ width: `calc(100vw - ${showLeft ? LeftWidth : 0}px)` }">
@@ -1502,7 +1487,7 @@ const getDsIconName = data => {
                 style="width: 100%; height: 100%"
               >
                 <el-table-column
-                  :key="column.dataKey"
+                  :key="column.dataKey + column.deType"
                   v-for="(column, index) in columns"
                   :prop="column.dataKey"
                   :label="column.title"