46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { DefaultOptionType } from "ant-design-vue/es/select";
|
|
import { RuleExpression, useField } from "vee-validate";
|
|
import { cs } from "@client/storyFormSchema";
|
|
import { IBand } from "@models/band";
|
|
|
|
const bandlist = inject<IBand[]>("bandlist");
|
|
const fname = inject<string>("curName");
|
|
const { updateBands, sb } = inject<any>("selectedBands");
|
|
|
|
const bl = ref(bandlist || []);
|
|
const options: DefaultOptionType[] = bl.value
|
|
.filter((a) => a.name != "")
|
|
.map((a) => ({
|
|
value: a._id,
|
|
label: a.name,
|
|
disabled: a.locked || false,
|
|
}));
|
|
let bandField = useField(fname + "bands", cs.fields.bands as unknown as MaybeRef<RuleExpression<number[]>>);
|
|
const { value, errorMessage, name, setValue } = bandField;
|
|
// setValue(sb)
|
|
</script>
|
|
|
|
<template>
|
|
<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage as any" label="Bands">
|
|
<a-select
|
|
:allow-clear="true"
|
|
mode="multiple"
|
|
option-filter-prop="label"
|
|
@change="
|
|
(val) => {
|
|
// log.debug(val);
|
|
updateBands(val);
|
|
setValue(val as number[]);
|
|
}
|
|
"
|
|
v-model:value="value"
|
|
:options="options"
|
|
>
|
|
<template #removeIcon>
|
|
<i class="far fa-circle-x" />
|
|
</template>
|
|
</a-select>
|
|
</a-form-item>
|
|
</template>
|