50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { McuSrc } from '~/models/mcu-src';
|
|
import type { McuOrderItem } from '~/models/mcu-order-item';
|
|
|
|
const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
|
|
defineProps<{
|
|
dataSource: McuSrc[]
|
|
// data: number[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
pick: [item: McuSrc]
|
|
}>()
|
|
|
|
function pick(item: McuSrc) {
|
|
emit('pick', item)
|
|
// if (data.value.some(e => e.mcuSrc_id === item.id)) {
|
|
// const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
|
|
// data.value.splice(pos, 1)
|
|
// } else {
|
|
// data.value.push({
|
|
// id: 0,
|
|
// mcuOrder_id: 0,
|
|
// mcuSrc_id: item.id,
|
|
// createdAt: "",
|
|
// updatedAt: "",
|
|
// })
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-5">
|
|
<div class="font-semibold mb-1.5">
|
|
Daftar Item
|
|
</div>
|
|
<div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
|
|
<div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
|
|
<Button
|
|
:variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
|
|
type="button"
|
|
@click="pick(item)"
|
|
>
|
|
{{ item.name }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|