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

<template>
    <div>
        <!-- 数据项选择 -->
        <el-dialog v-if="visible" :title="title" width="30%" custom-class="dialog-med" top="10vh" center :before-close="dialogClose"
            :visible.sync="visible" :close-on-click-modal="false" :append-to-body="true">
            <el-form ref="itemGroupForm" :model="itemGroupForm" :rules="groupRules" label-width="80px">
                <el-form-item label="组名称" prop="groupName">
                    <el-input v-model="itemGroupForm.groupName" type="text" auto-complete="off" maxlength="20"
                        placeholder="请输入组名称"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="groupDescribe">
                    <el-input type="textarea" v-model="itemGroupForm.groupDescribe" placeholder="请输入备注"
                        maxlength="100"></el-input>
                </el-form-item>
                <el-divider content-position="left">请选择数据源</el-divider>
                <div class="cy-line">
                    <el-form-item prop="dataSourceId">
                        <el-select v-model="itemGroupForm.dataSourceId" filterable placeholder="请选择数据源"
                            @change="dataSourceChange" style="width: calc(100% - 110px)">
                            <el-option v-for="dict in dataSourceList" :key="dict.id" :label="dict.dataSourceName"
                                :value="dict.id"></el-option>
                        </el-select>
                        <el-button size="mini" @click="addDataItem"
                            style="float: right; width: 100px; margin-top: 4px">添加数据项</el-button>
                    </el-form-item>
                    <el-tag size="mini" v-if="itemGroupForm.itemList && itemGroupForm.itemList.length > 0"
                        class="cy-item-tag">
                        已选择({{ itemGroupForm.itemList.length }})项
                    </el-tag>
                </div>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="saveOrUpdateItemGroup">保存</el-button>
                <el-button @click="dialogClose">取消</el-button>
            </span>
        </el-dialog>

        <!-- 数据项选择树 -->
        <ItemChooseTree ref="itemChooseTree" @saveItemChoose="saveItemChoose"></ItemChooseTree>
    </div>
</template>

<script>
import { showLoading } from '@/utils/cqcy'
import ItemChooseTree from './itemChooseTree.vue'
import {
    getNextAllItem, getDriverItemBySouceId,
    saveOrUpdateItemGroup, addItemList
} from '@/api/source/itemGroup';

export default {
    components: {
        ItemChooseTree
    },
    data() {
        return {
            visible: false,
            title: '新增数据组',
            itemGroupForm: {
                id: null,
                groupName: "",
                groupDescribe: "",
                dataSourceId: null,
                itemList: [],
            },
            dataSourceList: [],
            groupRules: {
                groupName: [
                    { required: true, message: "组名称不能为空", trigger: "blur" },
                    {
                        min: 2,
                        max: 20,
                        message: "组名称长度必须介于 2 和 20 之间",
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    methods: {
        /** 关闭弹出层 */
        dialogClose() {
            if (this.$refs['itemGroupForm']) this.$refs['itemGroupForm'].resetFields()
            this.itemGroupForm = {
                id: null,
                groupName: "",
                groupDescribe: "",
                dataSourceId: null,
                itemList: [],
            },
                this.visible = false
        },
        /** 选择数据源改变事件 */
        dataSourceChange() {
            this.itemGroupForm.itemList = [];
        },
        /** 添加数据项 */
        addDataItem() {
            if (!this.itemGroupForm.groupName) {
                this.$message({
                    message: '请输入数据组名称',
                    type: 'warning'
                })
                return
            }
            if (!this.itemGroupForm.dataSourceId) {
                this.$message({
                    message: '请选择数据源',
                    type: 'warning'
                })
                return
            }
            const loading = showLoading(this, "加载中，请稍候···");
            //获取根节点的树信息
            getNextAllItem(this.itemGroupForm.dataSourceId, null).then((res) => {
                loading.close();
                let data = res.data;
                let leaves = [];
                if (data.leaves && data.leaves.length > 0) {
                    data.leaves.forEach((t) => {
                        t.label = t.itemName;
                        t.value = t.itemReadName;
                        t.checked = false;
                        leaves.push(t);
                    });
                }
                this.$refs.itemChooseTree.leavesList = leaves;
                this.$refs.itemChooseTree.leavesListF = JSON.parse(JSON.stringify(leaves));
                let items = [];
                if (data.label && data.label.length > 0) {
                    data.label.forEach((t) => {
                        items.push({
                            dataSourceId: this.itemGroupForm.dataSourceId,
                            label: t.itemName,
                            leaf: false,
                            children: [],
                        });
                    });
                }
                // 区分驱动返回数据类型
                this.$refs.itemChooseTree.lableListByTree = items;
                this.$refs.itemChooseTree.lableListByTreeF = JSON.parse(
                    JSON.stringify(items)
                );
                this.$refs.itemChooseTree.title = '选择数据项'
                this.$refs.itemChooseTree.visible = true
                this.$refs.itemChooseTree.isSelectAllItem = false
                this.$refs.itemChooseTree.itemList = this.itemGroupForm.itemList
                let arr = [];
                //将原来的数据项加载到，右侧作为已选择的
                for (let i = 0; i < this.itemGroupForm.itemList.length; i++) {
                    let temp = {
                        nodeIdentifier: null,
                        dataType: null,
                        label: this.itemGroupForm.itemList[i].itemName,
                        nodeIndex: this.itemGroupForm.itemList[i].nodeIndex,
                        itemName: this.itemGroupForm.itemList[i].itemName,
                        itemReadName: this.itemGroupForm.itemList[i].itemReadName,
                        dataModelId: this.itemGroupForm.itemList[i].dataModelId,
                        value: this.itemGroupForm.itemList[i].itemReadName,
                        checked: false,
                    };
                    arr.push(temp)
                }
                this.$refs.itemChooseTree.chooseItemDataListByTree = arr

                this.getDriverItemBySouceId(this.itemGroupForm.dataSourceId)
            }).catch((e) => {
                loading.close();
                this.$message({
                    message: e,
                    type: 'warning'
                })
            });
        },
        /** 查询改数据源下的驱动数据项信息 */
        getDriverItemBySouceId(id) {
            this.$refs.itemChooseTree.queryParams.id = id;
            getDriverItemBySouceId(id).then((res) => {
                if (res.code === 200) {
                    this.$refs.itemChooseTree.DriverItemData = res.data;
                }
            });
        },
        /** 给数据组的数据项赋值 */
        saveItemChoose(datas) {
            this.itemGroupForm.itemList = datas
            //如果界面没有弹出，则说明此界面是从添加数据项进来的，不是新增修改数据组进来的，则默认提交
            if (!this.visible) {
                this.addItemList()
            }
        },
        /** 保存或修改数据组 */
        saveOrUpdateItemGroup() {
            this.$refs["itemGroupForm"].validate((valid) => {
                if (this.checkParams() && valid) {
                    // 参数封装
                    let params = JSON.parse(JSON.stringify(this.itemGroupForm));
                    let type = ''
                    if (params.id) {
                        type = '修改'
                    } else {
                        type = '保存'
                    }
                    const loading = showLoading(this, type + "中，请稍候···");
                    saveOrUpdateItemGroup(params).then((res) => {
                        loading.close();
                        if (res.data) {
                            this.$message({
                                message: type + "成功！",
                                type: 'success'
                            })
                            this.dialogClose()
                            this.$emit('getAllItemGroup')
                            return;
                        }
                        this.$message({
                            message: type + "失败！",
                            type: 'warning'
                        })
                    }).catch((e) => {
                        loading.close();
                        this.$message({
                            message: e,
                            type: 'warning'
                        })
                    });
                }
            });
        },
        /** 添加数据项 */
        addItemList() {
            let params = {
                id: this.itemGroupForm.id,
                itemList: this.itemGroupForm.itemList,
            }
            addItemList(params).then((res) => {
                if (res.data) {
                    this.$message({
                        message: "添加数据项成功！",
                        type: 'success'
                    })
                    this.$emit('getItemGroupById', this.itemGroupForm.id)
                    return;
                }
            }).catch((e) => {
                this.$message({
                    message: e,
                    type: 'warning'
                })
            });
        },
        /** 参数检查 */
        checkParams() {
            if (!this.itemGroupForm.groupName) {
                this.$message({
                    message: '组名称不能为空！',
                    type: 'warning'
                })
                return false;
            }
            if (this.itemGroupForm.itemList.length == 0) {
                this.$message({
                    message: '请添加数据项！',
                    type: 'warning'
                })
                return false;
            }
            if (!this.itemGroupForm.dataSourceId) {
                this.$message({
                    message: '请选择数据源！',
                    type: 'warning'
                })
                return false;
            }
            return true;
        }

    }
}
</script>