440 lines
15 KiB
Vue
440 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="name" class="block text-sm font-medium text-gray-700 mb-2">
|
||
姓名 *
|
||
</label>
|
||
<input
|
||
id="name"
|
||
v-model="userForm.name"
|
||
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="email" class="block text-sm font-medium text-gray-700 mb-2">
|
||
邮箱地址 *
|
||
</label>
|
||
<input
|
||
id="email"
|
||
v-model="userForm.email"
|
||
type="email"
|
||
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="phone" class="block text-sm font-medium text-gray-700 mb-2">
|
||
手机号码 *
|
||
</label>
|
||
<input
|
||
id="phone"
|
||
v-model="userForm.phone"
|
||
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="role" class="block text-sm font-medium text-gray-700 mb-2">
|
||
用户角色 *
|
||
</label>
|
||
<select
|
||
id="role"
|
||
v-model="userForm.role"
|
||
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="user">普通用户</option>
|
||
<option value="interpreter">译员</option>
|
||
<option value="admin">管理员</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="gender" class="block text-sm font-medium text-gray-700 mb-2">
|
||
性别
|
||
</label>
|
||
<select
|
||
id="gender"
|
||
v-model="userForm.gender"
|
||
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="male">男</option>
|
||
<option value="female">女</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="birthDate" class="block text-sm font-medium text-gray-700 mb-2">
|
||
出生日期
|
||
</label>
|
||
<input
|
||
id="birthDate"
|
||
v-model="userForm.birthDate"
|
||
type="date"
|
||
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>
|
||
</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="password" class="block text-sm font-medium text-gray-700 mb-2">
|
||
初始密码 *
|
||
</label>
|
||
<input
|
||
id="password"
|
||
v-model="userForm.password"
|
||
type="password"
|
||
required
|
||
minlength="6"
|
||
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="请输入初始密码（至少6位）"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">
|
||
确认密码 *
|
||
</label>
|
||
<input
|
||
id="confirmPassword"
|
||
v-model="userForm.confirmPassword"
|
||
type="password"
|
||
required
|
||
minlength="6"
|
||
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="status" class="block text-sm font-medium text-gray-700 mb-2">
|
||
账户状态 *
|
||
</label>
|
||
<select
|
||
id="status"
|
||
v-model="userForm.status"
|
||
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="active">激活</option>
|
||
<option value="inactive">未激活</option>
|
||
<option value="suspended">暂停</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<input
|
||
id="requirePasswordChange"
|
||
v-model="userForm.requirePasswordChange"
|
||
type="checkbox"
|
||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label for="requirePasswordChange" class="ml-2 block text-sm text-gray-900">
|
||
首次登录要求修改密码
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 译员专业信息（仅译员角色显示）-->
|
||
<div v-if="userForm.role === 'interpreter'">
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">译员专业信息</h3>
|
||
<div class="space-y-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||
专业语言 *
|
||
</label>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div v-for="lang in availableLanguages" :key="lang.code" class="flex items-center">
|
||
<input
|
||
:id="`lang_${lang.code}`"
|
||
v-model="userForm.languages"
|
||
:value="lang.code"
|
||
type="checkbox"
|
||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label :for="`lang_${lang.code}`" class="ml-2 block text-sm text-gray-900">
|
||
{{ lang.name }}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="experience" class="block text-sm font-medium text-gray-700 mb-2">
|
||
工作经验（年）
|
||
</label>
|
||
<input
|
||
id="experience"
|
||
v-model.number="userForm.experience"
|
||
type="number"
|
||
min="0"
|
||
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="hourlyRate" class="block text-sm font-medium text-gray-700 mb-2">
|
||
时薪（元/小时）
|
||
</label>
|
||
<input
|
||
id="hourlyRate"
|
||
v-model.number="userForm.hourlyRate"
|
||
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>
|
||
<label for="specialties" class="block text-sm font-medium text-gray-700 mb-2">
|
||
专业领域
|
||
</label>
|
||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||
<div v-for="specialty in availableSpecialties" :key="specialty" class="flex items-center">
|
||
<input
|
||
:id="`specialty_${specialty}`"
|
||
v-model="userForm.specialties"
|
||
:value="specialty"
|
||
type="checkbox"
|
||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label :for="`specialty_${specialty}`" class="ml-2 block text-sm text-gray-900">
|
||
{{ specialty }}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="certifications" class="block text-sm font-medium text-gray-700 mb-2">
|
||
资质证书
|
||
</label>
|
||
<textarea
|
||
id="certifications"
|
||
v-model="userForm.certifications"
|
||
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>
|
||
</div>
|
||
|
||
<!-- 联系信息 -->
|
||
<div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">联系信息</h3>
|
||
<div class="space-y-6">
|
||
<div>
|
||
<label for="address" class="block text-sm font-medium text-gray-700 mb-2">
|
||
地址
|
||
</label>
|
||
<textarea
|
||
id="address"
|
||
v-model="userForm.address"
|
||
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>
|
||
<label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
|
||
备注
|
||
</label>
|
||
<textarea
|
||
id="notes"
|
||
v-model="userForm.notes"
|
||
rows="4"
|
||
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>
|
||
</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 userForm = ref({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
role: '',
|
||
gender: '',
|
||
birthDate: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
status: 'active',
|
||
requirePasswordChange: false,
|
||
languages: [],
|
||
experience: 0,
|
||
hourlyRate: 0,
|
||
specialties: [],
|
||
certifications: '',
|
||
address: '',
|
||
notes: ''
|
||
})
|
||
|
||
// 提交状态
|
||
const isSubmitting = ref(false)
|
||
|
||
// 可用语言列表
|
||
const availableLanguages = [
|
||
{ code: 'zh', name: '中文' },
|
||
{ code: 'en', name: '英文' },
|
||
{ code: 'ja', name: '日文' },
|
||
{ code: 'ko', name: '韩文' },
|
||
{ code: 'fr', name: '法文' },
|
||
{ code: 'de', name: '德文' },
|
||
{ code: 'es', name: '西班牙文' },
|
||
{ code: 'ru', name: '俄文' },
|
||
{ code: 'ar', name: '阿拉伯文' },
|
||
{ code: 'it', name: '意大利文' }
|
||
]
|
||
|
||
// 专业领域列表
|
||
const availableSpecialties = [
|
||
'商务会议',
|
||
'法律翻译',
|
||
'医疗翻译',
|
||
'技术翻译',
|
||
'学术会议',
|
||
'旅游陪同',
|
||
'展会翻译',
|
||
'政府会议',
|
||
'金融翻译',
|
||
'文学翻译'
|
||
]
|
||
|
||
// 处理表单提交
|
||
const handleSubmit = async () => {
|
||
try {
|
||
isSubmitting.value = true
|
||
|
||
// 基本验证
|
||
if (!userForm.value.name || !userForm.value.email || !userForm.value.phone ||
|
||
!userForm.value.role || !userForm.value.password || !userForm.value.confirmPassword) {
|
||
throw new Error('请填写所有必填字段')
|
||
}
|
||
|
||
// 密码确认验证
|
||
if (userForm.value.password !== userForm.value.confirmPassword) {
|
||
throw new Error('两次输入的密码不一致')
|
||
}
|
||
|
||
// 译员角色语言验证
|
||
if (userForm.value.role === 'interpreter' && userForm.value.languages.length === 0) {
|
||
throw new Error('译员角色需要选择至少一种专业语言')
|
||
}
|
||
|
||
// 模拟API调用
|
||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
||
// 创建用户数据
|
||
const newUser = {
|
||
id: `usr_${Date.now()}`,
|
||
...userForm.value,
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString()
|
||
}
|
||
|
||
// 移除确认密码字段
|
||
delete newUser.confirmPassword
|
||
|
||
console.log('创建用户:', newUser)
|
||
|
||
// 显示成功消息
|
||
alert('用户创建成功')
|
||
|
||
// 返回用户列表页面
|
||
router.push('/users')
|
||
|
||
} catch (error) {
|
||
alert(error.message || '创建用户失败，请重试')
|
||
} finally {
|
||
isSubmitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|