拖拽排序

src/components/DropFile/DropFile.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="props.showFile"
+      width="980px"
+      top="20vh"
+      title="文件排序"
+      @close="close"
+    >
+      <div class="main">
+        <!-- 盒子区域 -->
+        <div class="bigBox" id="bigBox">
+          <div v-for="item in listArr" :key="item" class="one_box">
+            <img :src="wangzhi + item.path" alt="" />
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="sureDrop"> 完成 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  reactive,
+  defineComponent,
+  watch,
+  toRaw,
+  onMounted,
+  defineExpose,
+  onDeactivated,
+} from "vue";
+import Sortable from "sortablejs";
+
+const wangzhi = import.meta.env.VITE_APP_BASE_API;
+const listArr = ref([]);
+const baseArr = ref([]);
+const props = defineProps({
+  showFile: {
+    type: Boolean,
+    default: false,
+  },
+  copyList: {
+    type: Object,
+    default: {},
+  },
+});
+const emit = defineEmits(["closeshowFile","changeList"]);
+const rowDrop = () => {
+  const el = document.getElementById("bigBox"); //找到想要拖拽的那一列
+  Sortable.create(el, {
+    //结束拖拽事件
+    async onEnd({ newIndex, oldIndex }) {
+      const newItem = listArr.value[newIndex];
+      const oldItem = listArr.value[oldIndex];
+      listArr.value[newIndex] = oldItem;
+      listArr.value[oldIndex] = newItem;
+    //   console.log("2copyList.value", listArr.value);
+    },
+  });
+};
+const close = () => {
+  emit("closeshowFile");
+};
+const sureDrop = ()=>{
+emit('changeList',listArr.value)
+}
+onMounted(() => {
+  listArr.value = props.copyList;
+  baseArr.value = props.copyList;
+
+  setTimeout(() => {
+    rowDrop();
+  }, 500);
+});
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  margin-top: 16px;
+  width: 100%;
+  padding: 0 16px;
+  max-height: 700px;
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: space-between;
+  overflow-y: auto;
+  .one_box {
+    width: 300px;
+    height: 220px;
+    border: 1px solid #c1cce3;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+    border-radius: 4px 4px 4px 4px;
+    box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .top_check {
+      position: absolute;
+      top: -3%;
+      right: 1%;
+    }
+  }
+}
+:deep(.el-dialog__body) {
+  padding: 0 !important;
+}
+</style>

src/components/MoveTo/MoveTo.vue

@@ -12,10 +12,22 @@
           <el-input v-model="form.fileName" />
         </el-form-item>
         <el-form-item label="是否合并">
-          <el-radio-group v-model="form.merge">
+          <!-- <el-radio-group v-model="form.merge">
             <el-radio :label="true">是</el-radio>
             <el-radio :label="false">否</el-radio>
-          </el-radio-group>
+          </el-radio-group> -->
+          <el-switch
+            v-model="form.merge"
+            class="mb-2"
+            style="--el-switch-on-color: #646adf; --el-switch-off-color: #eee"
+            active-text="是"
+            inactive-text="否"
+            :disabled="props.scanFileArr.length == 1"
+            @change="changeMerge"
+          />
+          <el-button v-if="form.merge" @click="toDrop" style="margin-left: 16px"
+            >点击排序</el-button
+          >
         </el-form-item>
         <el-form-item label="目标目录">
           <el-input v-model="thisNode.label" disabled />
@@ -47,6 +59,13 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+    <DropFile
+      v-if="showFile"
+      :showFile="showFile"
+      @changeList="changeList"
+      @closeshowFile="closeshowFile"
+      :copyList="copyList"
+    ></DropFile>
   </div>
 </template>
 
@@ -67,6 +86,7 @@ import myfile from "@/api/myfile/myfile";
 import { claimFile } from "@/api/scanner/info.js";
 import { ElMessage } from "element-plus";
 import { setIcon } from "@/utils/index.js";
+import DropFile from "@/components/DropFile/DropFile.vue";
 const props = defineProps({
   openScanMove: {
     type: Boolean,
@@ -96,6 +116,9 @@ const props = defineProps({
 const treeData = ref();
 const dirIds = ref();
 const thisNode = ref({}); //当前选中的接点
+const showFile = ref(false);
+const copyList = ref([]);
+const queryQ = ref([]);
 const form = ref({
   fileName: "扫描文件" + Date.now(),
   merge: false,
@@ -123,8 +146,8 @@ const onSubmit = async () => {
     dirId: thisNode.value.value,
     merge: form.value.merge,
     name: form.value.fileName,
-    q: toRaw(props.scanFileArr),
-    spaceId: props.thisFolder?props.thisFolder.spaceId:props.spaceId,
+    q: queryQ.value,
+    spaceId: props.thisFolder ? props.thisFolder.spaceId : props.spaceId,
   };
   // console.log("query", query);
   const res = await claimFile(query);
@@ -159,10 +182,37 @@ function getFileTree() {
 const setImg = (type) => {
   return setIcon(type);
 };
+const closeshowFile = () => {
+  showFile.value = false;
+};
+
+// 选择合并
+const changeMerge = () => {
+  if (form.value.merge) {
+    showFile.value = true;
+
+    // console.log("merge");
+  }
+};
+const toDrop = () => {
+  showFile.value = true;
+};
+const changeList = (newList) => {
+  showFile.value = false;
+  copyList.value = newList;
+  queryQ.value = copyList.value.map((item) => item.q);
+  // console.log("queryQ", queryQ.value);
+};
 onMounted(() => {
   getFileTree();
+  // setTimeout(() => {
+  //   rowDrop();
+  // }, 500);
   // console.log("thisFolder", props.thisFolder);
   // console.log("scanFileArr", props.scanFileArr);
+  copyList.value = props.scanFileArr;
+  queryQ.value = copyList.value.map((item) => item.q);
+  // console.log("queryQ", queryQ.value);
   if (props.thisFolder) {
     thisNode.value = {
       label: props.thisFolder.dirName,

src/components/ScanFile/ScanFile.vue

@@ -66,6 +66,7 @@ const copyList = ref(props.scannerFiles);
 const total = ref(333); //总计数量
 const wangzhi = import.meta.env.VITE_APP_BASE_API;
 const fileArr = ref([]);
+const savaFileArr = ref([])
 const emit = defineEmits(["closeOpen", "saveScanFile"]);
 const closeOpen = () => {
   emit("closeOpen");
@@ -117,31 +118,31 @@ const checkAllChange = () => {
     props.scannerFiles.forEach((item) => {
       fileArr.value.push(item.q);
     });
-    const oldArr = JSON.parse(JSON.stringify(copyList.value))
-    copyList.value = oldArr.map(item=>{
-      item.checked = true
-      return item
-    })
-  }else{
-    const oldArr = JSON.parse(JSON.stringify(copyList.value))
-    copyList.value = oldArr.map(item=>{
-      item.checked = false
-      return item
-    })
+    const oldArr = JSON.parse(JSON.stringify(copyList.value));
+    copyList.value = oldArr.map((item) => {
+      item.checked = true;
+      return item;
+    });
+  } else {
+    const oldArr = JSON.parse(JSON.stringify(copyList.value));
+    copyList.value = oldArr.map((item) => {
+      item.checked = false;
+      return item;
+    });
   }
   // console.log("fileArr", fileArr.value);
 };
 const toSave = () => {
   // console.log("copyList", copyList.value);
-  if(!copyList.value.some(item=>item.checked == true)){
+  if (!copyList.value.some((item) => item.checked == true)) {
     return ElMessage({ message: "请先勾选文件", type: "error" });
   }
-  const arr = []
-  copyList.value.forEach(item=>{
-    if(item.checked){
-      arr.push(item.q)
+  const arr = [];
+  copyList.value.forEach((item) => {
+    if (item.checked) {
+      arr.push(toRaw(item));
     }
-  })
+  });
   // console.log('arr',arr);
   // console.log('chengeC',copyList.value);
   emit("saveScanFile", arr);
@@ -161,7 +162,7 @@ const rowDrop = () => {
 };
 onMounted(async () => {
   setTimeout(() => {
-    rowDrop();
+    // rowDrop();
     const arr = copyList.value;
     copyList.value = arr.map((item) => {
       item.checked = false;

src/components/historyList/index.vue

@@ -139,10 +139,10 @@ const emit = defineEmits(["changeMsgClose",'setHisData']);
 //点击预览
 const previewFileClick =async (item) => {
   console.log('preitem',item);
-  const res =await getInfo(item.docId)
-  console.log('res',res);
-  addFileTab(res.data,0,0,1,item.fileId);
-  // emit("setHisData", item);
+  // const res =await getInfo(item.docId)
+  // console.log('res',res);
+  // addFileTab(res.data,0,0,1,item.fileId);
+  emit("setHisData", item);
   isOpen.value = false;
 };
 const clickList = (index) => {