416 lines
15 KiB
Vue
416 lines
15 KiB
Vue
<template>
|
||
<div class="space-y-6">
|
||
<!-- 页面头部 -->
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-2xl font-bold text-gray-900">创建订单</h1>
|
||
<p class="text-gray-600 mt-1">创建新的翻译订单</p>
|
||
</div>
|
||
<div class="flex space-x-3">
|
||
<button
|
||
@click="$router.back()"
|
||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
||
>
|
||
返回
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单表单 -->
|
||
<div class="bg-white shadow rounded-lg">
|
||
<form @submit.prevent="handleSubmit" class="p-6 space-y-6">
|
||
<!-- 客户信息 -->
|
||
<div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">客户信息</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="clientName" class="block text-sm font-medium text-gray-700 mb-2">
|
||
客户姓名 *
|
||
</label>
|
||
<input
|
||
id="clientName"
|
||
v-model="orderForm.clientName"
|
||
type="text"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入客户姓名"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="clientPhone" class="block text-sm font-medium text-gray-700 mb-2">
|
||
联系电话 *
|
||
</label>
|
||
<input
|
||
id="clientPhone"
|
||
v-model="orderForm.clientPhone"
|
||
type="tel"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入联系电话"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="clientEmail" class="block text-sm font-medium text-gray-700 mb-2">
|
||
邮箱地址
|
||
</label>
|
||
<input
|
||
id="clientEmail"
|
||
v-model="orderForm.clientEmail"
|
||
type="email"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入邮箱地址"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="clientCompany" class="block text-sm font-medium text-gray-700 mb-2">
|
||
公司名称
|
||
</label>
|
||
<input
|
||
id="clientCompany"
|
||
v-model="orderForm.clientCompany"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入公司名称"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 翻译需求 -->
|
||
<div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">翻译需求</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="sourceLanguage" class="block text-sm font-medium text-gray-700 mb-2">
|
||
源语言 *
|
||
</label>
|
||
<select
|
||
id="sourceLanguage"
|
||
v-model="orderForm.sourceLanguage"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
>
|
||
<option value="">请选择源语言</option>
|
||
<option value="zh">中文</option>
|
||
<option value="en">英文</option>
|
||
<option value="ja">日文</option>
|
||
<option value="ko">韩文</option>
|
||
<option value="fr">法文</option>
|
||
<option value="de">德文</option>
|
||
<option value="es">西班牙文</option>
|
||
<option value="ru">俄文</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="targetLanguage" class="block text-sm font-medium text-gray-700 mb-2">
|
||
目标语言 *
|
||
</label>
|
||
<select
|
||
id="targetLanguage"
|
||
v-model="orderForm.targetLanguage"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
>
|
||
<option value="">请选择目标语言</option>
|
||
<option value="zh">中文</option>
|
||
<option value="en">英文</option>
|
||
<option value="ja">日文</option>
|
||
<option value="ko">韩文</option>
|
||
<option value="fr">法文</option>
|
||
<option value="de">德文</option>
|
||
<option value="es">西班牙文</option>
|
||
<option value="ru">俄文</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="serviceType" class="block text-sm font-medium text-gray-700 mb-2">
|
||
服务类型 *
|
||
</label>
|
||
<select
|
||
id="serviceType"
|
||
v-model="orderForm.serviceType"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
>
|
||
<option value="">请选择服务类型</option>
|
||
<option value="document">文档翻译</option>
|
||
<option value="interpretation">口译服务</option>
|
||
<option value="localization">本地化</option>
|
||
<option value="proofreading">校对服务</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="urgency" class="block text-sm font-medium text-gray-700 mb-2">
|
||
紧急程度 *
|
||
</label>
|
||
<select
|
||
id="urgency"
|
||
v-model="orderForm.urgency"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
>
|
||
<option value="normal">普通</option>
|
||
<option value="urgent">紧急</option>
|
||
<option value="rush">加急</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目详情 -->
|
||
<div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">项目详情</h3>
|
||
<div class="space-y-6">
|
||
<div>
|
||
<label for="projectTitle" class="block text-sm font-medium text-gray-700 mb-2">
|
||
项目标题 *
|
||
</label>
|
||
<input
|
||
id="projectTitle"
|
||
v-model="orderForm.projectTitle"
|
||
type="text"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入项目标题"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="projectDescription" class="block text-sm font-medium text-gray-700 mb-2">
|
||
项目描述 *
|
||
</label>
|
||
<textarea
|
||
id="projectDescription"
|
||
v-model="orderForm.projectDescription"
|
||
rows="4"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请详细描述翻译需求、专业领域、特殊要求等"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="expectedDelivery" class="block text-sm font-medium text-gray-700 mb-2">
|
||
期望交付时间 *
|
||
</label>
|
||
<input
|
||
id="expectedDelivery"
|
||
v-model="orderForm.expectedDelivery"
|
||
type="datetime-local"
|
||
required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
|
||
预算（元）
|
||
</label>
|
||
<input
|
||
id="budget"
|
||
v-model.number="orderForm.budget"
|
||
type="number"
|
||
min="0"
|
||
step="0.01"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入预算金额"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 附件上传 -->
|
||
<div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">附件上传</h3>
|
||
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6">
|
||
<div class="text-center">
|
||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||
</svg>
|
||
<div class="mt-4">
|
||
<label for="file-upload" class="cursor-pointer">
|
||
<span class="mt-2 block text-sm font-medium text-gray-900">
|
||
点击上传文件或拖拽文件到此处
|
||
</span>
|
||
<input id="file-upload" name="file-upload" type="file" class="sr-only" multiple @change="handleFileUpload" />
|
||
</label>
|
||
<p class="mt-1 text-xs text-gray-500">
|
||
支持 PDF, DOC, DOCX, TXT 等格式，单个文件最大 10MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已上传文件列表 -->
|
||
<div v-if="uploadedFiles.length > 0" class="mt-4">
|
||
<h4 class="text-sm font-medium text-gray-900 mb-2">已上传文件</h4>
|
||
<ul class="space-y-2">
|
||
<li v-for="(file, index) in uploadedFiles" :key="index" class="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||
<span class="text-sm text-gray-700">{{ file.name }}</span>
|
||
<button @click="removeFile(index)" class="text-red-600 hover:text-red-800">
|
||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备注信息 -->
|
||
<div>
|
||
<label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
|
||
备注信息
|
||
</label>
|
||
<textarea
|
||
id="notes"
|
||
v-model="orderForm.notes"
|
||
rows="3"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="其他需要说明的信息"
|
||
></textarea>
|
||
</div>
|
||
|
||
<!-- 提交按钮 -->
|
||
<div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
|
||
<button
|
||
type="button"
|
||
@click="$router.back()"
|
||
class="px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
:disabled="isSubmitting"
|
||
class="px-6 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{{ isSubmitting ? '创建中...' : '创建订单' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 页面元数据
|
||
definePageMeta({
|
||
middleware: 'auth'
|
||
})
|
||
|
||
// 页面标题
|
||
useHead({
|
||
title: '创建订单 - 翻译管理系统'
|
||
})
|
||
|
||
// 路由
|
||
const router = useRouter()
|
||
|
||
// 表单数据
|
||
const orderForm = ref({
|
||
clientName: '',
|
||
clientPhone: '',
|
||
clientEmail: '',
|
||
clientCompany: '',
|
||
sourceLanguage: '',
|
||
targetLanguage: '',
|
||
serviceType: '',
|
||
urgency: 'normal',
|
||
projectTitle: '',
|
||
projectDescription: '',
|
||
expectedDelivery: '',
|
||
budget: 0,
|
||
notes: ''
|
||
})
|
||
|
||
// 上传文件列表
|
||
const uploadedFiles = ref([])
|
||
|
||
// 提交状态
|
||
const isSubmitting = ref(false)
|
||
|
||
// 处理文件上传
|
||
const handleFileUpload = (event) => {
|
||
const files = Array.from(event.target.files)
|
||
files.forEach(file => {
|
||
if (file.size <= 10 * 1024 * 1024) { // 10MB限制
|
||
uploadedFiles.value.push(file)
|
||
} else {
|
||
alert(`文件 ${file.name} 超过10MB限制`)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 移除文件
|
||
const removeFile = (index) => {
|
||
uploadedFiles.value.splice(index, 1)
|
||
}
|
||
|
||
// 处理表单提交
|
||
const handleSubmit = async () => {
|
||
try {
|
||
isSubmitting.value = true
|
||
|
||
// 基本验证
|
||
if (!orderForm.value.clientName || !orderForm.value.clientPhone ||
|
||
!orderForm.value.sourceLanguage || !orderForm.value.targetLanguage ||
|
||
!orderForm.value.serviceType || !orderForm.value.projectTitle ||
|
||
!orderForm.value.projectDescription || !orderForm.value.expectedDelivery) {
|
||
throw new Error('请填写所有必填字段')
|
||
}
|
||
|
||
// 语言验证
|
||
if (orderForm.value.sourceLanguage === orderForm.value.targetLanguage) {
|
||
throw new Error('源语言和目标语言不能相同')
|
||
}
|
||
|
||
// 时间验证
|
||
const deliveryTime = new Date(orderForm.value.expectedDelivery)
|
||
const now = new Date()
|
||
if (deliveryTime <= now) {
|
||
throw new Error('交付时间必须晚于当前时间')
|
||
}
|
||
|
||
// 模拟API调用
|
||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
||
// 创建订单数据
|
||
const newOrder = {
|
||
id: `order_${Date.now()}`,
|
||
...orderForm.value,
|
||
files: uploadedFiles.value.map(file => ({
|
||
name: file.name,
|
||
size: file.size,
|
||
type: file.type
|
||
})),
|
||
status: 'pending',
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString()
|
||
}
|
||
|
||
console.log('创建订单:', newOrder)
|
||
|
||
// 显示成功消息
|
||
alert('订单创建成功')
|
||
|
||
// 返回订单列表页面
|
||
router.push('/orders')
|
||
|
||
} catch (error) {
|
||
alert(error.message || '创建订单失败，请重试')
|
||
} finally {
|
||
isSubmitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|