perf(components): 优化“协议自定义参数”组件 UI

src/views/setup-protocol/CustomParams.vue

@@ -60,42 +60,42 @@ const rules = computed<FormRules<ProtocolParamInfo>>(() => {
     gatewayParamName: [
       {
         required: true,
-        message: t('common.plzEnter'),
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.gatewayParamName') }),
         trigger: 'blur',
       },
     ],
     gatewayParamCode: [
       {
         required: true,
-        message: t('common.plzEnter'),
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.gatewayParamCode') }),
         trigger: 'blur',
       },
     ],
     readWriteType: [
       {
         required: true,
-        message: t('common.plzSelect'),
+        message: t('common.plzSelect', { name: t('setupProtocol.protocolParamFields.readWriteType') }),
         trigger: 'blur',
       },
     ],
     parsingType: [
       {
         required: true,
-        message: t('common.plzSelect'),
+        message: t('common.plzSelect', { name: t('setupProtocol.protocolParamFields.parsingType') }),
         trigger: 'blur',
       },
     ],
     addrLength: [
       {
         required: true,
-        message: t('common.plzEnter'),
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.addressLength') }),
         trigger: 'blur',
       },
     ],
     registerAddr: [
       {
         required: true,
-        message: t('common.plzEnter'),
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.registerAddress') }),
         trigger: 'blur',
       },
     ],
@@ -166,8 +166,8 @@ defineExpose({
     @ok="handleOk"
   >
     <AForm ref="formRef" :model="customParamsForm" :rules="rules" layout="vertical">
-      <ARow :gutter="[60, 32]">
-        <ACol :span="12">
+      <ARow :gutter="30">
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.gatewayParamName')" name="gatewayParamName">
             <AInput
               v-model:value="customParamsForm.gatewayParamName"
@@ -175,9 +175,31 @@ defineExpose({
               :placeholder="$t('common.plzEnter')"
             />
           </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.gatewayParamCode')" name="gatewayParamCode">
+            <AInput
+              v-model:value="customParamsForm.gatewayParamCode"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.unit')" name="unit">
             <AInput v-model:value="customParamsForm.unit" class="protocol-input" :placeholder="$t('common.plzEnter')" />
           </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.module')" name="module">
+            <AInput
+              v-model:value="customParamsForm.module"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.readWriteType')" name="readWriteType">
             <ASelect
               v-model:value="customParamsForm.readWriteType"
@@ -190,78 +212,35 @@ defineExpose({
               </ASelectOption>
             </ASelect>
           </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.writeFunctionCode')" name="writeFuncCode">
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.parsingType')" name="parsingType">
             <ASelect
-              v-model:value="customParamsForm.writeFuncCode"
+              v-model:value="customParamsForm.parsingType"
               class="protocol-input"
               :placeholder="$t('common.plzSelect')"
+              @change="handleParsingTypeChange"
             >
-              <ASelectOption v-for="item in writeFuncCode" :key="item.dictEngValue" :value="item.dictValue">
+              <ASelectOption v-for="item in parsingTypes" :key="item.dictEngValue" :value="item.dictValue">
                 {{ item.dictValue }}
               </ASelectOption>
             </ASelect>
           </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.addressLength')" name="addrLength">
-            <AInputNumber
-              v-model:value="customParamsForm.addrLength"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-              :min="0"
-              :precision="0"
-            />
-          </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.coefficient')" name="coefficient">
-            <AInputNumber
-              v-model:value="customParamsForm.coefficient"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-              :min="0"
-            />
-          </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.readCalculationFormula')" name="readCalcFormula">
-            <AInput
-              v-model:value="customParamsForm.readCalcFormula"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
-          </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.decimalPlaces')" name="decimalPlace">
-            <AInputNumber
-              v-model:value="customParamsForm.decimalPlace"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-              :min="0"
-              :precision="0"
-            />
-          </AFormItem>
         </ACol>
-        <ACol :span="12">
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.gatewayParamCode')" name="gatewayParamCode">
-            <AInput
-              v-model:value="customParamsForm.gatewayParamCode"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
-          </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.module')" name="module">
-            <AInput
-              v-model:value="customParamsForm.module"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
-          </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.parsingType')" name="parsingType">
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.writeFunctionCode')" name="writeFuncCode">
             <ASelect
-              v-model:value="customParamsForm.parsingType"
+              v-model:value="customParamsForm.writeFuncCode"
               class="protocol-input"
               :placeholder="$t('common.plzSelect')"
-              @change="handleParsingTypeChange"
             >
-              <ASelectOption v-for="item in parsingTypes" :key="item.dictEngValue" :value="item.dictValue">
+              <ASelectOption v-for="item in writeFuncCode" :key="item.dictEngValue" :value="item.dictValue">
                 {{ item.dictValue }}
               </ASelectOption>
             </ASelect>
           </AFormItem>
+        </ACol>
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.readFunctionCode')" name="readFuncCode">
             <ASelect
               v-model:value="customParamsForm.readFuncCode"
@@ -273,6 +252,19 @@ defineExpose({
               </ASelectOption>
             </ASelect>
           </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.addressLength')" name="addrLength">
+            <AInputNumber
+              v-model:value="customParamsForm.addrLength"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              :min="0"
+              :precision="0"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.registerAddress')" name="registerAddr">
             <AInput
               v-model:value="customParamsForm.registerAddr"
@@ -280,6 +272,18 @@ defineExpose({
               :placeholder="$t('common.plzEnter')"
             />
           </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.coefficient')" name="coefficient">
+            <AInputNumber
+              v-model:value="customParamsForm.coefficient"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              :min="0"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.isHighFrequencyParameter')" name="isHighFreqParam">
             <ASelect
               v-model:value="customParamsForm.isHighFreqParam"
@@ -292,6 +296,17 @@ defineExpose({
               </ASelectOption>
             </ASelect>
           </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.readCalculationFormula')" name="readCalcFormula">
+            <AInput
+              v-model:value="customParamsForm.readCalcFormula"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.writeCalculationFormula')" name="writeCalcFormula">
             <AInput
               v-model:value="customParamsForm.writeCalcFormula"
@@ -300,6 +315,17 @@ defineExpose({
             />
           </AFormItem>
         </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.decimalPlaces')" name="decimalPlace">
+            <AInputNumber
+              v-model:value="customParamsForm.decimalPlace"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              :min="0"
+              :precision="0"
+            />
+          </AFormItem>
+        </ACol>
       </ARow>
     </AForm>
   </AModal>