feat(components): 添加“选择标准参数“组件

src/api/index.ts

@@ -29,6 +29,8 @@ import type {
   ProtocolParamInfo,
   ProtocolParamSearchParams,
   ProtocolReset,
+  ProtocolStandardParamData,
+  ProtocolStandardParamSearchParams,
   SerialNumberItemData,
   VerificationAgreement,
   VerificationEquipment,
@@ -241,6 +243,17 @@ export const orgGatewaySerialNumber = async (protocolList: ProtocolList) => {
   return data;
 };
 
+// 协议标准参数
+
+export const getProtocolStandardParamList = async (params: ProtocolStandardParamSearchParams) => {
+  const data = await request<ProtocolStandardParamData>(apiBiz('/protocolStandardParam/getPageList'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+
+  return data;
+};
+
 // 协议参数
 
 export const addProtocolParam = async (params: Partial<ProtocolParamInfo>) => {

src/i18n/locales/zh.json

@@ -89,6 +89,7 @@
     "manuallyCreate": "手动创建",
     "nextDataReadDelay": "下条数据读取延时",
     "nextRoundDataReadDelay": "下轮数据读取延时",
+    "paramList": "参数列表",
     "parityBit": "校验位",
     "plzEnterParamOrCode": "请输入参数名称或编码",
     "plzSelectProtocolFile": "请选择协议文件",
@@ -106,6 +107,8 @@
       "gatewayParamName": "网关参数名称",
       "isHighFrequencyParameter": "是否高频参数",
       "module": "模块",
+      "paramCode": "参数编码",
+      "paramName": "参数名称",
       "parsingType": "解析类型",
       "platformParamCode": "平台参数编码",
       "platformParamName": "平台参数名称",
@@ -135,6 +138,8 @@
     "selectDeviceTypeTip": "推荐使用模板导入，支持语义识别、自动填充序号、自动填充非必填项；参数较少的协议可选择手动创建",
     "selectProtocolType": "选择协议类型",
     "selectProtocolTypeTip": "目前仅支持 modbusRTU 和 S7 协议，协议类型在完成配置后无法修改，请谨慎选择",
+    "selectStandardParams": "选择标准参数",
+    "selectedParams": "已选参数",
     "setupProtocol": "配置协议",
     "stopBit": "停止位",
     "uploadFile": "上传文件",

src/types/index.ts

@@ -184,6 +184,29 @@ export interface ProtocolParamSearchParams extends PageParams {
   paramCode?: string;
   paramName?: string;
 }
+
+export type ProtocolStandardParamData = PageData<ProtocolStandardParam>;
+
+export interface ProtocolStandardParam {
+  id: number;
+  createTime: string;
+  updateTime: string;
+  createUserId: number;
+  updateUserId: number;
+  paramCode: string;
+  paramName: string;
+  unit: string;
+  module: string;
+  deviceTypeId: number;
+  deviceType: string;
+  enabled: string;
+}
+
+export interface ProtocolStandardParamSearchParams extends PageParams {
+  paramCode?: string;
+  paramName?: string;
+}
+
 export interface RegisterGatewayForm {
   snCode: string;
   password: string;

src/views/setup-protocol/ProtocolContent.vue

@@ -10,6 +10,7 @@ import { batchDeleleProtocolParam, getProtocolParamList } from '@/api';
 import { DictCode } from '@/constants';
 
 import CustomParams from './CustomParams.vue';
+import SelectStandardParams from './SelectStandardParams.vue';
 
 import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
 import type { Key } from 'ant-design-vue/es/table/interface';
@@ -128,6 +129,7 @@ const deleteSelectedParams = () => {
 };
 
 const customParamsRef = useTemplateRef('customParams');
+const selectStandardParamsRef = useTemplateRef('selectStandardParams');
 </script>
 
 <template>
@@ -330,7 +332,9 @@ const customParamsRef = useTemplateRef('customParams');
           {{ $t('setupProtocol.deleteSelected') }}
         </AButton>
         <AButton @click="customParamsRef?.showView">{{ $t('setupProtocol.addCustomParams') }}</AButton>
-        <AButton type="primary">{{ $t('setupProtocol.addStandardParams') }}</AButton>
+        <AButton @click="selectStandardParamsRef?.showView" type="primary">
+          {{ $t('setupProtocol.addStandardParams') }}
+        </AButton>
       </div>
     </div>
     <ATable
@@ -405,6 +409,7 @@ const customParamsRef = useTemplateRef('customParams');
       <ATableColumn :title="$t('setupProtocol.protocolParamFields.decimalPlaces')" data-index="decimalPlace" />
     </ATable>
     <CustomParams ref="customParams" :protocol-id="info.id" />
+    <SelectStandardParams ref="selectStandardParams" :protocol-id="info.id" />
   </div>
 </template>
 

src/views/setup-protocol/SelectStandardParams.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { debounce } from 'lodash-es';
+
+import { useRequest } from '@/hooks/request';
+import { useViewVisible } from '@/hooks/view-visible';
+import { getProtocolStandardParamList } from '@/api';
+
+import type { Key } from 'ant-design-vue/es/table/interface';
+import type { PageParams, ProtocolStandardParam } from '@/types';
+
+interface Props {
+  protocolId?: number;
+}
+
+defineProps<Props>();
+
+const { visible, showView, hideView } = useViewVisible();
+const { handleRequest } = useRequest();
+const paramList = ref<ProtocolStandardParam[]>([]);
+const paramTotal = ref(0);
+const paramNameOrCode = ref('');
+const pageParams = ref<PageParams>({
+  pageIndex: 1,
+  pageSize: 10,
+  pageSorts: [
+    {
+      column: 'id',
+      asc: true,
+    },
+  ],
+});
+
+onMounted(() => {
+  getStandardParams();
+});
+
+const getStandardParams = () => {
+  handleRequest(async () => {
+    const { records, total } = await getProtocolStandardParamList({
+      ...pageParams.value,
+      paramName: paramNameOrCode.value,
+      paramCode: paramNameOrCode.value,
+    });
+
+    paramList.value = records;
+    paramTotal.value = total;
+  });
+};
+
+const handleParamNameOrCodeChange = debounce(() => {
+  pageParams.value.pageIndex = 1;
+  selectedParamIds.value = [];
+  getStandardParams();
+}, 300);
+
+const handlePageChange = (page: number, pageSize: number) => {
+  pageParams.value.pageIndex = page;
+  pageParams.value.pageSize = pageSize;
+  selectedParamIds.value = [];
+  getStandardParams();
+};
+
+const selectedParamIds = ref<number[]>([]);
+
+const handleParamSelectChange = (selectedRowKeys: Key[]) => {
+  selectedParamIds.value = selectedRowKeys as number[];
+};
+
+const handleOk = () => {};
+
+const handleClose = () => {
+  paramList.value = [];
+  paramTotal.value = 0;
+  paramNameOrCode.value = '';
+  pageParams.value.pageIndex = 1;
+  pageParams.value.pageSize = 10;
+  selectedParamIds.value = [];
+};
+
+defineExpose({
+  showView,
+  hideView,
+});
+</script>
+
+<template>
+  <AModal
+    v-model:open="visible"
+    :title="$t('setupProtocol.selectStandardParams')"
+    :width="1092"
+    centered
+    :after-close="handleClose"
+    @ok="handleOk"
+  >
+    <div class="params-container">
+      <div class="params-list">
+        <div class="params-list-header">
+          <span class="params-label">{{ $t('setupProtocol.paramList') }}</span>
+          <AInput
+            v-model:value="paramNameOrCode"
+            class="params-list-input"
+            :placeholder="$t('setupProtocol.plzEnterParamOrCode')"
+            allow-clear
+            @change="handleParamNameOrCodeChange"
+          />
+        </div>
+        <ATable
+          :data-source="paramList"
+          row-key="id"
+          :row-selection="{ selectedRowKeys: selectedParamIds, onChange: handleParamSelectChange }"
+          :pagination="{
+            current: pageParams.pageIndex,
+            pageSize: pageParams.pageSize,
+            total: paramTotal,
+            showSizeChanger: true,
+            hideOnSinglePage: false,
+            showTotal: (total) => $t('common.pageTotal', { total }),
+            onChange: handlePageChange,
+          }"
+        >
+          <ATableColumn :title="$t('setupProtocol.protocolParamFields.paramCode')" data-index="paramCode" />
+          <ATableColumn :title="$t('setupProtocol.protocolParamFields.paramName')" data-index="paramName" />
+          <ATableColumn :title="$t('setupProtocol.protocolParamFields.unit')" data-index="unit" />
+          <ATableColumn :title="$t('setupProtocol.protocolParamFields.module')" data-index="module" />
+        </ATable>
+      </div>
+      <div class="params-selected">
+        <div>
+          <span class="params-label">{{ $t('setupProtocol.selectedParams') }} ({{ selectedParamIds.length }})</span>
+        </div>
+      </div>
+    </div>
+  </AModal>
+</template>
+
+<style lang="scss" scoped>
+.params-container {
+  display: flex;
+  height: 470px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.params-label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  color: #333;
+}
+
+.params-list {
+  flex: 1;
+  padding: 16px 24px;
+}
+
+.params-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.params-list-input {
+  width: 272px;
+}
+
+.params-selected {
+  width: 299px;
+  padding: 16px 24px;
+  border-left: 1px solid #e4e7ed;
+}
+</style>