fix：优化服务器新增/编辑

src/views/iot/network/server/createOrEdit.vue

@@ -10,7 +10,7 @@
                   <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
                 </el-form-item>
                 <el-form-item label="类型">
-                  <el-select @change="handleChangeType" v-model="form.types" placeholder="请选择类型">
+                  <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-option>
                   </el-select>
@@ -23,22 +23,22 @@
                 </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-input v-model="stickData['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-input v-model="stickData['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-input type="number" v-model="stickData['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-input type="number" v-model="stickData['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-input type="number" v-model="stickData['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-select v-model="stickData['len,omitempty']['endian']" placeholder="请选择大小端">
                       <el-option label="大端" value="大端" />
                       <el-option label="小端" value="小端" />
                     </el-select>
@@ -53,17 +53,11 @@
                     <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-form-item v-if="form.isTls == 1" label="接入方式">
+                  <el-select @change="authTypeChange" v-model="form.authType" placeholder="选择接入方式">
                     <el-option label="Basic" :value="1" />
                     <el-option label="AccessToken" :value="2" />
-                    <!-- <el-option label="证书" :value="3" /> -->
+                    <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="请填写用户名" />
@@ -75,19 +69,11 @@
                     <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
                   </el-form-item>
                 </el-form-item>
-                <el-form-item v-if="form.isTls == 1 && form.types == 'http'" label="接入方式">
-                  <el-select v-model="form.authType" placeholder="选择接入方式">
-                    <el-option label="AccessToken" :value="2" />
+                <el-form-item v-if="form.isTls == 1 && form.authType == 3" 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 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 :active-value="1" :inactive-value="0" v-model="form.status" />
@@ -127,21 +113,20 @@
   </div>
 </template>
 <script lang="ts" setup name="serverCreateOrEdit">
-import { watch, onMounted, ref, defineAsyncComponent, getCurrentInstance } from 'vue';
+import { watch, onMounted, ref, getCurrentInstance, nextTick } 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'
-
-const codeEditor = defineAsyncComponent(() => import('/@/components/codeEditor/index.vue'));
+import codeEditor from "/@/components/codeEditor/index.vue"
 
 const { proxy } = getCurrentInstance() as any;
 const route = useRoute();
 const router = useRouter();
 const { network_server_type } = proxy.useDict('network_server_type');
 const stickValue = ref('');
-const stick = ref({
+const stickData = ref({
   "delimit,omitempty": "",
   "custom,omitempty": "",
   "fixedLen,omitempty": 0,
@@ -251,20 +236,21 @@ const getDetail = () => {
       stick.value["delimit,omitempty"] = stickInfo.delimit
     }
     if (types == 'tcp') {
-      if (stick.value['delimit,omitempty']) {
+      if (stickData.value['delimit,omitempty']) {
         stickValue.value = '分隔符'
-      } else if (stick.value['custom,omitempty']) {
+      } else if (stickData.value['custom,omitempty']) {
         stickValue.value = '自定义脚本'
-      } else if (stick.value['fixedLen,omitempty']) {
+      } else if (stickData.value['fixedLen,omitempty']) {
         stickValue.value = '固定长度'
-      } else if (stick.value['len,omitempty']) {
+      } else if (stickData.value['len,omitempty']) {
         stickValue.value = '长度字段'
       }
     }
-
     let jsonData = JSON.stringify(JSON.parse(protocol).options);
     resourceModalPro.value.content = JSON.stringify(JSON.parse(jsonData), null, 4);
-    mirrorRef.value.setValue(resourceModalPro.value.content);
+    nextTick(() => {
+      mirrorRef.value.setValue(resourceModalPro.value.content);
+    })
   })
 };
 const submit = () => {
@@ -274,7 +260,7 @@ const submit = () => {
   let params = {
     ...form.value,
     "stick": {
-      ...stick.value
+      ...stickData.value
     }
   }
   if (mirrorRef.value.getValue()) {
@@ -299,7 +285,7 @@ const goBack = () => {
   router.go(-1);
 }
 const initData = () => {
-  stick.value = {
+  stickData.value = {
     "delimit,omitempty": "",
     "custom,omitempty": "",
     "fixedLen,omitempty": 0,
@@ -310,15 +296,24 @@ const initData = () => {
     }
   }
 }
-const handleChangeType = () => {
-  if (form.value.types != 'mqtt_server' && form.value.isTls == 1) {
-    form.value.authType = 3
-    return;
+
+const authTypeChange = () => {
+  if (form.value.authType == 1) {
+    form.value.accessToken = '';
+    form.value.certificateId = ''
+  }
+  if (form.value.authType == 2) {
+    form.value.authUser = '';
+    form.value.authPasswd = '';
+    form.value.certificateId = '';
   }
-  if (form.value.isTls == 0) {
-   form.value.authType = ""
+  if (form.value.authType == 2) {
+    form.value.authUser = '';
+    form.value.authPasswd = '';
+    form.value.accessToken = '';
   }
 }
+
 const getCertificateList = () => {
   api2.certificate.getList().then((res: any) => {
     certificateList.value = res.Info;
@@ -336,14 +331,15 @@ watch(
   (value) => {
     if (value == 0) {
       form.value.authType = ""
+      form.value.certificateId = ""
     }
   }
 );
 
 onMounted(() => {
-  getDetail();
   getMessageData();
   getCertificateList();
+  getDetail();
 });
 </script>
 <style lang="scss" scoped>