industry-data-platform/industry-admin/src/views/source/itemGroup/itemChooseTree.vue

<template>
    <div>
        <!-- 数据项选择树 -->
        <el-dialog :title="title" width="80%" top="5vh" custom-class="dialog-max" class="cy-custom-dialog" center
            :before-close="dialogClose" :visible.sync="visible" @open="handleOpen" @close="handleClose">
            <el-form label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="数据源：" style="margin-bottom: 20px; width: 300px">
                            <el-select v-model="dataSourceId" disabled>
                                <el-option v-for="dict in dataSourceList" :key="dict.id" :label="dict.dataSourceName"
                                    :value="dict.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="所选路径" style="margin-bottom: 20px; width: 300px">
                            <el-input style="margin-top: -10px; width: 400px" disabled
                                v-model="queryParams.chooseItemStr"></el-input>
                        </el-form-item> -->
                    </el-col>
                    <template>
                        <el-select v-model="queryParams.needItemStr" multiple collapse-tags placeholder="请选择">
                            <el-option v-for="item in DriverItemData" :key="item.id" :label="item.itemName"
                                :value="item.itemName">
                            </el-option>
                        </el-select>
                        <el-button type="primary" size="mini" style="margin-left: 15px;"
                            @click="getCompositeScreen">复合筛选</el-button>
                    </template>
                </el-row>
            </el-form>
            <!-- <div style="display: flex; height: calc(100% - 36px); overflow: auto"> -->
            <div style="display: flex; height: calc(100% - 36px);">
                <!-- 数据项 -->
                <div class="cy-transform-data">
                    <el-divider content-position="left">数据项</el-divider>
                    <div class="cy-line" style="padding-bottom: 10px">
                        <div style="height: 35px">
                            <el-input placeholder="输入关键字进行过滤" v-model="filterLabelText" size="mini"
                                prefix-icon="el-icon-search"></el-input>
                        </div>
                        <div style="height: calc(100% - 50px); overflow: auto">
                            <!-- 树节点 -->
                            <div style="height: 20vh;overflow: auto;">
                                <virtual-tree class="cy-group-tree" ref="itemTree" :data="treeData" :indent="10"
                                    node-key="id" :filter-node-method="filterLabelEvent" @node-click="handleLabelNodeClick"
                                    :check-on-click-node="false" :show-checkbox="true" :highlight-current="true"
                                    :default-expand-all="true">
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <i v-if="data.isLeaf" class="el-icon-document"
                                            style="color: #e69a0f; margin-right: 5px;" />
                                        <i v-else-if="node.expanded" class="el-icon-folder-opened"
                                            style="color: #e69a0f; margin-right: 5px;" />
                                        <i v-else class="el-icon-folder" style="color: #e69a0f; margin-right: 5px;" />
                                        <!-- <svg-icon v-if="data.isLeaf" icon-class="file-bg" />
                                        <svg-icon v-else-if="node.expanded" icon-class="folder-open" style="width: 1.2em" />
                                        <svg-icon v-else icon-class="folder" /> -->
                                        <span :title="node.label || '-'" style="margin-left: 2px">{{
                                            node.label
                                        }}</span>
                                    </span>
                                </virtual-tree>
                            </div>
                            <!-- 树节点对应的叶节点 -->
                            <div style="height: 30vh; overflow: auto">
                                <el-divider content-position="left" style="margin-bottom: 15px !important">
                                    <i></i>
                                    <span>（共{{ leavesList.length }}项）</span>
                                </el-divider>
                                <el-input placeholder="输入关键字进行过滤" style="margin-top: -10px; width: calc(100% - 60px)"
                                    size="mini" @input="filterLeavesEvent" v-model="filterLeavesText"></el-input>
                                <el-checkbox v-model="isSelectAllLeaves" @change="handleCheckAllLeavesChange"
                                    style="margin-left: 5px">全选</el-checkbox>
                                <div class="cy-leaves-div">
                                    <p-virtual-check ref="pvc" :data-sources="leavesList"
                                        @check-change-all="checkChangeAllLeaves"
                                        @check-change="checkChangeLeaves"></p-virtual-check>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 操作按钮 -->
                <div class="cy-transform-btn">
                    <el-row>
                        <el-button size="mini" @click="addCheckNodesBtnEvent">添加&nbsp;&gt;&gt;</el-button>
                    </el-row>
                    <el-row>
                        <el-button size="mini" @click="removeCheckNodesBtnEvent">&lt;&lt;&nbsp;移除</el-button>
                    </el-row>
                    <el-row>
                        <el-button size="mini" @click="removeAllCheckNodesBtnEvent">全部移除</el-button>
                    </el-row>
                </div>
                <!-- 已选择数据项 -->
                <div class="cy-transform-data">
                    <el-divider content-position="left">已选择数据项（{{ chooseItemDataListByTree.length }}）</el-divider>
                    <div class="cy-line">
                        <el-checkbox v-model="isSelectAllItem" @change="selectAllItem"
                            style="margin-left: 10px">全选</el-checkbox>
                        <div style="height: 60vh; overflow: auto">
                            <p-virtual-check ref="pvcChoose" :data-sources="chooseItemDataListByTree"
                                @check-change-all="checkChangeAllChoose"
                                @check-change="checkChangeChoose"></p-virtual-check>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer">
                <el-button type="primary" @click="gotoItemConfig">下一步</el-button>
                <el-button @click="dialogClose">取消</el-button>
            </span>
        </el-dialog>

        <!-- 数据项表达式配置 -->
        <ItemConfigModel ref="itemConfigModel" @dialogClose="dialogClose" @saveItemChoose="saveItemChoose">
        </ItemConfigModel>
    </div>
</template>

<script>
import { showLoading } from '@/utils/cqcy'
import { extractDataItemValues, getNodeAllPath } from '@/utils/cqcy'
import PVirtualCheck from "@/components/PVirtualCheck/index.vue";
import { getNextAllItem, getDriverItemBySouceId, getCompositeScreen } from '@/api/source/itemGroup';
import { getAllDataModel } from '@/api/source/dataModel';
import ItemConfigModel from './itemConfigModel.vue'

export default {
    components: {
        'p-virtual-check': PVirtualCheck,
        ItemConfigModel
    },
    watch: {
        filterLabelText(val) {
            this.$refs.itemTree.filter(val);
        },
    },
    created() {
        this.getAllDataModel()
    },
    data() {
        return {
            visible: false,
            title: '选择数据项',
            dataSourceId: null,
            treeItemName: null,
            //树数据
            treeData: [],
            //所有数据源信息
            dataSourceList: [],
            //所有数据模型
            dataModelList: [],
            //原来数据组中包含的数据项信息
            itemList: [],
            //过滤树节点的输入文本
            filterLabelText: null,
            //左侧展示的叶节点
            leavesList: [],
            leavesListF: [],
            //左侧选中的叶节点
            leavesChooseList: [],
            //过滤叶节点的输入文本
            filterLeavesText: null,
            //是否全选所有叶节点
            isSelectAllLeaves: false,
            //右侧展示的，已选择的数据项
            chooseItemDataListByTree: [],
            //右侧，是否选择所有数据项
            isSelectAllItem: false,
            queryParams: {
                id: null,
                chooseItemStr: "",
                nextItemStr: "",
                needItemStr: [],
            },
            DriverItemData: []
        }
    },
    methods: {
        /** 关闭弹出层 */
        dialogClose() {
            this.visible = false
        },
        /** 弹窗打开事件 */
        handleOpen() {
            const loading = showLoading(this, "加载中，请稍候···")
            this.isSelectAllItem = false
            this.getNextAllItem(this.dataSourceId, this.treeItemName, (data) => {
                //加载树
                this.treeData = data.children
                //加载虚拟列表，叶节点
                let leaves = data.leaves
                this.leavesList = leaves
                this.leavesListF = leaves
                let arr = [];
                //将原来的数据项加载到，右侧作为已选择的
                for (let i = 0; i < this.itemList.length; i++) {
                    let temp = {
                        nodeIdentifier: null,
                        dataType: null,
                        label: this.itemList[i].itemName,
                        nodeIndex: this.itemList[i].nodeIndex,
                        itemName: this.itemList[i].itemName,
                        itemReadName: this.itemList[i].itemReadName,
                        dataModelId: this.itemList[i].dataModelId,
                        value: this.itemList[i].itemReadName,
                        checked: false,
                    };
                    arr.push(temp)
                }
                this.chooseItemDataListByTree = arr
                //获取数据源的驱动数据项信息
                this.getDriverItemBySouceId(this.dataSourceId)
                loading.close()
            })
        },
        /** 弹窗关闭事件 */
        handleClose() {
            this.dataSourceId = null
            this.treeItemName = []
            this.treeData = []
            this.leavesList = []
            this.chooseItemDataListByTree = []
            this.filterLabelText = null
            this.filterLeavesText = null
        },
        /** 查询改数据源下的驱动数据项信息 */
        getDriverItemBySouceId(id) {
            this.queryParams.id = id;
            getDriverItemBySouceId(id).then((res) => {``
                if (res.code === 200) {
                    this.DriverItemData = res.data;
                }
            });
        },
        /** 跳转到配置数据项表达式 */
        gotoItemConfig() {
            if (this.chooseItemDataListByTree.length == 0) {
                this.$message({
                    message: '请选择数据项！',
                    type: 'warning'
                });
                return;
            }
            this.$refs.itemConfigModel.title = '数据项表达式配置'
            this.$refs.itemConfigModel.visible = true
            this.$refs.itemConfigModel.leavesChooseList = this.chooseItemDataListByTree
            this.$refs.itemConfigModel.tableTotal = this.chooseItemDataListByTree.length
            let arr = [];
            for (let i = 0; i < this.chooseItemDataListByTree.length; i++) {
                let temp = this.chooseItemDataListByTree[i];
                let dataModelId = this.chooseItemDataListByTree[i].dataModelId
                for (let j = 0; j < this.dataModelList.length; j++) {
                    if (this.dataModelList[j].id == dataModelId) {
                        temp.remark = this.dataModelList[j].remark
                        break
                    }
                }
                arr.push(temp)
            }
            this.$refs.itemConfigModel.tableData = arr
            this.$refs.itemConfigModel.dataModelList = this.dataModelList
        },
        /** 将数据项选择的信息，传递给父组件 */
        saveItemChoose(datas) {
            this.$emit('saveItemChoose', datas)
        },
        /** 获取树节点的下级信息 */
        getNextAllItem(dataSourceId, itemName, callback) {
            getNextAllItem(dataSourceId, itemName).then((res) => {
                let data = {}
                this.filterLeavesText = "";
                let datas = res.data.label;
                let leaves = res.data.leaves;
                // 模拟数据
                let dataList = [];
                if (datas && datas.length > 0) {
                    datas.forEach((t) => {
                        dataList.push({
                            dataSourceId: dataSourceId,
                            label: t.itemName,
                            leaf: false,
                            children: [],
                        });
                    });
                }
                let leavesList = [];
                if (leaves && leaves.length > 0) {
                    leaves.forEach((t) => {
                        t.label = t.itemName;
                        t.value = t.itemReadName;
                        t.checked = false;
                        leavesList.push(t);
                    });
                }
                data.children = dataList
                data.leaves = leavesList
                callback(data);
            })
        },
        /** 过滤树节点事件 */
        filterLabelEvent(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 数据项点击事件 */
        handleLabelNodeClick(d, n, t) {
            let itemNames = [];
            extractDataItemValues(n, itemNames);
            let itemName = itemNames.reverse().join("!@");
            this.queryParams.chooseItemStr = itemName;
            const loading = showLoading(this, "加载中，请稍候···");
            if ((!d.children || d.children.length == 0) && (!d.leaves || d.leaves.length == 0)) {
                this.getNextAllItem(this.dataSourceId, itemName, (data) => {
                    //加载树
                    d.children = data.children
                    let leaves = data.leaves
                    d.leaves = leaves
                    //加载虚拟列表，叶节点
                    this.leavesList = leaves
                    this.leavesListF = leaves
                    loading.close();
                })
            } else {
                if (d.leaves) {
                    let leaves = d.leaves
                    this.leavesList = leaves
                    this.leavesListF = leaves
                }
                loading.close();
            }
        },
        /** 过滤叶节点事件 */
        filterLeavesEvent(value) {
            let arr = JSON.parse(JSON.stringify(this.leavesListF));
            if (!value || !value.trim()) {
                this.leavesList = arr;
                return;
            }
            let filterList = arr.filter((v) => {
                return v.itemName.indexOf(value) !== -1;
            });
            this.leavesList = filterList;
        },
        /** 全选叶节点事件 */
        handleCheckAllLeavesChange(flag) {
            this.$refs.pvc.checkedAll(flag);
        },
        /** 是否全部选中 */
        checkChangeAllLeaves(flag) {
            this.isSelectAllLeaves = flag;
        },
        /** 查看选中的所有叶节点状态，并将checked为true的填入到选中的叶节点中 */
        checkChangeLeaves(datas) {
            this.leavesChooseList = [];
            if (!datas || datas.length == 0) {
                return;
            }
            datas.forEach((data) => {
                if (data.checked) {
                    this.leavesChooseList.push(data);
                }
            });
        },
        /** 将选择的叶节点添加到右边，成为数据项 */
        addCheckNodesBtnEvent() {
            // 根据当前选择节点拼接为：XXXX.XXXX.XXX
            let chooseChannelNameList = [];
            if (this.leavesChooseList.length == 0) {
                this.$message({
                    message: '请选择数据项！',
                    type: 'warning'
                });
                return;
            }
            for (let i = 0; i < this.leavesChooseList.length; i++) {
                let temp = {
                    nodeIdentifier: null,
                    dataType: this.leavesChooseList[i].dataType,
                    label: this.leavesChooseList[i].fullPath,
                    nodeIndex: this.leavesChooseList[i].nodeIndex,
                    itemName: this.leavesChooseList[i].fullPath,
                    // itemName: this.leavesChooseList[i].itemName,
                    itemReadName: this.leavesChooseList[i].itemReadName,
                    value: this.leavesChooseList[i].itemReadName,
                    checked: false,
                };
                chooseChannelNameList.push(temp);
            }
            // 去重
            let arr = JSON.parse(JSON.stringify(this.chooseItemDataListByTree));
            if (arr.length == 0) {
                arr = chooseChannelNameList;
            } else {
                let status = false;
                for (let i in chooseChannelNameList) {
                    let flag = false;
                    for (let j in arr) {
                        let tName = arr[j].label ? arr[j].label : arr[j].itemName;
                        if (chooseChannelNameList[i].label == tName) {
                            flag = true;
                            if (!status) {
                                status = true;
                            }
                            break;
                        }
                    }
                    if (!flag) {
                        arr.push(chooseChannelNameList[i]);
                    }
                }
                if (status) {
                    this.$message({
                        message: '请注意，选择的数据项中含有重复的项',
                        type: 'warning'
                    });
                }
            }
            this.handleCheckAllLeavesChange(false);
            this.$nextTick(() => {
                this.chooseItemDataListByTree = arr;
                this.isSelectAllItem = false;
                this.isSelectAllLeaves = false;
                this.leavesChooseList = [];
                this.$refs.itemTree.setCheckedKeys([]);
            });
        },
        /** 将右边选择的数据项移除 */
        removeCheckNodesBtnEvent() {
            let _temp = this.chooseItemDataListByTree;
            if (!_temp || _temp.length == 0) {
                return;
            }
            for (let i = _temp.length - 1; i >= 0; i--) {
                if (_temp[i].checked) {
                    this.chooseItemDataListByTree.splice(i, 1);
                }
            }

            // 重置选择
            this.isSelectAllItem = false;
            this.$refs.itemTree.setCheckedKeys([]);
            this.selectAllItem(false);
        },
        /** 将右边所有的数据项移除 */
        removeAllCheckNodesBtnEvent() {
            if (this.chooseItemDataListByTree.length == 0) {
                return;
            }
            this.isSelectAllItem = false;
            this.chooseItemDataListByTree = [];
        },
        /** 数据项全选事件 */
        selectAllItem(val) {
            this.$refs.pvcChoose.checkedAll(val);
        },
        /** 是否全部选中监听器 */
        checkChangeAllChoose(flag) {
            this.isSelectAllItem = flag;
        },
        /** 选中的数据项信息 */
        checkChangeChoose(datas) {
            this.chooseItemDataListByTree = datas;
        },
        /** 复合筛选 */
        getCompositeScreen() {
            let params = {};
            params.id = this.queryParams.id
            params.chooseItemStr = this.queryParams.chooseItemStr
            params.needItemStr = JSON.stringify(this.queryParams.needItemStr)
            //得到选择的所有节点
            const treeArr = this.$refs.itemTree.getCheckedNodes();
            const treeQ = document.getElementsByClassName('el-tree cy-group-tree el-tree--highlight-current')[0]
                .getElementsByClassName('el-tree-node__content');
            let seTreeArr = []
            //赛选出需要的节点
            if (treeArr.length > 0) {
                for (let i = 0; i < treeQ.length; i++) {
                    const parentClass = treeQ[i].parentElement.classList;
                    if (parentClass.contains('is-current') && !parentClass.contains('is-hidden')) {
                        // 选择的层级
                        let treechild = treeQ[i].nextElementSibling.getElementsByClassName('el-tree-node__content');
                        for (let j = 0; j < treechild.length; j++) {
                            const clz = treechild[j].parentElement.classList;
                            if (clz.contains('is-checked') && !clz.contains('is-hidden')) {
                                seTreeArr.push(treechild[j].textContent)
                            }
                        }
                        break;
                    }
                }
            }
            params.nextItemStr = JSON.stringify(seTreeArr)
            if (!seTreeArr || seTreeArr.length == 0) {
                this.$message({
                    message: '节点选择为空',
                    type: 'warning'
                });
                return
            }
            if (!this.queryParams.needItemStr || this.queryParams.needItemStr.length == 0) {
                this.$message({
                    message: '复合筛选属性不能为空',
                    type: 'warning'
                });
                return
            }
            const loading = showLoading(this, "筛选中，请稍候···");
            getCompositeScreen(params).then((res) => {
                if (res.code === 200) {
                    let treeData = this.chooseItemDataListByTree ? this.chooseItemDataListByTree : [];
                    if (res.data && res.data.length > 0) {
                        let lodArr = [];
                        for (let j = 0; j < res.data.length; j++) {
                            lodArr.push(res.data[j].label ? res.data[j].label : res.data[j].itemName);
                        }
                        let status = false;
                        let idArr = {}
                        for (let i = 0; i < treeData.length; i++) {
                            if (lodArr.indexOf(treeData[i].label) !== -1) {
                                idArr[lodArr.indexOf(treeData[i].label)] = '1'
                            }
                        }
                        for (let j = 0; j < res.data.length; j++) {
                            if (!idArr[j]) {
                                treeData.push(res.data[j])
                            } else {
                                status = true;
                            }
                        }
                        if (status) {
                            this.$message({
                                message: '请注意，选择的数据项中含有重复的项',
                                type: 'warning'
                            });
                        }
                    }

                    this.checkChangeAllLeaves(false);
                    this.$nextTick(() => {
                        this.chooseItemDataListByTree = treeData;
                        this.isSelectAllItem = false;
                        this.isSelectAllLeaves = false;
                        this.leavesChooseList = [];
                        this.$refs.itemTree.setCheckedKeys([]);
                        this.$refs.itemTree.setCheckedNodes([]);
                    });
                    if (!res.data || res.data.length === 0) {
                        this.$message({
                            message: '没有筛选出符合条件的数据项，请重新筛选',
                            type: 'warning'
                        });
                    }
                    loading.close()
                }
            }).catch((e) => {
                this.$message({
                    message: e,
                    type: 'warning'
                });
                loading.close()
            });
        },
        /** 查询所有模型数据 */
        getAllDataModel() {
            let queryParams = {
                page: 1,
                limit: 9999,
                operationRule: null
            }
            getAllDataModel(queryParams).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '数据查询失败！',
                        type: 'warning'
                    })
                    return
                }
                this.dataModelList = res.data.dataModelList
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './itemChooseTree.css';

.dialog-max {
    height: 85vh;

    .el-dialog__body {
        height: 72vh;
        overflow: hidden;
    }
}
</style>