feat: 网络组件详情 独立配置表单样式

src/views/link/Type/data.ts

@@ -1,36 +1,53 @@
+const configuration = {
+    parserType: undefined,
+    port: undefined,
+    host: '0.0.0.0',
+    publicPort: '',
+    publicHost: '',
+    remoteHost: '',
+    remotePort: '',
+    secure: false,
+    username: '',
+    password: '',
+    topicPrefix: '',
+    maxMessageSize: '',
+    certId: '',
+    privateKeyAlias: '',
+    clientId: '',
+    parserConfiguration: {
+        delimited: '',
+        lang: '',
+        script: '',
+        size: '',
+        length: '4',
+        offset: '0',
+        little: 'false',
+    },
+};
+
 export const FormStates = {
     name: '',
     type: 'UDP',
     shareCluster: true,
-    parserType: '',
+    // configuration,
-    configuration: {
-        port: '',
-        host: '0.0.0.0',
-        publicPort: '',
-        publicHost: '',
-        remoteHost: '',
-        remotePort: '',
-        secure: false,
-        username: '',
-        password: '',
-        topicPrefix: '',
-        maxMessageSize: '',
-        certId: '',
-        privateKeyAlias: '',
-        clientId: '',
-        parserConfiguration: {
-            delimited: '',
-            lang: '',
-            script: '',
-            size: '',
-            length: '',
-            offset: '',
-            little: '',
-        },
-    },
     description: '',
 };
 
+export const FormStates2 = {
+    serverId: undefined,
+    configuration,
+};
+
+
+
+// export const DefaultCluster = {
+
+// }
+export const DefaultFormStates = {
+    ...FormStates,
+    cluster: [{ ...FormStates2, id: 1 }],
+};
+
 const VisibleMost = [
     'COAP_SERVER',
     'MQTT_SERVER',
@@ -42,7 +59,6 @@ const VisibleMost = [
 
 export const VisibleData = {
     parserType: ['TCP_SERVER'],
-    // configuration: {
     port: VisibleMost,
     host: VisibleMost,
     publicPort: VisibleMost,
@@ -54,10 +70,7 @@ export const VisibleData = {
     password: ['MQTT_CLIENT'],
     topicPrefix: ['MQTT_CLIENT'],
     maxMessageSize: ['MQTT_SERVER', 'MQTT_CLIENT'],
-    // certId: '',
-    // privateKeyAlias: '',
     clientId: ['MQTT_CLIENT'],
-    // parserConfiguration: {
     delimited: ['DELIMITED'],
     lang: ['SCRIPT'],
     script: ['SCRIPT'],
@@ -65,9 +78,7 @@ export const VisibleData = {
     length: ['LENGTH_FIELD'],
     offset: ['LENGTH_FIELD'],
     little: ['LENGTH_FIELD'],
-    // },
+    secureSpan12: ['MQTT_CLIENT', 'MQTT_SERVER'],
-
-    // },
 };
 
 export const ParserTypeOptions = [
@@ -77,6 +88,29 @@ export const ParserTypeOptions = [
     { value: 'FIXED_LENGTH', label: '固定长度' },
     { value: 'LENGTH_FIELD', label: '长度字段' },
 ];
+export const LengthOptions = [
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+    { value: '3', label: '3' },
+    { value: '4', label: '4' },
+    { value: '8', label: '8' },
+];
+export const LittleOptions = [
+    { label: '大端', value: 'false' },
+    { label: '小端', value: 'true' },
+];
 
-export const isVisible = (LastName: string, dependencies: string | boolean) =>
+export const isVisible = (
-    VisibleData[LastName].includes(dependencies);
+    LastName: string,
+    dependencies: string | boolean | undefined,
+) => VisibleData[LastName].includes(dependencies);
+
+export const Validator = {
+    regIp: new RegExp(
+        /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/,
+    ),
+    regDomain: new RegExp(
+        /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
+    ),
+    regOnlyNumber: new RegExp(/^\d+$/),
+};

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

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