data-marketing-platform/src/views/count/featureUsage/eventMannage/BatchImportModal.vue

<template>
  <el-dialog
    v-model="visible"
    title="批量导入事件"
    width="500px"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="选择应用" required>
        <el-select 
          v-model="form.selectedApps" 
          multiple 
          placeholder="请选择应用"
          style="width: 100%"
        >
          <el-option
            v-for="app in appOptions"
            :key="app.value"
            :label="app.label"
            :value="app.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="选择文件">
        <el-button @click="selectFile">
          <el-icon><Upload /></el-icon>
          选择Excel文件
        </el-button>
        <br>
        <div v-if="form.fileName" class="file-name">{{ form.fileName }}</div>
      </el-form-item>
      
      <el-form-item label=" ">
        <el-button @click="downloadTemplate">
          <el-icon><Download /></el-icon>
          Excel模板下载
        </el-button>
      </el-form-item>
    </el-form>
    
    <div class="tips">
      <div class="tips-title">说明：</div>
      <div class="tips-content">
        <p>① 命名规范：事件标识符(event id)、事件属性标识符(key)命名支持字母(建议小写，避免使用中文)、数字、下划线 (_)、中划线 (-)、小数点 (.)及加号(+) 。event id和key长度不能超过128个字节。</p>
        <p>② 事件类型，1表示计算事件，0表示多参数类型事件</p>
        <p>③ 属性类型：number数值型（可计算），string字符串</p>
      </div>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleImport" :disabled="!canImport">导入</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { Upload, Download } from '@element-plus/icons-vue'

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'import', data: any): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 可见性绑定
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 表单数据
const form = reactive({
  selectedApps: [] as string[],
  fileName: '',
  file: null as File | null
})

// 应用选项
const appOptions = [
  { label: '教育行业Demo', value: 'education' },
  { label: '游戏行业Demo', value: 'game' },
  { label: '通用行业Demo', value: 'general' }
]

// 是否可以导入（已选择应用和文件）
const canImport = computed(() => {
  return form.selectedApps.length > 0 && form.file !== null
})

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  // 重置表单
  form.selectedApps = []
  form.fileName = ''
  form.file = null
}

// 选择文件
const selectFile = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xlsx,.xls'
  input.onchange = (e) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (file) {
      form.file = file
      form.fileName = file.name
    }
  }
  input.click()
}

// 下载模板
const downloadTemplate = () => {
  // 这里可以实现实际的模板下载逻辑
  console.log('下载模板')
  // 示例：创建一个虚拟的下载链接
  const link = document.createElement('a')
  link.href = 'data:application/vnd.ms-excel;base64,UEsDBAoAAAAAALJdHFYAAAAA' // 示例base64
  link.download = '事件导入模板.xlsx'
  link.click()
}

// 处理导入
const handleImport = () => {
  if (!canImport.value) return
  
  emit('import', {
    apps: form.selectedApps,
    file: form.file
  })
  
  handleClose()
}
</script>

<style scoped lang="scss">
.file-name {
  margin-top: 8px;
  font-size: 14px;
  color: #606266;
}

.tips {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  margin-top: 20px;
  
  .tips-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #303133;
  }
  
  .tips-content {
    font-size: 12px;
    color: #606266;
    line-height: 1.5;
    
    p {
      margin: 0 0 4px 0;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>