|
|
@@ -1,103 +1,148 @@
|
|
|
<template>
|
|
|
<div class="page bg padding border page-full Ipt-2" style="position: relative;">
|
|
|
<el-tabs v-model="activeName">
|
|
|
- <el-tab-pane :label="form.id ? '编辑服务器' : '新建服务器'" name="first">
|
|
|
+ <!-- 编辑服务器/新增服务器 -->
|
|
|
+ <el-tab-pane :label="form.id ? $t('message.server.editServer') : $t('message.server.addServer')" name="first">
|
|
|
<el-collapse v-model="activeViewName">
|
|
|
- <el-collapse-item title="基本信息" name="1">
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <el-collapse-item :title="$t('message.server.basicInfo')" name="1">
|
|
|
<div class="collapse-wrap">
|
|
|
- <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
|
|
|
- <el-form-item label="名称">
|
|
|
- <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
|
|
|
+ <el-form :model="form" :label-width="currentLocale == 'en' ? '150px' : '98px'">
|
|
|
+ <!-- 名称 -->
|
|
|
+ <el-form-item :label="$t('message.server.name')">
|
|
|
+ <!-- 请填写名称 -->
|
|
|
+ <el-input v-model="form.name" show-word-limit maxlength="20" :placeholder="$t('message.server.namePlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="类型">
|
|
|
- <el-select v-model="form.types" placeholder="请选择类型">
|
|
|
- <el-option v-for="dict in network_server_type" :key="dict.value" :label="dict.label" :value="dict.value">
|
|
|
+ <!-- 类型 -->
|
|
|
+ <el-form-item :label="$t('message.server.type')">
|
|
|
+ <!-- 请选择类型 -->
|
|
|
+ <el-select v-model="form.types" :placeholder="$t('message.server.typePlaceholder')" >
|
|
|
+ <el-option v-for="dict in network_server_type" :key="dict.value" :label="$t('message.server.'+ dict.label)" :value="dict.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="form.types == 'tcp'" label="粘拆包规则">
|
|
|
- <el-select @change="initData" v-model="stickValue" placeholder="请选择类型">
|
|
|
+ <!-- 粘拆包规则 -->
|
|
|
+ <el-form-item v-if="form.types == 'tcp'" :label="$t('message.server.stickRule')">
|
|
|
+ <!-- 请选择类型 -->
|
|
|
+ <el-select @change="initData" v-model="stickValue" :placeholder="$t('message.server.typePlaceholder')">
|
|
|
<el-option v-for="dict in stick_type" :key="dict.value" :label="dict.label" :value="dict.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="form.types == 'tcp' && stickValue">
|
|
|
- <el-form-item v-if="stickValue == '分隔符'" class="flex-column" label="分隔符">
|
|
|
- <el-input v-model="stickData['delimit,omitempty']" placeholder="请填写分隔符" />
|
|
|
+ <!-- 分隔符 -->
|
|
|
+ <el-form-item v-if="stickValue == '分隔符'" class="flex-column" :label="$t('message.server.separator')">
|
|
|
+ <!-- 请填写分隔符 -->
|
|
|
+ <el-input v-model="stickData['delimit,omitempty']" :placeholder="$t('message.server.separatorPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
|
|
|
- <el-input v-model="stickData['custom,omitempty']" placeholder="请填写自定义脚本" />
|
|
|
+ <!-- 自定义脚本 -->
|
|
|
+ <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" l:abel="$t('message.server.customScript')">
|
|
|
+ <!-- 请填写自定义脚本 -->
|
|
|
+ <el-input v-model="stickData['custom,omitempty']" :placeholder="$t('message.server.customScriptPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
|
|
|
- <el-input type="number" v-model="stickData['fixedLen,omitempty']" placeholder="请填写固定长度" />
|
|
|
+ <!-- 固定长度 -->
|
|
|
+ <el-form-item v-if="stickValue == '固定长度'" class="flex-column" :label="$t('message.server.fixedLength')">
|
|
|
+ <!-- 请填写固定长度 -->
|
|
|
+ <el-input type="number" v-model="stickData['fixedLen,omitempty']" :placeholder="$t('message.server.fixedLengthPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
|
|
|
- <el-input type="number" v-model="stickData['len,omitempty']['len']" placeholder="请填写长度" />
|
|
|
+ <!-- 长度字段 -->
|
|
|
+ <el-form-item v-if="stickValue == '长度字段'" class="flex-column" :label="$t('message.server.length')">
|
|
|
+ <!-- 请填写长度 -->
|
|
|
+ <el-input type="number" v-model="stickData['len,omitempty']['len']" :placeholder="$t('message.server.lengthPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
|
|
|
- <el-input type="number" v-model="stickData['len,omitempty']['offset']" placeholder="请填写偏移量" />
|
|
|
+ <!-- 偏移量 -->
|
|
|
+ <el-form-item v-if="stickValue == '长度字段'" class="flex-column" :label="$t('message.server.offset')">
|
|
|
+ <!-- 请填写偏移量 -->
|
|
|
+ <el-input type="number" v-model="stickData['len,omitempty']['offset']" :placeholder="$t('message.server.offsetPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
|
|
|
- <el-select v-model="stickData['len,omitempty']['endian']" placeholder="请选择大小端">
|
|
|
- <el-option label="大端" value="大端" />
|
|
|
- <el-option label="小端" value="小端" />
|
|
|
+ <!-- 大小端 -->
|
|
|
+ <el-form-item v-if="stickValue == '长度字段'" class="flex-column" :label="$t('message.server.endian')">
|
|
|
+ <!-- 请选择大小端 -->
|
|
|
+ <el-select v-model="stickData['len,omitempty']['endian']" :placeholder="$t('message.server.endianPlaceholder')">
|
|
|
+ <!-- 大端 -->
|
|
|
+ <el-option :label="$t('message.server.bigEndian')" value="大端" />
|
|
|
+ <!-- 小端 -->
|
|
|
+ <el-option :label="$t('message.server.littleEndian')" value="小端" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="地址">
|
|
|
- <el-input v-model="form.addr" placeholder="端口号" />
|
|
|
+ <!-- 地址 -->
|
|
|
+ <el-form-item :label="$t('message.server.addr')">
|
|
|
+ <!-- 端口号 -->
|
|
|
+ <el-input v-model="form.addr" :placeholder="$t('message.server.port')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="开启TLS">
|
|
|
+ <!-- 开启TLS -->
|
|
|
+ <el-form-item :label="$t('message.server.isTls')">
|
|
|
<el-radio-group v-model="form.isTls" class="ml-4">
|
|
|
- <el-radio :label="1">是</el-radio>
|
|
|
- <el-radio :label="0">否</el-radio>
|
|
|
+ <!-- 是 -->
|
|
|
+ <el-radio :label="1">{{$t('message.server.yes')}}</el-radio>
|
|
|
+ <!-- 否 -->
|
|
|
+ <el-radio :label="0">{{$t('message.server.no')}}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="form.isTls == 1" label="接入方式">
|
|
|
- <el-select @change="authTypeChange" v-model="form.authType" placeholder="选择接入方式">
|
|
|
+ <!-- 接入方式 -->
|
|
|
+ <el-form-item v-if="form.isTls == 1" :label="$t('message.server.authType')">
|
|
|
+ <!-- 选择接入方式 -->
|
|
|
+ <el-select @change="authTypeChange" v-model="form.authType" :placeholder="$t('message.server.authTypePlaceholder')">
|
|
|
<el-option label="Basic" :value="1" />
|
|
|
<el-option label="AccessToken" :value="2" />
|
|
|
- <el-option label="证书" :value="3" />
|
|
|
+ <!-- 证书 -->
|
|
|
+ <el-option :label="$t('message.server.certificate')" :value="3" />
|
|
|
</el-select>
|
|
|
- <el-form-item v-if="form.authType == 1" class="flex-column" label="用户名">
|
|
|
- <el-input v-model="form.authUser" placeholder="请填写用户名" />
|
|
|
+ <!-- 用户名 -->
|
|
|
+ <el-form-item v-if="form.authType == 1" class="flex-column" :label="$t('message.server.user')">
|
|
|
+ <!-- 请填写用户名 -->
|
|
|
+ <el-input v-model="form.authUser" :placeholder="$t('message.server.userPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
|
|
|
- <el-input v-model="form.authPasswd" placeholder="请填写密码" />
|
|
|
+ <!-- 密码 -->
|
|
|
+ <el-form-item v-if="form.authType == 1" class="flex-column" :label="$t('message.server.password')">
|
|
|
+ <!-- 请填写密码 -->
|
|
|
+ <el-input v-model="form.authPasswd" :placeholder="$t('message.server.passwordPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="form.authType == 2" class="flex-column" label="Aceess Token">
|
|
|
- <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
|
|
|
+ <!-- 请填写Aceess Token -->
|
|
|
+ <el-input v-model="form.accessToken" :placeholder="$t('message.server.accessTokenPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="form.isTls == 1 && form.authType == 3" label="选择证书">
|
|
|
- <el-select v-model="form.certificateId" placeholder="请选择证书">
|
|
|
+ <!-- 选择证书 -->
|
|
|
+ <el-form-item v-if="form.isTls == 1 && form.authType == 3" :label="$t('message.server.chooseCertificate')">
|
|
|
+ <!-- 请选择证书 -->
|
|
|
+ <el-select v-model="form.certificateId" :placeholder="$t('message.server.certificatePlaceholder')">
|
|
|
<el-option v-for="item in certificateList" :key="item.id" :label="item.name" :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="启用">
|
|
|
+ <!-- 启用 -->
|
|
|
+ <el-form-item :label="$t('message.server.enable')">
|
|
|
<el-switch :active-value="1" :inactive-value="0" v-model="form.status" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
- <el-collapse-item title="注册包" name="2">
|
|
|
- <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
|
|
|
- <el-form-item label="正则表达式">
|
|
|
- <el-input v-model="form.register.regex" placeholder="请填写名称" />
|
|
|
+ <!-- 注册包 -->
|
|
|
+ <el-collapse-item :title="$t('message.server.register')" name="2">
|
|
|
+ <el-form :model="form" :label-width="currentLocale == 'en' ? '150px' : '98px'">
|
|
|
+ <!-- 正则表达式 -->
|
|
|
+ <el-form-item :label="$t('message.server.regex')">
|
|
|
+ <!-- 请填写正则表达式 -->
|
|
|
+ <el-input v-model="form.register.regex" :placeholder="$t('message.server.regexPlaceholder')" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-collapse-item>
|
|
|
- <el-collapse-item title="协议适配" name="3">
|
|
|
- <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
|
|
|
- <el-form-item label="协议">
|
|
|
- <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
|
|
|
- <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"></el-option>
|
|
|
+ <!-- 协议适配 -->
|
|
|
+ <el-collapse-item :title="$t('message.server.protocolAdaptation')" name="3">
|
|
|
+ <el-form :model="form" :label-width="currentLocale == 'en' ? '150px' : '98px'">
|
|
|
+ <!-- 协议 -->
|
|
|
+ <el-form-item :label="$t('message.server.protocol')">
|
|
|
+ <!-- 请选择协议适配 -->
|
|
|
+ <el-select v-model="form.protocol.name" :placeholder="$t('message.server.protocolPlaceholder')">
|
|
|
+ <el-option v-for="dict in messageData" :key="dict.types" :label="$t('message.server.'+dict.title)" :value="dict.name"></el-option>
|
|
|
<!-- 增加系统默认的mqtt选项 -->
|
|
|
<el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="协议参数">
|
|
|
+ <!-- 协议参数 -->
|
|
|
+ <el-form-item :label="$t('message.server.protocolParams')">
|
|
|
<codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
|
|
|
</codeEditor>
|
|
|
</el-form-item>
|
|
|
@@ -107,19 +152,26 @@
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div style="position: absolute;right:20px;top: 14px;">
|
|
|
- <el-button size="small" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
|
|
|
- <el-button @click="submit" size="small" type="primary">提交</el-button>
|
|
|
+ <!-- 取消 -->
|
|
|
+ <el-button size="small" @click="$router.replace('/iotmanager/network/server')">{{ $t('message.formI18nButton.cancel') }}</el-button>
|
|
|
+ <!-- 编辑/新增 -->
|
|
|
+ <el-button @click="submit" size="small" type="primary">{{ form.id ? $t('message.formI18nButton.edit') : $t('message.formI18nButton.add') }}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup name="serverCreateOrEdit">
|
|
|
-import { watch, onMounted, ref, getCurrentInstance, nextTick } from 'vue';
|
|
|
+import { watch, onMounted, ref, getCurrentInstance, nextTick, computed } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import api from '/@/api/network';
|
|
|
import api2 from '/@/api/system';
|
|
|
import deviceApi from '/@/api/device'
|
|
|
import codeEditor from "/@/components/codeEditor/index.vue"
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+// 国际化
|
|
|
+const { locale, t } = useI18n();
|
|
|
+
|
|
|
+const currentLocale = computed(() => locale.value);
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
|
const route = useRoute();
|
|
|
@@ -137,20 +189,24 @@ const stickData = ref({
|
|
|
}
|
|
|
});
|
|
|
const stick_type = ref([
|
|
|
+ // 分隔符
|
|
|
{
|
|
|
- label: "分隔符",
|
|
|
+ label: t('message.server.separator'),
|
|
|
value: "分隔符"
|
|
|
},
|
|
|
+ // 自定义脚本
|
|
|
{
|
|
|
- label: "自定义脚本",
|
|
|
+ label: t('message.server.customScript'),
|
|
|
value: "自定义脚本"
|
|
|
},
|
|
|
+ // 固定长度
|
|
|
{
|
|
|
- label: "固定长度",
|
|
|
+ label: t('message.server.fixedLength'),
|
|
|
value: "固定长度"
|
|
|
},
|
|
|
+ // 长度字段
|
|
|
{
|
|
|
- label: "长度字段",
|
|
|
+ label: t('message.server.lengthKey'),
|
|
|
value: "长度字段"
|
|
|
}
|
|
|
]);
|
|
|
@@ -158,8 +214,8 @@ const resourceModalPro = ref({
|
|
|
mode: '',
|
|
|
content: ''
|
|
|
});
|
|
|
-const messageData = ref([]);
|
|
|
-const certificateList = ref([]);
|
|
|
+const messageData = ref<any>([]);
|
|
|
+const certificateList = ref<any>([]);
|
|
|
const activeViewName = ref(['1', '2', '3']);
|
|
|
const form = ref<any>({
|
|
|
id: '',
|
|
|
@@ -267,15 +323,15 @@ const submit = () => {
|
|
|
params.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
|
|
|
}
|
|
|
if(params.id) {
|
|
|
- // editItem
|
|
|
+ // 编辑成功
|
|
|
api.server.editItem(params).then(() => {
|
|
|
- ElMessage.success('修改成功')
|
|
|
+ ElMessage.success('编辑成功')
|
|
|
goBack()
|
|
|
});
|
|
|
}else {
|
|
|
- // addItem
|
|
|
+ // 新增成功
|
|
|
api.server.addItem(params).then(() => {
|
|
|
- ElMessage.success('添加成功')
|
|
|
+ ElMessage.success('新增成功')
|
|
|
goBack()
|
|
|
});
|
|
|
}
|
|
|
@@ -323,6 +379,7 @@ const getCertificateList = () => {
|
|
|
const getMessageData = () => {
|
|
|
deviceApi.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
|
|
|
messageData.value = res || [];
|
|
|
+ console.log(messageData.value)
|
|
|
});
|
|
|
}
|
|
|
|
