0
点赞
收藏
分享

微信扫一扫

侧边栏拖拽+上传+重命名+删除+移动到..+新建目录+新建子目录

vue3+ts+antdv原创请勿转载,纯手写

侧边栏拖拽+上传+重命名+删除+移动到..+新建目录+新建子目录_新增编辑重命名删除

侧边栏拖拽+上传+重命名+删除+移动到..+新建目录+新建子目录_侧边栏_02

侧边栏拖拽+上传+重命名+删除+移动到..+新建目录+新建子目录_侧边栏_03

侧边栏拖拽+上传+重命名+删除+移动到..+新建目录+新建子目录_侧边栏_04

侧边栏拖拽+上传+重命名+删除+移动到..+新建目录+新建子目录_侧边栏_05

<!-- @format -->


<template>

  <div>

    <div class="directory_d">

      <div class="directory_title">目录</div>

      <div class="directory_but">

        <a-tooltip placement="top">

          <template #title>

            <span>{{ expandedKeys.length > 0 ? '全部收起' : '全部展开' }}</span>

          </template>

          <a-button class="doc_action_button" size="small" @click="toggleTreeExpand">

            <span class="material-icons more-icon">unfold_more_double</span>

          </a-button>

        </a-tooltip>

      </div>

      <div>

        <a-button class="doc_action_button" size="small" @click="addTreeClcik">

          <span class="material-icons more-icon">create_new_folder</span>

        </a-button>

      </div>

    </div>

    <div class="tree_d">

      <div class="move_directory" v-show="showRadio">

        <div>移动目录</div>

        <div class="directory_name">

          <div class="directory_name_icon">

            <FolderOutlined />

            <div>{{ thisDirectoryTitle.title }}</div>

          </div>

        </div>

        <div></div>

      </div>

      <div class="root_style">

        <a-radio

          v-show="showRadio"

          :checked="rootDirectory.checked"

          :value="rootDirectory.key"

          :disabled="rootDirectory.disabled"

          size="small"

          @click="handleSidebarRadioChange(rootDirectory.uuid)"

        ></a-radio>

        <div

          class="root_directory"

          :class="{ selected: isRootDirectorySelected }"

          @click="handRootDirectoryClick(rootDirectory)"

        >

          <div class="root_directory_icon">

            <HomeOutlined />

          </div>

          <div class="root_directory_title">知识库名称</div>

        </div>

      </div>

      <div class="new_durectory" v-show="newDirectoryShow">

        <a-input

          placeholder="新目录"

          v-model:value="newDirectoryInput"

          @blur="newDirectoryBlue"

          @keydown.enter="newDirectoryBlue"

        />

      </div>


      <a-tree

        :expandedKeys="expandedKeys"

        :selectedKeys="selectedKey"

        :treeData="treeData"

        :draggable="true"

        @drop="handleDrop"

        @expand="onTreeExpand"

        @select="handleNodeSelect"

      >

        <!-- 定义树节点的渲染方式 -->

        <template #title="{ title, data }">

          <a-row>

            <div class="sidebar_list" :class="{ treeNodeStyle: data.treeNodeselected }">

              <div class="list_one">

                <a-radio

                  v-show="showRadio"

                  :checked="data.checked"

                  :value="data.key"

                  :disabled="data.disabled"

                  size="small"

                  @click="handleSidebarRadioChange(data.key)"

                ></a-radio>

                <FolderOutlined />

              </div>

              <div class="list_two">

                <span class="icon_title" v-if="!data.editing">{{ data.editing ? '' : title }}</span>

                <a-input

                  v-else

                  v-model:value="newrEnameTitle"

                  placeholder="重命名"

                  @blur="saveNode(data)"

                  @keydown.enter="saveNode(data)"

                />

              </div>

              <div class="list_three">

                <div class="three_two_icon">

                  <span class="material-icons more-icon" @click="createSubdirectory(data)"

                    >create_new_folder</span

                  >

                  <a-dropdown placement="bottomRight" trigger="click">

                    <span class="material-icons more-icon">more_vert</span>

                    <template #overlay>

                      <a-menu>

                        <a-menu-item key="1" @click="directoryUploadFilesClick(data)">

                          <div class="menu-item normal_menu_item">

                            <span class="menu-icon material-icons-outlined">upload_file</span>

                            <span>上传文件</span>

                          </div>

                        </a-menu-item>

                        <a-menu-item key="2" @click="handTreeRename(data)">

                          <div class="menu-item normal_menu_item">

                            <span class="menu-icon material-icons-outlined">edit</span>

                            <span>重命名</span>

                          </div>

                        </a-menu-item>

                        <a-menu-item key="3" @click="handMOVEToClcik(data)">

                          <div class="menu-item normal_menu_item">

                            <span class="menu-icon material-icons-outlined">drive_file_move</span>

                            <span>移动到...</span>

                          </div>

                        </a-menu-item>

                        <a-menu-divider />

                        <a-menu-item @click="handTreeleDelete">

                          <div class="menu-item" style="color: #f5222d">

                            <span class="material-icons menu-icon">delete</span>

                            <span>删除</span>

                          </div>

                        </a-menu-item>

                      </a-menu>

                    </template>

                  </a-dropdown>

                </div>

              </div>

            </div>

            <div v-show="data.showInput">

              <a-input

                placeholder="新目录"

                v-model:value="inputValue"

                @blur="showInputCancle(data)"

                @keydown.enter="showInputCancle(data)"

              />

            </div>

          </a-row>

        </template>

      </a-tree>

      <div class="move_but" v-show="showRadio">

        <a-space wrap>

          <a-button type="primary" size="small" @click="submitMobileDirectory">确定</a-button>

          <a-button size="small" @click="cancelMovingDirectory">取消</a-button>

        </a-space>

      </div>

    </div>

  </div>

  <!-- 上传文件 -->

  <uploadFile

    :uploadVisible="showUploadModal"

    :treeData="uplodData"

    :directoryUuid="currentDirectoryUuid"

    @cancel="handleClsoeUploadFile"

    @ok="handleUploadFile"

  />

</template>


<script lang="ts">

  // @ts-nocheck

  import { defineComponent, ref, h, onMounted, watch } from 'vue'

  import { Tree, message, Modal } from 'ant-design-vue'

  import { FolderOutlined, ExclamationCircleOutlined, HomeOutlined } from '@ant-design/icons-vue'

  import uploadFile from './uploadFile.vue'

  import { DocumentApi } from '@/generated/documents/index'

  import { useRouter } from 'vue-router'


  export default defineComponent({

    components: {

      ATree: Tree,

      FolderOutlined,

      uploadFile,

      HomeOutlined,

    },

    emits: ['change', 'upload'],

    props: ['newCurrentDirectoryUuid'],

    setup(props: any, { emit }: any) {

      const router = useRouter()

      const uuid = router.currentRoute.value.params.id as string

      const documentsApi = new DocumentApi()

      const appId = router.currentRoute.value.params.id as number | string

      const name = router.currentRoute.value.query.name as string

      const infoNewCurrentDirectoryUuid = ref([])


      let userInfo =

        sessionStorage.getItem('user') &&

        sessionStorage.getItem('user') != '' &&

        sessionStorage.getItem('user') != 'undefined'

          ? JSON.parse(sessionStorage.getItem('user') || '{}')

          : {}

      const metaData = [

        {

          keyName: 'knowledge_base_id',

          keyValue: appId,

        },

        {

          keyName: 'knowledge_base_name',

          keyValue: name,

        },

        {

          keyName: 'userId',

          keyValue: userInfo.id,

        },

        {

          keyName: 'userLoginId',

          keyValue: userInfo.loginId,

        },

      ]

      watch(

        () => props.newCurrentDirectoryUuid,

        (newValue) => {

          infoNewCurrentDirectoryUuid.value = [newValue]

          let nodeInfo = {

            node: {

              dataRef: {

                title: infoNewCurrentDirectoryUuid.value[0].name, // 传递节点的标题或其他必要信息

                // 其他可能需要传递的属性

                key: infoNewCurrentDirectoryUuid.value[0].uuid,

              },

            },

          }

          console.log(

            infoNewCurrentDirectoryUuid.value,

            infoNewCurrentDirectoryUuid.value[0].uuid,

            infoNewCurrentDirectoryUuid.value[0].name,

            'newCurrentDirectoryUuid.value'

          )

          if (

            infoNewCurrentDirectoryUuid.value.length !== 0 &&

            infoNewCurrentDirectoryUuid.value[0].uuid !== undefined

          ) {

            handleNodeSelect(infoNewCurrentDirectoryUuid.value[0].uuid, nodeInfo)

          }

        },

        { deep: true }

      )

      onMounted(() => {

        getTreeData()

      })

      // 初始化树数据

      const treeData = ref([])

      // 上传文件要用

      const uplodData = ref([])

      // 获取根目录的uuid

      const uuidRootDirectory = ref('')

      // 获取根目录的数据

      const rootDirectory = ref('')

      // const treeData = ref([

      //   {

      //     key: '1',

      //     title: 'Node 1',

      //     checked: false,

      //     children: [

      //       {

      //         key: '2',

      //         title: 'Node 1-1',

      //         checked: false,

      //       },

      //       {

      //         key: '3',

      //         title: 'Node 1-2',

      //         checked: false,

      //       },

      //     ],

      //   },

      //   {

      //     key: '10',

      //     title: 'Node 10',

      //     checked: false,

      //     children: [

      //       {

      //         key: '20',

      //         title: 'Node 1-10',

      //         checked: false,

      //       },

      //       {

      //         key: '30',

      //         title: 'Node 1-20',

      //         checked: false,

      //       },

      //     ],

      //   },

      // ])

      const updateProperties = (directory: any) => {

        directory.title = directory.name

        directory.key = directory.uuid

        // delete directory.name

        // delete directory.uuid

        directory.checked = false

        directory.treeNodeselected = false

        if (directory.subDirectories && directory.subDirectories.length > 0) {

          // 将 subDirectories 改为 children

          directory.children = directory.subDirectories

          // delete directory.subDirectories

          directory.children.forEach((child: any) => {

            updateProperties(child)

          })

        }

      }

      // 获取初始化数据

      const getTreeData = () => {

        documentsApi.directoryTreeData(uuid).then((res: any) => {

          const { code, data } = res.data

          if (code === '200') {

            // 上传文件用到的data

            uplodData.value = [data]

            console.log(uplodData.value, ' uplodData.value')

            selectedKey.value = [data.uuid]

            rootDirectory.value = data

            // sessionStorage.setItem('directoryUuid', JSON.stringify(data))

            // data.subDirectories.forEach((directory: any) => {

            //   console.log(directory, 'directory')

            //   updateProperties(directory)

            // })


            const dataArray = data.subDirectories // 之前将对象转换为数组,新版本直接获取子目录

            dataArray.forEach((directory: any) => {

              updateProperties(directory)

            })

            uuidRootDirectory.value = data

            treeData.value = dataArray

          }

        })

      }

      // 全部展开全部收起

      const expandedKeys = ref<string[]>([]) // 初始为空数组表示全部收起

      const onTreeExpand = (keys: any) => {

        // 将展开的节点保存到 expandedKeys 中

        expandedKeys.value = keys

      }

      const expandAllChildren = (node: { key: any; children: any[] }) => {

        // 将当前节点的 key 加入 expandedKeys 中

        expandedKeys.value.push(node.key)


        // 递归处理子节点

        if (node.children && node.children.length > 0) {

          node.children.forEach((childNode: any) => {

            expandAllChildren(childNode) // 递归展开所有子节点

          })

        }

      }

      const toggleTreeExpand = () => {

        if (expandedKeys.value.length === 0) {

          // 全部展开

          treeData.value.forEach((node: any) => {

            expandAllChildren(node) // 递归展开所有子节点

          })

        } else {

          // 全部收起

          expandedKeys.value = []

        }

      }

      // 新增节点

      const selectedKey = ref<string>('') // 用于存储当前选中节点的 key

      const showInput = ref(false) //控制新增input框的展示

      const inputValue = ref<string>('') //新增节点的title

      const deleteTitle = ref<string>('') //删除所用到的title

      const newrEnameTitle = ref<string>('') //重命名获取最新tile

      const newDirectoryInput = ref<string>('')

      const newDirectoryShow = ref(false)

      const createSubdirectory = (data) => {

        selectedKey.value = [data.key]

        isRootDirectorySelected.value = false

        addTreeClcik()

      }

      // 处理节点选中事件  获取到当前点击的节点

      const handleNodeSelect = (

        selectedKeys: any[],

        info: { node: { dataRef: { title: any } } }

      ) => {

        // if (selectedKeys[0] == infoNewCurrentDirectoryUuid.value[0].key) {

        // sessionStorage.setItem('directoryUuid', info.node.dataRef.key)

        console.log(selectedKeys, info.node.dataRef, '1111')

        if (selectedKeys[0]) {

          emit('change', JSON.stringify(info.node.dataRef))

          deleteTitle.value = info.node.dataRef.title

          selectedKey.value = [selectedKeys[0]] // 更新选中的节点 key

          newDirectoryShow.value = false

          isRootDirectorySelected.value = false

          // info.node.dataRef.treeNodeselected = true

          // 遍历整个树节点数据,设置选中节点的 treeNodeselected 为 true,其他节点为 false

          const updateTreeNodes = (nodes) => {

            nodes.forEach((node) => {

              if (node.key === info.node.dataRef.key) {

                node.treeNodeselected = true

              } else {

                node.treeNodeselected = false

                node.showInput = false

                node.editing = false

              }

              if (node.children) {

                updateTreeNodes(node.children)

              }

            })

          }


          updateTreeNodes(treeData.value)

        }

        // } else {

        //   return false

        // }

      }

      // a-tree选中的key

      const addTreeClcik = () => {

        // isRootDirectorySelected.value = false

        // inputValue.value = ''

        if (!isRootDirectorySelected.value) {

          if (selectedKey.value[0]) {

            // 在 treeData 中找到选中的节点

            const findNode = (nodes: any[], parentKey: null) => {

              newDirectoryShow.value = false

              newDirectoryInput.value = ''

              nodes.forEach((node: { key: any; showInput: boolean; children: any }) => {

                node.treeNodeselected = false

                node.showInput = false

                if (node.key === selectedKey.value[0]) {

                  node.showInput = true

                  node.treeNodeselected = true

                  if (parentKey && node.children) {

                    // 隐藏父节点的子节点的输入框

                    nodes.forEach((n: { key: any; children: any[] }) => {

                      if (n.key === parentKey && n.children) {

                        n.children.forEach((child: { showInput: boolean }) => {

                          child.showInput = false

                          child.treeNodeselected = false

                        })

                      }

                    })

                  }

                } else {

                  node.showInput = false

                  node.treeNodeselected = false

                  if (node.children) {

                    findNode(node.children, node.key)

                  }

                }

              })

            }

            findNode(treeData.value, selectedKey.value[0])

          } else {

            newDirectoryShow.value = false

            // message.error('请选择需要新增的新目录')

            treeData.value.forEach((node: { showInput: boolean; children: any[] }) => {

              node.showInput = false

              node.treeNodeselected = false

              if (node.children) {

                node.children.forEach((child: { showInput: boolean }) => {

                  child.showInput = false

                  node.treeNodeselected = false

                })

              }

            })

          }

        } else {

          newDirectoryShow.value = true

        }

      }

      const regularExpression = ref(new RegExp('^[a-zA-Z0-9_-][a-zA-Z0-9 _-]*$'))

      const showInputCancle = (datakey: { key: any }) => {

        // 阻止事件冒泡,避免同时触发blur事件

        // datakey.stopPropagation()

        if (inputValue.value) {

          console.log(

            inputValue.value,

            regularExpression.value.test(inputValue.value),

            'regularExpression.value.test(inputValue.value)'

          )

          const isMatch = regularExpression.value.test(inputValue.value) // 进行匹配

          if (!isMatch) {

            message.warning('请检查存在特殊字符')

          } else {

            let data = {

              parentUuid: datakey.key,

              name: inputValue.value,

              metaDataList: metaData,

            }

            documentsApi.addNewDirectory(data).then((res: any) => {

              const { code, data } = res.data

              if (code === '200') {

                getTreeData()

                emit('upload')

                inputValue.value = ''

                treeData.value.forEach((node: { showInput: boolean; children: any[] }) => {

                  node.showInput = false

                  if (node.children) {

                    node.children.forEach((child: { showInput: boolean }) => {

                      child.showInput = false

                    })

                  }

                })

              }

            })

          }

        } else {

          message.warning('新目录不能为空')

        }

      }

      // 新增一级目录

      const newDirectoryBlue = (data) => {

        const isMatch = regularExpression.value.test(newDirectoryInput.value) // 进行匹配

        if (!isMatch) {

          message.warning('请检查存在特殊字符')

        } else {

          data.stopPropagation()

          if (newDirectoryInput.value) {

            let data = {

              parentUuid: uuidRootDirectory.value.uuid,

              name: newDirectoryInput.value,

              metaDataList: metaData,

            }

            documentsApi.addNewDirectory(data).then((res: any) => {

              const { code, data } = res.data

              if (code === '200') {

                getTreeData()

                emit('upload')

                newDirectoryShow.value = false

                newDirectoryInput.value = ''

              }

            })

          } else {

            newDirectoryShow.value = false

            newDirectoryInput.value = ''

          }

        }

      }

      // 处理拖拽事件

      const isSameLevel = (treeData: any, dragKey: any, dropKey: any) => {

        let dragNode: { parent: any }, dropNode: { parent: any }


        // 递归查找拖拽节点和目标节点

        function findNodes(data: string | any[], key: any) {

          for (let i = 0; i < data.length; i++) {

            if (data[i].key === key) {

              return data[i]

            }

            if (data[i].children) {

              const result = findNodes(data[i].children, key)

              if (result) {

                return result

              }

            }

          }

          return null

        }


        dragNode = findNodes(treeData, dragKey)

        dropNode = findNodes(treeData, dropKey)


        if (dragNode && dropNode && dragNode.parent === dropNode.parent) {

          return true // 在同级操作

        } else {

          return false // 不在同级操作

        }

      }


      const handleDrop = (info: any) => {

        const dropKey = info.node.key

        const dragKey = info.dragNode.key

        const dropPos = info.node.pos.split('-')

        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])

        const loop = (

          data: string | any[],

          key: any,

          callback: {

            (item: any, index: any, arr: any): void

            (item: any): void

            (item: any): void

            (item: any, index: any, arr: any): void

            (arg0: any, arg1: number, arg2: any): any

          }

        ) => {

          for (let i = 0; i < data.length; i++) {

            if (data[i].key === key) {

              return callback(data[i], i, data)

            }

            if (data[i].children) {

              loop(data[i].children, key, callback)

            }

          }

        }

        const data = [...treeData.value]


        let dragObj: any

        loop(data, dragKey, (item: any, index: number, arr: any[]) => {

          arr.splice(index, 1)

          dragObj = item

        })


        if (!info.dropToGap) {

          loop(data, dropKey, (item: { children: any[] }) => {

            item.children = item.children || []

            // 示例添加到头部,可以是随意位置

            item.children.unshift(dragObj)

          })

        } else if (

          (info.node.props.children || []).length > 0 &&

          info.node.props.expanded &&

          dropPosition === 1

        ) {

          loop(data, dropKey, (item: { children: any[] }) => {

            item.children = item.children || []

            // 示例添加到头部,可以是随意位置

            item.children.unshift(dragObj)

          })

        } else {

          let ar: any[]

          let i: number

          loop(data, dropKey, (item: any, index: any, arr: any) => {

            ar = arr

            i = index

          })

          if (dropPosition === -1) {

            ar.splice(i, 0, dragObj)

          } else {

            ar.splice(i + 1, 0, dragObj)

          }

        }

        // treeData.value = data

        //dragKey  需要移动的目录

        // dropKey 移动到指定目录uuid

        if (isSameLevel(treeData, dragKey, dropKey)) {

          console.log('拖拽和目标在同级操作')

        } else {

          console.log(info.node, info.dragNode, 'info.dragNode')

          const isNameDuplicate = checkNameDuplicate(info.dragNode.title, info.node.children)

          if (info.node.children && isNameDuplicate) {

            message.warning('名称重复,不能移动')

            getTreeData()

            return

          }

          // console.log('拖拽和目标不在同级操作')

          let dropdatakey = {

            parentUuid: dropKey, //要传到的父节点uuid

            name: info.dragNode.title,

            metaDataList: metaData,

            uuid: dragKey,

          }

          documentsApi.renameDirectories(dragKey, dropdatakey).then((res: any) => {

            const { code } = res.data

            if (code === '200') {

              showRadio.value = false

              targetuuid.value = ''

              getTreeData()

              emit('upload')

            }

          })

        }

      }

      const checkNameDuplicate = (name: string, children: any[]) => {

        return children.some((child) => child.title === name)

      }

      // 删除tree

      // 删除提示框所需

      const handTreeleDelete = () => {

        if (selectedKey.value[0]) {

          Modal.confirm({

            title: '删除目录',

            icon: h(ExclamationCircleOutlined),

            content: `您确定要删除目录“${deleteTitle.value}”吗?删除后相关的数据将无法恢复`,

            okText: '删除',

            okType: 'danger',

            cancelText: '取消',

            onOk() {

              //deleteTitle.value 删除的目录名称

              const uuid = selectedKey.value[0] //获取需要删除的key

              documentsApi.directoryDelete(uuid).then((res: any) => {

                const { code } = res.data

                if (code === '200') {

                  emit('upload')

                  getTreeData()

                }

              })

            },

            onCancel() {

              console.log('取消')

            },

          })

        }

      }

      // 重命名

      const handTreeRename = (data: any) => {

        newrEnameTitle.value = data.title

        const findAndRename = (nodes: any[], targetKey: any) => {

          nodes.forEach(

            (node: { key: any; editing: boolean; showInput: boolean; children: any }) => {

              if (node.key === targetKey) {

                node.editing = true

                node.showInput = false

              } else {

                node.editing = false

                node.showInput = false

              }

              if (node.children) {

                findAndRename(node.children, targetKey)

              }

            }

          )

        }


        findAndRename(treeData.value, data.key)

      }

      // 重命名递归查找并更新节点标题

      const findAndUpdateNode = (nodes: string | any[], keyToFind: any, newTitle: any) => {

        for (let i = 0; i < nodes.length; i++) {

          const node = nodes[i]

          if (node.key === keyToFind) {

            // 找到匹配的 key,更新标题

            node.title = newTitle

            return true // 返回 true 表示找到并更新成功

          }

          if (node.children) {

            const found = findAndUpdateNode(node.children, keyToFind, newTitle)

            if (found) {

              return true // 如果在子节点中找到,则直接返回 true

            }

          }

        }

        return false // 如果未找到,则返回 false

      }

      // 重命名内容的方法

      const saveNode = (nodedata: any, newTitle: any, event: Event) => {

        const isMatch = regularExpression.value.test(newrEnameTitle.value) // 进行匹配

        if (!isMatch) {

          message.warning('请检查存在特殊字符')

          getTreeData()

        } else {

          if (newrEnameTitle.value && newrEnameTitle.value !== nodedata.title) {

            let data = {

              parentUuid: nodedata.parentUuid, //父节点uuid

              name: newrEnameTitle.value,

              metaDataList: metaData,

              uuid: nodedata.key,

            }

            documentsApi.renameDirectories(nodedata.key, data).then((res: any) => {

              const { code } = res.data

              if (code === '200') {

                const success = findAndUpdateNode(treeData.value, nodedata.key, newTitle)

                emit('upload')

                nodedata.editing = false

                newrEnameTitle.value = ''

                if (!success) {

                  console.error('未找到匹配的子级节点 key')

                }

                getTreeData()

              }

            })

            event.stopPropagation() // 阻止事件冒泡

          } else {

            message.warning('名称不能为空或名称重复')

            getTreeData()

            const success = findAndUpdateNode(treeData.value, nodedata.key, newTitle)

            nodedata.editing = false

            if (!success) {

              console.error('未找到匹配的子级节点 key')

            }

          }

        }

      }

      // 移动到。。

      const showRadio = ref(false) //控制移动radio的显示隐藏

      const thisDirectoryTitle = ref<string>('')

      const targetuuid = ref<string>('')

      // 移动到某一个节点,并且选择key

      const handleSidebarRadioChange = (key: any) => {

        const updateCheckedStatus = (items: any[], radioKey: any) => {

          items.forEach((item: { key: any; children: any }) => {

            if (item.key === radioKey) {

              item.checked = true

            } else {

              item.checked = false

            }

            if (item.children) {

              updateCheckedStatus(item.children, radioKey)

            }

          })

        }

        targetuuid.value = key

        updateCheckedStatus(treeData.value, key)

      }

      const handMOVEToClcik = (data: any) => {

        thisDirectoryTitle.value = data

        showRadio.value = true

        data.disabled = true

      }

      // 确定提交移动目录 获取到key  title

      const submitMobileDirectory = () => {

        if (targetuuid.value) {

          let data = {

            parentUuid: targetuuid.value, //要传到的父节点uuid

            name: thisDirectoryTitle.value.title,

            metaDataList: metaData,

            uuid: thisDirectoryTitle.value.key,

          }

          documentsApi.renameDirectories(thisDirectoryTitle.value.key, data).then((res: any) => {

            const { code } = res.data

            if (code === '200') {

              showRadio.value = false

              rootDirectory.value.checked = false

              targetuuid.value = ''

              getTreeData()

              emit('upload')

            }

          })

        } else {

          message.warning('请选择需要移动的目录')

        }

      }

      // 取消提交移动目录

      const cancelMovingDirectory = () => {

        showRadio.value = false

        getTreeData()

      }

      // 上传文件

      const showUploadModal = ref<Boolean>(false)

      const currentDirectoryUuid = ref<string>('')

      const directoryUploadFilesClick = (data: any) => {

        currentDirectoryUuid.value = data.key

        showUploadModal.value = true

      }

      // 取消上传

      const handleClsoeUploadFile = () => {

        showUploadModal.value = false

      }

      // 上传成功关闭弹窗

      const handleUploadFile = () => {

        emit('upload')

        showUploadModal.value = false

      }


      // 所有文件点击

      const isRootDirectorySelected = ref(true)

      const handRootDirectoryClick = (root) => {

        getTreeData()

        isRootDirectorySelected.value = true // 切换选中状态

        selectedKey.value = []

        let dataArrayRoot = [root]

        dataArrayRoot.forEach((directory: any) => {

          directory.title = directory.name

          directory.key = directory.uuid

          delete directory.name

          delete directory.uuid

          directory.checked = false

        })

        console.log(dataArrayRoot[0].key, 'root')


        emit('change', JSON.stringify(dataArrayRoot[0]))

      }

      return {

        treeData,

        handleDrop,

        expandedKeys,

        toggleTreeExpand,

        addTreeClcik,

        onTreeExpand,

        handleNodeSelect,

        showInput,

        inputValue,

        regularExpression,

        handTreeleDelete,

        handTreeRename,

        saveNode,

        newrEnameTitle,

        showRadio,

        handleSidebarRadioChange,

        handMOVEToClcik,

        thisDirectoryTitle,

        submitMobileDirectory,

        cancelMovingDirectory,

        newDirectoryShow,

        newDirectoryInput,

        newDirectoryBlue,

        showInputCancle,

        directoryUploadFilesClick,

        showUploadModal,

        handleClsoeUploadFile,

        handleUploadFile,

        currentDirectoryUuid,

        selectedKey,

        rootDirectory,

        handRootDirectoryClick,

        isRootDirectorySelected,

        uplodData,

        createSubdirectory,

        infoNewCurrentDirectoryUuid,

      }

    },

  })

</script>


<style lang="less" scoped>

  .directory_d {

    display: flex;

    padding: 13px 16px;

    border-bottom: 1px solid #eaecf0;

    .directory_title {

      flex: 5;

    }

    .directory_but {

      flex: 1;

    }

  }

  .doc_action_button {

    padding: 0;

    box-shadow: none;

    outline: none;

    border: none;

    width: 32px;

    height: 20px;

    background-color: transparent;

    &:hover {

      background-color: #1018280f;

    }

  }

  .tree_d {

    padding-top: 13px;

  }

  .sidebar_list {

    padding: 0px 0px 0px 5px;

    width: 100%;

    &:hover .list_three {

      display: block;

    }

    display: flex;

    .list_one {

      display: flex;

    }

    .list_two {

      width: 230px;

      .icon_title {

        display: block;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        width: 200px; /* 设置容器的宽度 */

        padding-left: 10px;

      }

    }

    .list_three {

      display: none;

      position: absolute;

      right: 0px;

      .three_two_icon {

        display: flex;

      }

      .material-icons {

        padding: 0;

        width: 24px;

        height: 24px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #667085;

        font-size: 20px;

        cursor: pointer;

      }

    }

  }

  /deep/ .opAnt-tree-list-holder-inner {

    align-items: flex-start;

    background-color: #f9fafb;

  }

  /deep/ .opAnt-tree-treenode {

    display: flex;

    align-items: flex-start;

    padding: 0 0 8px 0;

    outline: none;

  }

  /deep/ .material-icons {

    font-size: 16px;

    padding-right: 0px !important;

  }

  .move_but {

    padding: 10px;

    border-top: 1px solid #eaecf0;

  }

  .move_directory {

    padding: 5px 15px;

    font-size: 14px;

    color: #101828;

    .directory_name {

      padding: 5px 5px;

      .directory_name_icon {

        display: flex;

        align-items: center;

        gap: 2px;

        align-self: stretch;

        border-radius: var(--BorderRadius-borderRadius, 6px);

        border: 1px solid var(--colorLink, #2f54eb);

        background: var(--Primary-colorPrimaryBg, #f0f5ff);

        padding: 5px 10px;

      }

    }

  }

  .new_durectory {

    padding: 0px 10px;

  }

  /deep/ :where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree .opAnt-tree-node-content-wrapper,

  :where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree .opAnt-tree-checkbox + span {

    position: static;

  }

  /deep/

    :where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree

    .opAnt-tree-node-content-wrapper.opAnt-tree-node-selected,

  :where(.css-dev-only-do-not-override-1hsjdkk).opAnt-tree

    .opAnt-tree-checkbox

    + span.opAnt-tree-node-selected {

    // background-color: #e6f4ff;

    background: #fff;

    // color: #2f54eb;

    // border: 1px solid #85a5ff;

  }

  .root_style {

    display: flex;

    padding: 0 6px 0 6px;

  }

  .root_directory {

    display: flex;

    padding: 5px 5px 5px 5px;

    width: 100%;

    cursor: pointer;

  }

  .root_directory_icon {

    padding-right: 10px;

  }

  .root_directory_title {

  }

  .selected {

    /* 选中状态下的样式 */

    background: #f0f5ff;

    color: #2f54eb;

    border: 1px solid #85a5ff;

    border-radius: 4px;

  }

  .treeNodeStyle {

    background: #f0f5ff;

    color: #2f54eb;

    border: 1px solid #85a5ff;

    border-radius: 4px;

    padding: 0px 0px 0px 5px;

  }

</style>


举报

相关推荐

0 条评论