feat(components): 支持添加标准参数到当前协议

src/i18n/locales/zh.json

@@ -155,6 +155,7 @@
     "addCustomParams": "新增自定义参数",
     "addCustomParamsSuccessful": "新增自定义参数成功",
     "addStandardParams": "新增标准参数",
+    "addStandardParamsSuccessful": "新增标准参数成功",
     "addrOrder": "地址顺序",
     "baudRate": "波特率",
     "byteOrder": "字节顺序",
@@ -183,6 +184,7 @@
     "paramList": "参数列表",
     "parityBit": "校验位",
     "plzEnterParamOrCode": "请输入参数名称或编码",
+    "plzSelectAtLeastOneParam": "请至少选择一个参数",
     "plzSelectProtocolFile": "请选择协议文件",
     "plzSelectProtocolType": "请选择协议类型",
     "protocolConfigCompleted": "已完成协议配置",
@@ -230,7 +232,7 @@
     "selectProtocolType": "选择协议类型",
     "selectProtocolTypeTip": "目前仅支持 modbusRTU 和 S7 协议，协议类型在完成配置后无法修改，请谨慎选择",
     "selectStandardParams": "选择标准参数",
-    "selectedParams": "已选参数",
+    "selectedParams": "已选",
     "setupProtocol": "配置协议",
     "stopBit": "停止位",
     "uploadFile": "上传文件",

src/views/setup-protocol/SelectStandardParams.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref, watch } from 'vue';
+import { message } from 'ant-design-vue';
 import { debounce } from 'lodash-es';
 
 import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
-import { getProtocolStandardParamList } from '@/api';
+import { t } from '@/i18n';
+import { addProtocolParam, getProtocolStandardParamList } from '@/api';
 
 import type { Key } from 'ant-design-vue/es/table/interface';
 import type { PageParams, ProtocolStandardParam } from '@/types';
@@ -13,10 +15,8 @@ interface Props {
   protocolId?: number;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
-const { visible, showView, hideView } = useViewVisible();
-const { handleRequest } = useRequest();
 const paramList = ref<ProtocolStandardParam[]>([]);
 const paramTotal = ref(0);
 const paramNameOrCode = ref('');
@@ -31,9 +31,7 @@ const pageParams = ref<PageParams>({
   ],
 });
 
-onMounted(() => {
-  getStandardParams();
-});
+const { isLoading, handleRequest } = useRequest();
 
 const getStandardParams = () => {
   handleRequest(async () => {
@@ -48,26 +46,66 @@ const getStandardParams = () => {
   });
 };
 
+const { visible, showView, hideView } = useViewVisible();
+
+watch(visible, () => {
+  if (visible.value) {
+    getStandardParams();
+  }
+});
+
 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 selectedParams = ref<ProtocolStandardParam[]>([]);
 
-const handleParamSelectChange = (selectedRowKeys: Key[]) => {
+const handleParamSelectChange = (selectedRowKeys: Key[], selectedRows: ProtocolStandardParam[]) => {
   selectedParamIds.value = selectedRowKeys as number[];
+  selectedParams.value = selectedRows;
 };
 
-const handleOk = () => {};
+const removeSelectedParam = ({ id }: ProtocolStandardParam) => {
+  selectedParamIds.value = selectedParamIds.value.filter((item) => item !== id);
+  selectedParams.value = selectedParams.value.filter((item) => item.id !== id);
+};
+
+const clearSelectedParams = () => {
+  selectedParamIds.value = [];
+  selectedParams.value = [];
+};
+
+const { isLoading: isConfirmLoading, handleRequest: handleAddParamRequest } = useRequest();
+
+const handleOk = () => {
+  if (!selectedParams.value.length) {
+    message.error(t('setupProtocol.plzSelectAtLeastOneParam'));
+    return;
+  }
+
+  handleAddParamRequest(async () => {
+    for (const item of selectedParams.value) {
+      await addProtocolParam({
+        baseInfoId: props.protocolId,
+        paramCode: item.paramCode,
+        paramName: item.paramName,
+        unit: item.unit,
+        module: item.module,
+      });
+    }
+
+    message.success(t('setupProtocol.addStandardParamsSuccessful'));
+    hideView();
+  });
+};
 
 const handleClose = () => {
   paramList.value = [];
@@ -75,7 +113,7 @@ const handleClose = () => {
   paramNameOrCode.value = '';
   pageParams.value.pageIndex = 1;
   pageParams.value.pageSize = 10;
-  selectedParamIds.value = [];
+  clearSelectedParams();
 };
 
 defineExpose({
@@ -88,9 +126,10 @@ defineExpose({
   <AModal
     v-model:open="visible"
     :title="$t('setupProtocol.selectStandardParams')"
-    :width="1092"
+    :width="920"
     centered
     :after-close="handleClose"
+    :confirm-loading="isConfirmLoading"
     @ok="handleOk"
   >
     <div class="params-container">
@@ -108,26 +147,47 @@ defineExpose({
         <ATable
           :data-source="paramList"
           row-key="id"
-          :row-selection="{ selectedRowKeys: selectedParamIds, onChange: handleParamSelectChange }"
+          :row-selection="{
+            selectedRowKeys: selectedParamIds,
+            preserveSelectedRowKeys: true,
+            onChange: handleParamSelectChange,
+          }"
+          :scroll="{ y: 285 }"
+          :loading="isLoading"
           :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.paramCode')"
+            data-index="paramCode"
+            :width="150"
+          />
+          <ATableColumn
+            :title="$t('setupProtocol.protocolParamFields.paramName')"
+            data-index="paramName"
+            :width="150"
+          />
           <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>
+        <div class="params-selected-header">
           <span class="params-label">{{ $t('setupProtocol.selectedParams') }} ({{ selectedParamIds.length }})</span>
+          <div @click="clearSelectedParams">clear</div>
+        </div>
+        <div class="params-selected-list">
+          <div class="params-selected-item" v-for="item in selectedParams" :key="item.id">
+            <div class="ellipsis-text params-selected-item-label" :title="item.paramName">
+              {{ item.paramName }}
+            </div>
+            <div class="params-selected-item-delete" @click="removeSelectedParam(item)">x</div>
+          </div>
         </div>
       </div>
     </div>
@@ -138,6 +198,7 @@ defineExpose({
 .params-container {
   display: flex;
   height: 470px;
+  margin: 24px 0;
   border: 1px solid #e4e7ed;
   border-radius: 8px;
 }
@@ -162,12 +223,53 @@ defineExpose({
 }
 
 .params-list-input {
-  width: 272px;
+  width: 256px;
 }
 
 .params-selected {
+  display: flex;
+  flex-direction: column;
   width: 299px;
-  padding: 16px 24px;
+  padding: 16px 0;
   border-left: 1px solid #e4e7ed;
 }
+
+.params-selected-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  margin-bottom: 24px;
+}
+
+.params-selected-list {
+  flex: 1;
+  padding: 0 24px;
+  overflow-y: auto;
+}
+
+.params-selected-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--antd-color-bg-text-hover);
+  }
+}
+
+.params-selected-item-label {
+  flex: 1;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #666;
+  text-align: left;
+}
+
+.params-selected-item-delete {
+  width: 16px;
+  height: 16px;
+}
 </style>