shipping-template/frontend/admin/views/SelectShippingTemplate.vue

<template>
  <div class="shipping-template-component">
    <!-- 选择模板 -->
    <el-select 
      v-model="selectedTemplateId" 
      placeholder="请选择运费模板"
      style="width: 100%"
    >
      <el-option
        v-for="template in templateList"
        :key="template.id"
        :label="template.name"
        :value="template.id"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getShippingTemplateList } from '../api/index.js'

// 定义组件props
const props = defineProps({
  // 业务类型
  bizType: {
    type: String,
    default: ''
  },
  // 业务ID
  bizId: {
    type: [String, Number],
    default: ''
  },
  // 当前模板ID（用于v-model绑定）
  modelValue: {
    type: [String, Number],
    default: ''
  }
})

// 定义组件事件
const emit = defineEmits(['update:modelValue', 'select', 'cancel'])

// 数据相关
const templateList = ref([])
const selectedTemplateId = ref(null)

// 监听modelValue变化，更新选中值
watch(() => props.modelValue, (newVal) => {
  selectedTemplateId.value = newVal
})

// 组件挂载时获取模板列表
onMounted(() => {
  // 初始化选中值
  selectedTemplateId.value = props.modelValue
  fetchTemplateList()
})

// 监听bizType和bizId的变化，重新获取模板列表
watch([() => props.bizType, () => props.bizId], () => {
  fetchTemplateList()
})

// 监听selectedTemplateId变化，更新外部v-model绑定的值
watch(selectedTemplateId, (newVal) => {
  emit('update:modelValue', newVal)
})

// 获取模板列表
const fetchTemplateList = async () => {
  try {
    const response = await getShippingTemplateList(props.bizType, props.bizId)
    templateList.value = response.data || []
    
    // 如果没有传递modelValue，则使用列表中selected为true的项作为当前模板
    if (!props.modelValue && templateList.value.length > 0) {
      const selectedTemplate = templateList.value.find(template => template.selected)
      if (selectedTemplate) {
        selectedTemplateId.value = selectedTemplate.id
      }
    }
  } catch (error) {
    console.error('获取运费模板列表失败:', error)
    ElMessage.error('获取运费模板列表失败')
    templateList.value = []
  }
}
</script>

<style scoped lang="scss">
.shipping-template-component {
  width: 100%;
}
</style>