admin/src/views/desk/system-unit/temp.vue

<template>
    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
        <hc-body split>
            <template #left>
                <hc-card scrollbar>
                    <hc-lazy-tree
                        v-if="isTreeMode" :root-menu="treeMenuData" :menus="treeMenuData" :h-props="treeProps"
                        tree-key="id" @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
                    >
                        <template #nodeName="{ data }">
                            <span class="text-16px font-400">{{ data.nodeName }}</span>
                        </template>
                    </hc-lazy-tree>
                </hc-card>
            </template>
            <hc-card class="hc-desk-system-unit-temp">
                <hc-card-item title="节点信息">
                    <el-descriptions :column="3" border>
                        <el-descriptions-item label="节点编码：">{{ nodeInfo.nodeCode ?? '-' }}</el-descriptions-item>
                        <el-descriptions-item label="节点名称：">{{ nodeInfo.nodeName ?? '-' }}</el-descriptions-item>
                        <el-descriptions-item label="节点类型：">{{ nodeInfo.nodeTypeName ?? '-' }}</el-descriptions-item>
                        <el-descriptions-item label="工程类型：">{{ nodeInfo.engineeringTypeName ?? '-' }}</el-descriptions-item>
                        <el-descriptions-item label="备注：">{{ nodeInfo.remarks ?? '-' }}</el-descriptions-item>
                    </el-descriptions>
                </hc-card-item>
                <hc-card-item title="下节节点列表">
                    222
                </hc-card-item>
            </hc-card>
        </hc-body>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { HcDelMsg } from 'hc-vue3-ui'
import { getDictionaryData, getDictionaryName } from '~src/utils/tools'
import { getArrValue, getObjValue } from 'js-fast-way'
import mainApi from '~api/desk/system-unit'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

const emit = defineEmits(['close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref(props.data)
watch(() => props.data, (data) => {
    dataInfo.value = data
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//处理相关数据
const meterUnitType = ref([])
const getDataApi = async () => {
    isTreeMode.value = true
    meterUnitType.value = await getDictionaryData('meter_unit_type', true)
    console.log(meterUnitType.value)
}

//树配置
const isTreeMode = ref(false)
const treeProps = {
    label: 'nodeName',
    children: 'children',
    isLeaf: 'notExsitChild',
}

//懒加载树
const treeLoadNode = async ({ item, level }, resolve) => {
    const parentId = level === 0 ? 0 : item.id
    const { id } = getObjValue(dataInfo.value)
    const { data } = await mainApi.getLazyTree({
        id: parentId,
        templateId: id,
    })
    resolve(getArrValue(data))
}

//树菜单根节点
const treeMenuData = [
    { icon: 'add-circle', label: '新增节点', key: 'add' },
    { icon: 'draft', label: '编辑节点', key: 'edit' },
    { icon: 'arrow-up-down', label: '排序节点', key: 'rank' },
    { icon: 'delete-bin', label: '删除节点', key: 'del' },
]

//菜单被点击
const treeMenuClick = ({ key, data, node }) => {
    console.log(key)
}

//树节点被点击
const nodeInfo = ref({})
const treeNodeTap = ({ data }) => {
    const label = getDictionaryName(meterUnitType.value, data.nodeType)
    data.nodeTypeName = label ?? '-'
    nodeInfo.value = data
    console.log(data)
}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    isTreeMode.value = false
    emit('close')
}
</script>

<style lang="scss">
.hc-desk-system-unit-temp .el-card {
    .hc-card-item-box {
        height: auto;
        padding: 10px 14px;
        .hc-card-item-header {
            color: #4a4a4a;
            margin-bottom: 6px;
        }
    }
    .hc-card-item-box + .hc-card-item-box {
        margin-top: 20px;
    }
}
</style>