Răsfoiți Sursa

perf(components): 优化“协议内容”组件协议参数,添加查询和重置

wangcong 1 lună în urmă
părinte
comite
6ac9500cfb
1 a modificat fișierele cu 30 adăugiri și 14 ștergeri
  1. 30 14
      src/views/setup-protocol/ProtocolContent.vue

+ 30 - 14
src/views/setup-protocol/ProtocolContent.vue

@@ -255,16 +255,23 @@ const getCurrentProtocolParams = () => {
 };
 
 const handleParamNameOrCodeChange = debounce(() => {
+  filteredParamNameOrCode.value = paramNameOrCode.value;
   pageParams.value.pageIndex = 1;
   selectedParamIds.value = [];
   getCurrentProtocolParams();
-}, 300);
+}, 100);
+
+const handleParamReset = () => {
+  paramNameOrCode.value = '';
+  handleParamNameOrCodeChange();
+};
 
 const handleParamTableChange: TableProps['onChange'] = (pagination, filters, sorter) => {
   recognizeResult = (filters.recognizeResult as string[] | null) || [];
   pageParams.value.pageIndex = pagination.current || 1;
   pageParams.value.pageSize = pagination.pageSize || 10;
   pageParams.value.pageSorts = getTablePageSorts(sorter);
+  filteredParamNameOrCode.value = paramNameOrCode.value;
   selectedParamIds.value = [];
   getCurrentProtocolParams();
 };
@@ -372,9 +379,10 @@ const changeToStandardParams = (params: ProtocolParamInfo) => {
 };
 
 const localParamList = ref<ProtocolParamInfo[]>([]);
+const filteredParamNameOrCode = ref('');
 
 const filteredLocalParams = computed(() => {
-  const paramInput = paramNameOrCode.value.toLowerCase();
+  const paramInput = filteredParamNameOrCode.value.toLowerCase();
 
   return localParamList.value.filter((item) => {
     return (
@@ -638,17 +646,20 @@ defineExpose({
       </span>
     </div>
     <div class="protocol-params-query">
-      <AInput
-        v-model:value="paramNameOrCode"
-        class="protocol-params-input"
-        :placeholder="$t('setupProtocol.plzEnterParamOrCode')"
-        allow-clear
-        @change="handleParamNameOrCodeChange"
-      >
-        <template #prefix>
-          <SvgIcon name="search-o" :size="12" color="#B2B2B2" />
-        </template>
-      </AInput>
+      <div>
+        <AInput
+          v-model:value="paramNameOrCode"
+          class="protocol-params-input"
+          :placeholder="$t('setupProtocol.plzEnterParamOrCode')"
+          allow-clear
+        >
+          <template #prefix>
+            <SvgIcon name="search-o" :size="12" color="#B2B2B2" />
+          </template>
+        </AInput>
+        <AButton type="primary" @click="handleParamNameOrCodeChange">{{ $t('common.query') }}</AButton>
+        <AButton @click="handleParamReset">{{ $t('common.reset') }}</AButton>
+      </div>
       <div>
         <AButton danger :disabled="selectedParamIds.length === 0" @click="deleteSelectedParams">
           {{ $t('setupProtocol.deleteSelected') }}
@@ -955,6 +966,7 @@ defineExpose({
 
 .protocol-params-input {
   width: 256px;
+  margin-right: 40px;
 }
 
 .protocol-params-tip {
@@ -977,7 +989,11 @@ defineExpose({
   justify-content: space-between;
   margin-bottom: 16px;
 
-  button + button {
+  > div:first-child button + button {
+    margin-left: 12px;
+  }
+
+  > div:last-child button + button {
     margin-left: 16px;
   }
 }