admin-ui/src/views/iot/network/tunnel/edit.vue

<template>
    <el-card class="system-dic-container" style="position: relative;">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="编辑通道" name="first">
                <el-collapse v-model="activeViewName">
                    <el-collapse-item title="基本信息" name="1">
                        <div class="collapse-wrap">
                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
                                <el-form-item label="名称">
                                    <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-select v-model="form.types" placeholder="请选择类型">
                                        <el-option v-for="dict in network_tunnel_type" :key="dict.value" :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-show="form.types != 'serial'" label="地址">
                                    <el-input v-model="form.addr" placeholder="端口号，IP:端口" />
                                </el-form-item>
                                <el-form-item label="启用">
                                    <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item v-show="form.types == 'serial'" title="串口参数" name="2">
                        <div class="collapse-wrap">
                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
                                <el-form-item label="端口">
                                    <el-button>/dev/ttyS0</el-button>
                                </el-form-item>
                                <el-form-item label="波特率">
                                    <el-select v-model="form.serial.baud_rate" placeholder="请选择波特率">
                                        <el-option v-for="dict in tunnel_serial_baudrate" :key="dict.value" :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="数据位">
                                    <el-select v-model="form.serial.data_bits" placeholder="请选择数据位">
                                        <el-option v-for="dict in tunnel_serial_databits" :key="dict.value" :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="停止位">
                                    <el-select v-model="form.serial.stop_bits" placeholder="请选择停止位">
                                        <el-option v-for="dict in tunnel_serial_stopbits" :key="dict.value" :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="检验位">
                                    <el-select v-model="form.serial.parity" placeholder="请选择检验位">
                                        <el-option v-for="dict in tunnel_serial_parity" :key="dict.value" :label="dict.label" :value="dict.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item v-show="form.type != 'serial'" title="心跳包" name="4">
                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
                            <el-form-item label="启用">
                                <el-switch v-model="form.heartbeat.enable" />
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    <el-collapse-item v-if="form.types == 'serial' || form.types == 'tcp-client' || form.types == 'udp-client'" title="断线重连" name="4">
                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
                            <el-form-item label="启用">
                                <el-switch v-model="form.retry.enable" />
                            </el-form-item>
                            <el-form-item label="间隔">
                                <el-input-number v-model="form.retry.timeout" :min="0" @change="handleChange" />
                            </el-form-item>
                            <el-form-item label="最大次数">
                                <el-input-number v-model="form.retry.maximum" :min="0" @change="handleChange" />
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    <el-collapse-item title="协议适配" name="5">
                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
                            <el-form-item label="协议">
                                <el-select v-model="form.protoccol.name" placeholder="请选择协议适配">
                                    <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="协议参数">
                                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
                                </codeEditor>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
        </el-tabs>
        <div style="position: absolute;right:20px;top: 20px;">
            <el-button size="medium" @click="$router.replace('/iotmanager/network/tunnel')">取消</el-button>
            <el-button @click="submit" size="medium" type="primary">提交</el-button>
        </div>
    </el-card>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import codeEditor from '/@/components/codeEditor/index.vue'

import serverDetail from './component/serverDetail.vue'

import { useRoute, useRouter } from 'vue-router';

import api from '/@/api/network';

interface TableDataState {
    activeViewName: string[];
    resourceModalPro: {
        mode: string,
        content: string,
    },
    detail: object,
    form: object
}
export default defineComponent({
    name: 'tunnelCreate',
    components: { codeEditor, serverDetail },
    props: {
        type: {
            type: String,
            default: ''
        }
    },

    setup(props, context) {
        const { proxy } = getCurrentInstance() as any;
        const route = useRoute();
        const router = useRouter();
        const { network_tunnel_type, tunnel_serial_baudrate, tunnel_serial_databits, tunnel_serial_stopbits, tunnel_serial_parity, network_protocols } = proxy.useDict('network_tunnel_type', 'tunnel_serial_baudrate', 'tunnel_serial_databits', 'tunnel_serial_stopbits', 'tunnel_serial_parity', 'network_protocols');

        const state = reactive<TableDataState>({
            resourceModalPro: {
                mode: '',
                content: ''
            },
            detail: {},
            activeViewName: ['1', '2', '3', '4', '5'],
            form: {
                id: '',
                // 名称
                name: '新建通道',
                // 类型
                types: 'serial',
                // 禁用
                status: false,
                // 地址
                addr: '',
                // 串口参数
                serial: {
                    baud_rate: "9600",
                    data_bits: "6",
                    stop_bits: "1",
                    parity: '0'
                },
                // 断线重连
                retry: {
                    enable: true,
                    timeout: 30,
                    maximum: 0,
                },
                // 协议适配
                protoccol: {
                    name: "Modbus RTU",
                    options: {}
                },
                // 心跳包
                heartbeat: {
                    enable: false,
                    hex: "",
                    regex: "^\\w+$",
                    text: "",
                    timeout: 30
                }
            }
        });
        const activeName = ref('first')
        const mirrorRef = ref('mirrorRef')
        const submit = () => {
            // 串口参数-检验位-无
            if (state.form.serial.parity == 0) {
                state.form.serial.rs485 = false
                delete state.form.serial.port
            }
            // 串口参数-检验位-偶/奇
            if (state.form.serial.parity == 1 || state.form.serial.parity == 2) {
                state.form.serial.port = null
                delete state.form.serial.rs485
            }
            // return
            api.tunnel.editItem({ ...state.form }).then((res: any) => {
                ElMessage.success('修改成功')
                router.go(-1);
            });
        };
        const getDetail = () => {
            const id = route.params && route.params.id;
            api.tunnel.getDetail({ "id": id }).then((res: any) => {
                const { id, name, types, status, addr, serial, retry, protoccol, heartbeat } = res
                state.form['name'] = name
                state.form['types'] = types
                state.form['addr'] = addr
                state.form['status'] = status
                state.form['serial'] = JSON.parse(serial)
                state.form['retry'] = JSON.parse(retry)
                state.form['heartbeat'] = JSON.parse(heartbeat)
                state.form['protoccol'] = protoccol ? JSON.parse(protoccol) : { name: "Modbus RTU", options: {} }
                state.form['id'] = id
                let jsonData = JSON.stringify(JSON.parse(protoccol).options);
                state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
                mirrorRef.value.setValue(state.resourceModalPro.content);
            })
        };
        onMounted(() => {
            getDetail();
        });
        return {
            mirrorRef,
            activeName,
            getDetail,
            network_tunnel_type,
            tunnel_serial_baudrate,
            tunnel_serial_databits,
            tunnel_serial_stopbits,
            tunnel_serial_parity,
            network_protocols,
            submit,
            ...toRefs(props),
            ...toRefs(state),
        };
    },
});
</script>

<style>
.CodeMirror {
    width: 100%;
    height: 600px;
    font-size: 16px;
}
</style>
<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
    position: relative;
    padding-left: 20px;

    .el-collapse-item__arrow {
        margin: 0 !important;
        position: absolute;
        left: 0;
        right: 0;

    }
}

::v-deep .el-input,
::v-deep .el-input-number {
    width: 500px;
}

::v-deep .params {
    width: 600px;
}
</style>