多维表格

73 lines
1.9 KiB

<script setup lang="ts">
import { onMounted, useVModel, watch } from '#imports'
interface Props {
modelValue: Record<string, any>[]
availableChannelList: Record<string, any>[]
placeholder: string
}
const { availableChannelList, placeholder, ...rest } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const vModel = useVModel(rest, 'modelValue', emit)
// idx of selected channels
const localChannelValues = $ref<number[]>([])
// availableChannelList with idx enriched
let availableChannelWithIdxList = $ref<Record<string, any>[]>()
watch(
() => localChannelValues,
(v) => {
const res = []
for (const channelIdx of v) {
const target = availableChannelWithIdxList.find((availableChannel) => availableChannel.idx === channelIdx)
if (target) {
// push without target.idx
res.push({ webhook_url: target.webhook_url, channel: target.channel })
}
}
vModel.value = res
},
)
onMounted(() => {
if (availableChannelList.length) {
// enrich idx
let idx = 0
availableChannelWithIdxList = availableChannelList.map((channel) => ({
...channel,
idx: idx++,
}))
// build localChannelValues from modelValue
for (const channel of rest.modelValue || []) {
const target = availableChannelWithIdxList.find(
(availableChannelWithIdx) =>
availableChannelWithIdx.webhook_url === channel.webhook_url && availableChannelWithIdx.channel === channel.channel,
)
if (target) {
localChannelValues.push(target.idx)
}
}
}
})
</script>
<template>
<a-select
v-model:value="localChannelValues"
mode="multiple"
:placeholder="placeholder"
max-tag-count="responsive"
dropdown-class-name="nc-dropdown-webhook-channel"
>
<a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">
{{ channel.channel }}
</a-select-option>
</a-select>
</template>