admin-govern/src/views/govern/device/managePopup.vue

<template>
    <el-dialog class="cn-operate-dialog device-manage-popup" v-model="dialogVisible" title="设备模版分组">
        <el-descriptions class="mb10" :column="3" border>
            <el-descriptions-item label="名称">
                {{ popupData.deviceData.name }}
            </el-descriptions-item>
            <el-descriptions-item label="识别码">
                {{ popupData.deviceData.ndid }}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="'数据集名称: ' + popupData.dataSetName" size="small" :column="2" border>
            <template #extra>
                <template v-if="newGroupVisible">
                    <el-input v-model="groupName" autocomplete="off" clearable placeholder="请输入分组名称"></el-input>
                    <el-button class="mt10" type="primary" size="small" @click="newGroupVisible = false">
                        取消
                    </el-button>
                    <el-button class="mt10 ml10" type="primary" size="small" @click="addNewGroup">完成</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" size="small" @click="selectGroup">
                        {{ selectAll ? '取消全选' : '全选' }}
                    </el-button>
                    <el-button type="primary" size="small" @click="newGroupVisible = true">新增分组</el-button>
                </template>
            </template>
        </el-descriptions>
        <div style="flex: 1; overflow: auto">
            <el-tree :data="popupData.tree" node-key="id" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
                <template #default="{ node, data }">
                    <div class="group-tree-node">
                        <span>{{ node.label }}</span>
                        <div v-if="node.level == 1" style="display: flex;align-items: center;">
                            <el-popconfirm :title="'确定删除' + node.label + '吗?'" @confirm="deleteGroup(node)">
                                <template #reference>
                                    <Icon name="el-icon-Delete"></Icon>
                                </template>
                            </el-popconfirm>
                            <el-checkbox v-model="data.isShow" @click.stop.native="" class="ml5"></el-checkbox>
                        </div>
                    </div>
                </template>
            </el-tree>
        </div>
        <template #footer="">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import { updateGroArr } from '@/api/cs-device-boot/csGroArr'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { AllowDropType } from 'element-plus/es/components/tree/src/tree.type'
const newGroupVisible = ref(false)
const dialogVisible = ref(false)
const selectAll = ref(false)
const popupData = ref<any>([])
const groupName = ref('')
const submit = () => {
    let data = JSON.parse(JSON.stringify(popupData.value.tree))
    const call = (data: any) => {
        data.forEach((item: any) => {
            item.isShow = item.isShow ? 1 : 0
            delete item.label
            if (item.children && item.children.length > 0) {
                call(item.children)
            }
        })
    }
    call(data)
    data.forEach((item: any) => {
        item.children = item.children.map((item: any) => item.id)
    })
    updateGroArr({
        setId: popupData.value.dataSet,
        data: data
    }).then((res: any) => {
        ElMessage.success('保存成功')
        dialogVisible.value = false
    })
}
const deleteGroup = (node: any) => {
    console.log(node)
    if (node.data.children && node.data.children.length > 0) {
        ElMessage.error('该分组下有指标，不能删除')
        return
    }
    let index = popupData.value.tree.findIndex((item: any) => item.id === node.data.id || item.name === node.data.name)
    popupData.value.tree.splice(index, 1)
}
const selectGroup = () => {
    if (selectAll.value) {
        popupData.value.tree.forEach((item: any) => {
            item.isShow = false
        })
        selectAll.value = false
    } else {
        popupData.value.tree.forEach((item: any) => {
            item.isShow = true
        })
        selectAll.value = true
    }
}
const addNewGroup = () => {
    if (groupName.value === '') {
        ElMessage.warning('请输入分组名称')
        return
    }
    if (popupData.value.tree.some((item: any) => item.name === groupName.value)) {
        ElMessage.warning('分组名称已存在')

        return
    }
    newGroupVisible.value = false
    popupData.value.tree.splice(0, 0, {
        id: '',
        label: groupName.value,
        name: groupName.value,
        isShow: true,
        children: []
    })
    groupName.value = ''
}
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
    return (dropNode.level === 2 && type !== 'inner') || (dropNode.level === 1 && type === 'inner')
}
const allowDrag = (draggingNode: Node) => {
    return draggingNode.level === 2
}
const open = (data: any[]) => {
    dialogVisible.value = true
    popupData.value = data
}

defineExpose({ open })
</script>
<style lang="scss">
.device-manage-popup {
    .group-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .el-dialog__body {
        display: flex;
        flex-direction: column;
    }
}
</style>