fix: 修复多个bug列表中的问题

src/views/iot/configuration/list/edit.vue

@@ -2,7 +2,7 @@
   <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑组态图' : '新增组态图'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="100px">
       <el-form-item label="组态图名称" prop="name">
-        <el-input v-model="formData.name" placeholder="输入组态图名称" />
+        <el-input v-model.trim="formData.name" placeholder="输入组态图名称" />
       </el-form-item>
       <!-- <el-form-item label="说明" prop="remarks">
         <el-input v-model="formData.remarks" type="textarea" :rows="3" />

src/views/iot/configuration/screen/edit.vue

@@ -40,7 +40,7 @@ const formData = reactive({
 });
 
 const ruleForm = {
-	name: [ruleRequired('规则名称不能为空')],
+	projectName: [ruleRequired('规则名称不能为空')],
 };
 
 const onSubmit = async () => {

src/views/iot/network/server/component/list.vue

@@ -1,159 +1,50 @@
 <template>
   <div>
-    <el-table
-      v-loading="loading"
-      :data="data"
-      style="width: 100%"
-    >
-      <el-table-column
-        align="center"
-        prop="id"
-        label="ID"
-        width="80"
-        v-col="'id'"
-      />
+    <el-table v-loading="loading" :data="data" style="width: 100%">
+      <el-table-column align="center" prop="id" label="ID" width="80" v-col="'id'" />
       <!-- <el-table-column align="center" prop="server" label="服务器"/> -->
-      <el-table-column
-        align="center"
-        prop="name"
-        label="名称"
-        v-col="'name'"
-      />
-      <el-table-column
-        align="center"
-        prop="types"
-        label="类型"
-        v-col="'types'"
-      />
-      <el-table-column
-        align="center"
-        prop="addr"
-        label="地址"
-        v-col="'addr'"
-      />
-      <el-table-column
-        show-overflow-tooltip
-        align="center"
-        prop="createdAt"
-        label="创建时间"
-        width="170"
-        v-col="'createdAt'"
-      />
+      <el-table-column align="center" prop="name" label="名称" v-col="'name'" />
+      <el-table-column align="center" prop="types" v-col="'types'" label="类型" :formatter="(a: any) => typesFormat(a.types)" />
+      <el-table-column align="center" prop="addr" label="地址" v-col="'addr'" />
+      <el-table-column show-overflow-tooltip align="center" prop="createdAt" label="创建时间" width="170" v-col="'createdAt'" />
       <!-- <el-table-column align="center" prop="last" label="最近上线"/> -->
-      <el-table-column
-        align="center"
-        prop="types"
-        label="状态"
-        v-col="'status'"
-      >
+      <el-table-column align="center" prop="types" label="状态" v-col="'status'">
         <template #default="scope">
-          <el-tag
-            v-if="!scope.row.status"
-            class="ml-2"
-            type="info"
-          >未启动</el-tag>
-          <el-tag
-            v-else
-            class="ml-2"
-            type="success"
-          >启动</el-tag>
+          <el-tag v-if="!scope.row.status" class="ml-2" type="info">未启动</el-tag>
+          <el-tag v-else class="ml-2" type="success">启动</el-tag>
         </template>
       </el-table-column>
-      <el-table-column
-        align="center"
-        label="操作"
-        width="200"
-        v-col="'auth'"
-      >
+      <el-table-column align="center" label="操作" width="200" v-col="'auth'">
         <template #default="scope">
 
-          <el-button
-            @click="toDetail(scope.row.id)"
-            size="small"
-            type="text"
-            v-auth="'detail'"
-          >详情</el-button>
-          <el-button
-            size="small"
-            link
-            key="info"
-            type="info"
-            v-auth="'edit'"
-            @click="toEdit(scope.row.id)"
-          >编辑</el-button>
+          <el-button @click="toDetail(scope.row.id)" size="small" type="text" v-auth="'detail'">详情</el-button>
+          <el-button size="small" link key="info" type="info" v-auth="'edit'" @click="toEdit(scope.row.id)">编辑</el-button>
 
-          <el-popover
-            placement="bottom"
-            :width="170"
-            trigger="click"
-          >
+          <el-popover placement="bottom" :width="170" trigger="click">
             <template #reference>
-              <el-button
-                size="small"
-                type="text"
-                class="more-btn"
-                @click="isShowMore = !isShowMore"
-                v-auth="'more'"
-              >更多
-                <i
-                  style="margin-left: 2px;"
-                  :class="isShowMore ? 'fa fa-angle-down':'fa fa-angle-up'"
-                ></i>
+              <el-button size="small" type="text" class="more-btn" @click="isShowMore = !isShowMore" v-auth="'more'">更多
+                <i style="margin-left: 2px;" :class="isShowMore ? 'fa fa-angle-down' : 'fa fa-angle-up'"></i>
               </el-button>
             </template>
             <div class="more-opearte-wrap">
-              <el-button
-                @click="onChangeStatus(scope.row.id, 1)"
-                :disabled="scope.row.status"
-                link
-                size="small"
-                key="success"
-                type="success"
-                v-auth="'on'"
-              >启 用</el-button>
+              <el-button @click="onChangeStatus(scope.row.id, 1)" :disabled="scope.row.status" link size="small" key="success" type="success" v-auth="'on'">启 用</el-button>
               <el-divider direction="vertical" />
-              <el-button
-                @click="onChangeStatus(scope.row.id, 0)"
-                :disabled="!scope.row.status"
-                link
-                size="small"
-                key="warning"
-                type="warning"
-                v-auth="'off'"
-              >禁 用</el-button>
+              <el-button @click="onChangeStatus(scope.row.id, 0)" :disabled="!scope.row.status" link size="small" key="warning" type="warning" v-auth="'off'">禁 用</el-button>
               <el-divider direction="vertical" />
-              <el-button
-                @click="onRowDel(scope.row)"
-                link
-                size="small"
-                key="danger"
-                type="danger"
-                v-auth="'delete'"
-              >删 除</el-button>
+              <el-button @click="onRowDel(scope.row)" link size="small" key="danger" type="danger" v-auth="'delete'">删 除</el-button>
             </div>
           </el-popover>
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
-      @size-change="onHandleSizeChange"
-      @current-change="onHandleCurrentChange"
-      class="mt15"
-      :pager-count="5"
-      :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
-      v-model:current-page="param.page"
-      background
-      v-model:page-size="param.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="total"
-    >
+    <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" v-model:current-page="param.page" background v-model:page-size="param.pageSize"
+      layout="total, sizes, prev, pager, next, jumper" :total="total">
     </el-pagination>
   </div>
-
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
+import { ref, toRefs, reactive, onMounted, nextTick, getCurrentInstance, unref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 
@@ -188,6 +79,15 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const router = useRouter();
+
+    const { proxy } = getCurrentInstance() as any;
+
+    const { network_server_type } = proxy.useDict('network_server_type');
+
+    const typesFormat = (types: string) => {
+      return proxy.selectDictLabel(unref(network_server_type), types);
+    };
+
     const state = reactive<TableData>({
       data: [],
       total: 0,
@@ -260,18 +160,6 @@ export default defineComponent({
     const toEdit = (id: number) => {
       router.push(`/iotmanager/network/server/edit/${id}`)
     };
-    // 监听双向绑定 keyWord 的变化
-    watch(
-      () => props.keyWord,
-      // 新数据
-      () => {
-        fetchList()
-      },
-      {
-        deep: true,
-        immediate: true
-      },
-    );
     // 页面加载时
     onMounted(() => {
       initTableData();
@@ -280,6 +168,7 @@ export default defineComponent({
       fetchList,
       toDetail,
       toEdit,
+      typesFormat,
       onChangeStatus,
       onRowDel,
       onHandleSizeChange,
@@ -292,10 +181,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 ::v-deep div.more-opearte-wrap {
-	flex-direction: row;
-	background-color: pink;
-	// padding: 4px!important;
-	div {
-	}
+  flex-direction: row;
+  background-color: pink;
+
+  // padding: 4px!important;
+  div {}
 }
 </style>

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

@@ -1,35 +1,27 @@
 <template>
-	<el-card class="system-dic-container" style="position: relative;">
-		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-			<el-tab-pane label="新建服务器" name="first">
-				<el-collapse v-model="activeViewName">
+    <el-card class="system-dic-container" style="position: relative;">
+        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <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="98px">
                                 <el-form-item label="名称">
-                                    <el-input v-model="form.name" placeholder="请填写名称" />
+                                    <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-option
-                                            v-for="dict in network_server_type"
-                                            :key="dict.value"
-                                            :label="dict.label"
-                                            :value="dict.value">
+                                        <el-option v-for="dict in network_server_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'" 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 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="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>
@@ -46,7 +38,7 @@
                                         <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-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
                                             <el-option label="大端" value="大端" />
                                             <el-option label="小端" value="小端" />
                                         </el-select>
@@ -56,23 +48,19 @@
                                     <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-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 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 && 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" /> -->
@@ -104,11 +92,7 @@
                         <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 network_protocols"
-                                        :key="dict.value"
-                                        :label="dict.label"
-                                        :value="dict.value">
+                                    <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
                                     </el-option>
                                     <!-- <el-option label="Modbus RTU" value="Modbus RTU" />
                                     <el-option label="Modbus TCP" value="Modbus TCP" />
@@ -124,31 +108,28 @@
                                 </el-select>
                             </el-form-item>
                             <el-form-item label="协议参数">
-                                <codeEditor class="params" ref="mirrorRef"
-                                :mode="resourceModalPro.mode"
-                                :content="resourceModalPro.content"
-                                >
+                                <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-tab-pane label="专家视图" name="second">
+            </el-tab-pane>
+            <!-- <el-tab-pane label="专家视图" name="second">
                 <h1>专家视图</h1>
             </el-tab-pane> -->
-		</el-tabs>
-		<div style="position: absolute;right:20px;top: 20px;">
-			<el-button size="medium" @click="goBack">取消</el-button>
+        </el-tabs>
+        <div style="position: absolute;right:20px;top: 20px;">
+            <el-button size="medium" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
             <el-button @click="submit" size="medium" type="primary">提交</el-button>
-		</div>
+        </div>
 
-	  	 <!-- <codeEditor ref="mirrorRef"
+        <!-- <codeEditor ref="mirrorRef"
 	  :mode="resourceModalPro.mode"
 	  :content="resourceModalPro.content"
 	  >
 	  </codeEditor> -->
-	</el-card>
+    </el-card>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, watch } from 'vue';
@@ -165,15 +146,15 @@ import api from '/@/api/network';
 import api2 from '/@/api/system';
 
 interface TableDataState {
-	// ids: number[];
-	// id: string;
+    // ids: number[];
+    // id: string;
     activeViewName: string[];
-	resourceModalPro: {
-		mode: string,
-		content: string,
-		// content: object,
-	},
-	detail: object,
+    resourceModalPro: {
+        mode: string,
+        content: string,
+        // content: object,
+    },
+    detail: object,
     form: object,
     certificateList: object[];
     stick: {
@@ -195,21 +176,21 @@ interface TableDataState {
 
 }
 export default defineComponent({
-	name: 'serverCreate',
-	components: { codeEditor, serverDetail },
-	props: {
-		type: {
-			type: String,
-			default: ''
-		}
-	},
+    name: 'serverCreate',
+    components: { codeEditor, serverDetail },
+    props: {
+        type: {
+            type: String,
+            default: ''
+        }
+    },
 
-	setup(props, context) {
+    setup(props, context) {
         const { proxy } = getCurrentInstance() as any;
-		const route = useRoute();
+        const route = useRoute();
         const router = useRouter();
         const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
-		
+
         const state = reactive<TableDataState>({
             stickValue: "",
             stick: {
@@ -240,14 +221,14 @@ export default defineComponent({
                     value: "长度字段"
                 }
             ],
-			resourceModalPro: {
-				mode: '',
-				content: ''
-			},
-			detail:{},
-            activeViewName: ['1','2','3'],
+            resourceModalPro: {
+                mode: '',
+                content: ''
+            },
+            detail: {},
+            activeViewName: ['1', '2', '3'],
             certificateList: [],
-            form:{
+            form: {
                 id: "",
                 // AccessToken
                 accessToken: "",
@@ -288,17 +269,17 @@ export default defineComponent({
                 // 设备
                 devices: []
             }
-		});
+        });
         const mirrorRef = ref('mirrorRef')
-		const activeName = ref('first')
-		const getDetail = () => {
-			const id = route.params && route.params.id;
-			api.tunnel.getDetail({"id": id}).then((res: any) => {
-				state.detail = res
-			})
-		};
+        const activeName = ref('first')
+        const getDetail = () => {
+            const id = route.params && route.params.id;
+            api.tunnel.getDetail({ "id": id }).then((res: any) => {
+                state.detail = res
+            })
+        };
         const submit = () => {
-            if(!state.form.id) {
+            if (!state.form.id) {
                 delete state.form.id;
             }
             let params = {
@@ -307,7 +288,7 @@ export default defineComponent({
                     ...state.stick
                 }
             }
-            if(mirrorRef.value.getValue()) {
+            if (mirrorRef.value.getValue()) {
                 state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
             }
             // return
@@ -318,25 +299,22 @@ export default defineComponent({
                 // state.data = list
                 // state.total = total
                 // state.param.page = page
-			});
+            });
         };
-        const goBack = () => {
-            router.go(-1);
-        }
-		onMounted(() => {
-            
-			let obj = {}
-			var jsonData = JSON.stringify(obj);
-			state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
+        onMounted(() => {
+
+            let obj = {}
+            var jsonData = JSON.stringify(obj);
+            state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
             getCertificateList()
-		});
-		const handleClick = (tab: TabsPaneContext, event: Event) => {
-		}
+        });
+        const handleClick = (tab: TabsPaneContext, event: Event) => {
+        }
         const getCertificateList = () => {
             api2.certificate.getList().then((res: any) => {
                 state.certificateList = res.Info;
-			})
-		}
+            })
+        }
         const initData = () => {
             state.stick = {
                 "delimit,omitempty": "",
@@ -350,85 +328,89 @@ export default defineComponent({
             }
         }
         const handleChangeType = () => {
-            if(state.form.types != 'mqtt_server' && state.form.isTls == 1) {
+            if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
                 state.form.authType = 3
                 return;
             }
-            if(state.form.isTls == 0) {
+            if (state.form.isTls == 0) {
                 state.form.authType = ""
             }
         }
-		watch(
-			() => state.form.types,
-			(value) => {
+        watch(
+            () => state.form.types,
+            (value) => {
                 getCertificateList()
                 // api.certificate.getList();
-			}
-		);
+            }
+        );
 
         watch(
-			() => state.form.isTls,
-			(value) => {
-                if(value == 0) {
+            () => state.form.isTls,
+            (value) => {
+                if (value == 0) {
                     state.form.authType = ""
                 }
                 // api.certificate.getList();
-			}
-		);
-		return {
-			Edit,
+            }
+        );
+        return {
+            Edit,
             mirrorRef,
-			activeName,
-			getDetail,
-			handleClick,
+            activeName,
+            getDetail,
+            handleClick,
             network_server_type,
             network_protocols,
-			// editDicRef,
-			// editAttrRef,
-			// editFunRef,
-			// editEventRef,
-			// editTabRef,
+            // editDicRef,
+            // editAttrRef,
+            // editFunRef,
+            // editEventRef,
+            // editTabRef,
             getCertificateList,
             submit,
-            goBack,
             initData,
             handleChangeType,
-			...toRefs(props),
-			...toRefs(state),
-		};
-	},
+            ...toRefs(props),
+            ...toRefs(state),
+        };
+    },
 });
 </script>
 
 <style>
 .CodeMirror {
-  width: 100%;
-  height: 600px;
-  font-size: 16px;
+    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;
+        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;
 }
+
 ::v-deep .flex-column {
     display: flex;
     flex-direction: column;
+
     .el-form-item__label {
         justify-content: flex-start;
     }

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

@@ -1,35 +1,27 @@
 <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-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="98px">
                                 <el-form-item label="名称">
-                                    <el-input v-model="form.name" placeholder="请填写名称" />
+                                    <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-option
-                                            v-for="dict in network_server_type"
-                                            :key="dict.value"
-                                            :label="dict.label"
-                                            :value="dict.value">
+                                        <el-option v-for="dict in network_server_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'" 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 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="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>
@@ -46,7 +38,7 @@
                                         <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-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
                                             <el-option label="大端" value="大端" />
                                             <el-option label="小端" value="小端" />
                                         </el-select>
@@ -56,23 +48,19 @@
                                     <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-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 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-select v-model="form.authType" placeholder="选择接入方式">
                                         <el-option label="Basic" :value="1" />
                                         <el-option label="AccessToken" :value="2" />
                                         <!-- <el-option label="证书" :value="3" /> -->
@@ -104,31 +92,24 @@
                         <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 network_protocols"
-                                        :key="dict.value"
-                                        :label="dict.label"
-                                        :value="dict.value">
+                                    <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 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="goBack">取消</el-button>
+            </el-tab-pane>
+        </el-tabs>
+        <div style="position: absolute;right:20px;top: 20px;">
+            <el-button size="medium" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
             <el-button @click="submit" size="medium" type="primary">提交</el-button>
-		</div>
-	</el-card>
+        </div>
+    </el-card>
 </template>
 <script lang="ts">
 import { watch, toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
@@ -145,11 +126,11 @@ import api2 from '/@/api/system';
 
 interface TableDataState {
     activeViewName: string[];
-	resourceModalPro: {
-		mode: string,
-		content: string,
-	},
-	detail: object,
+    resourceModalPro: {
+        mode: string,
+        content: string,
+    },
+    detail: object,
     form: object,
     certificateList: object[];
     stick: {
@@ -170,21 +151,21 @@ interface TableDataState {
     stickValue: string;
 }
 export default defineComponent({
-	name: 'serverCreate',
-	components: { codeEditor, serverDetail },
-	props: {
-		type: {
-			type: String,
-			default: ''
-		}
-	},
+    name: 'serverCreate',
+    components: { codeEditor, serverDetail },
+    props: {
+        type: {
+            type: String,
+            default: ''
+        }
+    },
 
-	setup(props, context) {
+    setup(props, context) {
         const { proxy } = getCurrentInstance() as any;
-		const route = useRoute();
+        const route = useRoute();
         const router = useRouter();
         const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
-		
+
         const state = reactive<TableDataState>({
             // id: "",
             stickValue: "",
@@ -216,14 +197,14 @@ export default defineComponent({
                     value: "长度字段"
                 }
             ],
-			resourceModalPro: {
-				mode: '',
-				content: ''
-			},
+            resourceModalPro: {
+                mode: '',
+                content: ''
+            },
             certificateList: [],
-			detail:{},
-            activeViewName: ['1','2','3'],
-            form:{
+            detail: {},
+            activeViewName: ['1', '2', '3'],
+            form: {
                 // 名称
                 name: '',
                 // AccessToken
@@ -263,14 +244,14 @@ export default defineComponent({
                 // 设备
                 devices: []
             }
-		});
+        });
         const mirrorRef = ref('mirrorRef')
-		const activeName = ref('first')
-		const getDetail = () => {
-			const id = route.params && route.params.id;
-			api.server.getDetail({"id": id}).then((res: any) => {
-                
-                const {id, isTls, authType, certificateId, authUser, authPasswd, accessToken, name, types, status, addr, register, protocol, heartbeat, devices, stick} = res
+        const activeName = ref('first')
+        const getDetail = () => {
+            const id = route.params && route.params.id;
+            api.server.getDetail({ "id": id }).then((res: any) => {
+
+                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
@@ -287,32 +268,32 @@ export default defineComponent({
                 state.form["heartbeat"] = JSON.parse(heartbeat)
                 state.form["devices"] = JSON.parse(devices)
                 let stickInfo = JSON.parse(stick)
-                if(stickInfo.len && stickInfo.len.endian) {
+                if (stickInfo.len && stickInfo.len.endian) {
                     state.stick["len,omitempty"] = stickInfo.len
-                }else if(stickInfo.fixedLen) {
+                } else if (stickInfo.fixedLen) {
                     state.stick["fixedLen,omitempty"] = stickInfo.fixedLen
-                }else if(stickInfo.custom) {
+                } else if (stickInfo.custom) {
                     state.stick["custom,omitempty"] = stickInfo.custom
-                }else if(stickInfo.delimit) {
+                } else if (stickInfo.delimit) {
                     state.stick["delimit,omitempty"] = stickInfo.delimit
                 }
-                if(types == 'tcp') {
-                    if(state.stick['delimit,omitempty']) {
+                if (types == 'tcp') {
+                    if (state.stick['delimit,omitempty']) {
                         state.stickValue = '分隔符'
-                    }else if(state.stick['custom,omitempty']) {
+                    } else if (state.stick['custom,omitempty']) {
                         state.stickValue = '自定义脚本'
-                    }else if(state.stick['fixedLen,omitempty']) {
+                    } else if (state.stick['fixedLen,omitempty']) {
                         state.stickValue = '固定长度'
-                    }else if(state.stick['len,omitempty']) {
+                    } 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);
+                state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
                 mirrorRef.value.setValue(state.resourceModalPro.content);
-			})
-		};
+            })
+        };
         const submit = () => {
             let params = {
                 ...state.form,
@@ -320,14 +301,14 @@ export default defineComponent({
                     ...state.stick
                 }
             }
-            if(mirrorRef.value.getValue()) {
+            if (mirrorRef.value.getValue()) {
                 state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
             }
             // return
             api.server.editItem(params).then((res: any) => {
                 ElMessage.success('修改成功')
                 goBack()
-			});
+            });
         };
         const goBack = () => {
             router.go(-1);
@@ -345,64 +326,67 @@ export default defineComponent({
             }
         }
         const handleChangeType = () => {
-            if(state.form.types != 'mqtt_server' && state.form.isTls == 1) {
+            if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
                 state.form.authType = 3
                 return;
             }
-            if(state.form.isTls == 0) {
+            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.isTls,
+            (value) => {
+                if (value == 0) {
                     state.form.authType = ""
                 }
-			}
-		);
-		onMounted(() => {
+            }
+        );
+        onMounted(() => {
             getDetail();
             getCertificateList();
-		});
+        });
 
-		return {
+        return {
             mirrorRef,
-			activeName,
-			getDetail,
+            activeName,
+            getDetail,
             network_server_type,
             network_protocols,
             submit,
             initData,
             handleChangeType,
             getCertificateList,
-			...toRefs(props),
-			...toRefs(state),
-		};
-	},
+            ...toRefs(props),
+            ...toRefs(state),
+        };
+    },
 });
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-collapse-item__header {
     position: relative;
     padding-left: 20px;
+
     .el-collapse-item__arrow {
-        margin: 0!important;
+        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;
 }
@@ -410,10 +394,10 @@ export default defineComponent({
 ::v-deep .flex-column {
     display: flex;
     flex-direction: column;
+
     .el-form-item__label {
         justify-content: flex-start;
     }
 }
-
 </style>
 

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

@@ -1,6 +1,6 @@
 <template>
     <el-card shadow="hover">
-        <el-form :inline="true" label-width="82px">
+        <el-form :inline="true" label-width="82px" @keyup.enter="searchData">
             <el-form-item label="服务器名称">
                 <el-input size="default" style="width: 200px;margin-left: 20px;" class="search-input" v-model="key" placeholder="请输入搜索关键字" clearable>
             </el-input>
@@ -22,7 +22,7 @@
         </el-form>
         <!-- 页面主要内容 -->
         <tempalte>
-            <list-server :keyWord="keyWord" />
+            <list-server ref="listRef" :keyWord="keyWord" />
         </tempalte>
     </el-card>
 </template>
@@ -33,7 +33,8 @@ import { useRouter } from 'vue-router';
 import listServer from './component/list.vue';
 
 // 向组件传递通道名称关键字
-let keyWord = ref('');
+const keyWord = ref('');
+const listRef = ref();
 // 搜索的key
 const key = ref('');
 
@@ -42,8 +43,10 @@ const router = useRouter();
 
 // 按照通道名称进行搜索
 const searchData = () => {
-    keyWord.value= key.value
+    keyWord.value = key.value
+    listRef.value && listRef.value.fetchList()
 };
+
 const toPage = () => {
     router.push('/iotmanager/network/server/create')
 };

src/views/iot/network/tunnel/component/list.vue

@@ -3,7 +3,7 @@
         <el-table v-loading="loading" :data="data" style="width: 100%">
             <el-table-column align="center" prop="id" v-col="'id'" label="ID" width="80"/>
             <el-table-column align="center" prop="name" v-col="'name'" label="名称"/>
-            <el-table-column align="center" prop="types" v-col="'type'" label="类型"/>
+            <el-table-column align="center" prop="types" v-col="'type'" label="类型" :formatter="(a:any) => typesFormat(a.types)"/>
             <el-table-column align="center" prop="addr" v-col="'address'" label="地址"/>
             <el-table-column show-overflow-tooltip align="center" v-col="'createTime'" prop="createdAt" label="创建时间" width="170"/>
             <el-table-column align="center" prop="types" v-col="'status'" label="状态">
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
+import { ref, toRefs, reactive, onMounted, getCurrentInstance, unref, watch, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 
@@ -85,6 +85,15 @@ export default defineComponent({
 		},
     },
     setup(props, { emit }) {
+
+        const { proxy } = getCurrentInstance() as any;
+
+        const { network_tunnel_type } = proxy.useDict('network_tunnel_type');
+
+        const typesFormat = (types: string) => {
+            return proxy.selectDictLabel(unref(network_tunnel_type), types);
+        };
+
         const router = useRouter();
         const state = reactive<TableData>({
 			data: [],
@@ -95,8 +104,6 @@ export default defineComponent({
                 pageSize: 10,
             },
             isShowMore: true
-            
-            
 		});
         // 改变状态
         const onChangeStatus = (id: number, status: number) => {
@@ -158,17 +165,6 @@ export default defineComponent({
         const toEdit = (id: number) => {
             router.push(`/iotmanager/network/tunnel/edit/${id}`)
         };
-        // 监听双向绑定 keyWord 的变化
-		watch(
-            () => props.keyWord,
-            // 新数据
-            () => {
-                fetchList()
-            },
-            {   deep: true,
-                immediate: true
-            },
-        );
         // 页面加载时
 		onMounted(() => {
 			initTableData();
@@ -181,6 +177,7 @@ export default defineComponent({
             onRowDel,
             onHandleSizeChange,
             onHandleCurrentChange,
+            typesFormat,
             ...toRefs(state),
         };
     }

src/views/iot/network/tunnel/create.vue

@@ -1,34 +1,30 @@
 <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-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="名称" prop="name">
-                                    <el-input v-model="form.name" placeholder="请填写名称" />
+                                    <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 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-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" />
+                                    <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">
+                    <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="端口">
@@ -36,55 +32,39 @@
                                 </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 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 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 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 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-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-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" />
@@ -101,32 +81,24 @@
                         <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 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"
-                                :getValue="getValue"
-                                >
+                                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content" :getValue="getValue">
                                 </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="goBack">取消</el-button>
+            </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>
+        </div>
+    </el-card>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, nextTick } from 'vue';
@@ -142,38 +114,38 @@ import api from '/@/api/network';
 
 interface TableDataState {
     activeViewName: string[];
-	resourceModalPro: {
-		mode: string,
-		content: string,
-	},
-	detail: object,
+    resourceModalPro: {
+        mode: string,
+        content: string,
+    },
+    detail: object,
     form: object
 }
 export default defineComponent({
-	name: 'tunnelCreate',
-	components: { codeEditor, serverDetail },
-	props: {
-		type: {
-			type: String,
-			default: ''
-		}
-	},
+    name: 'tunnelCreate',
+    components: { codeEditor, serverDetail },
+    props: {
+        type: {
+            type: String,
+            default: ''
+        }
+    },
 
-	setup(props, context) {
+    setup(props, context) {
         const { proxy } = getCurrentInstance() as any;
-		const route = useRoute();
+        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>({
             // id: "",
-			resourceModalPro: {
-				mode: '',
-				content: ''
-			},
-			detail:{},
-            activeViewName: ['1','2','3','4','5'],
-            form:{
+            resourceModalPro: {
+                mode: '',
+                content: ''
+            },
+            detail: {},
+            activeViewName: ['1', '2', '3', '4', '5'],
+            form: {
                 // 名称
                 name: '',
                 // 类型
@@ -183,7 +155,7 @@ export default defineComponent({
                 // 地址
                 addr: '',
                 // 串口参数
-                serial:{
+                serial: {
                     baud_rate: "9600",
                     data_bits: "6",
                     stop_bits: "1",
@@ -209,52 +181,52 @@ export default defineComponent({
                     timeout: 30
                 }
             }
-		});
-        
+        });
+
         const mirrorRef = ref('mirrorRef')
-		const activeName = ref('first')
-        
-		const getDetail = () => {
-			const id = route.params && route.params.id;
-			api.tunnel.getDetail({"id": id}).then((res: any) => {
-				state.detail = res
-			})
-		};
+        const activeName = ref('first')
+
+        const getDetail = () => {
+            const id = route.params && route.params.id;
+            api.tunnel.getDetail({ "id": id }).then((res: any) => {
+                state.detail = res
+            })
+        };
 
 
         const submit = () => {
             // 串口参数-检验位-无
-            if(state.form.serial.parity == 0) {
+            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) {
+            if (state.form.serial.parity == 1 || state.form.serial.parity == 2) {
                 state.form.serial.port = null
                 delete state.form.serial.rs485
             }
-            if(mirrorRef.value.getValue()) {
+            if (mirrorRef.value.getValue()) {
                 state.form.protoccol.options = eval("(" + mirrorRef.value.getValue() + ")")
             }
             // return
-            api.tunnel.addItem({...state.form}).then((res: any) => {
+            api.tunnel.addItem({ ...state.form }).then((res: any) => {
                 ElMessage.success('添加成功')
                 goBack()
-			});
+            });
         };
         const goBack = () => {
             router.go(-1);
         }
-		onMounted(() => {
-			let obj = {}
+        onMounted(() => {
+            let obj = {}
             var jsonData = JSON.stringify(obj);
-            state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
-		});
+            state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
+        });
 
-		return {
+        return {
             mirrorRef,
-			activeName,
-			getDetail,
+            activeName,
+            getDetail,
             network_tunnel_type,
             tunnel_serial_baudrate,
             tunnel_serial_databits,
@@ -263,39 +235,41 @@ export default defineComponent({
             network_protocols,
             submit,
             goBack,
-			...toRefs(props),
-			...toRefs(state),
-		};
-	},
+            ...toRefs(props),
+            ...toRefs(state),
+        };
+    },
 });
 </script>
 
 <style>
 .CodeMirror {
-  width: 100%;
-  height: 600px;
-  font-size: 16px;
+    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;
+        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>
 

src/views/iot/network/tunnel/edit.vue

@@ -1,34 +1,30 @@
 <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-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" placeholder="请填写名称" />
+                                    <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 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-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" />
+                                    <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">
+                    <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="端口">
@@ -36,55 +32,39 @@
                                 </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 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 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 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 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-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-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" />
@@ -101,36 +81,28 @@
                         <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 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 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">取消</el-button>
+            </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>
+        </div>
+    </el-card>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus'
 import codeEditor from '/@/components/codeEditor/index.vue'
 
 import serverDetail from './component/serverDetail.vue'
@@ -141,37 +113,37 @@ import api from '/@/api/network';
 
 interface TableDataState {
     activeViewName: string[];
-	resourceModalPro: {
-		mode: string,
-		content: string,
-	},
-	detail: object,
+    resourceModalPro: {
+        mode: string,
+        content: string,
+    },
+    detail: object,
     form: object
 }
 export default defineComponent({
-	name: 'tunnelCreate',
-	components: { codeEditor, serverDetail },
-	props: {
-		type: {
-			type: String,
-			default: ''
-		}
-	},
+    name: 'tunnelCreate',
+    components: { codeEditor, serverDetail },
+    props: {
+        type: {
+            type: String,
+            default: ''
+        }
+    },
 
-	setup(props, context) {
+    setup(props, context) {
         const { proxy } = getCurrentInstance() as any;
-		const route = useRoute();
+        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:{
+            resourceModalPro: {
+                mode: '',
+                content: ''
+            },
+            detail: {},
+            activeViewName: ['1', '2', '3', '4', '5'],
+            form: {
                 id: '',
                 // 名称
                 name: '新建通道',
@@ -182,7 +154,7 @@ export default defineComponent({
                 // 地址
                 addr: '',
                 // 串口参数
-                serial:{
+                serial: {
                     baud_rate: "9600",
                     data_bits: "6",
                     stop_bits: "1",
@@ -208,30 +180,30 @@ export default defineComponent({
                     timeout: 30
                 }
             }
-		});
-		const activeName = ref('first')
+        });
+        const activeName = ref('first')
         const mirrorRef = ref('mirrorRef')
         const submit = () => {
             // 串口参数-检验位-无
-            if(state.form.serial.parity == 0) {
+            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) {
+            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) => {
+            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
+            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
@@ -239,20 +211,20 @@ export default defineComponent({
                 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['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);
+                state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
                 mirrorRef.value.setValue(state.resourceModalPro.content);
-			})
-		};
-		onMounted(() => {
+            })
+        };
+        onMounted(() => {
             getDetail();
-		});
-		return {
+        });
+        return {
             mirrorRef,
-			activeName,
-			getDetail,
+            activeName,
+            getDetail,
             network_tunnel_type,
             tunnel_serial_baudrate,
             tunnel_serial_databits,
@@ -260,39 +232,41 @@ export default defineComponent({
             tunnel_serial_parity,
             network_protocols,
             submit,
-			...toRefs(props),
-			...toRefs(state),
-		};
-	},
+            ...toRefs(props),
+            ...toRefs(state),
+        };
+    },
 });
 </script>
 
 <style>
 .CodeMirror {
-  width: 100%;
-  height: 600px;
-  font-size: 16px;
+    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;
+        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>
 

src/views/iot/network/tunnel/index.vue

@@ -1,9 +1,9 @@
 <template>
     <el-card shadow="hover">
         <el-form :inline="true" label-width="68px">
-            <el-form-item label="通道名称"  @keyup.enter.native="searchData()">
+            <el-form-item label="通道名称" @keyup.enter.native="searchData()">
                 <el-input size="default" style="width: 200px;margin-left: 20px;" class="search-input" v-model="key" placeholder="请输入搜索关键字" clearable>
-            </el-input>
+                </el-input>
             </el-form-item>
             <el-form-item>
                 <el-button size="default" v-auth="'query'" type="primary" class="ml10" @click="searchData">
@@ -22,7 +22,7 @@
         </el-form>
         <!-- 页面主要内容 -->
         <tempalte>
-            <list-tunnel :keyWord="keyWord" />
+            <list-tunnel ref="listRef" :keyWord="keyWord" />
         </tempalte>
     </el-card>
 </template>
@@ -33,7 +33,8 @@ import { useRouter } from 'vue-router';
 import listTunnel from './component/list.vue';
 
 // 向组件传递通道名称关键字
-let keyWord = ref('');
+const keyWord = ref('');
+const listRef = ref();
 // 搜索的key
 const key = ref('');
 
@@ -42,7 +43,8 @@ const router = useRouter();
 
 // 按照通道名称进行搜索
 const searchData = () => {
-    keyWord.value= key.value
+    keyWord.value = key.value
+    listRef.value && listRef.value.fetchList()
 };
 // 去往新增页面
 const toPage = () => {