admin-sjzx/src/views/system/reportForms/department.vue

<template>
    <el-dialog draggable v-model="dialogVisible" title="模板绑定" width="500px" :before-close="handleClose">
        <el-tree
            default-expand-all
            show-checkbox
            node-key="id"
            :data="dataTree"
            :expand-on-click-node="false"
            ref="tree"
            style="height: 440px; overflow-y: auto"
        >
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ data.name }}</span>
                    <span>
                        <el-switch
                            v-model="data.activation"
                            active-value="1"
                            inactive-value="0"
                            :active-text="data.activation == 1 ? '激活　' : '未激活'"
                        />
                    </span>
                </span>
            </template>
        </el-tree>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="bind">绑定</el-button>
                <el-button @click="handleClose">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import { getDataByTempId, updateBindTemplate } from '@/api/harmonic-boot/luckyexcel'
const emit = defineEmits(['shutDown'])
const dictData = useDictData()
const dialogVisible = ref(false)
const keyarr: any = ref([])
const idarr: any = ref([])
const dataTree: any = ref([])
const area = ref(dictData.state.area)

const handleClose = () => {
    dialogVisible.value = false
    // emit('handleClose')
}
const open = (row: any) => {
    dialogVisible.value = true
    getDataByTempId({ id: row.id }).then(res => {
        res.data.forEach(item => {
            keyarr.value.push({
                name: item.deptName,
                id: item.deptId,
                activation: item.activation
            })
            idarr.value.push({ id: item.deptId })
        })
        gettreeData(area.value, keyarr.value)
        dataTree.value = area.value
    })
}
//过滤数据
const gettreeData = (mdata, ids) => {
    mdata.forEach(m => {
        ids.forEach(n => {
            if (m.id == n.id && n.activation == 1) {
                m.activation = 1
            } else {
                m.activation = 0
            }
        })
        if (m.children != null || m.children.length > 0) {
            gettreeData(m.children, ids)
        } else {
            m.children = null
        }
    })
}
// 绑定
const bind = () => {
    updateBindTemplate().then(res => {
        // ElMessage.success('绑定成功')
    })
}
defineExpose({ open })
</script>

<style scoped lang="scss">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>