feat: 网络组件详情 代码优化，共享/独立配置表单校验

src/views/link/Type/data.ts

@@ -1,7 +1,7 @@
-const configuration = {
+export const Configuration = {
     parserType: undefined,
     port: undefined,
-    host: '0.0.0.0',
+    host: undefined,
     publicPort: '',
     publicHost: '',
     remoteHost: '',
@@ -11,7 +11,7 @@ const configuration = {
     password: '',
     topicPrefix: '',
     maxMessageSize: '',
-    certId: '',
+    certId: undefined,
     privateKeyAlias: '',
     clientId: '',
     parserConfiguration: {
@@ -29,24 +29,21 @@ export const FormStates = {
     name: '',
     type: 'UDP',
     shareCluster: true,
-    // configuration,
     description: '',
 };
 
 export const FormStates2 = {
     serverId: undefined,
-    configuration,
+    configuration: Configuration,
 };
 
-
+export const TCPList = [
-
+    'TCP_SERVER',
-// export const DefaultCluster = {
+    'WEB_SOCKET_SERVER',
-
+    'HTTP_SERVER',
-// }
+    'MQTT_SERVER',
-export const DefaultFormStates = {
+];
-    ...FormStates,
+export const UDPList = ['UDP', 'COAP_SERVER'];
-    cluster: [{ ...FormStates2, id: 1 }],
-};
 
 const VisibleMost = [
     'COAP_SERVER',
@@ -63,6 +60,7 @@ export const VisibleData = {
     host: VisibleMost,
     publicPort: VisibleMost,
     publicHost: VisibleMost,
+    serverId: ['MQTT_CLIENT'],
     remoteHost: ['MQTT_CLIENT'],
     remotePort: ['MQTT_CLIENT'],
     secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'],
@@ -114,3 +112,193 @@ export const Validator = {
     ),
     regOnlyNumber: new RegExp(/^\d+$/),
 };
+
+export const Rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入名称',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    type: [
+        {
+            required: true,
+            message: '请选择类型',
+        },
+    ],
+    shareCluster: [
+        {
+            required: true,
+            message: '请选择集群',
+        },
+    ],
+    host: [
+        {
+            required: true,
+            message: '请选择本地地址',
+        },
+    ],
+    port: [
+        {
+            required: true,
+            message: '请选择本地端口',
+        },
+    ],
+    publicHost: [
+        {
+            required: true,
+            message: '请输入公网地址',
+        },
+        {
+            pattern: Validator.regIp || Validator.regDomain,
+            message: '请输入IP或者域名',
+        },
+    ],
+    publicPort: [
+        {
+            required: true,
+            message: '请输入公网端口',
+        },
+        {
+            pattern: Validator.regOnlyNumber,
+            message: '请输入1-65535之间的正整数',
+        },
+    ],
+    remoteHost: [
+        {
+            required: true,
+            message: '请输入远程地址',
+        },
+        {
+            pattern: Validator.regIp || Validator.regDomain,
+            message: '请输入IP或者域名',
+        },
+    ],
+    remotePort: [
+        {
+            required: true,
+            message: '输入远程端口',
+        },
+        {
+            pattern: Validator.regOnlyNumber,
+            message: '请输入1-65535之间的正整数',
+        },
+    ],
+    clientId: [
+        {
+            required: true,
+            message: '请输入ClientId',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    username: [
+        {
+            required: true,
+            message: '请输入用户名',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    password: [
+        {
+            required: true,
+            message: '请输入密码',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    topicPrefix: [
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    maxMessageSize: [
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    secure: [
+        {
+            required: true,
+        },
+    ],
+    certId: [
+        {
+            required: true,
+            message: '请选择证书',
+        },
+    ],
+    privateKeyAlias: [
+        {
+            required: true,
+            message: '请输入私钥别名',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    parserType: [
+        {
+            required: true,
+            message: '请选择粘拆包规则',
+        },
+    ],
+    delimited: [
+        {
+            required: true,
+            message: '请输入分隔符',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    lang: [
+        {
+            required: true,
+            message: '请选择脚本语言',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    script: [
+        {
+            required: true,
+            message: '请输入脚本',
+        },
+    ],
+    size: [
+        {
+            required: true,
+            message: '请输入长度值',
+        },
+    ],
+    length: [
+        {
+            required: true,
+            message: '请选择长度',
+        },
+    ],
+    offset: [
+        {
+            pattern: Validator.regOnlyNumber,
+            message: '请输入0-65535之间的正整数',
+        },
+    ],
+};

src/views/link/Type/type.d.ts

@@ -1,31 +1,38 @@
-export interface Form2 {
+export interface ConfigurationType {
-    id: number;
+    parserType: string | undefined;
-    serverId: string | undefined;
+    port: string | undefined;
-    configuration: {
+    host: string | undefined;;
-        parserType: undefined;
+    publicPort: string;
-        port: undefined;
+    publicHost: string;
-        host: string;
+    remoteHost: string;
-        publicPort: string;
+    remotePort: string;
-        publicHost: string;
+    secure: boolean;
-        remoteHost: string;
+    username: string;
-        remotePort: string;
+    password: string;
-        secure: boolean;
+    topicPrefix: string;
-        username: string;
+    maxMessageSize: string;
-        password: string;
+    certId: string | undefined;
-        topicPrefix: string;
+    privateKeyAlias: string;
-        maxMessageSize: string;
+    clientId: string;
-        certId: string;
+    parserConfiguration: {
-        privateKeyAlias: string;
+        delimited: string;
-        clientId: string;
+        lang: string;
-        parserConfiguration: {
+        script: string;
-            delimited: string;
+        size: string;
-            lang: string;
+        length: string;
-            script: string;
+        offset: string;
-            size: string;
+        little: string | boolean;
-            length: string;
-            offset: string;
-            little: string | boolean;
-        };
     };
+}
+
+export interface FormDataType {
+    name: string;
+    type: string;
+    shareCluster: boolean;
     description: string;
 }
+export interface FormData2Type {
+    id?: number | string;
+    serverId?: string | undefined;
+    configuration: ConfigurationType;
+}