Jelajahi Sumber

perf(views): 优化“协议结果”步骤的逻辑

1. 协议参数表格添加 loading
2. 同时请求所需字典数据
wangcong 3 bulan lalu
induk
melakukan
2df9b9f33c
1 mengubah file dengan 24 tambahan dan 22 penghapusan
  1. 24 22
      src/views/setup-protocol/ProtocolContent.vue

+ 24 - 22
src/views/setup-protocol/ProtocolContent.vue

@@ -23,7 +23,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const { handleRequest } = useRequest();
 const { dictData: protocolTypes, getDictData: getProtocolTypes } = useDictData(DictCode.AllProtocolType);
 const { dictData: baudRateList, getDictData: getBaudRateList } = useDictData(DictCode.BaudRate);
 const { dictData: readContinuousAddr, getDictData: getReadContinuousAddr } = useDictData(DictCode.ReadContinuousAddr);
@@ -140,14 +139,12 @@ const validateProtocolInfo = async () => {
 };
 
 onMounted(() => {
-  handleRequest(async () => {
-    await getProtocolTypes();
-    await getBaudRateList();
-    await getReadContinuousAddr();
-    await getByteOrderList();
-    await getAddrOrderList();
-    await getCurrentProtocolParams();
-  });
+  getProtocolTypes();
+  getBaudRateList();
+  getReadContinuousAddr();
+  getByteOrderList();
+  getAddrOrderList();
+  getCurrentProtocolParams();
 });
 
 const handleReadContinuousAddrChange = (checked: CheckedType) => {
@@ -182,22 +179,26 @@ const pageParams = ref<PageParams>({
   ],
 });
 
-const getCurrentProtocolParams = async () => {
-  const { id } = props.info;
+const { isLoading, handleRequest } = useRequest();
 
-  if (!id) {
-    return;
-  }
+const getCurrentProtocolParams = () => {
+  handleRequest(async () => {
+    const { id } = props.info;
 
-  const { records, total } = await getProtocolParamList({
-    ...pageParams.value,
-    baseInfoId: id,
-    paramName: paramNameOrCode.value,
-    paramCode: paramNameOrCode.value,
-  });
+    if (!id) {
+      return;
+    }
 
-  paramList.value = records;
-  paramTotal.value = total;
+    const { records, total } = await getProtocolParamList({
+      ...pageParams.value,
+      baseInfoId: id,
+      paramName: paramNameOrCode.value,
+      paramCode: paramNameOrCode.value,
+    });
+
+    paramList.value = records;
+    paramTotal.value = total;
+  });
 };
 
 const handleParamNameOrCodeChange = debounce(() => {
@@ -462,6 +463,7 @@ defineExpose({
       row-key="id"
       :row-selection="{ selectedRowKeys: selectedParamIds, onChange: handleParamSelectChange }"
       :scroll="{ x: 2800 }"
+      :loading="isLoading"
       :pagination="{
         current: pageParams.pageIndex,
         pageSize: pageParams.pageSize,