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>
|
|||
|
|
|