kd-aiot-frontend/src/views/material/product/components/mouldChoose.vue

<!-- 角色权限分配弹窗 -->
<template>
    <ele-modal width="460px" title="选择模具" :visible="visible" :append-to-body="true" @update:visible="updateVisible">
        <el-scrollbar style="height: 60vh" wrap-style="overflow-x: hidden;">
            <el-tree :data="treeList" :props="defaultProps" v-loading="treeLoading" :node-key="nodeKey" ref="tree"
                :highlight-current="true" :expand-on-click-node="false" @check-change="handleCheckChange" v-bind="$attrs"
                :default-expand-all="defaultExpandAll" show-checkbox :default-checked-keys="checkedKeys" check-strictly>
            </el-tree>
        </el-scrollbar>
        <template v-slot:footer>
            <el-button type="primary" @click="save">确定</el-button>
            <el-button @click="updateVisible(false)">取消</el-button>
        </template>
    </ele-modal>
</template>
  
<script>
import { getTreeByPid } from '@/api/classifyManage';

export default {
    props: {



        // treeList私有化处理
        treeFormate: {
            type: Function,
            default: null
        },
        defaultProps: {
            type: Object,
            default: function () {
                return {
                    children: 'children',
                    value: 'id',
                    label: 'name'
                };
            }
        },
        defaultExpandAll: {
            type: Boolean,
            default: function () {
                return true;
            }
        },

        id: {
            type: String,
            default: '0'
        },
        nodeKey: {
            type: String,
            default: 'id'
        }

    },
    data() {
        return {
            treeList: [],
            treeLoading: false,

            current: null,
            checkedKeys: [],
            visible: false,
            idx: null
        };
    },
    mounted() {

    },
    methods: {
 
        open(item,idx) {
            this.getTreeData();
            this.current= {
             id: item.modelCategoryLevelId,
             code: item.modelCategoryLevelCode,
             name: item.modelCategoryLevelName,
            }
            this.checkedKeys.push(item.modelCategoryLevelId)
            this.idx = idx
            this.visible = true
        },

        // 获取树结构数据
        async getTreeData() {
            try {
                this.treeLoading = true;

                const res = await getTreeByPid(this.id);
                this.treeLoading = false;
                if (res?.code === '0') {
                    this.treeList = res.data;
                    if (this.treeFormate) {
                        this.treeList = this.treeFormate(this.treeList);
                    }

                    return this.treeList;
                }
            } catch (error) { }
            this.treeLoading = false;
        },

        handleCheckChange(data, checked) {
            if (checked) {
                this.current = data
                this.$refs.tree.setCheckedKeys([data.id])
            }
        },


        // 获取树的选中状态
        getSelectList() {
            const selectList = this.$refs.tree.getCurrentNode();
            return selectList;
        },

        /* 更新visible */
        updateVisible(value) {
           this.visible = value
        },

        save() {
            this.$emit('saveMould', this.current, this.idx)
            this.updateVisible(false)
        },
    },

};
</script>
  
<style lang="scss" scoped>
.tree-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;

    :deep(.el-tree) {
        display: inline-block;
        min-width: 100%;
    }
}
</style>