cloudfile-ui/src/components/forwordTree/index.vue

<template>
  <el-dialog v-model="isOpen" append-to-body width="700">
    <template #header>
      <div class="my-header">
        <div class="title">转存到</div>
      </div>
    </template>
    <div class="main-cont">
      <div class="main-cont-left">
        <div class="build-file" v-if="dirBulidNow">
          <img :src="fileImg" alt="" class="left-img build-img" />
          <el-input
            v-model="dirName"
            maxlength="32"
            class="bulid-input"
            clearable
            placeholder="新建目录"
          />
          <el-icon size="20" color="#327CEC" @click="sureDir"
            ><CircleCheckFilled
          /></el-icon>
        </div>
        <el-tree-v2
          ref="treeRef"
          :data="treeData"
          :highlight-current="true"
          :default-expanded-keys="[spaceId]"
          :show-checkbox="false"
          :height="280"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <template #default="{ node }">
            <span style="display: flex; align-items: center">
              <img :src="fileImg" alt="" class="left-img" />
              <!-- 放置图片 -->
              <span>{{ node.label }}</span>
              <!-- 显示节点标签 -->
            </span>
          </template>
        </el-tree-v2>
      </div>
    </div>
    <template #footer>
      <div class="footer">
        <span
          ><el-button @click.stop="buildFile" class="cancel-button"
            >新建文件夹</el-button
          ></span
        >
        <div>
          <span class="dialog-footer">
            <el-button @click="isOpen = false" class="cancel-button"
              >取消</el-button
            >
            <el-button type="primary" @click="confirm" class="sure-button">
              确认
            </el-button>
          </span>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
    <script setup>
import {
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
  nextTick,
  onMounted,
  getCurrentInstance,
} from "vue";
import { ElMessage } from "element-plus";
import fileImg from "@/assets/images/file-img.png";
import direction from "@/assets/images/direction.png";
import useUserStore from "@/store/modules/user";
import { defineEmits } from "vue";
import { builtDir, fileCopy, spaceInfo, dirTree } from "@/api/chat/msg";
const opent = ref(true);
const props = defineProps({
  openForwardFile: {
    type: Boolean,
    default: false,
  },
  forwardTreeData: {
    type: Object,
    default: () => {},
  },
  docId: {
    type: String,
  },
  spaceId: {
    type: String,
  },
});
const defaultProps = {
  children: "children",
  label: "label",
  value: "id",
};
const dirName = ref(""); //新建文件夹名称
const dirBulidNow = ref(false);
const treeRef = ref(null);
const isOpen = ref(props.openForwardFile);
const instance = getCurrentInstance();
watch(
  () => props.openForwardFile,
  (newValue) => {
    isOpen.value = newValue;
  }
);
const treeData = ref([]);
const defaultExpandedKeys = ref([]);
watchEffect(() => {
  treeData.value =[ props.forwardTreeData];
  //   //默认展开第二级
  //   treeData.data.forEach((node) => {
  //     if (node.children) {
  //       // 如果节点有子节点
  //       const childKeys = node.children.map((child) => child.id); // 获取子节点的 key 数组
  //       defaultExpandedKeys.value= [... defaultExpandedKeys.value, ...childKeys]; // 将子节点的 key 数组合并到 defaultExpandedKeys 中
  //     }
  //   });
});

//树
const clickData = ref({});
const handleNodeClick = (data) => {
  clickData.value = data;
};
//确定按钮
const emit = defineEmits(["forwardChangeMsg"]);
const confirm = async () => {
  const copyRes = await fileCopy({
    docId: props.docId,
    dirId: clickData.value.id,
    spaceId: props.spaceId,
  });
  if (copyRes.code === 200) {
    ElMessage({ message: "转存成功", type: "success" });
    dirBulidNow.value = false;
  }
  isOpen.value = false;
};
//新建目录显示
const clickId = ref("");
const buildFile = async () => {
  clickId.value = clickData.value.id;
  if (!clickId.value) {
    return ElMessage({ message: "请选中目录", type: "error" });
  }
  dirBulidNow.value = true;
};
const newTree = async () => {
    //重新获取树结构
    const resDir = await dirTree(3);
    treeData.value=[resDir]
  };

//确认新建目录--点击勾选
const sureDir = async () => {
  const selectedNode = treeRef.value.getCurrentNode()
  const siblings = selectedNode.children;
  const hasSameLabel = siblings.some((node) => node.label === dirName.value);
  if(hasSameLabel){
    ElMessage({ message: "该目录名字已存在,请重新创建", type: "error" });
    return
  }
  console.log('selectedNode', selectedNode)
  const dirRes = await builtDir({
    dirName: dirName.value,
    spaceId: props.spaceId,
    parentId: clickData.value.id,
  });
  if (dirRes.code == 200) {
    ElMessage({ message: "创建成功", type: "success" });
    dirBulidNow.value = false;
    clickId.value = "";
    dirName.value = "";
    newTree();
  }
};
</script>
  <style lang="scss" scoped>
@import "@/assets/styles/tree-common.scss";
.sure-button,
.cancel-button {
  width: 120px;
}
.left-img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.title {
  font-family: "Inter-Medium";
  font-weight: 600;
}
:deep .el-tree {
  //   margin-top: 4px;
  width: 100%;
}
.arrow-img {
  margin-left: 5px;
  width: 12px;
  height: 12px;
}

.build-file {
  background: #f5f7f9;
  padding: 3px 0;
  margin: 4px 0;
  display: flex;
  align-items: center;
  .build-img {
    margin-left: 24px;
  }
  .bulid-input {
    margin-right: 10px;
  }
  :deep .el-input {
    width: 240px !important;
    height: 29px;
  }
}
</style>