admin-sjzx/src/components/tree/pqs/generalTestTree.vue

<template>
    <div class="point-tree">
        <div v-if="defaultProps.disabled != 'flag'">
            <el-input
                v-model="input"
                style="width: 240px"
                clearable
                placeholder="请输入电站数"
                class="mr10"
                @input="handleEdit"
            ></el-input>
            <el-button type="primary" :disabled="!input.length > 0" icon="el-icon-Operation" @click="Tick">
                按配置勾选
            </el-button>
        </div>
        <el-tree
            :disabled="disabled"
            style="height: 550px; overflow-y: auto; overflow-x: hidden"
            :data="tree"
            ref="treeRef"
            show-checkbox
            default-expand-all
            node-key="id"
            :props="defaultProps"
        />
    </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { initDetpStataionTree, querySubStatation, addPlan } from '@/api/process-boot/generalTest'

const emit = defineEmits(['tactics'])
const attrs = useAttrs()
const defaultProps = ref({
    label: 'name',
    value: 'id',
    disabled: 'disabled'
})
const dictData = useDictData()
const disabled = ref(false)
const tree = ref()
const treeRef = ref()
const input: any = ref('')

const loadData = () => {
    initDetpStataionTree({ orgId: dictData.state.area[0].id }).then(res => {
        tree.value = res.data
    })
}
const handleEdit = () => {}
// 配置
const Tick = () => {
    querySubStatation({ statetionNum: input.value }).then(res => {
        setKey(res.data.subIds)
        ElMessage.success('配置成功')
    })
}
// 设置多选
const setKey = (key: any, text?: string) => {
    treeRef.value!.setCheckedKeys(key, false)
    if (text == '查看计划' || text == '计划审核') {
        defaultProps.value.disabled = 'flag'
    } else {
        defaultProps.value.disabled = 'disabled'
    }
}

defineExpose({ treeRef, setKey, loadData })
loadData()
</script>
<style lang="scss">
.point-tree {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--el-border-color);
}
</style>