xps-web-v5/src/views/article/components/ArtCatTree.vue

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

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import ArtCatComponent from './ArtCat.vue'
import { deleteArtCatById, getArtCatByList } from '@/api/system/artCatApi'
const emit = defineEmits(['onItemSelect'])

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

interface Object {
  artCatId: number
  artCatTitle: string
  artCatDesc: string
}

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

const leftTreeRef = ref()

const getArtCatData = async () => {
  const { data } = await getArtCatByList(state.search)
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.artCatTitle,
      artCatId: item.artCatId,
      isLeaf: true,
    })
  })
  state.treeData = children

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

onMounted(() => {
  getArtCatData()
})

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

const artCatRef = ref()

// 新增
const onArtCatAdd = () => {
  artCatRef.value.showAddModel(0)
}

// 添加子类
const onSubArtCatAdd = (row: any) => {
  const artCatId = row.artCatId
  artCatRef.value.showAddModel(artCatId)
}

// 编辑
const onArtCatEdit = (row: any) => {
  const artCatId = row.artCatId
  if (artCatId > 0) {
    artCatRef.value.showEditModel(artCatId)
  }
}

// 删除
const onArtCatDelete = (row: any) => {
  const { artCatId, artCatTitle } = row
  ElMessageBox.confirm(`确认删除「${artCatTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteArtCatById(artCatId)
    ElMessage.success(msg)
    await getArtCatData()
  })
}
</script>

<template>
  <el-scrollbar class="tree">
    <el-button-group class="btns">
      <el-button type="primary" class="add" @click="onArtCatAdd()">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:plus" />
          </el-icon>
        </template>
        内容分类
      </el-button>
      <el-button @click="getArtCatData">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:refresh" />
          </el-icon>
        </template>
      </el-button>
    </el-button-group>
    <ElTree ref="leftTreeRef" :data="state.treeData" 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:document-copy" />
            </el-icon>
            <div class="text">
              {{ data.label }}
            </div>
          </div>
          <div class="actions">
            <el-button-group>
              <el-button type="primary" plain size="small" @click.stop="onSubArtCatAdd(data)">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
              </el-button>

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

              <el-button type="danger" plain size="small" @click.stop="onArtCatDelete(data)">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:delete" />
                  </el-icon>
                </template>
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>
    </ElTree>
    <ArtCatComponent ref="artCatRef" @success="getArtCatData" />
  </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>