smartai_desk_pc/src/modules/report-template/source-model/DataSource.vue

<template>
  <div class="data-source">
    <div class="title">
      <span>数据源</span>
      <icon-right />
    </div>
    <div class="select">
      <a-select v-model="target_source" @change="handleChange" :style="{ width: '100%' }" placeholder="请选择数据源">
        <a-option v-for="item in source_data_options" :key="item.value" :value="item.value">{{ item.label }}</a-option>
      </a-select>
    </div>
  </div>
</template>

<script setup >
import { ref, computed, watch, onMounted } from 'vue';

const props = defineProps({
  target_source_id: String,
  data_source_list: Array
});

const emit = defineEmits(['change-source']);

const source_data_options = computed(() => {
  return (props.data_source_list || []).map((item) => ({
    value: item.id,
    label: item.metric_name
  }));
});
const target_source = ref(props.target_source_id || '');

const handleChange = (value) => {
  target_source.value = value;
  emit('change-source', value);
};

watch(
  () => props.target_source_id,
  (newVal, oldVal) => {
    console.log(newVal, 9999);
    handleChange(newVal);
  },
  {
    immediate: true
  }
);
// 当数据源列表变化时，默认选择第一个
// watch(
//   () => props.data_source_list,
//   (newOptions) => {
//     console.log(props.data_source_list[0]?.id, 888888888888888);
//     if (props.data_source_list.length > 0) {
//       // console.log(props.data_source_list[0]?.id, 888888888888888);
//       target_source.value = props.target_source_id || '';
//       handleChange(props.target_source_id);
//     } else {
//       target_source.value = '';
//     }
//   },
//   { immediate: true, deep: true }
// );
</script>
<style scoped lang="css">
.data-source {
  margin-bottom: 10px;
}
.data-source .title {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.data-source .select {
  width: 100%;
}
:deep(.arco-select-view-single) {
  background-color: var(--bg-title);
  color: var(--primary-default);
}
</style>