xps-web-v5/src/views/document/components/DirTree.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import DirComponent from './Dir.vue'
import { deleteDirById, getDirByList } from '@/api/system/docApi'
const emit = defineEmits(['onItemSelect'])

interface TreeNode {
  label: string
  isLeaf: boolean
  dirId: number
  children?: TreeNode[]
}

interface Object {
  dirId: number
  dirTitle: string
  dirDesc: string
}

const state = reactive({
  loading: false,
  keywords: '',
  treeData: [] as TreeNode[],
  curDirId: 0,
  dataList: [] as Object[],
  dialogState: 1,
  search: {
    keywords: '',
  },
})

const leftTreeRef = ref()

const getDirData = async () => {
  const { data } = await getDirByList()
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.dirTitle,
      dirId: item.dirId,
      isLeaf: true,
    })
  })
  state.treeData = children

  if (data && data.length > 0) {
    state.curDirId = data[0].dirId
    await nextTick(() => {
      leftTreeRef.value.setCurrentKey(state.curDirId)
      emit('onItemSelect', state.curDirId)
    })
  }
}

onMounted(() => {
  getDirData()
})

// 模型选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curDirId = node.dirId
    emit('onItemSelect', state.curDirId)
  }
}

const dirRef = ref()
// 新增
const onDirAdd = () => {
  dirRef.value.showAddModel()
}

// 编辑
const onDirEdit = () => {
  const dirId = state.curDirId
  if (dirId > 0) {
    dirRef.value.showEditModel(dirId)
  }
}

// 删除
const onDirDelete = (row: any) => {
  const { dirId, dirTitle } = row
  ElMessageBox.confirm(`确认删除「${dirTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteDirById(dirId)
    ElMessage.success(msg)
    await getDirData()
  })
}
</script>

<template>
  <el-scrollbar class="tree">
    <el-button-group class="btns">
      <el-button type="primary" class="add" @click="onDirAdd()">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:plus" />
          </el-icon>
        </template>
        文件夹
      </el-button>
      <el-button @click="getDirData">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:refresh" />
          </el-icon>
        </template>
      </el-button>
    </el-button-group>
    <ElTree ref="leftTreeRef" :data="state.treeData" size="small" default-expand-all node-key="wfDefId" @node-click="onTreeNodeClick">
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div class="label" :title="node.label">
            <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
              <svg-icon name="ep:folder" />
            </el-icon>
            <div class="text">
              {{ data.label }}
            </div>
          </div>
          <div class="actions">
            <el-button-group>
              <el-button type="primary" plain size="small" @click.stop="onDirAdd()">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
              </el-button>

              <el-button type="info" plain size="small" @click.stop="onDirEdit()">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:edit" />
                  </el-icon>
                </template>
              </el-button>

              <el-button type="danger" plain size="small" @click.stop="onDirDelete(data)">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:delete" />
                  </el-icon>
                </template>
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>
    </ElTree>
    <DirComponent ref="dirRef" @success="getDirData" />
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.btns {
  display: inline-flex;
  width: 100%;
  margin-bottom: var(--container-padding);

  .add {
    width: 100%;
  }
}

.tree {
  flex: 1;
  overflow-y: auto;

  :deep(.el-tree) {
    .el-tree-node__content {
      height: 40px;
    }

    .is-current > .el-tree-node__content {
      background-color: var(--el-color-primary-light-9);
    }

    .custom-tree-node {
      flex: 1;
      position: relative;
      width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .label {
        display: inline-flex;
        align-items: center;
        width: calc(100% - 10px);
        color: var(--el-text-color-primary);

        .text {
          @include text-overflow;
        }
      }

      &:hover {
        .actions {
          display: block;
        }
      }

      .actions {
        display: none;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);

        .el-button {
          padding: 5px 8px;
        }
      }
    }
  }
}
</style>