ibms/src/views/point/config_point/edit_origin/index.vue

<template>
    <div>
        <!-- <bread></bread> -->
        <div class="margin-view"></div>
        <div class="btn-view">
            <el-button class="btn" @click="btnClick">{{ id? '保存修改': '新建'}}</el-button>
        </div>
        <div class="content-view">
            <el-form label-width="10px" style="width:400px;" :model="formData" class="dcenter">
                <el-form-item label="">
                    <el-input v-model="formData.Name" placeholder="请输入新项目名称"></el-input>
                </el-form-item>
            </el-form>
            <el-input type="textarea" class="edit-textarea dcenter block" v-model="formData.Description" placeholder="数据源的说明再次编辑维护..."></el-input>
            <el-form label-width="120px" style="width:400px;" :model="formData" class="dcenter">
                <el-form-item label="协议类型">
                    <el-select v-model="formData.ProtocolType" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主机IP地址">
                    <ip-input :ip="formData.ProtocolInfo.Ip" :port="formData.ProtocolInfo.Port" @change="changeItem"></ip-input>
                </el-form-item>
                <el-form-item label="用户名/密码" v-if="(passWordArr.indexOf(formData.ProtocolType) > -1)">
                    <el-input v-model="formData.ProtocolInfo.User" style="display:inline-block;width:100px;"></el-input>/
                    <el-input v-model="formData.ProtocolInfo.Password" style="display:inline-block;width:100px;"></el-input>
                </el-form-item>
                <el-form-item label="ProgID" v-if="formData.ProtocolType == 'opc'">
                    <el-input v-model="formData.ProtocolInfo.ProgID" style="display:inline-block;width:100px;"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import ipInput from "@/components/config_point/ip_input"
    // import bread from "components/common/bread_crumb"
    import tools from "@/utils/tools"
    import {
        queryDataSource,
        updateDataSource,
        createDataSource
    } from "@/fetch/point_http"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        computed: {
            ...mapGetters("project", [
                "projectId"
            ])
        },
        data() {
            return {
                passWordArr: ['mqtt', 'amqp', 'opc'],
                formData: {
                    "ProtocolType": "", //协议类型
                    "Name": "",
                    ProtocolInfo: {
                        "Ip": "", //ip
                        "Port": "", //端口号，有些协议类型没有该信息
                        "User": "", //用户名
                        "Password": "", //密码
                        "ProgID": "", //progID
                    },
                    Description: ""
                },
                options: [{
                    value: 'modbus-tcp',
                    label: 'Modbus TCP'
                }, {
                    value: 'bacnet-ip',
                    label: 'BACNet IP'
                }, {
                    value: 'opc',
                    label: 'OPC'
                }, {
                    value: 'knx',
                    label: 'KNX'
                }, {
                    value: 'mqtt',
                    label: 'MQTT'
                }, {
                    value: 'amqp',
                    label: 'AMQP'
                }],
                id: this.$route.query.key
            }
        },
        components: {
            ipInput,
            // bread
        },
        created() {
        },
        mounted() {
            if (!!this.id) {
                this.getDataSouse()
            }
        },
        methods: {
            changeItem(ip, port) {
                this.formData.ProtocolInfo.Ip = ip
                this.formData.ProtocolInfo.Port = port
            },
            getDataSouse() {
                let param = {
                    Filters: {
                        ProjectId: this.projectId,
                        Id: this.id
                    },
                    "PageNumber": 1,
                    "PageSize": 50,
                    "Projection": [
                    ]
                }
                queryDataSource(param, res => {
                    let data = res.Content[0]
                    if (!data.ProtocolInfo) {
                        //信息点为空时
                        data.ProtocolInfo = {
                            "Ip": "", //ip
                            "Port": "",
                            "User": "", //用户名
                            "Password": "", //密码
                            "ProgID": "", //progID
                        }
                    } else {
                        //有信息点时
                    }
                    this.formData = data
                    console.log(this.formData, "formData")
                })
            },
            btnClick() {
                console.log(this.formData, "form")
                let param = tools.deepCopy(this.formData)
                tools.delObjKey(param, "CreateTime")
                tools.delObjKey(param, "LastUpdate")
                if (!!this.id) {
                    console.log(param.ProtocolInfo.Port)
                    if(param.ProtocolInfo.Port == ""){
                        delete param.ProtocolType.Port
                    }
                    updateDataSource({
                        Content: [param],
                        Projection: []
                    }, res => {
                        console.log(res, 'res')
                        this.$router.push({
                            path: '/configPoint'
                        })
                        this.$message.success("更新成功！")
                    })
                } else {
                    param.ProjectId = this.projectId
                    console.log(param, "param")
                    createDataSource(param, res => {
                        console.log(res)
                        this.$router.push({
                            path: '/configPoint'
                        })
                        this.$message.success("创建成功！")
                    })
                }
            },
        }
    }
</script>
<style lang="scss">
    .margin-view {
        height: 60px;
    }
    .btn-view {
        overflow: hidden;
        .btn {
            float: right;
            margin-right: 40px;
        }
    }
    .content-view {
        width: 928px;
        margin: auto;
        .edit-textarea {
            margin: 10px 0;
            height: 117px;
            textarea {
                height: 100%;
                background-color: #EEFAFF;
            }
        }
    }
</style>