daShangDao_psiWebApp/backups/Login.vue.bak

<template>
	<div class="login-container">
		<div class="login-box">
			<div class="login-header">
				<h2>进销存系统</h2>
				<p>请选择登录角色</p>
			</div>

			<el-tabs v-model="activeTab" class="login-tabs">
				
				<el-tab-pane label="管理员登录" name="admin">
					<el-form ref="adminFormRef" :model="adminForm" :rules="rules" label-width="0" class="login-form">
						<el-form-item prop="username">
							<el-input v-model="adminForm.username" placeholder="请输入账号" :prefix-icon="User"
								size="large" />
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="adminForm.password" type="password" placeholder="请输入密码"
								:prefix-icon="Lock" size="large" show-password @keyup.enter="handleLogin" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :loading="loading" class="login-btn" size="large"
								@click="handleLogin">
								登录
							</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				
				<el-tab-pane label="代理登录" name="employee">
					<el-form ref="employeeFormRef" :model="employeeForm" :rules="rules" label-width="0"
						class="login-form">
						<el-form-item prop="username">
							<el-input v-model="employeeForm.username" placeholder="请输入账号" :prefix-icon="User"
								size="large" />
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="employeeForm.password" type="password" placeholder="请输入密码"
								:prefix-icon="Lock" size="large" show-password @keyup.enter="handleLogin" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :loading="loading" class="login-btn" size="large"
								@click="handleLogin">
								登录
							</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

			</el-tabs>

			<!-- <div class="login-footer">
				<p>默认账号：代理 init_00001 / 123456</p>
				<p>管理员 init_00000 / admin123</p>
			</div> -->
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		ElMessage
	} from 'element-plus'
	import {
		User,
		Lock
	} from '@element-plus/icons-vue'
	import request from '@/utils/request'
	import {
		setAdminToken,
		setAdminUserInfo
	} from '@/utils/auth'
	import { useUserStore } from '@/store/user'
	
	const userStore = useUserStore()

	const router = useRouter()
	const activeTab = ref('admin')
	const loading = ref(false)
	
	// 添加 ref 引用
	const employeeFormRef = ref(null)
	const adminFormRef = ref(null)

	const employeeForm = reactive({
		username: '',
		password: '',
		about_id:0
		// username: 'init_00001',
		// password: '123456'
	})

	const adminForm = reactive({
		username: '',
		password: '',
		about_id:0
		// username: 'init_00000',
		// password: 'admin123'
	})

	const rules = {
		username: [{
			required: true,
			message: '请输入账号',
			trigger: 'blur'
		}],
		password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			},
			{
				min: 6,
				message: '密码长度不能小于6位',
				trigger: 'blur'
			}
		]
	}

	const handleLogin = async () => {
		const formRef = activeTab.value === 'employee' ? employeeFormRef : adminFormRef
		const formData = activeTab.value === 'employee' ? employeeForm : adminForm

		await formRef.value.validate()

		loading.value = true
		try {
			const type = activeTab.value === 'admin' ? '255' : '128'
			const res = await request.post(`/login/${type}`, { ...formData, type: 1 })

			if (res.code === 200) {
				setAdminToken(res.data.token)
				setAdminUserInfo(res.data)
				userStore.setUserInfoAction(res.data)
				// 每次登录刷新配置为默认值
				localStorage.setItem('test_ip', '127.0.0.1')
				localStorage.setItem('test_port', '8080')
				ElMessage.success('登录成功')
				// 所有用户登录后都跳转到仪表盘
				router.push('/dashboard')
			}
		} catch (error) {
			// console.error('登录失败:', error)
		} finally {
			loading.value = false
		}
	}
</script>

<style scoped>
	.login-container {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.login-box {
		width: 400px;
		padding: 40px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.login-header {
		text-align: center;
		margin-bottom: 30px;
	}

	.login-header h2 {
		font-size: 24px;
		color: #333;
		margin-bottom: 10px;
	}

	.login-header p {
		color: #666;
		font-size: 14px;
	}

	.login-tabs {
		margin-bottom: 20px;
	}

	.login-form {
		margin-top: 20px;
	}

	.login-btn {
		width: 100%;
		margin-top: 10px;
	}

	.login-footer {
		margin-top: 30px;
		text-align: center;
		color: #999;
		font-size: 12px;
	}

	.login-footer p {
		margin: 5px 0;
	}
</style>