庄锐波
6 months ago
3 changed files with 139 additions and 0 deletions
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<el-card shadow="hover"> |
||||
|
<template #header> |
||||
|
<span style="font-weight: bold; font-size: 18px">模拟深i企登录</span> |
||||
|
</template> |
||||
|
|
||||
|
<el-form :model="formData" label-width="120px" style="max-width: 700px"> |
||||
|
<!-- 目标地址 --> |
||||
|
<el-form-item label="目标地址"> |
||||
|
<el-input v-model="formData.targetUrl" placeholder="请输入目标地址" clearable /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 登录账号选择 --> |
||||
|
<el-form-item label="登录账号"> |
||||
|
<el-select |
||||
|
v-model="formData.selectedIndex" |
||||
|
placeholder="请选择登录账号" |
||||
|
style="width: 100%" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(item, index) in userList" |
||||
|
:key="index" |
||||
|
:label="`${item.userName}（${item.loginName}）`" |
||||
|
:value="index" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 选中用户信息展示 --> |
||||
|
<el-form-item v-if="selectedUser" label="用户信息"> |
||||
|
<el-descriptions :column="1" border size="small"> |
||||
|
<el-descriptions-item label="用户名称">{{ selectedUser.userName }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="登录账号">{{ selectedUser.loginName }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="用户ID">{{ selectedUser.userId }}</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 拼接后的地址预览 --> |
||||
|
<el-form-item v-if="selectedUser" label="请求地址预览"> |
||||
|
<el-input |
||||
|
:model-value="previewUrl" |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 2, maxRows: 4 }" |
||||
|
readonly |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 操作按钮 --> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleMockLogin" :disabled="selectedUser == null"> |
||||
|
模拟登录 |
||||
|
</el-button> |
||||
|
<el-button @click="handleReset">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts" name="SiqMockLogin"> |
||||
|
import { ref, computed } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
|
||||
|
interface MockUser { |
||||
|
userName: string; |
||||
|
loginName: string; |
||||
|
userId: number | string; |
||||
|
} |
||||
|
|
||||
|
const DEFAULT_TARGET_URL = 'http://127.0.0.1:12001/enterprise/enterpriseHome'; |
||||
|
|
||||
|
/** 可选的登录账号列表 */ |
||||
|
const userList = ref<MockUser[]>([ |
||||
|
{ userName: '深圳农牧美益肉业有限公司', loginName: 'weil45', userId: 21 }, |
||||
|
{ userName: '深圳市深水龙岗污水处理有限公司', loginName: 'DGD440881199506180622', userId: 12 }, |
||||
|
{ userName: '深圳康泰生物制品股份有限公司', loginName: 'smiledzb1982', userId: 10 }, |
||||
|
{ userName: '深圳市里程食品有限公司', loginName: 'A7271888', userId: 9 }, |
||||
|
{ userName: '欧姆龙电子部件（深圳）有限公司', loginName: 'qintongzhen138', userId: 8 }, |
||||
|
{ userName: '深圳市强达电路股份有限公司', loginName: 'XP073215', userId: 7 }, |
||||
|
{ userName: '吉田拉链（深圳）有限公司公明工厂', loginName: '33ef1970fd449676fa4bc197', userId: 6 }, |
||||
|
]); |
||||
|
|
||||
|
const formData = ref({ |
||||
|
targetUrl: DEFAULT_TARGET_URL, |
||||
|
selectedIndex: undefined as number | undefined, |
||||
|
}); |
||||
|
|
||||
|
/** 当前选中的用户 */ |
||||
|
const selectedUser = computed<MockUser | null>(() => { |
||||
|
if (formData.value.selectedIndex != null) { |
||||
|
return userList.value[formData.value.selectedIndex]; |
||||
|
} |
||||
|
return null; |
||||
|
}); |
||||
|
|
||||
|
/** 预览拼接后的完整地址 */ |
||||
|
const previewUrl = computed(() => { |
||||
|
if (!selectedUser.value) return ''; |
||||
|
return buildMockLoginUrl(); |
||||
|
}); |
||||
|
|
||||
|
/** 构建模拟登录 URL */ |
||||
|
function buildMockLoginUrl(): string { |
||||
|
const user = selectedUser.value; |
||||
|
if (!user) return ''; |
||||
|
|
||||
|
const baseUrl = formData.value.targetUrl || DEFAULT_TARGET_URL; |
||||
|
const userInfo = JSON.stringify({ userName: user.userName, loginName: user.loginName, userId: user.userId }); |
||||
|
const params = new URLSearchParams(); |
||||
|
params.set('mockLogin', 'true'); |
||||
|
params.set('mockLoginFrom', 'siq'); |
||||
|
params.set('userInfo', userInfo); |
||||
|
|
||||
|
const separator = baseUrl.includes('?') ? '&' : '?'; |
||||
|
return `${baseUrl}${separator}${params.toString()}`; |
||||
|
} |
||||
|
|
||||
|
/** 模拟登录：打开新窗口 */ |
||||
|
function handleMockLogin() { |
||||
|
if (!selectedUser.value) { |
||||
|
ElMessage.warning('请先选择登录账号'); |
||||
|
return; |
||||
|
} |
||||
|
const url = buildMockLoginUrl(); |
||||
|
window.open(url, '_blank'); |
||||
|
} |
||||
|
|
||||
|
/** 重置表单 */ |
||||
|
function handleReset() { |
||||
|
formData.value.targetUrl = DEFAULT_TARGET_URL; |
||||
|
formData.value.selectedIndex = undefined; |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue