银川 1.联调产品维护页面 2.添加IM即时通讯模块

gaoluyang

2026-06-29 27cd042df9aca0383a49f3514bc21958dd890912

 src/views/im/manager/channel/material/components/select.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,71 @@
<script lang="ts" setup>
import type { ImManagerChannelMaterialApi } from '#/api/im/manager/channel/material';

import { computed, ref, watch } from 'vue';

import { Select } from 'ant-design-vue';

import { getSimpleManagerChannelMaterialList } from '#/api/im/manager/channel/material';

defineOptions({ name: 'ImManagerMaterialSelect' });

const props = withDefaults(
  defineProps<{
    allowClear?: boolean
    channelId?: number
    modelValue?: number
    placeholder?: string
  }>(),
  {
    allowClear: true,
    channelId: undefined,
    modelValue: undefined,
    placeholder: '请选择素材',
  },
);

const emit = defineEmits<{
  'update:modelValue': [value: number | undefined];
}>();

const loading = ref(false);
const materialList = ref<ImManagerChannelMaterialApi.Material[]>([]);

const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});

const options = computed(() =>
  materialList.value.map((item) => ({ label: item.title, value: item.id })),
);

/** æŒ‰é¢‘道加载素材 */
async function loadMaterialList(channelId?: number) {
  emit('update:modelValue', undefined);
  materialList.value = [];
  if (!channelId) {
    return;
  }
  loading.value = true;
  try {
    materialList.value = await getSimpleManagerChannelMaterialList(channelId);
  } finally {
    loading.value = false;
  }
}

watch(() => props.channelId, loadMaterialList, { immediate: true });
</script>

<template>
  <Select
    v-model:value="value"
    :allow-clear="allowClear"
    :disabled="!channelId"
    :loading="loading"
    :options="options"
    :placeholder="placeholder"
    class="w-full"
  />
</template>