update:拖拽优化

src/components/common/uploadList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="comp-upload-list">
-    <div class="btn" @click="listVisible = true"><el-icon :size="22"><Upload /></el-icon></div>
+    <div ref="dragRef" class="btn" @click="openFun" @mousedown="startDragFun"><el-icon :size="22"><Upload /></el-icon></div>
     <el-drawer
       title="上传列表"
       v-model="listVisible"
@@ -63,6 +63,12 @@ const UPLOAD_FILE_STATUS: any = { // TODO
   '2': '上传完成',
 };
 
+const dragRef = ref<any>();
+let isDragging = false;
+let isDragged = false;
+let offsetX = 0;
+let offsetY = 0;
+
 emitter.on('ADD_UPLOAD_FILE', (addData: any) => {
   const data = addData.data;
   data.status = '0'; // 默认状态
@@ -159,9 +165,66 @@ const uploadFun = async(params: any) => {
   return data;
 };
 
+const openFun = () => {
+  if (isDragged) {
+    isDragged = false;
+    return;
+  }
+  listVisible.value = true;
+};
+
 const removeFun = (index: any) => {
   listData.value.splice(index, 1);
 };
+
+const startDragFun = (e: any) => {
+  isDragging = true;
+  const rect = dragRef.value.getBoundingClientRect();
+  offsetX = e.clientX - rect.left;
+  offsetY = e.clientY - rect.top;
+  document.addEventListener('mousemove', onDragFun);
+  document.addEventListener('mouseup', stopDragFun);
+};
+const onDragFun = (e: any) => {
+  if (!isDragging) {
+    return;
+  }
+  const el = dragRef.value;
+  const width = el.offsetWidth;
+  const height = el.offsetHeight;
+  let x = e.clientX - offsetX;
+  let y = e.clientY - offsetY;
+  isDragged = true;
+  const maxX = window.innerWidth - width;
+  const maxY = window.innerHeight - height;
+  x = Math.max(0, Math.min(x, maxX));
+  y = Math.max(0, Math.min(y, maxY));
+  if (x <= 0) {
+    x = 0;
+    isDragging = false;
+  }
+  if (x >= maxX) {
+    x = maxX;
+    isDragging = false;
+  }
+  if (y <= 0) {
+    y = 0;
+    isDragging = false;
+  }
+  if (y >= maxY) {
+    y = maxY;
+    isDragging = false;
+  }
+  el.style.left = x + 'px';
+  el.style.top = y + 'px';
+};
+const stopDragFun = () => {
+  setTimeout(() => {
+    isDragging = false;
+  }, 200);
+  document.removeEventListener('mousemove', onDragFun);
+  document.removeEventListener('mouseup', stopDragFun);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -178,9 +241,10 @@ const removeFun = (index: any) => {
     background-color: var(--el-color-primary);
     box-shadow: 0 0 10px var(--el-text-color-primary);
     border-radius: 50%;
-    z-index: 999;
+    z-index: 9999;
     color: var(--el-bg-color);
     cursor: pointer;
+    user-select: none;
   }
   .content {
     height: 100%;

src/layouts/cid.vue

@@ -11,16 +11,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { getAllDictDataFun } from '@/utils/common';
 import UploadList from '@/components/common/uploadList/index.vue';
+import { useRoute } from 'vue-router';
 
-const w: any = window;
-const $wujie: any = w.$wujie;
-const previewMode = $wujie?.props?.VIEW_MODE || '';
+const route = useRoute();
+const previewMode = ref<any>(false);
 
 const loading = ref(true);
 
+watch(() => route.path, () => {
+  previewMode.value = route.path.indexOf('/approvalPreview') > -1;
+}, { deep: true, immediate: true });
+
 onMounted(async() => {
   await getAllDictDataFun();
   loading.value = false;