BTDK-DOC/src/pages/fileDoc/index.vue

<template>
  <div class="firmware-management-wrap">
    <EdfsWrap class="firmware-table" :customLeft="true">
      <template #title-left>
        <el-breadcrumb :separator-icon="ArrowRight">
          <template v-for="(item, index) in breadcrumbList" :key="index">
            <el-breadcrumb-item
              :class="{ active: index + 1 < breadcrumbList.length }"
              @click="onCrumb"
              >{{ item.name }}</el-breadcrumb-item
            >
          </template>
        </el-breadcrumb>
      </template>
      <EdfsContextMenu
        eventSourceClass="SourceClass"
        :disabledEmpty="false"
        @visibleChange="onVisibleChange"
        ref="contextMenuRef"
      >
        <div class="file-list">
          <div v-for="item in dataList" :key="item.id" @click="onFileOpen(item)">
            <div class="item SourceClass" v-setItem="item">
              <div class="file-header">
                <div></div>
                <Icon
                  class="icon"
                  icon="solar:hamburger-menu-outline"
                  @click="onFile"
                ></Icon>
              </div>
              <div class="file-icon">
                <img :src="item.type === 'folder' ? Folder : Document" />
              </div>
              <div class="file-name">
                <el-input
                  class="edit-input"
                  @click.stop="() => {}"
                  v-show="item?.isEdit"
                  v-model="editFileName"
                  :ref="el => setInputRefs(el, item.id)"
                  @blur="onSaveRename(item)"
                />
                <span v-show="!item?.isEdit">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <template #menu="{ menuData }">
          <div
            v-for="menu in dropdownMenu"
            :key="menu.command"
            @click="onCommand(menu.command, menuData)"
          >
            <img
              v-if="menu?.icon"
              :src="menu?.icon"
              width="20"
              style="margin-right: 8px"
            />
            <span :style="{ color: menu.command === 'delete' ? 'red' : 'inherit' }">{{
              menu.label
            }}</span>
          </div>
        </template>
      </EdfsContextMenu>
    </EdfsWrap>
  </div>
</template>

<script setup lang="ts">
import EdfsWrap from '@/components/dashboard/Edfs-wrap.vue'
import { deleteFirmware, getFirmwareList } from '@/api/module/eam/device/firmware'
import { isResError, useMessage } from '@/hooks/useMessage.js'
import { ArrowRight } from '@element-plus/icons-vue'
import ListJson from './list.json'
import Folder from '@/assets/image/dashboard/file/folder.svg'
import Upload from '@/assets/image/dashboard/file/upload.svg'
import Document from '@/assets/image/dashboard/file/document.svg'
import { Icon } from '@/components/dashboard/Icon'
import EdfsContextMenu from '@/components/dashboard/Edfs-context-menu/index.vue'
import { color } from 'echarts'

const breadcrumbList = ref([{ name: '全部文件', id: 'all' }])

const fileDropdownMenu = [
  { command: 'open', label: '打开' },
  { command: 'rename', label: '重命名' },
  { command: 'delete', label: '删除' },
]
const operationDropdownMenu = [
  { command: 'newFolder', label: '新建文件夹', icon: Folder },
  // { command: 'upload', label: '上传', icon: Upload },
  { command: 'newMarkdown', label: '新建文档', icon: Document },
]

const dropdownMenu = computed(() => {
  return menuTarget.value ? fileDropdownMenu : operationDropdownMenu
})

const message = useMessage()

const dataList = ref<any>(ListJson)

async function loadData() {}

async function onDelete(id: string) {
  try {
    await message.delConfirm()
    const res = await deleteFirmware(id)
    if (isResError(res)) return
    message.success('删除成功')
    loadData()
  } catch (error) {}
}

const contextMenuRef = ref<any>(null)
function onFile(e: any) {
  contextMenuRef.value.onContextmenu(e)
}

function onNewFolder() {
  const folder = {
    id: dataList.value.length + 1,
    name: '新建文件夹',
    type: 'folder',
    isEdit: true,
  }
  dataList.value.push(folder)
  onRename(folder)
}

function onNewMarkdown() {
  const markdown = {
    id: dataList.value.length + 1,
    name: '新建文档',
    type: 'markdown',
    isEdit: true,
  }
  dataList.value.push(markdown)
  onRename(markdown)
}

function onCommand(command: string, item: any) {
  switch (command) {
    case 'delete':
      // onDelete()
      break
    case 'rename':
      onRename(item)
      break
    case 'open':
      onFileOpen(item)
      break
    case 'newFolder':
      onNewFolder()
      break
    case 'newMarkdown':
      onNewMarkdown()
      break
    case 'upload':
      break
  }
}

const menuTarget = ref<HTMLElement | null>(null)
function onVisibleChange(visible: boolean, currentElement: HTMLElement | null) {
  menuTarget.value = currentElement
}

function onCrumb() {}

function onFileOpen(item: any) {
  if (item.isEdit) return
  if (item.type === 'folder') {
    breadcrumbList.value.push({ name: item.name, id: item.id })
    loadData()
  }
  if (item.type === 'markdown') {
    console.log('open markdown')
  }
}

const editInputRefs = ref<any>({})
function setInputRefs(el: any, id: number) {
  if (el) {
    editInputRefs.value[`editInputRef_${id}`] = el
  }
}

const editFileName = ref('')
function onSaveRename(item: any) {
  item.isEdit = false
  editFileName.value = ''
}
async function onRename(item: any) {
  if (!item) return
  item.isEdit = true
  editFileName.value = item.name
  await nextTick()
  editInputRefs.value[`editInputRef_${item.id}`].focus()
  editInputRefs.value[`editInputRef_${item.id}`].select()
}
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.firmware-management-wrap {
  width: 100%;
  height: 100%;
  :deep(.el-breadcrumb) {
    margin-left: 4px;
  }
  .active {
    :deep(.el-breadcrumb__inner) {
      color: var(--el-color-primary);
      font-weight: 800;
      cursor: pointer;
    }
  }
  .file-list {
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .item {
      width: 90px;
      height: 110px;
      display: flex;
      cursor: pointer;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      border-radius: 3px;
      padding-bottom: 4px;
      .file-header {
        visibility: hidden;
        width: 100%;
        height: calc(100% - 66px - 24px);
        display: flex;
        align-items: center;
        padding: 0 8px;
        box-sizing: border-box;
        justify-content: space-between;
        .icon {
          flex-direction: end;
          color: var(--icon-color);
          :hover {
            color: var(--icon-hover-color);
          }
        }
      }

      .file-icon {
        width: 66px;
        height: 66px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .file-name {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: var(--label-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        text-align: center;
        .edit-input {
          width: 100%;
          height: 100%;
          margin-bottom: 4px;
        }
      }
      &:hover {
        background-color: var(--mask-bg);
        .file-header {
          visibility: visible;
        }
      }
    }
  }
}
</style>