smartai2dian0/src/modules/intelligent/LabelSelected.vue

<template>
  <div class="label-select">
    <a-input v-model="searchText" :placeholder="$t('management.search')" style="width: 100%" @input="handleSearch">
      <template #prefix>
        <icon-search />
      </template>
    </a-input>
    <a-checkbox-group v-model="checkedList" direction="vertical" @change="handleToAdd">
      <a-checkbox v-for="item in label_list" :key="item.labelId" :value="item.labelId">{{ item.labelName }}</a-checkbox>
    </a-checkbox-group>
    <div class="footer">
      <div class="label-manage" @click="toManageTags"><icon-tags /> 管理标签</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { funcDebounce } from '../../utils/utils';

const props = defineProps({
  labels: {
    type: Array,
    default: () => []
  },
  addedLabels: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['openManageTags', 'toSearchLabels', 'addLabelToTarget']);

const searchText = ref('');
const checkedList = ref([...props.addedLabels.map((item) => item.labelId)]);
const label_list = computed(() => props.labels);

const handleSearch = funcDebounce(() => {
  emit('toSearchLabels', searchText.value);
}, 300);
const toManageTags = () => {
  emit('openManageTags');
};
const handleToAdd = (checkedList) => {
  emit('addLabelToTarget', checkedList);
};
</script>
<style scoped lang="css">
.footer {
  display: flex;
  border-top: 1px solid var(--color-neutral-4);
}
.footer .label-manage {
  margin-top: 10px;
  cursor: pointer;
}
.arco-input-wrapper {
  background-color: var(--color-neutral-2);
}
</style>