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

<template>
  <div class="shipping-template-management">
    <h2>运费模板管理</h2>
    
    <!-- 模式切换 -->
    <el-radio-group v-model="currentMode" style="margin-bottom: 20px;">
      <el-radio-button label="create">创建模板</el-radio-button>
      <el-radio-button label="edit">编辑模板</el-radio-button>
    </el-radio-group>
    
    <!-- 创建模板 -->
    <shipping-template-form
      v-if="currentMode === 'create'"
      :key="formKey"
      @save="handleSave"
      @cancel="handleCancel"
    />
    
    <!-- 编辑模板 -->
    <div v-else-if="currentMode === 'edit'">
      <!-- 模板选择 -->
      <el-card shadow="never" class="mb-4">
        <template #header>
          <div class="card-sub-header">
            <span>选择要编辑的模板</span>
          </div>
        </template>
        
        <el-form :model="selectedTemplateForm" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="选择模板">
                <el-select 
                  v-model="selectedTemplateForm.id" 
                  placeholder="请选择要编辑的模板"
                  style="width: 100%"
                  @change="handleTemplateSelect"
                >
                  <el-option
                    v-for="template in templateList"
                    :key="template.id"
                    :label="template.name"
                    :value="template.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作">
                <el-button 
                  type="danger" 
                  :disabled="!selectedTemplateForm.id"
                  @click="handleDeleteTemplate"
                >
                  删除选中模板
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      
      <!-- 模板编辑表单 -->
      <shipping-template-form
        v-if="editTemplateData"
        :key="formKey"
        :template-data="editTemplateData"
        :loading="loading"
        @save="handleSave"
        @cancel="handleCancel"
      />
      
      <!-- 加载提示 -->
      <div v-if="loading && !editTemplateData" class="loading-container">
        <el-skeleton animated />
      </div>
    </div>
  </div>
</template>

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

// 当前模式
const currentMode = ref('create')
const formKey = ref(0)
const loading = ref(false)

// 选中的模板表单
const selectedTemplateForm = reactive({
  id: null
})

// 编辑模板数据
const editTemplateData = ref(null)

// 模板列表
const templateList = ref([])

// 监听模式变化，当模式切换时更新key强制重新渲染组件
watch(currentMode, (newMode, oldMode) => {
  // 当在create和edit之间切换时，更新key值强制组件重新渲染
  if ((newMode === 'create' || newMode === 'edit') && (oldMode === 'create' || oldMode === 'edit')) {
    formKey.value += 1
    // 重置编辑相关数据
    if (newMode === 'edit') {
      selectedTemplateForm.id = null
      editTemplateData.value = null
    }
  }
  
  // 根据模式加载相应数据
  loadDataForMode(newMode)
})

// 组件挂载时加载初始数据
onMounted(() => {
  loadDataForMode(currentMode.value)
})

// 根据当前模式加载数据
const loadDataForMode = async (mode) => {
  if (mode === 'edit') {
    // 加载模板列表数据
    await loadTemplateList()
  }
}

// 加载模板列表数据
const loadTemplateList = async () => {
  loading.value = true
  try {
    // 这里需要传入实际的bizType和bizId参数
    // 示例中使用默认值
    const response = await getShippingTemplateList('product', 1)
    if (response.code === 200) {
      templateList.value = response.data.map(item => ({
        id: item.id,
        name: item.name
      }))
    } else {
      throw new Error(response.msg || '获取模板列表失败')
    }
  } catch (error) {
    console.error('加载模板列表失败:', error)
    ElMessage.error('模板列表加载失败: ' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

// 处理模板选择
const handleTemplateSelect = async (templateId) => {
  if (!templateId) {
    editTemplateData.value = null
    return
  }
  
  loading.value = true
  try {
    await loadEditTemplateData(templateId)
  } catch (error) {
    console.error('加载模板详情失败:', error)
    ElMessage.error('模板详情加载失败: ' + (error.message || '未知错误'))
    selectedTemplateForm.id = null
  } finally {
    loading.value = false
  }
}

// 加载编辑模板数据
const loadEditTemplateData = async (templateId) => {
  try {
    const response = await getShippingTemplateDetail(templateId)
    if (response.code === 200) {
      // 转换API返回的数据格式以适配组件
      const templateData = response.data
      editTemplateData.value = {
        templateInfo: {
          id: templateData.id,
          name: templateData.name,
          calcMethod: templateData.calc_method,
          unit: templateData.unit
        },
        defaultRule: {
          first: Number(templateData.default_rule.first) || 1,
          firstPrice: Number(templateData.default_rule.first_price) || 0,
          nextPrice: Number(templateData.default_rule.next_price) || 0
        },
        specialAreas: Array.isArray(templateData.special_areas) 
          ? templateData.special_areas.map(area => ({
              area_name: area.area_name || area.name || '',  // 优先使用area_name字段
              regions: Array.isArray(area.regions) 
                ? area.regions.map(region => ({
                    province_id: region.province_id,
                    province_name: region.province_name,
                    city_id: region.city_id,
                    city_name: region.city_name,
                    area_id: region.area_id,
                    area_name: region.area_name
                  }))
                : [],
              first: Number(area.first) || 1,
              firstPrice: Number(area.first_price) || 0,
              nextPrice: Number(area.next_price) || 0
            }))
          : []
      }
    } else {
      throw new Error(response.msg || '获取模板详情失败')
    }
  } catch (error) {
    throw error
  }
}

// 处理保存模板（创建或编辑）
const handleSave = async (templateData: any) => {
  try {
    let response;
    
    // 准备提交数据
    const submitData = {
      name: templateData.templateInfo.name,
      calc_method: templateData.templateInfo.calcMethod,
      unit: templateData.templateInfo.unit,
      sort: 100,
      default_rule: {
        first: templateData.defaultRule.first,
        first_price: templateData.defaultRule.firstPrice,
        next_price: templateData.defaultRule.nextPrice
      },
      special_areas: Array.isArray(templateData.specialAreas) 
        ? templateData.specialAreas.map((area: any) => ({
            area_name: area.area_name,
            first: area.first,
            first_price: area.firstPrice,
            next_price: area.nextPrice,
            regions: Array.isArray(area.regions)
                ? area.regions
                    .filter((region: any) => region && region.province_id)
                    .map((region: any) => ({
                      province_id: region.province_id || null,
                      province_name: region.province_name || '',
                      city_id: region.city_id || null,
                      city_name: region.city_name || null,
                      area_id: region.area_id || null,
                      area_name: region.area_name || null
                    }))
              : []
          }))
        : []
    }

    // 调试日志，查看提交的数据结构
    console.log('提交数据结构:', submitData);
    console.log('templateData:', templateData);
    
    // 根据当前模式判断是创建还是更新模板
    if (currentMode.value === 'edit' && templateData.templateInfo.id) {
      // 更新模板
      response = await updateShippingTemplate(templateData.templateInfo.id, submitData)
    } else {
      // 创建模板
      response = await createShippingTemplate(submitData)
    }

    if (response.code === 200) {
      const message = currentMode.value === 'edit' && templateData.templateInfo.id ? '模板更新成功' : '模板创建成功'
      ElMessage.success(message)
      
      // 如果是创建模板，重置表单
      if (currentMode.value === 'create') {
        formKey.value += 1  // 通过更新key来重置表单
      }
      
      // 如果是编辑模板，刷新模板列表
      if (currentMode.value === 'edit') {
        await loadTemplateList()
      }
      
      console.log('保存模板:', templateData)
    } else {
      ElMessage.error(response.msg || '操作失败')
    }
  } catch (error) {
    console.error('保存模板失败:', error)
    ElMessage.error('操作失败: ' + (error.message || '未知错误'))
  }
}

// 处理取消操作
const handleCancel = () => {
  ElMessage.info('操作已取消')
  console.log('取消操作')
  
  // 重置选择
  if (currentMode.value === 'edit') {
    selectedTemplateForm.id = null
    editTemplateData.value = null
  } else if (currentMode.value === 'create') {
    // 在创建模式下，重置表单
    formKey.value += 1  // 通过更新key来重置表单
  }
}

// 处理删除模板
const handleDeleteTemplate = async () => {
  if (!selectedTemplateForm.id) {
    ElMessage.warning('请先选择要删除的模板')
    return
  }
  
  try {
    // 获取选中模板的名称用于提示
    const selectedTemplate = templateList.value.find(t => t.id === selectedTemplateForm.id)
    const templateName = selectedTemplate ? selectedTemplate.name : '未知模板'
    
    await ElMessageBox.confirm(
      `确定要删除运费模板"${templateName}"吗？此操作不可恢复！`,
      '删除确认',
      {
        type: 'warning',
        confirmButtonText: '确定删除',
        cancelButtonText: '取消'
      }
    )
    
    const response = await deleteShippingTemplate(selectedTemplateForm.id)
    
    if (response.code === 200) {
      ElMessage.success('模板删除成功')
      // 重置选择
      selectedTemplateForm.id = null
      editTemplateData.value = null
      // 重新加载模板列表
      await loadTemplateList()
    } else {
      throw new Error(response.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除模板失败:', error)
      ElMessage.error('删除失败: ' + (error.message || '未知错误'))
    }
  }
}
</script>

<style scoped lang="scss">
.shipping-template-management {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
    color: #303133;
  }
  
  .card-sub-header {
    font-size: 16px;
    font-weight: bold;
  }
  
  .loading-container {
    padding: 20px;
  }
  
  .mb-4 {
    margin-bottom: 1rem;
  }
}
</style>