AutoMedinfo/frontend/src/views/inquiry/InquiryCreate.vue

<template>
  <div class="inquiry-create">
    <el-card>
      <template #header>
        <span>创建查询请求</span>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="上传表格" name="upload">
          <el-upload
            class="upload-demo"
            drag
            :auto-upload="false"
            :on-change="handleFileChange"
            :limit="1"
            accept=".xlsx,.xls，.txt，.docx,.doc"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                请上传客户咨询的原始信息；只能上传 xlsx/xls/docx/doc/txt 文件，且不超过10MB;
              </div>
            </template>
          </el-upload>
          
          <div style="margin-top: 20px; text-align: center;">
            <el-button type="primary" @click="handleUpload" :loading="uploading">
              确认上传
            </el-button>
            <el-button @click="goBack">取消</el-button>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="手动填写" name="manual">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            style="max-width: 600px;"
          >
            <el-form-item label="客户姓名" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入客户姓名（可选）" />
            </el-form-item>
            
            <el-form-item label="客户邮箱" prop="customerEmail">
              <el-input v-model="form.customerEmail" placeholder="请输入客户邮箱（可选）" />
            </el-form-item>
            
            <el-form-item label="客户职称" prop="customerTitle">
              <el-input v-model="form.customerTitle" placeholder="请输入客户职称（可选）" />
            </el-form-item>
            
            <el-form-item label="查询内容" prop="inquiryContent">
              <el-input
                v-model="form.inquiryContent"
                type="textarea"
                :rows="8"
                placeholder="请输入查询内容（必填）"
              />
            </el-form-item>
            
            <el-form-item label="指派给" prop="assignedTo">
              <el-input v-model="form.assignedTo" placeholder="请输入指派人员（可选）" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitting">
                提交
              </el-button>
              <el-button @click="handleReset">重置</el-button>
              <el-button @click="goBack">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { uploadInquiry, createInquiry } from '@/api/inquiry'
import { ElMessage } from 'element-plus'

const router = useRouter()

const activeTab = ref('upload')
const uploading = ref(false)
const submitting = ref(false)
const uploadFile = ref(null)

const formRef = ref(null)
const form = ref({
  customerName: '',
  customerEmail: '',
  customerTitle: '',
  inquiryContent: '',
  assignedTo: ''
})

// 仅保留“查询内容”为必填，其余为可选
const rules = {
  inquiryContent: [
    { required: true, message: '请输入查询内容', trigger: 'blur' }
  ]
}

const handleFileChange = (file) => {
  uploadFile.value = file.raw
}

const handleUpload = async () => {
  if (!uploadFile.value) {
    ElMessage.warning('请先选择文件')
    return
  }
  
  uploading.value = true
  try {
    await uploadInquiry(uploadFile.value)
    ElMessage.success('上传成功')
    router.push('/inquiry/list')
  } catch (error) {
    ElMessage.error('上传失败')
  } finally {
    uploading.value = false
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        await createInquiry(form.value)
        ElMessage.success('创建成功')
        router.push('/inquiry/list')
      } catch (error) {
        ElMessage.error('创建失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

const handleReset = () => {
  formRef.value?.resetFields()
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.inquiry-create {
  width: 100%;
}

.upload-demo {
  margin: 40px auto;
  max-width: 600px;
}
</style>