sl-sfy-safety/src/modules/algo-params-setting-base/components/PresetSelect/PresetSelect.vue

<template>
  <div class="presetSetting">
    <div style="margin-right: 10px">预置位 </div>
    <div>
      <ElSelect
        class="pre-select"
        :model-value="currentPresetToken"
        size="small"
        filterable
        @update:model-value="handleChangeValue"
        :loading="loading"
        :disabled="Boolean(!cameraDetailStore.detail?.isPtz)"
        placeholder="请选择预置位"
      >
        <ElOption v-for="item in presetOptions" :key="item.token" :label="item.name" :value="item.token">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
            <!-- 点击删除的时候，阻止选中菜单 -->
            <el-icon @click.stop="handleDeletePreset(item.token)">
              <CircleCloseFilled />
            </el-icon>
          </span>
        </ElOption>
      </ElSelect>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ElSelect, ElOption, ElMessage, ElMessageBox, ElLoading } from 'element-plus';
  import { CircleCloseFilled } from '@element-plus/icons-vue';
  import usePresetListStore from '../../store/usePresetListStore';
  import { storeToRefs } from 'pinia';
  import { deletePresetApi, goToPresetApi } from '@/api/camera/camera-preview';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import useFenceStore from '../../store/useFenceStore';
  import useCameraAlgoStore from '../../store/useCameraAlgoStore';

  const presetListStore = usePresetListStore();
  const cameraAlgoStore = useCameraAlgoStore();

  const cameraDetailStore = useCameraDetailStore();

  const { data: presetOptions, currentPresetToken, loading } = storeToRefs(presetListStore);

  const fenceStore = useFenceStore();

  const handleDeletePreset = (token: string) => {
    ElMessageBox({
      message: '该预置位可能存在关联的电子围栏。删除该预置位将会删除对应的电子围栏信息，请确认是否删除',
      title: '删除确认',
      showCancelButton: true,
      confirmButtonText: '确认删除',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          deletePresetApi({ presetToken: token, cameraId: cameraDetailStore.cameraId })
            .then((res) => {
              ElMessage.success('删除成功！');
              presetListStore.getPresetList(cameraDetailStore.cameraId);
              currentPresetToken.value = presetOptions.value?.[0].token || '';
              done();
            })
            .finally(() => {
              instance.confirmButtonLoading = true;
            });
        } else {
          done();
        }
      },
    });
  };

  const handleChangeValue = (val) => {
    currentPresetToken.value = val;
    goToPresetApi({ presetToken: val, cameraId: cameraDetailStore.cameraId });
    fenceStore.getFence({
      presetToken: val,
      algoId: cameraAlgoStore.selectedAlgoId!,
      cameraId: cameraDetailStore.cameraId,
    });
  };
</script>
<style scoped>
  .presetSetting {
    display: flex;
    align-items: center;
    height: 34px;
  }

  .pre-select {
    width: 145px;
  }

  .circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
  }

  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-color-primary);
    stroke-linecap: round;
  }
</style>