Merge pull request #13266 from dataease/pr@dev-v2_st

Pr@dev v2 st

core/core-frontend/src/custom-component/v-query/TextSearch.vue

@@ -96,10 +96,18 @@ const handleValueChange = () => {
 const lineWidth = computed(() => {
   return { width: queryConditionWidth() - 15 + 'px' }
 })
+
+const handleInnerMouseDown = e => {
+  e.stopPropagation()
+}
 </script>
 
 <template>
-  <div class="text-search-select" :style="{ background: customStyle.background }">
+  <div
+    @mousedown="handleInnerMouseDown"
+    class="text-search-select"
+    :style="{ background: customStyle.background }"
+  >
     <div class="condition-type">
       <el-select
         class="condition-value-select"

core/core-frontend/src/utils/treeDraggble.ts

@@ -1,7 +1,10 @@
+import { cloneDeep } from 'lodash-es'
+
 const treeDraggble = (state, key, req, type) => {
   let dragNodeParentId = ''
   let dragNodeId = ''
   let dragNodeIndex = 0
+  let rawData = []
 
   const dfsTreeNode = (arr, parentId) => {
     arr.forEach((element, index) => {
@@ -26,6 +29,31 @@ const treeDraggble = (state, key, req, type) => {
     })
   }
 
+  const dfsTreeNodeSaveLevel = (arr, idArr) => {
+    arr.forEach(element => {
+      const index = idArr.findIndex(ele => {
+        return ele === element.id
+      })
+      if (index !== -1) {
+        idArr.splice(index, 1)
+      }
+      if (element.children?.length && idArr.length === 2) {
+        dfsTreeNodeSaveLevel(element.children, idArr)
+      }
+    })
+  }
+
+  const dfsTreeNodeDel = (arr, node) => {
+    arr.forEach((element, index) => {
+      if (element.id === node.id) {
+        arr.splice(index, 1)
+      }
+      if (element.children?.length) {
+        dfsTreeNodeDel(element.children, node)
+      }
+    })
+  }
+
   const dfsTreeNodeReset = (arr, node) => {
     arr.forEach(element => {
       if (element.id === dragNodeParentId) {
@@ -39,6 +67,7 @@ const treeDraggble = (state, key, req, type) => {
 
   const handleDragStart = node => {
     dragNodeId = node.data.id
+    rawData = cloneDeep(state[key])
     dfsTreeNode(state[key], '0')
   }
 
@@ -55,6 +84,22 @@ const treeDraggble = (state, key, req, type) => {
       action: 'move'
     }
 
+    if (dropType !== 'inner') {
+      const idArr = [params.id, dropNode.data?.id]
+      dfsTreeNodeSaveLevel(rawData, idArr)
+      if (idArr.length === 0) {
+        dfsTreeNodeDel(state[key], draggingNode.data)
+        setTimeout(() => {
+          if (dragNodeParentId === '0') {
+            state[key].splice(dragNodeIndex, 0, draggingNode.data)
+          } else {
+            dfsTreeNodeReset(state[key], draggingNode.data)
+          }
+        }, 0)
+        return
+      }
+    }
+
     if (dropType === 'inner') {
       params.pid = dropNode.data?.id
     } else {

core/core-frontend/src/utils/treeDraggbleChart.ts

@@ -1,9 +1,12 @@
 import { dvNameCheck, moveResource } from '@/api/visualization/dataVisualization'
+import { cloneDeep } from 'lodash-es'
 const treeDraggbleChart = (state, key, type) => {
   let dragNodeParentId = ''
   let dragNodeId = ''
   let dragNodeIndex = 0
 
+  let rawData = []
+
   const dfsTreeNode = (arr, parentId) => {
     arr.forEach((element, index) => {
       if (element.id === dragNodeId) {
@@ -16,6 +19,20 @@ const treeDraggbleChart = (state, key, type) => {
     })
   }
 
+  const dfsTreeNodeSaveLevel = (arr, idArr) => {
+    arr.forEach(element => {
+      const index = idArr.findIndex(ele => {
+        return ele === element.id
+      })
+      if (index !== -1) {
+        idArr.splice(index, 1)
+      }
+      if (element.children?.length && idArr.length === 2) {
+        dfsTreeNodeSaveLevel(element.children, idArr)
+      }
+    })
+  }
+
   const dfsTreeNodeBack = (arr, parentId, params) => {
     arr.forEach(element => {
       if (element.id === params.id) {
@@ -38,8 +55,20 @@ const treeDraggbleChart = (state, key, type) => {
     })
   }
 
+  const dfsTreeNodeDel = (arr, node) => {
+    arr.forEach((element, index) => {
+      if (element.id === node.id) {
+        arr.splice(index, 1)
+      }
+      if (element.children?.length) {
+        dfsTreeNodeDel(element.children, node)
+      }
+    })
+  }
+
   const handleDragStart = node => {
     dragNodeId = node.data.id
+    rawData = cloneDeep(state[key])
     dfsTreeNode(state[key], '0')
   }
 
@@ -56,6 +85,21 @@ const treeDraggbleChart = (state, key, type) => {
       opt: 'move',
       type
     }
+    if (dropType !== 'inner') {
+      const idArr = [params.id, dropNode.data?.id]
+      dfsTreeNodeSaveLevel(rawData, idArr)
+      if (idArr.length === 0) {
+        dfsTreeNodeDel(state[key], draggingNode.data)
+        setTimeout(() => {
+          if (dragNodeParentId === '0') {
+            state[key].splice(dragNodeIndex, 0, draggingNode.data)
+          } else {
+            dfsTreeNodeReset(state[key], draggingNode.data)
+          }
+        }, 0)
+        return
+      }
+    }
 
     try {
       await dvNameCheck(params)

core/core-frontend/src/views/visualized/data/dataset/form/index.vue

@@ -1223,6 +1223,15 @@ const setDeTypeSelection = () => {
     obj.deType === 1 && obj.deExtractType === 0 ? [1, obj.dateFormatType] : [obj.deType]
 }
 
+const rowClick = (_, __, event) => {
+  const element = event.target.parentNode.parentNode
+  if ([...element.classList].includes('no-hide')) {
+    element.classList.remove('no-hide')
+    return
+  }
+  element.classList.add('no-hide')
+}
+
 let oldArrValue = []
 
 const cascaderChangeArr = val => {
@@ -1673,6 +1682,8 @@ const getDsIconName = data => {
             </div>
             <div class="preview-data">
               <el-table
+                class="dataset-preview_table"
+                @row-click="rowClick"
                 v-loading="datasetPreviewLoading"
                 header-class="header-cell"
                 :data="tableData"
@@ -2243,6 +2254,16 @@ const getDsIconName = data => {
 <style lang="less" scoped>
 @import '@/style/mixin.less';
 
+:deep(.dataset-preview_table) {
+  .ed-table__body {
+    .ed-table__row:not(.no-hide) {
+      .cell {
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
 .ed-table {
   --ed-table-header-bg-color: #f5f6f7;
 }

core/core-frontend/src/views/visualized/data/datasource/index.vue

@@ -1087,8 +1087,8 @@ const getMenuList = (val: boolean) => {
           <el-dropdown @command="sortTypeChange" trigger="click">
             <el-icon class="filter-icon-span">
               <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
-                <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
-                  ><dvSortAsc class="svg-icon opt-icon"
+                <Icon name="dv-sort-asc" class="opt-icon"
+                  ><dvSortAsc v-if="state.curSortType.includes('asc')" class="svg-icon opt-icon"
                 /></Icon>
               </el-tooltip>
               <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">