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

<template>
    <div>
        <!-- 数据项选择 -->
        <el-dialog v-if="visible" :title="title" width="30%" center custom-class="dialog-med" top="10vh"
            :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>
            <div slot="footer" style="text-align:right">
                <el-button type="primary" size="mini" @click="saveOrUpdateItemGroup">确定</el-button>
                <el-button @click="dialogClose" size="mini">取消</el-button>
            </div>
        </el-dialog>

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

        <!-- modbus协议 -->
        <modbus-list ref="modbusList" />
    </div>
</template>

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

export default {
    components: {
        ModbusList,
        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 dataSources = this.dataSourceList;
            for (let i = 0; i < dataSources.length; i++) {
                if (dataSources[i].id === this.itemGroupForm.dataSourceId && dataSources[i].dataSourceTypeKey === 'modbus_real') {
                    this.$refs.modbusList.initPage(this.itemGroupForm.itemList)
                    return;
                }
            }
            // 区分驱动返回数据类型
            // 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.dataSourceId = this.itemGroupForm.dataSourceId
            this.$refs.itemChooseTree.dataSourceList = this.dataSourceList
            this.$refs.itemChooseTree.itemList = this.itemGroupForm.itemList
        },
        /** 给数据组的数据项赋值 */
        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>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-med {
    height: 50vh;

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