smartai2dian0/src/modules/intelligent/ModalSelectIcon.vue

<template>
  <a-modal
    v-model:visible="showModal"
    :align-center="false"
    top="15vh"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <template #title>替换图标</template>
    <div class="section">
      <div class="labels">全部图标</div>
      <div class="icons">
        <div
          class="icon-border"
          v-for="icon in icons"
          :key="icon.icon"
          :class="{ 'icon-border-active': icon.id === target_icon }"
          @click="changeItem(icon.id)"
        >
          <img class="icon" :src="getIconIntelligent(icon.name)" alt="" />
        </div>
      </div>
    </div>
  </a-modal>
</template>

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

const props = defineProps({
  show_select_icon: {
    type: Boolean,
    default: false
  }
});
const icons = ref([
  {
    id: 1,
    name: 'intellFrame1'
  },
  {
    id: 2,
    name: 'intellFrame2'
  },
  {
    id: 3,
    name: 'intellFrame3'
  },
  {
    id: 4,
    name: 'intellFrame4'
  },
  {
    id: 5,
    name: 'intellFrame5'
  },
  {
    id: 6,
    name: 'intellFrame6'
  }
]);

const target_icon = ref(icons.value[0].id);
const emit = defineEmits(['update:show_model_item', 'sendIcon']);

const showModal = computed(() => props.show_select_icon);

const changeItem = (id) => {
  target_icon.value = id;
};
const handleBeforeOk = (done) => {
  emit('sendIcon', icons.value.filter((icon) => icon.id === target_icon.value)[0].name);
  emit('update:show_select_icon', false);
  done();
};
const handleCancel = () => {
  emit('update:show_select_icon', false);
};
</script>
<style scoped lang="css">
.section {
  height: 200px;
  padding: 0 20px;
}
.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.icons .icon-border {
  /* width: 50px;
  height: 50px; */
  padding: 5px 10px;
  cursor: pointer;
}
.icon-border:hover {
  border: 1px solid var(--color-neutral-4);
  border-radius: 5px;
}
.icon-border .icon {
  width: 44px;
  height: 44px;
}
.icon-border-active {
  border: 1px solid var(--color-neutral-4);
  border-radius: 5px;
}
.arco-input-wrapper {
  height: 32px;
  background-color: var(--color-neutral-3);
}
</style>