|
|
@@ -5,12 +5,12 @@
|
|
|
<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="70px">
|
|
|
+ <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
|
|
|
<el-form-item label="名称">
|
|
|
<el-input v-model="form.name" placeholder="请填写名称" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="类型">
|
|
|
- <el-select v-model="form.types" placeholder="请选择类型">
|
|
|
+ <el-select @change="handleChangeType" v-model="form.types" placeholder="请选择类型">
|
|
|
<el-option
|
|
|
v-for="dict in network_server_type"
|
|
|
:key="dict.value"
|
|
|
@@ -19,24 +19,89 @@
|
|
|
</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-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="stick['delimit,omitempty']" placeholder="请填写分隔符" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
|
|
|
+ <el-input v-model="stick['custom,omitempty']" placeholder="请填写自定义脚本" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
|
|
|
+ <el-input type="number" v-model="stick['fixedLen,omitempty']" placeholder="请填写固定长度" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
|
|
|
+ <el-input type="number" v-model="stick['len,omitempty']['len']" placeholder="请填写长度" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
|
|
|
+ <el-input type="number" v-model="stick['len,omitempty']['offset']" placeholder="请填写偏移量" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
|
|
|
+ <el-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
|
|
|
+ <el-option label="大端" value="大端" />
|
|
|
+ <el-option label="小端" value="小端" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="地址">
|
|
|
<el-input v-model="form.addr" placeholder="端口号" />
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="开启TLS">
|
|
|
+ <el-radio-group v-model="form.isTls" class="ml-4">
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.isTls == 1 && form.types != 'mqtt_server'" label="选择证书">
|
|
|
+ <el-select v-model="form.certificateId" placeholder="请选择证书">
|
|
|
+ <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 v-if="form.isTls == 1 && form.types == 'mqtt_server'" label="接入方式">
|
|
|
+ <el-select v-model="form.authType" placeholder="选择接入方式">
|
|
|
+ <el-option label="Basic" :value="1" />
|
|
|
+ <el-option label="AccessToken" :value="2" />
|
|
|
+ <!-- <el-option label="证书" :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>
|
|
|
+ <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
|
|
|
+ <el-input v-model="form.authPasswd" placeholder="请填写密码" />
|
|
|
+ </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" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="启用">
|
|
|
- <el-switch v-model="form.status" />
|
|
|
+ <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="82px">
|
|
|
+ <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-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="68px">
|
|
|
+ <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
|
|
|
@@ -66,7 +131,7 @@
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
|
|
|
+import { watch, toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
|
import codeEditor from '/@/components/codeEditor/index.vue'
|
|
|
@@ -76,6 +141,7 @@ import serverDetail from './component/serverDetail.vue'
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
|
import api from '/@/api/network';
|
|
|
+import api2 from '/@/api/system';
|
|
|
|
|
|
interface TableDataState {
|
|
|
activeViewName: string[];
|
|
|
@@ -84,7 +150,24 @@ interface TableDataState {
|
|
|
content: string,
|
|
|
},
|
|
|
detail: object,
|
|
|
- form: object
|
|
|
+ form: object,
|
|
|
+ certificateList: object[];
|
|
|
+ stick: {
|
|
|
+ // 分隔符
|
|
|
+ "delimit,omitempty": string,
|
|
|
+ // 自定义脚本
|
|
|
+ "custom,omitempty": string,
|
|
|
+ // 固定长度
|
|
|
+ "fixedLen,omitempty": number,
|
|
|
+ // 长度字段
|
|
|
+ "len,omitempty": {
|
|
|
+ "len": number,
|
|
|
+ "offset": number,
|
|
|
+ "endian": string
|
|
|
+ }
|
|
|
+ };
|
|
|
+ stick_type: object[];
|
|
|
+ stickValue: string;
|
|
|
}
|
|
|
export default defineComponent({
|
|
|
name: 'serverCreate',
|
|
|
@@ -104,15 +187,57 @@ export default defineComponent({
|
|
|
|
|
|
const state = reactive<TableDataState>({
|
|
|
// id: "",
|
|
|
+ stickValue: "",
|
|
|
+ stick: {
|
|
|
+ "delimit,omitempty": "",
|
|
|
+ "custom,omitempty": "",
|
|
|
+ "fixedLen,omitempty": 0,
|
|
|
+ "len,omitempty": {
|
|
|
+ "len": 0,
|
|
|
+ "offset": 0,
|
|
|
+ "endian": ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stick_type: [
|
|
|
+ {
|
|
|
+ label: "分隔符",
|
|
|
+ value: "分隔符"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "自定义脚本",
|
|
|
+ value: "自定义脚本"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "固定长度",
|
|
|
+ value: "固定长度"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "长度字段",
|
|
|
+ value: "长度字段"
|
|
|
+ }
|
|
|
+ ],
|
|
|
resourceModalPro: {
|
|
|
mode: '',
|
|
|
content: ''
|
|
|
},
|
|
|
+ certificateList: [],
|
|
|
detail:{},
|
|
|
activeViewName: ['1','2','3'],
|
|
|
form:{
|
|
|
// 名称
|
|
|
name: '新建服务器',
|
|
|
+ // AccessToken
|
|
|
+ accessToken: "",
|
|
|
+ // 认证密码
|
|
|
+ authPasswd: "",
|
|
|
+ // 认证用户
|
|
|
+ authUser: "",
|
|
|
+ // 认证方式（1=Basic，2=AccessToken，3=证书）
|
|
|
+ authType: 3,
|
|
|
+ // 是否开启TLS
|
|
|
+ isTls: 0,
|
|
|
+ // 证书id
|
|
|
+ certificateId: "",
|
|
|
// 类型
|
|
|
types: 'tcp',
|
|
|
// 禁用
|
|
|
@@ -144,16 +269,44 @@ export default defineComponent({
|
|
|
const getDetail = () => {
|
|
|
const id = route.params && route.params.id;
|
|
|
api.server.getDetail({"id": id}).then((res: any) => {
|
|
|
- const {id, name, types, status, addr, register, protocol, heartbeat, devices} = res
|
|
|
+
|
|
|
+ const {id, isTls, authType, certificateId, authUser, authPasswd, accessToken, name, types, status, addr, register, protocol, heartbeat, devices, stick} = res
|
|
|
state.form["id"] = id
|
|
|
state.form["name"] = name
|
|
|
state.form["types"] = types
|
|
|
state.form["status"] = status
|
|
|
+ state.form["isTls"] = isTls
|
|
|
state.form["addr"] = addr
|
|
|
+ state.form["authType"] = authType
|
|
|
+ state.form["authUser"] = authUser
|
|
|
+ state.form["authPasswd"] = authPasswd
|
|
|
+ state.form["accessToken"] = accessToken
|
|
|
+ state.form["certificateId"] = certificateId
|
|
|
state.form["register"] = JSON.parse(register)
|
|
|
state.form["protocol"] = JSON.parse(protocol)
|
|
|
state.form["heartbeat"] = JSON.parse(heartbeat)
|
|
|
state.form["devices"] = JSON.parse(devices)
|
|
|
+ let stickInfo = JSON.parse(stick)
|
|
|
+ if(stickInfo.len && stickInfo.len.endian) {
|
|
|
+ state.stick["len,omitempty"] = stickInfo.len
|
|
|
+ }else if(stickInfo.fixedLen) {
|
|
|
+ state.stick["fixedLen,omitempty"] = stickInfo.fixedLen
|
|
|
+ }else if(stickInfo.custom) {
|
|
|
+ state.stick["custom,omitempty"] = stickInfo.custom
|
|
|
+ }else if(stickInfo.delimit) {
|
|
|
+ state.stick["delimit,omitempty"] = stickInfo.delimit
|
|
|
+ }
|
|
|
+ if(types == 'tcp') {
|
|
|
+ if(state.stick['delimit,omitempty']) {
|
|
|
+ state.stickValue = '分隔符'
|
|
|
+ }else if(state.stick['custom,omitempty']) {
|
|
|
+ state.stickValue = '自定义脚本'
|
|
|
+ }else if(state.stick['fixedLen,omitempty']) {
|
|
|
+ state.stickValue = '固定长度'
|
|
|
+ }else if(state.stick['len,omitempty']) {
|
|
|
+ state.stickValue = '长度字段'
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
let jsonData = JSON.stringify(JSON.parse(protocol).options);
|
|
|
state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
|
|
|
@@ -162,20 +315,57 @@ export default defineComponent({
|
|
|
};
|
|
|
const submit = () => {
|
|
|
let params = {
|
|
|
- ...state.form
|
|
|
+ ...state.form,
|
|
|
+ "stick": {
|
|
|
+ ...state.stick
|
|
|
+ }
|
|
|
}
|
|
|
if(mirrorRef.value.getValue()) {
|
|
|
state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
|
|
|
}
|
|
|
- console.log(params)
|
|
|
// return
|
|
|
- api.server.editItem({...state.form}).then((res: any) => {
|
|
|
- ElMessage.success('添加成功')
|
|
|
+ api.server.editItem(params).then((res: any) => {
|
|
|
+ ElMessage.success('修改成功')
|
|
|
router.go(-1);
|
|
|
});
|
|
|
};
|
|
|
+ const initData = () => {
|
|
|
+ state.stick = {
|
|
|
+ "delimit,omitempty": "",
|
|
|
+ "custom,omitempty": "",
|
|
|
+ "fixedLen,omitempty": 0,
|
|
|
+ "len,omitempty": {
|
|
|
+ "len": 0,
|
|
|
+ "offset": 0,
|
|
|
+ "endian": ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const handleChangeType = () => {
|
|
|
+ if(state.form.types != 'mqtt_server' && state.form.isTls == 1) {
|
|
|
+ state.form.authType = 3
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(state.form.isTls == 0) {
|
|
|
+ state.form.authType = ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const getCertificateList = () => {
|
|
|
+ api2.certificate.getList().then((res: any) => {
|
|
|
+ state.certificateList = res.Info;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ () => state.form.isTls,
|
|
|
+ (value) => {
|
|
|
+ if(value == 0) {
|
|
|
+ state.form.authType = ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
onMounted(() => {
|
|
|
getDetail();
|
|
|
+ getCertificateList();
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
@@ -185,6 +375,9 @@ export default defineComponent({
|
|
|
network_server_type,
|
|
|
network_protocols,
|
|
|
submit,
|
|
|
+ initData,
|
|
|
+ handleChangeType,
|
|
|
+ getCertificateList,
|
|
|
...toRefs(props),
|
|
|
...toRefs(state),
|
|
|
};
|
|
|
@@ -211,5 +404,13 @@ export default defineComponent({
|
|
|
width: 600px;
|
|
|
}
|
|
|
|
|
|
+::v-deep .flex-column {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .el-form-item__label {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
|
|
|
