fix(数据集): 修复数据集字段类型改变不生效

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') {

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,20 +502,34 @@ const mousedownDrag = () => {
         </div>
       </div>
       <div v-else class="table-checkbox-list">
-        <template v-for="ele in state.tableData" :key="ele.tableName">
+        <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 === ele.tableName }]"
+              :class="[{ active: activeName === datasourceTableData[index].tableName }]"
               class="list-item_primary"
-            :title="ele.tableName"
-            @click="setActiveName(ele)"
+              :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">{{ ele.tableName }}</span>
+              <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(ele.tableName)">
+                  <el-icon
+                    class="hover-icon"
+                    @click="copyInfo(datasourceTableData[index].tableName)"
+                  >
                     <Icon name="icon_copy_outlined"></Icon>
                   </el-icon>
                 </el-tooltip>
@@ -521,7 +539,7 @@ const mousedownDrag = () => {
                   placement="right"
                   :width="502"
                   :persistent="false"
-                @show="getNodeField(ele)"
+                  @show="getNodeField(datasourceTableData[index])"
                   trigger="click"
                 >
                   <template #reference>
@@ -532,11 +550,17 @@ const mousedownDrag = () => {
                   <div class="table-filed" v-loading="gridDataLoading">
                     <div class="top flex-align-center">
                       <div class="title ellipsis">
-                      {{ ele.name || ele.tableName }}
+                        {{
+                          datasourceTableData[index].name || datasourceTableData[index].tableName
+                        }}
                       </div>
                       <el-icon
                         class="hover-icon de-hover-icon-primary"
-                      @click.stop="copyInfo(ele.name || ele.tableName)"
+                        @click.stop="
+                          copyInfo(
+                            datasourceTableData[index].name || datasourceTableData[index].tableName
+                          )
+                        "
                       >
                         <Icon name="icon_copy_outlined"></Icon>
                       </el-icon>
@@ -589,6 +613,7 @@ const mousedownDrag = () => {
               </span>
             </div>
           </template>
+        </FixedSizeList>
       </div>
     </div>
     <div class="sql-code-right" :style="{ width: `calc(100% - ${showLeft ? LeftWidth : 0}px)` }">

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"