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

<template>
  <!-- 模板部分保持不变 -->
  <div class="algo-select-container">
    <el-card>
      <template #header> <div class="card-title">选择相机关联的算法</div> </template>
      <div class="algo-list">
        <div
          v-for="(item, index) in props.algoList"
          :key="index"
          class="algo-item"
          :class="{ active: selectedIds.includes(item.id), disabled: !hasAddPermission }"
          @click="handleAlgoSelect(item)"
        >
          <span class="algo-name">{{ item.name }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/store/modules/user';
  import { PERM_ALGO } from '@/types/permission/constants';
  import { ElCard } from 'element-plus';
  import { computed, defineEmits } from 'vue';
  const emit = defineEmits<{
    (e: 'select', data: number): void;
  }>();
  interface AlgoItemLabel {
    name: string;
    id: number;
  }

  const props = defineProps<{ algoList: AlgoItemLabel[]; selectedIds: number[] }>();

  const userStore = useUserStore();

  // 处理方法
  const handleAlgoSelect = (item: AlgoItemLabel) => {
    if (!hasAddPermission.value) return;
    const hasId = props.selectedIds.includes(item.id);
    if (!hasId) {
      emit('select', item.id);
    }
  };

  const hasAddPermission = computed(() => userStore.checkPermission(PERM_ALGO.CONFIG_ADD));
</script>

<style lang="less" scoped>
  /* 样式保持不变 */
  .algo-select-container {
    margin-left: 10px;
    width: 250px;
    .algo-list {
      // display: flex;
      // flex-wrap: wrap;
      // gap: 12px;
      max-height: 442px;
      overflow-y: auto;
    }

    .algo-item {
      padding: 4px 16px;
      // border: 1px solid #d9d9d9;
      margin: 10px 0;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        border-color: #1890ff;
        color: #1890ff;
      }

      &.active {
        background: #1890ff;
        color: #fff;
        border-color: #1890ff;
        cursor: not-allowed;
      }
      &.disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
    }
  }
  .card-title {
    font-weight: bold;
  }
</style>