fix: 添加算法弹出框时要重新请求可配置的算法列表

src/views/cameras/preview/components/AlgorithmsSetting/AddAlgoDialog.vue

@@ -2,16 +2,9 @@
   <!-- <ElButton type="primary" @click="showDialog" size="small" style="margin-top: 10px">
     + 添加算法</ElButton
   > -->
-  <AlgoAddBtn @click="showDialog"></AlgoAddBtn>
 
-  <ElDialog
-    v-model="visible"
-    title="添加算法"
-    @close="handleClose"
-    width="500px"
-    :close-on-click-modal="!algoListVisiable"
-  >
-    <div style="display: flex; justify-content: center; align-items: center">
+  <ElDialog title="添加算法" @close="handleClose" width="500px" :model-value="true">
+    <div style="display: flex; justify-content: center">
       <span>算法：</span>
       <ElSelect
         v-model="selectedIds"
@@ -44,25 +37,22 @@
   import { ElDialog, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus';
   import { ref, onMounted } from 'vue';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
-  import { storeToRefs } from 'pinia';
   import { createCameraAlgoApi } from '@/api/camera/camera-preview';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
-  import AlgoAddBtn from '../AlgoSwitchCard/AlgoAddBtn.vue';
   import { AlgoDetail, queryAlgoInfoAllByCameraId } from '@/api/algo/algo';
-
+  import { storeToRefs } from 'pinia';
   const selectedIds = ref<number[]>([]);
   const cameraAlgoStore = useCameraAlgoStore();
 
   const { isAlgoBind } = cameraAlgoStore;
-  // const { allAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
   const { getCameraAlgoList } = cameraAlgoStore;
   const cameraDetailStore = useCameraDetailStore();
   const { cameraId } = storeToRefs(cameraDetailStore);
 
-  const visible = ref(false);
+  const emits = defineEmits(['close']);
   const algoListVisiable = ref(false);
   const handleClose = () => {
-    visible.value = false;
+    emits('close');
   };
 
   const curOptionsByCode = ref<AlgoDetail[]>([]);
@@ -93,14 +83,9 @@
       // selectedAlgoId.value = selectedIds.value?.[0];
       getCameraAlgoList(cameraDetailStore.cameraId);
       ElMessage.success('添加成功，请完成算法参数配置后生效');
-      visible.value = false;
+      emits('close');
     });
   };
-
-  const showDialog = () => {
-    visible.value = true;
-    selectedIds.value = [];
-  };
 </script>
 <style scoped>
   :deep(.el-select .el-input__inner) {

src/views/cameras/preview/components/AlgorithmsSetting/AlgorithmsSetting.vue

@@ -3,7 +3,8 @@
     <div style="font-size: 14px; font-weight: bold">算法开关</div>
     <div>
       <div class="algoTagWrapper">
-        <AddAlgoDialog v-if="hasAddPermission()" />
+        <AlgoAddBtn @click="showDialog" v-if="hasAddPermission()" />
+        <AddAlgoDialog v-if="algoDialogVisible" @close="closeDialog" />
 
         <!-- <AlgoTag
           v-for="item in cameraAlgoList"
@@ -70,6 +71,7 @@
   import { ref, watchEffect } from 'vue';
   import { useUserStore } from '@/store/modules/user';
   import { PERM_ALGO } from '@/types/permission/constants';
+  import AlgoAddBtn from '../AlgoSwitchCard/AlgoAddBtn.vue';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
@@ -82,6 +84,7 @@
 
   const hasAddPermission = () => userStore.checkPermission(PERM_ALGO.CONFIG_ADD);
   const algoSettingIsOpen = ref(false);
+  const algoDialogVisible = ref(false);
 
   const handleToggleSetting = (algoId: number) => {
     // 如果是在当前选中的卡片上切换设置开关，那么反选即可
@@ -235,7 +238,7 @@
       .then(() => {
         ElMessage.success(fenceStatus ? '电子围栏已开启' : '电子围栏已关闭');
       })
-      .catch((err) => {
+      .catch(() => {
         detail.electronicFence = initialStatus;
       });
   };
@@ -322,6 +325,14 @@
     }
     selectedAlgoId.value = undefined;
   };
+
+  const showDialog = () => {
+    algoDialogVisible.value = true;
+  };
+
+  const closeDialog = () => {
+    algoDialogVisible.value = false;
+  };
 </script>
 <style scoped>
   .algoTagWrapper {