2 changed files with 136 additions and 1 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