xps-web-v5/src/views/workflow/def/components/WfDefList.vue

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

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteWfDefById, getWfDefByList } from '@/api/system/wfDefApi'
const emit = defineEmits(['onItemSelect'])

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

interface Object {
  wfDefId: number
  wfDefTitle: string
  wfDefDesc: string
}

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

const leftTreeRef = ref()

const getWfDefData = async () => {
  const { data } = await getWfDefByList({})
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.wfDefTitle,
      wfDefId: item.wfDefId,
      isLeaf: true,
    })
  })
  state.treeData = children

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

onMounted(() => {
  getWfDefData()
})

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

const wfDefRef = ref()
// 新增
const onWfDefAdd = () => {
  wfDefRef.value.showAddModel()
}

// 编辑
const onWfDefEdit = () => {
  const wfDefId = state.curWfDefId
  if (wfDefId > 0) {
    wfDefRef.value.showEditModel(wfDefId)
  }
}

// 删除
const onWfDefDelete = (row: any) => {
  const { wfDefId, wfDefTitle } = row
  ElMessageBox.confirm(`确认删除「${wfDefTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteWfDefById(wfDefId)
    ElMessage.success(msg)
    await getWfDefData()
  })
}
</script>

<template>
  <el-scrollbar class="tree">
    <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:connection" />
            </el-icon>
            <div class="text">
              {{ data.label }}
            </div>
          </div>
          <!--
          <div class="actions">
            <el-button-group>
              <el-button type="primary" plain size="small" @click.stop="onWfDefAdd()">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
              </el-button>

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

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

  .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>