feat(views): 支持批量删除协议参数和新增自定义参数

src/api/index.ts

@@ -26,6 +26,7 @@ import type {
   ProtocolList,
   ProtocolListItem,
   ProtocolParamData,
+  ProtocolParamInfo,
   ProtocolParamSearchParams,
   ProtocolReset,
   SerialNumberItemData,
@@ -242,6 +243,13 @@ export const orgGatewaySerialNumber = async (protocolList: ProtocolList) => {
 
 // 协议参数
 
+export const addProtocolParam = async (params: Partial<ProtocolParamInfo>) => {
+  await request(apiBiz('/protocolParamInfo/add'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
 export const getProtocolParamList = async (params: ProtocolParamSearchParams) => {
   const data = await request<ProtocolParamData>(apiBiz('/protocolParamInfo/getPageList'), {
     method: 'POST',
@@ -251,6 +259,13 @@ export const getProtocolParamList = async (params: ProtocolParamSearchParams) =>
   return data;
 };
 
+export const batchDeleleProtocolParam = async (params: number[]) => {
+  await request(apiBiz('/protocolParamInfo/batchDeleleByIds'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
 // 协议基本信息
 
 export const addProtocolBaseInfo = async () => {

src/i18n/locales/zh.json

@@ -62,6 +62,7 @@
   },
   "setupProtocol": {
     "addCustomParams": "新增自定义参数",
+    "addCustomParamsSuccessful": "新增自定义参数成功",
     "addStandardParams": "新增标准参数",
     "addrOrder": "地址顺序",
     "baudRate": "波特率",
@@ -70,10 +71,12 @@
     "canNotFindProtocolType": "没有找到我的协议类型",
     "clickToDownloadTemplate": "点击下载模板",
     "clickToUpload": "填写必填项后，点击下方区域上传",
+    "confirmDeleteParams": "确定要删除这些协议参数吗？",
     "confirmResult": "确认结果",
     "createProtocol": "创建协议",
     "dataBit": "数据位",
     "dataSendInterval": "数据发送间隔",
+    "deleteParamsSuccessful": "删除协议参数成功",
     "deleteSelected": "删除所选",
     "deviceType": "设备类型",
     "downloadProtocolSuccessful": "下载协议 {name} 成功",
@@ -96,7 +99,6 @@
     "protocolParamFields": {
       "addressLength": "地址长度",
       "coefficient": "系数",
-      "contiguousAddressingRange": "连续取址范围",
       "customParamName": "客户参数名称",
       "dataType": "数据类型",
       "decimalPlaces": "小数点位数",

src/types/index.ts

@@ -117,11 +117,11 @@ export interface CustomParamsForm {
 }
 
 export interface ProtocolBaseInfo {
-  id: number | null;
+  id: number;
   protocolName: string;
   protocolType: string;
   deviceType: string;
-  deviceTypeId: number | null;
+  deviceTypeId: number;
   dataBit: 5 | 6 | 7 | 8;
   parityBit: 'N' | 'O' | 'E';
   stopBit: '1' | '1.5' | '2';
@@ -162,21 +162,21 @@ export interface ProtocolParamInfo {
   readFuncCode: string;
   writeFuncCode: string;
   registerAddr: string;
-  addrNumber: string | null;
-  registerType: string | null;
-  registerTypeCode: string | null;
+  addrNumber: string;
+  registerType: string;
+  registerTypeCode: string;
   parsingType: string;
   parsingTypeCode: string;
   addrLength: number;
-  wordLength: number | null;
-  wordLengthCode: string | null;
-  quantity: number | null;
+  wordLength: number;
+  wordLengthCode: string;
+  quantity: number;
   coefficient: number;
   isHighFreqParam: string;
   isHighFreqParamCode: string;
   readCalcFormula: string;
   writeCalcFormula: string;
-  decimalPlace: number | null;
+  decimalPlace: number;
 }
 
 export interface ProtocolParamSearchParams extends PageParams {

src/views/setup-protocol/CustomParams.vue

@@ -1,80 +1,145 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { message } from 'ant-design-vue';
 
+import { useDictData } from '@/hooks/dict-data';
+import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
+import { t } from '@/i18n';
+import { addProtocolParam } from '@/api';
+import { DictCode } from '@/constants';
 
-import type { CustomParamsForm, FormRules } from '@/types';
+import type { FormInstance } from 'ant-design-vue';
+import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
+import type { FormRules, ProtocolParamInfo } from '@/types';
+
+interface Props {
+  protocolId: number;
+}
+
+const props = defineProps<Props>();
 
 const { visible, showView, hideView } = useViewVisible();
+const { handleRequest } = useRequest();
+const { dictData: readWriteTypes, getDictData: getReadWriteTypes } = useDictData(DictCode.ReadWriteType);
+const { dictData: parsingTypes, getDictData: getParsingTypes } = useDictData(DictCode.ParsingType);
+const { dictData: writeFuncCode, getDictData: getWriteFuncCode } = useDictData(DictCode.WriteFuncCode);
+const { dictData: readFuncCode, getDictData: getReadFuncCode } = useDictData(DictCode.ReadFuncCode);
+const { dictData: isHighFreqParam, getDictData: getIsHighFreqParam } = useDictData(DictCode.IsHighFreqParam);
 
-const customParamsForm = reactive<CustomParamsForm>({
+const customParamsForm = reactive<Partial<ProtocolParamInfo>>({
   gatewayParamName: '',
   gatewayParamCode: '',
   unit: '',
   module: '',
-  readWriteType: '',
-  parsingType: '',
-  writeFunctionCode: '',
-  readFunctionCode: '',
-  addressLength: 0,
-  registerAddress: 0,
-  coefficient: 0,
-  isHighFrequencyParameter: '',
-  readCalculationFormula: '',
-  writeCalculationFormula: '',
-  decimalPlaces: 0,
-  contiguousAddressingRange: 0,
+  readWriteType: undefined,
+  readWriteTypeCode: undefined,
+  parsingType: undefined,
+  parsingTypeCode: undefined,
+  writeFuncCode: undefined,
+  readFuncCode: undefined,
+  addrLength: undefined,
+  registerAddr: '',
+  coefficient: undefined,
+  isHighFreqParam: undefined,
+  isHighFreqParamCode: undefined,
+  readCalcFormula: '',
+  writeCalcFormula: '',
+  decimalPlace: undefined,
 });
 
-const rules = computed<FormRules<CustomParamsForm>>(() => {
+const rules = computed<FormRules<ProtocolParamInfo>>(() => {
   return {
     gatewayParamName: [
       {
         required: true,
-        message: 'plz enter',
-        trigger: 'change',
+        message: t('common.plzEnter'),
+        trigger: 'blur',
       },
     ],
     gatewayParamCode: [
       {
         required: true,
-        message: 'plz enter',
-        trigger: 'change',
+        message: t('common.plzEnter'),
+        trigger: 'blur',
       },
     ],
     readWriteType: [
       {
         required: true,
-        message: 'plz enter',
-        trigger: 'change',
+        message: t('common.plzSelect'),
+        trigger: 'blur',
       },
     ],
     parsingType: [
       {
         required: true,
-        message: 'plz enter',
-        trigger: 'change',
+        message: t('common.plzSelect'),
+        trigger: 'blur',
       },
     ],
-    addressLength: [
+    addrLength: [
       {
         required: true,
-        message: 'plz enter',
-        trigger: 'change',
+        message: t('common.plzEnter'),
+        trigger: 'blur',
       },
     ],
-    registerAddress: [
+    registerAddr: [
       {
         required: true,
-        message: 'plz enter',
-        trigger: 'change',
+        message: t('common.plzEnter'),
+        trigger: 'blur',
       },
     ],
   };
 });
 
+onMounted(() => {
+  handleRequest(async () => {
+    await getReadWriteTypes();
+    await getParsingTypes();
+    await getWriteFuncCode();
+    await getReadFuncCode();
+    await getIsHighFreqParam();
+  });
+});
+
+const handleReadWriteTypeChange = (_value: SelectValue, option: DefaultOptionType) => {
+  customParamsForm.readWriteTypeCode = option.key;
+};
+
+const handleParsingTypeChange = (_value: SelectValue, option: DefaultOptionType) => {
+  customParamsForm.parsingTypeCode = option.key;
+};
+
+const handleIsHighFreqParamChange = (_value: SelectValue, option: DefaultOptionType) => {
+  customParamsForm.isHighFreqParamCode = option.key;
+};
+
+const formRef = ref<FormInstance>();
+
 const handleOk = () => {
-  hideView();
+  formRef.value
+    ?.validate()
+    .then(() => {
+      handleRequest(async () => {
+        await addProtocolParam({
+          baseInfoId: props.protocolId,
+          ...customParamsForm,
+        });
+
+        message.success(t('setupProtocol.addCustomParamsSuccessful'));
+        hideView();
+      });
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
+
+const handleClose = () => {
+  formRef.value?.resetFields();
 };
 
 defineExpose({
@@ -84,8 +149,15 @@ defineExpose({
 </script>
 
 <template>
-  <AModal v-model:open="visible" :title="$t('setupProtocol.addCustomParams')" :width="720" centered @ok="handleOk">
-    <AForm :model="customParamsForm" :rules="rules" layout="vertical">
+  <AModal
+    v-model:open="visible"
+    :title="$t('setupProtocol.addCustomParams')"
+    :width="720"
+    centered
+    :after-close="handleClose"
+    @ok="handleOk"
+  >
+    <AForm ref="formRef" :model="customParamsForm" :rules="rules" layout="vertical">
       <ARow :gutter="[60, 32]">
         <ACol :span="12">
           <AFormItem :label="$t('setupProtocol.protocolParamFields.gatewayParamName')" name="gatewayParamName">
@@ -99,46 +171,59 @@ defineExpose({
             <AInput v-model:value="customParamsForm.unit" class="protocol-input" :placeholder="$t('common.plzEnter')" />
           </AFormItem>
           <AFormItem :label="$t('setupProtocol.protocolParamFields.readWriteType')" name="readWriteType">
-            <AInput
+            <ASelect
               v-model:value="customParamsForm.readWriteType"
               class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
+              :placeholder="$t('common.plzSelect')"
+              @change="handleReadWriteTypeChange"
+            >
+              <ASelectOption v-for="item in readWriteTypes" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
           </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.writeFunctionCode')" name="writeFunctionCode">
-            <AInput
-              v-model:value="customParamsForm.writeFunctionCode"
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.writeFunctionCode')" name="writeFuncCode">
+            <ASelect
+              v-model:value="customParamsForm.writeFuncCode"
               class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
+              :placeholder="$t('common.plzSelect')"
+            >
+              <ASelectOption v-for="item in writeFuncCode" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
           </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.addressLength')" name="addressLength">
-            <AInput
-              v-model:value="customParamsForm.addressLength"
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.addressLength')" name="addrLength">
+            <AInputNumber
+              v-model:value="customParamsForm.addrLength"
               class="protocol-input"
               :placeholder="$t('common.plzEnter')"
-            /> </AFormItem
-          ><AFormItem :label="$t('setupProtocol.protocolParamFields.coefficient')" name="coefficient">
-            <AInput
+              :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="readCalculationFormula"
-          >
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.readCalculationFormula')" name="readCalcFormula">
             <AInput
-              v-model:value="customParamsForm.readCalculationFormula"
+              v-model:value="customParamsForm.readCalcFormula"
               class="protocol-input"
               :placeholder="$t('common.plzEnter')"
-            /> </AFormItem
-          ><AFormItem :label="$t('setupProtocol.protocolParamFields.decimalPlaces')" name="decimalPlaces">
-            <AInput
-              v-model:value="customParamsForm.decimalPlaces"
+            />
+          </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>
@@ -158,52 +243,50 @@ defineExpose({
             />
           </AFormItem>
           <AFormItem :label="$t('setupProtocol.protocolParamFields.parsingType')" name="parsingType">
-            <AInput
+            <ASelect
               v-model:value="customParamsForm.parsingType"
               class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
-          </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.readFunctionCode')" name="readFunctionCode">
-            <AInput
-              v-model:value="customParamsForm.readFunctionCode"
-              class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
+              :placeholder="$t('common.plzSelect')"
+              @change="handleParsingTypeChange"
+            >
+              <ASelectOption v-for="item in parsingTypes" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
           </AFormItem>
-          <AFormItem :label="$t('setupProtocol.protocolParamFields.registerAddress')" name="registerAddress">
-            <AInput
-              v-model:value="customParamsForm.registerAddress"
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.readFunctionCode')" name="readFuncCode">
+            <ASelect
+              v-model:value="customParamsForm.readFuncCode"
               class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
+              :placeholder="$t('common.plzSelect')"
+            >
+              <ASelectOption v-for="item in readFuncCode" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
           </AFormItem>
-          <AFormItem
-            :label="$t('setupProtocol.protocolParamFields.isHighFrequencyParameter')"
-            name="isHighFrequencyParameter"
-          >
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.registerAddress')" name="registerAddr">
             <AInput
-              v-model:value="customParamsForm.isHighFrequencyParameter"
+              v-model:value="customParamsForm.registerAddr"
               class="protocol-input"
               :placeholder="$t('common.plzEnter')"
             />
           </AFormItem>
-          <AFormItem
-            :label="$t('setupProtocol.protocolParamFields.writeCalculationFormula')"
-            name="writeCalculationFormula"
-          >
-            <AInput
-              v-model:value="customParamsForm.writeCalculationFormula"
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.isHighFrequencyParameter')" name="isHighFreqParam">
+            <ASelect
+              v-model:value="customParamsForm.isHighFreqParam"
               class="protocol-input"
-              :placeholder="$t('common.plzEnter')"
-            />
+              :placeholder="$t('common.plzSelect')"
+              @change="handleIsHighFreqParamChange"
+            >
+              <ASelectOption v-for="item in isHighFreqParam" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
           </AFormItem>
-          <AFormItem
-            :label="$t('setupProtocol.protocolParamFields.contiguousAddressingRange')"
-            name="contiguousAddressingRange"
-          >
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.writeCalculationFormula')" name="writeCalcFormula">
             <AInput
-              v-model:value="customParamsForm.contiguousAddressingRange"
+              v-model:value="customParamsForm.writeCalcFormula"
               class="protocol-input"
               :placeholder="$t('common.plzEnter')"
             />
@@ -214,4 +297,8 @@ defineExpose({
   </AModal>
 </template>
 
-<!-- <style lang="scss" scoped></style> -->
+<style lang="scss" scoped>
+.protocol-input {
+  width: 100%;
+}
+</style>

src/views/setup-protocol/ProtocolContent.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue';
+import { message, Modal } from 'ant-design-vue';
 import { debounce } from 'lodash-es';
 
 import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
-import { getProtocolParamList } from '@/api';
+import { t } from '@/i18n';
+import { batchDeleleProtocolParam, getProtocolParamList } from '@/api';
 import { DictCode } from '@/constants';
 
 import CustomParams from './CustomParams.vue';
@@ -89,19 +91,40 @@ const getCurrentProtocolParams = async () => {
 
 const handleParamNameOrCodeChange = debounce(() => {
   pageParams.value.pageIndex = 1;
+  selectedParamIds.value = [];
   getCurrentProtocolParams();
 }, 300);
 
 const handlePageChange = (page: number, pageSize: number) => {
   pageParams.value.pageIndex = page;
   pageParams.value.pageSize = pageSize;
+  selectedParamIds.value = [];
   getCurrentProtocolParams();
 };
 
-const selectedParamIds = ref<Key[]>([]);
+const selectedParamIds = ref<number[]>([]);
 
 const handleParamSelectChange = (selectedRowKeys: Key[]) => {
-  selectedParamIds.value = selectedRowKeys;
+  selectedParamIds.value = selectedRowKeys as number[];
+};
+
+const deleteSelectedParams = () => {
+  Modal.confirm({
+    title: t('setupProtocol.confirmDeleteParams'),
+    async onOk() {
+      try {
+        await batchDeleleProtocolParam(selectedParamIds.value);
+        selectedParamIds.value = [];
+        message.success(t('setupProtocol.deleteParamsSuccessful'));
+
+        pageParams.value.pageIndex = 1;
+        getCurrentProtocolParams();
+      } catch (err) {
+        message.error((err as Error).message);
+        console.error(err);
+      }
+    },
+  });
 };
 
 const customParamsRef = useTemplateRef('customParams');
@@ -303,7 +326,9 @@ const customParamsRef = useTemplateRef('customParams');
         @change="handleParamNameOrCodeChange"
       />
       <div>
-        <AButton danger :disabled="selectedParamIds.length === 0">{{ $t('setupProtocol.deleteSelected') }}</AButton>
+        <AButton danger :disabled="selectedParamIds.length === 0" @click="deleteSelectedParams">
+          {{ $t('setupProtocol.deleteSelected') }}
+        </AButton>
         <AButton @click="customParamsRef?.showView">{{ $t('setupProtocol.addCustomParams') }}</AButton>
         <AButton type="primary">{{ $t('setupProtocol.addStandardParams') }}</AButton>
       </div>
@@ -377,9 +402,9 @@ const customParamsRef = useTemplateRef('customParams');
         :title="$t('setupProtocol.protocolParamFields.readCalculationFormula')"
         data-index="readCalcFormula"
       />
-      <ATableColumn :title="$t('setupProtocol.protocolParamFields.decimalPlaces')" data-index="decimalPlaces" />
+      <ATableColumn :title="$t('setupProtocol.protocolParamFields.decimalPlaces')" data-index="decimalPlace" />
     </ATable>
-    <CustomParams ref="customParams" />
+    <CustomParams ref="customParams" :protocol-id="info.id" />
   </div>
 </template>