smartai2dian0/src/modules/knowledge/ModalSelectIcon.vue

<template>
  <a-modal
    v-model:visible="showModal"
    :align-center="false"
    top="15vh"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <template #title>{{ $t('management.change_icon_title') }}</template>
    <div class="section">
      <div class="labels">{{ $t('management.all_icon') }}</div>
      <div class="icons">
        <div
          class="icon-border"
          v-for="icon in icons"
          :key="icon.icon"
          :class="{ 'icon-border-active': icon.id === target_icon_id }"
          @click="changeItem(icon.id)"
        >
          <img class="icon" :src="getImageKnowLedge(icon.name)" alt="" />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { getImageKnowLedge } from '../common/icon-map.js';

const props = defineProps({
  show_select_icon: {
    type: Boolean,
    default: false
  },
  target_icon: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:show_model_item', 'sendIcon', 'clearTargetIcon']);
const icons = ref([
  {
    id: 1,
    name: 'knowledgeFrame1'
  },
  {
    id: 2,
    name: 'knowledgeFrame2'
  },
  {
    id: 3,
    name: 'knowledgeFrame3'
  },
  {
    id: 4,
    name: 'knowledgeFrame4'
  }
]);

const target_icon_id = ref(icons.value[0].id);
const showModal = computed(() => props.show_select_icon);

const changeItem = (id) => {
  target_icon_id.value = id;
};
const handleBeforeOk = (done) => {
  emit('sendIcon', icons.value.filter((icon) => icon.id === target_icon_id.value)[0].name);
  emit('update:show_select_icon', false);
  done();
};
const handleCancel = () => {
  emit('update:show_select_icon', false);
  emit('clearTargetIcon');
};
watch(
  () => props.target_icon,
  (new_value) => {
    if (new_value && new_value.length) {
      target_icon_id.value = icons.value.filter((icon) => icon.name === new_value)[0]?.id || icons.value[0].id;
    } else {
      target_icon_id.value = icons.value[0].id;
    }
  },
  {
    immediate: true
  }
);
</script>
<style scoped lang="css">
.section {
  height: 200px;
  padding: 0 20px;
}
.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.icon-border {
  border: 1px solid var(--color-border-1);

  border-radius: 5px;
  padding: 5px 8px 0px 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.icon-border:hover {
  border: 1px solid var(--color-border-3);
  border-radius: 5px;
  transform: scale(1.05);
}
.icon-border .icon {
  width: 44px;
  height: 44px;
}
.icon-border-active {
  border: 1px solid var(--color-border-3);
  transform: scale(1.1);
}
.arco-input-wrapper {
  height: 32px;
  background-color: var(--color-border-2);
}
</style>