Merge pull request #10189 from dataease/pr@dev-v2@refactor_tab-sort

refactor(仪表板): 优化Tab组件排序

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -10,6 +10,16 @@
     ]"
     @mousedown="fieldsAreaDown"
   >
+    <el-tooltip
+      effect="dark"
+      placement="top"
+      :content="'排序'"
+      v-if="element.component === 'DeTabs' && showPosition === 'canvas'"
+    >
+      <el-icon class="bar-base-icon" @click="tabSort">
+        <Sort />
+      </el-icon>
+    </el-tooltip>
     <template v-if="element.component === 'VQuery' && showPosition === 'canvas'">
       <span title="添加查询条件">
         <el-icon class="bar-base-icon" @click="addQueryCriteria">
@@ -142,11 +152,12 @@
       </template>
       <fields-list :fields="state.curFields" :element="element" />
     </el-popover>
+    <custom-tabs-sort ref="customTabsSortRef" :element="element"></custom-tabs-sort>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, h, onBeforeUnmount, onMounted, reactive, toRefs, watch } from 'vue'
+import { computed, h, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -158,9 +169,11 @@ import { exportExcelDownload } from '@/views/chart/components/js/util'
 import FieldsList from '@/custom-component/rich-text/FieldsList.vue'
 import { RefreshLeft } from '@element-plus/icons-vue'
 import { ElMessage, ElTooltip, ElButton } from 'element-plus-secondary'
+import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
+const customTabsSortRef = ref(null)
 const emits = defineEmits([
   'userViewEnlargeOpen',
   'closePreview',
@@ -273,6 +286,10 @@ const state = reactive({
   batchOptCheckModel: false
 })
 
+const tabSort = () => {
+  customTabsSortRef.value.sortInit()
+}
+
 const downloadClick = () => {
   dvMainStore.setCurComponent({ component: element.value, index: index.value })
 }

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -14,66 +14,67 @@
       :border-color="noBorderColor"
       :border-active-color="borderActiveColor"
     >
-      <draggable :list="moveTabs" animation="100" class="drag-list" item-key="id">
+      <draggable :list="moveTabs" animation="300" class="drag-list">
-        <el-tab-pane
+        <template #item="{ element, index }">
-          class="el-tab-pane-custom"
+          <el-tab-pane
-          :lazy="true"
+            class="el-tab-pane-custom"
-          :key="tabItem.name"
+            :lazy="true"
-          v-for="(tabItem, index) in moveTabs"
+            :key="element.name"
-          :label="tabItem.title"
+            :label="element.title"
-          :name="tabItem.name"
+            :name="element.name"
-        >
+          >
-          <template #label>
+            <template #label>
-            <span :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
+              <span :style="titleStyle(element.name)">{{ element.title }}</span>
-            <el-dropdown
+              <el-dropdown
-              v-if="isEditMode"
+                v-if="isEditMode"
-              style="line-height: 4 !important"
+                style="line-height: 4 !important"
-              trigger="click"
+                trigger="click"
-              @command="handleCommand"
+                @command="handleCommand"
-            >
+              >
-              <span class="el-dropdown-link">
+                <span class="el-dropdown-link">
-                <el-icon v-if="isEdit"><ArrowDown /></el-icon>
+                  <el-icon v-if="isEdit"><ArrowDown /></el-icon>
-              </span>
+                </span>
-              <template #dropdown>
+                <template #dropdown>
-                <el-dropdown-menu>
+                  <el-dropdown-menu>
-                  <el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
+                    <el-dropdown-item :command="beforeHandleCommand('editTitle', element)">
-                    编辑标题
+                      编辑标题
-                  </el-dropdown-item>
+                    </el-dropdown-item>
 
-                  <el-dropdown-item
+                    <el-dropdown-item
-                    v-if="element.propValue.length > 1"
+                      v-if="element.propValue.length > 1"
-                    :command="beforeHandleCommand('deleteCur', tabItem)"
+                      :command="beforeHandleCommand('deleteCur', element)"
-                  >
+                    >
-                    删除
+                      删除
-                  </el-dropdown-item>
+                    </el-dropdown-item>
-                </el-dropdown-menu>
+                  </el-dropdown-menu>
-              </template>
+                </template>
-            </el-dropdown>
+              </el-dropdown>
-          </template>
+            </template>
-          <de-canvas
+            <de-canvas
-            v-if="isEdit && !mobileInPc"
+              v-if="isEdit && !mobileInPc"
-            :ref="'tabCanvas_' + index"
+              :ref="'tabCanvas_' + index"
-            :component-data="tabItem.componentData"
+              :component-data="element.componentData"
-            :canvas-style-data="canvasStyleData"
+              :canvas-style-data="canvasStyleData"
-            :canvas-view-info="canvasViewInfo"
+              :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
+              :canvas-id="element.id + '--' + element.name"
-            :class="moveActive ? 'canvas-move-in' : ''"
+              :class="moveActive ? 'canvas-move-in' : ''"
-            :canvas-active="editableTabsValue === tabItem.name"
+              :canvas-active="editableTabsValue === element.name"
-          ></de-canvas>
+            ></de-canvas>
-          <de-preview
+            <de-preview
-            v-else
+              v-else
-            :ref="'dashboardPreview'"
+              :ref="'dashboardPreview'"
-            :dv-info="dvInfo"
+              :dv-info="dvInfo"
-            :cur-gap="curPreviewGap"
+              :cur-gap="curPreviewGap"
-            :component-data="tabItem.componentData"
+              :component-data="element.componentData"
-            :canvas-style-data="canvasStyleData"
+              :canvas-style-data="canvasStyleData"
-            :canvas-view-info="canvasViewInfo"
+              :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
+              :canvas-id="element.id + '--' + element.name"
-            :preview-active="editableTabsValue === tabItem.name"
+              :preview-active="editableTabsValue === element.name"
-            :show-position="showPosition"
+              :show-position="showPosition"
-            :outer-scale="scale"
+              :outer-scale="scale"
-          ></de-preview>
+            ></de-preview>
-        </el-tab-pane>
+          </el-tab-pane>
+        </template>
       </draggable>
     </de-custom-tab>
     <el-dialog

core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog
+    ref="enlargeDialog"
+    destroy-on-close
+    :append-to-body="true"
+    :title="'自定义排序'"
+    v-model="dialogShow"
+    width="30vw"
+    top="10vh"
+  >
+    <div>
+      <draggable :list="sortList" animation="300" class="drag-list">
+        <template #item="{ element }">
+          <span :key="element.name" class="item-dimension" :title="element.title">
+            <el-icon size="20px">
+              <Icon name="drag" />
+            </el-icon>
+            <span class="item-span">
+              {{ element.title }}
+            </span>
+          </span>
+        </template>
+      </draggable>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="save">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import { onMounted, ref, toRefs } from 'vue'
+import { deepCopy } from '@/utils/utils'
+import { ElButton } from 'element-plus-secondary'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+const snapshotStore = snapshotStoreWithOut()
+const props = defineProps({
+  element: {
+    type: Object,
+    required: true
+  }
+})
+
+onMounted(() => {
+  init()
+})
+const { element } = toRefs(props)
+
+const sortList = ref([])
+const dialogShow = ref(false)
+const sortInit = () => {
+  init()
+  dialogShow.value = true
+}
+const init = () => {
+  sortList.value = deepCopy(element.value.propValue)
+}
+
+const closeDialog = () => {
+  dialogShow.value = false
+}
+const save = () => {
+  element.value.propValue = deepCopy(sortList.value)
+  snapshotStore.recordSnapshotCache()
+  closeDialog()
+}
+
+defineExpose({
+  sortInit
+})
+</script>
+
+<style scoped lang="less">
+.drag-list {
+  overflow: auto;
+  height: 50vh;
+}
+
+.item-dimension {
+  padding: 2px;
+  margin: 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: flex;
+  align-items: center;
+}
+
+.item-icon {
+  cursor: move;
+  margin: 0 2px;
+}
+
+.item-span {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 6px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+</style>